From 93c7f81c0635ed81ca94ec633c09b13a680d7465 Mon Sep 17 00:00:00 2001
From: jamonholmgren <jamonholmgren@users.noreply.github.com>
Date: Thu, 25 Apr 2024 14:56:02 +0000
Subject: [PATCH] deploy: 0f962a10a04180fbb41190f9df62fb4d699905af

---
 404.html                                      |  4 ++--
 assets/js/5fd7ef2e.5a7769e9.js                |  1 +
 assets/js/5fd7ef2e.e238d7b4.js                |  1 -
 assets/js/main.98d21fb0.js                    |  2 ++
 ...CENSE.txt => main.98d21fb0.js.LICENSE.txt} |  0
 assets/js/main.d1a308a0.js                    |  2 --
 ...n.38f783f9.js => runtime~main.a014a881.js} |  2 +-
 docs/archive/PristineExpoProject/index.html   |  4 ++--
 docs/archive/index.html                       |  4 ++--
 docs/intro/index.html                         |  4 ++--
 .../recipes/AccessibilityFontSizes/index.html |  4 ++--
 docs/recipes/CircleCIRNSetup/index.html       |  4 ++--
 .../index.html                                |  4 ++--
 docs/recipes/DetoxIntro/index.html            |  4 ++--
 .../DistributingAuthTokenToAPI/index.html     |  4 ++--
 docs/recipes/EASUpdate/index.html             |  4 ++--
 docs/recipes/EnforcingImportOrder/index.html  |  4 ++--
 docs/recipes/EnvironmentVariables/index.html  |  4 ++--
 docs/recipes/ExpoRouter/index.html            |  4 ++--
 .../GeneratorComponentTests/index.html        |  4 ++--
 .../LocalFirstDataWithPowerSync/index.html    | 22 +++++++++----------
 docs/recipes/MaestroSetup/index.html          |  4 ++--
 docs/recipes/MigratingToMMKV/index.html       |  4 ++--
 .../PatchingBuildingAndroid/index.html        |  4 ++--
 docs/recipes/PrepForEASBuild/index.html       |  4 ++--
 .../ReactNativeVisionCamera/index.html        |  4 ++--
 docs/recipes/Redux/index.html                 |  4 ++--
 docs/recipes/RemoveMobxStateTree/index.html   |  4 ++--
 .../index.html                                |  4 ++--
 docs/recipes/SampleYAMLCircleCI/index.html    |  4 ++--
 .../SelectFieldWithBottomSheet/index.html     |  4 ++--
 .../recipes/SwitchBetweenExpoGoCNG/index.html |  4 ++--
 docs/recipes/TypeScriptBaseURL/index.html     |  4 ++--
 .../UnrenderedItemInScrollView/index.html     |  4 ++--
 docs/recipes/UpdatingDependencies/index.html  |  4 ++--
 docs/recipes/UpdatingIgnite/index.html        |  4 ++--
 docs/recipes/UsingScreenReaders/index.html    |  4 ++--
 docs/recipes/Zustand/index.html               |  4 ++--
 docs/tags/accessibility/index.html            |  4 ++--
 docs/tags/android/index.html                  |  4 ++--
 docs/tags/apisauce/index.html                 |  4 ++--
 docs/tags/archive/index.html                  |  4 ++--
 docs/tags/async-storage/index.html            |  4 ++--
 docs/tags/authentication/index.html           |  4 ++--
 docs/tags/babel/index.html                    |  4 ++--
 docs/tags/backend/index.html                  |  4 ++--
 docs/tags/ci-cd/index.html                    |  4 ++--
 docs/tags/cng/index.html                      |  4 ++--
 docs/tags/data-synchronization/index.html     |  4 ++--
 docs/tags/database/index.html                 |  4 ++--
 docs/tags/debug/index.html                    |  4 ++--
 docs/tags/dependencies/index.html             |  4 ++--
 docs/tags/eas-update/index.html               |  4 ++--
 docs/tags/eas/index.html                      |  4 ++--
 docs/tags/environment-variables/index.html    |  4 ++--
 docs/tags/expo-dev-client/index.html          |  4 ++--
 docs/tags/expo-router/index.html              |  4 ++--
 docs/tags/expo-updates/index.html             |  4 ++--
 docs/tags/expo/index.html                     |  4 ++--
 docs/tags/flat-list/index.html                |  4 ++--
 docs/tags/generator/index.html                |  4 ++--
 docs/tags/guide/index.html                    |  4 ++--
 docs/tags/hardware/index.html                 |  4 ++--
 docs/tags/i-os/index.html                     |  4 ++--
 docs/tags/imports/index.html                  |  4 ++--
 docs/tags/index.html                          |  4 ++--
 docs/tags/intro/index.html                    |  4 ++--
 docs/tags/maestro/index.html                  |  4 ++--
 docs/tags/mmkv/index.html                     |  4 ++--
 docs/tags/mob-x/index.html                    |  4 ++--
 docs/tags/offline-support/index.html          |  4 ++--
 docs/tags/power-sync/index.html               |  4 ++--
 docs/tags/prebuild/index.html                 |  4 ++--
 docs/tags/prettier/index.html                 |  4 ++--
 .../react-native-vision-camera/index.html     |  4 ++--
 docs/tags/react-native/index.html             |  4 ++--
 docs/tags/react-navigation/index.html         |  4 ++--
 docs/tags/redux/index.html                    |  4 ++--
 docs/tags/scroll-to/index.html                |  4 ++--
 docs/tags/section-list/index.html             |  4 ++--
 docs/tags/select-field/index.html             |  4 ++--
 docs/tags/state-management/index.html         |  4 ++--
 docs/tags/testing/index.html                  |  4 ++--
 docs/tags/text-field/index.html               |  4 ++--
 docs/tags/type-script/index.html              |  4 ++--
 .../index.html                                |  4 ++--
 docs/tags/ui/index.html                       |  4 ++--
 docs/tags/uses-feature/index.html             |  4 ++--
 docs/tags/vision-camera/index.html            |  4 ++--
 docs/tags/yarn/index.html                     |  4 ++--
 docs/tags/zustand/index.html                  |  4 ++--
 index.html                                    | 18 +++++++--------
 search/index.html                             |  4 ++--
 93 files changed, 194 insertions(+), 194 deletions(-)
 create mode 100644 assets/js/5fd7ef2e.5a7769e9.js
 delete mode 100644 assets/js/5fd7ef2e.e238d7b4.js
 create mode 100644 assets/js/main.98d21fb0.js
 rename assets/js/{main.d1a308a0.js.LICENSE.txt => main.98d21fb0.js.LICENSE.txt} (100%)
 delete mode 100644 assets/js/main.d1a308a0.js
 rename assets/js/{runtime~main.38f783f9.js => runtime~main.a014a881.js} (99%)

diff --git a/404.html b/404.html
index fcd9fc4c..0699db10 100644
--- a/404.html
+++ b/404.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/assets/js/5fd7ef2e.5a7769e9.js b/assets/js/5fd7ef2e.5a7769e9.js
new file mode 100644
index 00000000..532bfc81
--- /dev/null
+++ b/assets/js/5fd7ef2e.5a7769e9.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkignite_cookbook=self.webpackChunkignite_cookbook||[]).push([[656],{9044:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>i,default:()=>p,frontMatter:()=>a,metadata:()=>r,toc:()=>l});var s=t(7624),o=t(2172);const a={title:"PowerSync and Supabase for Local-First Data Management",description:"Enhance your app with PowerSync and Supabase for efficient data synchronization between your app's local database and backend",tags:["PowerSync","React Native","Backend","State management","Database","Data Synchronization","Offline Support"],last_update:{author:"Trevor Coleman"},publish_date:new Date("2024-03-22T00:00:00.000Z")},i="PowerSync and Supabase for Local-First Data Management",r={id:"recipes/LocalFirstDataWithPowerSync",title:"PowerSync and Supabase for Local-First Data Management",description:"Enhance your app with PowerSync and Supabase for efficient data synchronization between your app's local database and backend",source:"@site/docs/recipes/LocalFirstDataWithPowerSync.md",sourceDirName:"recipes",slug:"/recipes/LocalFirstDataWithPowerSync",permalink:"/docs/recipes/LocalFirstDataWithPowerSync",draft:!1,unlisted:!1,tags:[{label:"PowerSync",permalink:"/docs/tags/power-sync"},{label:"React Native",permalink:"/docs/tags/react-native"},{label:"Backend",permalink:"/docs/tags/backend"},{label:"State management",permalink:"/docs/tags/state-management"},{label:"Database",permalink:"/docs/tags/database"},{label:"Data Synchronization",permalink:"/docs/tags/data-synchronization"},{label:"Offline Support",permalink:"/docs/tags/offline-support"}],version:"current",lastUpdatedBy:"Trevor Coleman",lastUpdatedAt:1714056898,formattedLastUpdatedAt:"Apr 25, 2024",frontMatter:{title:"PowerSync and Supabase for Local-First Data Management",description:"Enhance your app with PowerSync and Supabase for efficient data synchronization between your app's local database and backend",tags:["PowerSync","React Native","Backend","State management","Database","Data Synchronization","Offline Support"],last_update:{author:"Trevor Coleman"},publish_date:"2024-03-22T00:00:00.000Z"},sidebar:"mainSidebar",previous:{title:"Generator for Component Tests",permalink:"/docs/recipes/GeneratorComponentTests"},next:{title:"Maestro Setup",permalink:"/docs/recipes/MaestroSetup"}},c={},l=[{value:"Introduction",id:"introduction",level:2},{value:"What is PowerSync?",id:"what-is-powersync",level:3},{value:"Benefits of Using PowerSync",id:"benefits-of-using-powersync",level:3},{value:"Using Other Backends",id:"using-other-backends",level:3},{value:"Prerequisites",id:"prerequisites",level:2},{value:"Installing SDK and Dependencies",id:"installing-sdk-and-dependencies",level:2},{value:"Install necessary dependencies for PowerSync.",id:"install-necessary-dependencies-for-powersync",level:3},{value:"Install necessary dependencies for Supabase",id:"install-necessary-dependencies-for-supabase",level:3},{value:"Configure Babel and Polyfills",id:"configure-babel-and-polyfills",level:3},{value:"Tell Expo to Disable the Expo Dev Client Network Inspector",id:"tell-expo-to-disable-the-expo-dev-client-network-inspector",level:3},{value:"Authenticating with Supabase",id:"authenticating-with-supabase",level:2},{value:"Add Supabase Config Variables to <code>BaseConfig</code>",id:"add-supabase-config-variables-to-baseconfig",level:3},{value:"Initialize the Supabase Client",id:"initialize-the-supabase-client",level:3},{value:"Create <code>useAuth</code> Hook and <code>AuthContext</code>",id:"create-useauth-hook-and-authcontext",level:3},{value:"Provide Auth State to Your Application",id:"provide-auth-state-to-your-application",level:3},{value:"Create <code>AuthScreen</code> for signing in /  registering",id:"create-authscreen-for-signing-in---registering",level:3},{value:"Create the <code>SignOutButton</code> component",id:"create-the-signoutbutton-component",level:3},{value:"Add <code>SignOutButton</code> to <code>WelcomeScreen</code>",id:"add-signoutbutton-to-welcomescreen",level:3},{value:"Update the <code>AppNavigator</code>",id:"update-the-appnavigator",level:3},{value:"Checking In",id:"checking-in",level:3},{value:"Connecting PowerSync to Supabase",id:"connecting-powersync-to-supabase",level:2},{value:"Add your PowerSync URL to your app config",id:"add-your-powersync-url-to-your-app-config",level:3},{value:"Define Your Schema",id:"define-your-schema",level:3},{value:"Typescript Types",id:"typescript-types",level:4},{value:"The Schema for our Todo App",id:"the-schema-for-our-todo-app",level:4},{value:"Implement the SupabaseConnector",id:"implement-the-supabaseconnector",level:3},{value:"PowerSyncBackendConnector Interface",id:"powersyncbackendconnector-interface",level:4},{value:"Implement SupabaseConnector",id:"implement-supabaseconnector",level:4},{value:"Create the DatabaseContext",id:"create-the-databasecontext",level:3},{value:"Wrap the app in the DatabaseProvider",id:"wrap-the-app-in-the-databaseprovider",level:3},{value:"Managing Lists of Todos",id:"managing-lists-of-todos",level:2},{value:"The <code>useLists</code> Hook",id:"the-uselists-hook",level:3},{value:"usePowerSyncWatchedQuery",id:"usepowersyncwatchedquery",level:4},{value:"PowerSync.execute()",id:"powersyncexecute",level:4},{value:"Disconnect PowerSync when we Sign Out",id:"disconnect-powersync-when-we-sign-out",level:4},{value:"install <code>expo-crypto</code> to generate UUIDs",id:"install-expo-crypto-to-generate-uuids",level:4},{value:"Implementing the <code>useLists</code> Hook",id:"implementing-the-uselists-hook",level:4},{value:"Create the Lists and AddLists Components",id:"create-the-lists-and-addlists-components",level:3},{value:"Add Lists to the Welcome Screen",id:"add-lists-to-the-welcome-screen",level:3},{value:"Display Todo Lists in <code>Lists</code>",id:"display-todo-lists-in-lists",level:3},{value:"Create Todo Lists with <code>AddList</code>",id:"create-todo-lists-with-addlist",level:3},{value:"Checking In",id:"checking-in-1",level:3},{value:"Viewing and Editing Individual TodoLists",id:"viewing-and-editing-individual-todolists",level:2},{value:"Create the TodoList Screen",id:"create-the-todolist-screen",level:3},{value:"Update the AppNavigator to include the <code>TodoList</code> screen",id:"update-the-appnavigator-to-include-the-todolist-screen",level:3},{value:"Update <code>Lists</code> so touching a list navigated to <code>TodoListScreen</code> and passes the <code>listId</code> param",id:"update-lists-so-touching-a-list-navigated-to-todolistscreen-and-passes-the-listid-param",level:3},{value:"Implement a <code>useList</code> hook to view and manage Todos for a List",id:"implement-a-uselist-hook-to-view-and-manage-todos-for-a-list",level:3},{value:"Implement <code>TodoListScreen</code> to Display and Edit Todos in a List",id:"implement-todolistscreen-to-display-and-edit-todos-in-a-list",level:3},{value:"Checking In",id:"checking-in-2",level:3},{value:"Congratulations!",id:"congratulations",level:2}];function d(e){const n={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.M)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"powersync-and-supabase-for-local-first-data-management",children:"PowerSync and Supabase for Local-First Data Management"}),"\n",(0,s.jsx)(n.h2,{id:"introduction",children:"Introduction"}),"\n",(0,s.jsx)(n.p,{children:"This guide helps you integrate PowerSync with Supabase in an Ignite app for efficient local-first data management."}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"https://www.powersync.com/",children:"PowerSync"})," allows your app to work smoothly offline while keeping the data in sync with your backend database."]}),"\n",(0,s.jsx)(n.h3,{id:"what-is-powersync",children:"What is PowerSync?"}),"\n",(0,s.jsx)(n.p,{children:"PowerSync is a service which synchronizes local data with your Postgres SQL back end. It lets your app work with a local copy of the users' data and automatically syncs changes to and from your backend."}),"\n",(0,s.jsx)(n.p,{children:"Because your application interacts with the data in a local instance of SQLite, it means you'll always have fast, responsive access -- no fetching, no spinners. It also means\nyour users will have a seamless, consistent experience even if they are offline."}),"\n",(0,s.jsx)(n.p,{children:"In the background, PowerSync queues any changes and syncs the local data with the server whenever an internet connection becomes available. That means the data stays up to date across all of their devices."}),"\n",(0,s.jsx)(n.h3,{id:"benefits-of-using-powersync",children:"Benefits of Using PowerSync"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Handles Intermittent Network Connectivity"}),": PowerSync allows your app to remain operational even in areas with\nunreliable internet access. Users can continue their tasks without interruption, with automatic syncing when the\nconnection is restored."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Enables Offline Operation"}),": With PowerSync, your application can fully function offline, allowing users to access\nand interact with their data regardless of their internet connection status."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Eliminates Loading Delays"}),": Leveraging local data minimizes the need for loading indicators, offering a smoother,\nfaster experience for the user."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Supports Multi-device Sync"}),": PowerSync ensures data consistency across all of a user's devices, enabling seamless\naccess and transition between different platforms.\nBy integrating PowerSync into your Ignite project, you provide a more reliable and user-friendly experience, ensuring\nyour application remains functional and responsive under various network conditions."]}),"\n"]}),"\n",(0,s.jsx)(n.h3,{id:"using-other-backends",children:"Using Other Backends"}),"\n",(0,s.jsx)(n.p,{children:"While this recipe uses Supabase for the backend, PowerSync can connect to almost any Postgres SQL backend and the process will be largely identical for other types of Postgres backends."}),"\n",(0,s.jsxs)(n.p,{children:["The major difference is that when the time comes, you will need to implement a ",(0,s.jsx)(n.code,{children:"PowerSyncBackendConnector"})," for your database in place of the ",(0,s.jsx)(n.code,{children:"SupabaseConnector"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["Check the ",(0,s.jsx)(n.a,{href:"https://docs.powersync.com/",children:"PowerSync documentation"})," for more information on connecting your database to PowerSync."]}),"\n",(0,s.jsx)(n.h2,{id:"prerequisites",children:"Prerequisites"}),"\n",(0,s.jsx)(n.p,{children:"To complete this recipe you'll need:"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsxs)(n.strong,{children:["An Ignite app using ",(0,s.jsx)(n.code,{children:"Expo CNG"})," workflow"]})}),"\n",(0,s.jsx)(n.p,{children:"Create a new Ignite app using the Ignite CLI::"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"npx ignite-cli@latest new PowerSyncIgnite --remove-demo --workflow=cng --yes\n"})}),"\n",(0,s.jsxs)(n.admonition,{type:"info",children:[(0,s.jsxs)(n.p,{children:["PowerSync requires native modules, so we need to use ",(0,s.jsx)(n.a,{href:"https://docs.expo.dev/workflow/continuous-native-generation/",children:"Expo with Continuous Native Generation (CNG)"}),"."]}),(0,s.jsxs)(n.p,{children:["If you are adding PowerSync to an app that currently uses Expo GO, you'll need to update your project to use either CNG or a ",(0,s.jsx)(n.a,{href:"https://docs.expo.dev/develop/development-builds/introduction/",children:"development build"}),"."]})]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"A Supabase Project set up and connected to a PowerSync"})}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["Follow the ",(0,s.jsx)(n.a,{href:"https://docs.powersync.com/integration-guides/supabase-+-powersync",children:"PowerSync + Supabase Integration Guide"})," to get this set up -- both PowerSync and Supabase have free tiers that you can use to get started."]}),"\n"]}),"\n",(0,s.jsxs)(n.ol,{start:"3",children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.strong,{children:"Configure or Disable Supabase Email Verification"})}),"\n"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"By default, Supabase requires email verification for new users. This should be configured for any production apps."}),"\n",(0,s.jsxs)(n.li,{children:["For the purposes of this recipe, you can disable this in the Supabase dashboard under:","\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Authentication"})," > ",(0,s.jsx)(n.strong,{children:"Providers"})," > ",(0,s.jsx)(n.strong,{children:"Email"})," > ",(0,s.jsx)(n.strong,{children:"Confirm Email"})]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"installing-sdk-and-dependencies",children:"Installing SDK and Dependencies"}),"\n",(0,s.jsx)(n.h3,{id:"install-necessary-dependencies-for-powersync",children:"Install necessary dependencies for PowerSync."}),"\n",(0,s.jsx)(n.p,{children:"First install the PowerSync SDK and its dependencies."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"npx expo install \\\n  @powersync/react-native \\\n  @journeyapps/react-native-quick-sqlite \n"})}),"\n",(0,s.jsxs)(n.p,{children:["PowerSync ",(0,s.jsx)(n.a,{href:"https://github.com/powersync-ja/powersync-js/blob/main/packages/react-native/README.md#install-polyfills",children:"requires polyfills"}),"\nto replace browser-specific APIs with their React Native equivalents. These are listed as peer-dependencies so we need\nto install them ourselves."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"npx expo install \\\n  react-native-fetch-api \\\n  react-native-polyfill-globals \\\n  react-native-url-polyfill \\\n  text-encoding \\\n  web-streams-polyfill@^3.2.1 \\\n  base-64 \\\n  @azure/core-asynciterator-polyfill \\\n  react-native-get-random-values\n"})}),"\n",(0,s.jsxs)(n.p,{children:["and install ",(0,s.jsx)(n.code,{children:"@babel/plugin-transform-async-generator-functions"})," as a dev dependency:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"yarn add -D @babel/plugin-transform-async-generator-functions\n"})}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsxs)(n.p,{children:["At the time of writing the PowerSync SDK is not compatible with ",(0,s.jsx)(n.code,{children:"web-streams-polyfill@4.0.0"}),", so be sure to specify version ",(0,s.jsx)(n.code,{children:"^3.2.1"}),"."]})}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsx)(n.p,{children:"These dependencies include native modules so you'll need to rebuild your app after installing."})}),"\n",(0,s.jsx)(n.h3,{id:"install-necessary-dependencies-for-supabase",children:"Install necessary dependencies for Supabase"}),"\n",(0,s.jsx)(n.p,{children:"First we need to install the Supabase SDK."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"npx expo install @supabase/supabase-js\n"})}),"\n",(0,s.jsxs)(n.p,{children:["and we'll also need to install ",(0,s.jsx)(n.code,{children:"@react-native-async-storage/async-storage"})," for persisting the Supabase session."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"npx expo install @react-native-async-storage/async-storage\n"})}),"\n",(0,s.jsx)(n.h3,{id:"configure-babel-and-polyfills",children:"Configure Babel and Polyfills"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsxs)(n.strong,{children:["1. Ensure polyfills are imported in your app's entry file, typically ",(0,s.jsx)(n.code,{children:"App.tsx"}),":"]})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:'import "react-native-polyfill-globals/auto"\nimport "@azure/core-asynciterator-polyfill"\n'})}),"\n",(0,s.jsx)(n.admonition,{type:"tip",children:(0,s.jsxs)(n.p,{children:["In a fresh Ignite app, this would be in ",(0,s.jsx)(n.code,{children:"app/app.tsx"}),". and placed at the top of the list of imports, right after\nthe Reactotron config."]})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"2. Add Babel Plugin"})}),"\n",(0,s.jsxs)(n.p,{children:["Update ",(0,s.jsx)(n.code,{children:"babel.config.js"})," to include the ",(0,s.jsx)(n.code,{children:"transform-async-generator-functions"})," plugin:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"/** @type {import('@babel/core').TransformOptions['plugins']} */\nconst plugins = [\n        //... other plugins\n        // success-line\n        '@babel/plugin-transform-async-generator-functions',  // <-- Add this\n        /** NOTE: This must be last in the plugins @see https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/#babel-plugin */\n        \"react-native-reanimated/plugin\",\n    ]\n\n"})}),"\n",(0,s.jsx)(n.h3,{id:"tell-expo-to-disable-the-expo-dev-client-network-inspector",children:"Tell Expo to Disable the Expo Dev Client Network Inspector"}),"\n",(0,s.jsxs)(n.p,{children:["The network inspector in the Expo Dev Client can ",(0,s.jsx)(n.a,{href:"https://docs.powersync.com/client-sdk-references/react-native-and-expo#android",children:"interfere with PowerSync's network requests"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["Because our app uses ",(0,s.jsx)(n.a,{href:"https://docs.expo.dev/workflow/continuous-native-generation/",children:"Expo CNG"})," we shouldn't edit the project's native files directly."]}),"\n",(0,s.jsxs)(n.p,{children:["Instead we can use the ",(0,s.jsx)(n.code,{children:"expo-build-properties"})," plugin to tell expo to disable the network inspector when building the android project."]}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["Open the project's ",(0,s.jsx)(n.code,{children:"app.json"})]}),"\n",(0,s.jsxs)(n.li,{children:["In ",(0,s.jsx)(n.code,{children:"expo.plugins"})," find ",(0,s.jsx)(n.code,{children:"expo-build-properties"})]}),"\n",(0,s.jsxs)(n.li,{children:["In the config object for the plugin, set ",(0,s.jsx)(n.code,{children:"android.networkInspector"})," to ",(0,s.jsx)(n.code,{children:"false"})]}),"\n",(0,s.jsxs)(n.li,{children:["Run ",(0,s.jsx)(n.code,{children:"expo prebuild"})," to apply the changes to your android project"]}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-json",children:'{\n  "expo": {\n    "plugins": [\n      // ...\n      [\n        "expo-build-properties",\n        {\n          "ios": {\n            "newArchEnabled": false,\n            "flipper": false\n          },\n          "android": {\n            "newArchEnabled": false,\n            // success-line\n            "networkInspector": false\n          }\n        }\n      ]\n      //...\n    ]\n    //...\n  }\n}\n'})}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsxs)(n.p,{children:["If you are not using Expo CNG, you can manually edit ",(0,s.jsx)(n.code,{children:"/android/gradle.properties"})," and set ",(0,s.jsx)(n.code,{children:"EXPO_DEV_CLIENT_NETWORK_INSPECTOR=false"})]})}),"\n",(0,s.jsx)(n.h2,{id:"authenticating-with-supabase",children:"Authenticating with Supabase"}),"\n",(0,s.jsx)(n.p,{children:"PowerSync needs a valid session token to authenticate your Supabase users. In the next section we'll implement a basic authentication flow that will let us sign in and out of Supabase."}),"\n",(0,s.jsxs)(n.h3,{id:"add-supabase-config-variables-to-baseconfig",children:["Add Supabase Config Variables to ",(0,s.jsx)(n.code,{children:"BaseConfig"})]}),"\n",(0,s.jsxs)(n.p,{children:["First add your Supabase config to your app's configuration. In ignite apps, config is kept in ",(0,s.jsx)(n.code,{children:"app/config/config.base.ts"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"You'll need:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"supabaseUrl"}),": Found through your Supabase dashboard under: ",(0,s.jsx)(n.strong,{children:"Project Settings"})," > ",(0,s.jsx)(n.strong,{children:"API"})," > ",(0,s.jsx)(n.strong,{children:"Project URL"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"supabaseAnonKey"}),": Found through your Supabase dashboard under: ",(0,s.jsx)(n.strong,{children:"Project Settings"})," > ",(0,s.jsx)(n.strong,{children:"API"})," > ",(0,s.jsx)(n.strong,{children:"Project API\nkeys"}),"."]}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"// `app/config/config.base.ts`:\n\n// update the interface to include the new properties\nexport interface ConfigBaseProps {\n  // Existing config properties\n\n  // success-line\n  supabaseUrl: string\n  // success-line\n  supabaseAnonKey: string\n}\n\n// Add the new properties to the config object\nconst BaseConfig: ConfigBaseProps = {\n  // Existing config values\n  // success-line\n  supabaseUrl: '<<YOUR_SUPABASE_URL>>',\n  // success-line\n  supabaseAnonKey: '<<YOUR_SUPABASE_ANON_KEY>>',\n}\n"})}),"\n",(0,s.jsx)(n.admonition,{type:"tip",children:(0,s.jsxs)(n.p,{children:["If you have different configurations for different environments, you can add these properties to ",(0,s.jsx)(n.code,{children:"config.dev.ts"})," and ",(0,s.jsx)(n.code,{children:"config.prod.ts"})," as needed."]})}),"\n",(0,s.jsx)(n.h3,{id:"initialize-the-supabase-client",children:"Initialize the Supabase Client"}),"\n",(0,s.jsxs)(n.p,{children:["Create ",(0,s.jsx)(n.code,{children:"app/services/database/supabase.ts"})," and add the following code to initialize the Supabase client:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"// app/services/database/supabase.ts\nimport AsyncStorage from '@react-native-async-storage/async-storage'\nimport { createClient } from \"@supabase/supabase-js\"\nimport { Config } from '../../config'\n\nexport const supabase = createClient(Config.supabaseUrl, Config.supabaseAnonKey, {\n  auth: {\n    persistSession: true, storage: AsyncStorage,\n  },\n})\n"})}),"\n",(0,s.jsxs)(n.admonition,{title:"Persisting the Supabase Session",type:"info",children:[(0,s.jsxs)(n.p,{children:["Unlike web environments where ",(0,s.jsx)(n.code,{children:"localStorage"})," is available, in React Native Supabase requires us to provide a key-value store to hold the session token."]}),(0,s.jsxs)(n.p,{children:["We're using ",(0,s.jsx)(n.code,{children:"AsyncStorage"})," here for simplicity, but if you need more security, Supabase provides an example of encrypting the session token using ",(0,s.jsx)(n.code,{children:"expo-secure-storage"})," in their ",(0,s.jsx)(n.a,{href:"https://supabase.com/docs/guides/getting-started/tutorials/with-expo-react-native?auth-store=secure-store#initialize-a-react-native-app",children:"React Native Auth example"})]})]}),"\n",(0,s.jsxs)(n.h3,{id:"create-useauth-hook-and-authcontext",children:["Create ",(0,s.jsx)(n.code,{children:"useAuth"})," Hook and ",(0,s.jsx)(n.code,{children:"AuthContext"})]}),"\n",(0,s.jsx)(n.p,{children:"Next we'll create a hook and context to manage the authentication state and make it accessible to our components."}),"\n",(0,s.jsxs)(n.p,{children:["Create ",(0,s.jsx)(n.code,{children:"app/services/database/use-auth.tsx"})," and add the following code:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/services/database/use-auth.tsx\nimport { User } from "@supabase/supabase-js"\nimport { supabase } from "app/services/database/supabase"\nimport React, { createContext, PropsWithChildren, useCallback, useContext, useMemo, useState } from "react"\n\ntype AuthContextType = {\n  signIn: (email: string, password: string) => void\n  signUp: (email: string, password: string) => void\n  signOut: () => Promise<void>\n  signedIn: boolean\n  loading: boolean\n  error: string\n  user: User | null\n}\n\n// We initialize the context with null to ensure that it is not used outside of the provider\nconst AuthContext = createContext<AuthContextType | null>(null)\n\n/**\n * AuthProvider manages the authentication state and provides the necessary methods to sign in, sign up and sign out.\n */\nexport const AuthProvider = ({ children }: PropsWithChildren<any>) => {\n  const [signedIn, setSignedIn] = useState(false)\n  const [loading, setLoading] = useState(false)\n  const [error, setError] = useState("")\n  const [user, setUser] = useState<User | null>(null)\n\n\n  // Sign in with provided email and password\n  const signIn = useCallback(async (email: string, password: string) => {\n    setLoading(true)\n    setError("")\n    setUser(null)\n    \n    try {\n      // get the session and user from supabase\n      const { \n        data: {session, user}, \n        error \n      } = await supabase.auth.signInWithPassword({ email, password })\n      \n      // if we have a session and user, sign them in\n      if (session && user) {\n        setSignedIn(true)\n        setUser(user)\n      // otherwise sign them out and set an error\n      } else {\n        throw new Error(error?.message);\n        setSignedIn(false)\n        setUser(null)\n      }\n    } catch (error: any) {\n      setError(error?.message ?? "Unknown error")\n      setSignedIn(false)\n      setUser(null)\n    } finally {\n      setLoading(false)\n    }\n  }, [\n    setSignedIn, setLoading, setError, setUser, supabase\n  ])\n\n  // Create a new account with provided email and password\n  const signUp = useCallback(async (email: string, password: string) => {\n    setLoading(true)\n    setError("")\n    setUser(null)\n    try {\n      const { data, error } = await supabase.auth.signUp({ email, password })\n      if (error) {\n        setSignedIn(false)\n        setError(error.message)\n      } else if (data.session) {\n        await supabase.auth.setSession(data.session)\n        setSignedIn(true)\n        setUser(data.user)\n      }\n    } catch (error: any) {\n      setUser(null)\n      setSignedIn(false)\n      setError(error?.message ?? "Unknown error")\n    } finally {\n      setLoading(false)\n    }\n  }, [\n    setSignedIn, setLoading, setError, setUser, supabase\n  ])\n\n  // Sign out the current user\n  const signOut = useCallback(async () => {\n    setLoading(true)\n    await supabase.auth.signOut()\n    setError("")\n    setSignedIn(false)\n    setLoading(false)\n    setUser(null)\n  }, [\n    setSignedIn, setLoading, setError, setUser, supabase\n  ])\n\n  // Always memoize context values as they can cause unnecessary re-renders if they aren\'t stable!\n  const value = useMemo(() => ({\n    signIn, signOut, signUp, signedIn, loading, error, user\n  }), [\n    signIn, signOut, signUp, signedIn, loading, error, user\n  ])\n  return <AuthContext.Provider value={ value }>{ children }</AuthContext.Provider>\n}\n\nexport const useAuth = () => {\n  const context = useContext(AuthContext)\n\n  // It\'s a good idea to throw an error if the context is null, as it means the hook is being used outside of the provider\n  if (context === null) {\n    throw new Error(\'useAuthContext must be used within a AuthProvider\')\n  }\n  return context\n}\n\n'})}),"\n",(0,s.jsx)(n.admonition,{type:"info",children:(0,s.jsxs)(n.p,{children:["For more information on setting up authentication with Supabase (including setting up for OAuth providers like Github, Google and Facebook), refer to the ",(0,s.jsx)(n.a,{href:"https://supabase.com/docs/guides/auth",children:"Supabase Auth documentation"}),"."]})}),"\n",(0,s.jsx)(n.admonition,{type:"tip",children:(0,s.jsx)(n.p,{children:"If authentication starts acting up, try refreshing your app from the Debug menu. Auth state is managed at the app level and that can cause issues with hot reloading."})}),"\n",(0,s.jsx)(n.h3,{id:"provide-auth-state-to-your-application",children:"Provide Auth State to Your Application"}),"\n",(0,s.jsxs)(n.p,{children:["Wrap your app with the ",(0,s.jsx)(n.code,{children:"AuthProvider"})," to provide the authentication state to your app:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/app.tsx\n// ...other imports\n// success-line\nimport { AuthProvider } from "app/services/database/use-auth"\n\n// ...\nfunction App(props: AppProps) {\n  // ...\n  return (\n    // success-line\n    <AuthProvider>\n      <SafeAreaProvider>\n        {/* ... */ }\n      </SafeAreaProvider>\n      // success-line\n    </AuthProvider>\n  )\n}\n\n\n'})}),"\n",(0,s.jsxs)(n.h3,{id:"create-authscreen-for-signing-in---registering",children:["Create ",(0,s.jsx)(n.code,{children:"AuthScreen"})," for signing in /  registering"]}),"\n",(0,s.jsx)(n.p,{children:"Use the Ignite CLI to generate a new screen for signing in:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"npx ignite-cli generate screen Auth\n"})}),"\n",(0,s.jsxs)(n.admonition,{type:"note",children:[(0,s.jsx)(n.p,{children:"This will:"}),(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["create a new screen in ",(0,s.jsx)(n.code,{children:"app/screens/AuthScreen.tsx"}),","]}),"\n",(0,s.jsxs)(n.li,{children:["add that screen to the ",(0,s.jsx)(n.code,{children:"AppNavigator"})," in ",(0,s.jsx)(n.code,{children:"app/navigators/AppNavigator.tsx"}),", and"]}),"\n",(0,s.jsxs)(n.li,{children:["update the ",(0,s.jsx)(n.code,{children:"Params"})," and ",(0,s.jsx)(n.code,{children:"ScreenProps"})," types"]}),"\n"]})]}),"\n",(0,s.jsxs)(n.p,{children:["Then open ",(0,s.jsx)(n.code,{children:"app/screens/AuthScreen.tsx"})," and update the ",(0,s.jsx)(n.code,{children:"AuthScreen"})," component to use the ",(0,s.jsx)(n.code,{children:"useAuth"})," hook to sign in."]}),"\n",(0,s.jsxs)(n.p,{children:["When the user signs in successfully, the app will automatically navigate to the ",(0,s.jsx)(n.code,{children:"Welcome"})," screen."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/screens/AuthScreen.tsx\nimport { AppStackScreenProps } from "app/navigators"\nimport { Button, Screen, Text, TextField } from "app/components"\nimport { useAuth } from "app/services/database/use-auth"\nimport React, { useEffect, useState } from "react"\nimport { ActivityIndicator, Modal, TextStyle, View, ViewStyle } from "react-native"\nimport { colors, spacing } from "../theme"\n\ninterface AuthScreenProps extends AppStackScreenProps<"Auth"> {}\n\nexport const AuthScreen: React.FC<AuthScreenProps> = ({ navigation }) => {\n  const { signUp, signIn, loading, error, user } = useAuth()\n  const [email, setEmail] = useState("")\n  const [password, setPassword] = useState("")\n\n  const handleSignIn = async () => {\n    signIn(email, password)\n  }\n\n  const handleSignUp = async () => {\n    signUp(email, password)\n  }\n\n  useEffect(() => {\n    if (user) {\n      navigation.navigate("Welcome")\n    }\n  }, [user])\n\n  return (\n    <Screen style={ $container } safeAreaEdges={ ["top"] }>\n      <Text preset={ "subheading" }>PowerSync + Supabase</Text>\n      <Text preset={ "heading" }>Sign in or Create Account</Text>\n      <TextField\n        inputWrapperStyle={ $inputWrapper }\n        containerStyle={ $inputContainer }\n        label={ "Email" }\n        value={ email }\n        inputMode={ "email" }\n        onChangeText={ setEmail }\n        keyboardType="email-address"\n        autoCapitalize={ "none" }\n      />\n      <TextField\n        containerStyle={ $inputContainer }\n        inputWrapperStyle={ $inputWrapper }\n        label={ "Password" }\n        value={ password }\n        onChangeText={ setPassword }\n        secureTextEntry\n      />\n\n      <View style={ $buttonContainer }>\n        <Button\n          disabled={ loading }\n          text={ "Sign In" }\n          onPress={ handleSignIn }\n          style={ $button }\n          preset={ "reversed" }\n        />\n\n        <Button\n          disabled={ loading }\n          text={ "Register New Account" }\n          onPress={ handleSignUp }\n          style={ $button }\n        />\n      </View>\n      { error ? <Text style={ $error } text={ error }/> : null }\n      <Modal transparent visible={ loading }>\n        <View style={ $modalBackground }>\n          <ActivityIndicator size="large" color={ colors.palette.primary500 }/>\n        </View>\n      </Modal>\n    </Screen>\n  )\n}\n\nconst $container: ViewStyle = {\n  backgroundColor: colors.background,\n  flex: 1,\n  justifyContent: "center",\n  paddingHorizontal: spacing.lg,\n}\n\nconst $inputContainer: TextStyle = {\n  marginTop: spacing.md,\n}\n\nconst $inputWrapper: TextStyle = {\n  backgroundColor: colors.palette.neutral100,\n}\nconst $modalBackground: ViewStyle = {\n  alignItems: "center",\n  backgroundColor: "#00000040",\n  flex: 1,\n  flexDirection: "column",\n  justifyContent: "space-around",\n}\n\nconst $error: TextStyle = {\n  color: colors.error,\n  marginVertical: spacing.md,\n  textAlign: "center",\n  width: "100%",\n  fontSize: 20,\n}\n\nconst $buttonContainer: ViewStyle = {\n  display: "flex",\n  flexDirection: "column",\n  justifyContent: "space-between",\n  marginVertical: spacing.md,\n}\n\nconst $button: ViewStyle = {\n  marginTop: spacing.xs,\n}\n'})}),"\n",(0,s.jsxs)(n.h3,{id:"create-the-signoutbutton-component",children:["Create the ",(0,s.jsx)(n.code,{children:"SignOutButton"})," component"]}),"\n",(0,s.jsx)(n.p,{children:"First use the ignite CLI to generate a new screen for signing out:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"npx ignite-cli generate component SignOutButton\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Then, update the component to show a button that calls ",(0,s.jsx)(n.code,{children:"signOut"})," from our ",(0,s.jsx)(n.code,{children:"useAuth"})," when pressed."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/components/SignOutButton.tsx\n\nimport { Button } from "app/components/Button"\nimport { useAuth } from "app/services/database/use-auth"\nimport * as React from "react"\nimport { StyleProp, View, ViewStyle } from "react-native"\nimport { observer } from "mobx-react-lite"\nimport { spacing } from "app/theme"\n\nexport interface SignOutButtonProps {\n  /**\n   * An optional style override useful for padding & margin.\n   */\n  style?: StyleProp<ViewStyle>\n}\n\n/**\n * Describe your component here\n */\nexport const SignOutButton = observer(function SignOutButton(props: SignOutButtonProps) {\n  const { style } = props\n  const $styles = [$container, style]\n\n  const { signOut } = useAuth()\n\n  const handleSignOut = async () => {\n    await signOut()\n  }\n\n  return (\n    <View style={ $styles }>\n      <Button text="Sign Out" onPress={ handleSignOut }/>\n    </View>\n  )\n})\n\nconst $container: ViewStyle = {\n  padding: spacing.md,\n}\n'})}),"\n",(0,s.jsxs)(n.h3,{id:"add-signoutbutton-to-welcomescreen",children:["Add ",(0,s.jsx)(n.code,{children:"SignOutButton"})," to ",(0,s.jsx)(n.code,{children:"WelcomeScreen"})]}),"\n",(0,s.jsxs)(n.p,{children:["Right now we just want to confirm that our authentication is working, so lets clear out the Welcome screen and add the ",(0,s.jsx)(n.code,{children:"SignOutButton"})," to it."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/screens/WelcomeScreen.tsx\nimport { NativeStackScreenProps } from "@react-navigation/native-stack"\nimport { Lists, SignOutButton } from "app/components"\nimport { DatabaseProvider } from "app/services/database/database"\nimport { observer } from "mobx-react-lite"\nimport React, { FC } from "react"\nimport { ViewStyle } from "react-native"\nimport { SafeAreaView } from "react-native-safe-area-context"\nimport { SignedInNavigatorParamList } from "../navigators"\nimport { colors } from "../theme"\n\nexport const WelcomeScreen: FC<WelcomeScreenProps> = observer(function WelcomeScreen() {\n  return (\n    <DatabaseProvider>\n      <SafeAreaView style={ $container }>\n        <SignOutButton/>\n      </SafeAreaView>\n    </DatabaseProvider>\n  )\n})\n\nconst $container: ViewStyle = {\n  flex: 1,\n  backgroundColor: colors.palette.neutral300,\n  display: "flex",\n  justifyContent: "flex-start",\n  height: "100%",\n  flexDirection: "column",\n}\n'})}),"\n",(0,s.jsxs)(n.h3,{id:"update-the-appnavigator",children:["Update the ",(0,s.jsx)(n.code,{children:"AppNavigator"})]}),"\n",(0,s.jsx)(n.p,{children:"We don't want to allow users to navigate to the Welcome screen if they are not signed in."}),"\n",(0,s.jsxs)(n.p,{children:["We can ensure this by checking the user's authentication status in the ",(0,s.jsx)(n.code,{children:"AppNavigator"})," and only allowing them to access the ",(0,s.jsx)(n.code,{children:"Auth"})," screen if they are not signed in."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/navigators/AppNavigator.tsx\n\n//...\n\nconst AppStack = observer(function AppStack() {\n  // Fetch the user from the auth context\n  // success-line\n  // success-line\n  const { signedIn } = useAuth()\n  return (\n    <Stack.Navigator\n      screenOptions={ { headerShown: false, navigationBarColor: colors.background } }\n    >\n      {/**\n       * by wrapping the Welcome screen in a conditional, we ensure that\n       * the user can only access it if they are signed in\n       */ }\n      // success-line\n      { signedIn\n        // success-line\n        ? <Stack.Screen name="Welcome" component={ Screens.WelcomeScreen }/>\n        // success-line\n        : null\n        // success-line\n      }\n      <Stack.Screen name="Auth" component={ Screens.AuthScreen }/>\n      {/* IGNITE_GENERATOR_ANCHOR_APP_STACK_SCREENS */ }\n    </Stack.Navigator>\n  )\n})\n\n// ...\n'})}),"\n",(0,s.jsx)(n.admonition,{type:"tip",children:(0,s.jsxs)(n.p,{children:["For more information on Authentication flows with ",(0,s.jsx)(n.code,{children:"react-navigation"})," see their docs: ",(0,s.jsx)(n.a,{href:"https://reactnavigation.org/docs/auth-flow/",children:"https://reactnavigation.org/docs/auth-flow/"})]})}),"\n",(0,s.jsx)(n.h3,{id:"checking-in",children:"Checking In"}),"\n",(0,s.jsx)(n.p,{children:"At this point you should be able to:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"sign in"})," and ",(0,s.jsx)(n.strong,{children:"sign out"})," of your app"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"sign up"})," for a new account."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["If you are getting errors about an unverified email -- remember to disable email verification in the Supabase dashboard as described in the ",(0,s.jsx)(n.a,{href:"#prerequisites",children:"Prerequisites"})," section."]}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsx)(n.p,{children:"This is a good time to commit your changes!"})}),"\n",(0,s.jsx)(n.h2,{id:"connecting-powersync-to-supabase",children:"Connecting PowerSync to Supabase"}),"\n",(0,s.jsx)(n.p,{children:"Now that we have a valid Supabase session, we can connect to PowerSync and start syncing data between the local database and the backend."}),"\n",(0,s.jsx)(n.p,{children:"We'll need to:"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsx)(n.li,{children:"Add our PowerSync URL to the app configuration"}),"\n",(0,s.jsx)(n.li,{children:"Define our data schema, and"}),"\n",(0,s.jsx)(n.li,{children:"Connect to the database"}),"\n"]}),"\n",(0,s.jsx)(n.h3,{id:"add-your-powersync-url-to-your-app-config",children:"Add your PowerSync URL to your app config"}),"\n",(0,s.jsx)(n.p,{children:"Just like we did with supabase, add the PowerSync URL to your app's configuration."}),"\n",(0,s.jsxs)(n.p,{children:["Your PowerSync URL can be found in your ",(0,s.jsx)(n.strong,{children:"PowerSync dashboard"}),":"]}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["Click on the ",(0,s.jsx)(n.strong,{children:"Edit Instance"})," button for your instance"]}),"\n",(0,s.jsxs)(n.li,{children:["Copy the ",(0,s.jsx)(n.strong,{children:"Instance URL"})," from the dialog that appears."]}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"// app/config/config.base.ts:\n\n// update the interface to include the new properties\nexport interface ConfigBaseProps {\n  // Existing config properties\n  supabaseUrl: string\n  supabaseAnonKey: string\n  // success-line\n  powersyncUrl: string\n}\n\n// Add the new properties to the config object\nconst BaseConfig: ConfigBaseProps = {\n  // Existing config values\n  supabaseUrl: '<<YOUR_SUPABASE_URL>>',\n  supabaseAnonKey: '<<YOUR_SUPABASE_ANON_KEY>>',\n  // success-line\n  powersyncUrl: '<<YOUR_POWER_SYNC_URL>>',\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"define-your-schema",children:"Define Your Schema"}),"\n",(0,s.jsxs)(n.p,{children:["First we need to define the schema for our database and TypeScript types in ",(0,s.jsx)(n.code,{children:"app/services/database/schema.ts"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"The Schema defines the data that PowerSync will sync between the local SQLite database and the backend."}),"\n",(0,s.jsxs)(n.p,{children:["From the ",(0,s.jsx)(n.a,{href:"https://docs.powersync.com/usage/installation/client-side-setup/define-your-schema#react-native-and-expo",children:"PowerSync docs"}),":"]}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:["The types available are ",(0,s.jsx)(n.code,{children:"TEXT"}),", ",(0,s.jsx)(n.code,{children:"INTEGER"})," and ",(0,s.jsx)(n.code,{children:"REAL"}),". These should map directly to the values produced by the ",(0,s.jsx)(n.a,{href:"https://docs.powersync.com/usage/sync-rules",children:"Sync Rules"}),". If a value doesn't match, it is cast automatically."]}),"\n"]}),"\n",(0,s.jsx)(n.h4,{id:"typescript-types",children:"Typescript Types"}),"\n",(0,s.jsx)(n.p,{children:"It's good to also define TypeScript types for your records, as this will help with type checking and autocompletion in your code."}),"\n",(0,s.jsx)(n.p,{children:"Keeping them with the schema will help keep your code organized and easy to maintain."}),"\n",(0,s.jsx)(n.admonition,{type:"tip",children:(0,s.jsxs)(n.p,{children:["PowerSync supports ",(0,s.jsx)(n.a,{href:"https://kysely.dev/",children:"Kysely"}),", which enables automatically generation of typescript types for your database. See ",(0,s.jsx)(n.a,{href:"https://releases.powersync.com/announcements/kysely-orm-integration-for-react-native-and-js-web-beta-release",children:"this announcement"})," for more information on how to set that up for your project."]})}),"\n",(0,s.jsx)(n.h4,{id:"the-schema-for-our-todo-app",children:"The Schema for our Todo App"}),"\n",(0,s.jsx)(n.p,{children:"Here is the schema we'll be using for our todo app:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"// app/services/database/schema.ts\nimport {\n  Column,\n  ColumnType,\n  Index,\n  IndexedColumn,\n  Schema,\n  Table\n} from '@powersync/react-native'\n\nexport const TODO_TABLE = 'todos'\nexport const LIST_TABLE = 'lists'\n\nexport interface ListRecord {\n  id: string\n  name: string\n  created_at: string\n  owner_id?: string\n}\n\nexport interface TodoRecord {\n  id: string\n  created_at: string\n  completed: boolean\n  description: string\n  completed_at?: string\n  created_by: string\n  completed_by?: string\n  list_id: string\n  photo_id?: string\n}\n\nexport const AppSchema = new Schema([\n  new Table({\n    name: 'todos',\n    columns: [\n      new Column({ name: 'list_id', type: ColumnType.TEXT }),\n      new Column({ name: 'created_at', type: ColumnType.TEXT }),\n      new Column({ name: 'completed_at', type: ColumnType.TEXT }),\n      new Column({ name: 'description', type: ColumnType.TEXT }),\n      new Column({ name: 'completed', type: ColumnType.INTEGER }),\n      new Column({ name: 'created_by', type: ColumnType.TEXT }),\n      new Column({ name: 'completed_by', type: ColumnType.TEXT })\n    ],\n    indexes: [\n      new Index({\n        name: 'list',\n        columns: [new IndexedColumn({ name: 'list_id' })]\n      })\n    ]\n  }),\n  new Table({\n    name: 'lists',\n    columns: [\n      new Column({ name: 'created_at', type: ColumnType.TEXT }),\n      new Column({ name: 'name', type: ColumnType.TEXT }),\n      new Column({ name: 'owner_id', type: ColumnType.TEXT })\n    ]\n  }),\n])\n\n"})}),"\n",(0,s.jsxs)(n.admonition,{title:"Automated Schema Generation",type:"tip",children:[(0,s.jsx)(n.p,{children:"PowerSync can generate a Javascript version of your schema for you."}),(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsx)(n.li,{children:"Right-click on your instance in the PowerSync dashboard"}),"\n",(0,s.jsx)(n.li,{children:'Select "Generate Client-Side Schema".'}),"\n"]}),(0,s.jsx)(n.p,{children:"This will generate a schema definition in javascript that will give you a good starting point for building the rest of your schema."})]}),"\n",(0,s.jsx)(n.h3,{id:"implement-the-supabaseconnector",children:"Implement the SupabaseConnector"}),"\n",(0,s.jsxs)(n.p,{children:["To tell PowerSync how to connect to the database we'll create a ",(0,s.jsx)(n.code,{children:"SupabaseConnector"}),", which implements the ",(0,s.jsx)(n.code,{children:"PowerSyncBackendConnector"})," interface with methods for fetching credentials and uploading data."]}),"\n",(0,s.jsx)(n.h4,{id:"powersyncbackendconnector-interface",children:"PowerSyncBackendConnector Interface"}),"\n",(0,s.jsxs)(n.p,{children:["The Supabase Connector needs to implement the ",(0,s.jsx)(n.code,{children:"PowerSyncBackendConnector"})," interface (",(0,s.jsx)(n.a,{href:"https://github.com/powersync-ja/powersync-js/blob/main/packages/common/src/client/connection/PowerSyncBackendConnector.ts",children:"declared here"}),"), ensuring it can seamlessly\ncommunicate with PowerSync for data synchronization."]}),"\n",(0,s.jsx)(n.p,{children:"The interface is straightforward and only requires two methods:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"// from @journeyapps/powersync-sdk-common \nexport interface PowerSyncBackendConnector {\n  /** Allows the PowerSync client to retrieve an authentication token from your backend\n   * which is used to authenticate against the PowerSync service.\n   *\n   * This should always fetch a fresh set of credentials - don't use cached\n   * values.\n   *\n   * Return null if the user is not signed in. Throw an error if credentials\n   * cannot be fetched due to a network error or other temporary error.\n   *\n   * This token is kept for the duration of a sync connection.\n   */\n  fetchCredentials: () => Promise<PowerSyncCredentials | null>\n\n  /** Upload local changes to the app backend.\n   *\n   * Use {@link AbstractPowerSyncDatabase.getCrudBatch} to get a batch of changes to upload.\n   *\n   * Any thrown errors will result in a retry after the configured wait period (default: 5 seconds).\n   */\n  uploadData: (database: AbstractPowerSyncDatabase) => Promise<void>\n}\n"})}),"\n",(0,s.jsx)(n.h4,{id:"implement-supabaseconnector",children:"Implement SupabaseConnector"}),"\n",(0,s.jsxs)(n.p,{children:["In ",(0,s.jsx)(n.code,{children:"app/services/database/supabase.ts"}),", we'll add the two methods, and then export an object that implements the ",(0,s.jsx)(n.code,{children:"PowerSyncBackendConnector"})," interface."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"// app/services/database/supabase.ts\nimport {\n  AbstractPowerSyncDatabase,\n  CrudEntry, PowerSyncBackendConnector,\n  UpdateType, PowerSyncCredentials\n} from \"@powersync/react-native\"\nimport AsyncStorage from '@react-native-async-storage/async-storage'\nimport { createClient } from \"@supabase/supabase-js\"\nimport Config from \"../../config\"\n\nexport const supabase = createClient(Config.supabaseUrl, Config.supabaseAnonKey, {\n  auth: {\n    persistSession: true, storage: AsyncStorage,\n  },\n})\n\n\n// This function fetches the session token from Supabase, it should return null if the user is not signed in, and the session token if they are.\nasync function fetchCredentials(): Promise<PowerSyncCredentials | null> {\n  const { data: { session }, error } = await supabase.auth.getSession()\n\n  if (error) {\n    throw new Error(`Could not fetch Supabase credentials: ${ error }`)\n  }\n\n  if (!session) {\n    return null\n  }\n\n  return {\n    endpoint: Config.powersyncUrl,\n    token: session.access_token ?? \"\",\n    expiresAt: session.expires_at\n               ? new Date(session.expires_at * 1000)\n               : undefined\n  }\n}\n\n\n// Regexes for response codes indicating unrecoverable errors.\nconst FATAL_RESPONSE_CODES = [\n  /^22...$/, // Data Exception\n  /^23...$/, // Integrity Constraint Violation\n  /^42501$/, // INSUFFICIENT PRIVILEGE\n]\n\n// PowerSync will call this function to upload data to the backend\nconst uploadData: (database: AbstractPowerSyncDatabase) => Promise<void> = async (database) => {\n  const transaction = await database.getNextCrudTransaction()\n\n  if (!transaction) {\n    return\n  }\n\n\n  let lastOp: CrudEntry | null = null\n  try {\n    // Note: If transactional consistency is important, use database functions\n    // or edge functions to process the entire transaction in a single call.\n    for (const op of transaction.crud) {\n      lastOp = op\n      const table = supabase.from(op.table)\n      let result: any = null\n      switch (op.op) {\n        case UpdateType.PUT:\n          // eslint-disable-next-line no-case-declarations\n          const record = { ...op.opData, id: op.id }\n          result = await table.upsert(record)\n          break\n        case UpdateType.PATCH:\n          result = await table.update(op.opData).eq('id', op.id)\n          break\n        case UpdateType.DELETE:\n          result = await table.delete().eq('id', op.id)\n          break\n      }\n\n      if (result?.error) {\n        throw new Error(`Could not ${ op.op } data to Supabase error: ${ JSON.stringify(result) }`)\n      }\n    }\n\n    await transaction.complete()\n  } catch (ex: any) {\n    console.debug(ex)\n    if (typeof ex.code === 'string' && FATAL_RESPONSE_CODES.some((regex) => regex.test(ex.code))) {\n      /**\n       * Instead of blocking the queue with these errors,\n       * discard the (rest of the) transaction.\n       *\n       * Note that these errors typically indicate a bug in the application.\n       * If protecting against data loss is important, save the failing records\n       * elsewhere instead of discarding, and/or notify the user.\n       */\n      console.error(`Data upload error - discarding ${ lastOp }`, ex)\n      await transaction.complete()\n    } else {\n      // Error may be retryable - e.g. network error or temporary server error.\n      // Throwing an error here causes this call to be retried after a delay.\n      throw ex\n    }\n  }\n}\n\nexport const supabaseConnector: PowerSyncBackendConnector = {\n  fetchCredentials, uploadData,\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"create-the-databasecontext",children:"Create the DatabaseContext"}),"\n",(0,s.jsx)(n.p,{children:"We need a single point of connection to the PowerSync instance that we can interact with throughout the app."}),"\n",(0,s.jsxs)(n.p,{children:["To achieve this we create a ",(0,s.jsx)(n.code,{children:"Database"})," singleton and provide a stable reference to that instance through our ",(0,s.jsx)(n.code,{children:"DatabaseContext"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"We'll check if the user is signed in or not before we initialize the database, as we need a valid session token to connect to the backend."}),"\n",(0,s.jsxs)(n.admonition,{type:"note",children:[(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"DatabaseProvider"})," component wraps its children in both the ",(0,s.jsx)(n.code,{children:"DatabaseContext.Provider"}),", and also the ",(0,s.jsx)(n.code,{children:"PowerSyncContext.Provider"})," provided by the PowerSync SDK."]}),(0,s.jsxs)(n.p,{children:["This is necessary because the hooks from the PowerSync SDK require the ",(0,s.jsx)(n.code,{children:"PowerSyncContext"})," to be present in the component tree, but we'll still need the DatabaseContext to get access to the powersync instance directly."]})]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/services/database/database.tsx\nimport { SupabaseClient } from "@supabase/supabase-js"\nimport { useAuth } from "./use-auth"\nimport React, { PropsWithChildren, useEffect } from "react"\nimport {\n  AbstractPowerSyncDatabase,\n  PowerSyncContext,\n  RNQSPowerSyncDatabaseOpenFactory,\n} from "@powersync/react-native"\nimport { supabase, supabaseConnector } from "./supabase" // Adjust the path as needed\nimport { AppSchema } from "./schema" // Adjust the path as needed\n\nexport class Database {\n  // We expose the PowerSync and Supabase instances for easy access elsewhere in the app\n  powersync: AbstractPowerSyncDatabase\n  supabase: SupabaseClient = supabase\n\n  /**\n   * Initialize the Database class with a new PowerSync instance\n   */\n  constructor() {\n    const factory = new RNQSPowerSyncDatabaseOpenFactory({\n      schema: AppSchema,\n      dbFilename: "sqlite.db",\n    })\n    this.powersync = factory.getInstance()\n  }\n\n  /**\n   * Initialize the PowerSync instance and connect it to the Supabase backend.\n   * This will call `fetchCredentials` on the Supabase connector to get the session token.\n   * So if your database requires authentication, the user will need to be signed in before this is\n   * called.\n   */\n  async init() {\n    await this.powersync.init()\n    await this.powersync.connect(supabaseConnector)\n  }\n\n  async disconnect() {\n    await this.powersync.disconnectAndClear()\n  }\n}\n\nconst database = new Database()\n\n// A context to provide our singleton to the rest of the app\nconst DatabaseContext = React.createContext<Database | null>(null)\n\nexport const useDatabase = () => {\n  const context: Database | null = React.useContext(DatabaseContext)\n  if (!context) {\n    throw new Error("useDatabase must be used within a DatabaseProvider")\n  }\n\n  return context\n}\n\n// Finally, we create a provider component that initializes the database and provides it to the app\nexport function DatabaseProvider<T>({ children }: PropsWithChildren<T>) {\n  const { user } = useAuth()\n  useEffect(() => {\n    if (user) {\n      database.init().catch(console.error)\n    }\n  }, [database, user])\n  return (\n    <DatabaseContext.Provider value={ database }>\n      <PowerSyncContext.Provider value={ database.powersync }>\n        { children }\n      </PowerSyncContext.Provider>\n    </DatabaseContext.Provider>\n  )\n}\n'})}),"\n",(0,s.jsx)(n.h3,{id:"wrap-the-app-in-the-databaseprovider",children:"Wrap the app in the DatabaseProvider"}),"\n",(0,s.jsxs)(n.p,{children:["Now that we have our ",(0,s.jsx)(n.code,{children:"DatabaseProvider"})," set up, we can wrap our app in it to provide the database instance to the rest of the app."]}),"\n",(0,s.jsxs)(n.p,{children:["Remember that the DatabaseProvider needs access to the users authentication state, so it should be wrapped in the ",(0,s.jsx)(n.code,{children:"AuthProvider"})," we created earlier."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/app.tsx\n\n\n//... other imports\n// success-line\n// Import the provder\n// success-line\nimport { DatabaseProvider } from "app/services/database/database"\n\n// ...\n\nfunction App(props: AppProps) {\n  // ...\n  return (\n    <AuthProvider>\n      // success-line\n      {/* Add the Database Provider inside the AuthProvider */ }\n      // success-line\n      <DatabaseProvider>\n        <SafeAreaProvider initialMetrics={ initialWindowMetrics }>\n          // ...\n        </SafeAreaProvider>\n        // success-line\n      </DatabaseProvider>\n    </AuthProvider>\n  )\n}\n\nexport default App\n\nconst $container: ViewStyle = {\n  flex: 1,\n}\n\n'})}),"\n",(0,s.jsx)(n.h2,{id:"managing-lists-of-todos",children:"Managing Lists of Todos"}),"\n",(0,s.jsx)(n.p,{children:"In our app we'll want the ability to:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"fetch the list of all the todo lists from the database"}),"\n",(0,s.jsx)(n.li,{children:"add a new todo list"}),"\n",(0,s.jsx)(n.li,{children:"delete a todo list"}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"To manage this we'll create the following:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["a ",(0,s.jsx)(n.code,{children:"useLists"})," hook to encapsulate the logic for fetching and managing the lists"]}),"\n",(0,s.jsxs)(n.li,{children:["a ",(0,s.jsx)(n.code,{children:"Lists"})," component to display the lists"]}),"\n",(0,s.jsxs)(n.li,{children:["an ",(0,s.jsx)(n.code,{children:"AddList"})," component with a form to add a new list"]}),"\n"]}),"\n",(0,s.jsxs)(n.h3,{id:"the-uselists-hook",children:["The ",(0,s.jsx)(n.code,{children:"useLists"})," Hook"]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"useLists"})," hook will encapsulate the logic for fetching and managing the lists."]}),"\n",(0,s.jsx)(n.p,{children:"It will use:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"usePowerSyncWatchedQuery"})," to fetch the lists from the database and watch for changes"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"PowerSync.execute"})," to create and delete lists"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"expo-crypto"})," to generate cryptographically secure random UUIDs"]}),"\n"]}),"\n",(0,s.jsx)(n.h4,{id:"usepowersyncwatchedquery",children:"usePowerSyncWatchedQuery"}),"\n",(0,s.jsx)(n.p,{children:"This hook is used to fetch data from the database and watch for changes. It will automatically re-fetch the data when the database changes."}),"\n",(0,s.jsx)(n.p,{children:"We'll implement our own in a second, but Here's an example of what that looks like:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"const lists = usePowerSyncWatchedQuery<ListItemRecord>(`\n    SELECT ${ LIST_TABLE }.*,\n         COUNT(${ TODO_TABLE }.id) AS total_tasks,\n         SUM(CASE WHEN ${ TODO_TABLE }.completed = true THEN 1 ELSE 0 END) AS completed_tasks\n    FROM ${ LIST_TABLE }\n         LEFT JOIN ${ TODO_TABLE } ON ${ LIST_TABLE }.id = ${ TODO_TABLE }.list_id\n    GROUP BY ${ LIST_TABLE }.id;\n  `);\n"})}),"\n",(0,s.jsx)(n.p,{children:"You can write complex queries to fetch data from the database, and the hook will automatically re-fetch the data when the database changes."}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsxs)(n.p,{children:["This hook needs to be inside a ",(0,s.jsx)(n.code,{children:"PowerSyncContext.Provider"})," (or our ",(0,s.jsx)(n.code,{children:"DatabaseProvider"}),") to work."]})}),"\n",(0,s.jsx)(n.h4,{id:"powersyncexecute",children:"PowerSync.execute()"}),"\n",(0,s.jsx)(n.p,{children:"This method is used to execute SQL queries against the database. We'll be using it here to create and delete lists."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"const deleteList = useCallback(async (id: string) => {\n  console.log('Deleting list', id)\n  return powersync.execute(`DELETE FROM ${ LIST_TABLE } WHERE id = ?`, [id])\n}, [powersync])\n"})}),"\n",(0,s.jsx)(n.h4,{id:"disconnect-powersync-when-we-sign-out",children:"Disconnect PowerSync when we Sign Out"}),"\n",(0,s.jsx)(n.p,{children:"When we sign out, we should disconnect the PowerSync instance from the backend to prevent any further data synchronization,\nand wipe the local database to ensure that no data is left behind."}),"\n",(0,s.jsxs)(n.p,{children:["To do this we'll update our ",(0,s.jsx)(n.code,{children:"SignOutButton"})," to call ",(0,s.jsx)(n.code,{children:"powersync.disconnectAndClear()"})," before we sign out of supabase."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/components/SignOutButton.tsx\n\n//...other imports\nimport { useDatabase } from "app/services/database/database"\n\n// ...\nexport const SignOutButton = observer(function SignOutButton(props: SignOutButtonProps) {\n  // ...\n\n  const { signOut } = useAuth()\n  // success-line\n  const { powersync } = useDatabase()\n\n  // success-line\n  const handleSignOut = async () => {  // make this async\n    // success-line\n    await powersync.disconnectAndClear()\n    await signOut()\n  }\n\n  return (\n    <View style={ $styles }>\n      <Button text="Sign Out" onPress={ handleSignOut }/>\n    </View>\n  )\n})\n\n'})}),"\n",(0,s.jsxs)(n.h4,{id:"install-expo-crypto-to-generate-uuids",children:["install ",(0,s.jsx)(n.code,{children:"expo-crypto"})," to generate UUIDs"]}),"\n",(0,s.jsx)(n.p,{children:"Because PowerSync data is local-first, we can't rely on the database to generate auto-incrementing unique ids for us."}),"\n",(0,s.jsx)(n.p,{children:"When we're offline, the server won't know how many items we've creating, or how many other devices are creating items."}),"\n",(0,s.jsx)(n.p,{children:"So in this situation, the app needs to be responsible for generating unique ids for items locally."}),"\n",(0,s.jsxs)(n.p,{children:["We'll use the ",(0,s.jsx)(n.code,{children:"randomUUID()"})," method from ",(0,s.jsx)(n.code,{children:"expo-crypto"})," for this. It generates UUIDs using cryptographically secure\nrandom values. This provides extra security and ensures that the generated UUIDs are unique."]}),"\n",(0,s.jsxs)(n.p,{children:["Install ",(0,s.jsx)(n.code,{children:"expo-crypto"})," by running this command in your terminal:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"npx expo add expo-crypto\n"})}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"expo-crypto"})," contains native modules, so you'll need to rebuild your app after installing it"]})}),"\n",(0,s.jsxs)(n.h4,{id:"implementing-the-uselists-hook",children:["Implementing the ",(0,s.jsx)(n.code,{children:"useLists"})," Hook"]}),"\n",(0,s.jsxs)(n.p,{children:["Now that we can generate random IDs, we can implement the ",(0,s.jsx)(n.code,{children:"useLists"})," hook:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:'// app/services/database/use-lists.ts\nimport { usePowerSyncWatchedQuery } from "@powersync/react-native"\nimport { useAuth } from "app/services/database/use-auth"\nimport { useCallback } from "react"\nimport { useDatabase } from "app/services/database/database"\nimport { LIST_TABLE, ListRecord, TODO_TABLE } from "app/services/database/schema"\nimport { randomUUID } from \'expo-crypto\'\n\n// Extend the base type with the calculated fields from our query  \nexport type ListItemRecord = ListRecord & { total_tasks: number; completed_tasks: number }\n\nexport const useLists = () => {\n  // Get the current user from the auth context \n  const { user } = useAuth()\n  // Get the database instance from the context\n  const { powersync } = useDatabase()\n\n  // List fetching logic here. You can modify it as per your needs.\n  const lists = usePowerSyncWatchedQuery<ListItemRecord>(`\n      SELECT ${ LIST_TABLE }.*,\n             COUNT(${ TODO_TABLE }.id) AS total_tasks,\n             SUM(CASE WHEN ${ TODO_TABLE }.completed = true THEN 1 ELSE 0 END) as completed_tasks\n      FROM ${ LIST_TABLE }\n               LEFT JOIN ${ TODO_TABLE } ON ${ LIST_TABLE }.id = ${ TODO_TABLE }.list_id\n      GROUP BY ${ LIST_TABLE }.id\n  `)\n\n\n  const createList = useCallback(async (name: string) => {\n\n    if (!user) {throw new Error("Can\'t add list -- user is undefined")}\n\n    return powersync.execute(\n      `\n          INSERT INTO ${ LIST_TABLE }\n              (id, name, created_at, owner_id)\n          VALUES (?, ?, ?, ?)`,\n      [randomUUID(), name, new Date().toISOString(), user?.id],\n    )\n  }, [user, powersync])\n\n  const deleteList = useCallback(async (id: string) => {\n    console.log(\'Deleting list\', id)\n    return powersync.execute(`DELETE\n                             FROM ${ LIST_TABLE }\n                             WHERE id = ?`, [id])\n  }, [powersync])\n\n  return { lists, createList, deleteList }\n}\n\n'})}),"\n",(0,s.jsx)(n.h3,{id:"create-the-lists-and-addlists-components",children:"Create the Lists and AddLists Components"}),"\n",(0,s.jsx)(n.p,{children:"We're going to need several components to view and manage our todo lists:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"AddList"})," - displays form to add a new list"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"Lists"})," - displays the list of todo lists and allows the user to delete them"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Let start by creating the components using the ignite CLI."}),"\n",(0,s.jsxs)(n.p,{children:["First create the ",(0,s.jsx)(n.code,{children:"AddList"})," and ",(0,s.jsx)(n.code,{children:"Lists"})," components:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"npx ignite-cli generate component AddList\n"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"npx ignite-cli generate component Lists\n"})}),"\n",(0,s.jsx)(n.h3,{id:"add-lists-to-the-welcome-screen",children:"Add Lists to the Welcome Screen"}),"\n",(0,s.jsxs)(n.p,{children:["Add the ",(0,s.jsx)(n.code,{children:"Lists"})," component to the ",(0,s.jsx)(n.code,{children:"WelcomeScreen"})]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/screens/WelcomeScreen.tsx\nimport { NativeStackScreenProps } from "@react-navigation/native-stack"\nimport { Lists, SignOutButton } from "app/components"\nimport { observer } from "mobx-react-lite"\nimport React, { FC } from "react"\nimport { ViewStyle } from "react-native"\nimport { SafeAreaView } from "react-native-safe-area-context"\nimport { SignedInNavigatorParamList } from "../navigators"\nimport { colors } from "../theme"\n\ninterface WelcomeScreenProps\n  extends NativeStackScreenProps<SignedInNavigatorParamList, "Welcome"> {}\n\nexport const WelcomeScreen: FC<WelcomeScreenProps> = observer(function WelcomeScreen() {\n  return (\n    <SafeAreaView style={ $container }>\n      <Lists/>\n      <SignOutButton/>\n    </SafeAreaView>\n  )\n})\n\nconst $container: ViewStyle = {\n  flex: 1,\n  backgroundColor: colors.palette.neutral300,\n  display: "flex",\n  justifyContent: "flex-start",\n  height: "100%",\n  flexDirection: "column",\n}\n\n\n'})}),"\n",(0,s.jsxs)(n.h3,{id:"display-todo-lists-in-lists",children:["Display Todo Lists in ",(0,s.jsx)(n.code,{children:"Lists"})]}),"\n",(0,s.jsxs)(n.p,{children:["Now we can use our ",(0,s.jsx)(n.code,{children:"useLists"})," hook in ",(0,s.jsx)(n.code,{children:"app/components/Lists.tsx"})," to display a list of our todo lists -- we don't have any in our database yet, but we'll add some soon!"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/components/Lists.tsx\nimport { NavigationProp, useNavigation } from "@react-navigation/native"\nimport { AddList, Icon, ListItem, Text } from "app/components"\nimport { AppStackParamList } from "app/navigators"\nimport { ListItemRecord, useLists } from "app/services/database/use-lists"\nimport React, { useCallback } from "react"\nimport { FlatList, TextStyle, View, ViewStyle } from "react-native"\nimport { colors, spacing } from "../theme"\n\nexport function Lists() {\n  \n  // use our hook to fetch the lists\n  const { lists, deleteList } = useLists()\n  const navigation = useNavigation<NavigationProp<AppStackParamList>>()\n\n  // This function tells FlatList how to render each item\n  const renderItem = useCallback(({ item }: { item: ListItemRecord }) => {\n    return (\n      <ListItem\n        textStyle={ $listItemText }\n        onPress={ () => {\n          // Eventually  this si where we\'ll navigate to the todo, but for now we\'ll just log the list name\n          console.log(\'Pressed: \', item.name)\n        } }\n        text={ `${ item.name }` }\n        RightComponent={\n          <View style={ $deleteListIcon }>\n            {/* Let users delete lists */}\n            <Icon icon={ "x" } onPress={ () => deleteList(item.id) }/>\n          </View>\n        }\n      />\n    )\n  }, [])\n\n  return (\n    <View style={ $container }>\n      <Text preset={ "heading" }>Lists</Text>\n      <View style={ $card }>\n        <AddList/>\n      </View>\n      <View style={ [$list, $card] }>\n        <Text preset={ "subheading" }>Your Lists</Text>\n        <FlatList\n          style={ $listContainer }\n          // pass in our lists\n          data={ lists }\n          // pass in our renderItem function\n          renderItem={ renderItem }\n          keyExtractor={ (item) => item.id }\n          ItemSeparatorComponent={ () => <View style={ $separator }/> }\n          // show a message if the list is empty\n          ListEmptyComponent={ <Text style={ $emptyList }>No lists found</Text> }\n        />\n      </View>\n    </View>\n  )\n}\n\n// STYLES\nconst $separator: ViewStyle = { height: 1, backgroundColor: colors.border }\nconst $emptyList: TextStyle = {\n  textAlign: "center",\n  color: colors.textDim,\n  opacity: 0.5,\n  padding: spacing.lg,\n}\nconst $card: ViewStyle = {\n  shadowColor: colors.palette.neutral800,\n  shadowOffset: { width: 0, height: 1 },\n  shadowRadius: 2,\n  shadowOpacity: 0.35,\n  borderRadius: 8,\n}\nconst $listContainer: ViewStyle = {\n  backgroundColor: colors.palette.neutral100,\n  paddingHorizontal: spacing.md,\n  height: "100%",\n  borderColor: colors.border,\n  borderWidth: 1,\n}\nconst $list: ViewStyle = {\n  flex: 1,\n  marginVertical: spacing.md,\n  backgroundColor: colors.palette.neutral200,\n  padding: spacing.md,\n}\nconst $container: ViewStyle = {\n  flex: 1,\n  display: "flex",\n  flexGrow: 1,\n  padding: spacing.md,\n}\nconst $listItemText: TextStyle = {\n  height: 44,\n  width: 44,\n}\nconst $deleteListIcon: ViewStyle = {\n  display: "flex",\n  justifyContent: "center",\n  alignItems: "center",\n  height: 44,\n  marginVertical: spacing.xxs,\n}\n'})}),"\n",(0,s.jsxs)(n.h3,{id:"create-todo-lists-with-addlist",children:["Create Todo Lists with ",(0,s.jsx)(n.code,{children:"AddList"})]}),"\n",(0,s.jsxs)(n.p,{children:["Open ",(0,s.jsx)(n.code,{children:"app/components/AddList.tsx"})," and update the ",(0,s.jsx)(n.code,{children:"AddList"})," component to display a simple form to add a new list."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/components/AddList.tsx\nimport { Button, Text, TextField } from "app/components"\nimport { useLists } from "app/services/database/use-lists"\nimport { colors, spacing } from "app/theme"\nimport { observer } from "mobx-react-lite"\nimport React from "react"\nimport { Keyboard, TextStyle, View, ViewStyle } from "react-native"\n\n/**\n * Display a form to add a new list\n */\nexport const AddList = observer(function AddList() {\n  const [newListName, setNewListName] = React.useState("")\n  const [error, setError] = React.useState<string | null>(null)\n\n  // we use the function from  our hook to create a new list\n  const { createList } = useLists()\n\n  const handleAddList = React.useCallback(async () => {\n    if (!newListName) {\n      Keyboard.dismiss()\n      return\n    }\n    try {\n      await createList(newListName)\n      setNewListName("")\n    } catch (e: any) {\n      setError(`Failed to create list: ${ e?.message ?? "unknown error" }`)\n    } finally {\n      Keyboard.dismiss()\n    }\n  }, [createList, newListName])\n\n  return (\n    <View style={ $container }>\n      <Text preset={ "subheading" }>Add a List</Text>\n      <View style={ $form }>\n        <TextField\n          placeholder="Enter a list name"\n          containerStyle={ $textField }\n          inputWrapperStyle={ $textInput }\n          onChangeText={ setNewListName }\n          value={ newListName }\n          onSubmitEditing={ handleAddList }\n        />\n        <Button text="Add List" style={ $button } onPress={ handleAddList }/>\n      </View>\n      { error && <Text style={ $error }>{ error }</Text> }\n    </View>\n  )\n})\n\nconst $container: ViewStyle = {\n  padding: spacing.md,\n  backgroundColor: colors.palette.neutral200,\n}\n\nconst $form: ViewStyle = {\n  display: "flex",\n  flexDirection: "row",\n  alignItems: "center",\n}\n\nconst $textField: ViewStyle = {\n  flex: 1,\n}\n\nconst $textInput: ViewStyle = {\n  backgroundColor: colors.palette.neutral100,\n}\n\nconst $button: ViewStyle = {\n  marginHorizontal: spacing.xs,\n  padding: 0,\n  paddingHorizontal: spacing.xs,\n  paddingVertical: 0,\n  minHeight: 44,\n}\n\nconst $error: TextStyle = {\n  color: colors.error,\n  marginTop: spacing.sm,\n}\n\n\n'})}),"\n",(0,s.jsx)(n.h3,{id:"checking-in-1",children:"Checking In"}),"\n",(0,s.jsx)(n.p,{children:"By this point you should be able to:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"add new Todo lists,"}),"\n",(0,s.jsx)(n.li,{children:"see a list of all the Todo lists,"}),"\n",(0,s.jsx)(n.li,{children:"delete Todo lists from the list of lists."}),"\n"]}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsx)(n.p,{children:"This is a good time to commit your changes!"})}),"\n",(0,s.jsx)(n.h2,{id:"viewing-and-editing-individual-todolists",children:"Viewing and Editing Individual TodoLists"}),"\n",(0,s.jsx)(n.p,{children:"To view and edit todos inside a list, we'll want to create a new Screen, and add it to the navigator so we can navigate to it."}),"\n",(0,s.jsx)(n.h3,{id:"create-the-todolist-screen",children:"Create the TodoList Screen"}),"\n",(0,s.jsxs)(n.p,{children:["First lets create a new screen called ",(0,s.jsx)(n.code,{children:"TodoList"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"npx ignite-cli generate screen TodoList\n"})}),"\n",(0,s.jsx)(n.p,{children:"This will eventually display the todos for a list. For now we'll just leave it as-is."}),"\n",(0,s.jsxs)(n.h3,{id:"update-the-appnavigator-to-include-the-todolist-screen",children:["Update the AppNavigator to include the ",(0,s.jsx)(n.code,{children:"TodoList"})," screen"]}),"\n",(0,s.jsxs)(n.p,{children:["Open ",(0,s.jsx)(n.code,{children:"app/navigators/SignedInNavigator.tsx"})," and add the ",(0,s.jsx)(n.code,{children:"TodoList"})," screen to the navigator."]}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Find the ",(0,s.jsx)(n.code,{children:"TodoList"})," screen in ",(0,s.jsx)(n.code,{children:"AppStackParamList"}),", and update it to take a ",(0,s.jsx)(n.code,{children:"listId"})," parameter."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"// app/navigators/AppNavigator.tsx\nexport type AppStackParamList = {\n  Welcome: undefined\n  Auth: undefined\n  // success-line\n  TodoList: { listId: string }  // add this line\n  // IGNITE_GENERATOR_ANCHOR_APP_STACK_PARAM_LIST\n}\n"})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Wrap ",(0,s.jsx)(n.code,{children:"WelcomeScreen"})," in a fragment (",(0,s.jsx)(n.code,{children:"<>...</>"}),") and move the ",(0,s.jsx)(n.code,{children:"TodoList"})," screen inside the fragment."]}),"\n",(0,s.jsx)(n.p,{children:"Because the fragment is wrapped in the conditional, it will only be rendered if the user is signed in."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// ...\n\nconst AppStack = observer(function AppStack() {\n  // Fetch the user from the auth context\n  const { signedIn } = useAuth()\n  return (\n    <Stack.Navigator screenOptions={ { headerShown: false, navigationBarColor: colors.background } }>\n      <Stack.Screen name={ "Auth" } component={ AuthScreen }/>\n      // success-line\n      { signedIn ? (\n        // success-line\n        <>\n          // success-line\n          <Stack.Screen name="Welcome" component={ Screens.WelcomeScreen }/>\n          // success-line\n          <Stack.Screen name="TodoList" component={ Screens.TodoListScreen }/>\n          // success-line\n        </>\n        // success-line\n      ) : null }\n      {/* IGNITE_GENERATOR_ANCHOR_APP_STACK_SCREENS */ }\n    </Stack.Navigator>\n  )\n})\n\nexport const AppNavigator = observer(function AppNavigator(props: NavigationProps) {\n  // ...   \n})\n'})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Open ",(0,s.jsx)(n.code,{children:"app/screens/TodoListScreen.tsx"})," and update the screen to receive the ",(0,s.jsx)(n.code,{children:"listId"})," parameter -- for now we'll just display it to make sure we got it."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/screens/TodoListScreen.tsx\n// ...\n\nexport const TodoListScreen: FC<TodoListScreenProps> = function TodoListScreen({\n  navigation,\n  // success-line\n  // We get the listId from the route params\n  // success-line\n  route: { params: {listId} }\n}) {\n  return (\n    <Screen style={ $root } preset="scroll" safeAreaEdges={ ["top"] }>\n      // success-line\n      <Pressable onPress={ () => navigation.goBack() }>\n        <Icon icon={ "back" } size={ 50 }/>\n      </Pressable>\n      // success-line\n      <Text preset={ "heading" } text={ listId }/>\n    </Screen>\n  )\n}\n\nconst $root: ViewStyle = {\n  flex: 1,\n}\n\nconst $backButton: ViewStyle = {\n  height: 44,\n}\n\n\n'})}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.h3,{id:"update-lists-so-touching-a-list-navigated-to-todolistscreen-and-passes-the-listid-param",children:["Update ",(0,s.jsx)(n.code,{children:"Lists"})," so touching a list navigated to ",(0,s.jsx)(n.code,{children:"TodoListScreen"})," and passes the ",(0,s.jsx)(n.code,{children:"listId"})," param"]}),"\n",(0,s.jsxs)(n.p,{children:["Now we can update the ",(0,s.jsx)(n.code,{children:"Lists"})," component to navigate to the ",(0,s.jsx)(n.code,{children:"TodoList"})," screen when a list is pressed."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/components/Lists.tsx\n\n// ... other imports\nimport { NavigationProp, useNavigation } from "@react-navigation/native"\nimport { AppStackParamList } from "app/navigators"\n\nexport function Lists() {\n\n  const { lists, deleteList } = useLists()\n  // We use the root param list, because this component might be reusing in other screens/navigators\n  // success-line\n  const navigation = useNavigation<NavigationProp<AppStackParamList>>()\n\n  const renderItem = useCallback(({ item }: { item: ListItemRecord }) => {\n    return <ListItem\n      // ... other props\n      // Navigate to the TodoList screen, passing the `listId` as a parameter\n      onPress={ () => {\n        // success-line\n        navigation.navigate("TodoList", { listId: item.id })\n      } }\n    />\n  }, [])\n\n  return (\n    //... component body\n  )\n}\n'})}),"\n",(0,s.jsxs)(n.h3,{id:"implement-a-uselist-hook-to-view-and-manage-todos-for-a-list",children:["Implement a ",(0,s.jsx)(n.code,{children:"useList"})," hook to view and manage Todos for a List"]}),"\n",(0,s.jsxs)(n.p,{children:["Now that we can navigate to the ",(0,s.jsx)(n.code,{children:"TodoList"})," screen, we can start fetching and managing the todos for a list."]}),"\n",(0,s.jsx)(n.p,{children:"Once again we'll create a hook to gather together the methods we'll likely use together."}),"\n",(0,s.jsxs)(n.p,{children:["The hook will take a ",(0,s.jsx)(n.code,{children:"listId"})," as a parameter, and return the list, the todos for that list, and functions to add and remove todos."]}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsxs)(n.p,{children:["We are using ",(0,s.jsx)(n.code,{children:"usePowerSyncQuery"})," to fetch the list and ",(0,s.jsx)(n.code,{children:"usePowerSyncWatchedQuery"})," to fetch the todos, because the list itself won't change often, so we only need to watch the todos for changes."]})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/services/database/use-list.ts\n\nimport { usePowerSyncQuery, usePowerSyncWatchedQuery } from "@powersync/react-native"\nimport { useDatabase } from "app/services/database/database"\nimport { LIST_TABLE, ListRecord, TODO_TABLE, TodoRecord } from "app/services/database/schema"\nimport { useAuth } from "app/services/database/use-auth"\nimport { useCallback } from "react"\nimport { randomUUID } from \'expo-crypto\'\n\n\nexport function useList(listId: string) {\n  const { user } = useAuth()\n  const { powersync } = useDatabase()\n\n\n  const listRecords = usePowerSyncQuery<ListRecord>(`\n      SELECT *\n      FROM ${ LIST_TABLE }\n      WHERE id = ?\n  `, [listId])\n\n  // we only expect one list record\n  const list = listRecords[0]\n\n\n  const todos = usePowerSyncWatchedQuery<TodoRecord>(`\n      SELECT *\n      FROM ${ TODO_TABLE }\n      WHERE list_id = ?\n  `, [listId])\n\n\n  const addTodo = useCallback(async (description: string): Promise<{ error: string | null }> => {\n    if (!user) {\n      throw new Error("Can\'t add todo -- user is undefined")\n    }\n    try {\n      await powersync.execute(\n        `INSERT INTO ${ TODO_TABLE }\n             (id, description, created_at, list_id, created_by, completed)\n         VALUES (?, ?, ?, ?, ?, ?)`,\n        [randomUUID(), description, new Date().toISOString(), listId, user?.id, 0],\n      )\n\n      return { error: null }\n    } catch (error: any) {\n      return { error: `Error adding todo: ${ error?.message }` }\n    }\n  }, [user, powersync, listId])\n\n  const removeTodo = useCallback(async (id: string): Promise<{ error: string | null }> => {\n    try {\n      await powersync.execute(`DELETE\n                                FROM ${ TODO_TABLE }\n                                WHERE id = ?`, [id])\n      return { error: null }\n    } catch (error: any) {\n      console.error("Error removing todo", error)\n      return { error: `Error removing todo: ${ error?.message }` }\n    }\n\n  }, [\n    powersync,\n  ])\n\n  const setTodoCompleted = useCallback(async (id: string, completed: boolean): Promise<{ error: string | null }> => {\n\n    const completedAt = completed ? new Date().toISOString() : null\n    const completedBy = completed ? user?.id : null\n\n    try {\n      await powersync.execute(`\n            UPDATE ${ TODO_TABLE }\n            SET completed = ?, completed_at = ?, completed_by = ?\n            WHERE id = ?\n        `, [completed, completedAt, completedBy, id])\n\n      return { error: null }\n\n    } catch (error: any) {\n      console.error(\'Error toggling todo\', error)\n      return { error: `Error toggling todo: ${ error?.message }` }\n    }\n  }, [powersync])\n\n\n  return { list, todos, addTodo, removeTodo, setTodoCompleted }\n\n}\n\n'})}),"\n",(0,s.jsxs)(n.h3,{id:"implement-todolistscreen-to-display-and-edit-todos-in-a-list",children:["Implement ",(0,s.jsx)(n.code,{children:"TodoListScreen"})," to Display and Edit Todos in a List"]}),"\n",(0,s.jsxs)(n.p,{children:["Now in our ",(0,s.jsx)(n.code,{children:"TodoList"})," screen we can use the ",(0,s.jsx)(n.code,{children:"useList"})," hook to fetch the todos for a list:"]}),"\n",(0,s.jsxs)(n.p,{children:["A lot of this should be familiar by now, we're using the ",(0,s.jsx)(n.code,{children:"useList"})," hook to fetch the list and todos, and then rendering them in a FlatList."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/screens/TodoListScreen.tsx\nimport { Button, Icon, ListItem, Screen, Text, TextField } from "app/components"\nimport { SignedInNavigatorScreenProps } from "app/navigators"\nimport { TodoRecord } from "app/services/database/schema"\nimport { useList } from "app/services/database/use-list"\nimport { colors, spacing } from "app/theme"\nimport React, { FC, useCallback } from "react"\nimport { FlatList, Pressable, TextStyle, View, ViewStyle } from "react-native"\nimport { SafeAreaView } from "react-native-safe-area-context"\n\ninterface TodoListScreenProps extends SignedInNavigatorScreenProps<"TodoList"> {}\n\nexport const TodoListScreen: FC<TodoListScreenProps> = function TodoListScreen({\n  navigation,\n  route: { params: { listId } },\n}) {\n\n  // We use the hook to get the list and todos for the list\n  const { list, todos, addTodo, removeTodo, setTodoCompleted } = useList(listId)\n\n  // State for managing the new todo input and errors\n  const [newTodo, setNewTodo] = React.useState("")\n  const [error, setError] = React.useState<string | null>(null)\n\n  // We wrap the addTodo from the hook with a bit of error handling\n  const handleAddTodo = useCallback(async () => {\n    const { error } = await addTodo(newTodo)\n    if (error) {\n      setError(error)\n      return\n    }\n    setNewTodo("")\n  }, [newTodo])\n\n  // And do the same for removeTodo\n  const handleRemoveTodo = useCallback(async (id: string) => {\n    const { error } = await removeTodo(id)\n    if (error) {\n      setError(error)\n    }\n  }, [removeTodo, setError])\n\n  // We\'ll use the ListItem component to display each todo, as we did with the lists\n  const renderItem = useCallback(({ item }: { item: TodoRecord }) => {\n    return <ListItem\n      containerStyle={ $listItemContainer }\n      textStyle={ [$listItemText, item.completed && $strikeThrough] }\n      text={ `${ item.description }` }\n      RightComponent={ (\n        <Pressable style={ $deleteIcon }>\n          <Icon icon={ "x" } onPress={ () => handleRemoveTodo(item.id) }/>\n        </Pressable>) }\n      onPress={ () => setTodoCompleted(item.id, !item.completed) }\n    />\n  }, [\n    handleRemoveTodo,\n  ])\n\n  return (\n    <Screen style={ $root } preset="fixed">\n      <SafeAreaView style={ $header } edges={ ["top"] }>\n        <Pressable onPress={ () => navigation.goBack() }>\n          <Icon icon={ "back" } size={ 44 }/>\n        </Pressable>\n        <Text style={ $listName } preset={ "heading" } text={ list?.name }/>\n      </SafeAreaView>\n      <View style={ $addTodoContainer }>\n        <Text preset={ "subheading" }>Add a list</Text>\n        <View style={ $form }>\n          <TextField\n            placeholder="New todo..."\n            containerStyle={ $textField }\n            inputWrapperStyle={ $textInput }\n            onChangeText={ setNewTodo }\n            value={ newTodo }/>\n          <Button text="ADD" style={ $button } onPress={ handleAddTodo }/>\n        </View>\n        { error && <Text style={ $error }>{ error }</Text> }\n      </View>\n      <View style={ $container }>\n        <FlatList\n          data={ todos }\n          renderItem={ renderItem }\n          ItemSeparatorComponent={ () => <View style={ $separator }/> }\n          ListEmptyComponent={ <Text style={ $emptyList }>List is Empty</Text> }\n        />\n      </View>\n    </Screen>\n  )\n}\n\nconst $root: ViewStyle = {\n  flex: 1,\n}\nconst $listItemContainer: ViewStyle = {\n  alignItems: "center",\n}\n\nconst $strikeThrough: TextStyle = { textDecorationLine: "line-through" }\n\nconst $form: ViewStyle = {\n  display: "flex",\n  flexDirection: "row",\n  alignItems: "center",\n}\n\nconst $separator: ViewStyle = { height: 1, backgroundColor: colors.border }\n\nconst $emptyList: TextStyle = {\n  color: colors.textDim,\n  opacity: 0.5,\n  padding: spacing.lg,\n  fontSize: 24,\n}\n\nconst $textField: ViewStyle = {\n  flex: 1,\n}\n\nconst $textInput: ViewStyle = {\n  backgroundColor: colors.palette.neutral100,\n}\n\n\nconst $button: ViewStyle = {\n  marginHorizontal: spacing.xs,\n  padding: 0,\n  paddingHorizontal: spacing.xs,\n  paddingVertical: 0,\n}\n\nconst $addTodoContainer: ViewStyle = {\n  padding: spacing.md,\n  backgroundColor: colors.palette.neutral300,\n}\nconst $header: ViewStyle = {\n  display: "flex",\n  flexDirection: "row",\n  alignItems: "center",\n  backgroundColor: colors.palette.secondary200,\n  paddingBottom: spacing.md,\n}\n\nconst $listName: TextStyle = {\n  marginLeft: spacing.sm,\n  flex: 1,\n}\n\nconst $error: TextStyle = {\n  color: colors.error,\n  marginTop: spacing.sm,\n}\n\nconst $container: ViewStyle = {\n  padding: spacing.md,\n}\n\nconst $listItemText: TextStyle = {\n  height: 44,\n  verticalAlign: "middle"\n}\n\nconst $deleteIcon: ViewStyle = {\n  display: "flex",\n  justifyContent: "center",\n  alignItems: "center",\n  height: 44,\n  marginVertical: spacing.xxs,\n}\n\n'})}),"\n",(0,s.jsx)(n.h3,{id:"checking-in-2",children:"Checking In"}),"\n",(0,s.jsx)(n.p,{children:"At this point you should be able to:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["Touch a list in the ",(0,s.jsx)(n.code,{children:"Lists"})," component and navigate to the ",(0,s.jsx)(n.code,{children:"TodoList"})," screen"]}),"\n",(0,s.jsxs)(n.li,{children:["See the list of todos in the list on the ",(0,s.jsx)(n.code,{children:"TodoList"})," screen"]}),"\n",(0,s.jsx)(n.li,{children:"Add and remove todos from the list"}),"\n",(0,s.jsx)(n.li,{children:"Toggle todos completed status by tapping them"}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"congratulations",children:"Congratulations!"}),"\n",(0,s.jsx)(n.p,{children:"Now you have all the tools you need use PowerSync and Supabase to build a local-first app with real-time sync!"})]})}function p(e={}){const{wrapper:n}={...(0,o.M)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},2172:(e,n,t)=>{t.d(n,{I:()=>r,M:()=>i});var s=t(1504);const o={},a=s.createContext(o);function i(e){const n=s.useContext(a);return s.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(o):e.components||o:i(e.components),s.createElement(a.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/5fd7ef2e.e238d7b4.js b/assets/js/5fd7ef2e.e238d7b4.js
deleted file mode 100644
index 5d35a10e..00000000
--- a/assets/js/5fd7ef2e.e238d7b4.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkignite_cookbook=self.webpackChunkignite_cookbook||[]).push([[656],{9044:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>i,default:()=>p,frontMatter:()=>a,metadata:()=>r,toc:()=>l});var s=t(7624),o=t(2172);const a={title:"PowerSync and Supabase for Local-First Data Management",description:"Enhance your app with PowerSync and Supabase for efficient data synchronization between your app's local database and backend",tags:["PowerSync","React Native","Backend","State management","Database","Data Synchronization","Offline Support"],last_update:{author:"Trevor Coleman"},publish_date:new Date("2024-03-22T00:00:00.000Z")},i="PowerSync and Supabase for Local-First Data Management",r={id:"recipes/LocalFirstDataWithPowerSync",title:"PowerSync and Supabase for Local-First Data Management",description:"Enhance your app with PowerSync and Supabase for efficient data synchronization between your app's local database and backend",source:"@site/docs/recipes/LocalFirstDataWithPowerSync.md",sourceDirName:"recipes",slug:"/recipes/LocalFirstDataWithPowerSync",permalink:"/docs/recipes/LocalFirstDataWithPowerSync",draft:!1,unlisted:!1,tags:[{label:"PowerSync",permalink:"/docs/tags/power-sync"},{label:"React Native",permalink:"/docs/tags/react-native"},{label:"Backend",permalink:"/docs/tags/backend"},{label:"State management",permalink:"/docs/tags/state-management"},{label:"Database",permalink:"/docs/tags/database"},{label:"Data Synchronization",permalink:"/docs/tags/data-synchronization"},{label:"Offline Support",permalink:"/docs/tags/offline-support"}],version:"current",lastUpdatedBy:"Trevor Coleman",lastUpdatedAt:1712961202,formattedLastUpdatedAt:"Apr 12, 2024",frontMatter:{title:"PowerSync and Supabase for Local-First Data Management",description:"Enhance your app with PowerSync and Supabase for efficient data synchronization between your app's local database and backend",tags:["PowerSync","React Native","Backend","State management","Database","Data Synchronization","Offline Support"],last_update:{author:"Trevor Coleman"},publish_date:"2024-03-22T00:00:00.000Z"},sidebar:"mainSidebar",previous:{title:"Generator for Component Tests",permalink:"/docs/recipes/GeneratorComponentTests"},next:{title:"Maestro Setup",permalink:"/docs/recipes/MaestroSetup"}},c={},l=[{value:"Introduction",id:"introduction",level:2},{value:"What is PowerSync?",id:"what-is-powersync",level:3},{value:"Benefits of Using PowerSync",id:"benefits-of-using-powersync",level:3},{value:"Using Other Backends",id:"using-other-backends",level:3},{value:"Prerequisites",id:"prerequisites",level:2},{value:"Installing SDK and Dependencies",id:"installing-sdk-and-dependencies",level:2},{value:"Install necessary dependencies for PowerSync.",id:"install-necessary-dependencies-for-powersync",level:3},{value:"Install necessary dependencies for Supabase",id:"install-necessary-dependencies-for-supabase",level:3},{value:"Configure Babel and Polyfills",id:"configure-babel-and-polyfills",level:3},{value:"Tell Expo to Disable the Expo Dev Client Network Inspector",id:"tell-expo-to-disable-the-expo-dev-client-network-inspector",level:3},{value:"Authenticating with Supabase",id:"authenticating-with-supabase",level:2},{value:"Add Supabase Config Variables to <code>BaseConfig</code>",id:"add-supabase-config-variables-to-baseconfig",level:3},{value:"Initialize the Supabase Client",id:"initialize-the-supabase-client",level:3},{value:"Create <code>useAuth</code> Hook and <code>AuthContext</code>",id:"create-useauth-hook-and-authcontext",level:3},{value:"Provide Auth State to Your Application",id:"provide-auth-state-to-your-application",level:3},{value:"Create <code>AuthScreen</code> for signing in /  registering",id:"create-authscreen-for-signing-in---registering",level:3},{value:"Create the <code>SignOutButton</code> component",id:"create-the-signoutbutton-component",level:3},{value:"Add <code>SignOutButton</code> to <code>WelcomeScreen</code>",id:"add-signoutbutton-to-welcomescreen",level:3},{value:"Update the <code>AppNavigator</code>",id:"update-the-appnavigator",level:3},{value:"Checking In",id:"checking-in",level:3},{value:"Connecting PowerSync to Supabase",id:"connecting-powersync-to-supabase",level:2},{value:"Add your PowerSync URL to your app config",id:"add-your-powersync-url-to-your-app-config",level:3},{value:"Define Your Schema",id:"define-your-schema",level:3},{value:"Typescript Types",id:"typescript-types",level:4},{value:"The Schema for our Todo App",id:"the-schema-for-our-todo-app",level:4},{value:"Implement the SupabaseConnector",id:"implement-the-supabaseconnector",level:3},{value:"PowerSyncBackendConnector Interface",id:"powersyncbackendconnector-interface",level:4},{value:"Implement SupabaseConnector",id:"implement-supabaseconnector",level:4},{value:"Create the DatabaseContext",id:"create-the-databasecontext",level:3},{value:"Wrap the app in the DatabaseProvider",id:"wrap-the-app-in-the-databaseprovider",level:3},{value:"Managing Lists of Todos",id:"managing-lists-of-todos",level:2},{value:"The <code>useLists</code> Hook",id:"the-uselists-hook",level:3},{value:"usePowerSyncWatchedQuery",id:"usepowersyncwatchedquery",level:4},{value:"PowerSync.execute()",id:"powersyncexecute",level:4},{value:"Disconnect PowerSync when we Sign Out",id:"disconnect-powersync-when-we-sign-out",level:4},{value:"install <code>expo-crypto</code> to generate UUIDs",id:"install-expo-crypto-to-generate-uuids",level:4},{value:"Implementing the <code>useLists</code> Hook",id:"implementing-the-uselists-hook",level:4},{value:"Create the Lists and AddLists Components",id:"create-the-lists-and-addlists-components",level:3},{value:"Add Lists to the Welcome Screen",id:"add-lists-to-the-welcome-screen",level:3},{value:"Display Todo Lists in <code>Lists</code>",id:"display-todo-lists-in-lists",level:3},{value:"Create Todo Lists with <code>AddList</code>",id:"create-todo-lists-with-addlist",level:3},{value:"Checking In",id:"checking-in-1",level:3},{value:"Viewing and Editing Individual TodoLists",id:"viewing-and-editing-individual-todolists",level:2},{value:"Create the TodoList Screen",id:"create-the-todolist-screen",level:3},{value:"Update the AppNavigator to include the <code>TodoList</code> screen",id:"update-the-appnavigator-to-include-the-todolist-screen",level:3},{value:"Update <code>Lists</code> so touching a list navigated to <code>TodoListScreen</code> and passes the <code>listId</code> param",id:"update-lists-so-touching-a-list-navigated-to-todolistscreen-and-passes-the-listid-param",level:3},{value:"Implement a <code>useList</code> hook to view and manage Todos for a List",id:"implement-a-uselist-hook-to-view-and-manage-todos-for-a-list",level:3},{value:"Implement <code>TodoListScreen</code> to Display and Edit Todos in a List",id:"implement-todolistscreen-to-display-and-edit-todos-in-a-list",level:3},{value:"Checking In",id:"checking-in-2",level:3},{value:"Congratulations!",id:"congratulations",level:2}];function d(e){const n={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.M)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"powersync-and-supabase-for-local-first-data-management",children:"PowerSync and Supabase for Local-First Data Management"}),"\n",(0,s.jsx)(n.h2,{id:"introduction",children:"Introduction"}),"\n",(0,s.jsx)(n.p,{children:"This guide helps you integrate PowerSync with Supabase in an Ignite app for efficient local-first data management."}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"https://www.powersync.com/",children:"PowerSync"})," allows your app to work smoothly offline while keeping the data in sync with your backend database."]}),"\n",(0,s.jsx)(n.h3,{id:"what-is-powersync",children:"What is PowerSync?"}),"\n",(0,s.jsx)(n.p,{children:"PowerSync is a service which synchronizes local data with your Postgres SQL back end. It lets your app work with a local copy of the users' data and automatically syncs changes to and from your backend."}),"\n",(0,s.jsx)(n.p,{children:"Because your application interacts with the data in a local instance of SQLite, it means you'll always have fast, responsive access -- no fetching, no spinners. It also means\nyour users will have a seamless, consistent experience even if they are offline."}),"\n",(0,s.jsx)(n.p,{children:"In the background, PowerSync queues any changes and syncs the local data with the server whenever an internet connection becomes available. That means the data stays up to date across all of their devices."}),"\n",(0,s.jsx)(n.h3,{id:"benefits-of-using-powersync",children:"Benefits of Using PowerSync"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Handles Intermittent Network Connectivity"}),": PowerSync allows your app to remain operational even in areas with\nunreliable internet access. Users can continue their tasks without interruption, with automatic syncing when the\nconnection is restored."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Enables Offline Operation"}),": With PowerSync, your application can fully function offline, allowing users to access\nand interact with their data regardless of their internet connection status."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Eliminates Loading Delays"}),": Leveraging local data minimizes the need for loading indicators, offering a smoother,\nfaster experience for the user."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Supports Multi-device Sync"}),": PowerSync ensures data consistency across all of a user's devices, enabling seamless\naccess and transition between different platforms.\nBy integrating PowerSync into your Ignite project, you provide a more reliable and user-friendly experience, ensuring\nyour application remains functional and responsive under various network conditions."]}),"\n"]}),"\n",(0,s.jsx)(n.h3,{id:"using-other-backends",children:"Using Other Backends"}),"\n",(0,s.jsx)(n.p,{children:"While this recipe uses Supabase for the backend, PowerSync can connect to almost any Postgres SQL backend and the process will be largely identical for other types of Postgres backends."}),"\n",(0,s.jsxs)(n.p,{children:["The major difference is that when the time comes, you will need to implement a ",(0,s.jsx)(n.code,{children:"PowerSyncBackendConnector"})," for your database in place of the ",(0,s.jsx)(n.code,{children:"SupabaseConnector"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["Check the ",(0,s.jsx)(n.a,{href:"https://docs.powersync.com/",children:"PowerSync documentation"})," for more information on connecting your database to PowerSync."]}),"\n",(0,s.jsx)(n.h2,{id:"prerequisites",children:"Prerequisites"}),"\n",(0,s.jsx)(n.p,{children:"To complete this recipe you'll need:"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsxs)(n.strong,{children:["An Ignite app using ",(0,s.jsx)(n.code,{children:"Expo CNG"})," workflow"]})}),"\n",(0,s.jsx)(n.p,{children:"Create a new Ignite app using the Ignite CLI::"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"npx ignite-cli@latest new PowerSyncIgnite --remove-demo --workflow=cng --yes\n"})}),"\n",(0,s.jsxs)(n.admonition,{type:"info",children:[(0,s.jsxs)(n.p,{children:["PowerSync requires native modules, so we need to use ",(0,s.jsx)(n.a,{href:"https://docs.expo.dev/workflow/continuous-native-generation/",children:"Expo with Continuous Native Generation (CNG)"}),"."]}),(0,s.jsxs)(n.p,{children:["If you are adding PowerSync to an app that currently uses Expo GO, you'll need to update your project to use either CNG or a ",(0,s.jsx)(n.a,{href:"https://docs.expo.dev/develop/development-builds/introduction/",children:"development build"}),"."]})]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"A Supabase Project set up and connected to a PowerSync"})}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["Follow the ",(0,s.jsx)(n.a,{href:"https://docs.powersync.com/integration-guides/supabase-+-powersync",children:"PowerSync + Supabase Integration Guide"})," to get this set up -- both PowerSync and Supabase have free tiers that you can use to get started."]}),"\n"]}),"\n",(0,s.jsxs)(n.ol,{start:"3",children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.strong,{children:"Configure or Disable Supabase Email Verification"})}),"\n"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"By default, Supabase requires email verification for new users. This should be configured for any production apps."}),"\n",(0,s.jsxs)(n.li,{children:["For the purposes of this recipe, you can disable this in the Supabase dashboard under:","\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Authentication"})," > ",(0,s.jsx)(n.strong,{children:"Providers"})," > ",(0,s.jsx)(n.strong,{children:"Email"})," > ",(0,s.jsx)(n.strong,{children:"Confirm Email"})]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"installing-sdk-and-dependencies",children:"Installing SDK and Dependencies"}),"\n",(0,s.jsx)(n.h3,{id:"install-necessary-dependencies-for-powersync",children:"Install necessary dependencies for PowerSync."}),"\n",(0,s.jsx)(n.p,{children:"First install the PowerSync SDK and its dependencies."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"npx expo install \\\n  @journeyapps/powersync-sdk-react-native \\\n  @journeyapps/react-native-quick-sqlite \n"})}),"\n",(0,s.jsxs)(n.p,{children:["PowerSync ",(0,s.jsx)(n.a,{href:"https://github.com/powersync-ja/powersync-js/blob/main/packages/powersync-sdk-react-native/README.md#install-polyfills",children:"requires polyfills"}),"\nto replace browser-specific APIs with their React Native equivalents. These are listed as peer-dependencies so we need\nto install them ourselves."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"npx expo install \\\n  react-native-fetch-api \\\n  react-native-polyfill-globals \\\n  react-native-url-polyfill \\\n  text-encoding \\\n  web-streams-polyfill@^3.2.1 \\\n  base-64 \\\n  @azure/core-asynciterator-polyfill \\\n  react-native-get-random-values\n"})}),"\n",(0,s.jsxs)(n.p,{children:["and install ",(0,s.jsx)(n.code,{children:"@babel/plugin-transform-async-generator-functions"})," as a dev dependency:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"yarn add -D @babel/plugin-transform-async-generator-functions\n"})}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsxs)(n.p,{children:["At the time of writing the PowerSync SDK is not compatible with ",(0,s.jsx)(n.code,{children:"web-streams-polyfill@4.0.0"}),", so be sure to specify version ",(0,s.jsx)(n.code,{children:"^3.2.1"}),"."]})}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsx)(n.p,{children:"These dependencies include native modules so you'll need to rebuild your app after installing."})}),"\n",(0,s.jsx)(n.h3,{id:"install-necessary-dependencies-for-supabase",children:"Install necessary dependencies for Supabase"}),"\n",(0,s.jsx)(n.p,{children:"First we need to install the Supabase SDK."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"npx expo install @supabase/supabase-js\n"})}),"\n",(0,s.jsxs)(n.p,{children:["and we'll also need to install ",(0,s.jsx)(n.code,{children:"@react-native-async-storage/async-storage"})," for persisting the Supabase session."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"npx expo install @react-native-async-storage/async-storage\n"})}),"\n",(0,s.jsx)(n.h3,{id:"configure-babel-and-polyfills",children:"Configure Babel and Polyfills"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsxs)(n.strong,{children:["1. Ensure polyfills are imported in your app's entry file, typically ",(0,s.jsx)(n.code,{children:"App.tsx"}),":"]})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:'import "react-native-polyfill-globals/auto"\nimport "@azure/core-asynciterator-polyfill"\n'})}),"\n",(0,s.jsx)(n.admonition,{type:"tip",children:(0,s.jsxs)(n.p,{children:["In a fresh Ignite app, this would be in ",(0,s.jsx)(n.code,{children:"app/app.tsx"}),". and placed at the top of the list of imports, right after\nthe Reactotron config."]})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"2. Add Babel Plugin"})}),"\n",(0,s.jsxs)(n.p,{children:["Update ",(0,s.jsx)(n.code,{children:"babel.config.js"})," to include the ",(0,s.jsx)(n.code,{children:"transform-async-generator-functions"})," plugin:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"/** @type {import('@babel/core').TransformOptions['plugins']} */\nconst plugins = [\n        //... other plugins\n        // success-line\n        '@babel/plugin-transform-async-generator-functions',  // <-- Add this\n        /** NOTE: This must be last in the plugins @see https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/#babel-plugin */\n        \"react-native-reanimated/plugin\",\n    ]\n\n"})}),"\n",(0,s.jsx)(n.h3,{id:"tell-expo-to-disable-the-expo-dev-client-network-inspector",children:"Tell Expo to Disable the Expo Dev Client Network Inspector"}),"\n",(0,s.jsxs)(n.p,{children:["The network inspector in the Expo Dev Client can ",(0,s.jsx)(n.a,{href:"https://docs.powersync.com/client-sdk-references/react-native-and-expo#android",children:"interfere with PowerSync's network requests"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["Because our app uses ",(0,s.jsx)(n.a,{href:"https://docs.expo.dev/workflow/continuous-native-generation/",children:"Expo CNG"})," we shouldn't edit the project's native files directly."]}),"\n",(0,s.jsxs)(n.p,{children:["Instead we can use the ",(0,s.jsx)(n.code,{children:"expo-build-properties"})," plugin to tell expo to disable the network inspector when building the android project."]}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["Open the project's ",(0,s.jsx)(n.code,{children:"app.json"})]}),"\n",(0,s.jsxs)(n.li,{children:["In ",(0,s.jsx)(n.code,{children:"expo.plugins"})," find ",(0,s.jsx)(n.code,{children:"expo-build-properties"})]}),"\n",(0,s.jsxs)(n.li,{children:["In the config object for the plugin, set ",(0,s.jsx)(n.code,{children:"android.networkInspector"})," to ",(0,s.jsx)(n.code,{children:"false"})]}),"\n",(0,s.jsxs)(n.li,{children:["Run ",(0,s.jsx)(n.code,{children:"expo prebuild"})," to apply the changes to your android project"]}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-json",children:'{\n  "expo": {\n    "plugins": [\n      // ...\n      [\n        "expo-build-properties",\n        {\n          "ios": {\n            "newArchEnabled": false,\n            "flipper": false\n          },\n          "android": {\n            "newArchEnabled": false,\n            // success-line\n            "networkInspector": false\n          }\n        }\n      ]\n      //...\n    ]\n    //...\n  }\n}\n'})}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsxs)(n.p,{children:["If you are not using Expo CNG, you can manually edit ",(0,s.jsx)(n.code,{children:"/android/gradle.properties"})," and set ",(0,s.jsx)(n.code,{children:"EXPO_DEV_CLIENT_NETWORK_INSPECTOR=false"})]})}),"\n",(0,s.jsx)(n.h2,{id:"authenticating-with-supabase",children:"Authenticating with Supabase"}),"\n",(0,s.jsx)(n.p,{children:"PowerSync needs a valid session token to authenticate your Supabase users. In the next section we'll implement a basic authentication flow that will let us sign in and out of Supabase."}),"\n",(0,s.jsxs)(n.h3,{id:"add-supabase-config-variables-to-baseconfig",children:["Add Supabase Config Variables to ",(0,s.jsx)(n.code,{children:"BaseConfig"})]}),"\n",(0,s.jsxs)(n.p,{children:["First add your Supabase config to your app's configuration. In ignite apps, config is kept in ",(0,s.jsx)(n.code,{children:"app/config/config.base.ts"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"You'll need:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"supabaseUrl"}),": Found through your Supabase dashboard under: ",(0,s.jsx)(n.strong,{children:"Project Settings"})," > ",(0,s.jsx)(n.strong,{children:"API"})," > ",(0,s.jsx)(n.strong,{children:"Project URL"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"supabaseAnonKey"}),": Found through your Supabase dashboard under: ",(0,s.jsx)(n.strong,{children:"Project Settings"})," > ",(0,s.jsx)(n.strong,{children:"API"})," > ",(0,s.jsx)(n.strong,{children:"Project API\nkeys"}),"."]}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"// `app/config/config.base.ts`:\n\n// update the interface to include the new properties\nexport interface ConfigBaseProps {\n  // Existing config properties\n\n  // success-line\n  supabaseUrl: string\n  // success-line\n  supabaseAnonKey: string\n}\n\n// Add the new properties to the config object\nconst BaseConfig: ConfigBaseProps = {\n  // Existing config values\n  // success-line\n  supabaseUrl: '<<YOUR_SUPABASE_URL>>',\n  // success-line\n  supabaseAnonKey: '<<YOUR_SUPABASE_ANON_KEY>>',\n}\n"})}),"\n",(0,s.jsx)(n.admonition,{type:"tip",children:(0,s.jsxs)(n.p,{children:["If you have different configurations for different environments, you can add these properties to ",(0,s.jsx)(n.code,{children:"config.dev.ts"})," and ",(0,s.jsx)(n.code,{children:"config.prod.ts"})," as needed."]})}),"\n",(0,s.jsx)(n.h3,{id:"initialize-the-supabase-client",children:"Initialize the Supabase Client"}),"\n",(0,s.jsxs)(n.p,{children:["Create ",(0,s.jsx)(n.code,{children:"app/services/database/supabase.ts"})," and add the following code to initialize the Supabase client:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"// app/services/database/supabase.ts\nimport AsyncStorage from '@react-native-async-storage/async-storage'\nimport { createClient } from \"@supabase/supabase-js\"\nimport { Config } from '../../config'\n\nexport const supabase = createClient(Config.supabaseUrl, Config.supabaseAnonKey, {\n  auth: {\n    persistSession: true, storage: AsyncStorage,\n  },\n})\n"})}),"\n",(0,s.jsxs)(n.admonition,{title:"Persisting the Supabase Session",type:"info",children:[(0,s.jsxs)(n.p,{children:["Unlike web environments where ",(0,s.jsx)(n.code,{children:"localStorage"})," is available, in React Native Supabase requires us to provide a key-value store to hold the session token."]}),(0,s.jsxs)(n.p,{children:["We're using ",(0,s.jsx)(n.code,{children:"AsyncStorage"})," here for simplicity, but if you need more security, Supabase provides an example of encrypting the session token using ",(0,s.jsx)(n.code,{children:"expo-secure-storage"})," in their ",(0,s.jsx)(n.a,{href:"https://supabase.com/docs/guides/getting-started/tutorials/with-expo-react-native?auth-store=secure-store#initialize-a-react-native-app",children:"React Native Auth example"})]})]}),"\n",(0,s.jsxs)(n.h3,{id:"create-useauth-hook-and-authcontext",children:["Create ",(0,s.jsx)(n.code,{children:"useAuth"})," Hook and ",(0,s.jsx)(n.code,{children:"AuthContext"})]}),"\n",(0,s.jsx)(n.p,{children:"Next we'll create a hook and context to manage the authentication state and make it accessible to our components."}),"\n",(0,s.jsxs)(n.p,{children:["Create ",(0,s.jsx)(n.code,{children:"app/services/database/use-auth.tsx"})," and add the following code:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/services/database/use-auth.tsx\nimport { User } from "@supabase/supabase-js"\nimport { supabase } from "app/services/database/supabase"\nimport React, { createContext, PropsWithChildren, useCallback, useContext, useMemo, useState } from "react"\n\ntype AuthContextType = {\n  signIn: (email: string, password: string) => void\n  signUp: (email: string, password: string) => void\n  signOut: () => Promise<void>\n  signedIn: boolean\n  loading: boolean\n  error: string\n  user: User | null\n}\n\n// We initialize the context with null to ensure that it is not used outside of the provider\nconst AuthContext = createContext<AuthContextType | null>(null)\n\n/**\n * AuthProvider manages the authentication state and provides the necessary methods to sign in, sign up and sign out.\n */\nexport const AuthProvider = ({ children }: PropsWithChildren<any>) => {\n  const [signedIn, setSignedIn] = useState(false)\n  const [loading, setLoading] = useState(false)\n  const [error, setError] = useState("")\n  const [user, setUser] = useState<User | null>(null)\n\n\n  // Sign in with provided email and password\n  const signIn = useCallback(async (email: string, password: string) => {\n    setLoading(true)\n    setError("")\n    setUser(null)\n    \n    try {\n      // get the session and user from supabase\n      const { \n        data: {session, user}, \n        error \n      } = await supabase.auth.signInWithPassword({ email, password })\n      \n      // if we have a session and user, sign them in\n      if (session && user) {\n        setSignedIn(true)\n        setUser(user)\n      // otherwise sign them out and set an error\n      } else {\n        throw new Error(error?.message);\n        setSignedIn(false)\n        setUser(null)\n      }\n    } catch (error: any) {\n      setError(error?.message ?? "Unknown error")\n      setSignedIn(false)\n      setUser(null)\n    } finally {\n      setLoading(false)\n    }\n  }, [\n    setSignedIn, setLoading, setError, setUser, supabase\n  ])\n\n  // Create a new account with provided email and password\n  const signUp = useCallback(async (email: string, password: string) => {\n    setLoading(true)\n    setError("")\n    setUser(null)\n    try {\n      const { data, error } = await supabase.auth.signUp({ email, password })\n      if (error) {\n        setSignedIn(false)\n        setError(error.message)\n      } else if (data.session) {\n        await supabase.auth.setSession(data.session)\n        setSignedIn(true)\n        setUser(data.user)\n      }\n    } catch (error: any) {\n      setUser(null)\n      setSignedIn(false)\n      setError(error?.message ?? "Unknown error")\n    } finally {\n      setLoading(false)\n    }\n  }, [\n    setSignedIn, setLoading, setError, setUser, supabase\n  ])\n\n  // Sign out the current user\n  const signOut = useCallback(async () => {\n    setLoading(true)\n    await supabase.auth.signOut()\n    setError("")\n    setSignedIn(false)\n    setLoading(false)\n    setUser(null)\n  }, [\n    setSignedIn, setLoading, setError, setUser, supabase\n  ])\n\n  // Always memoize context values as they can cause unnecessary re-renders if they aren\'t stable!\n  const value = useMemo(() => ({\n    signIn, signOut, signUp, signedIn, loading, error, user\n  }), [\n    signIn, signOut, signUp, signedIn, loading, error, user\n  ])\n  return <AuthContext.Provider value={ value }>{ children }</AuthContext.Provider>\n}\n\nexport const useAuth = () => {\n  const context = useContext(AuthContext)\n\n  // It\'s a good idea to throw an error if the context is null, as it means the hook is being used outside of the provider\n  if (context === null) {\n    throw new Error(\'useAuthContext must be used within a AuthProvider\')\n  }\n  return context\n}\n\n'})}),"\n",(0,s.jsx)(n.admonition,{type:"info",children:(0,s.jsxs)(n.p,{children:["For more information on setting up authentication with Supabase (including setting up for OAuth providers like Github, Google and Facebook), refer to the ",(0,s.jsx)(n.a,{href:"https://supabase.com/docs/guides/auth",children:"Supabase Auth documentation"}),"."]})}),"\n",(0,s.jsx)(n.admonition,{type:"tip",children:(0,s.jsx)(n.p,{children:"If authentication starts acting up, try refreshing your app from the Debug menu. Auth state is managed at the app level and that can cause issues with hot reloading."})}),"\n",(0,s.jsx)(n.h3,{id:"provide-auth-state-to-your-application",children:"Provide Auth State to Your Application"}),"\n",(0,s.jsxs)(n.p,{children:["Wrap your app with the ",(0,s.jsx)(n.code,{children:"AuthProvider"})," to provide the authentication state to your app:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/app.tsx\n// ...other imports\n// success-line\nimport { AuthProvider } from "app/services/database/use-auth"\n\n// ...\nfunction App(props: AppProps) {\n  // ...\n  return (\n    // success-line\n    <AuthProvider>\n      <SafeAreaProvider>\n        {/* ... */ }\n      </SafeAreaProvider>\n      // success-line\n    </AuthProvider>\n  )\n}\n\n\n'})}),"\n",(0,s.jsxs)(n.h3,{id:"create-authscreen-for-signing-in---registering",children:["Create ",(0,s.jsx)(n.code,{children:"AuthScreen"})," for signing in /  registering"]}),"\n",(0,s.jsx)(n.p,{children:"Use the Ignite CLI to generate a new screen for signing in:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"npx ignite-cli generate screen Auth\n"})}),"\n",(0,s.jsxs)(n.admonition,{type:"note",children:[(0,s.jsx)(n.p,{children:"This will:"}),(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["create a new screen in ",(0,s.jsx)(n.code,{children:"app/screens/AuthScreen.tsx"}),","]}),"\n",(0,s.jsxs)(n.li,{children:["add that screen to the ",(0,s.jsx)(n.code,{children:"AppNavigator"})," in ",(0,s.jsx)(n.code,{children:"app/navigators/AppNavigator.tsx"}),", and"]}),"\n",(0,s.jsxs)(n.li,{children:["update the ",(0,s.jsx)(n.code,{children:"Params"})," and ",(0,s.jsx)(n.code,{children:"ScreenProps"})," types"]}),"\n"]})]}),"\n",(0,s.jsxs)(n.p,{children:["Then open ",(0,s.jsx)(n.code,{children:"app/screens/AuthScreen.tsx"})," and update the ",(0,s.jsx)(n.code,{children:"AuthScreen"})," component to use the ",(0,s.jsx)(n.code,{children:"useAuth"})," hook to sign in."]}),"\n",(0,s.jsxs)(n.p,{children:["When the user signs in successfully, the app will automatically navigate to the ",(0,s.jsx)(n.code,{children:"Welcome"})," screen."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/screens/AuthScreen.tsx\nimport { AppStackScreenProps } from "app/navigators"\nimport { Button, Screen, Text, TextField } from "app/components"\nimport { useAuth } from "app/services/database/use-auth"\nimport React, { useEffect, useState } from "react"\nimport { ActivityIndicator, Modal, TextStyle, View, ViewStyle } from "react-native"\nimport { colors, spacing } from "../theme"\n\ninterface AuthScreenProps extends AppStackScreenProps<"Auth"> {}\n\nexport const AuthScreen: React.FC<AuthScreenProps> = ({ navigation }) => {\n  const { signUp, signIn, loading, error, user } = useAuth()\n  const [email, setEmail] = useState("")\n  const [password, setPassword] = useState("")\n\n  const handleSignIn = async () => {\n    signIn(email, password)\n  }\n\n  const handleSignUp = async () => {\n    signUp(email, password)\n  }\n\n  useEffect(() => {\n    if (user) {\n      navigation.navigate("Welcome")\n    }\n  }, [user])\n\n  return (\n    <Screen style={ $container } safeAreaEdges={ ["top"] }>\n      <Text preset={ "subheading" }>PowerSync + Supabase</Text>\n      <Text preset={ "heading" }>Sign in or Create Account</Text>\n      <TextField\n        inputWrapperStyle={ $inputWrapper }\n        containerStyle={ $inputContainer }\n        label={ "Email" }\n        value={ email }\n        inputMode={ "email" }\n        onChangeText={ setEmail }\n        keyboardType="email-address"\n        autoCapitalize={ "none" }\n      />\n      <TextField\n        containerStyle={ $inputContainer }\n        inputWrapperStyle={ $inputWrapper }\n        label={ "Password" }\n        value={ password }\n        onChangeText={ setPassword }\n        secureTextEntry\n      />\n\n      <View style={ $buttonContainer }>\n        <Button\n          disabled={ loading }\n          text={ "Sign In" }\n          onPress={ handleSignIn }\n          style={ $button }\n          preset={ "reversed" }\n        />\n\n        <Button\n          disabled={ loading }\n          text={ "Register New Account" }\n          onPress={ handleSignUp }\n          style={ $button }\n        />\n      </View>\n      { error ? <Text style={ $error } text={ error }/> : null }\n      <Modal transparent visible={ loading }>\n        <View style={ $modalBackground }>\n          <ActivityIndicator size="large" color={ colors.palette.primary500 }/>\n        </View>\n      </Modal>\n    </Screen>\n  )\n}\n\nconst $container: ViewStyle = {\n  backgroundColor: colors.background,\n  flex: 1,\n  justifyContent: "center",\n  paddingHorizontal: spacing.lg,\n}\n\nconst $inputContainer: TextStyle = {\n  marginTop: spacing.md,\n}\n\nconst $inputWrapper: TextStyle = {\n  backgroundColor: colors.palette.neutral100,\n}\nconst $modalBackground: ViewStyle = {\n  alignItems: "center",\n  backgroundColor: "#00000040",\n  flex: 1,\n  flexDirection: "column",\n  justifyContent: "space-around",\n}\n\nconst $error: TextStyle = {\n  color: colors.error,\n  marginVertical: spacing.md,\n  textAlign: "center",\n  width: "100%",\n  fontSize: 20,\n}\n\nconst $buttonContainer: ViewStyle = {\n  display: "flex",\n  flexDirection: "column",\n  justifyContent: "space-between",\n  marginVertical: spacing.md,\n}\n\nconst $button: ViewStyle = {\n  marginTop: spacing.xs,\n}\n'})}),"\n",(0,s.jsxs)(n.h3,{id:"create-the-signoutbutton-component",children:["Create the ",(0,s.jsx)(n.code,{children:"SignOutButton"})," component"]}),"\n",(0,s.jsx)(n.p,{children:"First use the ignite CLI to generate a new screen for signing out:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"npx ignite-cli generate component SignOutButton\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Then, update the component to show a button that calls ",(0,s.jsx)(n.code,{children:"signOut"})," from our ",(0,s.jsx)(n.code,{children:"useAuth"})," when pressed."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/components/SignOutButton.tsx\n\nimport { Button } from "app/components/Button"\nimport { useAuth } from "app/services/database/use-auth"\nimport * as React from "react"\nimport { StyleProp, View, ViewStyle } from "react-native"\nimport { observer } from "mobx-react-lite"\nimport { spacing } from "app/theme"\n\nexport interface SignOutButtonProps {\n  /**\n   * An optional style override useful for padding & margin.\n   */\n  style?: StyleProp<ViewStyle>\n}\n\n/**\n * Describe your component here\n */\nexport const SignOutButton = observer(function SignOutButton(props: SignOutButtonProps) {\n  const { style } = props\n  const $styles = [$container, style]\n\n  const { signOut } = useAuth()\n\n  const handleSignOut = async () => {\n    await signOut()\n  }\n\n  return (\n    <View style={ $styles }>\n      <Button text="Sign Out" onPress={ handleSignOut }/>\n    </View>\n  )\n})\n\nconst $container: ViewStyle = {\n  padding: spacing.md,\n}\n'})}),"\n",(0,s.jsxs)(n.h3,{id:"add-signoutbutton-to-welcomescreen",children:["Add ",(0,s.jsx)(n.code,{children:"SignOutButton"})," to ",(0,s.jsx)(n.code,{children:"WelcomeScreen"})]}),"\n",(0,s.jsxs)(n.p,{children:["Right now we just want to confirm that our authentication is working, so lets clear out the Welcome screen and add the ",(0,s.jsx)(n.code,{children:"SignOutButton"})," to it."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/screens/WelcomeScreen.tsx\nimport { NativeStackScreenProps } from "@react-navigation/native-stack"\nimport { Lists, SignOutButton } from "app/components"\nimport { DatabaseProvider } from "app/services/database/database"\nimport { observer } from "mobx-react-lite"\nimport React, { FC } from "react"\nimport { ViewStyle } from "react-native"\nimport { SafeAreaView } from "react-native-safe-area-context"\nimport { SignedInNavigatorParamList } from "../navigators"\nimport { colors } from "../theme"\n\nexport const WelcomeScreen: FC<WelcomeScreenProps> = observer(function WelcomeScreen() {\n  return (\n    <DatabaseProvider>\n      <SafeAreaView style={ $container }>\n        <SignOutButton/>\n      </SafeAreaView>\n    </DatabaseProvider>\n  )\n})\n\nconst $container: ViewStyle = {\n  flex: 1,\n  backgroundColor: colors.palette.neutral300,\n  display: "flex",\n  justifyContent: "flex-start",\n  height: "100%",\n  flexDirection: "column",\n}\n'})}),"\n",(0,s.jsxs)(n.h3,{id:"update-the-appnavigator",children:["Update the ",(0,s.jsx)(n.code,{children:"AppNavigator"})]}),"\n",(0,s.jsx)(n.p,{children:"We don't want to allow users to navigate to the Welcome screen if they are not signed in."}),"\n",(0,s.jsxs)(n.p,{children:["We can ensure this by checking the user's authentication status in the ",(0,s.jsx)(n.code,{children:"AppNavigator"})," and only allowing them to access the ",(0,s.jsx)(n.code,{children:"Auth"})," screen if they are not signed in."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/navigators/AppNavigator.tsx\n\n//...\n\nconst AppStack = observer(function AppStack() {\n  // Fetch the user from the auth context\n  // success-line\n  // success-line\n  const { signedIn } = useAuth()\n  return (\n    <Stack.Navigator\n      screenOptions={ { headerShown: false, navigationBarColor: colors.background } }\n    >\n      {/**\n       * by wrapping the Welcome screen in a conditional, we ensure that\n       * the user can only access it if they are signed in\n       */ }\n      // success-line\n      { signedIn\n        // success-line\n        ? <Stack.Screen name="Welcome" component={ Screens.WelcomeScreen }/>\n        // success-line\n        : null\n        // success-line\n      }\n      <Stack.Screen name="Auth" component={ Screens.AuthScreen }/>\n      {/* IGNITE_GENERATOR_ANCHOR_APP_STACK_SCREENS */ }\n    </Stack.Navigator>\n  )\n})\n\n// ...\n'})}),"\n",(0,s.jsx)(n.admonition,{type:"tip",children:(0,s.jsxs)(n.p,{children:["For more information on Authentication flows with ",(0,s.jsx)(n.code,{children:"react-navigation"})," see their docs: ",(0,s.jsx)(n.a,{href:"https://reactnavigation.org/docs/auth-flow/",children:"https://reactnavigation.org/docs/auth-flow/"})]})}),"\n",(0,s.jsx)(n.h3,{id:"checking-in",children:"Checking In"}),"\n",(0,s.jsx)(n.p,{children:"At this point you should be able to:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"sign in"})," and ",(0,s.jsx)(n.strong,{children:"sign out"})," of your app"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"sign up"})," for a new account."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["If you are getting errors about an unverified email -- remember to disable email verification in the Supabase dashboard as described in the ",(0,s.jsx)(n.a,{href:"#prerequisites",children:"Prerequisites"})," section."]}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsx)(n.p,{children:"This is a good time to commit your changes!"})}),"\n",(0,s.jsx)(n.h2,{id:"connecting-powersync-to-supabase",children:"Connecting PowerSync to Supabase"}),"\n",(0,s.jsx)(n.p,{children:"Now that we have a valid Supabase session, we can connect to PowerSync and start syncing data between the local database and the backend."}),"\n",(0,s.jsx)(n.p,{children:"We'll need to:"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsx)(n.li,{children:"Add our PowerSync URL to the app configuration"}),"\n",(0,s.jsx)(n.li,{children:"Define our data schema, and"}),"\n",(0,s.jsx)(n.li,{children:"Connect to the database"}),"\n"]}),"\n",(0,s.jsx)(n.h3,{id:"add-your-powersync-url-to-your-app-config",children:"Add your PowerSync URL to your app config"}),"\n",(0,s.jsx)(n.p,{children:"Just like we did with supabase, add the PowerSync URL to your app's configuration."}),"\n",(0,s.jsxs)(n.p,{children:["Your PowerSync URL can be found in your ",(0,s.jsx)(n.strong,{children:"PowerSync dashboard"}),":"]}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["Click on the ",(0,s.jsx)(n.strong,{children:"Edit Instance"})," button for your instance"]}),"\n",(0,s.jsxs)(n.li,{children:["Copy the ",(0,s.jsx)(n.strong,{children:"Instance URL"})," from the dialog that appears."]}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"// app/config/config.base.ts:\n\n// update the interface to include the new properties\nexport interface ConfigBaseProps {\n  // Existing config properties\n  supabaseUrl: string\n  supabaseAnonKey: string\n  // success-line\n  powersyncUrl: string\n}\n\n// Add the new properties to the config object\nconst BaseConfig: ConfigBaseProps = {\n  // Existing config values\n  supabaseUrl: '<<YOUR_SUPABASE_URL>>',\n  supabaseAnonKey: '<<YOUR_SUPABASE_ANON_KEY>>',\n  // success-line\n  powersyncUrl: '<<YOUR_POWER_SYNC_URL>>',\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"define-your-schema",children:"Define Your Schema"}),"\n",(0,s.jsxs)(n.p,{children:["First we need to define the schema for our database and TypeScript types in ",(0,s.jsx)(n.code,{children:"app/services/database/schema.ts"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"The Schema defines the data that PowerSync will sync between the local SQLite database and the backend."}),"\n",(0,s.jsxs)(n.p,{children:["From the ",(0,s.jsx)(n.a,{href:"https://docs.powersync.com/usage/installation/client-side-setup/define-your-schema#react-native-and-expo",children:"PowerSync docs"}),":"]}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:["The types available are ",(0,s.jsx)(n.code,{children:"TEXT"}),", ",(0,s.jsx)(n.code,{children:"INTEGER"})," and ",(0,s.jsx)(n.code,{children:"REAL"}),". These should map directly to the values produced by the ",(0,s.jsx)(n.a,{href:"https://docs.powersync.com/usage/sync-rules",children:"Sync Rules"}),". If a value doesn't match, it is cast automatically."]}),"\n"]}),"\n",(0,s.jsx)(n.h4,{id:"typescript-types",children:"Typescript Types"}),"\n",(0,s.jsx)(n.p,{children:"It's good to also define TypeScript types for your records, as this will help with type checking and autocompletion in your code."}),"\n",(0,s.jsx)(n.p,{children:"Keeping them with the schema will help keep your code organized and easy to maintain."}),"\n",(0,s.jsx)(n.admonition,{type:"tip",children:(0,s.jsxs)(n.p,{children:["PowerSync supports ",(0,s.jsx)(n.a,{href:"https://kysely.dev/",children:"Kysely"}),", which enables automatically generation of typescript types for your database. See ",(0,s.jsx)(n.a,{href:"https://releases.powersync.com/announcements/kysely-orm-integration-for-react-native-and-js-web-beta-release",children:"this announcement"})," for more information on how to set that up for your project."]})}),"\n",(0,s.jsx)(n.h4,{id:"the-schema-for-our-todo-app",children:"The Schema for our Todo App"}),"\n",(0,s.jsx)(n.p,{children:"Here is the schema we'll be using for our todo app:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"// app/services/database/schema.ts\nimport {\n  Column,\n  ColumnType,\n  Index,\n  IndexedColumn,\n  Schema,\n  Table\n} from '@journeyapps/powersync-sdk-react-native'\n\nexport const TODO_TABLE = 'todos'\nexport const LIST_TABLE = 'lists'\n\nexport interface ListRecord {\n  id: string\n  name: string\n  created_at: string\n  owner_id?: string\n}\n\nexport interface TodoRecord {\n  id: string\n  created_at: string\n  completed: boolean\n  description: string\n  completed_at?: string\n  created_by: string\n  completed_by?: string\n  list_id: string\n  photo_id?: string\n}\n\nexport const AppSchema = new Schema([\n  new Table({\n    name: 'todos',\n    columns: [\n      new Column({ name: 'list_id', type: ColumnType.TEXT }),\n      new Column({ name: 'created_at', type: ColumnType.TEXT }),\n      new Column({ name: 'completed_at', type: ColumnType.TEXT }),\n      new Column({ name: 'description', type: ColumnType.TEXT }),\n      new Column({ name: 'completed', type: ColumnType.INTEGER }),\n      new Column({ name: 'created_by', type: ColumnType.TEXT }),\n      new Column({ name: 'completed_by', type: ColumnType.TEXT })\n    ],\n    indexes: [\n      new Index({\n        name: 'list',\n        columns: [new IndexedColumn({ name: 'list_id' })]\n      })\n    ]\n  }),\n  new Table({\n    name: 'lists',\n    columns: [\n      new Column({ name: 'created_at', type: ColumnType.TEXT }),\n      new Column({ name: 'name', type: ColumnType.TEXT }),\n      new Column({ name: 'owner_id', type: ColumnType.TEXT })\n    ]\n  }),\n])\n\n"})}),"\n",(0,s.jsxs)(n.admonition,{title:"Automated Schema Generation",type:"tip",children:[(0,s.jsx)(n.p,{children:"PowerSync can generate a Javascript version of your schema for you."}),(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsx)(n.li,{children:"Right-click on your instance in the PowerSync dashboard"}),"\n",(0,s.jsx)(n.li,{children:'Select "Generate Client-Side Schema".'}),"\n"]}),(0,s.jsx)(n.p,{children:"This will generate a schema definition in javascript that will give you a good starting point for building the rest of your schema."})]}),"\n",(0,s.jsx)(n.h3,{id:"implement-the-supabaseconnector",children:"Implement the SupabaseConnector"}),"\n",(0,s.jsxs)(n.p,{children:["To tell PowerSync how to connect to the database we'll create a ",(0,s.jsx)(n.code,{children:"SupabaseConnector"}),", which implements the ",(0,s.jsx)(n.code,{children:"PowerSyncBackendConnector"})," interface with methods for fetching credentials and uploading data."]}),"\n",(0,s.jsx)(n.h4,{id:"powersyncbackendconnector-interface",children:"PowerSyncBackendConnector Interface"}),"\n",(0,s.jsxs)(n.p,{children:["The Supabase Connector needs to implement the ",(0,s.jsx)(n.code,{children:"PowerSyncBackendConnector"})," interface (",(0,s.jsx)(n.a,{href:"https://github.com/powersync-ja/powersync-js/blob/main/packages/powersync-sdk-common/src/client/connection/PowerSyncBackendConnector.ts",children:"declared here"}),"), ensuring it can seamlessly\ncommunicate with PowerSync for data synchronization."]}),"\n",(0,s.jsx)(n.p,{children:"The interface is straightforward and only requires two methods:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"// from @journeyapps/powersync-sdk-common \nexport interface PowerSyncBackendConnector {\n  /** Allows the PowerSync client to retrieve an authentication token from your backend\n   * which is used to authenticate against the PowerSync service.\n   *\n   * This should always fetch a fresh set of credentials - don't use cached\n   * values.\n   *\n   * Return null if the user is not signed in. Throw an error if credentials\n   * cannot be fetched due to a network error or other temporary error.\n   *\n   * This token is kept for the duration of a sync connection.\n   */\n  fetchCredentials: () => Promise<PowerSyncCredentials | null>\n\n  /** Upload local changes to the app backend.\n   *\n   * Use {@link AbstractPowerSyncDatabase.getCrudBatch} to get a batch of changes to upload.\n   *\n   * Any thrown errors will result in a retry after the configured wait period (default: 5 seconds).\n   */\n  uploadData: (database: AbstractPowerSyncDatabase) => Promise<void>\n}\n"})}),"\n",(0,s.jsx)(n.h4,{id:"implement-supabaseconnector",children:"Implement SupabaseConnector"}),"\n",(0,s.jsxs)(n.p,{children:["In ",(0,s.jsx)(n.code,{children:"app/services/database/supabase.ts"}),", we'll add the two methods, and then export an object that implements the ",(0,s.jsx)(n.code,{children:"PowerSyncBackendConnector"})," interface."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"// app/services/database/supabase.ts\nimport {\n  AbstractPowerSyncDatabase,\n  CrudEntry, PowerSyncBackendConnector,\n  UpdateType, PowerSyncCredentials\n} from \"@journeyapps/powersync-sdk-react-native\"\nimport AsyncStorage from '@react-native-async-storage/async-storage'\nimport { createClient } from \"@supabase/supabase-js\"\nimport Config from \"../../config\"\n\nexport const supabase = createClient(Config.supabaseUrl, Config.supabaseAnonKey, {\n  auth: {\n    persistSession: true, storage: AsyncStorage,\n  },\n})\n\n\n// This function fetches the session token from Supabase, it should return null if the user is not signed in, and the session token if they are.\nasync function fetchCredentials(): Promise<PowerSyncCredentials | null> {\n  const { data: { session }, error } = await supabase.auth.getSession()\n\n  if (error) {\n    throw new Error(`Could not fetch Supabase credentials: ${ error }`)\n  }\n\n  if (!session) {\n    return null\n  }\n\n  return {\n    endpoint: Config.powersyncUrl,\n    token: session.access_token ?? \"\",\n    expiresAt: session.expires_at\n               ? new Date(session.expires_at * 1000)\n               : undefined\n  }\n}\n\n\n// Regexes for response codes indicating unrecoverable errors.\nconst FATAL_RESPONSE_CODES = [\n  /^22...$/, // Data Exception\n  /^23...$/, // Integrity Constraint Violation\n  /^42501$/, // INSUFFICIENT PRIVILEGE\n]\n\n// PowerSync will call this function to upload data to the backend\nconst uploadData: (database: AbstractPowerSyncDatabase) => Promise<void> = async (database) => {\n  const transaction = await database.getNextCrudTransaction()\n\n  if (!transaction) {\n    return\n  }\n\n\n  let lastOp: CrudEntry | null = null\n  try {\n    // Note: If transactional consistency is important, use database functions\n    // or edge functions to process the entire transaction in a single call.\n    for (const op of transaction.crud) {\n      lastOp = op\n      const table = supabase.from(op.table)\n      let result: any = null\n      switch (op.op) {\n        case UpdateType.PUT:\n          // eslint-disable-next-line no-case-declarations\n          const record = { ...op.opData, id: op.id }\n          result = await table.upsert(record)\n          break\n        case UpdateType.PATCH:\n          result = await table.update(op.opData).eq('id', op.id)\n          break\n        case UpdateType.DELETE:\n          result = await table.delete().eq('id', op.id)\n          break\n      }\n\n      if (result?.error) {\n        throw new Error(`Could not ${ op.op } data to Supabase error: ${ JSON.stringify(result) }`)\n      }\n    }\n\n    await transaction.complete()\n  } catch (ex: any) {\n    console.debug(ex)\n    if (typeof ex.code === 'string' && FATAL_RESPONSE_CODES.some((regex) => regex.test(ex.code))) {\n      /**\n       * Instead of blocking the queue with these errors,\n       * discard the (rest of the) transaction.\n       *\n       * Note that these errors typically indicate a bug in the application.\n       * If protecting against data loss is important, save the failing records\n       * elsewhere instead of discarding, and/or notify the user.\n       */\n      console.error(`Data upload error - discarding ${ lastOp }`, ex)\n      await transaction.complete()\n    } else {\n      // Error may be retryable - e.g. network error or temporary server error.\n      // Throwing an error here causes this call to be retried after a delay.\n      throw ex\n    }\n  }\n}\n\nexport const supabaseConnector: PowerSyncBackendConnector = {\n  fetchCredentials, uploadData,\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"create-the-databasecontext",children:"Create the DatabaseContext"}),"\n",(0,s.jsx)(n.p,{children:"We need a single point of connection to the PowerSync instance that we can interact with throughout the app."}),"\n",(0,s.jsxs)(n.p,{children:["To achieve this we create a ",(0,s.jsx)(n.code,{children:"Database"})," singleton and provide a stable reference to that instance through our ",(0,s.jsx)(n.code,{children:"DatabaseContext"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"We'll check if the user is signed in or not before we initialize the database, as we need a valid session token to connect to the backend."}),"\n",(0,s.jsxs)(n.admonition,{type:"note",children:[(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"DatabaseProvider"})," component wraps its children in both the ",(0,s.jsx)(n.code,{children:"DatabaseContext.Provider"}),", and also the ",(0,s.jsx)(n.code,{children:"PowerSyncContext.Provider"})," provided by the PowerSync SDK."]}),(0,s.jsxs)(n.p,{children:["This is necessary because the hooks from the PowerSync SDK require the ",(0,s.jsx)(n.code,{children:"PowerSyncContext"})," to be present in the component tree, but we'll still need the DatabaseContext to get access to the powersync instance directly."]})]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/services/database/database.tsx\nimport { SupabaseClient } from "@supabase/supabase-js"\nimport { useAuth } from "./use-auth"\nimport React, { PropsWithChildren, useEffect } from "react"\nimport {\n  AbstractPowerSyncDatabase,\n  PowerSyncContext,\n  RNQSPowerSyncDatabaseOpenFactory,\n} from "@journeyapps/powersync-sdk-react-native"\nimport { supabase, supabaseConnector } from "./supabase" // Adjust the path as needed\nimport { AppSchema } from "./schema" // Adjust the path as needed\n\nexport class Database {\n  // We expose the PowerSync and Supabase instances for easy access elsewhere in the app\n  powersync: AbstractPowerSyncDatabase\n  supabase: SupabaseClient = supabase\n\n  /**\n   * Initialize the Database class with a new PowerSync instance\n   */\n  constructor() {\n    const factory = new RNQSPowerSyncDatabaseOpenFactory({\n      schema: AppSchema,\n      dbFilename: "sqlite.db",\n    })\n    this.powersync = factory.getInstance()\n  }\n\n  /**\n   * Initialize the PowerSync instance and connect it to the Supabase backend.\n   * This will call `fetchCredentials` on the Supabase connector to get the session token.\n   * So if your database requires authentication, the user will need to be signed in before this is\n   * called.\n   */\n  async init() {\n    await this.powersync.init()\n    await this.powersync.connect(supabaseConnector)\n  }\n\n  async disconnect() {\n    await this.powersync.disconnectAndClear()\n  }\n}\n\nconst database = new Database()\n\n// A context to provide our singleton to the rest of the app\nconst DatabaseContext = React.createContext<Database | null>(null)\n\nexport const useDatabase = () => {\n  const context: Database | null = React.useContext(DatabaseContext)\n  if (!context) {\n    throw new Error("useDatabase must be used within a DatabaseProvider")\n  }\n\n  return context\n}\n\n// Finally, we create a provider component that initializes the database and provides it to the app\nexport function DatabaseProvider<T>({ children }: PropsWithChildren<T>) {\n  const { user } = useAuth()\n  useEffect(() => {\n    if (user) {\n      database.init().catch(console.error)\n    }\n  }, [database, user])\n  return (\n    <DatabaseContext.Provider value={ database }>\n      <PowerSyncContext.Provider value={ database.powersync }>\n        { children }\n      </PowerSyncContext.Provider>\n    </DatabaseContext.Provider>\n  )\n}\n'})}),"\n",(0,s.jsx)(n.h3,{id:"wrap-the-app-in-the-databaseprovider",children:"Wrap the app in the DatabaseProvider"}),"\n",(0,s.jsxs)(n.p,{children:["Now that we have our ",(0,s.jsx)(n.code,{children:"DatabaseProvider"})," set up, we can wrap our app in it to provide the database instance to the rest of the app."]}),"\n",(0,s.jsxs)(n.p,{children:["Remember that the DatabaseProvider needs access to the users authentication state, so it should be wrapped in the ",(0,s.jsx)(n.code,{children:"AuthProvider"})," we created earlier."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/app.tsx\n\n\n//... other imports\n// success-line\n// Import the provder\n// success-line\nimport { DatabaseProvider } from "app/services/database/database"\n\n// ...\n\nfunction App(props: AppProps) {\n  // ...\n  return (\n    <AuthProvider>\n      // success-line\n      {/* Add the Database Provider inside the AuthProvider */ }\n      // success-line\n      <DatabaseProvider>\n        <SafeAreaProvider initialMetrics={ initialWindowMetrics }>\n          // ...\n        </SafeAreaProvider>\n        // success-line\n      </DatabaseProvider>\n    </AuthProvider>\n  )\n}\n\nexport default App\n\nconst $container: ViewStyle = {\n  flex: 1,\n}\n\n'})}),"\n",(0,s.jsx)(n.h2,{id:"managing-lists-of-todos",children:"Managing Lists of Todos"}),"\n",(0,s.jsx)(n.p,{children:"In our app we'll want the ability to:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"fetch the list of all the todo lists from the database"}),"\n",(0,s.jsx)(n.li,{children:"add a new todo list"}),"\n",(0,s.jsx)(n.li,{children:"delete a todo list"}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"To manage this we'll create the following:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["a ",(0,s.jsx)(n.code,{children:"useLists"})," hook to encapsulate the logic for fetching and managing the lists"]}),"\n",(0,s.jsxs)(n.li,{children:["a ",(0,s.jsx)(n.code,{children:"Lists"})," component to display the lists"]}),"\n",(0,s.jsxs)(n.li,{children:["an ",(0,s.jsx)(n.code,{children:"AddList"})," component with a form to add a new list"]}),"\n"]}),"\n",(0,s.jsxs)(n.h3,{id:"the-uselists-hook",children:["The ",(0,s.jsx)(n.code,{children:"useLists"})," Hook"]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"useLists"})," hook will encapsulate the logic for fetching and managing the lists."]}),"\n",(0,s.jsx)(n.p,{children:"It will use:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"usePowerSyncWatchedQuery"})," to fetch the lists from the database and watch for changes"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"PowerSync.execute"})," to create and delete lists"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"expo-crypto"})," to generate cryptographically secure random UUIDs"]}),"\n"]}),"\n",(0,s.jsx)(n.h4,{id:"usepowersyncwatchedquery",children:"usePowerSyncWatchedQuery"}),"\n",(0,s.jsx)(n.p,{children:"This hook is used to fetch data from the database and watch for changes. It will automatically re-fetch the data when the database changes."}),"\n",(0,s.jsx)(n.p,{children:"We'll implement our own in a second, but Here's an example of what that looks like:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"const lists = usePowerSyncWatchedQuery<ListItemRecord>(`\n    SELECT ${ LIST_TABLE }.*,\n         COUNT(${ TODO_TABLE }.id) AS total_tasks,\n         SUM(CASE WHEN ${ TODO_TABLE }.completed = true THEN 1 ELSE 0 END) AS completed_tasks\n    FROM ${ LIST_TABLE }\n         LEFT JOIN ${ TODO_TABLE } ON ${ LIST_TABLE }.id = ${ TODO_TABLE }.list_id\n    GROUP BY ${ LIST_TABLE }.id;\n  `);\n"})}),"\n",(0,s.jsx)(n.p,{children:"You can write complex queries to fetch data from the database, and the hook will automatically re-fetch the data when the database changes."}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsxs)(n.p,{children:["This hook needs to be inside a ",(0,s.jsx)(n.code,{children:"PowerSyncContext.Provider"})," (or our ",(0,s.jsx)(n.code,{children:"DatabaseProvider"}),") to work."]})}),"\n",(0,s.jsx)(n.h4,{id:"powersyncexecute",children:"PowerSync.execute()"}),"\n",(0,s.jsx)(n.p,{children:"This method is used to execute SQL queries against the database. We'll be using it here to create and delete lists."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"const deleteList = useCallback(async (id: string) => {\n  console.log('Deleting list', id)\n  return powersync.execute(`DELETE FROM ${ LIST_TABLE } WHERE id = ?`, [id])\n}, [powersync])\n"})}),"\n",(0,s.jsx)(n.h4,{id:"disconnect-powersync-when-we-sign-out",children:"Disconnect PowerSync when we Sign Out"}),"\n",(0,s.jsx)(n.p,{children:"When we sign out, we should disconnect the PowerSync instance from the backend to prevent any further data synchronization,\nand wipe the local database to ensure that no data is left behind."}),"\n",(0,s.jsxs)(n.p,{children:["To do this we'll update our ",(0,s.jsx)(n.code,{children:"SignOutButton"})," to call ",(0,s.jsx)(n.code,{children:"powersync.disconnectAndClear()"})," before we sign out of supabase."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/components/SignOutButton.tsx\n\n//...other imports\nimport { useDatabase } from "app/services/database/database"\n\n// ...\nexport const SignOutButton = observer(function SignOutButton(props: SignOutButtonProps) {\n  // ...\n\n  const { signOut } = useAuth()\n  // success-line\n  const { powersync } = useDatabase()\n\n  // success-line\n  const handleSignOut = async () => {  // make this async\n    // success-line\n    await powersync.disconnectAndClear()\n    await signOut()\n  }\n\n  return (\n    <View style={ $styles }>\n      <Button text="Sign Out" onPress={ handleSignOut }/>\n    </View>\n  )\n})\n\n'})}),"\n",(0,s.jsxs)(n.h4,{id:"install-expo-crypto-to-generate-uuids",children:["install ",(0,s.jsx)(n.code,{children:"expo-crypto"})," to generate UUIDs"]}),"\n",(0,s.jsx)(n.p,{children:"Because PowerSync data is local-first, we can't rely on the database to generate auto-incrementing unique ids for us."}),"\n",(0,s.jsx)(n.p,{children:"When we're offline, the server won't know how many items we've creating, or how many other devices are creating items."}),"\n",(0,s.jsx)(n.p,{children:"So in this situation, the app needs to be responsible for generating unique ids for items locally."}),"\n",(0,s.jsxs)(n.p,{children:["We'll use the ",(0,s.jsx)(n.code,{children:"randomUUID()"})," method from ",(0,s.jsx)(n.code,{children:"expo-crypto"})," for this. It generates UUIDs using cryptographically secure\nrandom values. This provides extra security and ensures that the generated UUIDs are unique."]}),"\n",(0,s.jsxs)(n.p,{children:["Install ",(0,s.jsx)(n.code,{children:"expo-crypto"})," by running this command in your terminal:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"npx expo add expo-crypto\n"})}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"expo-crypto"})," contains native modules, so you'll need to rebuild your app after installing it"]})}),"\n",(0,s.jsxs)(n.h4,{id:"implementing-the-uselists-hook",children:["Implementing the ",(0,s.jsx)(n.code,{children:"useLists"})," Hook"]}),"\n",(0,s.jsxs)(n.p,{children:["Now that we can generate random IDs, we can implement the ",(0,s.jsx)(n.code,{children:"useLists"})," hook:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:'// app/services/database/use-lists.ts\nimport { usePowerSyncWatchedQuery } from "@journeyapps/powersync-sdk-react-native"\nimport { useAuth } from "app/services/database/use-auth"\nimport { useCallback } from "react"\nimport { useDatabase } from "app/services/database/database"\nimport { LIST_TABLE, ListRecord, TODO_TABLE } from "app/services/database/schema"\nimport { randomUUID } from \'expo-crypto\'\n\n// Extend the base type with the calculated fields from our query  \nexport type ListItemRecord = ListRecord & { total_tasks: number; completed_tasks: number }\n\nexport const useLists = () => {\n  // Get the current user from the auth context \n  const { user } = useAuth()\n  // Get the database instance from the context\n  const { powersync } = useDatabase()\n\n  // List fetching logic here. You can modify it as per your needs.\n  const lists = usePowerSyncWatchedQuery<ListItemRecord>(`\n      SELECT ${ LIST_TABLE }.*,\n             COUNT(${ TODO_TABLE }.id) AS total_tasks,\n             SUM(CASE WHEN ${ TODO_TABLE }.completed = true THEN 1 ELSE 0 END) as completed_tasks\n      FROM ${ LIST_TABLE }\n               LEFT JOIN ${ TODO_TABLE } ON ${ LIST_TABLE }.id = ${ TODO_TABLE }.list_id\n      GROUP BY ${ LIST_TABLE }.id\n  `)\n\n\n  const createList = useCallback(async (name: string) => {\n\n    if (!user) {throw new Error("Can\'t add list -- user is undefined")}\n\n    return powersync.execute(\n      `\n          INSERT INTO ${ LIST_TABLE }\n              (id, name, created_at, owner_id)\n          VALUES (?, ?, ?, ?)`,\n      [randomUUID(), name, new Date().toISOString(), user?.id],\n    )\n  }, [user, powersync])\n\n  const deleteList = useCallback(async (id: string) => {\n    console.log(\'Deleting list\', id)\n    return powersync.execute(`DELETE\n                             FROM ${ LIST_TABLE }\n                             WHERE id = ?`, [id])\n  }, [powersync])\n\n  return { lists, createList, deleteList }\n}\n\n'})}),"\n",(0,s.jsx)(n.h3,{id:"create-the-lists-and-addlists-components",children:"Create the Lists and AddLists Components"}),"\n",(0,s.jsx)(n.p,{children:"We're going to need several components to view and manage our todo lists:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"AddList"})," - displays form to add a new list"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"Lists"})," - displays the list of todo lists and allows the user to delete them"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Let start by creating the components using the ignite CLI."}),"\n",(0,s.jsxs)(n.p,{children:["First create the ",(0,s.jsx)(n.code,{children:"AddList"})," and ",(0,s.jsx)(n.code,{children:"Lists"})," components:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"npx ignite-cli generate component AddList\n"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"npx ignite-cli generate component Lists\n"})}),"\n",(0,s.jsx)(n.h3,{id:"add-lists-to-the-welcome-screen",children:"Add Lists to the Welcome Screen"}),"\n",(0,s.jsxs)(n.p,{children:["Add the ",(0,s.jsx)(n.code,{children:"Lists"})," component to the ",(0,s.jsx)(n.code,{children:"WelcomeScreen"})]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/screens/WelcomeScreen.tsx\nimport { NativeStackScreenProps } from "@react-navigation/native-stack"\nimport { Lists, SignOutButton } from "app/components"\nimport { observer } from "mobx-react-lite"\nimport React, { FC } from "react"\nimport { ViewStyle } from "react-native"\nimport { SafeAreaView } from "react-native-safe-area-context"\nimport { SignedInNavigatorParamList } from "../navigators"\nimport { colors } from "../theme"\n\ninterface WelcomeScreenProps\n  extends NativeStackScreenProps<SignedInNavigatorParamList, "Welcome"> {}\n\nexport const WelcomeScreen: FC<WelcomeScreenProps> = observer(function WelcomeScreen() {\n  return (\n    <SafeAreaView style={ $container }>\n      <Lists/>\n      <SignOutButton/>\n    </SafeAreaView>\n  )\n})\n\nconst $container: ViewStyle = {\n  flex: 1,\n  backgroundColor: colors.palette.neutral300,\n  display: "flex",\n  justifyContent: "flex-start",\n  height: "100%",\n  flexDirection: "column",\n}\n\n\n'})}),"\n",(0,s.jsxs)(n.h3,{id:"display-todo-lists-in-lists",children:["Display Todo Lists in ",(0,s.jsx)(n.code,{children:"Lists"})]}),"\n",(0,s.jsxs)(n.p,{children:["Now we can use our ",(0,s.jsx)(n.code,{children:"useLists"})," hook in ",(0,s.jsx)(n.code,{children:"app/components/Lists.tsx"})," to display a list of our todo lists -- we don't have any in our database yet, but we'll add some soon!"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/components/Lists.tsx\nimport { NavigationProp, useNavigation } from "@react-navigation/native"\nimport { AddList, Icon, ListItem, Text } from "app/components"\nimport { AppStackParamList } from "app/navigators"\nimport { ListItemRecord, useLists } from "app/services/database/use-lists"\nimport React, { useCallback } from "react"\nimport { FlatList, TextStyle, View, ViewStyle } from "react-native"\nimport { colors, spacing } from "../theme"\n\nexport function Lists() {\n  \n  // use our hook to fetch the lists\n  const { lists, deleteList } = useLists()\n  const navigation = useNavigation<NavigationProp<AppStackParamList>>()\n\n  // This function tells FlatList how to render each item\n  const renderItem = useCallback(({ item }: { item: ListItemRecord }) => {\n    return (\n      <ListItem\n        textStyle={ $listItemText }\n        onPress={ () => {\n          // Eventually  this si where we\'ll navigate to the todo, but for now we\'ll just log the list name\n          console.log(\'Pressed: \', item.name)\n        } }\n        text={ `${ item.name }` }\n        RightComponent={\n          <View style={ $deleteListIcon }>\n            {/* Let users delete lists */}\n            <Icon icon={ "x" } onPress={ () => deleteList(item.id) }/>\n          </View>\n        }\n      />\n    )\n  }, [])\n\n  return (\n    <View style={ $container }>\n      <Text preset={ "heading" }>Lists</Text>\n      <View style={ $card }>\n        <AddList/>\n      </View>\n      <View style={ [$list, $card] }>\n        <Text preset={ "subheading" }>Your Lists</Text>\n        <FlatList\n          style={ $listContainer }\n          // pass in our lists\n          data={ lists }\n          // pass in our renderItem function\n          renderItem={ renderItem }\n          keyExtractor={ (item) => item.id }\n          ItemSeparatorComponent={ () => <View style={ $separator }/> }\n          // show a message if the list is empty\n          ListEmptyComponent={ <Text style={ $emptyList }>No lists found</Text> }\n        />\n      </View>\n    </View>\n  )\n}\n\n// STYLES\nconst $separator: ViewStyle = { height: 1, backgroundColor: colors.border }\nconst $emptyList: TextStyle = {\n  textAlign: "center",\n  color: colors.textDim,\n  opacity: 0.5,\n  padding: spacing.lg,\n}\nconst $card: ViewStyle = {\n  shadowColor: colors.palette.neutral800,\n  shadowOffset: { width: 0, height: 1 },\n  shadowRadius: 2,\n  shadowOpacity: 0.35,\n  borderRadius: 8,\n}\nconst $listContainer: ViewStyle = {\n  backgroundColor: colors.palette.neutral100,\n  paddingHorizontal: spacing.md,\n  height: "100%",\n  borderColor: colors.border,\n  borderWidth: 1,\n}\nconst $list: ViewStyle = {\n  flex: 1,\n  marginVertical: spacing.md,\n  backgroundColor: colors.palette.neutral200,\n  padding: spacing.md,\n}\nconst $container: ViewStyle = {\n  flex: 1,\n  display: "flex",\n  flexGrow: 1,\n  padding: spacing.md,\n}\nconst $listItemText: TextStyle = {\n  height: 44,\n  width: 44,\n}\nconst $deleteListIcon: ViewStyle = {\n  display: "flex",\n  justifyContent: "center",\n  alignItems: "center",\n  height: 44,\n  marginVertical: spacing.xxs,\n}\n'})}),"\n",(0,s.jsxs)(n.h3,{id:"create-todo-lists-with-addlist",children:["Create Todo Lists with ",(0,s.jsx)(n.code,{children:"AddList"})]}),"\n",(0,s.jsxs)(n.p,{children:["Open ",(0,s.jsx)(n.code,{children:"app/components/AddList.tsx"})," and update the ",(0,s.jsx)(n.code,{children:"AddList"})," component to display a simple form to add a new list."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/components/AddList.tsx\nimport { Button, Text, TextField } from "app/components"\nimport { useLists } from "app/services/database/use-lists"\nimport { colors, spacing } from "app/theme"\nimport { observer } from "mobx-react-lite"\nimport React from "react"\nimport { Keyboard, TextStyle, View, ViewStyle } from "react-native"\n\n/**\n * Display a form to add a new list\n */\nexport const AddList = observer(function AddList() {\n  const [newListName, setNewListName] = React.useState("")\n  const [error, setError] = React.useState<string | null>(null)\n\n  // we use the function from  our hook to create a new list\n  const { createList } = useLists()\n\n  const handleAddList = React.useCallback(async () => {\n    if (!newListName) {\n      Keyboard.dismiss()\n      return\n    }\n    try {\n      await createList(newListName)\n      setNewListName("")\n    } catch (e: any) {\n      setError(`Failed to create list: ${ e?.message ?? "unknown error" }`)\n    } finally {\n      Keyboard.dismiss()\n    }\n  }, [createList, newListName])\n\n  return (\n    <View style={ $container }>\n      <Text preset={ "subheading" }>Add a List</Text>\n      <View style={ $form }>\n        <TextField\n          placeholder="Enter a list name"\n          containerStyle={ $textField }\n          inputWrapperStyle={ $textInput }\n          onChangeText={ setNewListName }\n          value={ newListName }\n          onSubmitEditing={ handleAddList }\n        />\n        <Button text="Add List" style={ $button } onPress={ handleAddList }/>\n      </View>\n      { error && <Text style={ $error }>{ error }</Text> }\n    </View>\n  )\n})\n\nconst $container: ViewStyle = {\n  padding: spacing.md,\n  backgroundColor: colors.palette.neutral200,\n}\n\nconst $form: ViewStyle = {\n  display: "flex",\n  flexDirection: "row",\n  alignItems: "center",\n}\n\nconst $textField: ViewStyle = {\n  flex: 1,\n}\n\nconst $textInput: ViewStyle = {\n  backgroundColor: colors.palette.neutral100,\n}\n\nconst $button: ViewStyle = {\n  marginHorizontal: spacing.xs,\n  padding: 0,\n  paddingHorizontal: spacing.xs,\n  paddingVertical: 0,\n  minHeight: 44,\n}\n\nconst $error: TextStyle = {\n  color: colors.error,\n  marginTop: spacing.sm,\n}\n\n\n'})}),"\n",(0,s.jsx)(n.h3,{id:"checking-in-1",children:"Checking In"}),"\n",(0,s.jsx)(n.p,{children:"By this point you should be able to:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"add new Todo lists,"}),"\n",(0,s.jsx)(n.li,{children:"see a list of all the Todo lists,"}),"\n",(0,s.jsx)(n.li,{children:"delete Todo lists from the list of lists."}),"\n"]}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsx)(n.p,{children:"This is a good time to commit your changes!"})}),"\n",(0,s.jsx)(n.h2,{id:"viewing-and-editing-individual-todolists",children:"Viewing and Editing Individual TodoLists"}),"\n",(0,s.jsx)(n.p,{children:"To view and edit todos inside a list, we'll want to create a new Screen, and add it to the navigator so we can navigate to it."}),"\n",(0,s.jsx)(n.h3,{id:"create-the-todolist-screen",children:"Create the TodoList Screen"}),"\n",(0,s.jsxs)(n.p,{children:["First lets create a new screen called ",(0,s.jsx)(n.code,{children:"TodoList"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-shell",children:"npx ignite-cli generate screen TodoList\n"})}),"\n",(0,s.jsx)(n.p,{children:"This will eventually display the todos for a list. For now we'll just leave it as-is."}),"\n",(0,s.jsxs)(n.h3,{id:"update-the-appnavigator-to-include-the-todolist-screen",children:["Update the AppNavigator to include the ",(0,s.jsx)(n.code,{children:"TodoList"})," screen"]}),"\n",(0,s.jsxs)(n.p,{children:["Open ",(0,s.jsx)(n.code,{children:"app/navigators/SignedInNavigator.tsx"})," and add the ",(0,s.jsx)(n.code,{children:"TodoList"})," screen to the navigator."]}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Find the ",(0,s.jsx)(n.code,{children:"TodoList"})," screen in ",(0,s.jsx)(n.code,{children:"AppStackParamList"}),", and update it to take a ",(0,s.jsx)(n.code,{children:"listId"})," parameter."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"// app/navigators/AppNavigator.tsx\nexport type AppStackParamList = {\n  Welcome: undefined\n  Auth: undefined\n  // success-line\n  TodoList: { listId: string }  // add this line\n  // IGNITE_GENERATOR_ANCHOR_APP_STACK_PARAM_LIST\n}\n"})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Wrap ",(0,s.jsx)(n.code,{children:"WelcomeScreen"})," in a fragment (",(0,s.jsx)(n.code,{children:"<>...</>"}),") and move the ",(0,s.jsx)(n.code,{children:"TodoList"})," screen inside the fragment."]}),"\n",(0,s.jsx)(n.p,{children:"Because the fragment is wrapped in the conditional, it will only be rendered if the user is signed in."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// ...\n\nconst AppStack = observer(function AppStack() {\n  // Fetch the user from the auth context\n  const { signedIn } = useAuth()\n  return (\n    <Stack.Navigator screenOptions={ { headerShown: false, navigationBarColor: colors.background } }>\n      <Stack.Screen name={ "Auth" } component={ AuthScreen }/>\n      // success-line\n      { signedIn ? (\n        // success-line\n        <>\n          // success-line\n          <Stack.Screen name="Welcome" component={ Screens.WelcomeScreen }/>\n          // success-line\n          <Stack.Screen name="TodoList" component={ Screens.TodoListScreen }/>\n          // success-line\n        </>\n        // success-line\n      ) : null }\n      {/* IGNITE_GENERATOR_ANCHOR_APP_STACK_SCREENS */ }\n    </Stack.Navigator>\n  )\n})\n\nexport const AppNavigator = observer(function AppNavigator(props: NavigationProps) {\n  // ...   \n})\n'})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Open ",(0,s.jsx)(n.code,{children:"app/screens/TodoListScreen.tsx"})," and update the screen to receive the ",(0,s.jsx)(n.code,{children:"listId"})," parameter -- for now we'll just display it to make sure we got it."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/screens/TodoListScreen.tsx\n// ...\n\nexport const TodoListScreen: FC<TodoListScreenProps> = function TodoListScreen({\n  navigation,\n  // success-line\n  // We get the listId from the route params\n  // success-line\n  route: { params: {listId} }\n}) {\n  return (\n    <Screen style={ $root } preset="scroll" safeAreaEdges={ ["top"] }>\n      // success-line\n      <Pressable onPress={ () => navigation.goBack() }>\n        <Icon icon={ "back" } size={ 50 }/>\n      </Pressable>\n      // success-line\n      <Text preset={ "heading" } text={ listId }/>\n    </Screen>\n  )\n}\n\nconst $root: ViewStyle = {\n  flex: 1,\n}\n\nconst $backButton: ViewStyle = {\n  height: 44,\n}\n\n\n'})}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.h3,{id:"update-lists-so-touching-a-list-navigated-to-todolistscreen-and-passes-the-listid-param",children:["Update ",(0,s.jsx)(n.code,{children:"Lists"})," so touching a list navigated to ",(0,s.jsx)(n.code,{children:"TodoListScreen"})," and passes the ",(0,s.jsx)(n.code,{children:"listId"})," param"]}),"\n",(0,s.jsxs)(n.p,{children:["Now we can update the ",(0,s.jsx)(n.code,{children:"Lists"})," component to navigate to the ",(0,s.jsx)(n.code,{children:"TodoList"})," screen when a list is pressed."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/components/Lists.tsx\n\n// ... other imports\nimport { NavigationProp, useNavigation } from "@react-navigation/native"\nimport { AppStackParamList } from "app/navigators"\n\nexport function Lists() {\n\n  const { lists, deleteList } = useLists()\n  // We use the root param list, because this component might be reusing in other screens/navigators\n  // success-line\n  const navigation = useNavigation<NavigationProp<AppStackParamList>>()\n\n  const renderItem = useCallback(({ item }: { item: ListItemRecord }) => {\n    return <ListItem\n      // ... other props\n      // Navigate to the TodoList screen, passing the `listId` as a parameter\n      onPress={ () => {\n        // success-line\n        navigation.navigate("TodoList", { listId: item.id })\n      } }\n    />\n  }, [])\n\n  return (\n    //... component body\n  )\n}\n'})}),"\n",(0,s.jsxs)(n.h3,{id:"implement-a-uselist-hook-to-view-and-manage-todos-for-a-list",children:["Implement a ",(0,s.jsx)(n.code,{children:"useList"})," hook to view and manage Todos for a List"]}),"\n",(0,s.jsxs)(n.p,{children:["Now that we can navigate to the ",(0,s.jsx)(n.code,{children:"TodoList"})," screen, we can start fetching and managing the todos for a list."]}),"\n",(0,s.jsx)(n.p,{children:"Once again we'll create a hook to gather together the methods we'll likely use together."}),"\n",(0,s.jsxs)(n.p,{children:["The hook will take a ",(0,s.jsx)(n.code,{children:"listId"})," as a parameter, and return the list, the todos for that list, and functions to add and remove todos."]}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsxs)(n.p,{children:["We are using ",(0,s.jsx)(n.code,{children:"usePowerSyncQuery"})," to fetch the list and ",(0,s.jsx)(n.code,{children:"usePowerSyncWatchedQuery"})," to fetch the todos, because the list itself won't change often, so we only need to watch the todos for changes."]})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/services/database/use-list.ts\n\nimport { usePowerSyncQuery, usePowerSyncWatchedQuery } from "@journeyapps/powersync-sdk-react-native"\nimport { useDatabase } from "app/services/database/database"\nimport { LIST_TABLE, ListRecord, TODO_TABLE, TodoRecord } from "app/services/database/schema"\nimport { useAuth } from "app/services/database/use-auth"\nimport { useCallback } from "react"\nimport { randomUUID } from \'expo-crypto\'\n\n\nexport function useList(listId: string) {\n  const { user } = useAuth()\n  const { powersync } = useDatabase()\n\n\n  const listRecords = usePowerSyncQuery<ListRecord>(`\n      SELECT *\n      FROM ${ LIST_TABLE }\n      WHERE id = ?\n  `, [listId])\n\n  // we only expect one list record\n  const list = listRecords[0]\n\n\n  const todos = usePowerSyncWatchedQuery<TodoRecord>(`\n      SELECT *\n      FROM ${ TODO_TABLE }\n      WHERE list_id = ?\n  `, [listId])\n\n\n  const addTodo = useCallback(async (description: string): Promise<{ error: string | null }> => {\n    if (!user) {\n      throw new Error("Can\'t add todo -- user is undefined")\n    }\n    try {\n      await powersync.execute(\n        `INSERT INTO ${ TODO_TABLE }\n             (id, description, created_at, list_id, created_by, completed)\n         VALUES (?, ?, ?, ?, ?, ?)`,\n        [randomUUID(), description, new Date().toISOString(), listId, user?.id, 0],\n      )\n\n      return { error: null }\n    } catch (error: any) {\n      return { error: `Error adding todo: ${ error?.message }` }\n    }\n  }, [user, powersync, listId])\n\n  const removeTodo = useCallback(async (id: string): Promise<{ error: string | null }> => {\n    try {\n      await powersync.execute(`DELETE\n                                FROM ${ TODO_TABLE }\n                                WHERE id = ?`, [id])\n      return { error: null }\n    } catch (error: any) {\n      console.error("Error removing todo", error)\n      return { error: `Error removing todo: ${ error?.message }` }\n    }\n\n  }, [\n    powersync,\n  ])\n\n  const setTodoCompleted = useCallback(async (id: string, completed: boolean): Promise<{ error: string | null }> => {\n\n    const completedAt = completed ? new Date().toISOString() : null\n    const completedBy = completed ? user?.id : null\n\n    try {\n      await powersync.execute(`\n            UPDATE ${ TODO_TABLE }\n            SET completed = ?, completed_at = ?, completed_by = ?\n            WHERE id = ?\n        `, [completed, completedAt, completedBy, id])\n\n      return { error: null }\n\n    } catch (error: any) {\n      console.error(\'Error toggling todo\', error)\n      return { error: `Error toggling todo: ${ error?.message }` }\n    }\n  }, [powersync])\n\n\n  return { list, todos, addTodo, removeTodo, setTodoCompleted }\n\n}\n\n'})}),"\n",(0,s.jsxs)(n.h3,{id:"implement-todolistscreen-to-display-and-edit-todos-in-a-list",children:["Implement ",(0,s.jsx)(n.code,{children:"TodoListScreen"})," to Display and Edit Todos in a List"]}),"\n",(0,s.jsxs)(n.p,{children:["Now in our ",(0,s.jsx)(n.code,{children:"TodoList"})," screen we can use the ",(0,s.jsx)(n.code,{children:"useList"})," hook to fetch the todos for a list:"]}),"\n",(0,s.jsxs)(n.p,{children:["A lot of this should be familiar by now, we're using the ",(0,s.jsx)(n.code,{children:"useList"})," hook to fetch the list and todos, and then rendering them in a FlatList."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:'// app/screens/TodoListScreen.tsx\nimport { Button, Icon, ListItem, Screen, Text, TextField } from "app/components"\nimport { SignedInNavigatorScreenProps } from "app/navigators"\nimport { TodoRecord } from "app/services/database/schema"\nimport { useList } from "app/services/database/use-list"\nimport { colors, spacing } from "app/theme"\nimport React, { FC, useCallback } from "react"\nimport { FlatList, Pressable, TextStyle, View, ViewStyle } from "react-native"\nimport { SafeAreaView } from "react-native-safe-area-context"\n\ninterface TodoListScreenProps extends SignedInNavigatorScreenProps<"TodoList"> {}\n\nexport const TodoListScreen: FC<TodoListScreenProps> = function TodoListScreen({\n  navigation,\n  route: { params: { listId } },\n}) {\n\n  // We use the hook to get the list and todos for the list\n  const { list, todos, addTodo, removeTodo, setTodoCompleted } = useList(listId)\n\n  // State for managing the new todo input and errors\n  const [newTodo, setNewTodo] = React.useState("")\n  const [error, setError] = React.useState<string | null>(null)\n\n  // We wrap the addTodo from the hook with a bit of error handling\n  const handleAddTodo = useCallback(async () => {\n    const { error } = await addTodo(newTodo)\n    if (error) {\n      setError(error)\n      return\n    }\n    setNewTodo("")\n  }, [newTodo])\n\n  // And do the same for removeTodo\n  const handleRemoveTodo = useCallback(async (id: string) => {\n    const { error } = await removeTodo(id)\n    if (error) {\n      setError(error)\n    }\n  }, [removeTodo, setError])\n\n  // We\'ll use the ListItem component to display each todo, as we did with the lists\n  const renderItem = useCallback(({ item }: { item: TodoRecord }) => {\n    return <ListItem\n      containerStyle={ $listItemContainer }\n      textStyle={ [$listItemText, item.completed && $strikeThrough] }\n      text={ `${ item.description }` }\n      RightComponent={ (\n        <Pressable style={ $deleteIcon }>\n          <Icon icon={ "x" } onPress={ () => handleRemoveTodo(item.id) }/>\n        </Pressable>) }\n      onPress={ () => setTodoCompleted(item.id, !item.completed) }\n    />\n  }, [\n    handleRemoveTodo,\n  ])\n\n  return (\n    <Screen style={ $root } preset="fixed">\n      <SafeAreaView style={ $header } edges={ ["top"] }>\n        <Pressable onPress={ () => navigation.goBack() }>\n          <Icon icon={ "back" } size={ 44 }/>\n        </Pressable>\n        <Text style={ $listName } preset={ "heading" } text={ list?.name }/>\n      </SafeAreaView>\n      <View style={ $addTodoContainer }>\n        <Text preset={ "subheading" }>Add a list</Text>\n        <View style={ $form }>\n          <TextField\n            placeholder="New todo..."\n            containerStyle={ $textField }\n            inputWrapperStyle={ $textInput }\n            onChangeText={ setNewTodo }\n            value={ newTodo }/>\n          <Button text="ADD" style={ $button } onPress={ handleAddTodo }/>\n        </View>\n        { error && <Text style={ $error }>{ error }</Text> }\n      </View>\n      <View style={ $container }>\n        <FlatList\n          data={ todos }\n          renderItem={ renderItem }\n          ItemSeparatorComponent={ () => <View style={ $separator }/> }\n          ListEmptyComponent={ <Text style={ $emptyList }>List is Empty</Text> }\n        />\n      </View>\n    </Screen>\n  )\n}\n\nconst $root: ViewStyle = {\n  flex: 1,\n}\nconst $listItemContainer: ViewStyle = {\n  alignItems: "center",\n}\n\nconst $strikeThrough: TextStyle = { textDecorationLine: "line-through" }\n\nconst $form: ViewStyle = {\n  display: "flex",\n  flexDirection: "row",\n  alignItems: "center",\n}\n\nconst $separator: ViewStyle = { height: 1, backgroundColor: colors.border }\n\nconst $emptyList: TextStyle = {\n  color: colors.textDim,\n  opacity: 0.5,\n  padding: spacing.lg,\n  fontSize: 24,\n}\n\nconst $textField: ViewStyle = {\n  flex: 1,\n}\n\nconst $textInput: ViewStyle = {\n  backgroundColor: colors.palette.neutral100,\n}\n\n\nconst $button: ViewStyle = {\n  marginHorizontal: spacing.xs,\n  padding: 0,\n  paddingHorizontal: spacing.xs,\n  paddingVertical: 0,\n}\n\nconst $addTodoContainer: ViewStyle = {\n  padding: spacing.md,\n  backgroundColor: colors.palette.neutral300,\n}\nconst $header: ViewStyle = {\n  display: "flex",\n  flexDirection: "row",\n  alignItems: "center",\n  backgroundColor: colors.palette.secondary200,\n  paddingBottom: spacing.md,\n}\n\nconst $listName: TextStyle = {\n  marginLeft: spacing.sm,\n  flex: 1,\n}\n\nconst $error: TextStyle = {\n  color: colors.error,\n  marginTop: spacing.sm,\n}\n\nconst $container: ViewStyle = {\n  padding: spacing.md,\n}\n\nconst $listItemText: TextStyle = {\n  height: 44,\n  verticalAlign: "middle"\n}\n\nconst $deleteIcon: ViewStyle = {\n  display: "flex",\n  justifyContent: "center",\n  alignItems: "center",\n  height: 44,\n  marginVertical: spacing.xxs,\n}\n\n'})}),"\n",(0,s.jsx)(n.h3,{id:"checking-in-2",children:"Checking In"}),"\n",(0,s.jsx)(n.p,{children:"At this point you should be able to:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["Touch a list in the ",(0,s.jsx)(n.code,{children:"Lists"})," component and navigate to the ",(0,s.jsx)(n.code,{children:"TodoList"})," screen"]}),"\n",(0,s.jsxs)(n.li,{children:["See the list of todos in the list on the ",(0,s.jsx)(n.code,{children:"TodoList"})," screen"]}),"\n",(0,s.jsx)(n.li,{children:"Add and remove todos from the list"}),"\n",(0,s.jsx)(n.li,{children:"Toggle todos completed status by tapping them"}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"congratulations",children:"Congratulations!"}),"\n",(0,s.jsx)(n.p,{children:"Now you have all the tools you need use PowerSync and Supabase to build a local-first app with real-time sync!"})]})}function p(e={}){const{wrapper:n}={...(0,o.M)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},2172:(e,n,t)=>{t.d(n,{I:()=>r,M:()=>i});var s=t(1504);const o={},a=s.createContext(o);function i(e){const n=s.useContext(a);return s.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(o):e.components||o:i(e.components),s.createElement(a.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/main.98d21fb0.js b/assets/js/main.98d21fb0.js
new file mode 100644
index 00000000..bb865115
--- /dev/null
+++ b/assets/js/main.98d21fb0.js
@@ -0,0 +1,2 @@
+/*! For license information please see main.98d21fb0.js.LICENSE.txt */
+(self.webpackChunkignite_cookbook=self.webpackChunkignite_cookbook||[]).push([[1590],{5052:(e,n,t)=>{"use strict";t.d(n,{I:()=>o});var r=t(1504);function o(){return r.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20"},r.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}},628:(e,n,t)=>{"use strict";t.d(n,{c:()=>p});t(1504);var r=t(8852),o=t.n(r),a=t(4504);const i={"03224537":[()=>t.e(5284).then(t.bind(t,4024)),"@site/docs/recipes/DetoxIntro.md",4024],"0825c398":[()=>t.e(5524).then(t.t.bind(t,5708,19)),"~docs/default/tag-docs-tags-backend-b17.json",5708],"08a54ed9":[()=>t.e(5156).then(t.t.bind(t,1128,19)),"~docs/default/tag-docs-tags-expo-updates-8e6.json",1128],"0e384e19":[()=>t.e(6328).then(t.bind(t,9404)),"@site/docs/intro.md",9404],"145425bc":[()=>t.e(16).then(t.bind(t,9856)),"@site/docs/recipes/AccessibilityFontSizes.md",9856],17896441:[()=>Promise.all([t.e(2176),t.e(4912),t.e(6752)]).then(t.bind(t,4276)),"@theme/DocItem",4276],"18d888f3":[()=>t.e(5640).then(t.t.bind(t,9584,19)),"~docs/default/tag-docs-tags-state-management-fd9.json",9584],"199ff765":[()=>t.e(8368).then(t.t.bind(t,2520,19)),"~docs/default/tag-docs-tags-offline-support-d09.json",2520],"19d620af":[()=>t.e(3966).then(t.t.bind(t,5568,19)),"~docs/default/tag-docs-tags-ui-22c.json",5568],"1a4e3797":[()=>Promise.all([t.e(2176),t.e(9648)]).then(t.bind(t,3416)),"@theme/SearchPage",3416],"1ab29606":[()=>t.e(6928).then(t.t.bind(t,7704,19)),"~docs/default/tag-docs-tags-apisauce-8de.json",7704],"1c9ea255":[()=>t.e(8636).then(t.bind(t,620)),"@site/docs/recipes/TypeScriptBaseURL.md",620],"1df93b7f":[()=>Promise.all([t.e(2176),t.e(2096),t.e(8552)]).then(t.bind(t,9184)),"@site/src/pages/index.tsx",9184],"24a07a83":[()=>t.e(4424).then(t.t.bind(t,4136,19)),"~docs/default/tag-docs-tags-generator-e43.json",4136],"24c3776a":[()=>t.e(9828).then(t.bind(t,176)),"@site/docs/recipes/DistributingAuthTokenToAPI.md",176],"3192f89a":[()=>t.e(4992).then(t.t.bind(t,590,19)),"/home/runner/work/ignite-cookbook/ignite-cookbook/.docusaurus/docusaurus-plugin-content-pages/default/plugin-route-context-module-100.json",590],"31ac2bc7":[()=>t.e(9632).then(t.t.bind(t,9010,19)),"~docs/default/tag-docs-tags-cng-585.json",9010],"33f24359":[()=>t.e(222).then(t.t.bind(t,1592,19)),"~docs/default/tag-docs-tags-eas-update-bce.json",1592],"3663082a":[()=>t.e(5592).then(t.t.bind(t,6944,19)),"~docs/default/tag-docs-tags-data-synchronization-126.json",6944],"3720c009":[()=>Promise.all([t.e(2176),t.e(4492)]).then(t.bind(t,2808)),"@theme/DocTagsListPage",2808],"3bb7a4af":[()=>t.e(2008).then(t.t.bind(t,7264,19)),"~docs/default/tag-docs-tags-i-os-d44.json",7264],"47a03c7f":[()=>t.e(3336).then(t.t.bind(t,7536,19)),"~docs/default/tag-docs-tags-testing-194.json",7536],"4a4fb967":[()=>t.e(6756).then(t.t.bind(t,9056,19)),"~docs/default/tag-docs-tags-accessibility-83c.json",9056],"4e09609f":[()=>t.e(3128).then(t.bind(t,8220)),"@site/docs/recipes/SampleYAMLCircleCI.md",8220],"51658ad1":[()=>t.e(9576).then(t.t.bind(t,5752,19)),"~docs/default/tag-docs-tags-intro-ce4.json",5752],"51e76fb5":[()=>t.e(5064).then(t.bind(t,4488)),"@site/docs/recipes/MaestroSetup.md",4488],"51ea30c5":[()=>t.e(2324).then(t.t.bind(t,162,19)),"~docs/default/tag-docs-tags-mob-x-748.json",162],"54a9c7e8":[()=>t.e(8576).then(t.bind(t,2716)),"@site/docs/recipes/PrepForEASBuild.md",2716],"55960ee5":[()=>t.e(4296).then(t.t.bind(t,2416,19)),"~docs/default/tags-list-current-prop-15a.json",2416],"569bff92":[()=>t.e(5320).then(t.t.bind(t,2968,19)),"~docs/default/tag-docs-tags-hardware-92c.json",2968],"5e95c892":[()=>t.e(4304).then(t.bind(t,3564)),"@theme/DocsRoot",3564],"5e9f5e1a":[()=>Promise.resolve().then(t.bind(t,7768)),"@generated/docusaurus.config",7768],"5fd7ef2e":[()=>t.e(656).then(t.bind(t,9044)),"@site/docs/recipes/LocalFirstDataWithPowerSync.md",9044],63181745:[()=>t.e(5548).then(t.bind(t,9108)),"@site/docs/recipes/UsingScreenReaders.md",9108],"657027a7":[()=>t.e(3180).then(t.bind(t,8232)),"@site/docs/recipes/MigratingToMMKV.md",8232],"6728e797":[()=>t.e(8616).then(t.t.bind(t,6824,19)),"~docs/default/tag-docs-tags-android-593.json",6824],"69dd30cd":[()=>t.e(4e3).then(t.t.bind(t,7672,19)),"~docs/default/tag-docs-tags-prettier-367.json",7672],"6fd287af":[()=>t.e(4264).then(t.bind(t,9700)),"@site/docs/recipes/UpdatingIgnite.md",9700],"72dfd944":[()=>t.e(40).then(t.t.bind(t,8466,19)),"~docs/default/tag-docs-tags-text-field-8cc.json",8466],"78a0b2f7":[()=>t.e(4224).then(t.bind(t,4068)),"@site/docs/recipes/SwitchBetweenExpoGoCNG.md",4068],"7acb6f50":[()=>t.e(56).then(t.t.bind(t,9200,19)),"~docs/default/tag-docs-tags-yarn-9bd.json",9200],"7b45617e":[()=>t.e(8436).then(t.bind(t,9368)),"@site/docs/recipes/GeneratorComponentTests.md",9368],"7f8cce85":[()=>t.e(4212).then(t.t.bind(t,2536,19)),"~docs/default/tag-docs-tags-power-sync-570.json",2536],82139467:[()=>t.e(7820).then(t.t.bind(t,5688,19)),"~docs/default/tag-docs-tags-react-native-vision-camera-af5.json",5688],"8b0d950b":[()=>t.e(3960).then(t.t.bind(t,4832,19)),"~docs/default/tag-docs-tags-dependencies-d4f.json",4832],"935f2afb":[()=>t.e(5696).then(t.t.bind(t,5988,19)),"~docs/default/version-current-metadata-prop-751.json",5988],"94ee064e":[()=>t.e(7300).then(t.t.bind(t,5683,19)),"~docs/default/tag-docs-tags-react-navigation-23c.json",5683],"954f316d":[()=>t.e(6044).then(t.t.bind(t,9272,19)),"~docs/default/tag-docs-tags-zustand-18e.json",9272],"985027d8":[()=>t.e(2160).then(t.t.bind(t,6843,19)),"~docs/default/tag-docs-tags-archive-6cf.json",6843],"99d16955":[()=>t.e(622).then(t.t.bind(t,5004,19)),"~docs/default/tag-docs-tags-eas-228.json",5004],"9dc0f37b":[()=>t.e(6704).then(t.t.bind(t,6154,19)),"~docs/default/tag-docs-tags-section-list-198.json",6154],"9fc76e3d":[()=>t.e(900).then(t.bind(t,8468)),"@site/docs/recipes/EASUpdate.md",8468],a0d6a633:[()=>t.e(7732).then(t.t.bind(t,1284,19)),"~docs/default/tag-docs-tags-expo-dev-client-4bf.json",1284],a2f5d017:[()=>t.e(916).then(t.bind(t,3884)),"@site/docs/recipes/Redux.md",3884],a7bd4aaa:[()=>t.e(6500).then(t.bind(t,2e3)),"@theme/DocVersionRoot",2e3],a8646ade:[()=>t.e(3008).then(t.t.bind(t,1492,19)),"~docs/default/tag-docs-tags-mmkv-046.json",1492],a8f9d519:[()=>t.e(6216).then(t.t.bind(t,606,19)),"~docs/default/tag-docs-tags-scroll-to-8d4.json",606],a94703ab:[()=>Promise.all([t.e(2176),t.e(4666)]).then(t.bind(t,996)),"@theme/DocRoot",996],a951c726:[()=>t.e(8200).then(t.t.bind(t,7976,19)),"~docs/default/tag-docs-tags-ci-cd-ed9.json",7976],abaad534:[()=>t.e(2464).then(t.t.bind(t,4684,19)),"/home/runner/work/ignite-cookbook/ignite-cookbook/.docusaurus/docusaurus-theme-search-algolia/default/plugin-route-context-module-100.json",4684],abfb2977:[()=>t.e(2044).then(t.t.bind(t,6278,19)),"~docs/default/tag-docs-tags-database-1c7.json",6278],b33180cb:[()=>t.e(1528).then(t.bind(t,7160)),"@site/docs/archive/PristineExpoProject.md",7160],b3d1732c:[()=>t.e(95).then(t.t.bind(t,2464,19)),"~docs/default/tag-docs-tags-babel-ecc.json",2464],b832b2ff:[()=>t.e(4822).then(t.t.bind(t,2962,19)),"~docs/default/tag-docs-tags-imports-63f.json",2962],b8c37621:[()=>t.e(2372).then(t.t.bind(t,4328,19)),"~docs/default/tag-docs-tags-guide-a32.json",4328],c3e2f4d4:[()=>t.e(1264).then(t.bind(t,5800)),"@site/docs/recipes/UnrenderedItemInScrollView.md",5800],c47fa949:[()=>t.e(5032).then(t.bind(t,8332)),"@site/docs/recipes/ExpoRouter.md",8332],c5abe9fe:[()=>t.e(9607).then(t.t.bind(t,1344,19)),"~docs/default/tag-docs-tags-vision-camera-2ad.json",1344],c5ca3bf3:[()=>t.e(8872).then(t.t.bind(t,872,19)),"~docs/default/tag-docs-tags-expo-router-e61.json",872],c75b21fd:[()=>t.e(1412).then(t.bind(t,6188)),"@site/docs/recipes/RemoveMobxStateTree.md",6188],cc1d3934:[()=>t.e(8500).then(t.bind(t,5220)),"@site/docs/recipes/ReactNativeVisionCamera.md",5220],ccf3150e:[()=>t.e(7600).then(t.t.bind(t,3030,19)),"~docs/default/tag-docs-tags-ui-required-device-capabilities-7ff.json",3030],ce17b301:[()=>t.e(1388).then(t.t.bind(t,1540,19)),"~docs/default/tag-docs-tags-expo-4de.json",1540],cecd52bc:[()=>t.e(8).then(t.bind(t,6040)),"@site/docs/recipes/RequiringHardwareFeaturesWithExpo.md",6040],cf59a740:[()=>t.e(8780).then(t.t.bind(t,411,19)),"~docs/default/tag-docs-tags-react-native-b11.json",411],d01c4de2:[()=>t.e(7224).then(t.t.bind(t,488,19)),"~docs/default/tag-docs-tags-async-storage-da0.json",488],d0e08e4a:[()=>t.e(9016).then(t.bind(t,2980)),"@site/docs/recipes/PatchingBuildingAndroid.md",2980],d63d2b89:[()=>Promise.all([t.e(6432),t.e(5276)]).then(t.bind(t,6960)),"@site/docs/recipes/SelectFieldWithBottomSheet.mdx",6960],d699663a:[()=>t.e(1784).then(t.t.bind(t,5820,19)),"~docs/default/tag-docs-tags-uses-feature-818.json",5820],d6ab422f:[()=>t.e(8762).then(t.bind(t,7748)),"@site/docs/recipes/EnvironmentVariables.md",7748],d7af48b9:[()=>t.e(6264).then(t.bind(t,2508)),"@site/docs/recipes/EnforcingImportOrder.md",2508],da9277bc:[()=>t.e(5856).then(t.bind(t,1188)),"@site/docs/recipes/UpdatingDependencies.md",1188],dce6faa4:[()=>t.e(2596).then(t.t.bind(t,5892,19)),"~docs/default/tag-docs-tags-select-field-e86.json",5892],dd3340a6:[()=>t.e(7572).then(t.bind(t,8508)),"@site/docs/archive/index.md",8508],dec1aed8:[()=>t.e(9144).then(t.t.bind(t,4986,19)),"~docs/default/tag-docs-tags-maestro-a0f.json",4986],df203c0f:[()=>Promise.all([t.e(2176),t.e(3400)]).then(t.bind(t,8614)),"@theme/DocTagDocListPage",8614],e0854532:[()=>t.e(2288).then(t.t.bind(t,2456,19)),"~docs/default/tag-docs-tags-flat-list-bca.json",2456],e1b6b0a8:[()=>t.e(328).then(t.t.bind(t,2984,19)),"~docs/default/tag-docs-tags-debug-69b.json",2984],e2041b9b:[()=>t.e(7164).then(t.t.bind(t,9680,19)),"~docs/default/tag-docs-tags-redux-49b.json",9680],e33e793e:[()=>t.e(5708).then(t.bind(t,3356)),"@site/docs/recipes/Zustand.md",3356],e7928ab4:[()=>t.e(6460).then(t.t.bind(t,2080,19)),"/home/runner/work/ignite-cookbook/ignite-cookbook/.docusaurus/docusaurus-plugin-content-docs/default/plugin-route-context-module-100.json",2080],ecce3b64:[()=>t.e(3324).then(t.t.bind(t,4640,19)),"~docs/default/tag-docs-tags-authentication-9a3.json",4640],f50f3884:[()=>t.e(1236).then(t.t.bind(t,9720,19)),"~docs/default/tag-docs-tags-prebuild-64b.json",9720],f523b160:[()=>t.e(3504).then(t.bind(t,2232)),"@site/docs/recipes/CreatingGreateExperienceForScreenReaders.md",2232],fd1937a7:[()=>t.e(4116).then(t.t.bind(t,7472,19)),"~docs/default/tag-docs-tags-environment-variables-3be.json",7472],fe9b09bf:[()=>t.e(140).then(t.bind(t,1204)),"@site/docs/recipes/CircleCIRNSetup.md",1204],ff2c7cca:[()=>t.e(6252).then(t.t.bind(t,2248,19)),"~docs/default/tag-docs-tags-type-script-6e5.json",2248]};var s=t(7624);function l(e){let{error:n,retry:t,pastDelay:r}=e;return n?(0,s.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,s.jsx)("p",{children:String(n)}),(0,s.jsx)("div",{children:(0,s.jsx)("button",{type:"button",onClick:t,children:"Retry"})})]}):r?(0,s.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"},children:(0,s.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,s.jsxs)("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[(0,s.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,s.jsx)("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,s.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,s.jsx)("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,s.jsx)("circle",{cx:"22",cy:"22",r:"8",children:(0,s.jsx)("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})}):null}var c=t(8120),u=t(5548);function d(e,n){if("*"===e)return o()({loading:l,loader:()=>t.e(4552).then(t.bind(t,4552)),modules:["@theme/NotFound"],webpack:()=>[4552],render(e,n){const t=e.default;return(0,s.jsx)(u.Y,{value:{plugin:{name:"native",id:"default"}},children:(0,s.jsx)(t,{...n})})}});const r=a[`${e}-${n}`],d={},p=[],f=[],m=(0,c.c)(r);return Object.entries(m).forEach((e=>{let[n,t]=e;const r=i[t];r&&(d[n]=r[0],p.push(r[1]),f.push(r[2]))})),o().Map({loading:l,loader:d,modules:p,webpack:()=>f,render(n,t){const o=JSON.parse(JSON.stringify(r));Object.entries(n).forEach((n=>{let[t,r]=n;const a=r.default;if(!a)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 a&&"function"!=typeof a||Object.keys(r).filter((e=>"default"!==e)).forEach((e=>{a[e]=r[e]}));let i=o;const s=t.split(".");s.slice(0,-1).forEach((e=>{i=i[e]})),i[s[s.length-1]]=a}));const a=o.__comp;delete o.__comp;const i=o.__context;return delete o.__context,(0,s.jsx)(u.Y,{value:i,children:(0,s.jsx)(a,{...o,...t})})}})}const p=[{path:"/search",component:d("/search","437"),exact:!0},{path:"/docs",component:d("/docs","384"),routes:[{path:"/docs",component:d("/docs","086"),routes:[{path:"/docs/tags",component:d("/docs/tags","0cc"),exact:!0},{path:"/docs/tags/accessibility",component:d("/docs/tags/accessibility","8aa"),exact:!0},{path:"/docs/tags/android",component:d("/docs/tags/android","e3a"),exact:!0},{path:"/docs/tags/apisauce",component:d("/docs/tags/apisauce","143"),exact:!0},{path:"/docs/tags/archive",component:d("/docs/tags/archive","51b"),exact:!0},{path:"/docs/tags/async-storage",component:d("/docs/tags/async-storage","afc"),exact:!0},{path:"/docs/tags/authentication",component:d("/docs/tags/authentication","587"),exact:!0},{path:"/docs/tags/babel",component:d("/docs/tags/babel","e90"),exact:!0},{path:"/docs/tags/backend",component:d("/docs/tags/backend","908"),exact:!0},{path:"/docs/tags/ci-cd",component:d("/docs/tags/ci-cd","56c"),exact:!0},{path:"/docs/tags/cng",component:d("/docs/tags/cng","581"),exact:!0},{path:"/docs/tags/data-synchronization",component:d("/docs/tags/data-synchronization","453"),exact:!0},{path:"/docs/tags/database",component:d("/docs/tags/database","7e4"),exact:!0},{path:"/docs/tags/debug",component:d("/docs/tags/debug","888"),exact:!0},{path:"/docs/tags/dependencies",component:d("/docs/tags/dependencies","c34"),exact:!0},{path:"/docs/tags/eas",component:d("/docs/tags/eas","17a"),exact:!0},{path:"/docs/tags/eas-update",component:d("/docs/tags/eas-update","632"),exact:!0},{path:"/docs/tags/environment-variables",component:d("/docs/tags/environment-variables","0f3"),exact:!0},{path:"/docs/tags/expo",component:d("/docs/tags/expo","a41"),exact:!0},{path:"/docs/tags/expo-dev-client",component:d("/docs/tags/expo-dev-client","0df"),exact:!0},{path:"/docs/tags/expo-router",component:d("/docs/tags/expo-router","257"),exact:!0},{path:"/docs/tags/expo-updates",component:d("/docs/tags/expo-updates","807"),exact:!0},{path:"/docs/tags/flat-list",component:d("/docs/tags/flat-list","5a7"),exact:!0},{path:"/docs/tags/generator",component:d("/docs/tags/generator","80e"),exact:!0},{path:"/docs/tags/guide",component:d("/docs/tags/guide","cea"),exact:!0},{path:"/docs/tags/hardware",component:d("/docs/tags/hardware","303"),exact:!0},{path:"/docs/tags/i-os",component:d("/docs/tags/i-os","96e"),exact:!0},{path:"/docs/tags/imports",component:d("/docs/tags/imports","887"),exact:!0},{path:"/docs/tags/intro",component:d("/docs/tags/intro","b42"),exact:!0},{path:"/docs/tags/maestro",component:d("/docs/tags/maestro","034"),exact:!0},{path:"/docs/tags/mmkv",component:d("/docs/tags/mmkv","f7e"),exact:!0},{path:"/docs/tags/mob-x",component:d("/docs/tags/mob-x","a01"),exact:!0},{path:"/docs/tags/offline-support",component:d("/docs/tags/offline-support","6ec"),exact:!0},{path:"/docs/tags/power-sync",component:d("/docs/tags/power-sync","dca"),exact:!0},{path:"/docs/tags/prebuild",component:d("/docs/tags/prebuild","83d"),exact:!0},{path:"/docs/tags/prettier",component:d("/docs/tags/prettier","db7"),exact:!0},{path:"/docs/tags/react-native",component:d("/docs/tags/react-native","873"),exact:!0},{path:"/docs/tags/react-native-vision-camera",component:d("/docs/tags/react-native-vision-camera","ea0"),exact:!0},{path:"/docs/tags/react-navigation",component:d("/docs/tags/react-navigation","0ad"),exact:!0},{path:"/docs/tags/redux",component:d("/docs/tags/redux","c5e"),exact:!0},{path:"/docs/tags/scroll-to",component:d("/docs/tags/scroll-to","f32"),exact:!0},{path:"/docs/tags/section-list",component:d("/docs/tags/section-list","8de"),exact:!0},{path:"/docs/tags/select-field",component:d("/docs/tags/select-field","5f4"),exact:!0},{path:"/docs/tags/state-management",component:d("/docs/tags/state-management","181"),exact:!0},{path:"/docs/tags/testing",component:d("/docs/tags/testing","b53"),exact:!0},{path:"/docs/tags/text-field",component:d("/docs/tags/text-field","782"),exact:!0},{path:"/docs/tags/type-script",component:d("/docs/tags/type-script","825"),exact:!0},{path:"/docs/tags/ui",component:d("/docs/tags/ui","020"),exact:!0},{path:"/docs/tags/ui-required-device-capabilities",component:d("/docs/tags/ui-required-device-capabilities","73a"),exact:!0},{path:"/docs/tags/uses-feature",component:d("/docs/tags/uses-feature","f1a"),exact:!0},{path:"/docs/tags/vision-camera",component:d("/docs/tags/vision-camera","e9b"),exact:!0},{path:"/docs/tags/yarn",component:d("/docs/tags/yarn","e4e"),exact:!0},{path:"/docs/tags/zustand",component:d("/docs/tags/zustand","24d"),exact:!0},{path:"/docs",component:d("/docs","058"),routes:[{path:"/docs/archive/",component:d("/docs/archive/","ab8"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/archive/PristineExpoProject",component:d("/docs/archive/PristineExpoProject","afa"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/intro",component:d("/docs/intro","194"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/AccessibilityFontSizes",component:d("/docs/recipes/AccessibilityFontSizes","872"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/CircleCIRNSetup",component:d("/docs/recipes/CircleCIRNSetup","ce2"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/CreatingGreateExperienceForScreenReaders",component:d("/docs/recipes/CreatingGreateExperienceForScreenReaders","752"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/DetoxIntro",component:d("/docs/recipes/DetoxIntro","700"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/DistributingAuthTokenToAPI",component:d("/docs/recipes/DistributingAuthTokenToAPI","298"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/EASUpdate",component:d("/docs/recipes/EASUpdate","938"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/EnforcingImportOrder",component:d("/docs/recipes/EnforcingImportOrder","713"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/EnvironmentVariables",component:d("/docs/recipes/EnvironmentVariables","92b"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/ExpoRouter",component:d("/docs/recipes/ExpoRouter","0b5"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/GeneratorComponentTests",component:d("/docs/recipes/GeneratorComponentTests","e55"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/LocalFirstDataWithPowerSync",component:d("/docs/recipes/LocalFirstDataWithPowerSync","9a4"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/MaestroSetup",component:d("/docs/recipes/MaestroSetup","237"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/MigratingToMMKV",component:d("/docs/recipes/MigratingToMMKV","9d0"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/PatchingBuildingAndroid",component:d("/docs/recipes/PatchingBuildingAndroid","ac8"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/PrepForEASBuild",component:d("/docs/recipes/PrepForEASBuild","64a"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/ReactNativeVisionCamera",component:d("/docs/recipes/ReactNativeVisionCamera","e2e"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/Redux",component:d("/docs/recipes/Redux","0f8"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/RemoveMobxStateTree",component:d("/docs/recipes/RemoveMobxStateTree","50f"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/RequiringHardwareFeaturesWithExpo",component:d("/docs/recipes/RequiringHardwareFeaturesWithExpo","2fd"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/SampleYAMLCircleCI",component:d("/docs/recipes/SampleYAMLCircleCI","30a"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/SelectFieldWithBottomSheet",component:d("/docs/recipes/SelectFieldWithBottomSheet","ca3"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/SwitchBetweenExpoGoCNG",component:d("/docs/recipes/SwitchBetweenExpoGoCNG","695"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/TypeScriptBaseURL",component:d("/docs/recipes/TypeScriptBaseURL","986"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/UnrenderedItemInScrollView",component:d("/docs/recipes/UnrenderedItemInScrollView","c15"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/UpdatingDependencies",component:d("/docs/recipes/UpdatingDependencies","21c"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/UpdatingIgnite",component:d("/docs/recipes/UpdatingIgnite","f0c"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/UsingScreenReaders",component:d("/docs/recipes/UsingScreenReaders","324"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/Zustand",component:d("/docs/recipes/Zustand","0e1"),exact:!0,sidebar:"mainSidebar"}]}]}]},{path:"/",component:d("/","703"),exact:!0},{path:"*",component:d("*")}]},240:(e,n,t)=>{"use strict";t.d(n,{e:()=>a,g:()=>i});var r=t(1504),o=t(7624);const a=r.createContext(!1);function i(e){let{children:n}=e;const[t,i]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{i(!0)}),[]),(0,o.jsx)(a.Provider,{value:t,children:n})}},8808:(e,n,t)=>{"use strict";var r=t(1504),o=t(8352),a=t(440),i=t(2160),s=t(8684);const l=[t(7483),t(1462),t(5396),t(1976),t(9115)];var c=t(628),u=t(5592),d=t(5464),p=t(7624);function f(e){let{children:n}=e;return(0,p.jsx)(p.Fragment,{children:n})}var m=t(6952),g=t(8264),h=t(964),y=t(1824),b=t(5008),v=t(1616),S=t(204),w=t(4456),x=t(5684),k=t(8712);function T(){const{i18n:{currentLocale:e,defaultLocale:n,localeConfigs:t}}=(0,g.c)(),r=(0,v.D)(),o=t[e].htmlLang,a=e=>e.replace("-","_");return(0,p.jsxs)(m.c,{children:[Object.entries(t).map((e=>{let[n,{htmlLang:t}]=e;return(0,p.jsx)("link",{rel:"alternate",href:r.createUrl({locale:n,fullyQualified:!0}),hrefLang:t},n)})),(0,p.jsx)("link",{rel:"alternate",href:r.createUrl({locale:n,fullyQualified:!0}),hrefLang:"x-default"}),(0,p.jsx)("meta",{property:"og:locale",content:a(o)}),Object.values(t).filter((e=>o!==e.htmlLang)).map((e=>(0,p.jsx)("meta",{property:"og:locale:alternate",content:a(e.htmlLang)},`meta-og-${e.htmlLang}`)))]})}function E(e){let{permalink:n}=e;const{siteConfig:{url:t}}=(0,g.c)(),r=function(){const{siteConfig:{url:e,baseUrl:n,trailingSlash:t}}=(0,g.c)(),{pathname:r}=(0,u.IT)();return e+(0,x.applyTrailingSlash)((0,h.c)(r),{trailingSlash:t,baseUrl:n})}(),o=n?`${t}${n}`:r;return(0,p.jsxs)(m.c,{children:[(0,p.jsx)("meta",{property:"og:url",content:o}),(0,p.jsx)("link",{rel:"canonical",href:o})]})}function C(){const{i18n:{currentLocale:e}}=(0,g.c)(),{metadata:n,image:t}=(0,y.y)();return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsxs)(m.c,{children:[(0,p.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,p.jsx)("body",{className:S.m})]}),t&&(0,p.jsx)(b.U7,{image:t}),(0,p.jsx)(E,{}),(0,p.jsx)(T,{}),(0,p.jsx)(k.c,{tag:w.e6,locale:e}),(0,p.jsx)(m.c,{children:n.map(((e,n)=>(0,p.jsx)("meta",{...e},n)))})]})}const _=new Map;function A(e){if(_.has(e.pathname))return{...e,pathname:_.get(e.pathname)};if((0,d.C)(c.c,e.pathname).some((e=>{let{route:n}=e;return!0===n.exact})))return _.set(e.pathname,e.pathname),e;const n=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return _.set(e.pathname,n),{...e,pathname:n}}var I=t(240),P=t(136),L=t(5288);function R(e){for(var n=arguments.length,t=new Array(n>1?n-1:0),r=1;r<n;r++)t[r-1]=arguments[r];const o=l.map((n=>{const r=n.default?.[e]??n[e];return r?.(...t)}));return()=>o.forEach((e=>e?.()))}const N=function(e){let{children:n,location:t,previousLocation:r}=e;return(0,L.c)((()=>{r!==t&&(!function(e){let{location:n,previousLocation:t}=e;if(!t)return;const r=n.pathname===t.pathname,o=n.hash===t.hash,a=n.search===t.search;if(r&&o&&!a)return;const{hash:i}=n;if(i){const e=decodeURIComponent(i.substring(1)),n=document.getElementById(e);n?.scrollIntoView()}else window.scrollTo(0,0)}({location:t,previousLocation:r}),R("onRouteDidUpdate",{previousLocation:r,location:t}))}),[r,t]),n};function O(e){const n=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,d.C)(c.c,e))).flat();return Promise.all(n.map((e=>e.route.component.preload?.())))}class F extends r.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=s.c.canUseDOM?R("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,n){if(e.location===this.props.location)return n.nextRouteHasLoaded;const t=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=R("onRouteUpdate",{previousLocation:this.previousLocation,location:t}),O(t.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:n}=this.props;return(0,p.jsx)(N,{previousLocation:this.previousLocation,location:n,children:(0,p.jsx)(u.kX,{location:n,render:()=>e})})}}const j=F,D="__docusaurus-base-url-issue-banner-container",M="__docusaurus-base-url-issue-banner",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 = '${D}';\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 U(){const{siteConfig:{baseUrl:e}}=(0,g.c)();return(0,p.jsx)(p.Fragment,{children:!s.c.canUseDOM&&(0,p.jsx)(m.c,{children:(0,p.jsx)("script",{children:$(e)})})})}function V(){const{siteConfig:{baseUrl:e,baseUrlIssueBanner:n}}=(0,g.c)(),{pathname:t}=(0,u.IT)();return n&&t===e?(0,p.jsx)(U,{}):null}function z(){const{siteConfig:{favicon:e,title:n,noIndex:t},i18n:{currentLocale:r,localeConfigs:o}}=(0,g.c)(),a=(0,h.c)(e),{htmlLang:i,direction:s}=o[r];return(0,p.jsxs)(m.c,{children:[(0,p.jsx)("html",{lang:i,dir:s}),(0,p.jsx)("title",{children:n}),(0,p.jsx)("meta",{property:"og:title",content:n}),(0,p.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),t&&(0,p.jsx)("meta",{name:"robots",content:"noindex, nofollow"}),e&&(0,p.jsx)("link",{rel:"icon",href:a})]})}var H=t(5852),W=t(3664);function G(){const e=(0,W.c)();return(0,p.jsx)(m.c,{children:(0,p.jsx)("html",{"data-has-hydrated":e})})}function q(){const e=(0,d.k)(c.c),n=(0,u.IT)();return(0,p.jsx)(H.c,{children:(0,p.jsx)(P.y,{children:(0,p.jsxs)(I.g,{children:[(0,p.jsxs)(f,{children:[(0,p.jsx)(z,{}),(0,p.jsx)(C,{}),(0,p.jsx)(V,{}),(0,p.jsx)(j,{location:A(n),children:e})]}),(0,p.jsx)(G,{})]})})})}var Y=t(4504);const K=function(e){try{return document.createElement("link").relList.supports(e)}catch{return!1}}("prefetch")?function(e){return new Promise(((n,t)=>{if("undefined"==typeof document)return void t();const r=document.createElement("link");r.setAttribute("rel","prefetch"),r.setAttribute("href",e),r.onload=()=>n(),r.onerror=()=>t();const o=document.getElementsByTagName("head")[0]??document.getElementsByName("script")[0]?.parentNode;o?.appendChild(r)}))}:function(e){return new Promise(((n,t)=>{const r=new XMLHttpRequest;r.open("GET",e,!0),r.withCredentials=!0,r.onload=()=>{200===r.status?n():t()},r.send(null)}))};var X=t(8120);const Q=new Set,Z=new Set,J=()=>navigator.connection?.effectiveType.includes("2g")||navigator.connection?.saveData,ee={prefetch(e){if(!(e=>!J()&&!Z.has(e)&&!Q.has(e))(e))return!1;Q.add(e);const n=(0,d.C)(c.c,e).flatMap((e=>{return n=e.route.path,Object.entries(Y).filter((e=>{let[t]=e;return t.replace(/-[^-]+$/,"")===n})).flatMap((e=>{let[,n]=e;return Object.values((0,X.c)(n))}));var n}));return Promise.all(n.map((e=>{const n=t.gca(e);return n&&!n.includes("undefined")?K(n).catch((()=>{})):Promise.resolve()})))},preload:e=>!!(e=>!J()&&!Z.has(e))(e)&&(Z.add(e),O(e))},ne=Object.freeze(ee),te=Boolean(!0);if(s.c.canUseDOM){window.docusaurus=ne;const e=document.getElementById("__docusaurus"),n=(0,p.jsx)(i.EN,{children:(0,p.jsx)(a.kn,{children:(0,p.jsx)(q,{})})}),t=(e,n)=>{console.error("Docusaurus React Root onRecoverableError:",e,n)},s=()=>{if(te)r.startTransition((()=>{o.hydrateRoot(e,n,{onRecoverableError:t})}));else{const a=o.createRoot(e,{onRecoverableError:t});r.startTransition((()=>{a.render(n)}))}};O(window.location.pathname).then(s)}},136:(e,n,t)=>{"use strict";t.d(n,{e:()=>d,y:()=>p});var r=t(1504),o=t(7768);const a=JSON.parse('{"example-code-snippets":{"default":{"snippets":[{"author":"Mark Rickert","content":"import * as React from \\"react\\";\\nimport { View, TextProps, PixelRatio, AppState } from \\"react-native\\";\\nimport { MaterialTopTabNavigationOptions } from \\"@react-navigation/material-top-tabs\\";\\nimport { StackNavigationOptions } from \\"@react-navigation/stack\\";\\nimport { BottomTabNavigationOptions } from \\"@react-navigation/bottom-tabs\\";\\nimport { DrawerNavigationOptions } from \\"@react-navigation/drawer\\";\\nimport { Text } from \\"./Text\\";\\n\\n// These constants determine how much bigger the font size should get based on the user\'s\\n// accessibility settings. Even if they turn the dial all the way to 11, we will only ever\\n// scale the fonts by these factors. This is to prevent the font size from getting too large\\n// and completely breaking the layout.\\nconst MAX_FONT_SCALE = 1.2;\\nconst MIN_FONT_SCALE = 0.8;\\n\\n// Returns fontScaling props for Text and TextInput components\\n// Usage:\\n// const fontProps = useFontScaling();\\n// return <Text {...fontProps}>Text Here</Text>;\\nexport const useFontScaling = (): Partial<TextProps> => {\\n  // You probably want to get this value from your user\'s preferences\\n  const [allowFontScaling,] = React.useState(true);\\n\\n  const fontScaling: Partial<TextProps> = React.useMemo(() => {\\n    return {\\n      minimumFontScale: allowFontScaling ? MIN_FONT_SCALE : 1, // This prevents the font from getting too small.\\n      maxFontSizeMultiplier: allowFontScaling ? MAX_FONT_SCALE : 1, // This prevents the font from getting too big.\\n      allowFontScaling, // This allows the font to be scaled or not.\\n    };\\n  }, [allowFontScaling]);\\n\\n  return fontScaling;\\n};\\n\\n// Returns fontScaling props for Navigator components\\nexport const useNavigatorFontScalingScreenOptions =\\n  (): Partial<StackNavigationOptions> => {\\n    // You probably want to get this value from your user\'s preferences\\n    const [allowFontScaling,] = React.useState(true);\\n\\n    const fontScaling: Partial<StackNavigationOptions> = React.useMemo(() => {\\n      return {\\n        headerBackAllowFontScaling: allowFontScaling,\\n        headerTitleAllowFontScaling: allowFontScaling,\\n      };\\n    }, [allowFontScaling]);\\n\\n    return fontScaling;\\n  };\\n\\n// Returns fontScaling props for Top Tab Navigator components\\nexport const useTopTabNavigatorFontScalingScreenOptions =\\n  (): Partial<MaterialTopTabNavigationOptions> => {\\n    // You probably want to get this value from your user\'s preferences\\n    const [allowFontScaling,] = React.useState(true);\\n\\n    const fontScaling: Partial<MaterialTopTabNavigationOptions> =\\n      React.useMemo(() => {\\n        return {\\n          tabBarAllowFontScaling: allowFontScaling,\\n        };\\n      }, [allowFontScaling]);\\n\\n    return fontScaling;\\n  };\\n\\n// Returns fontScaling props for Tab Navigator components\\nexport const useTabNavigatorFontScalingScreenOptions =\\n  (): Partial<BottomTabNavigationOptions> => {\\n    // You probably want to get this value from your user\'s preferences\\n    const [allowFontScaling,] = React.useState(true);\\n\\n    const fontScaling: Partial<BottomTabNavigationOptions> =\\n      React.useMemo(() => {\\n        return {\\n          tabBarAllowFontScaling: fontScaling,\\n          headerTitleAllowFontScaling: fontScaling,\\n        };\\n      }, [allowFontScaling]);\\n\\n    return fontScaling;\\n  };\\n\\n// Returns fontScaling props for Tab Navigator components\\nexport const useDrawerNavigatorFontScalingScreenOptions =\\n  (): Partial<DrawerNavigationOptions> => {\\n    const [allowFontScaling,] = React.useState(true);\\n\\n    const fontScaling: Partial<DrawerNavigationOptions> = React.useMemo(() => {\\n      return {\\n        drawerAllowFontScaling: allowFontScaling,\\n        headerTitleAllowFontScaling: allowFontScaling,\\n      };\\n    }, [allowFontScaling]);\\n\\n    return fontScaling;\\n  };\\n\\n// Use this handy __DEV__ mode only component to figure out what the font size is actually doing.\\nexport const DevFontSize = () => {\\n  const [allowFontScaling,] = React.useState(true);\\n  const [appStateVisible, setAppStateVisible] = React.useState(\\n    AppState.currentState\\n  );\\n\\n  React.useEffect(() => {\\n    const subscription = AppState.addEventListener(\\"change\\", (nextAppState) => {\\n      setAppStateVisible(nextAppState);\\n    });\\n\\n    return () => subscription.remove();\\n  }, []);\\n\\n  // This memo has to listen to appStateVisible even though it\'s not a direct dependency\\n  // so that we can reload the font size when the app switches back from user settings.\\n  const fontSize = React.useMemo(() => {\\n    if (allowFontScaling) {\\n      return Math.min(\\n        Math.max(PixelRatio.getFontScale(), MIN_FONT_SCALE),\\n        MAX_FONT_SCALE\\n      );\\n    } else {\\n      return 1.0;\\n    }\\n  }, [allowFontScaling, appStateVisible]); // eslint-disable-line react-hooks/exhaustive-deps\\n\\n  return __DEV__ ? (\\n    <View style={{\\n      backgroundColor: \'#E58F83\',\\n      padding: 10,\\n      margin: 10,\\n      borderRadius: 5,\\n      borderColor: \'#000,\\n      borderWidth: 1,\\n    }}>\\n      <Text>\\n        User Font Setting: {Math.trunc(PixelRatio.getFontScale() * 100) / 100}\\n      </Text>\\n      <Text>\\n        Currently limiting ratio to: {Math.trunc(fontSize * 100) / 100}\\n      </Text>\\n    </View>\\n  ) : null;\\n};\\n\\n","lastUpdated":"1 year, 2 months ago","title":"Accessiblity Font Sizes","publish_date":"2022-10-09","doc_name":"AccessibilityFontSizes.md"},{"author":"Robin Heinze","content":"defaults: &defaults\\n  docker:\\n    # Choose the version of Node you want here\\n    - image: circleci/node:10.11\\n  working_directory: ~/repo\\n\\nversion: 2\\njobs:\\n  setup:\\n    <<: *defaults\\n    steps:\\n      - checkout\\n      - restore_cache:\\n          keys:\\n            - v1-dependencies-node-{{ checksum \\"package.json\\" }}\\n            # fallback to using the latest cache if no exact match is found\\n            - v1-dependencies-node-\\n      - run:\\n          name: Install dependencies\\n          command: yarn install\\n      - save_cache:\\n          name: Save node modules\\n          paths:\\n            - node_modules\\n          key: v1-dependencies-node-{{ checksum \\"package.json\\" }}\\n\\n  tests:\\n    <<: *defaults\\n    steps:\\n      - checkout\\n      - restore_cache:\\n          keys:\\n            - v1-dependencies-node-{{ checksum \\"package.json\\" }}\\n            # fallback to using the latest cache if no exact match is found\\n            - v1-dependencies-node-\\n      - run:\\n          name: Run tests\\n          command: yarn ci:test # this command will be added to/found in your package.json scripts\\n\\nworkflows:\\n  version: 2\\n  test_and_release:\\n    jobs:\\n      - setup\\n      - tests:\\n          requires:\\n            - setup\\n\\n  {\\n    ...\\n    \\"scripts\\": {\\n      ...\\n      \\"ci:test\\": \\"<command to run tests>\\" <<-- if you don\'t already have this one\\n    },\\n    ...\\n  }\\n\\nbefore_all do\\n setup_circle_ci\\nend\\n\\nPROJECT = \\"YourProject\\"\\nXCODE_PROJECT    = \\"#{PROJECT}.xcodeproj\\"\\n  lane :beta do\\n    increment_build_number(xcodeproj: \\"./#{XCODE_PROJECT}\\")\\n    match(type: \\"appstore\\")\\n    build_ios_app(\\n      scheme: PROJECT,\\n      workspace: \\"./YourProject.xcworkspace\\",\\n      xcargs: \\"-UseNewBuildSystem=NO -allowProvisioningUpdates\\",\\n      export_method: \\"app-store\\"\\n    )\\n    # Ship it!\\n    upload_to_testflight(\\n      skip_waiting_for_build_processing: true\\n    )\\n    commit_version_bump(\\n      xcodeproj: \\"./#{XCODE_PROJECT}\\",\\n      ignore: /tvOS/,\\n      force: true,\\n      message: \\"[skip ci] Version bump\\"\\n    )\\n  end\\n\\n  {\\n    ...\\n    \\"scripts\\": {\\n      ...\\n      \\"ci:setup\\": \\"touch .env && echo \\\\\\"ENV_VAR=\\\\\\"$ENV_VAR >> .env\\",\\n    },\\n    ...\\n  }\\n\\ndefaults: ...\\n\\nmac: &mac\\n  macos:\\n    xcode: \\"10.1.0\\"\\n  working_directory: ~/repo\\n  environment:\\n    FL_OUTPUT_DIR: output\\n  shell: /bin/bash --login -o pipefail\\n\\nversion: 2\\njobs:\\n  setup: ...\\n\\n  tests: ...\\n\\n  deploy_ios:\\n    <<: *mac\\n    steps:\\n      - checkout\\n      - add_ssh_keys:\\n          fingerprints: \u2014 \u201cSSH_FINGERPRINT_HERE\u201d\\n      - run:\\n          name: Git configuration\\n          command: git config user.email \\"ci@your.domain\\" && git config user.name \\"CircleCI\\"\\n      - run:\\n          name: Set upstream branch\\n          command: git branch --set-upstream-to origin ${CIRCLE_BRANCH}\\n      # Node modules\\n      - restore_cache:\\n          name: Restore node modules\\n          keys:\\n            - v1-dependencies-mac-{{ checksum \\"package.json\\" }}\\n            # fallback to using the latest cache if no exact match is found\\n            - v1-dependencies-mac-\\n      - run:\\n          name: Install dependencies\\n          command: NOYARNPOSTINSTALL=1 yarn install\\n      - save_cache:\\n          name: Save node modules\\n          paths:\\n            - node_modules\\n          key: v1-dependencies-mac-{{ checksum \\"package.json\\" }}\\n\\n      # Cocoapods\\n      - run:\\n          name: Fetch CocoaPods Specs\\n          command: |\\n            curl https://cocoapods-specs.circleci.com/fetch-cocoapods-repo-from-s3.sh | bash -s cf\\n      - run:\\n          working_directory: ios\\n          name: Install CocoaPods\\n          command: pod install --verbose\\n\\n      # Gems\\n      - restore_cache:\\n          name: Restore gems\\n          key: bundle-v1-{{ checksum \\"ios/Gemfile.lock\\" }}-{{ arch }}\\n      - run:\\n          name: Bundle Install\\n          command: bundle install\\n          working_directory: ios\\n      - save_cache:\\n          key: bundle-v1-{{ checksum \\"ios/Gemfile.lock\\" }}-{{ arch }}\\n          paths:\\n            - vendor/bundle\\n\\n      # Misc setup\\n      - run:\\n          name: Misc setup\\n          command: yarn ci:setup\\n\\n      # Git grooming\\n      - run:\\n          name: Pull latest git\\n          command: git stash && git pull && git stash pop\\n\\n      # Run Fastlane\\n      - run:\\n          working_directory: ios\\n          name: Fastlane\\n          command: bundle exec fastlane ios beta\\n\\n      # Git cleanup\\n      - run:\\n          name: Pull latest git\\n          command: git stash && git pull && git stash pop\\n      - run:\\n          name: Push version bump commit\\n          command: git push\\n      - store_artifacts:\\n          path: output\\n\\nworkflows:\\n  version: 2\\n  test_and_release:\\n    jobs:\\n      - setup\\n      - tests:\\n          requires:\\n            - setup\\n      - deploy_ios:\\n          filters:\\n            branches:\\n              only: master\\n\\n\\n**Troubleshooting tips**\\n\\n- If you need to debug failed builds, you can use the \\"Rebuild with SSH\\" option in CircleCI. See [https://circleci.com/docs/2.0/ssh-access-jobs/](https://circleci.com/docs/2.0/ssh-access-jobs/) for more info.\\n- Tip: make sure you are logged in to Github/CircleCI as yourself (not the CI user) when you hit the button to rebuild with SSH.\\n- If you get a vague error saying `File main.jsbundle does not exist`, that means there was an error while building the app and you can view the more detailed message by inspecting the log files with the following command (while in SSH mode). Increase the number of lines from 50 as needed.\\n- `tail -50 ios/output/buildlogs/gym/YourProject-YourProject.log`\\n","lastUpdated":"1 year, 3 months ago","title":"CircleCI CD Setup - React Native","publish_date":"2022-10-09","doc_name":"CircleCIRNSetup.md"},{"author":"Ellie Croce","content":"export const DEFAULT_API_CONFIG: ApiConfig = {\\n  url: Config.API_URL,\\n  timeout: 10000,\\n}\\n\\n\\nexport class Api {\\n  apisauce: ApisauceInstance\\n  config: ApiConfig\\n\\n  constructor(config: ApiConfig = DEFAULT_API_CONFIG) {\\n    this.config = config\\n    this.apisauce = create({\\n      baseURL: this.config.url,\\n      timeout: this.config.timeout,\\n      headers: {\\n        Accept: \\"application/json\\",\\n      },\\n    })\\n  }\\n\\n  async getEpisodes(): Promise<{ kind: \\"ok\\"; episodes: EpisodeSnapshotIn[] } | GeneralApiProblem> {\\n    ... // example API call that needs authenticating\\n  }\\n\\n}\\n\\n// Singleton instance of the API for convenience\\nexport const api = new Api()\\n\\nimport { Instance, SnapshotOut, types } from \\"mobx-state-tree\\";\\n\\nexport const AuthenticationStoreModel = types\\n  .model(\\"AuthenticationStore\\")\\n  .props({\\n    authToken: types.maybe(types.string),\\n    authEmail: \\"\\",\\n  })\\n  .views((store) => ({}))\\n  .actions((store) => ({\\n    setAuthToken(value?: string) {\\n      store.authToken = value;\\n    },\\n  }));\\n\\nexport interface AuthenticationStore\\n  extends Instance<typeof AuthenticationStoreModel> {}\\nexport interface AuthenticationStoreSnapshot\\n  extends SnapshotOut<typeof AuthenticationStoreModel> {}\\n\\n\\t// We will need to import the api from the service\\n\\timport { api } from \\"app/services/api\\"\\n\\n  ...\\n\\n  // then update the Authentication Model actions\\n  .actions((store) => ({\\n    setAuthToken(value?: string) {\\n      store.authToken = value;\\n    },\\n    distributeAuthToken(value?: string) {\\n      // optionally grab the store\'s authToken if not passing a value\\n      const token = value || store.authToken;\\n      api.apiSauce.setHeader(\\"Authorization\\", `Bearer ${token}`);\\n    },\\n  })\\n\\n\\t// We can update `authenticationStore` from the useStores hook to include `distributeAuthToken`\\n\\tconst {\\n\\t    authenticationStore: { authEmail, setAuthEmail, setAuthToken, distributeAuthToken, validationError },\\n\\t  } = useStores()\\n\\n\\t  ...\\n\\n  function login() {\\n    setIsSubmitted(true);\\n    setAttemptsCount(attemptsCount + 1);\\n\\n    if (validationError) return;\\n\\n    // Make a request to your server to get an authentication token.\\n    // If successful, reset the fields and set the token.\\n    setIsSubmitted(false);\\n    setAuthPassword(\\"\\");\\n    setAuthEmail(\\"\\");\\n\\n    // We\'ll mock this with a fake token.\\n    const token = String(Date.now());\\n    setAuthToken(token);\\n    distributeAuthToken(token);\\n  }\\n\\n","lastUpdated":"11 months ago","title":"Distributing Auth Token to APIs","publish_date":"2023-05-09","doc_name":"DistributingAuthTokenToAPI.md"},{"author":"Frank Calise","content":"npm install -g eas-cli\\n\\nnpx expo install expo-updates\\neas build:configure\\n\\neas update:configure\\n\\n{\\n  \\"cli\\": {\\n    \\"version\\": \\">= 3.0.0\\"\\n  },\\n  \\"build\\": {\\n    \\"development\\": {\\n      \\"developmentClient\\": true,\\n      \\"distribution\\": \\"internal\\"\\n    },\\n    \\"preview\\": {\\n      \\"channel\\": \\"preview\\",\\n      \\"android\\": { \\"buildType\\": \\"apk\\" },\\n      \\"ios\\": { \\"simulator\\": false }\\n    },\\n    \\"production\\": {}\\n  },\\n  \\"submit\\": {\\n    \\"production\\": {}\\n  }\\n}\\n\\n# via EAS\\neas build --profile preview -p android\\n\\n# locally\\neas build --profile preview -p android --local\\n\\n// error-line\\n<Text testID=\\"login-heading\\" tx=\\"loginScreen.signIn\\" preset=\\"heading\\" style={$signIn} />\\n// success-line\\n<Text testID=\\"login-heading\\" text=\\"Welcome! Please sign in\\" preset=\\"heading\\" style={$signIn} />\\n\\neas channel:create preview\\n\\neas update --branch preview --message \\"update login screen\\"\\n\\n{\\n  // ...\\n  \\"updates\\": {\\n    \\"checkAutomatically\\": \\"ON_ERROR_RECOVERY\\"\\n    // ...\\n  }\\n}\\n\\n","lastUpdated":"9 weeks ago","title":"EAS Update","publish_date":"2023-01-06","doc_name":"EASUpdate.md"},{"author":"Mark Rickert","content":"npx ignite-cli new PizzaApp --workflow=cng --yes\\ncd PizzaApp\\n\\nyarn add --dev @serverless-guru/prettier-plugin-import-order\\n\\n// @ts-check\\n/** @type {import(\\"@serverless-guru/prettier-plugin-import-order\\").PrettierConfig} */\\nmodule.exports = {\\n  // begin: settings from the package.json file\\n  printWidth: 100,\\n  semi: false,\\n  singleQuote: false,\\n  trailingComma: \\"all\\",\\n  // end: settings from the package.json file\\n\\n  // Sort and group imports using the @serverless-guru/prettier-import-order plugin.\\n  // https://github.com/serverless-guru/prettier-import-order\\n  //\\n  // See documentation and usage: https://www.npmjs.com/package/@serverless-guru/prettier-plugin-import-order#usage\\n  importOrder: [\\n    \\"^react(-native)?$\\", // React and react-native stuff goes at the top\\n    \\"\\", // use empty strings to separate groups with empty lines\\n    \\"<THIRD_PARTY_MODULES>\\", // Third party modules (this is a plugin keyword)\\n    \\"\\",\\n    \\"^app/(.*)$\\",\\n    \\"\\",\\n    \\"^../(.*)$\\", // Local imports in parent directories\\n    \\"^./(.*)$\\", // Local imports in current directory\\n  ],\\n  importOrderSeparation: false, // turn this on to see the sorting groups.\\n  importOrderSortIndividualImports: true,\\n  importOrderMergeDuplicateImports: true,\\n  importOrderTypeImportsToTop: true, // Set this to false if you want type imports to be sorted with the rest of the imports\\n  importOrderCaseInsensitive: true,\\n  importOrderParserPlugins: [\\"typescript\\", \\"jsx\\"],\\n  // End sort options\\n}\\n\\nyarn format\\n\\n","lastUpdated":"8 weeks ago","title":"Enforcing JS/TS Import Order","publish_date":"2024-02-29","doc_name":"EnforcingImportOrder.md"},{"author":"Frank Calise","content":"yarn add -D dotenv babel-plugin-inline-dotenv\\n\\n// babel.config.js\\n\\nconst plugins = [\\n  [\\n    \\"@babel/plugin-proposal-decorators\\",\\n    {\\n      legacy: true,\\n    },\\n  ],\\n  [\\"@babel/plugin-proposal-optional-catch-binding\\"],\\n  \\"inline-dotenv\\",\\n  \\"react-native-reanimated/plugin\\", // NOTE: this must be last in the plugins\\n];\\n\\nconst expoConfig = {\\n  presets: [\\"babel-preset-expo\\"],\\n  env: {\\n    production: {},\\n  },\\n  plugins,\\n};\\n\\nMY_VAR=\\"MY_VALUE\\"\\nKEEP_IN_MIND=\\"THESE ARE NOT SECURE\\"\\n\\nconsole.log(process.env.MY_VAR); // results in: MY_VALUE\\nconsole.log(process.env.KEEP_IN_MIND); // results in: THESE ARE NOT SECURE\\n\\n","lastUpdated":"1 year, 3 months ago","title":"Environment Variables","publish_date":"2022-10-11","doc_name":"EnvironmentVariables.md"},{"author":"Frank Calise & Justin Poliachik","content":"npx ignite-cli@next new pizza-router --yes\\ncd pizza-router\\n\\nnpx expo install expo-router expo-constants\\n\\n\\"plugins\\": [\\n   ...\\n  \\"expo-font\\",\\n  // success-line\\n  \\"expo-router\\"\\n],\\n\\n// error-line\\n\\"main\\": \\"node_modules/expo/AppEntry.js\\",\\n// success-line\\n\\"main\\": \\"expo-router/entry\\",\\n\\n{\\n  \\"expo\\": {\\n    \\"experiments\\": {\\n      \\"tsconfigPaths\\": true,\\n      // success-line\\n      \\"typedRoutes\\": true\\n    }\\n  }\\n}\\n\\nrm App.tsx\\nmv app src\\nmkdir src/app\\n\\n{\\n  \\"compilerOptions\\": {\\n    // ...\\n    \\"paths\\": {\\n      // error-line\\n      \\"app/*\\": [\\"./app/*\\"],\\n      // success-line\\n      \\"src/*\\": [\\"./src/*\\"],\\n      // ...\\n    },\\n  }\\n  // error-line-start\\n   \\"include\\": [\\n    \\"index.js\\",\\n    \\"App.tsx\\",\\n    \\"app\\",\\n    \\"types\\",\\n    \\"plugins\\",\\n    \\"app.config.ts\\",\\n    \\".expo/types/**/*.ts\\",\\n    \\"expo-env.d.ts\\"\\n  ],\\n  // error-line-end\\n  // success-line\\n  \\"include\\": [\\"**/*.ts\\", \\"**/*.tsx\\"],\\n  // ...\\n}\\n\\n// error-line-start\\n\\"format\\": \\"prettier --write \\\\\\"app/**/*.{js,jsx,json,md,ts,tsx}\\\\\\"\\",\\n\\"lint\\": \\"eslint App.tsx app test --fix --ext .js,.ts,.tsx && npm run format\\",\\n// error-line-end\\n// success-line-start\\n\\"format\\": \\"prettier --write \\\\\\"src/**/*.{js,jsx,json,md,ts,tsx}\\\\\\"\\",\\n\\"lint\\": \\"eslint src test --fix --ext .js,.ts,.tsx && npm run format\\",\\n// success-line-end\\n\\n// error-line-start\\nimport { clear } from \\"app/utils/storage\\";\\nimport { goBack, resetRoot, navigate } from \\"app/navigators/navigationUtilities\\";\\n// error-line-end\\n// success-line-start\\nimport { clear } from \\"src/utils/storage\\";\\nimport { goBack, resetRoot, navigate } from \\"src/navigators/navigationUtilities\\";\\n// success-line-end\\n\\n// error-line\\nimport { isRTL } from \\"app/i18n\\";\\n// success-line\\nimport { isRTL } from \\"src/i18n\\";\\n\\n// error-line\\nimport { isRTL } from \\"app/i18n\\";\\n// success-line\\nimport { isRTL } from \\"src/i18n\\";\\n\\n// error-line\\nimport en from \\"../app/i18n/en\\";\\n// success-line\\nimport en from \\"../src/i18n/en\\";\\nimport { exec } from \\"child_process\\";\\n\\n---\\npatch:\\n  // error-line\\n  path: \\"app/components/index.ts\\"\\n  // success-line\\n  path: \\"src/components/index.ts\\"\\n  append: \\"export * from \\\\\\"./<%= props.subdirectory %><%= props.pascalCaseName %>\\\\\\"\\\\n\\"\\n  skip: <%= props.skipIndexFile %>\\n---\\nimport * as React from \\"react\\"\\nimport { StyleProp, TextStyle, View, ViewStyle } from \\"react-native\\"\\nimport { observer } from \\"mobx-react-lite\\"\\n// error-line-start\\nimport { colors, typography } from \\"app/theme\\"\\nimport { Text } from \\"app/components/Text\\"\\n// error-line-end\\n// success-line-start\\nimport { colors, typography } from \\"src/theme\\"\\nimport { Text } from \\"src/components/Text\\"\\n// success-line-end\\n\\n---\\npatches:\\n// error-line\\n- path: \\"app/models/RootStore.ts\\"\\n// success-line\\n- path: \\"src/models/RootStore.ts\\"\\n  after: \\"from \\\\\\"mobx-state-tree\\\\\\"\\\\n\\"\\n  insert: \\"import { <%= props.pascalCaseName %>Model } from \\\\\\"./<%= props.pascalCaseName %>\\\\\\"\\\\n\\"\\n  skip: <%= !props.pascalCaseName.endsWith(\'Store\') %>\\n// error-line\\n- path: \\"app/models/RootStore.ts\\"\\n// success-line\\n- path: \\"src/models/RootStore.ts\\"\\n  after: \\"types.model(\\\\\\"RootStore\\\\\\").props({\\\\n\\"\\n  insert: \\"  <%= props.camelCaseName %>: types.optional(<%= props.pascalCaseName %>Model, {} as any),\\\\n\\"\\n  skip: <%= !props.pascalCaseName.endsWith(\'Store\') %>\\n// error-line\\n- path: \\"app/models/index.ts\\"\\n// success-line\\n- path: \\"src/models/index.ts\\"\\n\\n\\n// app/_layout.tsx\\nimport React from \\"react\\";\\nimport { Slot, SplashScreen } from \\"expo-router\\";\\nimport { useInitialRootStore } from \\"src/models\\";\\n\\nSplashScreen.preventAutoHideAsync();\\n\\nif (__DEV__) {\\n  // Load Reactotron configuration in development. We don\'t want to\\n  // include this in our production bundle, so we are using `if (__DEV__)`\\n  // to only execute this in development.\\n  require(\\"src/devtools/ReactotronConfig.ts\\");\\n}\\n\\nexport { ErrorBoundary } from \\"src/components/ErrorBoundary/ErrorBoundary\\";\\n\\nexport default function Root() {\\n  // Wait for stores to load and render our layout inside of it so we have access\\n  // to auth info etc\\n  const { rehydrated } = useInitialRootStore();\\n  if (!rehydrated) {\\n    return null;\\n  }\\n\\n  return <Slot />;\\n}\\n\\nmkdir src/components/ErrorBoundary\\nmv src/screens/ErrorScreen/* src/components/ErrorBoundary\\n\\nimport React from \\"react\\";\\nimport { Redirect, SplashScreen, Stack } from \\"expo-router\\";\\nimport { observer } from \\"mobx-react-lite\\";\\nimport { useStores } from \\"src/models\\";\\nimport { useFonts } from \\"expo-font\\";\\nimport { customFontsToLoad } from \\"src/theme\\";\\n\\nexport default observer(function Layout() {\\n  const {\\n    authenticationStore: { isAuthenticated },\\n  } = useStores();\\n\\n  const [fontsLoaded, fontError] = useFonts(customFontsToLoad);\\n\\n  React.useEffect(() => {\\n    if (fontsLoaded || fontError) {\\n      // Hide the splash screen after the fonts have loaded and the UI is ready.\\n      SplashScreen.hideAsync();\\n    }\\n  }, [fontsLoaded, fontError]);\\n\\n  if (!fontsLoaded && !fontError) {\\n    return null;\\n  }\\n\\n  if (!isAuthenticated) {\\n    return <Redirect href=\\"/log-in\\" />;\\n  }\\n\\n  return <Stack screenOptions={{ headerShown: false }} />;\\n});\\n\\nimport { router } from \\"expo-router\\";\\nimport { observer } from \\"mobx-react-lite\\";\\nimport React, { ComponentType, useEffect, useMemo, useRef, useState } from \\"react\\";\\nimport { TextInput, TextStyle, ViewStyle } from \\"react-native\\";\\nimport { Button, Icon, Screen, Text, TextField, TextFieldAccessoryProps } from \\"src/components\\";\\nimport { useStores } from \\"src/models\\";\\nimport { colors, spacing } from \\"src/theme\\";\\n\\nexport default observer(function Login(_props) {\\n  const authPasswordInput = useRef<TextInput>(null);\\n\\n  const [authPassword, setAuthPassword] = useState(\\"\\");\\n  const [isAuthPasswordHidden, setIsAuthPasswordHidden] = useState(true);\\n  const [isSubmitted, setIsSubmitted] = useState(false);\\n  const [attemptsCount, setAttemptsCount] = useState(0);\\n  const {\\n    authenticationStore: { authEmail, setAuthEmail, setAuthToken, validationError },\\n  } = useStores();\\n\\n  useEffect(() => {\\n    // Here is where you could fetch credentials from keychain or storage\\n    // and pre-fill the form fields.\\n    setAuthEmail(\\"ignite@infinite.red\\");\\n    setAuthPassword(\\"ign1teIsAwes0m3\\");\\n\\n    // Return a \\"cleanup\\" function that React will run when the component unmounts\\n    return () => {\\n      setAuthPassword(\\"\\");\\n      setAuthEmail(\\"\\");\\n    };\\n  }, []);\\n\\n  const error = isSubmitted ? validationError : \\"\\";\\n\\n  function login() {\\n    setIsSubmitted(true);\\n    setAttemptsCount(attemptsCount + 1);\\n\\n    if (validationError) return;\\n\\n    // Make a request to your server to get an authentication token.\\n    // If successful, reset the fields and set the token.\\n    setIsSubmitted(false);\\n    setAuthPassword(\\"\\");\\n    setAuthEmail(\\"\\");\\n\\n    // We\'ll mock this with a fake token.\\n    setAuthToken(String(Date.now()));\\n\\n    // navigate to the main screen\\n    router.replace(\\"/\\");\\n  }\\n\\n  const PasswordRightAccessory: ComponentType<TextFieldAccessoryProps> = useMemo(\\n    () =>\\n      function PasswordRightAccessory(props: TextFieldAccessoryProps) {\\n        return (\\n          <Icon\\n            icon={isAuthPasswordHidden ? \\"view\\" : \\"hidden\\"}\\n            color={colors.palette.neutral800}\\n            containerStyle={props.style}\\n            size={20}\\n            onPress={() => setIsAuthPasswordHidden(!isAuthPasswordHidden)}\\n          />\\n        );\\n      },\\n    [isAuthPasswordHidden]\\n  );\\n\\n  return (\\n    <Screen preset=\\"auto\\" contentContainerStyle={$screenContentContainer} safeAreaEdges={[\\"top\\", \\"bottom\\"]}>\\n      <Text testID=\\"login-heading\\" tx=\\"loginScreen.signIn\\" preset=\\"heading\\" style={$signIn} />\\n      <Text tx=\\"loginScreen.enterDetails\\" preset=\\"subheading\\" style={$enterDetails} />\\n      {attemptsCount > 2 && <Text tx=\\"loginScreen.hint\\" size=\\"sm\\" weight=\\"light\\" style={$hint} />}\\n\\n      <TextField\\n        value={authEmail}\\n        onChangeText={setAuthEmail}\\n        containerStyle={$textField}\\n        autoCapitalize=\\"none\\"\\n        autoComplete=\\"email\\"\\n        autoCorrect={false}\\n        keyboardType=\\"email-address\\"\\n        labelTx=\\"loginScreen.emailFieldLabel\\"\\n        placeholderTx=\\"loginScreen.emailFieldPlaceholder\\"\\n        helper={error}\\n        status={error ? \\"error\\" : undefined}\\n        onSubmitEditing={() => authPasswordInput.current?.focus()}\\n      />\\n\\n      <TextField\\n        ref={authPasswordInput}\\n        value={authPassword}\\n        onChangeText={setAuthPassword}\\n        containerStyle={$textField}\\n        autoCapitalize=\\"none\\"\\n        autoComplete=\\"password\\"\\n        autoCorrect={false}\\n        secureTextEntry={isAuthPasswordHidden}\\n        labelTx=\\"loginScreen.passwordFieldLabel\\"\\n        placeholderTx=\\"loginScreen.passwordFieldPlaceholder\\"\\n        onSubmitEditing={login}\\n        RightAccessory={PasswordRightAccessory}\\n      />\\n\\n      <Button testID=\\"login-button\\" tx=\\"loginScreen.tapToSignIn\\" style={$tapButton} preset=\\"reversed\\" onPress={login} />\\n    </Screen>\\n  );\\n});\\n\\nconst $screenContentContainer: ViewStyle = {\\n  paddingVertical: spacing.xxl,\\n  paddingHorizontal: spacing.lg,\\n};\\n\\nconst $signIn: TextStyle = {\\n  marginBottom: spacing.sm,\\n};\\n\\nconst $enterDetails: TextStyle = {\\n  marginBottom: spacing.lg,\\n};\\n\\nconst $hint: TextStyle = {\\n  color: colors.tint,\\n  marginBottom: spacing.md,\\n};\\n\\nconst $textField: ViewStyle = {\\n  marginBottom: spacing.lg,\\n};\\n\\nconst $tapButton: ViewStyle = {\\n  marginTop: spacing.xs,\\n};\\n\\nimport { router } from \\"expo-router\\";\\nimport { observer } from \\"mobx-react-lite\\";\\nimport React from \\"react\\";\\nimport { Image, ImageStyle, TextStyle, View, ViewStyle } from \\"react-native\\";\\nimport { Button, Text } from \\"src/components\\";\\nimport { isRTL } from \\"src/i18n\\";\\nimport { useStores } from \\"src/models\\";\\nimport { colors, spacing } from \\"src/theme\\";\\nimport { useHeader } from \\"src/utils/useHeader\\";\\nimport { useSafeAreaInsetsStyle } from \\"src/utils/useSafeAreaInsetsStyle\\";\\n\\nconst welcomeLogo = require(\\"assets/images/logo.png\\");\\nconst welcomeFace = require(\\"assets/images/welcome-face.png\\");\\n\\nexport default observer(function WelcomeScreen() {\\n  const {\\n    authenticationStore: { logout },\\n  } = useStores();\\n\\n  function goNext() {\\n    router.replace(\\"/showroom\\");\\n  }\\n\\n  useHeader(\\n    {\\n      rightTx: \\"common.logOut\\",\\n      onRightPress: logout,\\n    },\\n    [logout]\\n  );\\n\\n  const $bottomContainerInsets = useSafeAreaInsetsStyle([\\"bottom\\"]);\\n\\n  return (\\n    <View style={$container}>\\n      <View style={$topContainer}>\\n        <Image style={$welcomeLogo} source={welcomeLogo} resizeMode=\\"contain\\" />\\n        <Text testID=\\"welcome-heading\\" style={$welcomeHeading} tx=\\"welcomeScreen.readyForLaunch\\" preset=\\"heading\\" />\\n        <Text tx=\\"welcomeScreen.exciting\\" preset=\\"subheading\\" />\\n        <Image style={$welcomeFace} source={welcomeFace} resizeMode=\\"contain\\" />\\n      </View>\\n\\n      <View style={[$bottomContainer, $bottomContainerInsets]}>\\n        <Text tx=\\"welcomeScreen.postscript\\" size=\\"md\\" />\\n        <Button testID=\\"next-screen-button\\" preset=\\"reversed\\" tx=\\"welcomeScreen.letsGo\\" onPress={goNext} />\\n      </View>\\n    </View>\\n  );\\n});\\n\\nconst $container: ViewStyle = {\\n  flex: 1,\\n  backgroundColor: colors.background,\\n};\\n\\nconst $topContainer: ViewStyle = {\\n  flexShrink: 1,\\n  flexGrow: 1,\\n  flexBasis: \\"57%\\",\\n  justifyContent: \\"center\\",\\n  paddingHorizontal: spacing.lg,\\n};\\n\\nconst $bottomContainer: ViewStyle = {\\n  flexShrink: 1,\\n  flexGrow: 0,\\n  flexBasis: \\"43%\\",\\n  backgroundColor: colors.palette.neutral100,\\n  borderTopLeftRadius: 16,\\n  borderTopRightRadius: 16,\\n  paddingHorizontal: spacing.lg,\\n  justifyContent: \\"space-around\\",\\n};\\nconst $welcomeLogo: ImageStyle = {\\n  height: 88,\\n  width: \\"100%\\",\\n  marginBottom: spacing.xxl,\\n};\\n\\nconst $welcomeFace: ImageStyle = {\\n  height: 169,\\n  width: 269,\\n  position: \\"absolute\\",\\n  bottom: -47,\\n  right: -80,\\n  transform: [{ scaleX: isRTL ? -1 : 1 }],\\n};\\n\\nconst $welcomeHeading: TextStyle = {\\n  marginBottom: spacing.md,\\n};\\n\\nimport React from \\"react\\";\\nimport { Tabs } from \\"expo-router/tabs\\";\\nimport { observer } from \\"mobx-react-lite\\";\\nimport { Icon } from \\"src/components\\";\\nimport { translate } from \\"src/i18n\\";\\nimport { colors, spacing, typography } from \\"src/theme\\";\\nimport { TextStyle, ViewStyle } from \\"react-native\\";\\nimport { useSafeAreaInsets } from \\"react-native-safe-area-context\\";\\n\\nexport default observer(function Layout() {\\n  const { bottom } = useSafeAreaInsets();\\n\\n  return (\\n    <Tabs\\n      screenOptions={{\\n        headerShown: false,\\n        tabBarHideOnKeyboard: true,\\n        tabBarStyle: [$tabBar, { height: bottom + 70 }],\\n        tabBarActiveTintColor: colors.text,\\n        tabBarInactiveTintColor: colors.text,\\n        tabBarLabelStyle: $tabBarLabel,\\n        tabBarItemStyle: $tabBarItem,\\n      }}\\n    >\\n      <Tabs.Screen\\n        name=\\"showroom\\"\\n        options={{\\n          href: \\"/showroom\\",\\n          headerShown: false,\\n          tabBarLabel: translate(\\"demoNavigator.componentsTab\\"),\\n          tabBarIcon: ({ focused }) => <Icon icon=\\"components\\" color={focused ? colors.tint : undefined} size={30} />,\\n        }}\\n      />\\n      <Tabs.Screen\\n        name=\\"community\\"\\n        options={{\\n          href: \\"/community\\",\\n          headerShown: false,\\n          tabBarLabel: translate(\\"demoNavigator.communityTab\\"),\\n          tabBarIcon: ({ focused }) => <Icon icon=\\"community\\" color={focused ? colors.tint : undefined} size={30} />,\\n        }}\\n      />\\n      <Tabs.Screen\\n        name=\\"podcasts\\"\\n        options={{\\n          href: \\"/podcasts\\",\\n          headerShown: false,\\n          tabBarAccessibilityLabel: translate(\\"demoNavigator.podcastListTab\\"),\\n          tabBarLabel: translate(\\"demoNavigator.podcastListTab\\"),\\n          tabBarIcon: ({ focused }) => <Icon icon=\\"podcast\\" color={focused ? colors.tint : undefined} size={30} />,\\n        }}\\n      />\\n      <Tabs.Screen\\n        name=\\"debug\\"\\n        options={{\\n          href: \\"/debug\\",\\n          headerShown: false,\\n          tabBarLabel: translate(\\"demoNavigator.debugTab\\"),\\n          tabBarIcon: ({ focused }) => <Icon icon=\\"debug\\" color={focused ? colors.tint : undefined} size={30} />,\\n        }}\\n      />\\n    </Tabs>\\n  );\\n});\\n\\nconst $tabBar: ViewStyle = {\\n  backgroundColor: colors.background,\\n  borderTopColor: colors.transparent,\\n};\\n\\nconst $tabBarItem: ViewStyle = {\\n  paddingTop: spacing.md,\\n};\\n\\nconst $tabBarLabel: TextStyle = {\\n  fontSize: 12,\\n  fontFamily: typography.primary.medium,\\n  lineHeight: 16,\\n  flex: 1,\\n};\\n\\nimport React from \\"react\\";\\nimport { Image, ImageStyle, TextStyle, View, ViewStyle } from \\"react-native\\";\\nimport { ListItem, Screen, Text } from \\"src/components\\";\\nimport { spacing } from \\"src/theme\\";\\nimport { openLinkInBrowser } from \\"src/utils/openLinkInBrowser\\";\\nimport { isRTL } from \\"src/i18n\\";\\n\\nconst chainReactLogo = require(\\"assets/images/demo/cr-logo.png\\");\\nconst reactNativeLiveLogo = require(\\"assets/images/demo/rnl-logo.png\\");\\nconst reactNativeRadioLogo = require(\\"assets/images/demo/rnr-logo.png\\");\\nconst reactNativeNewsletterLogo = require(\\"assets/images/demo/rnn-logo.png\\");\\n\\nexport default function DemoCommunityScreen() {\\n  return (\\n    <Screen preset=\\"scroll\\" contentContainerStyle={$container} safeAreaEdges={[\\"top\\"]}>\\n      <Text preset=\\"heading\\" tx=\\"demoCommunityScreen.title\\" style={$title} />\\n      <Text tx=\\"demoCommunityScreen.tagLine\\" style={$tagline} />\\n\\n      <Text preset=\\"subheading\\" tx=\\"demoCommunityScreen.joinUsOnSlackTitle\\" />\\n      <Text tx=\\"demoCommunityScreen.joinUsOnSlack\\" style={$description} />\\n      <ListItem\\n        tx=\\"demoCommunityScreen.joinSlackLink\\"\\n        leftIcon=\\"slack\\"\\n        rightIcon={isRTL ? \\"caretLeft\\" : \\"caretRight\\"}\\n        onPress={() => openLinkInBrowser(\\"https://community.infinite.red/\\")}\\n      />\\n      <Text preset=\\"subheading\\" tx=\\"demoCommunityScreen.makeIgniteEvenBetterTitle\\" style={$sectionTitle} />\\n      <Text tx=\\"demoCommunityScreen.makeIgniteEvenBetter\\" style={$description} />\\n      <ListItem\\n        tx=\\"demoCommunityScreen.contributeToIgniteLink\\"\\n        leftIcon=\\"github\\"\\n        rightIcon={isRTL ? \\"caretLeft\\" : \\"caretRight\\"}\\n        onPress={() => openLinkInBrowser(\\"https://github.com/infinitered/ignite\\")}\\n      />\\n\\n      <Text preset=\\"subheading\\" tx=\\"demoCommunityScreen.theLatestInReactNativeTitle\\" style={$sectionTitle} />\\n      <Text tx=\\"demoCommunityScreen.theLatestInReactNative\\" style={$description} />\\n      <ListItem\\n        tx=\\"demoCommunityScreen.reactNativeRadioLink\\"\\n        bottomSeparator\\n        rightIcon={isRTL ? \\"caretLeft\\" : \\"caretRight\\"}\\n        LeftComponent={\\n          <View style={$logoContainer}>\\n            <Image source={reactNativeRadioLogo} style={$logo} />\\n          </View>\\n        }\\n        onPress={() => openLinkInBrowser(\\"https://reactnativeradio.com/\\")}\\n      />\\n      <ListItem\\n        tx=\\"demoCommunityScreen.reactNativeNewsletterLink\\"\\n        bottomSeparator\\n        rightIcon={isRTL ? \\"caretLeft\\" : \\"caretRight\\"}\\n        LeftComponent={\\n          <View style={$logoContainer}>\\n            <Image source={reactNativeNewsletterLogo} style={$logo} />\\n          </View>\\n        }\\n        onPress={() => openLinkInBrowser(\\"https://reactnativenewsletter.com/\\")}\\n      />\\n      <ListItem\\n        tx=\\"demoCommunityScreen.reactNativeLiveLink\\"\\n        bottomSeparator\\n        rightIcon={isRTL ? \\"caretLeft\\" : \\"caretRight\\"}\\n        LeftComponent={\\n          <View style={$logoContainer}>\\n            <Image source={reactNativeLiveLogo} style={$logo} />\\n          </View>\\n        }\\n        onPress={() => openLinkInBrowser(\\"https://rn.live/\\")}\\n      />\\n      <ListItem\\n        tx=\\"demoCommunityScreen.chainReactConferenceLink\\"\\n        rightIcon={isRTL ? \\"caretLeft\\" : \\"caretRight\\"}\\n        LeftComponent={\\n          <View style={$logoContainer}>\\n            <Image source={chainReactLogo} style={$logo} />\\n          </View>\\n        }\\n        onPress={() => openLinkInBrowser(\\"https://cr.infinite.red/\\")}\\n      />\\n      <Text preset=\\"subheading\\" tx=\\"demoCommunityScreen.hireUsTitle\\" style={$sectionTitle} />\\n      <Text tx=\\"demoCommunityScreen.hireUs\\" style={$description} />\\n      <ListItem\\n        tx=\\"demoCommunityScreen.hireUsLink\\"\\n        leftIcon=\\"clap\\"\\n        rightIcon={isRTL ? \\"caretLeft\\" : \\"caretRight\\"}\\n        onPress={() => openLinkInBrowser(\\"https://infinite.red/contact\\")}\\n      />\\n    </Screen>\\n  );\\n}\\n\\nconst $container: ViewStyle = {\\n  paddingTop: spacing.lg + spacing.xl,\\n  paddingHorizontal: spacing.lg,\\n};\\n\\nconst $title: TextStyle = {\\n  marginBottom: spacing.sm,\\n};\\n\\nconst $tagline: TextStyle = {\\n  marginBottom: spacing.xxl,\\n};\\n\\nconst $description: TextStyle = {\\n  marginBottom: spacing.lg,\\n};\\n\\nconst $sectionTitle: TextStyle = {\\n  marginTop: spacing.xxl,\\n};\\n\\nconst $logoContainer: ViewStyle = {\\n  marginEnd: spacing.md,\\n  flexDirection: \\"row\\",\\n  flexWrap: \\"wrap\\",\\n  alignContent: \\"center\\",\\n};\\n\\nconst $logo: ImageStyle = {\\n  height: 38,\\n  width: 38,\\n};\\n\\nimport { observer } from \\"mobx-react-lite\\";\\nimport React, { ComponentType, useEffect, useMemo } from \\"react\\";\\nimport {\\n  AccessibilityProps,\\n  ActivityIndicator,\\n  Image,\\n  ImageSourcePropType,\\n  ImageStyle,\\n  Platform,\\n  StyleSheet,\\n  TextStyle,\\n  View,\\n  ViewStyle,\\n} from \\"react-native\\";\\nimport { type ContentStyle } from \\"@shopify/flash-list\\";\\nimport Animated, {\\n  Extrapolate,\\n  interpolate,\\n  useAnimatedStyle,\\n  useSharedValue,\\n  withSpring,\\n} from \\"react-native-reanimated\\";\\nimport { Button, ButtonAccessoryProps, Card, EmptyState, Icon, ListView, Screen, Text, Toggle } from \\"src/components\\";\\nimport { isRTL, translate } from \\"src/i18n\\";\\nimport { useStores } from \\"src/models\\";\\nimport { Episode } from \\"src/models/Episode\\";\\nimport { colors, spacing } from \\"src/theme\\";\\nimport { delay } from \\"src/utils/delay\\";\\nimport { openLinkInBrowser } from \\"src/utils/openLinkInBrowser\\";\\n\\nconst ICON_SIZE = 14;\\n\\nconst rnrImage1 = require(\\"assets/images/demo/rnr-image-1.png\\");\\nconst rnrImage2 = require(\\"assets/images/demo/rnr-image-2.png\\");\\nconst rnrImage3 = require(\\"assets/images/demo/rnr-image-3.png\\");\\nconst rnrImages = [rnrImage1, rnrImage2, rnrImage3];\\n\\nexport default observer(function DemoPodcastListScreen(_props) {\\n  const { episodeStore } = useStores();\\n\\n  const [refreshing, setRefreshing] = React.useState(false);\\n  const [isLoading, setIsLoading] = React.useState(false);\\n\\n  // initially, kick off a background refresh without the refreshing UI\\n  useEffect(() => {\\n    (async function load() {\\n      setIsLoading(true);\\n      await episodeStore.fetchEpisodes();\\n      setIsLoading(false);\\n    })();\\n  }, [episodeStore]);\\n\\n  // simulate a longer refresh, if the refresh is too fast for UX\\n  async function manualRefresh() {\\n    setRefreshing(true);\\n    await Promise.all([episodeStore.fetchEpisodes(), delay(750)]);\\n    setRefreshing(false);\\n  }\\n\\n  return (\\n    <Screen preset=\\"fixed\\" safeAreaEdges={[\\"top\\"]} contentContainerStyle={$screenContentContainer}>\\n      <ListView<Episode>\\n        contentContainerStyle={$listContentContainer}\\n        data={episodeStore.episodesForList.slice()}\\n        extraData={episodeStore.favorites.length + episodeStore.episodes.length}\\n        refreshing={refreshing}\\n        estimatedItemSize={177}\\n        onRefresh={manualRefresh}\\n        ListEmptyComponent={\\n          isLoading ? (\\n            <ActivityIndicator />\\n          ) : (\\n            <EmptyState\\n              preset=\\"generic\\"\\n              style={$emptyState}\\n              headingTx={episodeStore.favoritesOnly ? \\"demoPodcastListScreen.noFavoritesEmptyState.heading\\" : undefined}\\n              contentTx={episodeStore.favoritesOnly ? \\"demoPodcastListScreen.noFavoritesEmptyState.content\\" : undefined}\\n              button={episodeStore.favoritesOnly ? \\"\\" : undefined}\\n              buttonOnPress={manualRefresh}\\n              imageStyle={$emptyStateImage}\\n              ImageProps={{ resizeMode: \\"contain\\" }}\\n            />\\n          )\\n        }\\n        ListHeaderComponent={\\n          <View style={$heading}>\\n            <Text preset=\\"heading\\" tx=\\"demoPodcastListScreen.title\\" />\\n            {(episodeStore.favoritesOnly || episodeStore.episodesForList.length > 0) && (\\n              <View style={$toggle}>\\n                <Toggle\\n                  value={episodeStore.favoritesOnly}\\n                  onValueChange={() => episodeStore.setProp(\\"favoritesOnly\\", !episodeStore.favoritesOnly)}\\n                  variant=\\"switch\\"\\n                  labelTx=\\"demoPodcastListScreen.onlyFavorites\\"\\n                  labelPosition=\\"left\\"\\n                  labelStyle={$labelStyle}\\n                  accessibilityLabel={translate(\\"demoPodcastListScreen.accessibility.switch\\")}\\n                />\\n              </View>\\n            )}\\n          </View>\\n        }\\n        renderItem={({ item }) => (\\n          <EpisodeCard\\n            episode={item}\\n            isFavorite={episodeStore.hasFavorite(item)}\\n            onPressFavorite={() => episodeStore.toggleFavorite(item)}\\n          />\\n        )}\\n      />\\n    </Screen>\\n  );\\n});\\n\\nconst EpisodeCard = observer(function EpisodeCard({\\n  episode,\\n  isFavorite,\\n  onPressFavorite,\\n}: {\\n  episode: Episode;\\n  onPressFavorite: () => void;\\n  isFavorite: boolean;\\n}) {\\n  const liked = useSharedValue(isFavorite ? 1 : 0);\\n\\n  const imageUri = useMemo<ImageSourcePropType>(() => {\\n    return rnrImages[Math.floor(Math.random() * rnrImages.length)];\\n  }, []);\\n\\n  // Grey heart\\n  const animatedLikeButtonStyles = useAnimatedStyle(() => {\\n    return {\\n      transform: [\\n        {\\n          scale: interpolate(liked.value, [0, 1], [1, 0], Extrapolate.EXTEND),\\n        },\\n      ],\\n      opacity: interpolate(liked.value, [0, 1], [1, 0], Extrapolate.CLAMP),\\n    };\\n  });\\n\\n  // Pink heart\\n  const animatedUnlikeButtonStyles = useAnimatedStyle(() => {\\n    return {\\n      transform: [\\n        {\\n          scale: liked.value,\\n        },\\n      ],\\n      opacity: liked.value,\\n    };\\n  });\\n\\n  /**\\n   * Android has a \\"longpress\\" accessibility action. iOS does not, so we just have to use a hint.\\n   * @see https://reactnative.dev/docs/accessibility#accessibilityactions\\n   */\\n  const accessibilityHintProps = useMemo(\\n    () =>\\n      Platform.select<AccessibilityProps>({\\n        ios: {\\n          accessibilityLabel: episode.title,\\n          accessibilityHint: translate(\\"demoPodcastListScreen.accessibility.cardHint\\", {\\n            action: isFavorite ? \\"unfavorite\\" : \\"favorite\\",\\n          }),\\n        },\\n        android: {\\n          accessibilityLabel: episode.title,\\n          accessibilityActions: [\\n            {\\n              name: \\"longpress\\",\\n              label: translate(\\"demoPodcastListScreen.accessibility.favoriteAction\\"),\\n            },\\n          ],\\n          onAccessibilityAction: ({ nativeEvent }) => {\\n            if (nativeEvent.actionName === \\"longpress\\") {\\n              handlePressFavorite();\\n            }\\n          },\\n        },\\n      }),\\n    [episode, isFavorite]\\n  );\\n\\n  const handlePressFavorite = () => {\\n    onPressFavorite();\\n    liked.value = withSpring(liked.value ? 0 : 1);\\n  };\\n\\n  const handlePressCard = () => {\\n    openLinkInBrowser(episode.enclosure.link);\\n  };\\n\\n  const ButtonLeftAccessory: ComponentType<ButtonAccessoryProps> = useMemo(\\n    () =>\\n      function ButtonLeftAccessory() {\\n        return (\\n          <View>\\n            <Animated.View style={[$iconContainer, StyleSheet.absoluteFill, animatedLikeButtonStyles]}>\\n              <Icon\\n                icon=\\"heart\\"\\n                size={ICON_SIZE}\\n                color={colors.palette.neutral800} // dark grey\\n              />\\n            </Animated.View>\\n            <Animated.View style={[$iconContainer, animatedUnlikeButtonStyles]}>\\n              <Icon\\n                icon=\\"heart\\"\\n                size={ICON_SIZE}\\n                color={colors.palette.primary400} // pink\\n              />\\n            </Animated.View>\\n          </View>\\n        );\\n      },\\n    []\\n  );\\n\\n  return (\\n    <Card\\n      style={$item}\\n      verticalAlignment=\\"force-footer-bottom\\"\\n      onPress={handlePressCard}\\n      onLongPress={handlePressFavorite}\\n      HeadingComponent={\\n        <View style={$metadata}>\\n          <Text style={$metadataText} size=\\"xxs\\" accessibilityLabel={episode.datePublished.accessibilityLabel}>\\n            {episode.datePublished.textLabel}\\n          </Text>\\n          <Text style={$metadataText} size=\\"xxs\\" accessibilityLabel={episode.duration.accessibilityLabel}>\\n            {episode.duration.textLabel}\\n          </Text>\\n        </View>\\n      }\\n      content={`${episode.parsedTitleAndSubtitle.title} - ${episode.parsedTitleAndSubtitle.subtitle}`}\\n      {...accessibilityHintProps}\\n      RightComponent={<Image source={imageUri} style={$itemThumbnail} />}\\n      FooterComponent={\\n        <Button\\n          onPress={handlePressFavorite}\\n          onLongPress={handlePressFavorite}\\n          style={[$favoriteButton, isFavorite && $unFavoriteButton]}\\n          accessibilityLabel={\\n            isFavorite\\n              ? translate(\\"demoPodcastListScreen.accessibility.unfavoriteIcon\\")\\n              : translate(\\"demoPodcastListScreen.accessibility.favoriteIcon\\")\\n          }\\n          LeftAccessory={ButtonLeftAccessory}\\n        >\\n          <Text\\n            size=\\"xxs\\"\\n            accessibilityLabel={episode.duration.accessibilityLabel}\\n            weight=\\"medium\\"\\n            text={\\n              isFavorite\\n                ? translate(\\"demoPodcastListScreen.unfavoriteButton\\")\\n                : translate(\\"demoPodcastListScreen.favoriteButton\\")\\n            }\\n          />\\n        </Button>\\n      }\\n    />\\n  );\\n});\\n\\nconst $screenContentContainer: ViewStyle = {\\n  flex: 1,\\n};\\n\\nconst $listContentContainer: ContentStyle = {\\n  paddingHorizontal: spacing.lg,\\n  paddingTop: spacing.lg + spacing.xl,\\n  paddingBottom: spacing.lg,\\n};\\n\\nconst $heading: ViewStyle = {\\n  marginBottom: spacing.md,\\n};\\n\\nconst $item: ViewStyle = {\\n  padding: spacing.md,\\n  marginTop: spacing.md,\\n  minHeight: 120,\\n};\\n\\nconst $itemThumbnail: ImageStyle = {\\n  marginTop: spacing.sm,\\n  borderRadius: 50,\\n  alignSelf: \\"flex-start\\",\\n};\\n\\nconst $toggle: ViewStyle = {\\n  marginTop: spacing.md,\\n};\\n\\nconst $labelStyle: TextStyle = {\\n  textAlign: \\"left\\",\\n};\\n\\nconst $iconContainer: ViewStyle = {\\n  height: ICON_SIZE,\\n  width: ICON_SIZE,\\n  flexDirection: \\"row\\",\\n  marginEnd: spacing.sm,\\n};\\n\\nconst $metadata: TextStyle = {\\n  color: colors.textDim,\\n  marginTop: spacing.xs,\\n  flexDirection: \\"row\\",\\n};\\n\\nconst $metadataText: TextStyle = {\\n  color: colors.textDim,\\n  marginEnd: spacing.md,\\n  marginBottom: spacing.xs,\\n};\\n\\nconst $favoriteButton: ViewStyle = {\\n  borderRadius: 17,\\n  marginTop: spacing.md,\\n  justifyContent: \\"flex-start\\",\\n  backgroundColor: colors.palette.neutral300,\\n  borderColor: colors.palette.neutral300,\\n  paddingHorizontal: spacing.md,\\n  paddingTop: spacing.xxxs,\\n  paddingBottom: 0,\\n  minHeight: 32,\\n  alignSelf: \\"flex-start\\",\\n};\\n\\nconst $unFavoriteButton: ViewStyle = {\\n  borderColor: colors.palette.primary100,\\n  backgroundColor: colors.palette.primary100,\\n};\\n\\nconst $emptyState: ViewStyle = {\\n  marginTop: spacing.xxl,\\n};\\n\\nconst $emptyStateImage: ImageStyle = {\\n  transform: [{ scaleX: isRTL ? -1 : 1 }],\\n};\\n\\nimport React from \\"react\\";\\nimport * as Application from \\"expo-application\\";\\nimport { Linking, Platform, TextStyle, View, ViewStyle } from \\"react-native\\";\\nimport { Button, ListItem, Screen, Text } from \\"src/components\\";\\nimport { colors, spacing } from \\"src/theme\\";\\nimport { isRTL } from \\"src/i18n\\";\\nimport { useStores } from \\"src/models\\";\\n\\nfunction openLinkInBrowser(url: string) {\\n  Linking.canOpenURL(url).then((canOpen) => canOpen && Linking.openURL(url));\\n}\\n\\nexport default function DemoDebugScreen() {\\n  const {\\n    authenticationStore: { logout },\\n  } = useStores();\\n\\n  const usingHermes = typeof HermesInternal === \\"object\\" && HermesInternal !== null;\\n  // @ts-expect-error\\n  const usingFabric = global.nativeFabricUIManager != null;\\n\\n  const demoReactotron = React.useMemo(\\n    () => async () => {\\n      if (__DEV__) {\\n        console.tron.display({\\n          name: \\"DISPLAY\\",\\n          value: {\\n            appId: Application.applicationId,\\n            appName: Application.applicationName,\\n            appVersion: Application.nativeApplicationVersion,\\n            appBuildVersion: Application.nativeBuildVersion,\\n            hermesEnabled: usingHermes,\\n          },\\n          important: true,\\n        });\\n      }\\n    },\\n    []\\n  );\\n\\n  return (\\n    <Screen preset=\\"scroll\\" safeAreaEdges={[\\"top\\"]} contentContainerStyle={$container}>\\n      <Text\\n        style={$reportBugsLink}\\n        tx=\\"demoDebugScreen.reportBugs\\"\\n        onPress={() => openLinkInBrowser(\\"https://github.com/infinitered/ignite/issues\\")}\\n      />\\n      <Text style={$title} preset=\\"heading\\" tx=\\"demoDebugScreen.title\\" />\\n      <View style={$itemsContainer}>\\n        <ListItem\\n          LeftComponent={\\n            <View style={$item}>\\n              <Text preset=\\"bold\\">App Id</Text>\\n              <Text>{Application.applicationId}</Text>\\n            </View>\\n          }\\n        />\\n        <ListItem\\n          LeftComponent={\\n            <View style={$item}>\\n              <Text preset=\\"bold\\">App Name</Text>\\n              <Text>{Application.applicationName}</Text>\\n            </View>\\n          }\\n        />\\n        <ListItem\\n          LeftComponent={\\n            <View style={$item}>\\n              <Text preset=\\"bold\\">App Version</Text>\\n              <Text>{Application.nativeApplicationVersion}</Text>\\n            </View>\\n          }\\n        />\\n        <ListItem\\n          LeftComponent={\\n            <View style={$item}>\\n              <Text preset=\\"bold\\">App Build Version</Text>\\n              <Text>{Application.nativeBuildVersion}</Text>\\n            </View>\\n          }\\n        />\\n        <ListItem\\n          LeftComponent={\\n            <View style={$item}>\\n              <Text preset=\\"bold\\">Hermes Enabled</Text>\\n              <Text>{String(usingHermes)}</Text>\\n            </View>\\n          }\\n        />\\n        <ListItem\\n          LeftComponent={\\n            <View style={$item}>\\n              <Text preset=\\"bold\\">Fabric Enabled</Text>\\n              <Text>{String(usingFabric)}</Text>\\n            </View>\\n          }\\n        />\\n      </View>\\n      <View style={$buttonContainer}>\\n        <Button style={$button} tx=\\"demoDebugScreen.reactotron\\" onPress={demoReactotron} />\\n        <Text style={$hint} tx={`demoDebugScreen.${Platform.OS}ReactotronHint` as const} />\\n      </View>\\n      <View style={$buttonContainer}>\\n        <Button style={$button} tx=\\"common.logOut\\" onPress={logout} />\\n      </View>\\n    </Screen>\\n  );\\n}\\n\\nconst $container: ViewStyle = {\\n  paddingTop: spacing.lg + spacing.xl,\\n  paddingBottom: spacing.xxl,\\n  paddingHorizontal: spacing.lg,\\n};\\n\\nconst $title: TextStyle = {\\n  marginBottom: spacing.xxl,\\n};\\n\\nconst $reportBugsLink: TextStyle = {\\n  color: colors.tint,\\n  marginBottom: spacing.lg,\\n  alignSelf: isRTL ? \\"flex-start\\" : \\"flex-end\\",\\n};\\n\\nconst $item: ViewStyle = {\\n  marginBottom: spacing.md,\\n};\\n\\nconst $itemsContainer: ViewStyle = {\\n  marginBottom: spacing.xl,\\n};\\n\\nconst $button: ViewStyle = {\\n  marginBottom: spacing.xs,\\n};\\n\\nconst $buttonContainer: ViewStyle = {\\n  marginBottom: spacing.md,\\n};\\n\\nconst $hint: TextStyle = {\\n  color: colors.palette.neutral600,\\n  fontSize: 12,\\n  lineHeight: 15,\\n  paddingBottom: spacing.lg,\\n};\\n\\nmv src/screens/DemoShowroomScreen src/components/Showroom\\nrm src/components/Showroom/DemoShowroomScreen.tsx\\n\\n> import { ReactElement } from \\"react\\";\\n>\\n> export interface Demo {\\n>   name: string;\\n>   description: string;\\n>   data: ReactElement[];\\n> }\\n\\nconst WebListItem: FC<DemoListItem> = ({ item, sectionIndex }) => {\\n  const sectionSlug = item.name.toLowerCase();\\n\\n  return (\\n    <View>\\n      <Link to={`/showroom/${sectionSlug}`} style={$menuContainer}>\\n        <Text preset=\\"bold\\">{item.name}</Text>\\n      </Link>\\n      {item.useCases.map((u) => {\\n        const itemSlug = slugify(u);\\n\\n        return (\\n          <Link key={`section${sectionIndex}-${u}`} to={`/showroom/${sectionSlug}/${itemSlug}`}>\\n            <Text>{u}</Text>\\n          </Link>\\n        );\\n      })}\\n    </View>\\n  );\\n};\\n\\nconst NativeListItem: FC<DemoListItem> = ({ item, sectionIndex, handleScroll }) => (\\n  <View>\\n    <Text onPress={() => handleScroll?.(sectionIndex)} preset=\\"bold\\" style={$menuContainer}>\\n      {item.name}\\n    </Text>\\n    {item.useCases.map((u, index) => (\\n      <ListItem\\n        key={`section${sectionIndex}-${u}`}\\n        onPress={() => handleScroll?.(sectionIndex, index + 1)}\\n        text={u}\\n        rightIcon={isRTL ? \\"caretLeft\\" : \\"caretRight\\"}\\n      />\\n    ))}\\n  </View>\\n);\\n\\nconst ShowroomListItem = Platform.select({\\n  web: WebListItem,\\n  default: NativeListItem,\\n});\\n\\nconst ShowroomListItem: FC<DemoListItem> = ({ item, sectionIndex }) => {\\n  const sectionSlug = item.name.toLowerCase();\\n\\n  return (\\n    <View>\\n      <Link href={{ pathname: \\"/showroom\\", params: { sectionSlug } }}>\\n        <Text preset=\\"bold\\">{item.name}</Text>\\n      </Link>\\n      {item.useCases.map((u) => {\\n        const itemSlug = slugify(u);\\n        return (\\n          <Link\\n            key={`section${sectionIndex}-${u}`}\\n            href={{ pathname: \\"/showroom\\", params: { sectionSlug, itemSlug } }}\\n            asChild\\n          >\\n            <ListItem text={u} rightIcon={isRTL ? \\"caretLeft\\" : \\"caretRight\\"} />\\n          </Link>\\n        );\\n      })}\\n    </View>\\n  );\\n};\\n\\nimport React, { FC, useEffect, useRef, useState } from \\"react\\";\\nimport { Image, ImageStyle, SectionList, TextStyle, View, ViewStyle } from \\"react-native\\";\\nimport { Drawer } from \\"react-native-drawer-layout\\";\\nimport { type ContentStyle } from \\"@shopify/flash-list\\";\\nimport { ListItem, ListView, ListViewRef, Screen, Text } from \\"src/components\\";\\nimport { isRTL } from \\"src/i18n\\";\\nimport { colors, spacing } from \\"src/theme\\";\\nimport { useSafeAreaInsetsStyle } from \\"src/utils/useSafeAreaInsetsStyle\\";\\nimport * as Demos from \\"src/components/Showroom/demos\\";\\nimport { DrawerIconButton } from \\"src/components/Showroom/DrawerIconButton\\";\\nimport { Link, useLocalSearchParams } from \\"expo-router\\";\\n\\nconst logo = require(\\"assets/images/logo.png\\");\\n\\ninterface DemoListItem {\\n  item: { name: string; useCases: string[] };\\n  sectionIndex: number;\\n  onPress?: () => void;\\n}\\n\\nconst slugify = (str: string) =>\\n  str\\n    .toLowerCase()\\n    .trim()\\n    .replace(/[^\\\\w\\\\s-]/g, \\"\\")\\n    .replace(/[\\\\s_-]+/g, \\"-\\")\\n    .replace(/^-+|-+$/g, \\"\\");\\n\\nconst ShowroomListItem: FC<DemoListItem> = ({ item, sectionIndex, onPress }) => {\\n  const sectionSlug = item.name.toLowerCase();\\n\\n  return (\\n    <View>\\n      <Link href={{ pathname: \\"/showroom\\", params: { sectionSlug } }} onPress={onPress}>\\n        <Text preset=\\"bold\\">{item.name}</Text>\\n      </Link>\\n      {item.useCases.map((u) => {\\n        const itemSlug = slugify(u);\\n        return (\\n          <Link\\n            key={`section${sectionIndex}-${u}`}\\n            href={{ pathname: \\"/showroom\\", params: { sectionSlug, itemSlug } }}\\n            onPress={onPress}\\n            asChild\\n          >\\n            <ListItem text={u} rightIcon={isRTL ? \\"caretLeft\\" : \\"caretRight\\"} />\\n          </Link>\\n        );\\n      })}\\n    </View>\\n  );\\n};\\n\\nexport default function DemoShowroomScreen() {\\n  const [open, setOpen] = useState(false);\\n  const timeout = useRef<ReturnType<typeof setTimeout>>();\\n  const listRef = useRef<SectionList>(null);\\n  const menuRef = useRef<ListViewRef<DemoListItem[\\"item\\"]>>(null);\\n\\n  const params = useLocalSearchParams<{\\n    sectionSlug?: string;\\n    itemSlug?: string;\\n  }>();\\n\\n  // handle scroll when section/item params change\\n  React.useEffect(() => {\\n    if (Object.keys(params).length > 0) {\\n      const demoValues = Object.values(Demos);\\n      const findSectionIndex = demoValues.findIndex((x) => x.name.toLowerCase() === params.sectionSlug);\\n      let findItemIndex = 0;\\n      if (params.itemSlug) {\\n        try {\\n          findItemIndex =\\n            demoValues[findSectionIndex].data.findIndex((u) => slugify(u.props.name) === params.itemSlug) + 1;\\n        } catch (err) {\\n          console.error(err);\\n        }\\n      }\\n      handleScroll(findSectionIndex, findItemIndex);\\n    }\\n  }, [params]);\\n\\n  const toggleDrawer = () => {\\n    if (!open) {\\n      setOpen(true);\\n    } else {\\n      setOpen(false);\\n    }\\n  };\\n\\n  const handleScroll = (sectionIndex: number, itemIndex = 0) => {\\n    listRef.current?.scrollToLocation({\\n      animated: true,\\n      itemIndex,\\n      sectionIndex,\\n    });\\n  };\\n\\n  const scrollToIndexFailed = (info: {\\n    index: number;\\n    highestMeasuredFrameIndex: number;\\n    averageItemLength: number;\\n  }) => {\\n    listRef.current?.getScrollResponder()?.scrollToEnd();\\n    timeout.current = setTimeout(\\n      () =>\\n        listRef.current?.scrollToLocation({\\n          animated: true,\\n          itemIndex: info.index,\\n          sectionIndex: 0,\\n        }),\\n      50\\n    );\\n  };\\n\\n  useEffect(() => {\\n    return () => timeout.current && clearTimeout(timeout.current);\\n  }, []);\\n\\n  const $drawerInsets = useSafeAreaInsetsStyle([\\"top\\"]);\\n\\n  return (\\n    <Drawer\\n      open={open}\\n      onOpen={() => setOpen(true)}\\n      onClose={() => setOpen(false)}\\n      drawerType={\\"slide\\"}\\n      drawerPosition={isRTL ? \\"right\\" : \\"left\\"}\\n      renderDrawerContent={() => (\\n        <View style={[$drawer, $drawerInsets]}>\\n          <View style={$logoContainer}>\\n            <Image source={logo} style={$logoImage} />\\n          </View>\\n\\n          <ListView<DemoListItem[\\"item\\"]>\\n            ref={menuRef}\\n            contentContainerStyle={$listContentContainer}\\n            estimatedItemSize={250}\\n            data={Object.values(Demos).map((d) => ({\\n              name: d.name,\\n              useCases: d.data.map((u) => u.props.name as string),\\n            }))}\\n            keyExtractor={(item) => item.name}\\n            renderItem={({ item, index: sectionIndex }) => (\\n              <ShowroomListItem {...{ item, sectionIndex, onPress }} />\\n            )}\\n          />\\n        </View>\\n      )}\\n    >\\n      <Screen preset=\\"fixed\\" safeAreaEdges={[\\"top\\"]} contentContainerStyle={$screenContainer}>\\n        <DrawerIconButton onPress={toggleDrawer} {...{ open }} />\\n\\n        <SectionList\\n          ref={listRef}\\n          contentContainerStyle={$sectionListContentContainer}\\n          stickySectionHeadersEnabled={false}\\n          sections={Object.values(Demos)}\\n          renderItem={({ item }) => item}\\n          renderSectionFooter={() => <View style={$demoUseCasesSpacer} />}\\n          ListHeaderComponent={\\n            <View style={$heading}>\\n              <Text preset=\\"heading\\" tx=\\"demoShowroomScreen.jumpStart\\" />\\n            </View>\\n          }\\n          onScrollToIndexFailed={scrollToIndexFailed}\\n          renderSectionHeader={({ section }) => {\\n            return (\\n              <View>\\n                <Text preset=\\"heading\\" style={$demoItemName}>\\n                  {section.name}\\n                </Text>\\n                <Text style={$demoItemDescription}>{section.description}</Text>\\n              </View>\\n            );\\n          }}\\n        />\\n      </Screen>\\n    </Drawer>\\n  );\\n}\\n\\nconst $screenContainer: ViewStyle = {\\n  flex: 1,\\n};\\n\\nconst $drawer: ViewStyle = {\\n  backgroundColor: colors.background,\\n  flex: 1,\\n};\\n\\nconst $listContentContainer: ContentStyle = {\\n  paddingHorizontal: spacing.lg,\\n};\\n\\nconst $sectionListContentContainer: ViewStyle = {\\n  paddingHorizontal: spacing.lg,\\n};\\n\\nconst $heading: ViewStyle = {\\n  marginBottom: spacing.xxxl,\\n};\\n\\nconst $logoImage: ImageStyle = {\\n  height: 42,\\n  width: 77,\\n};\\n\\nconst $logoContainer: ViewStyle = {\\n  alignSelf: \\"flex-start\\",\\n  justifyContent: \\"center\\",\\n  height: 56,\\n  paddingHorizontal: spacing.lg,\\n};\\n\\nconst $demoItemName: TextStyle = {\\n  fontSize: 24,\\n  marginBottom: spacing.md,\\n};\\n\\nconst $demoItemDescription: TextStyle = {\\n  marginBottom: spacing.xxl,\\n};\\n\\nconst $demoUseCasesSpacer: ViewStyle = {\\n  paddingBottom: spacing.xxl,\\n};\\n\\nnpx uri-scheme open exp://localhost:8081/--/showroom --ios\\n\\nrm src/app.tsx\\nrm -rf src/screens\\nrm -rf src/navigators\\n\\n// error-line\\nimport { goBack, resetRoot, navigate } from \\"src/navigators/navigationUtilities\\";\\n// success-line\\nimport { router } from \\"expo-router\\";\\n// ...\\n// error-line-start\\nreactotron.onCustomCommand({\\n  title: \\"Reset Navigation State\\",\\n  description: \\"Resets the navigation state\\",\\n  command: \\"resetNavigation\\",\\n  handler: () => {\\n    Reactotron.log(\\"resetting navigation state\\");\\n    resetRoot({ index: 0, routes: [] });\\n  },\\n});\\n// error-line-end\\n\\nreactotron.onCustomCommand<[{ name: \\"route\\"; type: ArgType.String }]>({\\n  command: \\"navigateTo\\",\\n  handler: (args) => {\\n    const { route } = args ?? {};\\n    if (route) {\\n      Reactotron.log(`Navigating to: ${route}`);\\n      // error-line\\n      navigate(route as any); // this should be tied to the navigator, but since this is for debugging, we can navigate to illegal routes\\n      // success-line-start\\n      // @ts-ignore - bypass Expo Router Typed Routes\\n      router.push(route);\\n      // success-line-end\\n    } else {\\n      Reactotron.log(\\"Could not navigate. No route provided.\\");\\n    }\\n  },\\n  title: \\"Navigate To Screen\\",\\n  description: \\"Navigates to a screen by name.\\",\\n  args: [{ name: \\"route\\", type: ArgType.String }],\\n});\\n\\nreactotron.onCustomCommand({\\n  title: \\"Go Back\\",\\n  description: \\"Goes back\\",\\n  command: \\"goBack\\",\\n  handler: () => {\\n    Reactotron.log(\\"Going back\\");\\n    // error-line\\n    goBack();\\n    // success-line\\n    router.back();\\n  },\\n});\\n\\nERROR  Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?\\n\\n/**\\n * A styled row component that can be used in FlatList, SectionList, or by itself.\\n * @see [Documentation and Examples]{@link https://docs.infinite.red/ignite-cli/boilerplate/components/ListItem/}\\n * @param {ListItemProps} props - The props for the `ListItem` component.\\n * @returns {JSX.Element} The rendered `ListItem` component.\\n */\\n// error-line\\n  export function ListItem(props: ListItemProps) {\\n// success-line-start\\n  export const ListItem = React.forwardRef<View, ListItemProps>(function ListItem(\\n  props: ListItemProps,\\n  ref,\\n) {\\n// success-line-end\\n  const {\\n    bottomSeparator,\\n    children,\\n    height = 56,\\n    LeftComponent,\\n    leftIcon,\\n    leftIconColor,\\n    RightComponent,\\n    rightIcon,\\n    rightIconColor,\\n    style,\\n    text,\\n    TextProps,\\n    topSeparator,\\n    tx,\\n    txOptions,\\n    textStyle: $textStyleOverride,\\n    containerStyle: $containerStyleOverride,\\n    ...TouchableOpacityProps\\n  } = props\\n\\n  const $textStyles = [$textStyle, $textStyleOverride, TextProps?.style]\\n\\n  const $containerStyles = [\\n    topSeparator && $separatorTop,\\n    bottomSeparator && $separatorBottom,\\n    $containerStyleOverride,\\n  ]\\n\\n  const $touchableStyles = [$touchableStyle, { minHeight: height }, style]\\n\\n  return (\\n    // error-line\\n   <View style={$containerStyles}>\\n    // success-line\\n   <View ref={ref} style={$containerStyles}>\\n      <TouchableOpacity {...TouchableOpacityProps} style={$touchableStyles}>\\n        <ListItemAction\\n          side=\\"left\\"\\n          size={height}\\n          icon={leftIcon}\\n          iconColor={leftIconColor}\\n          Component={LeftComponent}\\n        />\\n\\n        <Text {...TextProps} tx={tx} text={text} txOptions={txOptions} style={$textStyles}>\\n          {children}\\n        </Text>\\n\\n        <ListItemAction\\n          side=\\"right\\"\\n          size={height}\\n          icon={rightIcon}\\n          iconColor={rightIconColor}\\n          Component={RightComponent}\\n        />\\n      </TouchableOpacity>\\n    </View>\\n  )\\n  //error-line\\n}\\n  //success-line\\n})\\n\\n\\n","lastUpdated":"6 days ago","title":"Expo Router","publish_date":"2024-01-25","doc_name":"ExpoRouter.md"},{"author":"Joshua Yoes","content":"---\\ndestinationDir: app/components/specs\\n---\\n// https://reactnativetesting.io/component/testing/\\n\\nimport React from \\"react\\"\\nimport { fireEvent, render, screen } from \\"@testing-library/react-native\\"\\nimport { <%= props.pascalCaseName %> } from \\"../<%= props.pascalCaseName %>\\"\\n\\ndescribe(\\"<%= props.pascalCaseName %>\\", () => {\\n  it(\\"renders\\", () => {\\n    render(<<%= props.pascalCaseName %> />)\\n    expect(screen.getByText(\\"Hello\\")).toBeTruthy()\\n  })\\n})\\n\\n","lastUpdated":"1 year ago","title":"Generator for Component Tests","publish_date":"2022-10-10","doc_name":"GeneratorComponentTests.md"},{"author":"Trevor Coleman","content":"   npx ignite-cli@latest new PowerSyncIgnite --remove-demo --workflow=cng --yes\\n\\nnpx expo install \\\\\\n  @powersync/react-native \\\\\\n  @journeyapps/react-native-quick-sqlite \\n\\nnpx expo install \\\\\\n  react-native-fetch-api \\\\\\n  react-native-polyfill-globals \\\\\\n  react-native-url-polyfill \\\\\\n  text-encoding \\\\\\n  web-streams-polyfill@^3.2.1 \\\\\\n  base-64 \\\\\\n  @azure/core-asynciterator-polyfill \\\\\\n  react-native-get-random-values\\n\\nyarn add -D @babel/plugin-transform-async-generator-functions\\n\\nnpx expo install @supabase/supabase-js\\n\\nnpx expo install @react-native-async-storage/async-storage\\n\\n    import \\"react-native-polyfill-globals/auto\\"\\n    import \\"@azure/core-asynciterator-polyfill\\"\\n\\n    /** @type {import(\'@babel/core\').TransformOptions[\'plugins\']} */\\n    const plugins = [\\n            //... other plugins\\n            // success-line\\n            \'@babel/plugin-transform-async-generator-functions\',  // <-- Add this\\n            /** NOTE: This must be last in the plugins @see https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/#babel-plugin */\\n            \\"react-native-reanimated/plugin\\",\\n        ]\\n    \\n\\n{\\n  \\"expo\\": {\\n    \\"plugins\\": [\\n      // ...\\n      [\\n        \\"expo-build-properties\\",\\n        {\\n          \\"ios\\": {\\n            \\"newArchEnabled\\": false,\\n            \\"flipper\\": false\\n          },\\n          \\"android\\": {\\n            \\"newArchEnabled\\": false,\\n            // success-line\\n            \\"networkInspector\\": false\\n          }\\n        }\\n      ]\\n      //...\\n    ]\\n    //...\\n  }\\n}\\n\\n// `app/config/config.base.ts`:\\n\\n// update the interface to include the new properties\\nexport interface ConfigBaseProps {\\n  // Existing config properties\\n\\n  // success-line\\n  supabaseUrl: string\\n  // success-line\\n  supabaseAnonKey: string\\n}\\n\\n// Add the new properties to the config object\\nconst BaseConfig: ConfigBaseProps = {\\n  // Existing config values\\n  // success-line\\n  supabaseUrl: \'<<YOUR_SUPABASE_URL>>\',\\n  // success-line\\n  supabaseAnonKey: \'<<YOUR_SUPABASE_ANON_KEY>>\',\\n}\\n\\n// app/services/database/supabase.ts\\nimport AsyncStorage from \'@react-native-async-storage/async-storage\'\\nimport { createClient } from \\"@supabase/supabase-js\\"\\nimport { Config } from \'../../config\'\\n\\nexport const supabase = createClient(Config.supabaseUrl, Config.supabaseAnonKey, {\\n  auth: {\\n    persistSession: true, storage: AsyncStorage,\\n  },\\n})\\n\\n// app/services/database/use-auth.tsx\\nimport { User } from \\"@supabase/supabase-js\\"\\nimport { supabase } from \\"app/services/database/supabase\\"\\nimport React, { createContext, PropsWithChildren, useCallback, useContext, useMemo, useState } from \\"react\\"\\n\\ntype AuthContextType = {\\n  signIn: (email: string, password: string) => void\\n  signUp: (email: string, password: string) => void\\n  signOut: () => Promise<void>\\n  signedIn: boolean\\n  loading: boolean\\n  error: string\\n  user: User | null\\n}\\n\\n// We initialize the context with null to ensure that it is not used outside of the provider\\nconst AuthContext = createContext<AuthContextType | null>(null)\\n\\n/**\\n * AuthProvider manages the authentication state and provides the necessary methods to sign in, sign up and sign out.\\n */\\nexport const AuthProvider = ({ children }: PropsWithChildren<any>) => {\\n  const [signedIn, setSignedIn] = useState(false)\\n  const [loading, setLoading] = useState(false)\\n  const [error, setError] = useState(\\"\\")\\n  const [user, setUser] = useState<User | null>(null)\\n\\n\\n  // Sign in with provided email and password\\n  const signIn = useCallback(async (email: string, password: string) => {\\n    setLoading(true)\\n    setError(\\"\\")\\n    setUser(null)\\n    \\n    try {\\n      // get the session and user from supabase\\n      const { \\n        data: {session, user}, \\n        error \\n      } = await supabase.auth.signInWithPassword({ email, password })\\n      \\n      // if we have a session and user, sign them in\\n      if (session && user) {\\n        setSignedIn(true)\\n        setUser(user)\\n      // otherwise sign them out and set an error\\n      } else {\\n        throw new Error(error?.message);\\n        setSignedIn(false)\\n        setUser(null)\\n      }\\n    } catch (error: any) {\\n      setError(error?.message ?? \\"Unknown error\\")\\n      setSignedIn(false)\\n      setUser(null)\\n    } finally {\\n      setLoading(false)\\n    }\\n  }, [\\n    setSignedIn, setLoading, setError, setUser, supabase\\n  ])\\n\\n  // Create a new account with provided email and password\\n  const signUp = useCallback(async (email: string, password: string) => {\\n    setLoading(true)\\n    setError(\\"\\")\\n    setUser(null)\\n    try {\\n      const { data, error } = await supabase.auth.signUp({ email, password })\\n      if (error) {\\n        setSignedIn(false)\\n        setError(error.message)\\n      } else if (data.session) {\\n        await supabase.auth.setSession(data.session)\\n        setSignedIn(true)\\n        setUser(data.user)\\n      }\\n    } catch (error: any) {\\n      setUser(null)\\n      setSignedIn(false)\\n      setError(error?.message ?? \\"Unknown error\\")\\n    } finally {\\n      setLoading(false)\\n    }\\n  }, [\\n    setSignedIn, setLoading, setError, setUser, supabase\\n  ])\\n\\n  // Sign out the current user\\n  const signOut = useCallback(async () => {\\n    setLoading(true)\\n    await supabase.auth.signOut()\\n    setError(\\"\\")\\n    setSignedIn(false)\\n    setLoading(false)\\n    setUser(null)\\n  }, [\\n    setSignedIn, setLoading, setError, setUser, supabase\\n  ])\\n\\n  // Always memoize context values as they can cause unnecessary re-renders if they aren\'t stable!\\n  const value = useMemo(() => ({\\n    signIn, signOut, signUp, signedIn, loading, error, user\\n  }), [\\n    signIn, signOut, signUp, signedIn, loading, error, user\\n  ])\\n  return <AuthContext.Provider value={ value }>{ children }</AuthContext.Provider>\\n}\\n\\nexport const useAuth = () => {\\n  const context = useContext(AuthContext)\\n\\n  // It\'s a good idea to throw an error if the context is null, as it means the hook is being used outside of the provider\\n  if (context === null) {\\n    throw new Error(\'useAuthContext must be used within a AuthProvider\')\\n  }\\n  return context\\n}\\n\\n\\n// app/app.tsx\\n// ...other imports\\n// success-line\\nimport { AuthProvider } from \\"app/services/database/use-auth\\"\\n\\n// ...\\nfunction App(props: AppProps) {\\n  // ...\\n  return (\\n    // success-line\\n    <AuthProvider>\\n      <SafeAreaProvider>\\n        {/* ... */ }\\n      </SafeAreaProvider>\\n      // success-line\\n    </AuthProvider>\\n  )\\n}\\n\\n\\n\\nnpx ignite-cli generate screen Auth\\n\\n// app/screens/AuthScreen.tsx\\nimport { AppStackScreenProps } from \\"app/navigators\\"\\nimport { Button, Screen, Text, TextField } from \\"app/components\\"\\nimport { useAuth } from \\"app/services/database/use-auth\\"\\nimport React, { useEffect, useState } from \\"react\\"\\nimport { ActivityIndicator, Modal, TextStyle, View, ViewStyle } from \\"react-native\\"\\nimport { colors, spacing } from \\"../theme\\"\\n\\ninterface AuthScreenProps extends AppStackScreenProps<\\"Auth\\"> {}\\n\\nexport const AuthScreen: React.FC<AuthScreenProps> = ({ navigation }) => {\\n  const { signUp, signIn, loading, error, user } = useAuth()\\n  const [email, setEmail] = useState(\\"\\")\\n  const [password, setPassword] = useState(\\"\\")\\n\\n  const handleSignIn = async () => {\\n    signIn(email, password)\\n  }\\n\\n  const handleSignUp = async () => {\\n    signUp(email, password)\\n  }\\n\\n  useEffect(() => {\\n    if (user) {\\n      navigation.navigate(\\"Welcome\\")\\n    }\\n  }, [user])\\n\\n  return (\\n    <Screen style={ $container } safeAreaEdges={ [\\"top\\"] }>\\n      <Text preset={ \\"subheading\\" }>PowerSync + Supabase</Text>\\n      <Text preset={ \\"heading\\" }>Sign in or Create Account</Text>\\n      <TextField\\n        inputWrapperStyle={ $inputWrapper }\\n        containerStyle={ $inputContainer }\\n        label={ \\"Email\\" }\\n        value={ email }\\n        inputMode={ \\"email\\" }\\n        onChangeText={ setEmail }\\n        keyboardType=\\"email-address\\"\\n        autoCapitalize={ \\"none\\" }\\n      />\\n      <TextField\\n        containerStyle={ $inputContainer }\\n        inputWrapperStyle={ $inputWrapper }\\n        label={ \\"Password\\" }\\n        value={ password }\\n        onChangeText={ setPassword }\\n        secureTextEntry\\n      />\\n\\n      <View style={ $buttonContainer }>\\n        <Button\\n          disabled={ loading }\\n          text={ \\"Sign In\\" }\\n          onPress={ handleSignIn }\\n          style={ $button }\\n          preset={ \\"reversed\\" }\\n        />\\n\\n        <Button\\n          disabled={ loading }\\n          text={ \\"Register New Account\\" }\\n          onPress={ handleSignUp }\\n          style={ $button }\\n        />\\n      </View>\\n      { error ? <Text style={ $error } text={ error }/> : null }\\n      <Modal transparent visible={ loading }>\\n        <View style={ $modalBackground }>\\n          <ActivityIndicator size=\\"large\\" color={ colors.palette.primary500 }/>\\n        </View>\\n      </Modal>\\n    </Screen>\\n  )\\n}\\n\\nconst $container: ViewStyle = {\\n  backgroundColor: colors.background,\\n  flex: 1,\\n  justifyContent: \\"center\\",\\n  paddingHorizontal: spacing.lg,\\n}\\n\\nconst $inputContainer: TextStyle = {\\n  marginTop: spacing.md,\\n}\\n\\nconst $inputWrapper: TextStyle = {\\n  backgroundColor: colors.palette.neutral100,\\n}\\nconst $modalBackground: ViewStyle = {\\n  alignItems: \\"center\\",\\n  backgroundColor: \\"#00000040\\",\\n  flex: 1,\\n  flexDirection: \\"column\\",\\n  justifyContent: \\"space-around\\",\\n}\\n\\nconst $error: TextStyle = {\\n  color: colors.error,\\n  marginVertical: spacing.md,\\n  textAlign: \\"center\\",\\n  width: \\"100%\\",\\n  fontSize: 20,\\n}\\n\\nconst $buttonContainer: ViewStyle = {\\n  display: \\"flex\\",\\n  flexDirection: \\"column\\",\\n  justifyContent: \\"space-between\\",\\n  marginVertical: spacing.md,\\n}\\n\\nconst $button: ViewStyle = {\\n  marginTop: spacing.xs,\\n}\\n\\nnpx ignite-cli generate component SignOutButton\\n\\n// app/components/SignOutButton.tsx\\n\\nimport { Button } from \\"app/components/Button\\"\\nimport { useAuth } from \\"app/services/database/use-auth\\"\\nimport * as React from \\"react\\"\\nimport { StyleProp, View, ViewStyle } from \\"react-native\\"\\nimport { observer } from \\"mobx-react-lite\\"\\nimport { spacing } from \\"app/theme\\"\\n\\nexport interface SignOutButtonProps {\\n  /**\\n   * An optional style override useful for padding & margin.\\n   */\\n  style?: StyleProp<ViewStyle>\\n}\\n\\n/**\\n * Describe your component here\\n */\\nexport const SignOutButton = observer(function SignOutButton(props: SignOutButtonProps) {\\n  const { style } = props\\n  const $styles = [$container, style]\\n\\n  const { signOut } = useAuth()\\n\\n  const handleSignOut = async () => {\\n    await signOut()\\n  }\\n\\n  return (\\n    <View style={ $styles }>\\n      <Button text=\\"Sign Out\\" onPress={ handleSignOut }/>\\n    </View>\\n  )\\n})\\n\\nconst $container: ViewStyle = {\\n  padding: spacing.md,\\n}\\n\\n// app/screens/WelcomeScreen.tsx\\nimport { NativeStackScreenProps } from \\"@react-navigation/native-stack\\"\\nimport { Lists, SignOutButton } from \\"app/components\\"\\nimport { DatabaseProvider } from \\"app/services/database/database\\"\\nimport { observer } from \\"mobx-react-lite\\"\\nimport React, { FC } from \\"react\\"\\nimport { ViewStyle } from \\"react-native\\"\\nimport { SafeAreaView } from \\"react-native-safe-area-context\\"\\nimport { SignedInNavigatorParamList } from \\"../navigators\\"\\nimport { colors } from \\"../theme\\"\\n\\nexport const WelcomeScreen: FC<WelcomeScreenProps> = observer(function WelcomeScreen() {\\n  return (\\n    <DatabaseProvider>\\n      <SafeAreaView style={ $container }>\\n        <SignOutButton/>\\n      </SafeAreaView>\\n    </DatabaseProvider>\\n  )\\n})\\n\\nconst $container: ViewStyle = {\\n  flex: 1,\\n  backgroundColor: colors.palette.neutral300,\\n  display: \\"flex\\",\\n  justifyContent: \\"flex-start\\",\\n  height: \\"100%\\",\\n  flexDirection: \\"column\\",\\n}\\n\\n// app/navigators/AppNavigator.tsx\\n\\n//...\\n\\nconst AppStack = observer(function AppStack() {\\n  // Fetch the user from the auth context\\n  // success-line\\n  // success-line\\n  const { signedIn } = useAuth()\\n  return (\\n    <Stack.Navigator\\n      screenOptions={ { headerShown: false, navigationBarColor: colors.background } }\\n    >\\n      {/**\\n       * by wrapping the Welcome screen in a conditional, we ensure that\\n       * the user can only access it if they are signed in\\n       */ }\\n      // success-line\\n      { signedIn\\n        // success-line\\n        ? <Stack.Screen name=\\"Welcome\\" component={ Screens.WelcomeScreen }/>\\n        // success-line\\n        : null\\n        // success-line\\n      }\\n      <Stack.Screen name=\\"Auth\\" component={ Screens.AuthScreen }/>\\n      {/* IGNITE_GENERATOR_ANCHOR_APP_STACK_SCREENS */ }\\n    </Stack.Navigator>\\n  )\\n})\\n\\n// ...\\n\\n// app/config/config.base.ts:\\n\\n// update the interface to include the new properties\\nexport interface ConfigBaseProps {\\n  // Existing config properties\\n  supabaseUrl: string\\n  supabaseAnonKey: string\\n  // success-line\\n  powersyncUrl: string\\n}\\n\\n// Add the new properties to the config object\\nconst BaseConfig: ConfigBaseProps = {\\n  // Existing config values\\n  supabaseUrl: \'<<YOUR_SUPABASE_URL>>\',\\n  supabaseAnonKey: \'<<YOUR_SUPABASE_ANON_KEY>>\',\\n  // success-line\\n  powersyncUrl: \'<<YOUR_POWER_SYNC_URL>>\',\\n}\\n\\n// app/services/database/schema.ts\\nimport {\\n  Column,\\n  ColumnType,\\n  Index,\\n  IndexedColumn,\\n  Schema,\\n  Table\\n} from \'@powersync/react-native\'\\n\\nexport const TODO_TABLE = \'todos\'\\nexport const LIST_TABLE = \'lists\'\\n\\nexport interface ListRecord {\\n  id: string\\n  name: string\\n  created_at: string\\n  owner_id?: string\\n}\\n\\nexport interface TodoRecord {\\n  id: string\\n  created_at: string\\n  completed: boolean\\n  description: string\\n  completed_at?: string\\n  created_by: string\\n  completed_by?: string\\n  list_id: string\\n  photo_id?: string\\n}\\n\\nexport const AppSchema = new Schema([\\n  new Table({\\n    name: \'todos\',\\n    columns: [\\n      new Column({ name: \'list_id\', type: ColumnType.TEXT }),\\n      new Column({ name: \'created_at\', type: ColumnType.TEXT }),\\n      new Column({ name: \'completed_at\', type: ColumnType.TEXT }),\\n      new Column({ name: \'description\', type: ColumnType.TEXT }),\\n      new Column({ name: \'completed\', type: ColumnType.INTEGER }),\\n      new Column({ name: \'created_by\', type: ColumnType.TEXT }),\\n      new Column({ name: \'completed_by\', type: ColumnType.TEXT })\\n    ],\\n    indexes: [\\n      new Index({\\n        name: \'list\',\\n        columns: [new IndexedColumn({ name: \'list_id\' })]\\n      })\\n    ]\\n  }),\\n  new Table({\\n    name: \'lists\',\\n    columns: [\\n      new Column({ name: \'created_at\', type: ColumnType.TEXT }),\\n      new Column({ name: \'name\', type: ColumnType.TEXT }),\\n      new Column({ name: \'owner_id\', type: ColumnType.TEXT })\\n    ]\\n  }),\\n])\\n\\n\\n// from @journeyapps/powersync-sdk-common \\nexport interface PowerSyncBackendConnector {\\n  /** Allows the PowerSync client to retrieve an authentication token from your backend\\n   * which is used to authenticate against the PowerSync service.\\n   *\\n   * This should always fetch a fresh set of credentials - don\'t use cached\\n   * values.\\n   *\\n   * Return null if the user is not signed in. Throw an error if credentials\\n   * cannot be fetched due to a network error or other temporary error.\\n   *\\n   * This token is kept for the duration of a sync connection.\\n   */\\n  fetchCredentials: () => Promise<PowerSyncCredentials | null>\\n\\n  /** Upload local changes to the app backend.\\n   *\\n   * Use {@link AbstractPowerSyncDatabase.getCrudBatch} to get a batch of changes to upload.\\n   *\\n   * Any thrown errors will result in a retry after the configured wait period (default: 5 seconds).\\n   */\\n  uploadData: (database: AbstractPowerSyncDatabase) => Promise<void>\\n}\\n\\n// app/services/database/supabase.ts\\nimport {\\n  AbstractPowerSyncDatabase,\\n  CrudEntry, PowerSyncBackendConnector,\\n  UpdateType, PowerSyncCredentials\\n} from \\"@powersync/react-native\\"\\nimport AsyncStorage from \'@react-native-async-storage/async-storage\'\\nimport { createClient } from \\"@supabase/supabase-js\\"\\nimport Config from \\"../../config\\"\\n\\nexport const supabase = createClient(Config.supabaseUrl, Config.supabaseAnonKey, {\\n  auth: {\\n    persistSession: true, storage: AsyncStorage,\\n  },\\n})\\n\\n\\n// This function fetches the session token from Supabase, it should return null if the user is not signed in, and the session token if they are.\\nasync function fetchCredentials(): Promise<PowerSyncCredentials | null> {\\n  const { data: { session }, error } = await supabase.auth.getSession()\\n\\n  if (error) {\\n    throw new Error(`Could not fetch Supabase credentials: ${ error }`)\\n  }\\n\\n  if (!session) {\\n    return null\\n  }\\n\\n  return {\\n    endpoint: Config.powersyncUrl,\\n    token: session.access_token ?? \\"\\",\\n    expiresAt: session.expires_at\\n               ? new Date(session.expires_at * 1000)\\n               : undefined\\n  }\\n}\\n\\n\\n// Regexes for response codes indicating unrecoverable errors.\\nconst FATAL_RESPONSE_CODES = [\\n  /^22...$/, // Data Exception\\n  /^23...$/, // Integrity Constraint Violation\\n  /^42501$/, // INSUFFICIENT PRIVILEGE\\n]\\n\\n// PowerSync will call this function to upload data to the backend\\nconst uploadData: (database: AbstractPowerSyncDatabase) => Promise<void> = async (database) => {\\n  const transaction = await database.getNextCrudTransaction()\\n\\n  if (!transaction) {\\n    return\\n  }\\n\\n\\n  let lastOp: CrudEntry | null = null\\n  try {\\n    // Note: If transactional consistency is important, use database functions\\n    // or edge functions to process the entire transaction in a single call.\\n    for (const op of transaction.crud) {\\n      lastOp = op\\n      const table = supabase.from(op.table)\\n      let result: any = null\\n      switch (op.op) {\\n        case UpdateType.PUT:\\n          // eslint-disable-next-line no-case-declarations\\n          const record = { ...op.opData, id: op.id }\\n          result = await table.upsert(record)\\n          break\\n        case UpdateType.PATCH:\\n          result = await table.update(op.opData).eq(\'id\', op.id)\\n          break\\n        case UpdateType.DELETE:\\n          result = await table.delete().eq(\'id\', op.id)\\n          break\\n      }\\n\\n      if (result?.error) {\\n        throw new Error(`Could not ${ op.op } data to Supabase error: ${ JSON.stringify(result) }`)\\n      }\\n    }\\n\\n    await transaction.complete()\\n  } catch (ex: any) {\\n    console.debug(ex)\\n    if (typeof ex.code === \'string\' && FATAL_RESPONSE_CODES.some((regex) => regex.test(ex.code))) {\\n      /**\\n       * Instead of blocking the queue with these errors,\\n       * discard the (rest of the) transaction.\\n       *\\n       * Note that these errors typically indicate a bug in the application.\\n       * If protecting against data loss is important, save the failing records\\n       * elsewhere instead of discarding, and/or notify the user.\\n       */\\n      console.error(`Data upload error - discarding ${ lastOp }`, ex)\\n      await transaction.complete()\\n    } else {\\n      // Error may be retryable - e.g. network error or temporary server error.\\n      // Throwing an error here causes this call to be retried after a delay.\\n      throw ex\\n    }\\n  }\\n}\\n\\nexport const supabaseConnector: PowerSyncBackendConnector = {\\n  fetchCredentials, uploadData,\\n}\\n\\n// app/services/database/database.tsx\\nimport { SupabaseClient } from \\"@supabase/supabase-js\\"\\nimport { useAuth } from \\"./use-auth\\"\\nimport React, { PropsWithChildren, useEffect } from \\"react\\"\\nimport {\\n  AbstractPowerSyncDatabase,\\n  PowerSyncContext,\\n  RNQSPowerSyncDatabaseOpenFactory,\\n} from \\"@powersync/react-native\\"\\nimport { supabase, supabaseConnector } from \\"./supabase\\" // Adjust the path as needed\\nimport { AppSchema } from \\"./schema\\" // Adjust the path as needed\\n\\nexport class Database {\\n  // We expose the PowerSync and Supabase instances for easy access elsewhere in the app\\n  powersync: AbstractPowerSyncDatabase\\n  supabase: SupabaseClient = supabase\\n\\n  /**\\n   * Initialize the Database class with a new PowerSync instance\\n   */\\n  constructor() {\\n    const factory = new RNQSPowerSyncDatabaseOpenFactory({\\n      schema: AppSchema,\\n      dbFilename: \\"sqlite.db\\",\\n    })\\n    this.powersync = factory.getInstance()\\n  }\\n\\n  /**\\n   * Initialize the PowerSync instance and connect it to the Supabase backend.\\n   * This will call `fetchCredentials` on the Supabase connector to get the session token.\\n   * So if your database requires authentication, the user will need to be signed in before this is\\n   * called.\\n   */\\n  async init() {\\n    await this.powersync.init()\\n    await this.powersync.connect(supabaseConnector)\\n  }\\n\\n  async disconnect() {\\n    await this.powersync.disconnectAndClear()\\n  }\\n}\\n\\nconst database = new Database()\\n\\n// A context to provide our singleton to the rest of the app\\nconst DatabaseContext = React.createContext<Database | null>(null)\\n\\nexport const useDatabase = () => {\\n  const context: Database | null = React.useContext(DatabaseContext)\\n  if (!context) {\\n    throw new Error(\\"useDatabase must be used within a DatabaseProvider\\")\\n  }\\n\\n  return context\\n}\\n\\n// Finally, we create a provider component that initializes the database and provides it to the app\\nexport function DatabaseProvider<T>({ children }: PropsWithChildren<T>) {\\n  const { user } = useAuth()\\n  useEffect(() => {\\n    if (user) {\\n      database.init().catch(console.error)\\n    }\\n  }, [database, user])\\n  return (\\n    <DatabaseContext.Provider value={ database }>\\n      <PowerSyncContext.Provider value={ database.powersync }>\\n        { children }\\n      </PowerSyncContext.Provider>\\n    </DatabaseContext.Provider>\\n  )\\n}\\n\\n// app/app.tsx\\n\\n\\n//... other imports\\n// success-line\\n// Import the provder\\n// success-line\\nimport { DatabaseProvider } from \\"app/services/database/database\\"\\n\\n// ...\\n\\nfunction App(props: AppProps) {\\n  // ...\\n  return (\\n    <AuthProvider>\\n      // success-line\\n      {/* Add the Database Provider inside the AuthProvider */ }\\n      // success-line\\n      <DatabaseProvider>\\n        <SafeAreaProvider initialMetrics={ initialWindowMetrics }>\\n          // ...\\n        </SafeAreaProvider>\\n        // success-line\\n      </DatabaseProvider>\\n    </AuthProvider>\\n  )\\n}\\n\\nexport default App\\n\\nconst $container: ViewStyle = {\\n  flex: 1,\\n}\\n\\n\\nconst lists = usePowerSyncWatchedQuery<ListItemRecord>(`\\n    SELECT ${ LIST_TABLE }.*,\\n         COUNT(${ TODO_TABLE }.id) AS total_tasks,\\n         SUM(CASE WHEN ${ TODO_TABLE }.completed = true THEN 1 ELSE 0 END) AS completed_tasks\\n    FROM ${ LIST_TABLE }\\n         LEFT JOIN ${ TODO_TABLE } ON ${ LIST_TABLE }.id = ${ TODO_TABLE }.list_id\\n    GROUP BY ${ LIST_TABLE }.id;\\n  `);\\n\\nconst deleteList = useCallback(async (id: string) => {\\n  console.log(\'Deleting list\', id)\\n  return powersync.execute(`DELETE FROM ${ LIST_TABLE } WHERE id = ?`, [id])\\n}, [powersync])\\n\\n// app/components/SignOutButton.tsx\\n\\n//...other imports\\nimport { useDatabase } from \\"app/services/database/database\\"\\n\\n// ...\\nexport const SignOutButton = observer(function SignOutButton(props: SignOutButtonProps) {\\n  // ...\\n\\n  const { signOut } = useAuth()\\n  // success-line\\n  const { powersync } = useDatabase()\\n\\n  // success-line\\n  const handleSignOut = async () => {  // make this async\\n    // success-line\\n    await powersync.disconnectAndClear()\\n    await signOut()\\n  }\\n\\n  return (\\n    <View style={ $styles }>\\n      <Button text=\\"Sign Out\\" onPress={ handleSignOut }/>\\n    </View>\\n  )\\n})\\n\\n\\nnpx expo add expo-crypto\\n\\n// app/services/database/use-lists.ts\\nimport { usePowerSyncWatchedQuery } from \\"@powersync/react-native\\"\\nimport { useAuth } from \\"app/services/database/use-auth\\"\\nimport { useCallback } from \\"react\\"\\nimport { useDatabase } from \\"app/services/database/database\\"\\nimport { LIST_TABLE, ListRecord, TODO_TABLE } from \\"app/services/database/schema\\"\\nimport { randomUUID } from \'expo-crypto\'\\n\\n// Extend the base type with the calculated fields from our query  \\nexport type ListItemRecord = ListRecord & { total_tasks: number; completed_tasks: number }\\n\\nexport const useLists = () => {\\n  // Get the current user from the auth context \\n  const { user } = useAuth()\\n  // Get the database instance from the context\\n  const { powersync } = useDatabase()\\n\\n  // List fetching logic here. You can modify it as per your needs.\\n  const lists = usePowerSyncWatchedQuery<ListItemRecord>(`\\n      SELECT ${ LIST_TABLE }.*,\\n             COUNT(${ TODO_TABLE }.id) AS total_tasks,\\n             SUM(CASE WHEN ${ TODO_TABLE }.completed = true THEN 1 ELSE 0 END) as completed_tasks\\n      FROM ${ LIST_TABLE }\\n               LEFT JOIN ${ TODO_TABLE } ON ${ LIST_TABLE }.id = ${ TODO_TABLE }.list_id\\n      GROUP BY ${ LIST_TABLE }.id\\n  `)\\n\\n\\n  const createList = useCallback(async (name: string) => {\\n\\n    if (!user) {throw new Error(\\"Can\'t add list -- user is undefined\\")}\\n\\n    return powersync.execute(\\n      `\\n          INSERT INTO ${ LIST_TABLE }\\n              (id, name, created_at, owner_id)\\n          VALUES (?, ?, ?, ?)`,\\n      [randomUUID(), name, new Date().toISOString(), user?.id],\\n    )\\n  }, [user, powersync])\\n\\n  const deleteList = useCallback(async (id: string) => {\\n    console.log(\'Deleting list\', id)\\n    return powersync.execute(`DELETE\\n                             FROM ${ LIST_TABLE }\\n                             WHERE id = ?`, [id])\\n  }, [powersync])\\n\\n  return { lists, createList, deleteList }\\n}\\n\\n\\nnpx ignite-cli generate component AddList\\n\\nnpx ignite-cli generate component Lists\\n\\n// app/screens/WelcomeScreen.tsx\\nimport { NativeStackScreenProps } from \\"@react-navigation/native-stack\\"\\nimport { Lists, SignOutButton } from \\"app/components\\"\\nimport { observer } from \\"mobx-react-lite\\"\\nimport React, { FC } from \\"react\\"\\nimport { ViewStyle } from \\"react-native\\"\\nimport { SafeAreaView } from \\"react-native-safe-area-context\\"\\nimport { SignedInNavigatorParamList } from \\"../navigators\\"\\nimport { colors } from \\"../theme\\"\\n\\ninterface WelcomeScreenProps\\n  extends NativeStackScreenProps<SignedInNavigatorParamList, \\"Welcome\\"> {}\\n\\nexport const WelcomeScreen: FC<WelcomeScreenProps> = observer(function WelcomeScreen() {\\n  return (\\n    <SafeAreaView style={ $container }>\\n      <Lists/>\\n      <SignOutButton/>\\n    </SafeAreaView>\\n  )\\n})\\n\\nconst $container: ViewStyle = {\\n  flex: 1,\\n  backgroundColor: colors.palette.neutral300,\\n  display: \\"flex\\",\\n  justifyContent: \\"flex-start\\",\\n  height: \\"100%\\",\\n  flexDirection: \\"column\\",\\n}\\n\\n\\n\\n// app/components/Lists.tsx\\nimport { NavigationProp, useNavigation } from \\"@react-navigation/native\\"\\nimport { AddList, Icon, ListItem, Text } from \\"app/components\\"\\nimport { AppStackParamList } from \\"app/navigators\\"\\nimport { ListItemRecord, useLists } from \\"app/services/database/use-lists\\"\\nimport React, { useCallback } from \\"react\\"\\nimport { FlatList, TextStyle, View, ViewStyle } from \\"react-native\\"\\nimport { colors, spacing } from \\"../theme\\"\\n\\nexport function Lists() {\\n  \\n  // use our hook to fetch the lists\\n  const { lists, deleteList } = useLists()\\n  const navigation = useNavigation<NavigationProp<AppStackParamList>>()\\n\\n  // This function tells FlatList how to render each item\\n  const renderItem = useCallback(({ item }: { item: ListItemRecord }) => {\\n    return (\\n      <ListItem\\n        textStyle={ $listItemText }\\n        onPress={ () => {\\n          // Eventually  this si where we\'ll navigate to the todo, but for now we\'ll just log the list name\\n          console.log(\'Pressed: \', item.name)\\n        } }\\n        text={ `${ item.name }` }\\n        RightComponent={\\n          <View style={ $deleteListIcon }>\\n            {/* Let users delete lists */}\\n            <Icon icon={ \\"x\\" } onPress={ () => deleteList(item.id) }/>\\n          </View>\\n        }\\n      />\\n    )\\n  }, [])\\n\\n  return (\\n    <View style={ $container }>\\n      <Text preset={ \\"heading\\" }>Lists</Text>\\n      <View style={ $card }>\\n        <AddList/>\\n      </View>\\n      <View style={ [$list, $card] }>\\n        <Text preset={ \\"subheading\\" }>Your Lists</Text>\\n        <FlatList\\n          style={ $listContainer }\\n          // pass in our lists\\n          data={ lists }\\n          // pass in our renderItem function\\n          renderItem={ renderItem }\\n          keyExtractor={ (item) => item.id }\\n          ItemSeparatorComponent={ () => <View style={ $separator }/> }\\n          // show a message if the list is empty\\n          ListEmptyComponent={ <Text style={ $emptyList }>No lists found</Text> }\\n        />\\n      </View>\\n    </View>\\n  )\\n}\\n\\n// STYLES\\nconst $separator: ViewStyle = { height: 1, backgroundColor: colors.border }\\nconst $emptyList: TextStyle = {\\n  textAlign: \\"center\\",\\n  color: colors.textDim,\\n  opacity: 0.5,\\n  padding: spacing.lg,\\n}\\nconst $card: ViewStyle = {\\n  shadowColor: colors.palette.neutral800,\\n  shadowOffset: { width: 0, height: 1 },\\n  shadowRadius: 2,\\n  shadowOpacity: 0.35,\\n  borderRadius: 8,\\n}\\nconst $listContainer: ViewStyle = {\\n  backgroundColor: colors.palette.neutral100,\\n  paddingHorizontal: spacing.md,\\n  height: \\"100%\\",\\n  borderColor: colors.border,\\n  borderWidth: 1,\\n}\\nconst $list: ViewStyle = {\\n  flex: 1,\\n  marginVertical: spacing.md,\\n  backgroundColor: colors.palette.neutral200,\\n  padding: spacing.md,\\n}\\nconst $container: ViewStyle = {\\n  flex: 1,\\n  display: \\"flex\\",\\n  flexGrow: 1,\\n  padding: spacing.md,\\n}\\nconst $listItemText: TextStyle = {\\n  height: 44,\\n  width: 44,\\n}\\nconst $deleteListIcon: ViewStyle = {\\n  display: \\"flex\\",\\n  justifyContent: \\"center\\",\\n  alignItems: \\"center\\",\\n  height: 44,\\n  marginVertical: spacing.xxs,\\n}\\n\\n// app/components/AddList.tsx\\nimport { Button, Text, TextField } from \\"app/components\\"\\nimport { useLists } from \\"app/services/database/use-lists\\"\\nimport { colors, spacing } from \\"app/theme\\"\\nimport { observer } from \\"mobx-react-lite\\"\\nimport React from \\"react\\"\\nimport { Keyboard, TextStyle, View, ViewStyle } from \\"react-native\\"\\n\\n/**\\n * Display a form to add a new list\\n */\\nexport const AddList = observer(function AddList() {\\n  const [newListName, setNewListName] = React.useState(\\"\\")\\n  const [error, setError] = React.useState<string | null>(null)\\n\\n  // we use the function from  our hook to create a new list\\n  const { createList } = useLists()\\n\\n  const handleAddList = React.useCallback(async () => {\\n    if (!newListName) {\\n      Keyboard.dismiss()\\n      return\\n    }\\n    try {\\n      await createList(newListName)\\n      setNewListName(\\"\\")\\n    } catch (e: any) {\\n      setError(`Failed to create list: ${ e?.message ?? \\"unknown error\\" }`)\\n    } finally {\\n      Keyboard.dismiss()\\n    }\\n  }, [createList, newListName])\\n\\n  return (\\n    <View style={ $container }>\\n      <Text preset={ \\"subheading\\" }>Add a List</Text>\\n      <View style={ $form }>\\n        <TextField\\n          placeholder=\\"Enter a list name\\"\\n          containerStyle={ $textField }\\n          inputWrapperStyle={ $textInput }\\n          onChangeText={ setNewListName }\\n          value={ newListName }\\n          onSubmitEditing={ handleAddList }\\n        />\\n        <Button text=\\"Add List\\" style={ $button } onPress={ handleAddList }/>\\n      </View>\\n      { error && <Text style={ $error }>{ error }</Text> }\\n    </View>\\n  )\\n})\\n\\nconst $container: ViewStyle = {\\n  padding: spacing.md,\\n  backgroundColor: colors.palette.neutral200,\\n}\\n\\nconst $form: ViewStyle = {\\n  display: \\"flex\\",\\n  flexDirection: \\"row\\",\\n  alignItems: \\"center\\",\\n}\\n\\nconst $textField: ViewStyle = {\\n  flex: 1,\\n}\\n\\nconst $textInput: ViewStyle = {\\n  backgroundColor: colors.palette.neutral100,\\n}\\n\\nconst $button: ViewStyle = {\\n  marginHorizontal: spacing.xs,\\n  padding: 0,\\n  paddingHorizontal: spacing.xs,\\n  paddingVertical: 0,\\n  minHeight: 44,\\n}\\n\\nconst $error: TextStyle = {\\n  color: colors.error,\\n  marginTop: spacing.sm,\\n}\\n\\n\\n\\nnpx ignite-cli generate screen TodoList\\n\\n    // app/navigators/AppNavigator.tsx\\n    export type AppStackParamList = {\\n      Welcome: undefined\\n      Auth: undefined\\n      // success-line\\n      TodoList: { listId: string }  // add this line\\n      // IGNITE_GENERATOR_ANCHOR_APP_STACK_PARAM_LIST\\n    }\\n\\n    // ...\\n    \\n    const AppStack = observer(function AppStack() {\\n      // Fetch the user from the auth context\\n      const { signedIn } = useAuth()\\n      return (\\n        <Stack.Navigator screenOptions={ { headerShown: false, navigationBarColor: colors.background } }>\\n          <Stack.Screen name={ \\"Auth\\" } component={ AuthScreen }/>\\n          // success-line\\n          { signedIn ? (\\n            // success-line\\n            <>\\n              // success-line\\n              <Stack.Screen name=\\"Welcome\\" component={ Screens.WelcomeScreen }/>\\n              // success-line\\n              <Stack.Screen name=\\"TodoList\\" component={ Screens.TodoListScreen }/>\\n              // success-line\\n            </>\\n            // success-line\\n          ) : null }\\n          {/* IGNITE_GENERATOR_ANCHOR_APP_STACK_SCREENS */ }\\n        </Stack.Navigator>\\n      )\\n    })\\n \\n    export const AppNavigator = observer(function AppNavigator(props: NavigationProps) {\\n      // ...   \\n    })\\n\\n    // app/screens/TodoListScreen.tsx\\n    // ...\\n    \\n    export const TodoListScreen: FC<TodoListScreenProps> = function TodoListScreen({\\n      navigation,\\n      // success-line\\n      // We get the listId from the route params\\n      // success-line\\n      route: { params: {listId} }\\n    }) {\\n      return (\\n        <Screen style={ $root } preset=\\"scroll\\" safeAreaEdges={ [\\"top\\"] }>\\n          // success-line\\n          <Pressable onPress={ () => navigation.goBack() }>\\n            <Icon icon={ \\"back\\" } size={ 50 }/>\\n          </Pressable>\\n          // success-line\\n          <Text preset={ \\"heading\\" } text={ listId }/>\\n        </Screen>\\n      )\\n    }\\n    \\n    const $root: ViewStyle = {\\n      flex: 1,\\n    }\\n    \\n    const $backButton: ViewStyle = {\\n      height: 44,\\n    }\\n    \\n    \\n\\n// app/components/Lists.tsx\\n\\n// ... other imports\\nimport { NavigationProp, useNavigation } from \\"@react-navigation/native\\"\\nimport { AppStackParamList } from \\"app/navigators\\"\\n\\nexport function Lists() {\\n\\n  const { lists, deleteList } = useLists()\\n  // We use the root param list, because this component might be reusing in other screens/navigators\\n  // success-line\\n  const navigation = useNavigation<NavigationProp<AppStackParamList>>()\\n\\n  const renderItem = useCallback(({ item }: { item: ListItemRecord }) => {\\n    return <ListItem\\n      // ... other props\\n      // Navigate to the TodoList screen, passing the `listId` as a parameter\\n      onPress={ () => {\\n        // success-line\\n        navigation.navigate(\\"TodoList\\", { listId: item.id })\\n      } }\\n    />\\n  }, [])\\n\\n  return (\\n    //... component body\\n  )\\n}\\n\\n// app/services/database/use-list.ts\\n\\nimport { usePowerSyncQuery, usePowerSyncWatchedQuery } from \\"@powersync/react-native\\"\\nimport { useDatabase } from \\"app/services/database/database\\"\\nimport { LIST_TABLE, ListRecord, TODO_TABLE, TodoRecord } from \\"app/services/database/schema\\"\\nimport { useAuth } from \\"app/services/database/use-auth\\"\\nimport { useCallback } from \\"react\\"\\nimport { randomUUID } from \'expo-crypto\'\\n\\n\\nexport function useList(listId: string) {\\n  const { user } = useAuth()\\n  const { powersync } = useDatabase()\\n\\n\\n  const listRecords = usePowerSyncQuery<ListRecord>(`\\n      SELECT *\\n      FROM ${ LIST_TABLE }\\n      WHERE id = ?\\n  `, [listId])\\n\\n  // we only expect one list record\\n  const list = listRecords[0]\\n\\n\\n  const todos = usePowerSyncWatchedQuery<TodoRecord>(`\\n      SELECT *\\n      FROM ${ TODO_TABLE }\\n      WHERE list_id = ?\\n  `, [listId])\\n\\n\\n  const addTodo = useCallback(async (description: string): Promise<{ error: string | null }> => {\\n    if (!user) {\\n      throw new Error(\\"Can\'t add todo -- user is undefined\\")\\n    }\\n    try {\\n      await powersync.execute(\\n        `INSERT INTO ${ TODO_TABLE }\\n             (id, description, created_at, list_id, created_by, completed)\\n         VALUES (?, ?, ?, ?, ?, ?)`,\\n        [randomUUID(), description, new Date().toISOString(), listId, user?.id, 0],\\n      )\\n\\n      return { error: null }\\n    } catch (error: any) {\\n      return { error: `Error adding todo: ${ error?.message }` }\\n    }\\n  }, [user, powersync, listId])\\n\\n  const removeTodo = useCallback(async (id: string): Promise<{ error: string | null }> => {\\n    try {\\n      await powersync.execute(`DELETE\\n                                FROM ${ TODO_TABLE }\\n                                WHERE id = ?`, [id])\\n      return { error: null }\\n    } catch (error: any) {\\n      console.error(\\"Error removing todo\\", error)\\n      return { error: `Error removing todo: ${ error?.message }` }\\n    }\\n\\n  }, [\\n    powersync,\\n  ])\\n\\n  const setTodoCompleted = useCallback(async (id: string, completed: boolean): Promise<{ error: string | null }> => {\\n\\n    const completedAt = completed ? new Date().toISOString() : null\\n    const completedBy = completed ? user?.id : null\\n\\n    try {\\n      await powersync.execute(`\\n            UPDATE ${ TODO_TABLE }\\n            SET completed = ?, completed_at = ?, completed_by = ?\\n            WHERE id = ?\\n        `, [completed, completedAt, completedBy, id])\\n\\n      return { error: null }\\n\\n    } catch (error: any) {\\n      console.error(\'Error toggling todo\', error)\\n      return { error: `Error toggling todo: ${ error?.message }` }\\n    }\\n  }, [powersync])\\n\\n\\n  return { list, todos, addTodo, removeTodo, setTodoCompleted }\\n\\n}\\n\\n\\n// app/screens/TodoListScreen.tsx\\nimport { Button, Icon, ListItem, Screen, Text, TextField } from \\"app/components\\"\\nimport { SignedInNavigatorScreenProps } from \\"app/navigators\\"\\nimport { TodoRecord } from \\"app/services/database/schema\\"\\nimport { useList } from \\"app/services/database/use-list\\"\\nimport { colors, spacing } from \\"app/theme\\"\\nimport React, { FC, useCallback } from \\"react\\"\\nimport { FlatList, Pressable, TextStyle, View, ViewStyle } from \\"react-native\\"\\nimport { SafeAreaView } from \\"react-native-safe-area-context\\"\\n\\ninterface TodoListScreenProps extends SignedInNavigatorScreenProps<\\"TodoList\\"> {}\\n\\nexport const TodoListScreen: FC<TodoListScreenProps> = function TodoListScreen({\\n  navigation,\\n  route: { params: { listId } },\\n}) {\\n\\n  // We use the hook to get the list and todos for the list\\n  const { list, todos, addTodo, removeTodo, setTodoCompleted } = useList(listId)\\n\\n  // State for managing the new todo input and errors\\n  const [newTodo, setNewTodo] = React.useState(\\"\\")\\n  const [error, setError] = React.useState<string | null>(null)\\n\\n  // We wrap the addTodo from the hook with a bit of error handling\\n  const handleAddTodo = useCallback(async () => {\\n    const { error } = await addTodo(newTodo)\\n    if (error) {\\n      setError(error)\\n      return\\n    }\\n    setNewTodo(\\"\\")\\n  }, [newTodo])\\n\\n  // And do the same for removeTodo\\n  const handleRemoveTodo = useCallback(async (id: string) => {\\n    const { error } = await removeTodo(id)\\n    if (error) {\\n      setError(error)\\n    }\\n  }, [removeTodo, setError])\\n\\n  // We\'ll use the ListItem component to display each todo, as we did with the lists\\n  const renderItem = useCallback(({ item }: { item: TodoRecord }) => {\\n    return <ListItem\\n      containerStyle={ $listItemContainer }\\n      textStyle={ [$listItemText, item.completed && $strikeThrough] }\\n      text={ `${ item.description }` }\\n      RightComponent={ (\\n        <Pressable style={ $deleteIcon }>\\n          <Icon icon={ \\"x\\" } onPress={ () => handleRemoveTodo(item.id) }/>\\n        </Pressable>) }\\n      onPress={ () => setTodoCompleted(item.id, !item.completed) }\\n    />\\n  }, [\\n    handleRemoveTodo,\\n  ])\\n\\n  return (\\n    <Screen style={ $root } preset=\\"fixed\\">\\n      <SafeAreaView style={ $header } edges={ [\\"top\\"] }>\\n        <Pressable onPress={ () => navigation.goBack() }>\\n          <Icon icon={ \\"back\\" } size={ 44 }/>\\n        </Pressable>\\n        <Text style={ $listName } preset={ \\"heading\\" } text={ list?.name }/>\\n      </SafeAreaView>\\n      <View style={ $addTodoContainer }>\\n        <Text preset={ \\"subheading\\" }>Add a list</Text>\\n        <View style={ $form }>\\n          <TextField\\n            placeholder=\\"New todo...\\"\\n            containerStyle={ $textField }\\n            inputWrapperStyle={ $textInput }\\n            onChangeText={ setNewTodo }\\n            value={ newTodo }/>\\n          <Button text=\\"ADD\\" style={ $button } onPress={ handleAddTodo }/>\\n        </View>\\n        { error && <Text style={ $error }>{ error }</Text> }\\n      </View>\\n      <View style={ $container }>\\n        <FlatList\\n          data={ todos }\\n          renderItem={ renderItem }\\n          ItemSeparatorComponent={ () => <View style={ $separator }/> }\\n          ListEmptyComponent={ <Text style={ $emptyList }>List is Empty</Text> }\\n        />\\n      </View>\\n    </Screen>\\n  )\\n}\\n\\nconst $root: ViewStyle = {\\n  flex: 1,\\n}\\nconst $listItemContainer: ViewStyle = {\\n  alignItems: \\"center\\",\\n}\\n\\nconst $strikeThrough: TextStyle = { textDecorationLine: \\"line-through\\" }\\n\\nconst $form: ViewStyle = {\\n  display: \\"flex\\",\\n  flexDirection: \\"row\\",\\n  alignItems: \\"center\\",\\n}\\n\\nconst $separator: ViewStyle = { height: 1, backgroundColor: colors.border }\\n\\nconst $emptyList: TextStyle = {\\n  color: colors.textDim,\\n  opacity: 0.5,\\n  padding: spacing.lg,\\n  fontSize: 24,\\n}\\n\\nconst $textField: ViewStyle = {\\n  flex: 1,\\n}\\n\\nconst $textInput: ViewStyle = {\\n  backgroundColor: colors.palette.neutral100,\\n}\\n\\n\\nconst $button: ViewStyle = {\\n  marginHorizontal: spacing.xs,\\n  padding: 0,\\n  paddingHorizontal: spacing.xs,\\n  paddingVertical: 0,\\n}\\n\\nconst $addTodoContainer: ViewStyle = {\\n  padding: spacing.md,\\n  backgroundColor: colors.palette.neutral300,\\n}\\nconst $header: ViewStyle = {\\n  display: \\"flex\\",\\n  flexDirection: \\"row\\",\\n  alignItems: \\"center\\",\\n  backgroundColor: colors.palette.secondary200,\\n  paddingBottom: spacing.md,\\n}\\n\\nconst $listName: TextStyle = {\\n  marginLeft: spacing.sm,\\n  flex: 1,\\n}\\n\\nconst $error: TextStyle = {\\n  color: colors.error,\\n  marginTop: spacing.sm,\\n}\\n\\nconst $container: ViewStyle = {\\n  padding: spacing.md,\\n}\\n\\nconst $listItemText: TextStyle = {\\n  height: 44,\\n  verticalAlign: \\"middle\\"\\n}\\n\\nconst $deleteIcon: ViewStyle = {\\n  display: \\"flex\\",\\n  justifyContent: \\"center\\",\\n  alignItems: \\"center\\",\\n  height: 44,\\n  marginVertical: spacing.xxs,\\n}\\n\\n\\n","lastUpdated":"29 seconds ago","title":"PowerSync and Supabase for Local-First Data Management","publish_date":"2024-03-22","doc_name":"LocalFirstDataWithPowerSync.md"},{"author":"Dan Edwards","content":"curl -Ls \\"https://get.maestro.mobile.dev\\" | bash\\n\\nbrew tap facebook/fb\\nbrew install idb-companion\\n\\n#flow: Login\\n#intent:\\n# Open up our app and use the default credentials to login\\n# and navigate to the demo screen\\n\\nappId: com.maestroapp # the app id of the app we want to test\\n# You can find the appId of an Ignite app in the `app.json` file\\n# as the \\"package\\" under the \\"android\\" section and \\"bundleIdentifier\\" under the \\"ios\\" section\\n---\\n- clearState # clears the state of our app (navigation and authentication)\\n- launchApp # launches the app\\n- assertVisible: \\"Sign In\\"\\n- tapOn:\\n    text: \\"Tap to sign in!\\"\\n- assertVisible: \\"Your app, almost ready for launch!\\"\\n- tapOn:\\n    text: \\"Let\'s go!\\"\\n- assertVisible: \\"Components to jump start your project!\\"\\n\\ncd .maestro\\nmaestro test Login.yaml\\n\\n    \u2551  > Flow\\n        Running on iPhone 11 - iOS 16.2 - 5A269AA1-2704-429B-BF30-D6965060E03E\\n    \u2551    \u2705  Clear state of com.maestroapp\\n    \u2551    \u2705  Launch app \\"com.maestroapp\\"\\n    \u2551    \u2705  Assert that \\"Sign In\\" is visible\\n    \u2551    \u2705  Tap on \\"Tap to sign in!\\"\\n    \u2551    \u2705  Assert that \\"Your app, almost ready for launch!\\" is visible\\n    \u2551    \u2705  Tap on \\"Let\'s go!\\"\\n    \u2551    \u2705  Assert that \\"Components to jump start your project!\\" is visible\\n\\n# flow: run the login flow and then navigate to the demo podcast list screen, favorite a podcast, and then switch the list to only be favorites.\\n\\nappId: com.maestroapp\\nenv:\\n  TITLE: \\"RNR 257 - META RESPONDS! How can we improve React Native, part 2\\"\\n  FAVORITES_TEXT: \\"Switch on to only show favorites\\"\\n\\n---\\n- runFlow: Login.yaml\\n- tapOn: \\"Podcast, tab, 3 of 4\\"\\n- assertVisible: \\"React Native Radio episodes\\"\\n- tapOn:\\n    text: ${FAVORITES_TEXT}\\n- assertVisible: \\"This looks a bit empty\\"\\n- tapOn:\\n    text: ${FAVORITES_TEXT}\\n- scrollUntilVisible:\\n    element:\\n      text: ${TITLE}\\n    direction: DOWN\\n    timeout: 50000\\n    speed: 40\\n    visibilityPercentage: 100\\n- longPressOn: ${TITLE}\\n- scrollUntilVisible:\\n    element:\\n      text: ${FAVORITES_TEXT}\\n    direction: UP\\n    timeout: 50000\\n    speed: 40\\n    visibilityPercentage: 100\\n- tapOn:\\n    text: ${FAVORITES_TEXT}\\n- assertVisible: ${TITLE}\\n\\n","lastUpdated":"3 months ago","title":"Maestro Setup","publish_date":"2023-02-01","doc_name":"MaestroSetup.md"},{"author":"Frank Calise","content":"npx ignite-cli new PizzaApp --workflow=cng --yes\\ncd PizzaApp\\n\\nyarn remove @react-native-async-storage/async-storage\\nyarn add react-native-mmkv\\nyarn prebuild\\n\\n// error-line\\nimport AsyncStorage from \\"@react-native-async-storage/async-storage\\";\\n// success-line\\nimport { MMKV } from \\"react-native-mmkv\\";\\n// success-line\\nexport const storage = new MMKV();\\n\\n/**\\n * Loads a string from storage.\\n *\\n * @param key The key to fetch.\\n */\\n// error-line\\nexport async function loadString(key: string): Promise<string | null> {\\n// success-line\\nexport function loadString(key: string): string | null {\\n  try {\\n    // error-line\\n    return await AsyncStorage.getItem(key);\\n    // success-line\\n    return storage.getString(key);\\n  } catch {\\n    // not sure why this would fail... even reading the RN docs I\'m unclear\\n    return null;\\n  }\\n}\\n\\n/**\\n * Saves a string to storage.\\n *\\n * @param key The key to fetch.\\n * @param value The value to store.\\n */\\n// error-line\\nexport async function saveString(key: string, value: string): Promise<boolean> {\\n// success-line\\nexport function saveString(key: string, value: string): boolean {\\n  try {\\n    // error-line\\n    await AsyncStorage.setItem(key, value);\\n    // success-line\\n    storage.set(key, value);\\n    return true;\\n  } catch {\\n    return false;\\n  }\\n}\\n\\n/**\\n * Loads something from storage and runs it thru JSON.parse.\\n *\\n * @param key The key to fetch.\\n */\\n// error-line\\nexport async function load(key: string): Promise<unknown | null> {\\n// success-line\\nexport function load(key: string): unknown | null {\\n  try {\\n    // error-line\\n    const almostThere = await AsyncStorage.getItem(key)\\n    // success-line\\n    const almostThere = storage.getString(key);\\n    return JSON.parse(almostThere);\\n  } catch {\\n    return null;\\n  }\\n}\\n\\n/**\\n * Saves an object to storage.\\n *\\n * @param key The key to fetch.\\n * @param value The value to store.\\n */\\n// error-line\\nexport async function save(key: string, value: unknown): Promise<boolean> {\\n// success-line\\nexport function save(key: string, value: unknown): boolean {\\n  try {\\n    // error-line\\n    await AsyncStorage.setItem(key, JSON.stringify(value));\\n    // success-line\\n    saveString(key, JSON.stringify(value));\\n    return true;\\n  } catch {\\n    return false;\\n  }\\n}\\n\\n/**\\n * Removes something from storage.\\n *\\n * @param key The key to kill.\\n */\\n// error-line\\nexport async function remove(key: string): Promise<void> {\\n// success-line\\nexport function remove(key: string): void {\\n  try {\\n    // error-line\\n    await AsyncStorage.removeItem(key);\\n    // success-line\\n    storage.delete(key);\\n  } catch {}\\n}\\n\\n/**\\n * Burn it all to the ground.\\n */\\n// error-line\\nexport async function clear(): Promise<void> {\\n// success-line\\nexport function clear(): void {\\n  try {\\n    // error-line\\n    await AsyncStorage.clear();\\n    // success-line\\n    storage.clearAll();\\n  } catch {}\\n}\\n\\nimport {\\n  storage,\\n  load,\\n  loadString,\\n  save,\\n  saveString,\\n  clear,\\n  remove,\\n} from \\"./storage\\";\\n\\nconst VALUE_OBJECT = { x: 1 };\\nconst VALUE_STRING = JSON.stringify(VALUE_OBJECT);\\n\\ndescribe(\\"MMKV Storage\\", () => {\\n  beforeEach(() => {\\n    storage.clearAll();\\n    storage.set(\\"string\\", \\"string\\");\\n    storage.set(\\"object\\", JSON.stringify(VALUE_OBJECT));\\n  });\\n\\n  it(\\"should be defined\\", () => {\\n    expect(storage).toBeDefined();\\n  });\\n\\n  it(\\"should have default keys\\", () => {\\n    expect(storage.getAllKeys()).toEqual([\\"string\\", \\"object\\"]);\\n  });\\n\\n  it(\\"should load data\\", () => {\\n    expect(load(\\"object\\")).toEqual(VALUE_OBJECT);\\n    expect(loadString(\\"object\\")).toEqual(VALUE_STRING);\\n\\n    expect(load(\\"string\\")).toEqual(\\"string\\");\\n    expect(loadString(\\"string\\")).toEqual(\\"string\\");\\n  });\\n\\n  it(\\"should save strings\\", () => {\\n    saveString(\\"string\\", \\"new string\\");\\n    expect(loadString(\\"string\\")).toEqual(\\"new string\\");\\n  });\\n\\n  it(\\"should save objects\\", () => {\\n    save(\\"object\\", { y: 2 });\\n    expect(load(\\"object\\")).toEqual({ y: 2 });\\n    save(\\"object\\", { z: 3, also: true });\\n    expect(load(\\"object\\")).toEqual({ z: 3, also: true });\\n  });\\n\\n  it(\\"should save strings and objects\\", () => {\\n    saveString(\\"object\\", \\"new string\\");\\n    expect(loadString(\\"object\\")).toEqual(\\"new string\\");\\n  });\\n\\n  it(\\"should remove data\\", () => {\\n    remove(\\"object\\");\\n    expect(load(\\"object\\")).toBeUndefined();\\n    expect(storage.getAllKeys()).toEqual([\\"string\\"]);\\n\\n    remove(\\"string\\");\\n    expect(load(\\"string\\")).toBeUndefined();\\n    expect(storage.getAllKeys()).toEqual([]);\\n  });\\n\\n  it(\\"should clear all data\\", () => {\\n    expect(storage.getAllKeys()).toEqual([\\"string\\", \\"object\\"]);\\n    clear();\\n    expect(storage.getAllKeys()).toEqual([]);\\n  });\\n});\\n\\n","lastUpdated":"4 weeks ago","title":"Migrating to MMKV","publish_date":"2022-12-28","doc_name":"MigratingToMMKV.md"},{"author":"Yulian Glukhenko","content":"sdk.dir=/Users/path/to/sdk\\nndk.dir=/Users/path/to/ndk\\n\\nsdk.dir=/Users/~Usernamehere~/Library/Android/sdk\\nndk.dir=/Users/~Usernamehere~/Library/Android/sdk/ndk/21.4.7075529\\n\\narch -x86_64 ./gradlew :ReactAndroid:installArchives --no-daemon\\n\\n","lastUpdated":"9 weeks ago","title":"Patching/Building Android .aar From Source","publish_date":"2022-10-09","doc_name":"PatchingBuildingAndroid.md"},{"author":"Frank Calise","content":"npx ignite-cli@latest new PizzaApp --workflow=prebuild --yes\\n\\nnpm install -g eas-cli\\n\\nbrew install cocoapods fastlane\\n\\nyarn add expo-dev-client\\n\\neas init\\n\\nWarning: Your project uses dynamic app configuration, and the EAS project ID can\'t automatically be added to it.\\nhttps://docs.expo.dev/workflow/configuration/#dynamic-configuration-with-appconfigjs\\n\\nTo complete the setup process, set \\"extra.eas.projectId\\" in your app.config.ts or app.json:\\n\\n{\\n  \\"expo\\": {\\n    \\"extra\\": {\\n      \\"eas\\": {\\n        \\"projectId\\": \\"...id here...\\"\\n      }\\n    }\\n  }\\n}\\n\\neas build:configure\\n\\n{\\n  \\"cli\\": {\\n    \\"version\\": \\">= 0.60.0\\"\\n  },\\n  \\"build\\": {\\n    \\"development\\": {\\n      \\"developmentClient\\": true,\\n      \\"distribution\\": \\"internal\\"\\n    },\\n    \\"preview\\": {\\n      \\"developmentClient\\": true,\\n      \\"ios\\": {\\n        \\"simulator\\": true\\n      }\\n    },\\n    \\"production\\": {}\\n  },\\n  \\"submit\\": {\\n    \\"production\\": {}\\n  }\\n}\\n\\neas build --profile preview\\n\\neas build --profile preview --local\\n\\nEAS_LOCAL_BUILD_ARTIFACTS_DIR=build eas build --profile preview --local\\n\\n--\\"start\\": \\"expo start\\"\\n++\\"start\\": \\"expo start --dev-client\\"\\n\\n","lastUpdated":"9 weeks ago","title":"Prepping Ignite for EAS Build","publish_date":"2023-12-04","doc_name":"PrepForEASBuild.md"},{"author":"Frank Calise","content":"npx ignite-cli@latest new PizzaApp --remove-demo --workflow=cng --yes\\ncd PizzaApp\\n\\nnpx expo install react-native-vision-camera\\n\\n\\"plugins\\": [\\n  \\"expo-localization\\",\\n  [\\n    \\"expo-build-properties\\",\\n    {\\n      \\"ios\\": {\\n        \\"newArchEnabled\\": false\\n      },\\n      \\"android\\": {\\n        \\"newArchEnabled\\": false\\n      }\\n    }\\n  ],\\n  [\\n    \\"react-native-vision-camera\\",\\n    {\\n      \\"cameraPermissionText\\": \\"$(PRODUCT_NAME) needs access to your Camera.\\",\\n      \\"enableCodeScanner\\": true\\n    }\\n  ]\\n],\\n\\nnpx expo prebuild\\nyarn android\\n\\nimport { observer } from \\"mobx-react-lite\\";\\nimport React, { FC } from \\"react\\";\\nimport { AppStackScreenProps } from \\"../navigators\\";\\nimport { Camera, CameraPermissionStatus } from \\"react-native-vision-camera\\";\\nimport { Linking, View, ViewStyle } from \\"react-native\\";\\nimport { Button, Screen, Text } from \\"app/components\\";\\n\\ninterface WelcomeScreenProps extends AppStackScreenProps<\\"Welcome\\"> {}\\n\\nexport const WelcomeScreen: FC<WelcomeScreenProps> = observer(\\n  function WelcomeScreen(_props) {\\n    const [cameraPermission, setCameraPermission] =\\n      React.useState<CameraPermissionStatus>();\\n\\n    React.useEffect(() => {\\n      Camera.getCameraPermissionStatus().then(setCameraPermission);\\n    }, []);\\n\\n    const promptForCameraPermissions = React.useCallback(async () => {\\n      const permission = await Camera.requestCameraPermission();\\n      Camera.getCameraPermissionStatus().then(setCameraPermission);\\n\\n      if (permission === \\"denied\\") await Linking.openSettings();\\n    }, [cameraPermission]);\\n\\n    if (cameraPermission == null) {\\n      // still loading\\n      return null;\\n    }\\n\\n    return (\\n      <Screen contentContainerStyle={$container}>\\n        <View>\\n          <Text>\\n            Camera Permission:{\\" \\"}\\n            {cameraPermission === null ? \\"Loading...\\" : cameraPermission}\\n          </Text>\\n          {cameraPermission !== \\"granted\\" && (\\n            <Button\\n              onPress={promptForCameraPermissions}\\n              text=\\"Request Camera Permission\\"\\n            />\\n          )}\\n        </View>\\n      </Screen>\\n    );\\n  }\\n);\\n\\nconst $container: ViewStyle = {\\n  flex: 1,\\n  padding: 20,\\n  justifyContent: \\"space-evenly\\",\\n};\\n\\nnpx ignite-cli@next g model CodeStore\\nnpx ignite-cli@next g screen Codes\\n\\nimport { Instance, SnapshotIn, SnapshotOut, types } from \\"mobx-state-tree\\";\\nimport { withSetPropAction } from \\"./helpers/withSetPropAction\\";\\n\\n/**\\n * Model description here for TypeScript hints.\\n */\\nexport const CodeStoreModel = types\\n  .model(\\"CodeStore\\")\\n  .props({\\n    codes: types.array(types.string),\\n  })\\n  .actions(withSetPropAction)\\n  .actions((self) => ({\\n    addCode(code: string) {\\n      self.codes.push(code);\\n    },\\n  }));\\n\\nexport interface CodeStore extends Instance<typeof CodeStoreModel> {}\\nexport interface CodeStoreSnapshotOut\\n  extends SnapshotOut<typeof CodeStoreModel> {}\\nexport interface CodeStoreSnapshotIn\\n  extends SnapshotIn<typeof CodeStoreModel> {}\\nexport const createCodeStoreDefaultModel = () =>\\n  types.optional(CodeStoreModel, {});\\n\\nimport React, { FC } from \\"react\\";\\nimport { observer } from \\"mobx-react-lite\\";\\nimport { View, ViewStyle } from \\"react-native\\";\\nimport { AppStackScreenProps } from \\"app/navigators\\";\\nimport { Button, Screen, Text } from \\"app/components\\";\\nimport { useNavigation } from \\"@react-navigation/native\\";\\nimport { useStores } from \\"app/models\\";\\nimport { spacing } from \\"app/theme\\";\\n\\ninterface CodesScreenProps extends AppStackScreenProps<\\"Codes\\"> {}\\n\\nexport const CodesScreen: FC<CodesScreenProps> = observer(\\n  function CodesScreen() {\\n    // Pull in one of our MST stores\\n    const { codeStore } = useStores();\\n\\n    // Pull in navigation via hook\\n    const navigation = useNavigation();\\n    return (\\n      <Screen\\n        safeAreaEdges={[\\"top\\", \\"bottom\\"]}\\n        style={$root}\\n        preset=\\"scroll\\"\\n        contentContainerStyle={$container}\\n      >\\n        <View>\\n          <Text text={`${codeStore.codes.length} codes scanned`} />\\n\\n          {codeStore.codes.map((code, index) => (\\n            <Text key={`code-index-${index}`} text={code} />\\n          ))}\\n        </View>\\n\\n        <Button text=\\"Go back\\" onPress={() => navigation.goBack()} />\\n      </Screen>\\n    );\\n  }\\n);\\n\\nconst $root: ViewStyle = {\\n  flex: 1,\\n};\\n\\nconst $container: ViewStyle = {\\n  flex: 1,\\n  justifyContent: \\"space-between\\",\\n  paddingHorizontal: spacing.md,\\n};\\n\\nimport { observer } from \\"mobx-react-lite\\";\\nimport React, { FC } from \\"react\\";\\nimport { AppStackScreenProps } from \\"../navigators\\";\\n// success-line-start\\nimport {\\n  Camera,\\n  CameraPermissionStatus,\\n  useCameraDevice,\\n  useCodeScanner,\\n} from \\"react-native-vision-camera\\";\\nimport {\\n  Alert,\\n  Linking,\\n  StyleSheet,\\n  TouchableOpacity,\\n  View,\\n  ViewStyle,\\n} from \\"react-native\\";\\nimport { Button, Icon, Screen, Text } from \\"app/components\\";\\nimport { useSafeAreaInsets } from \\"react-native-safe-area-context\\";\\nimport { useStores } from \\"app/models\\";\\nimport { spacing } from \\"app/theme\\";\\n// success-line-end\\n\\ninterface WelcomeScreenProps extends AppStackScreenProps<\\"Welcome\\"> {}\\n\\nexport const WelcomeScreen: FC<WelcomeScreenProps> = observer(\\n  function WelcomeScreen(_props) {\\n    const [cameraPermission, setCameraPermission] =\\n      React.useState<CameraPermissionStatus>();\\n    // success-line-start\\n    const [showScanner, setShowScanner] = React.useState(false);\\n    const [isActive, setIsActive] = React.useState(false);\\n\\n    const { codeStore } = useStores();\\n    // success-line-end\\n\\n    React.useEffect(() => {\\n      Camera.getCameraPermissionStatus().then(setCameraPermission);\\n    }, []);\\n\\n    const promptForCameraPermissions = React.useCallback(async () => {\\n      const permission = await Camera.requestCameraPermission();\\n      Camera.getCameraPermissionStatus().then(setCameraPermission);\\n\\n      if (permission === \\"denied\\") await Linking.openSettings();\\n    }, [cameraPermission]);\\n\\n    // success-line-start\\n    const codeScanner = useCodeScanner({\\n      codeTypes: [\\"qr\\", \\"ean-13\\"],\\n      onCodeScanned: (codes) => {\\n        setIsActive(false);\\n\\n        codes.every((code) => {\\n          if (code.value) {\\n            codeStore.addCode(code.value);\\n          }\\n          return true;\\n        });\\n\\n        setShowScanner(false);\\n        Alert.alert(\\"Code scanned!\\");\\n      },\\n    });\\n\\n    const device = useCameraDevice(\\"back\\");\\n\\n    const { right, top } = useSafeAreaInsets();\\n    // success-line-end\\n\\n    if (cameraPermission == null) {\\n      // still loading\\n      return null;\\n    }\\n\\n    // success-line-start\\n    if (showScanner && device) {\\n      return (\\n        <View style={$cameraContainer}>\\n          <Camera\\n            isActive={isActive}\\n            device={device}\\n            codeScanner={codeScanner}\\n            style={StyleSheet.absoluteFill}\\n            photo\\n            video\\n          />\\n          <View\\n            style={[\\n              $cameraButtons,\\n              { right: right + spacing.md, top: top + spacing.md },\\n            ]}\\n          >\\n            <TouchableOpacity\\n              style={$closeCamera}\\n              onPress={() => setShowScanner(false)}\\n            >\\n              <Icon icon=\\"x\\" size={50} />\\n            </TouchableOpacity>\\n          </View>\\n        </View>\\n      );\\n    }\\n    // success-line-end\\n\\n    return (\\n      <Screen contentContainerStyle={$container}>\\n        <View>\\n          <Text>\\n            Camera Permission:{\\" \\"}\\n            {cameraPermission === null ? \\"Loading...\\" : cameraPermission}\\n          </Text>\\n          {cameraPermission !== \\"granted\\" && (\\n            <Button\\n              onPress={promptForCameraPermissions}\\n              text=\\"Request Camera Permission\\"\\n            />\\n          )}\\n        </View>\\n        // success-line-start\\n        <View>\\n          <Button\\n            onPress={() => {\\n              setIsActive(true);\\n              setShowScanner(true);\\n            }}\\n            text=\\"Scan Barcodes\\"\\n          />\\n        </View>\\n        <View>\\n          <Button\\n            onPress={() => _props.navigation.navigate(\\"Codes\\")}\\n            text={`View Scans (${codeStore.codes.length})`}\\n          />\\n          // success-line-end\\n        </View>\\n      </Screen>\\n    );\\n  }\\n);\\n\\nconst $container: ViewStyle = {\\n  flex: 1,\\n  padding: 20,\\n  justifyContent: \\"space-evenly\\",\\n};\\n\\n// success-line-start\\nconst $cameraContainer: ViewStyle = {\\n  flex: 1,\\n};\\n\\nconst $cameraButtons: ViewStyle = {\\n  position: \\"absolute\\",\\n};\\n\\nconst $closeCamera: ViewStyle = {\\n  marginBottom: spacing.md,\\n  width: 100,\\n  height: 100,\\n  borderRadius: 100 / 2,\\n  backgroundColor: \\"rgba(140, 140, 140, 0.3)\\",\\n  justifyContent: \\"center\\",\\n  alignItems: \\"center\\",\\n};\\n// success-line-end\\n\\n","lastUpdated":"4 weeks ago","title":"React Native Vision Camera","publish_date":"2023-10-23","doc_name":"ReactNativeVisionCamera.md"},{"author":"Justin Poliachik","content":"npx ignite-cli new ReduxApp --yes --removeDemo\\n\\nyarn add @reduxjs/toolkit\\nyarn add react-redux\\n\\nimport { configureStore } from \\"@reduxjs/toolkit\\";\\nimport { TypedUseSelectorHook, useDispatch, useSelector } from \\"react-redux\\";\\nimport counterReducer from \\"./counterSlice\\";\\n\\nexport const store = configureStore({\\n  reducer: {\\n    counter: counterReducer,\\n    // add other state here\\n  },\\n});\\n\\n// Infer the `RootState` and `AppDispatch` types from the store itself\\nexport type RootState = ReturnType<typeof store.getState>;\\nexport type AppDispatch = typeof store.dispatch;\\n\\n// Use throughout app instead of plain `useDispatch` and `useSelector` for type safety\\ntype DispatchFunc = () => AppDispatch;\\nexport const useAppDispatch: DispatchFunc = useDispatch;\\nexport const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;\\n\\nimport { createSlice } from \\"@reduxjs/toolkit\\";\\n\\n// Define a type for the slice state\\ninterface CounterState {\\n  value: number;\\n}\\n\\n// Define the initial state using that type\\nconst initialState: CounterState = {\\n  value: 0,\\n};\\n\\nexport const counterSlice = createSlice({\\n  name: \\"counter\\",\\n  // `createSlice` will infer the state type from the `initialState` argument\\n  initialState,\\n  reducers: {\\n    increment: (state) => {\\n      state.value += 1;\\n    },\\n    decrement: (state) => {\\n      state.value -= 1;\\n    },\\n  },\\n});\\n\\nexport const { increment, decrement } = counterSlice.actions;\\nexport default counterSlice.reducer;\\n\\nimport { Provider } from \\"react-redux\\";\\nimport { store } from \\"./store/store\\";\\n\\n...\\n\\n<Provider store={store}>\\n  <AppNavigator\\n    linking={linking}\\n    initialState={initialNavigationState}\\n    onStateChange={onNavigationStateChange}\\n  />\\n</Provider>\\n\\nimport React, { FC } from \\"react\\";\\nimport { View, ViewStyle } from \\"react-native\\";\\nimport { Button, Text } from \\"app/components\\";\\nimport { AppStackScreenProps } from \\"../navigators\\";\\nimport { colors } from \\"../theme\\";\\nimport { useSafeAreaInsetsStyle } from \\"../utils/useSafeAreaInsetsStyle\\";\\nimport { useAppDispatch, useAppSelector } from \\"app/store/store\\";\\nimport { decrement, increment } from \\"app/store/counterSlice\\";\\n\\ninterface WelcomeScreenProps extends AppStackScreenProps<\\"Welcome\\"> {}\\n\\nexport const WelcomeScreen: FC<WelcomeScreenProps> = () => {\\n  const $containerInsets = useSafeAreaInsetsStyle([\\"top\\", \\"bottom\\"]);\\n  const count = useAppSelector((state) => state.counter.value);\\n  const dispatch = useAppDispatch();\\n  return (\\n    <View style={[$containerInsets, $container]}>\\n      <Button text=\\"Increment\\" onPress={() => dispatch(increment())} />\\n      <Button text=\\"Decrement\\" onPress={() => dispatch(decrement())} />\\n      <Text text={`Count: ${count}`} />\\n    </View>\\n  );\\n};\\n\\nconst $container: ViewStyle = {\\n  flex: 1,\\n  backgroundColor: colors.background,\\n};\\n\\nyarn add redux-persist\\n\\nimport { combineReducers, configureStore } from \\"@reduxjs/toolkit\\";\\nimport counterReducer from \\"./counterSlice\\";\\nimport { TypedUseSelectorHook, useDispatch, useSelector } from \\"react-redux\\";\\nimport { persistStore, persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from \\"redux-persist\\";\\nimport AsyncStorage from \\"@react-native-async-storage/async-storage\\";\\n\\nconst persistConfig = {\\n  key: \\"root\\",\\n  version: 1,\\n  storage: AsyncStorage,\\n};\\n\\nconst rootReducer = combineReducers({\\n  counter: counterReducer,\\n});\\n\\nconst persistedReducer = persistReducer(persistConfig, rootReducer);\\n\\nexport const store = configureStore({\\n  reducer: persistedReducer,\\n  middleware: (getDefaultMiddleware) =>\\n    getDefaultMiddleware({\\n      serializableCheck: {\\n        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],\\n      },\\n    }),\\n});\\n\\nexport const persistor = persistStore(store);\\n\\n// Infer the `RootState` and `AppDispatch` types from the store itself\\nexport type RootState = ReturnType<typeof store.getState>;\\nexport type AppDispatch = typeof store.dispatch;\\n\\n// Use throughout app instead of plain `useDispatch` and `useSelector` for type safety\\ntype DispatchFunc = () => AppDispatch;\\nexport const useAppDispatch: DispatchFunc = useDispatch;\\nexport const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;\\n\\n...\\n\\nimport { persistor, store } from \\"./store/store\\"\\nimport { PersistGate } from \\"redux-persist/integration/react\\"\\n\\n...\\n\\nfunction App(props: AppProps) {\\n  const { hideSplashScreen } = props\\n...\\n  const onBeforeLiftPersistGate = () => {\\n    // If your initialization scripts run very fast, it\'s good to show the splash screen for just a bit longer to prevent flicker.\\n    // Slightly delaying splash screen hiding for better UX; can be customized or removed as needed,\\n    // Note: (vanilla Android) The splash-screen will not appear if you launch your app via the terminal or Android Studio. Kill the app and launch it normally by tapping on the launcher icon. https://stackoverflow.com/a/69831106\\n    // Note: (vanilla iOS) You might notice the splash-screen logo change size. This happens in debug/development mode. Try building the app for release.\\n    setTimeout(hideSplashScreen, 500)\\n  }\\n...\\n  return (\\n    <SafeAreaProvider initialMetrics={initialWindowMetrics}>\\n      <ErrorBoundary catchErrors={Config.catchErrors}>\\n        <GestureHandlerRootView style={$container}>\\n          <Provider store={store}>\\n            <PersistGate\\n              loading={null}\\n              onBeforeLift={onBeforeLiftPersistGate}\\n              persistor={persistor}\\n            >\\n              <AppNavigator\\n                linking={linking}\\n                initialState={initialNavigationState}\\n                onStateChange={onNavigationStateChange}\\n              />\\n            </PersistGate>\\n          </Provider>\\n        </GestureHandlerRootView>\\n      </ErrorBoundary>\\n    </SafeAreaProvider>\\n  )\\n}\\n\\nexport default App\\n\\n","lastUpdated":"9 weeks ago","title":"Redux","publish_date":"2024-01-16","doc_name":"Redux.md"},{"author":"Justin Poliachik","content":"yarn remove mobx mobx-react-lite mobx-state-tree reactotron-mst\\n\\nrm -rf ./app/models\\n\\n--import { mst } from \\"reactotron-mst\\"\\n\\n...\\n\\nconst reactotron = Reactotron.configure({\\n  name: require(\\"../../package.json\\").name,\\n  onConnect: () => {\\n    /** since this file gets hot reloaded, let\'s clear the past logs every time we connect */\\n    Reactotron.clear()\\n  },\\n--}).use(\\n--  mst({\\n--    /** ignore some chatty `mobx-state-tree` actions  */\\n--    filter: (event) => /postProcessSnapshot|@APPLY_SNAPSHOT/.test(event.name) === false,\\n--  }),\\n--)\\n++})\\n\\n--import { observer } from \\"mobx-react-lite\\"\\n\\n--export const WelcomeScreen: FC<WelcomeScreenProps> = observer(function WelcomeScreen(props) {\\n++export const WelcomeScreen: FC<WelcomeScreenProps> = (props) => {\\n    ...\\n--})\\n++}\\n\\n--import { useStores } from \\"../models\\"\\n\\nconst AppStack = () => {\\n--  const { authenticationStore: { isAuthenticated } } = useStores()\\n++  const isAuthenticated = false // TODO: TEMPORARY VALUE - replace with alternative state management solution\\n\\n--import { observer } from \\"mobx-react-lite\\"\\n\\n--export const <%= props.pascalCaseName %> = observer(function <%= props.pascalCaseName %>(props: <%= props.pascalCaseName %>Props) {\\n++export const <%= props.pascalCaseName %> = (props: <%= props.pascalCaseName %>Props) => {\\n    ...\\n--})\\n++}\\n\\n--import { useInitialRootStore } from \\"./models\\"\\n\\n--const { rehydrated } = useInitialRootStore(() => {\\n--setTimeout(hideSplashScreen, 500)\\n--})\\n++React.useEffect(() => {\\n++    setTimeout(hideSplashScreen, 500)\\n++}, [])\\n\\n--if (!rehydrated || !isNavigationStateRestored || !areFontsLoaded) return null\\n++if (!isNavigationStateRestored || !areFontsLoaded) return null\\n\\n--import type { ApiConfig, ApiFeedResponse } from \\"./api.types\\"\\n--import type { EpisodeSnapshotIn } from \\"../../models/Episode\\"\\n++import type { ApiConfig, ApiFeedResponse, EpisodeItem } from \\"./api.types\\"\\n\\n\\n--async getEpisodes(): Promise<{ kind: \\"ok\\"; episodes: EpisodeSnapshotIn[] } | GeneralApiProblem> {\\n++async getEpisodes(): Promise<{ kind: \\"ok\\"; episodes: EpisodeItem[] } | GeneralApiProblem> {\\n// make the api call\\n\\n--// This is where we transform the data into the shape we expect for our MST model.\\n--const episodes: EpisodeSnapshotIn[] =\\n--  rawData?.items.map((raw) => ({\\n--    ...raw,\\n--  })) ?? []\\n++const episodes = rawData?.items ?? []\\n\\n","lastUpdated":"9 weeks ago","title":"Remove MobX-State-Tree","publish_date":"2024-02-05","doc_name":"RemoveMobxStateTree.md"},{"author":"Mark Rickert","content":"npx ignite-cli new PizzaApp --workflow=cng --yes\\ncd PizzaApp\\n\\nimport {\\n  withInfoPlist,\\n  withAndroidManifest,\\n  type ConfigPlugin,\\n  type AndroidConfig,\\n  type IOSConfig,\\n} from \\"@expo/config-plugins\\"\\n\\n// More info: https://developer.android.com/guide/topics/manifest/uses-feature-element\\nconst validAndroidFeatures = [\\n  \\"android.hardware.audio.low_latency\\",\\n  \\"android.hardware.audio.output\\",\\n  \\"android.hardware.audio.pro\\",\\n  \\"android.hardware.bluetooth\\",\\n  \\"android.hardware.bluetooth_le\\",\\n  \\"android.hardware.camera\\",\\n  \\"android.hardware.camera.any\\",\\n  \\"android.hardware.camera.autofocus\\",\\n  \\"android.hardware.camera.capability.manual_post_processing\\",\\n  \\"android.hardware.camera.capability.manual_sensor\\",\\n  \\"android.hardware.camera.capability.raw\\",\\n  \\"android.hardware.camera.external\\",\\n  \\"android.hardware.camera.flash\\",\\n  \\"android.hardware.camera.front\\",\\n  \\"android.hardware.camera.level.full\\",\\n  \\"android.hardware.consumerir\\",\\n  \\"android.hardware.faketouch\\",\\n  \\"android.hardware.faketouch.multitouch.distinct\\",\\n  \\"android.hardware.faketouch.multitouch.jazzhand\\",\\n  \\"android.hardware.fingerprint\\",\\n  \\"android.hardware.gamepad\\",\\n  \\"android.hardware.location\\",\\n  \\"android.hardware.location.gps\\",\\n  \\"android.hardware.location.network\\",\\n  \\"android.hardware.microphone\\",\\n  \\"android.hardware.nfc\\",\\n  \\"android.hardware.nfc.hce\\",\\n  \\"android.hardware.opengles.aep\\",\\n  \\"android.hardware.screen.landscape\\",\\n  \\"android.hardware.screen.portrait\\",\\n  \\"android.hardware.sensor.accelerometer\\",\\n  \\"android.hardware.sensor.ambient_temperature\\",\\n  \\"android.hardware.sensor.barometer\\",\\n  \\"android.hardware.sensor.compass\\",\\n  \\"android.hardware.sensor.gyroscope\\",\\n  \\"android.hardware.sensor.heartrate\\",\\n  \\"android.hardware.sensor.heartrate.ecg\\",\\n  \\"android.hardware.sensor.hifi_sensors\\",\\n  \\"android.hardware.sensor.light\\",\\n  \\"android.hardware.sensor.proximity\\",\\n  \\"android.hardware.sensor.relative_humidity\\",\\n  \\"android.hardware.sensor.stepcounter\\",\\n  \\"android.hardware.sensor.stepdetector\\",\\n  \\"android.hardware.telephony\\",\\n  \\"android.hardware.telephony.cdma\\",\\n  \\"android.hardware.telephony.gsm\\",\\n  \\"android.hardware.touchscreen\\",\\n  \\"android.hardware.touchscreen.multitouch\\",\\n  \\"android.hardware.touchscreen.multitouch.distinct\\",\\n  \\"android.hardware.touchscreen.multitouch.jazzhand\\",\\n  \\"android.hardware.type.automotive\\",\\n  \\"android.hardware.type.pc\\",\\n  \\"android.hardware.type.television\\",\\n  \\"android.hardware.type.watch\\",\\n  \\"android.hardware.usb.accessory\\",\\n  \\"android.hardware.usb.host\\",\\n  \\"android.hardware.vulkan.compute\\",\\n  \\"android.hardware.vulkan.level\\",\\n  \\"android.hardware.vulkan.version\\",\\n  \\"android.hardware.wifi\\",\\n  \\"android.hardware.wifi.direct\\",\\n] as const\\n\\n// More info: https://developer.apple.com/documentation/bundleresources/information_property_list/uirequireddevicecapabilities/\\nconst validIOSFeatures = [\\n  \\"accelerometer\\",\\n  \\"arkit\\",\\n  \\"arm64\\",\\n  \\"armv7\\",\\n  \\"auto-focus-camera\\",\\n  \\"bluetooth-le\\",\\n  \\"camera-flash\\",\\n  \\"driverkit\\",\\n  \\"front-facing-camera\\",\\n  \\"gamekit\\",\\n  \\"gps\\",\\n  \\"gyroscope\\",\\n  \\"healthkit\\",\\n  \\"iphone-ipad-minimum-performance-a12\\",\\n  \\"iphone-performance-gaming-tier\\",\\n  \\"location-services\\",\\n  \\"magnetometer\\",\\n  \\"metal\\",\\n  \\"microphone\\",\\n  \\"nfc\\",\\n  \\"opengles-1\\",\\n  \\"opengles-2\\",\\n  \\"opengles-3\\",\\n  \\"peer-peer\\",\\n  \\"sms\\",\\n  \\"still-camera\\",\\n  \\"telephony\\",\\n  \\"video-camera\\",\\n  \\"wifi\\",\\n] as const\\n\\ntype HardwareFeatureAndroid = (typeof validAndroidFeatures)[number]\\ntype HardwareFeatureIOS = (typeof validIOSFeatures)[number]\\n\\nexport const withRequiredHardware: ConfigPlugin<{\\n  ios: Array<HardwareFeatureIOS>\\n  android: Array<HardwareFeatureAndroid>\\n}> = (config, { android, ios }) => {\\n  // Add android required hardware\\n  config = withAndroidManifest(config, (config) => {\\n    config.modResults = addHardwareFeaturesToAndroidManifestManifest(config.modResults, android)\\n    return config\\n  })\\n\\n  // Add ios required hardware\\n  config = withInfoPlist(config, (config) => {\\n    config.modResults = addRequiredDeviceCapabilitiesToInfoPlist(config.modResults, ios)\\n    return config\\n  })\\n\\n  return config\\n}\\n\\nexport function addHardwareFeaturesToAndroidManifestManifest(\\n  androidManifest: AndroidConfig.Manifest.AndroidManifest,\\n  requiredFeatures: Array<HardwareFeatureAndroid>,\\n) {\\n  // Add `<uses-feature android:name=\\"android.hardware.camera.front\\" android:required=\\"true\\"/>` to the AndroidManifest.xml\\n  if (!Array.isArray(androidManifest.manifest[\\"uses-feature\\"])) {\\n    androidManifest.manifest[\\"uses-feature\\"] = []\\n  }\\n\\n  // Here we add the feature to the manifest:\\n  // loop through the array of features and add them to the manifest if they don\'t exist\\n  for (const feature of requiredFeatures) {\\n    if (\\n      !androidManifest.manifest[\\"uses-feature\\"].find((item) => item.$[\\"android:name\\"] === feature)\\n    ) {\\n      androidManifest.manifest[\\"uses-feature\\"]?.push({\\n        $: {\\n          \\"android:name\\": feature,\\n          \\"android:required\\": \\"true\\",\\n        },\\n      })\\n    }\\n  }\\n\\n  return androidManifest\\n}\\n\\nexport function addRequiredDeviceCapabilitiesToInfoPlist(\\n  infoPlist: IOSConfig.InfoPlist,\\n  requiredFeatures: Array<HardwareFeatureIOS>,\\n) {\\n  if (!infoPlist.UIRequiredDeviceCapabilities) {\\n    infoPlist.UIRequiredDeviceCapabilities = []\\n  }\\n  const existingFeatures = infoPlist.UIRequiredDeviceCapabilities as Array<HardwareFeatureIOS>\\n  for (const f of requiredFeatures) {\\n    if (!existingFeatures.includes(f)) {\\n      existingFeatures.push(f)\\n    }\\n  }\\n\\n  infoPlist.UIRequiredDeviceCapabilities = existingFeatures\\n  return infoPlist\\n}\\n\\n  return {\\n    ...config,\\n    plugins: [\\n      ...existingPlugins,\\n      require(\\"./plugins/withSplashScreen\\").withSplashScreen,\\n      require(\\"./plugins/withFlipperDisabled\\").withFlipperDisabled,\\n      // success-line-start\\n      [\\n        require(\\"./plugins/withRequiredHardware\\").withRequiredHardware,\\n        {\\n          // More info: https://developer.apple.com/documentation/bundleresources/information_property_list/uirequireddevicecapabilities/\\n          ios: [\\"front-facing-camera\\", \\"microphone\\"],\\n          // More info: https://developer.android.com/guide/topics/manifest/uses-feature-element\\n          android: [\\"android.hardware.camera.front\\", \\"android.hardware.microphone\\"],\\n        },\\n      ],\\n      // success-line-end\\n    ],\\n  }\\n\\n<key>UIRequiredDeviceCapabilities</key>\\n<array>\\n  <string>armv7</string>\\n  // success-line-start\\n  <string>front-facing-camera</string>\\n  <string>microphone</string>\\n  // success-line-end\\n</array>\\n\\n// success-line\\n<uses-feature android:name=\\"android.hardware.camera.front\\" android:required=\\"true\\"/>\\n// success-line\\n<uses-feature android:name=\\"android.hardware.microphone\\" android:required=\\"true\\"/>\\n\\n","lastUpdated":"8 weeks ago","title":"Requiring Hardware Features with Expo","publish_date":"2024-02-28","doc_name":"RequiringHardwareFeaturesWithExpo.md"},{"author":"Robin Heinze","content":"# Javascript Node CircleCI 2.0 configuration file\\n#\\n# Check https://circleci.com/docs/2.0/language-javascript/ for more details\\n#\\n\\ndefaults: &defaults\\n  docker:\\n    # Choose the version of Node you want here\\n    - image: circleci/node:10.11\\n  working_directory: ~/repo\\n\\nversion: 2\\njobs:\\n  setup:\\n    <<: *defaults\\n    steps:\\n      - checkout\\n      - restore_cache:\\n          name: Restore node modules\\n          keys:\\n            - v1-dependencies-{{ checksum \\"package.json\\" }}\\n            # fallback to using the latest cache if no exact match is found\\n            - v1-dependencies-\\n      - run:\\n          name: Install dependencies\\n          command: |\\n            yarn install\\n      - save_cache:\\n          name: Save node modules\\n          paths:\\n            - node_modules\\n          key: v1-dependencies-{{ checksum \\"package.json\\" }}\\n\\n  tests:\\n    <<: *defaults\\n    steps:\\n      - checkout\\n      - restore_cache:\\n          name: Restore node modules\\n          keys:\\n            - v1-dependencies-{{ checksum \\"package.json\\" }}\\n            # fallback to using the latest cache if no exact match is found\\n            - v1-dependencies-\\n      - run:\\n          name: Install React Native CLI and Ignite CLI\\n          command: |\\n            sudo npm i -g ignite-cli react-native-cli\\n      - run:\\n          name: Run tests\\n          command: yarn ci:test # this command will be added to/found in your package.json scripts\\n\\n  publish:\\n    <<: *defaults\\n    steps:\\n      - checkout\\n      - run: echo \\"//registry.npmjs.org/:_authToken=$NPM_TOKEN\\" >> ~/.npmrc\\n      - restore_cache:\\n          name: Restore node modules\\n          keys:\\n            - v1-dependencies-{{ checksum \\"package.json\\" }}\\n            # fallback to using the latest cache if no exact match is found\\n            - v1-dependencies-\\n      # Run semantic-release after all the above is set.\\n      - run:\\n          name: Publish to NPM\\n          command: yarn ci:publish # this will be added to your package.json scripts\\n\\nworkflows:\\n  version: 2\\n  test_and_release:\\n    jobs:\\n      - setup\\n      - tests:\\n          requires:\\n            - setup\\n      - publish:\\n          requires:\\n            - tests\\n          filters:\\n            branches:\\n              only: master\\n\\n","lastUpdated":"8 weeks ago","title":"Sample YAML for CircleCi for Ignite","publish_date":"2022-10-09","doc_name":"SampleYAMLCircleCI.md"},{"author":"Yulian Glukhenko","content":"yarn add @gorhom/bottom-sheet@^4\\n\\nyarn add react-native-reanimated react-native-gesture-handler\\n# or\\nexpo install react-native-reanimated react-native-gesture-handler\\n\\ntouch ./app/components/SelectField.tsx\\n\\nimport React, { forwardRef, Ref, useImperativeHandle } from \\"react\\";\\nimport { View, TouchableOpacity } from \\"react-native\\";\\nimport { TextField, TextFieldProps } from \\"./TextField\\";\\n\\nexport interface SelectFieldProps\\n  extends Omit<\\n    TextFieldProps,\\n    \\"ref\\" | \\"onValueChange\\" | \\"onChange\\" | \\"value\\"\\n  > {}\\nexport interface SelectFieldRef {}\\n\\nexport const SelectField = forwardRef(function SelectField(\\n  props: SelectFieldProps,\\n  ref: Ref<SelectFieldRef>\\n) {\\n  const { ...TextFieldProps } = props;\\n\\n  const disabled =\\n    TextFieldProps.editable === false || TextFieldProps.status === \\"disabled\\";\\n\\n  useImperativeHandle(ref, () => ({}));\\n\\n  return (\\n    <>\\n      <TouchableOpacity activeOpacity={1}>\\n        <View pointerEvents=\\"none\\">\\n          <TextField {...TextFieldProps} />\\n        </View>\\n      </TouchableOpacity>\\n    </>\\n  );\\n});\\n\\nimport { SelectField } from \\"../components/SelectField\\";\\n\\nfunction FavoriteNBATeamsScreen() {\\n  return (\\n    <SelectField\\n      label=\\"NBA Team(s)\\"\\n      helper=\\"Select your team(s)\\"\\n      placeholder=\\"e.g. Trail Blazers\\"\\n    />\\n  );\\n}\\n\\n<TextField\\n  {...TextFieldProps}\\n  RightAccessory={(props) => (\\n    <Icon icon=\\"caretRight\\" containerStyle={props.style} />\\n  )}\\n/>\\n\\nexport interface SelectFieldProps\\n  extends Omit<TextFieldProps, \\"ref\\" | \\"onValueChange\\" | \\"onChange\\"> {\\n  value?: string[];\\n  renderValue?: (value: string[]) => string;\\n  onSelect?: (newValue: string[]) => void;\\n  multiple?: boolean;\\n  options: { label: string; value: string }[];\\n}\\n\\n// ...\\n\\nconst {\\n  value = [],\\n  renderValue,\\n  onSelect,\\n  options = [],\\n  multiple = true,\\n  ...TextFieldProps\\n} = props;\\n\\nconst valueString =\\n  renderValue?.(value) ??\\n  value\\n    .map((v) => options.find((o) => o.value === v)?.label)\\n    .filter(Boolean)\\n    .join(\\", \\");\\n\\nimport React, { forwardRef, Ref, useImperativeHandle } from \\"react\\";\\nimport { TouchableOpacity, View } from \\"react-native\\";\\n// success-line\\nimport { Icon } from \\"./Icon\\";\\nimport { TextField, TextFieldProps } from \\"./TextField\\";\\n\\nexport interface SelectFieldProps\\n  extends Omit<TextFieldProps, \\"ref\\" | \\"onValueChange\\" | \\"onChange\\" | \\"value\\"> {\\n  // success-line-start\\n  value?: string[];\\n  renderValue?: (value: string[]) => string;\\n  onSelect?: (newValue: string[]) => void;\\n  multiple?: boolean;\\n  options: { label: string; value: string }[];\\n  // success-line-end\\n}\\nexport interface SelectFieldRef {}\\n\\nexport const SelectField = forwardRef(function SelectField(\\n  props: SelectFieldProps,\\n  ref: Ref<SelectFieldRef>\\n) {\\n  const {\\n    // success-line-start\\n    value = [],\\n    onSelect,\\n    renderValue,\\n    options = [],\\n    multiple = true,\\n    // success-line-end\\n    ...TextFieldProps\\n  } = props;\\n\\n  const disabled =\\n    TextFieldProps.editable === false || TextFieldProps.status === \\"disabled\\";\\n\\n  useImperativeHandle(ref, () => ({}));\\n\\n  // success-line-start\\n  const valueString =\\n    renderValue?.(value) ??\\n    value\\n      .map((v) => options.find((o) => o.value === v)?.label)\\n      .filter(Boolean)\\n      .join(\\", \\");\\n  // success-line-end\\n\\n  return (\\n    <>\\n      <TouchableOpacity activeOpacity={1}>\\n        <View pointerEvents=\\"none\\">\\n          <TextField\\n            {...TextFieldProps}\\n            // success-line-start\\n            value={valueString}\\n            RightAccessory={(props) => (\\n              <Icon icon=\\"caretRight\\" containerStyle={props.style} />\\n            )}\\n            // success-line-end\\n          />\\n        </View>\\n      </TouchableOpacity>\\n    </>\\n  );\\n});\\n\\nimport { SelectField } from \\"../components/SelectField\\";\\n\\nconst teams = [\\n  { label: \\"Hawks\\", value: \\"ATL\\" },\\n  { label: \\"Celtics\\", value: \\"BOS\\" },\\n  // ...\\n  { label: \\"Jazz\\", value: \\"UTA\\" },\\n  { label: \\"Wizards\\", value: \\"WAS\\" },\\n];\\n\\n// prettier-ignore\\nfunction FavoriteNBATeamsScreen() {\\n  return (\\n    <>\\n      <SelectField\\n        label=\\"NBA Team(s)\\"\\n        helper=\\"Select your team(s)\\"\\n        placeholder=\\"e.g. Trail Blazers\\"\\n        value={[\\"POR\\", \\"MEM\\", \\"NOP\\", \\"CHI\\", \\"CLE\\", \\"SAS\\", \\"MIL\\", \\"LAL\\", \\"PHX\\", \\"WAS\\"]}\\n        options={teams}\\n        containerStyle={{ marginBottom: spacing.large }}\\n      />\\n\\n      <SelectField\\n        label=\\"NBA Team(s)\\"\\n        helper=\\"Select your team(s)\\"\\n        placeholder=\\"e.g. Trail Blazers\\"\\n        value={[\\"POR\\", \\"MEM\\", \\"NOP\\", \\"CHI\\", \\"CLE\\", \\"SAS\\", \\"MIL\\", \\"LAL\\", \\"PHX\\", \\"WAS\\"]}\\n        options={teams}\\n        containerStyle={{ marginBottom: spacing.large }}\\n        multiline\\n      />\\n\\n      <SelectField\\n        label=\\"NBA Team(s)\\"\\n        helper=\\"Select your team(s)\\"\\n        placeholder=\\"e.g. Trail Blazers\\"\\n        value={[\\"POR\\", \\"MEM\\", \\"NOP\\", \\"CHI\\", \\"CLE\\", \\"SAS\\", \\"MIL\\", \\"LAL\\", \\"PHX\\", \\"WAS\\"]}\\n        options={teams}\\n        containerStyle={{ marginBottom: spacing.large }}\\n        renderValue={(value) => `Selected ${value.length} Teams`}\\n      />\\n    </>\\n  )\\n}\\n\\n//...\\n// success-line\\nimport { BottomSheetModalProvider } from \\"@gorhom/bottom-sheet\\";\\n\\n//...\\n\\nreturn (\\n  <SafeAreaProvider initialMetrics={initialWindowMetrics}>\\n    <ErrorBoundary catchErrors={Config.catchErrors}>\\n      // success-line\\n      <BottomSheetModalProvider>\\n        <AppNavigator\\n          linking={linking}\\n          initialState={initialNavigationState}\\n          onStateChange={onNavigationStateChange}\\n        />\\n        // success-line\\n      </BottomSheetModalProvider>\\n    </ErrorBoundary>\\n  </SafeAreaProvider>\\n);\\n\\n//...\\n\\n// success-line-start\\nimport {\\n  BottomSheetBackdrop,\\n  BottomSheetFlatList,\\n  BottomSheetFooter,\\n  BottomSheetModal,\\n} from \\"@gorhom/bottom-sheet\\";\\n// success-line-end\\nimport React, { forwardRef, Ref, useImperativeHandle, useRef } from \\"react\\";\\nimport { TouchableOpacity, View, ViewStyle } from \\"react-native\\";\\n// success-line\\nimport { useSafeAreaInsets } from \\"react-native-safe-area-context\\";\\n// success-line\\nimport { spacing } from \\"../theme\\";\\n// success-line\\nimport { Button } from \\"./Button\\";\\nimport { Icon } from \\"./Icon\\";\\n// success-line\\nimport { ListItem } from \\"./ListItem\\";\\nimport { TextField, TextFieldProps } from \\"./TextField\\";\\n\\nexport interface SelectFieldProps\\n  extends Omit<TextFieldProps, \\"ref\\" | \\"onValueChange\\" | \\"onChange\\" | \\"value\\"> {\\n  value?: string[];\\n  renderValue?: (value: string[]) => string;\\n  onSelect?: (newValue: string[]) => void;\\n  multiple?: boolean;\\n  options: { label: string; value: string }[];\\n}\\nexport interface SelectFieldRef {\\n  // success-line-start\\n  presentOptions: () => void;\\n  dismissOptions: () => void;\\n  // success-line-end\\n}\\n\\nexport const SelectField = forwardRef(function SelectField(\\n  props: SelectFieldProps,\\n  ref: Ref<SelectFieldRef>\\n) {\\n  const {\\n    value = [],\\n    onSelect,\\n    renderValue,\\n    options = [],\\n    multiple = true,\\n    ...TextFieldProps\\n  } = props;\\n  // success-line-start\\n  const sheet = useRef<BottomSheetModal>(null);\\n  const { bottom } = useSafeAreaInsets();\\n  // success-line-end\\n\\n  const disabled =\\n    TextFieldProps.editable === false || TextFieldProps.status === \\"disabled\\";\\n\\n  // success-line\\n  useImperativeHandle(ref, () => ({ presentOptions, dismissOptions }));\\n\\n  const valueString =\\n    renderValue?.(value) ??\\n    value\\n      .map((v) => options.find((o) => o.value === v)?.label)\\n      .filter(Boolean)\\n      .join(\\", \\");\\n\\n  // success-line-start\\n  function presentOptions() {\\n    if (disabled) return;\\n    sheet.current?.present();\\n  }\\n\\n  function dismissOptions() {\\n    sheet.current?.dismiss();\\n  }\\n  // success-line-end\\n\\n  return (\\n    <>\\n      <TouchableOpacity\\n        activeOpacity={1}\\n        // success-line\\n        onPress={presentOptions}\\n      >\\n        <View pointerEvents=\\"none\\">\\n          <TextField\\n            {...TextFieldProps}\\n            value={valueString}\\n            RightAccessory={(props) => (\\n              <Icon icon=\\"caretRight\\" containerStyle={props.style} />\\n            )}\\n          />\\n        </View>\\n      </TouchableOpacity>\\n\\n      {/* success-line-start */}\\n      <BottomSheetModal\\n        ref={sheet}\\n        snapPoints={[\\"50%\\"]}\\n        stackBehavior=\\"replace\\"\\n        enableDismissOnClose\\n        backdropComponent={(props) => (\\n          <BottomSheetBackdrop\\n            {...props}\\n            appearsOnIndex={0}\\n            disappearsOnIndex={-1}\\n          />\\n        )}\\n        footerComponent={\\n          !multiple\\n            ? undefined\\n            : (props) => (\\n                <BottomSheetFooter\\n                  {...props}\\n                  style={$bottomSheetFooter}\\n                  bottomInset={bottom}\\n                >\\n                  <Button\\n                    text=\\"Dismiss\\"\\n                    preset=\\"reversed\\"\\n                    onPress={dismissOptions}\\n                  />\\n                </BottomSheetFooter>\\n              )\\n        }\\n      >\\n        <BottomSheetFlatList\\n          style={{ marginBottom: bottom + (multiple ? 56 : 0) }}\\n          data={options}\\n          keyExtractor={(o) => o.value}\\n          renderItem={({ item, index }) => (\\n            <ListItem\\n              text={item.label}\\n              topSeparator={index !== 0}\\n              style={$listItem}\\n            />\\n          )}\\n        />\\n      </BottomSheetModal>\\n      {/* success-line-end */}\\n    </>\\n  );\\n});\\n\\n// success-line-start\\nconst $bottomSheetFooter: ViewStyle = {\\n  paddingHorizontal: spacing.large,\\n};\\n\\nconst $listItem: ViewStyle = {\\n  paddingHorizontal: spacing.large,\\n};\\n// success-line-end\\n\\nimport {\\n  BottomSheetBackdrop,\\n  BottomSheetFlatList,\\n  BottomSheetFooter,\\n  BottomSheetModal,\\n} from \\"@gorhom/bottom-sheet\\";\\nimport React, { forwardRef, Ref, useImperativeHandle, useRef } from \\"react\\";\\nimport { TouchableOpacity, View, ViewStyle } from \\"react-native\\";\\nimport { useSafeAreaInsets } from \\"react-native-safe-area-context\\";\\n// success-line\\nimport { colors, spacing } from \\"../theme\\";\\nimport { Button } from \\"./Button\\";\\nimport { Icon } from \\"./Icon\\";\\nimport { ListItem } from \\"./ListItem\\";\\nimport { TextField, TextFieldProps } from \\"./TextField\\";\\n\\nexport interface SelectFieldProps\\n  extends Omit<TextFieldProps, \\"ref\\" | \\"onValueChange\\" | \\"onChange\\" | \\"value\\"> {\\n  value?: string[];\\n  renderValue?: (value: string[]) => string;\\n  onSelect?: (newValue: string[]) => void;\\n  multiple?: boolean;\\n  options: { label: string; value: string }[];\\n}\\nexport interface SelectFieldRef {\\n  presentOptions: () => void;\\n  dismissOptions: () => void;\\n}\\n\\n// success-line-start\\nfunction without<T>(array: T[], value: T) {\\n  return array.filter((v) => v !== value);\\n}\\n// success-line-end\\n\\nexport const SelectField = forwardRef(function SelectField(\\n  props: SelectFieldProps,\\n  ref: Ref<SelectFieldRef>\\n) {\\n  const {\\n    value = [],\\n    onSelect,\\n    renderValue,\\n    options = [],\\n    multiple = true,\\n    ...TextFieldProps\\n  } = props;\\n  const sheet = useRef<BottomSheetModal>(null);\\n  const { bottom } = useSafeAreaInsets();\\n\\n  const disabled =\\n    TextFieldProps.editable === false || TextFieldProps.status === \\"disabled\\";\\n\\n  useImperativeHandle(ref, () => ({ presentOptions, dismissOptions }));\\n\\n  const valueString =\\n    renderValue?.(value) ??\\n    value\\n      .map((v) => options.find((o) => o.value === v)?.label)\\n      .filter(Boolean)\\n      .join(\\", \\");\\n\\n  function presentOptions() {\\n    if (disabled) return;\\n\\n    sheet.current?.present();\\n  }\\n\\n  function dismissOptions() {\\n    sheet.current?.dismiss();\\n  }\\n\\n  // success-line-start\\n  function updateValue(optionValue: string) {\\n    if (value.includes(optionValue)) {\\n      onSelect?.(multiple ? without(value, optionValue) : []);\\n    } else {\\n      onSelect?.(multiple ? [...value, optionValue] : [optionValue]);\\n      if (!multiple) dismissOptions();\\n    }\\n  }\\n  // success-line-end\\n\\n  return (\\n    <>\\n      <TouchableOpacity activeOpacity={1} onPress={presentOptions}>\\n        <View pointerEvents=\\"none\\">\\n          <TextField\\n            {...TextFieldProps}\\n            value={valueString}\\n            RightAccessory={(props) => (\\n              <Icon icon=\\"caretRight\\" containerStyle={props.style} />\\n            )}\\n          />\\n        </View>\\n      </TouchableOpacity>\\n\\n      <BottomSheetModal\\n        ref={sheet}\\n        snapPoints={[\\"50%\\"]}\\n        stackBehavior=\\"replace\\"\\n        enableDismissOnClose\\n        backdropComponent={(props) => (\\n          <BottomSheetBackdrop\\n            {...props}\\n            appearsOnIndex={0}\\n            disappearsOnIndex={-1}\\n          />\\n        )}\\n        footerComponent={\\n          !multiple\\n            ? undefined\\n            : (props) => (\\n                <BottomSheetFooter\\n                  {...props}\\n                  style={$bottomSheetFooter}\\n                  bottomInset={bottom}\\n                >\\n                  <Button\\n                    text=\\"Dismiss\\"\\n                    preset=\\"reversed\\"\\n                    onPress={dismissOptions}\\n                  />\\n                </BottomSheetFooter>\\n              )\\n        }\\n      >\\n        <BottomSheetFlatList\\n          style={{ marginBottom: bottom + (multiple ? 56 : 0) }}\\n          data={options}\\n          keyExtractor={(o) => o.value}\\n          renderItem={({ item, index }) => (\\n            <ListItem\\n              text={item.label}\\n              topSeparator={index !== 0}\\n              style={$listItem}\\n              // success-line-start\\n              rightIcon={value.includes(item.value) ? \\"check\\" : undefined}\\n              rightIconColor={colors.palette.angry500}\\n              onPress={() => updateValue(item.value)}\\n              // success-line-end\\n            />\\n          )}\\n        />\\n      </BottomSheetModal>\\n    </>\\n  );\\n});\\n\\nconst $bottomSheetFooter: ViewStyle = {\\n  paddingHorizontal: spacing.large,\\n};\\n\\nconst $listItem: ViewStyle = {\\n  paddingHorizontal: spacing.large,\\n};\\n\\nimport { SelectField } from \\"../components/SelectField\\";\\n\\nconst teams = [\\n  { label: \\"Hawks\\", value: \\"ATL\\" },\\n  { label: \\"Celtics\\", value: \\"BOS\\" },\\n  // ...\\n  { label: \\"Jazz\\", value: \\"UTA\\" },\\n  { label: \\"Wizards\\", value: \\"WAS\\" },\\n];\\n\\nfunction FavoriteNBATeamsScreen() {\\n  const [selectedTeam, setSelectedTeam] = useState<string[]>([]);\\n  const [selectedTeams, setSelectedTeams] = useState<string[]>([]);\\n\\n  return (\\n    <>\\n      <SelectField\\n        label=\\"NBA Team(s)\\"\\n        helper=\\"Select your team(s)\\"\\n        placeholder=\\"e.g. Trail Blazers\\"\\n        value={selectedTeam}\\n        onSelect={setSelectedTeam}\\n        options={teams}\\n        multiple={false}\\n        containerStyle={{ marginBottom: spacing.large }}\\n      />\\n\\n      <SelectField\\n        label=\\"NBA Team(s)\\"\\n        helper=\\"Select your team(s)\\"\\n        placeholder=\\"e.g. Trail Blazers\\"\\n        value={selectedTeams}\\n        onSelect={setSelectedTeams}\\n        options={teams}\\n        containerStyle={{ marginBottom: spacing.large }}\\n        renderValue={(value) => `Selected ${value.length} Teams`}\\n      />\\n    </>\\n  );\\n}\\n\\n","lastUpdated":"1 year, 2 months ago","title":"SelectField using `react-native-bottom-sheet`","publish_date":"2023-02-15","doc_name":"SelectFieldWithBottomSheet.mdx"},{"author":"Justin Poliachik","content":"--\\"android\\": \\"npx expo start --android\\",\\n--\\"ios\\": \\"npx expo start --ios\\",\\n++\\"android\\": \\"npx expo run:android\\",\\n++\\"ios\\": \\"npx expo run:ios\\",\\n\\n--\\"android\\": \\"npx expo run:android\\",\\n--\\"ios\\": \\"npx expo run:ios\\",\\n++\\"android\\": \\"npx expo start --android\\",\\n++\\"ios\\": \\"npx expo start --ios\\",\\n\\n\\"@react-native-async-storage/async-storage\\": \\"1.18.2\\",\\n\\"@shopify/flash-list\\": \\"1.4.3\\",\\n\\"expo-application\\": \\"~5.3.0\\",\\n\\"expo-font\\": \\"~11.4.0\\",\\n\\"expo-localization\\": \\"~14.3.0\\",\\n\\"react-native\\": \\"0.72.6\\",\\n\\n","lastUpdated":"3 months ago","title":"Switch Between Expo Go and Expo CNG","publish_date":"2024-01-11","doc_name":"SwitchBetweenExpoGoCNG.md"},{"author":"Frank Calise","content":"import { Thing } from \\"../../../../../components/thing\\";\\n\\nimport { Thing } from \\"~/components/thing\\";\\n\\nyarn add -D babel-plugin-root-import\\n\\n{\\n  // ...\\n  \\"baseUrl\\": \\"./\\",\\n  // the following assumes Ignite\'s app/ structure, however yours may differ\\n  \\"paths\\": { \\"~/*\\": [\\"app/*\\"] }\\n}\\n\\n[\\n  \\"babel-plugin-root-import\\",\\n  {\\n    root: __dirname,\\n    rootPathPrefix: \\"~/\\",\\n    // mapping ~/ to the ./app directory (again, your app structure may differ here)\\n    rootPathSuffix: \\"app\\",\\n  },\\n],\\n\\nimport { ListItem, Screen, Text } from \\"../../components\\";\\nimport { isRTL } from \\"../../i18n\\";\\nimport { DemoTabScreenProps } from \\"../../navigators/DemoNavigator\\";\\nimport { colors, spacing } from \\"../../theme\\";\\n\\nimport { ListItem, Screen, Text } from \\"~/components\\";\\nimport { isRTL } from \\"~/i18n\\";\\nimport { DemoTabScreenProps } from \\"~/navigators/DemoNavigator\\";\\nimport { colors, spacing } from \\"~/theme\\";\\n\\nyarn expo:start\\n\\nyarn expo:start --clear\\n\\n","lastUpdated":"1 year, 2 months ago","title":"TypeScript baseUrl Configuration","publish_date":"2022-10-24","doc_name":"TypeScriptBaseURL.md"},{"author":"Mark Rickert","content":"import * as React from \'react\';\\nimport { SectionList, SectionListProps, SectionListScrollParams } from \'react-native\';\\n\\ninterface SectionListHandle {\\n  scrollToLocation: (params: SectionListScrollParams) => void;\\n}\\n\\n/**\\n * This is a wrapper around react-native\'s SectionList that adds protection against scrolling to an\\n * unknown (not rendered yet) location. This is useful for cases where the user wants to scroll to a\\n * position very far down the list but we haven\'t rendered that far yet.\\n *\\n * This adds onScrollToIndexFailed property to SectionList so that if the scroll fails, we calculate the approximate\\n * scroll position, scroll there, and then try again to get the exact position requested.\\n *\\n * Essentially, it\'s a \\"guess the position and retry the operation\\" strategy until the list is scrolled to the\\n * correct location.\\n */\\nexport const ScrollProtectedSectionList = React.forwardRef<\\n  SectionListHandle,\\n  SectionListProps<any, any>\\n>((props, forwardedRef) => {\\n  const internalRef = React.useRef<SectionList>(null);\\n  const [lastScrollRequest, setLastScrollRequest] = React.useState<SectionListScrollParams>();\\n  const timeout = React.useRef<ReturnType<typeof setTimeout>>();\\n\\n  const onScrollToIndexFailed = (info: {\\n    index: number;\\n    highestMeasuredFrameIndex: number;\\n    averageItemLength: number;\\n  }) => {\\n    console.log(\'ScrollProtectedSectionList.onScrollToIndexFailed\', info);\\n\\n    // Calculate the possible position of the item and scroll there using the internal scroll responder.\\n    const offset = info.averageItemLength * info.index;\\n    internalRef.current?.getScrollResponder()?.scrollTo({ x: 0, y: offset, animated: false });\\n\\n    // If we know exactly where we want to scroll to, we can just scroll now since the item is likely visible.\\n    // Otherwise it\'ll call this function recursively again.\\n    if (lastScrollRequest) {\\n      timeout.current = setTimeout(() => {\\n        internalRef.current?.scrollToLocation(lastScrollRequest);\\n      }, 100);\\n    }\\n  };\\n\\n  // Clear the timeout if it still exists when the component unmounts.\\n  React.useEffect(() => {\\n    return () => timeout.current && clearTimeout(timeout.current);\\n  }, []);\\n\\n  React.useImperativeHandle(\\n    forwardedRef,\\n    () => ({\\n      scrollToLocation: (params: SectionListScrollParams) => {\\n        internalRef.current?.scrollToLocation(params);\\n        setLastScrollRequest(params);\\n      },\\n    }),\\n    [internalRef],\\n  );\\n\\n  return <SectionList {...props} ref={internalRef} onScrollToIndexFailed={onScrollToIndexFailed} />;\\n});\\n\\n","lastUpdated":"1 year, 3 months ago","title":"Scrolling to a location that hasn\'t been rendered using FlatList or SectionList","publish_date":"2022-10-09","doc_name":"UnrenderedItemInScrollView.md"},{"author":"Derek Greenberg","content":"yarn audit\\n\\nyarn outdated\\n\\nyarn upgrade-interactive\\nyarn upgrade-interactive --latest\\n\\n","lastUpdated":"9 weeks ago","title":"Updating Dependencies with Yarn Audit, Outdated and Upgrade","publish_date":"2022-10-09","doc_name":"UpdatingDependencies.md"},{"author":"Lizzi Lindboe","content":"# enable\\nadb shell settings put secure enabled_accessibility_services \\\\\\ncom.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService\\n# disable\\nadb shell settings put secure enabled_accessibility_services \\\\\\ncom.android.talkback/com.google.android.marvin.talkback.TalkBackService\\n\\n","lastUpdated":"1 year, 3 months ago","title":"Using Screen Readers","publish_date":"2022-10-09","doc_name":"UsingScreenReaders.md"},{"author":"Justin Poliachik","content":"npx ignite-cli new ZustandApp --yes\\n\\nyarn add zustand\\n\\nmkdir app/store\\n\\nimport { Instance, SnapshotOut, types } from \\"mobx-state-tree\\";\\n\\nexport const AuthenticationStoreModel = types\\n  .model(\\"AuthenticationStore\\")\\n  .props({\\n    authToken: types.maybe(types.string),\\n    authEmail: \\"\\",\\n  })\\n  .views((store) => ({\\n    get isAuthenticated() {\\n      return !!store.authToken;\\n    },\\n    get validationError() {\\n      if (store.authEmail.length === 0) return \\"can\'t be blank\\";\\n      if (store.authEmail.length < 6) return \\"must be at least 6 characters\\";\\n      if (!/^[^\\\\s@]+@[^\\\\s@]+\\\\.[^\\\\s@]+$/.test(store.authEmail)) return \\"must be a valid email address\\";\\n      return \\"\\";\\n    },\\n  }))\\n  .actions((store) => ({\\n    setAuthToken(value?: string) {\\n      store.authToken = value;\\n    },\\n    setAuthEmail(value: string) {\\n      store.authEmail = value.replace(/ /g, \\"\\");\\n    },\\n    logout() {\\n      store.authToken = undefined;\\n      store.authEmail = \\"\\";\\n    },\\n  }));\\n\\nexport interface AuthenticationStore extends Instance<typeof AuthenticationStoreModel> {}\\nexport interface AuthenticationStoreSnapshot extends SnapshotOut<typeof AuthenticationStoreModel> {}\\n\\nimport { StateCreator } from \\"zustand\\";\\nimport { RootStore } from \\"./RootStore\\";\\n\\n// Typescript interface for this store slice\\nexport interface AuthenticationStore {\\n  authToken?: string;\\n  authEmail: string;\\n  setAuthToken: (value?: string) => void;\\n  setAuthEmail: (value: string) => void;\\n  logout: () => void;\\n}\\n\\n// create our store slice with default data and actions\\nexport const createAuthenticationSlice: StateCreator<RootStore, [], [], AuthenticationStore> = (set) => ({\\n  authToken: undefined,\\n  authEmail: \\"\\",\\n  setAuthToken: (value) => set({ authToken: value }),\\n  setAuthEmail: (value) => set({ authEmail: value.replace(/ /g, \\"\\") }),\\n  logout: () => set({ authToken: undefined, authEmail: \\"\\" }),\\n});\\n\\n// a selector can be used to grab the full AuthenticationStore\\nexport const authenticationStoreSelector = (state: RootStore) => ({\\n  authToken: state.authToken,\\n  authEmail: state.authEmail,\\n  isAuthenticated: isAuthenticatedSelector(state),\\n  setAuthToken: state.setAuthToken,\\n  setAuthEmail: state.setAuthEmail,\\n  logout: state.logout,\\n});\\n\\n// selectors can also be used for derived values\\nexport const isAuthenticatedSelector = (state: RootStore) => !!state.authToken;\\n\\nexport const validationErrorSelector = (state: RootStore) => {\\n  if (state.authEmail.length === 0) return \\"can\'t be blank\\";\\n  if (state.authEmail.length < 6) return \\"must be at least 6 characters\\";\\n  if (!/^[^\\\\s@]+@[^\\\\s@]+\\\\.[^\\\\s@]+$/.test(state.authEmail)) return \\"must be a valid email address\\";\\n  return \\"\\";\\n};\\n\\nimport { Instance, SnapshotOut, types } from \\"mobx-state-tree\\";\\nimport { api } from \\"../services/api\\";\\nimport { Episode, EpisodeModel } from \\"./Episode\\";\\nimport { withSetPropAction } from \\"./helpers/withSetPropAction\\";\\n\\nexport const EpisodeStoreModel = types\\n  .model(\\"EpisodeStore\\")\\n  .props({\\n    episodes: types.array(EpisodeModel),\\n    favorites: types.array(types.reference(EpisodeModel)),\\n    favoritesOnly: false,\\n  })\\n  .actions(withSetPropAction)\\n  .actions((store) => ({\\n    async fetchEpisodes() {\\n      const response = await api.getEpisodes();\\n      if (response.kind === \\"ok\\") {\\n        store.setProp(\\"episodes\\", response.episodes);\\n      } else {\\n        console.error(`Error fetching episodes: ${JSON.stringify(response)}`);\\n      }\\n    },\\n    addFavorite(episode: Episode) {\\n      store.favorites.push(episode);\\n    },\\n    removeFavorite(episode: Episode) {\\n      store.favorites.remove(episode);\\n    },\\n  }))\\n  .views((store) => ({\\n    get episodesForList() {\\n      return store.favoritesOnly ? store.favorites : store.episodes;\\n    },\\n\\n    hasFavorite(episode: Episode) {\\n      return store.favorites.includes(episode);\\n    },\\n  }))\\n  .actions((store) => ({\\n    toggleFavorite(episode: Episode) {\\n      if (store.hasFavorite(episode)) {\\n        store.removeFavorite(episode);\\n      } else {\\n        store.addFavorite(episode);\\n      }\\n    },\\n  }));\\n\\nexport interface EpisodeStore extends Instance<typeof EpisodeStoreModel> {}\\nexport interface EpisodeStoreSnapshot extends SnapshotOut<typeof EpisodeStoreModel> {}\\n\\nimport { api } from \\"../services/api\\";\\nimport { Episode } from \\"./Episode\\";\\nimport { StateCreator } from \\"zustand\\";\\nimport { RootStore } from \\"./RootStore\\";\\n\\nexport interface EpisodeStore {\\n  episodes: Episode[];\\n  favorites: string[];\\n  favoritesOnly: boolean;\\n\\n  fetchEpisodes: () => Promise<void>;\\n  addFavorite: (episode: Episode) => void;\\n  removeFavorite: (episode: Episode) => void;\\n  toggleFavorite: (episode: Episode) => void;\\n  setFavoritesOnly: (value: boolean) => void;\\n}\\n\\nexport const createEpisodeSlice: StateCreator<RootStore, [], [], EpisodeStore> = (set, get) => ({\\n  episodes: [],\\n  favorites: [],\\n  favoritesOnly: false,\\n\\n  // Zustand supports async actions\\n  fetchEpisodes: async () => {\\n    const response = await api.getEpisodes();\\n    if (response.kind === \\"ok\\") {\\n      set({ episodes: response.episodes });\\n    } else {\\n      console.error(`Error fetching episodes: ${JSON.stringify(response)}`);\\n    }\\n  },\\n  addFavorite: (episode) => set((state) => ({ favorites: [...state.favorites, episode.guid] })),\\n  removeFavorite: (episode) => set((state) => ({ favorites: state.favorites.filter((guid) => guid !== episode.guid) })),\\n  toggleFavorite: (episode) => {\\n    // get() can be used within actions\\n    if (get().favorites.includes(episode.guid)) {\\n      get().removeFavorite(episode);\\n    } else {\\n      get().addFavorite(episode);\\n    }\\n  },\\n  setFavoritesOnly: (value: boolean) => set({ favoritesOnly: value }),\\n});\\n\\nexport const episodeStoreSelector = (state: RootStore) => ({\\n  episodes: state.episodes,\\n  favorites: state.favorites,\\n  favoritesOnly: state.favoritesOnly,\\n\\n  // derived values can be included in selectors like this\\n  episodesForList: getEpisodesForList(state),\\n\\n  fetchEpisodes: state.fetchEpisodes,\\n  addFavorite: state.addFavorite,\\n  removeFavorite: state.removeFavorite,\\n  toggleFavorite: state.toggleFavorite,\\n  setFavoritesOnly: state.setFavoritesOnly,\\n\\n  // we can also include helper functions that have access to state\\n  hasFavorite: (episode: Episode) => {\\n    return state.favorites.includes(episode.guid);\\n  },\\n});\\n\\nexport const getEpisodesForList = (store: EpisodeStore) => {\\n  return store.favoritesOnly ? store.episodes.filter((a) => store.favorites.includes(a.guid)) : store.episodes;\\n};\\n\\nimport { Instance, SnapshotIn, SnapshotOut, types } from \\"mobx-state-tree\\";\\nimport { withSetPropAction } from \\"./helpers/withSetPropAction\\";\\nimport { formatDate } from \\"../utils/formatDate\\";\\nimport { translate } from \\"../i18n\\";\\n\\ninterface Enclosure {\\n  link: string;\\n  type: string;\\n  length: number;\\n  duration: number;\\n  rating: { scheme: string; value: string };\\n}\\n\\n/**\\n * This represents an episode of React Native Radio.\\n */\\nexport const EpisodeModel = types\\n  .model(\\"Episode\\")\\n  .props({\\n    guid: types.identifier,\\n    title: \\"\\",\\n    pubDate: \\"\\", // Ex: 2022-08-12 21:05:36\\n    link: \\"\\",\\n    author: \\"\\",\\n    thumbnail: \\"\\",\\n    description: \\"\\",\\n    content: \\"\\",\\n    enclosure: types.frozen<Enclosure>(),\\n    categories: types.array(types.string),\\n  })\\n  .actions(withSetPropAction)\\n  .views((episode) => ({\\n    get parsedTitleAndSubtitle() {\\n      const defaultValue = { title: episode.title?.trim(), subtitle: \\"\\" };\\n\\n      if (!defaultValue.title) return defaultValue;\\n\\n      const titleMatches = defaultValue.title.match(/^(RNR.*\\\\d)(?: - )(.*$)/);\\n\\n      if (!titleMatches || titleMatches.length !== 3) return defaultValue;\\n\\n      return { title: titleMatches[1], subtitle: titleMatches[2] };\\n    },\\n    get datePublished() {\\n      try {\\n        const formatted = formatDate(episode.pubDate);\\n        return {\\n          textLabel: formatted,\\n          accessibilityLabel: translate(\\"demoPodcastListScreen.accessibility.publishLabel\\", {\\n            date: formatted,\\n          }),\\n        };\\n      } catch (error) {\\n        return { textLabel: \\"\\", accessibilityLabel: \\"\\" };\\n      }\\n    },\\n    get duration() {\\n      const seconds = Number(episode.enclosure.duration);\\n      const h = Math.floor(seconds / 3600);\\n      const m = Math.floor((seconds % 3600) / 60);\\n      const s = Math.floor((seconds % 3600) % 60);\\n\\n      const hDisplay = h > 0 ? `${h}:` : \\"\\";\\n      const mDisplay = m > 0 ? `${m}:` : \\"\\";\\n      const sDisplay = s > 0 ? s : \\"\\";\\n      return {\\n        textLabel: hDisplay + mDisplay + sDisplay,\\n        accessibilityLabel: translate(\\"demoPodcastListScreen.accessibility.durationLabel\\", {\\n          hours: h,\\n          minutes: m,\\n          seconds: s,\\n        }),\\n      };\\n    },\\n  }));\\n\\nexport interface Episode extends Instance<typeof EpisodeModel> {}\\nexport interface EpisodeSnapshotOut extends SnapshotOut<typeof EpisodeModel> {}\\nexport interface EpisodeSnapshotIn extends SnapshotIn<typeof EpisodeModel> {}\\n\\nimport { formatDate } from \\"../utils/formatDate\\";\\nimport { translate } from \\"../i18n\\";\\n\\ninterface Enclosure {\\n  link: string;\\n  type: string;\\n  length: number;\\n  duration: number;\\n  rating: { scheme: string; value: string };\\n}\\n\\nexport type Episode = {\\n  guid: string;\\n  title: string;\\n  pubDate: string;\\n  link: string;\\n  author: string;\\n  thumbnail: string;\\n  description: string;\\n  content: string;\\n  enclosure: Enclosure;\\n  categories: string[];\\n};\\n\\nexport const getParsedTitleAndSubtitle = (episode: Episode) => {\\n  const defaultValue = { title: episode.title?.trim(), subtitle: \\"\\" };\\n\\n  if (!defaultValue.title) return defaultValue;\\n\\n  const titleMatches = defaultValue.title.match(/^(RNR.*\\\\d)(?: - )(.*$)/);\\n\\n  if (!titleMatches || titleMatches.length !== 3) return defaultValue;\\n\\n  return { title: titleMatches[1], subtitle: titleMatches[2] };\\n};\\n\\nexport const getDatePublished = (episode: Episode) => {\\n  try {\\n    const formatted = formatDate(episode.pubDate);\\n    return {\\n      textLabel: formatted,\\n      accessibilityLabel: translate(\\"demoPodcastListScreen.accessibility.publishLabel\\", {\\n        date: formatted,\\n      }),\\n    };\\n  } catch (error) {\\n    return { textLabel: \\"\\", accessibilityLabel: \\"\\" };\\n  }\\n};\\n\\nexport const getDuration = (episode: Episode) => {\\n  const seconds = Number(episode.enclosure.duration);\\n  const h = Math.floor(seconds / 3600);\\n  const m = Math.floor((seconds % 3600) / 60);\\n  const s = Math.floor((seconds % 3600) % 60);\\n\\n  const hDisplay = h > 0 ? `${h}:` : \\"\\";\\n  const mDisplay = m > 0 ? `${m}:` : \\"\\";\\n  const sDisplay = s > 0 ? s : \\"\\";\\n  return {\\n    textLabel: hDisplay + mDisplay + sDisplay,\\n    accessibilityLabel: translate(\\"demoPodcastListScreen.accessibility.durationLabel\\", {\\n      hours: h,\\n      minutes: m,\\n      seconds: s,\\n    }),\\n  };\\n};\\n\\nimport { create } from \\"zustand\\";\\nimport { useShallow } from \\"zustand/react/shallow\\";\\nimport { AuthenticationStore, authenticationStoreSelector, createAuthenticationSlice } from \\"./AuthenticationStore\\";\\nimport { EpisodeStore, createEpisodeSlice, episodeStoreSelector } from \\"./EpisodeStore\\";\\n\\nexport interface RootStore extends AuthenticationStore, EpisodeStore {}\\n\\nexport const useStore = create<RootStore>()((...a) => ({\\n  ...createAuthenticationSlice(...a),\\n  ...createEpisodeSlice(...a),\\n  // add your state slices here\\n}));\\n\\n// optional: custom hooks can be used to pick pieces from state\\n// useShallow is used to help prevent unnecessary rerenders\\nexport const useAuthenticationStore = () => useStore(useShallow(authenticationStoreSelector));\\nexport const useEpisodeStore = () => useStore(useShallow(episodeStoreSelector));\\n\\nexport * from \\"./RootStore\\";\\nexport * from \\"./AuthenticationStore\\";\\nexport * from \\"./EpisodeStore\\";\\nexport * from \\"./Episode\\";\\n\\nimport { useStore, isAuthenticatedSelector } from \\"app/store\\";\\n\\nconst AppStack = () => {\\n\\n  // use a selector to pick only that value\\n  const isAuthenticated = useStore(isAuthenticatedSelector)\\n\\n  return (\\n    <Stack.Navigator\\n    ...\\n\\n// pick several values & actions from the AuthenticationStore\\nconst { authEmail, setAuthEmail, setAuthToken } = useAuthenticationStore();\\n// we can also use multiple hooks\\nconst validationError = useStore(validationErrorSelector);\\n\\nimport {\\n  useEpisodeStore,\\n  Episode,\\n  getDatePublished,\\n  getDuration,\\n  getParsedTitleAndSubtitle,\\n} from \\"app/store\\"\\n\\n...\\n\\nconst episodeStore = useEpisodeStore();\\n\\n<Toggle\\n  value={episodeStore.favoritesOnly}\\n  onValueChange={() =>\\n--  episodeStore.setProp(\\"favoritesOnly\\", !episodeStore.favoritesOnly)\\n++  episodeStore.setFavoritesOnly(!episodeStore.favoritesOnly)\\n  }\\n\\n\\nconst datePublished = getDatePublished(episode);\\nconst duration = getDuration(episode);\\nconst parsedTitleAndSubtitle = getParsedTitleAndSubtitle(episode);\\n\\n <Text\\n  style={$metadataText}\\n  size=\\"xxs\\"\\n--accessibilityLabel={episode.datePublished.accessibilityLabel}\\n++accessibilityLabel={datePublished.accessibilityLabel}\\n>\\n--{episode.datePublished.textLabel}\\n++{datePublished.textLabel}\\n</Text>\\n\\n++import { useStore } from \\"app/store\\"\\n\\n--const {\\n--  authenticationStore: { logout },\\n--} = useStores()\\n++const logout = useStore((state) => state.logout)\\n\\n++import { useStore } from \\"app/store\\"\\n\\n--const {\\n--  authenticationStore: { logout },\\n--} = useStores()\\n++const logout = useStore((state) => state.logout)\\n\\n+import { Episode } from \\"app/store/Episode\\";\\n\\n-const episodes: EpisodeSnapshotIn[] =\\n+const episodes: Episode[] =\\n\\nimport { create } from \\"zustand\\";\\nimport { useShallow } from \\"zustand/react/shallow\\";\\nimport { persist, createJSONStorage } from \\"zustand/middleware\\";\\n\\nimport { AuthenticationStore, authenticationStoreSelector, createAuthenticationSlice } from \\"./AuthenticationStore\\";\\nimport { EpisodeStore, createEpisodeSlice, episodeStoreSelector } from \\"./EpisodeStore\\";\\nimport AsyncStorage from \\"@react-native-async-storage/async-storage\\";\\n\\nexport interface RootStore extends AuthenticationStore, EpisodeStore {\\n  _hasHydrated: boolean;\\n  setHasHydrated: (state: boolean) => void;\\n}\\n\\nexport const useStore = create<RootStore>()(\\n  persist(\\n    (...a) => ({\\n      ...createAuthenticationSlice(...a),\\n      ...createEpisodeSlice(...a),\\n      // add your state slices here\\n\\n      _hasHydrated: false,\\n      setHasHydrated: (state) => {\\n        const set = a[0];\\n        set({\\n          _hasHydrated: state,\\n        });\\n      },\\n    }),\\n    {\\n      name: \\"zustand-app\\",\\n      storage: createJSONStorage(() => AsyncStorage),\\n      onRehydrateStorage: () => (state) => {\\n        state?.setHasHydrated(true);\\n      },\\n    }\\n  )\\n);\\n\\nexport const useAuthenticationStore = () => useStore(useShallow(authenticationStoreSelector));\\nexport const useEpisodeStore = () => useStore(useShallow(episodeStoreSelector));\\n\\n+import { useStore } from \\"./store\\"\\n\\n...\\n\\nconst [areFontsLoaded] = useFonts(customFontsToLoad)\\n\\n-useEffect(() => {\\n-  hideSplashScreen()\\n-}, [])\\n\\n+const hasHydrated = useStore((state) => state._hasHydrated)\\n+useEffect(() => {\\n+  if (hasHydrated) {\\n+    setTimeout(hideSplashScreen, 500)\\n+  }\\n+}, [hasHydrated])\\n\\n-if (!isNavigationStateRestored || !areFontsLoaded) return null\\n+if (!hasHydrated || !isNavigationStateRestored || !areFontsLoaded) return null\\n\\n\\n","lastUpdated":"9 weeks ago","title":"Zustand","publish_date":"2024-02-05","doc_name":"Zustand.md"}]}},"docusaurus-plugin-google-gtag":{"default":{"trackingID":["G-1NP64B0XVM"],"anonymizeIP":true,"id":"default"}},"docusaurus-plugin-content-docs":{"default":{"path":"/docs","versions":[{"name":"current","label":"Next","isLast":true,"path":"/docs","mainDocId":"intro","docs":[{"id":"archive/index","path":"/docs/archive/","sidebar":"mainSidebar"},{"id":"archive/PristineExpoProject","path":"/docs/archive/PristineExpoProject","sidebar":"mainSidebar"},{"id":"intro","path":"/docs/intro","sidebar":"mainSidebar"},{"id":"recipes/AccessibilityFontSizes","path":"/docs/recipes/AccessibilityFontSizes","sidebar":"mainSidebar"},{"id":"recipes/CircleCIRNSetup","path":"/docs/recipes/CircleCIRNSetup","sidebar":"mainSidebar"},{"id":"recipes/CreatingGreateExperienceForScreenReaders","path":"/docs/recipes/CreatingGreateExperienceForScreenReaders","sidebar":"mainSidebar"},{"id":"recipes/DetoxIntro","path":"/docs/recipes/DetoxIntro","sidebar":"mainSidebar"},{"id":"recipes/DistributingAuthTokenToAPI","path":"/docs/recipes/DistributingAuthTokenToAPI","sidebar":"mainSidebar"},{"id":"recipes/EASUpdate","path":"/docs/recipes/EASUpdate","sidebar":"mainSidebar"},{"id":"recipes/EnforcingImportOrder","path":"/docs/recipes/EnforcingImportOrder","sidebar":"mainSidebar"},{"id":"recipes/EnvironmentVariables","path":"/docs/recipes/EnvironmentVariables","sidebar":"mainSidebar"},{"id":"recipes/ExpoRouter","path":"/docs/recipes/ExpoRouter","sidebar":"mainSidebar"},{"id":"recipes/GeneratorComponentTests","path":"/docs/recipes/GeneratorComponentTests","sidebar":"mainSidebar"},{"id":"recipes/LocalFirstDataWithPowerSync","path":"/docs/recipes/LocalFirstDataWithPowerSync","sidebar":"mainSidebar"},{"id":"recipes/MaestroSetup","path":"/docs/recipes/MaestroSetup","sidebar":"mainSidebar"},{"id":"recipes/MigratingToMMKV","path":"/docs/recipes/MigratingToMMKV","sidebar":"mainSidebar"},{"id":"recipes/PatchingBuildingAndroid","path":"/docs/recipes/PatchingBuildingAndroid","sidebar":"mainSidebar"},{"id":"recipes/PrepForEASBuild","path":"/docs/recipes/PrepForEASBuild","sidebar":"mainSidebar"},{"id":"recipes/ReactNativeVisionCamera","path":"/docs/recipes/ReactNativeVisionCamera","sidebar":"mainSidebar"},{"id":"recipes/Redux","path":"/docs/recipes/Redux","sidebar":"mainSidebar"},{"id":"recipes/RemoveMobxStateTree","path":"/docs/recipes/RemoveMobxStateTree","sidebar":"mainSidebar"},{"id":"recipes/RequiringHardwareFeaturesWithExpo","path":"/docs/recipes/RequiringHardwareFeaturesWithExpo","sidebar":"mainSidebar"},{"id":"recipes/SampleYAMLCircleCI","path":"/docs/recipes/SampleYAMLCircleCI","sidebar":"mainSidebar"},{"id":"recipes/SelectFieldWithBottomSheet","path":"/docs/recipes/SelectFieldWithBottomSheet","sidebar":"mainSidebar"},{"id":"recipes/SwitchBetweenExpoGoCNG","path":"/docs/recipes/SwitchBetweenExpoGoCNG","sidebar":"mainSidebar"},{"id":"recipes/TypeScriptBaseURL","path":"/docs/recipes/TypeScriptBaseURL","sidebar":"mainSidebar"},{"id":"recipes/UnrenderedItemInScrollView","path":"/docs/recipes/UnrenderedItemInScrollView","sidebar":"mainSidebar"},{"id":"recipes/UpdatingDependencies","path":"/docs/recipes/UpdatingDependencies","sidebar":"mainSidebar"},{"id":"recipes/UpdatingIgnite","path":"/docs/recipes/UpdatingIgnite","sidebar":"mainSidebar"},{"id":"recipes/UsingScreenReaders","path":"/docs/recipes/UsingScreenReaders","sidebar":"mainSidebar"},{"id":"recipes/Zustand","path":"/docs/recipes/Zustand","sidebar":"mainSidebar"}],"draftIds":[],"sidebars":{"mainSidebar":{"link":{"path":"/docs/intro","label":"intro"}}}}],"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 s=t(144);const l=JSON.parse('{"docusaurusVersion":"3.1.1","siteVersion":"0.0.0","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"3.1.1"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"3.1.1"},"docusaurus-plugin-google-gtag":{"type":"package","name":"@docusaurus/plugin-google-gtag","version":"3.1.1"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"3.1.1"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"3.1.1"},"docusaurus-theme-search-algolia":{"type":"package","name":"@docusaurus/theme-search-algolia","version":"3.1.1"},"example-code-snippets":{"type":"local"}}}');var c=t(7624);const u={siteConfig:o.default,siteMetadata:l,globalData:a,i18n:i,codeTranslations:s},d=r.createContext(u);function p(e){let{children:n}=e;return(0,c.jsx)(d.Provider,{value:u,children:n})}},5852:(e,n,t)=>{"use strict";t.d(n,{c:()=>f});var r=t(1504),o=t(8684),a=t(6952),i=t(5684),s=t(7468),l=t(7624);function c(e){let{error:n,tryAgain:t}=e;return(0,l.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,l.jsx)("h1",{style:{fontSize:"3rem"},children:"This page crashed"}),(0,l.jsx)("button",{type:"button",onClick:t,style:{margin:"1rem 0",fontSize:"2rem",cursor:"pointer",borderRadius:20,padding:"1rem"},children:"Try again"}),(0,l.jsx)(u,{error:n})]})}function u(e){let{error:n}=e;const t=(0,i.getErrorCausalChain)(n).map((e=>e.message)).join("\n\nCause:\n");return(0,l.jsx)("p",{style:{whiteSpace:"pre-wrap"},children:t})}function d(e){let{error:n,tryAgain:t}=e;return(0,l.jsxs)(f,{fallback:()=>(0,l.jsx)(c,{error:n,tryAgain:t}),children:[(0,l.jsx)(a.c,{children:(0,l.jsx)("title",{children:"Page Error"})}),(0,l.jsx)(s.c,{children:(0,l.jsx)(c,{error:n,tryAgain:t})})]})}const p=e=>(0,l.jsx)(d,{...e});class f extends r.Component{constructor(e){super(e),this.state={error:null}}componentDidCatch(e){o.c.canUseDOM&&this.setState({error:e})}render(){const{children:e}=this.props,{error:n}=this.state;if(n){const e={error:n,tryAgain:()=>this.setState({error:null})};return(this.props.fallback??p)(e)}return e??null}}},8684:(e,n,t)=>{"use strict";t.d(n,{c:()=>o});const r="undefined"!=typeof window&&"document"in window&&"createElement"in window.document,o={canUseDOM:r,canUseEventListeners:r&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:r&&"IntersectionObserver"in window,canUseViewport:r&&"screen"in window}},6952:(e,n,t)=>{"use strict";t.d(n,{c:()=>a});t(1504);var r=t(2160),o=t(7624);function a(e){return(0,o.jsx)(r.So,{...e})}},867:(e,n,t)=>{"use strict";t.d(n,{c:()=>f});var r=t(1504),o=t(440),a=t(5684),i=t(8264),s=t(8136),l=t(8684),c=t(5976),u=t(964),d=t(7624);function p(e,n){let{isNavLink:t,to:p,href:f,activeClassName:m,isActive:g,"data-noBrokenLinkCheck":h,autoAddBaseUrl:y=!0,...b}=e;const{siteConfig:{trailingSlash:v,baseUrl:S}}=(0,i.c)(),{withBaseUrl:w}=(0,u.E)(),x=(0,c.c)(),k=(0,r.useRef)(null);(0,r.useImperativeHandle)(n,(()=>k.current));const T=p||f;const E=(0,s.c)(T),C=T?.replace("pathname://","");let _=void 0!==C?(A=C,y&&(e=>e.startsWith("/"))(A)?w(A):A):void 0;var A;_&&E&&(_=(0,a.applyTrailingSlash)(_,{trailingSlash:v,baseUrl:S}));const I=(0,r.useRef)(!1),P=t?o.Af:o.cH,L=l.c.canUseIntersectionObserver,R=(0,r.useRef)(),N=()=>{I.current||null==_||(window.docusaurus.preload(_),I.current=!0)};(0,r.useEffect)((()=>(!L&&E&&null!=_&&window.docusaurus.prefetch(_),()=>{L&&R.current&&R.current.disconnect()})),[R,_,L,E]);const O=_?.startsWith("#")??!1,F=!b.target||"_self"===b.target,j=!_||!E||!F||O;return h||!O&&j||x.collectLink(_),b.id&&x.collectAnchor(b.id),j?(0,d.jsx)("a",{ref:k,href:_,...T&&!E&&{target:"_blank",rel:"noopener noreferrer"},...b}):(0,d.jsx)(P,{...b,onMouseEnter:N,onTouchStart:N,innerRef:e=>{k.current=e,L&&e&&E&&(R.current=new window.IntersectionObserver((n=>{n.forEach((n=>{e===n.target&&(n.isIntersecting||n.intersectionRatio>0)&&(R.current.unobserve(e),R.current.disconnect(),null!=_&&window.docusaurus.prefetch(_))}))})),R.current.observe(e))},to:_,...t&&{isActive:g,activeClassName:m}})}const f=r.forwardRef(p)},4357:(e,n,t)=>{"use strict";t.d(n,{c:()=>c,G:()=>l});var r=t(1504),o=t(7624);function a(e,n){const t=e.split(/(\{\w+\})/).map(((e,t)=>{if(t%2==1){const t=n?.[e.slice(1,-1)];if(void 0!==t)return t}return e}));return t.some((e=>(0,r.isValidElement)(e)))?t.map(((e,n)=>(0,r.isValidElement)(e)?r.cloneElement(e,{key:n}):e)).filter((e=>""!==e)):t.join("")}var i=t(144);function s(e){let{id:n,message:t}=e;if(void 0===n&&void 0===t)throw new Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return i[n??t]??t??n}function l(e,n){let{message:t,id:r}=e;return a(s({message:t,id:r}),n)}function c(e){let{children:n,id:t,values:r}=e;if(n&&"string"!=typeof n)throw console.warn("Illegal <Translate> children",n),new Error("The Docusaurus <Translate> component only accept simple string values");const i=s({message:n,id:t});return(0,o.jsx)(o.Fragment,{children:a(i,r)})}},2488:(e,n,t)=>{"use strict";t.d(n,{M:()=>r});const r="default"},8136:(e,n,t)=>{"use strict";function r(e){return/^(?:\w*:|\/\/)/.test(e)}function o(e){return void 0!==e&&!r(e)}t.d(n,{_:()=>r,c:()=>o})},964:(e,n,t)=>{"use strict";t.d(n,{E:()=>i,c:()=>s});var r=t(1504),o=t(8264),a=t(8136);function i(){const{siteConfig:{baseUrl:e,url:n}}=(0,o.c)(),t=(0,r.useCallback)(((t,r)=>function(e,n,t,r){let{forcePrependBaseUrl:o=!1,absolute:i=!1}=void 0===r?{}:r;if(!t||t.startsWith("#")||(0,a._)(t))return t;if(o)return n+t.replace(/^\//,"");if(t===n.replace(/\/$/,""))return n;const s=t.startsWith(n)?t:n+t.replace(/^\//,"");return i?e+s:s}(n,e,t,r)),[n,e]);return{withBaseUrl:t}}function s(e,n){void 0===n&&(n={});const{withBaseUrl:t}=i();return t(e,n)}},5976:(e,n,t)=>{"use strict";t.d(n,{c:()=>i});var r=t(1504);t(7624);const o=r.createContext({collectAnchor:()=>{},collectLink:()=>{}}),a=()=>(0,r.useContext)(o);function i(){return a()}},8264:(e,n,t)=>{"use strict";t.d(n,{c:()=>a});var r=t(1504),o=t(136);function a(){return(0,r.useContext)(o.e)}},3160:(e,n,t)=>{"use strict";t.d(n,{MP:()=>i,mm:()=>a});var r=t(8264),o=t(2488);function a(e,n){void 0===n&&(n={});const t=function(){const{globalData:e}=(0,r.c)();return e}()[e];if(!t&&n.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin.`);return t}function i(e,n,t){void 0===n&&(n=o.M),void 0===t&&(t={});const r=a(e),i=r?.[n];if(!i&&t.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin with id "${n}".`);return i}},3664:(e,n,t)=>{"use strict";t.d(n,{c:()=>a});var r=t(1504),o=t(240);function a(){return(0,r.useContext)(o.e)}},5288:(e,n,t)=>{"use strict";t.d(n,{c:()=>o});var r=t(1504);const o=t(8684).c.canUseDOM?r.useLayoutEffect:r.useEffect},8120:(e,n,t)=>{"use strict";t.d(n,{c:()=>o});const r=e=>"object"==typeof e&&!!e&&Object.keys(e).length>0;function o(e){const n={};return function e(t,o){Object.entries(t).forEach((t=>{let[a,i]=t;const s=o?`${o}.${a}`:a;r(i)?e(i,s):n[s]=i}))}(e),n}},5548:(e,n,t)=>{"use strict";t.d(n,{Y:()=>i,e:()=>a});var r=t(1504),o=t(7624);const a=r.createContext(null);function i(e){let{children:n,value:t}=e;const i=r.useContext(a),s=(0,r.useMemo)((()=>function(e){let{parent:n,value:t}=e;if(!n){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 r={...n.data,...t?.data};return{plugin:n.plugin,data:r}}({parent:i,value:t})),[i,t]);return(0,o.jsx)(a.Provider,{value:s,children:n})}},5172:(e,n,t)=>{"use strict";t.d(n,{wB:()=>g,UF:()=>d,mU:()=>p,L0:()=>c,i8:()=>h,OK:()=>u,aA:()=>m,gN:()=>f});var r=t(5592),o=t(3160);const a=e=>e.versions.find((e=>e.isLast));function i(e,n){const t=a(e);return[...e.versions.filter((e=>e!==t)),t].find((e=>!!(0,r.ot)(n,{path:e.path,exact:!1,strict:!1})))}function s(e,n){const t=i(e,n),o=t?.docs.find((e=>!!(0,r.ot)(n,{path:e.path,exact:!0,strict:!1})));return{activeVersion:t,activeDoc:o,alternateDocVersions:o?function(n){const t={};return e.versions.forEach((e=>{e.docs.forEach((r=>{r.id===n&&(t[e.name]=r)}))})),t}(o.id):{}}}const l={},c=()=>(0,o.mm)("docusaurus-plugin-content-docs")??l,u=e=>(0,o.MP)("docusaurus-plugin-content-docs",e,{failfast:!0});function d(e){void 0===e&&(e={});const n=c(),{pathname:t}=(0,r.IT)();return function(e,n,t){void 0===t&&(t={});const o=Object.entries(e).sort(((e,n)=>n[1].path.localeCompare(e[1].path))).find((e=>{let[,t]=e;return!!(0,r.ot)(n,{path:t.path,exact:!1,strict:!1})})),a=o?{pluginId:o[0],pluginData:o[1]}:void 0;if(!a&&t.failfast)throw new Error(`Can't find active docs plugin for "${n}" 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 a}(n,t,e)}function p(e){void 0===e&&(e={});const n=d(e),{pathname:t}=(0,r.IT)();if(!n)return;return{activePlugin:n,activeVersion:i(n.pluginData,t)}}function f(e){return u(e).versions}function m(e){const n=u(e);return a(n)}function g(e){const n=u(e),{pathname:t}=(0,r.IT)();return s(n,t)}function h(e){const n=u(e),{pathname:t}=(0,r.IT)();return function(e,n){const t=a(e);return{latestDocSuggestion:s(e,n).alternateDocVersions[t.name],latestVersionSuggestion:t}}(n,t)}},7483:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>r});const r={onRouteDidUpdate(e){let{location:n,previousLocation:t}=e;!t||n.pathname===t.pathname&&n.search===t.search&&n.hash===t.hash||setTimeout((()=>{window.gtag("set","page_path",n.pathname+n.search+n.hash),window.gtag("event","page_view")}))}}},1976:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>a});var r=t(2272),o=t.n(r);o().configure({showSpinner:!1});const a={onRouteUpdate(e){let{location:n,previousLocation:t}=e;if(t&&n.pathname!==t.pathname){const e=window.setTimeout((()=>{o().start()}),200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){o().done()}}},5396:(e,n,t)=>{"use strict";t.r(n);var r=t(5720),o=t(7768);!function(e){const{themeConfig:{prism:n}}=o.default,{additionalLanguages:r}=n;globalThis.Prism=e,r.forEach((e=>{"php"===e&&t(1808),t(4096)(`./prism-${e}`)})),delete globalThis.Prism}(r.sp)},6448:(e,n,t)=>{"use strict";t.d(n,{c:()=>u});t(1504);var r=t(5456),o=t(4357),a=t(1824),i=t(867),s=t(5976);const l={anchorWithStickyNavbar:"anchorWithStickyNavbar_LWe7",anchorWithHideOnScrollNavbar:"anchorWithHideOnScrollNavbar_WYt5"};var c=t(7624);function u(e){let{as:n,id:t,...u}=e;const d=(0,s.c)(),{navbar:{hideOnScroll:p}}=(0,a.y)();if("h1"===n||!t)return(0,c.jsx)(n,{...u,id:void 0});d.collectAnchor(t);const f=(0,o.G)({id:"theme.common.headingLinkTitle",message:"Direct link to {heading}",description:"Title for link to heading"},{heading:"string"==typeof u.children?u.children:t});return(0,c.jsxs)(n,{...u,className:(0,r.c)("anchor",p?l.anchorWithHideOnScrollNavbar:l.anchorWithStickyNavbar,u.className),id:t,children:[u.children,(0,c.jsx)(i.c,{className:"hash-link",to:`#${t}`,"aria-label":f,title:f,children:"\u200b"})]})}},3232:(e,n,t)=>{"use strict";t.d(n,{c:()=>a});t(1504);const r={iconExternalLink:"iconExternalLink_nPIU"};var o=t(7624);function a(e){let{width:n=13.5,height:t=13.5}=e;return(0,o.jsx)("svg",{width:n,height:t,"aria-hidden":"true",viewBox:"0 0 24 24",className:r.iconExternalLink,children:(0,o.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"})})}},7468:(e,n,t)=>{"use strict";t.d(n,{c:()=>Nn});var r=t(1504),o=t(5456),a=t(5852),i=t(5008),s=t(5592),l=t(4357),c=t(7124),u=t(7624);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:n}=(0,s.Uz)(),t=(0,r.useCallback)((e=>{e.preventDefault();const n=document.querySelector("main:first-of-type")??document.getElementById(d);n&&p(n)}),[]);return(0,c.c)((t=>{let{location:r}=t;e.current&&!r.hash&&"PUSH"===n&&p(e.current)})),{containerRef:e,onClick:t}}const m=(0,l.G)({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 g(e){const n=e.children??m,{containerRef:t,onClick:r}=f();return(0,u.jsx)("div",{ref:t,role:"region","aria-label":m,children:(0,u.jsx)("a",{...e,href:`#${d}`,onClick:r,children:n})})}var h=t(5864),y=t(204);const b={skipToContent:"skipToContent_fXgn"};function v(){return(0,u.jsx)(g,{className:b.skipToContent})}var S=t(1824),w=t(3868);function x(e){let{width:n=21,height:t=21,color:r="currentColor",strokeWidth:o=1.2,className:a,...i}=e;return(0,u.jsx)("svg",{viewBox:"0 0 15 15",width:n,height:t,...i,children:(0,u.jsx)("g",{stroke:r,strokeWidth:o,children:(0,u.jsx)("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})})})}const k={closeButton:"closeButton_CVFx"};function T(e){return(0,u.jsx)("button",{type:"button","aria-label":(0,l.G)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"}),...e,className:(0,o.c)("clean-btn close",k.closeButton,e.className),children:(0,u.jsx)(x,{width:14,height:14,strokeWidth:3.1})})}const E={content:"content_knG7"};function C(e){const{announcementBar:n}=(0,S.y)(),{content:t}=n;return(0,u.jsx)("div",{...e,className:(0,o.c)(E.content,e.className),dangerouslySetInnerHTML:{__html:t}})}const _={announcementBar:"announcementBar_mb4j",announcementBarPlaceholder:"announcementBarPlaceholder_vyr4",announcementBarClose:"announcementBarClose_gvF7",announcementBarContent:"announcementBarContent_xLdY"};function A(){const{announcementBar:e}=(0,S.y)(),{isActive:n,close:t}=(0,w.el)();if(!n)return null;const{backgroundColor:r,textColor:o,isCloseable:a}=e;return(0,u.jsxs)("div",{className:_.announcementBar,style:{backgroundColor:r,color:o},role:"banner",children:[a&&(0,u.jsx)("div",{className:_.announcementBarPlaceholder}),(0,u.jsx)(C,{className:_.announcementBarContent}),a&&(0,u.jsx)(T,{onClick:t,className:_.announcementBarClose})]})}var I=t(8200),P=t(3943);var L=t(1100),R=t(5168);const N=r.createContext(null);function O(e){let{children:n}=e;const t=function(){const e=(0,I.q)(),n=(0,R.MF)(),[t,o]=(0,r.useState)(!1),a=null!==n.component,i=(0,L.i0)(a);return(0,r.useEffect)((()=>{a&&!i&&o(!0)}),[a,i]),(0,r.useEffect)((()=>{a?e.shown||o(!0):o(!1)}),[e.shown,a]),(0,r.useMemo)((()=>[t,o]),[t])}();return(0,u.jsx)(N.Provider,{value:t,children:n})}function F(e){if(e.component){const n=e.component;return(0,u.jsx)(n,{...e.props})}}function j(){const e=(0,r.useContext)(N);if(!e)throw new L.AH("NavbarSecondaryMenuDisplayProvider");const[n,t]=e,o=(0,r.useCallback)((()=>t(!1)),[t]),a=(0,R.MF)();return(0,r.useMemo)((()=>({shown:n,hide:o,content:F(a)})),[o,a,n])}function D(e){let{header:n,primaryMenu:t,secondaryMenu:r}=e;const{shown:a}=j();return(0,u.jsxs)("div",{className:"navbar-sidebar",children:[n,(0,u.jsxs)("div",{className:(0,o.c)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":a}),children:[(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:t}),(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:r})]})]})}var M=t(6528),B=t(3664);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:"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 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:"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 V={toggle:"toggle_vylO",toggleButton:"toggleButton_gllP",darkToggleIcon:"darkToggleIcon_wfgR",lightToggleIcon:"lightToggleIcon_pyhR",toggleButtonDisabled:"toggleButtonDisabled_aARS"};function z(e){let{className:n,buttonClassName:t,value:r,onChange:a}=e;const i=(0,B.c)(),s=(0,l.G)({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,l.G)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,l.G)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return(0,u.jsx)("div",{className:(0,o.c)(V.toggle,n),children:(0,u.jsxs)("button",{className:(0,o.c)("clean-btn",V.toggleButton,!i&&V.toggleButtonDisabled,t),type:"button",onClick:()=>a("dark"===r?"light":"dark"),disabled:!i,title:s,"aria-label":s,"aria-live":"polite",children:[(0,u.jsx)($,{className:(0,o.c)(V.toggleIcon,V.lightToggleIcon)}),(0,u.jsx)(U,{className:(0,o.c)(V.toggleIcon,V.darkToggleIcon)})]})})}const H=r.memo(z),W={darkNavbarColorModeToggle:"darkNavbarColorModeToggle_X3D1"};function G(e){let{className:n}=e;const t=(0,S.y)().navbar.style,r=(0,S.y)().colorMode.disableSwitch,{colorMode:o,setColorMode:a}=(0,M.U)();return r?null:(0,u.jsx)(H,{className:n,buttonClassName:"dark"===t?W.darkNavbarColorModeToggle:void 0,value:o,onChange:a})}var q=t(8164);function Y(){return(0,u.jsx)(q.c,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function K(){const e=(0,I.q)();return(0,u.jsx)("button",{type:"button","aria-label":(0,l.G)({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)(x,{color:"var(--ifm-color-emphasis-600)"})})}function X(){return(0,u.jsxs)("div",{className:"navbar-sidebar__brand",children:[(0,u.jsx)(Y,{}),(0,u.jsx)(G,{className:"margin-right--md"}),(0,u.jsx)(K,{})]})}var Q=t(867),Z=t(964),J=t(8136),ee=t(1064),ne=t(3232);function te(e){let{activeBasePath:n,activeBaseRegex:t,to:r,href:o,label:a,html:i,isDropdownLink:s,prependBaseUrlToHref:l,...c}=e;const d=(0,Z.c)(r),p=(0,Z.c)(n),f=(0,Z.c)(o,{forcePrependBaseUrl:!0}),m=a&&o&&!(0,J.c)(o),g=i?{dangerouslySetInnerHTML:{__html:i}}:{children:(0,u.jsxs)(u.Fragment,{children:[a,m&&(0,u.jsx)(ne.c,{...s&&{width:12,height:12}})]})};return o?(0,u.jsx)(Q.c,{href:l?f:o,...c,...g}):(0,u.jsx)(Q.c,{to:d,isNavLink:!0,...(n||t)&&{isActive:(e,n)=>t?(0,ee._)(t,n.pathname):n.pathname.startsWith(p)},...c,...g})}function re(e){let{className:n,isDropdownItem:t=!1,...r}=e;const a=(0,u.jsx)(te,{className:(0,o.c)(t?"dropdown__link":"navbar__item navbar__link",n),isDropdownLink:t,...r});return t?(0,u.jsx)("li",{children:a}):a}function oe(e){let{className:n,isDropdownItem:t,...r}=e;return(0,u.jsx)("li",{className:"menu__list-item",children:(0,u.jsx)(te,{className:(0,o.c)("menu__link",n),...r})})}function ae(e){let{mobile:n=!1,position:t,...r}=e;const o=n?oe:re;return(0,u.jsx)(o,{...r,activeClassName:r.activeClassName??(n?"menu__link--active":"navbar__link--active")})}var ie=t(8448),se=t(3376),le=t(8264);const ce={dropdownNavbarItemMobile:"dropdownNavbarItemMobile_S0Fm"};function ue(e,n){return e.some((e=>function(e,n){return!!(0,se.Sc)(e.to,n)||!!(0,ee._)(e.activeBaseRegex,n)||!(!e.activeBasePath||!n.startsWith(e.activeBasePath))}(e,n)))}function de(e){let{items:n,position:t,className:a,onClick:i,...s}=e;const l=(0,r.useRef)(null),[c,d]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{const e=e=>{l.current&&!l.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)}}),[l]),(0,u.jsxs)("div",{ref:l,className:(0,o.c)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===t,"dropdown--show":c}),children:[(0,u.jsx)(te,{"aria-haspopup":"true","aria-expanded":c,role:"button",href:s.to?void 0:"#",className:(0,o.c)("navbar__link",a),...s,onClick:s.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),d(!c))},children:s.children??s.label}),(0,u.jsx)("ul",{className:"dropdown__menu",children:n.map(((e,n)=>(0,r.createElement)(He,{isDropdownItem:!0,activeClassName:"dropdown__link--active",...e,key:n})))})]})}function pe(e){let{items:n,className:t,position:a,onClick:i,...l}=e;const c=function(){const{siteConfig:{baseUrl:e}}=(0,le.c)(),{pathname:n}=(0,s.IT)();return n.replace(e,"/")}(),d=ue(n,c),{collapsed:p,toggleCollapsed:f,setCollapsed:m}=(0,ie.a)({initialState:()=>!d});return(0,r.useEffect)((()=>{d&&m(!d)}),[c,d,m]),(0,u.jsxs)("li",{className:(0,o.c)("menu__list-item",{"menu__list-item--collapsed":p}),children:[(0,u.jsx)(te,{role:"button",className:(0,o.c)(ce.dropdownNavbarItemMobile,"menu__link menu__link--sublist menu__link--sublist-caret",t),...l,onClick:e=>{e.preventDefault(),f()},children:l.children??l.label}),(0,u.jsx)(ie.U,{lazy:!0,as:"ul",className:"menu__list",collapsed:p,children:n.map(((e,n)=>(0,r.createElement)(He,{mobile:!0,isDropdownItem:!0,onClick:i,activeClassName:"menu__link--active",...e,key:n})))})]})}function fe(e){let{mobile:n=!1,...t}=e;const r=n?pe:de;return(0,u.jsx)(r,{...t})}var me=t(1616);function ge(e){let{width:n=20,height:t=20,...r}=e;return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:n,height:t,"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 he="iconLanguage_nlXk";var ye=t(7104);function be(){return r.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},r.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}var ve=t(5052),Se=["translations"];function we(){return we=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},we.apply(this,arguments)}function xe(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var r,o,a=[],i=!0,s=!1;try{for(t=t.call(e);!(i=(r=t.next()).done)&&(a.push(r.value),!n||a.length!==n);i=!0);}catch(l){s=!0,o=l}finally{try{i||null==t.return||t.return()}finally{if(s)throw o}}return a}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return ke(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return ke(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function ke(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function Te(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var Ee="Ctrl";var Ce=r.forwardRef((function(e,n){var t=e.translations,o=void 0===t?{}:t,a=Te(e,Se),i=o.buttonText,s=void 0===i?"Search":i,l=o.buttonAriaLabel,c=void 0===l?"Search":l,u=xe((0,r.useState)(null),2),d=u[0],p=u[1];return(0,r.useEffect)((function(){"undefined"!=typeof navigator&&(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?p("\u2318"):p(Ee))}),[]),r.createElement("button",we({type:"button",className:"DocSearch DocSearch-Button","aria-label":c},a,{ref:n}),r.createElement("span",{className:"DocSearch-Button-Container"},r.createElement(ve.I,null),r.createElement("span",{className:"DocSearch-Button-Placeholder"},s)),r.createElement("span",{className:"DocSearch-Button-Keys"},null!==d&&r.createElement(r.Fragment,null,r.createElement("kbd",{className:"DocSearch-Button-Key"},d===Ee?r.createElement(be,null):d),r.createElement("kbd",{className:"DocSearch-Button-Key"},"K"))))})),_e=t(6952),Ae=t(7092),Ie=t(9032),Pe=t(4456);const Le={button:{buttonText:(0,l.G)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"}),buttonAriaLabel:(0,l.G)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"})},modal:{searchBox:{resetButtonTitle:(0,l.G)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),resetButtonAriaLabel:(0,l.G)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),cancelButtonText:(0,l.G)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"}),cancelButtonAriaLabel:(0,l.G)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"})},startScreen:{recentSearchesTitle:(0,l.G)({id:"theme.SearchModal.startScreen.recentSearchesTitle",message:"Recent",description:"The title for recent searches"}),noRecentSearchesText:(0,l.G)({id:"theme.SearchModal.startScreen.noRecentSearchesText",message:"No recent searches",description:"The text when no recent searches"}),saveRecentSearchButtonTitle:(0,l.G)({id:"theme.SearchModal.startScreen.saveRecentSearchButtonTitle",message:"Save this search",description:"The label for save recent search button"}),removeRecentSearchButtonTitle:(0,l.G)({id:"theme.SearchModal.startScreen.removeRecentSearchButtonTitle",message:"Remove this search from history",description:"The label for remove recent search button"}),favoriteSearchesTitle:(0,l.G)({id:"theme.SearchModal.startScreen.favoriteSearchesTitle",message:"Favorite",description:"The title for favorite searches"}),removeFavoriteSearchButtonTitle:(0,l.G)({id:"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle",message:"Remove this search from favorites",description:"The label for remove favorite search button"})},errorScreen:{titleText:(0,l.G)({id:"theme.SearchModal.errorScreen.titleText",message:"Unable to fetch results",description:"The title for error screen of search modal"}),helpText:(0,l.G)({id:"theme.SearchModal.errorScreen.helpText",message:"You might want to check your network connection.",description:"The help text for error screen of search modal"})},footer:{selectText:(0,l.G)({id:"theme.SearchModal.footer.selectText",message:"to select",description:"The explanatory text of the action for the enter key"}),selectKeyAriaLabel:(0,l.G)({id:"theme.SearchModal.footer.selectKeyAriaLabel",message:"Enter key",description:"The ARIA label for the Enter key button that makes the selection"}),navigateText:(0,l.G)({id:"theme.SearchModal.footer.navigateText",message:"to navigate",description:"The explanatory text of the action for the Arrow up and Arrow down key"}),navigateUpKeyAriaLabel:(0,l.G)({id:"theme.SearchModal.footer.navigateUpKeyAriaLabel",message:"Arrow up",description:"The ARIA label for the Arrow up key button that makes the navigation"}),navigateDownKeyAriaLabel:(0,l.G)({id:"theme.SearchModal.footer.navigateDownKeyAriaLabel",message:"Arrow down",description:"The ARIA label for the Arrow down key button that makes the navigation"}),closeText:(0,l.G)({id:"theme.SearchModal.footer.closeText",message:"to close",description:"The explanatory text of the action for Escape key"}),closeKeyAriaLabel:(0,l.G)({id:"theme.SearchModal.footer.closeKeyAriaLabel",message:"Escape key",description:"The ARIA label for the Escape key button that close the modal"}),searchByText:(0,l.G)({id:"theme.SearchModal.footer.searchByText",message:"Search by",description:"The text explain that the search is making by Algolia"})},noResultsScreen:{noResultsText:(0,l.G)({id:"theme.SearchModal.noResultsScreen.noResultsText",message:"No results for",description:"The text explains that there are no results for the following search"}),suggestedQueryText:(0,l.G)({id:"theme.SearchModal.noResultsScreen.suggestedQueryText",message:"Try searching for",description:"The text for the suggested query when no results are found for the following search"}),reportMissingResultsText:(0,l.G)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsText",message:"Believe this query should return results?",description:"The text for the question where the user thinks there are missing results"}),reportMissingResultsLinkText:(0,l.G)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText",message:"Let us know.",description:"The text for the link to report missing results"})}},placeholder:(0,l.G)({id:"theme.SearchModal.placeholder",message:"Search docs",description:"The placeholder of the input of the DocSearch pop-up modal"})};let Re=null;function Ne(e){let{hit:n,children:t}=e;return(0,u.jsx)(Q.c,{to:n.url,children:t})}function Oe(e){let{state:n,onClose:t}=e;const r=(0,Ae.Y)();return(0,u.jsx)(Q.c,{to:r(n.query),onClick:t,children:(0,u.jsx)(l.c,{id:"theme.SearchBar.seeAll",values:{count:n.context.nbHits},children:"See all {count} results"})})}function Fe(e){let{contextualSearch:n,externalUrlRegex:o,...a}=e;const{siteMetadata:i}=(0,le.c)(),l=(0,Ie.Q)(),c=function(){const{locale:e,tags:n}=(0,Pe.mY)();return[`language:${e}`,n.map((e=>`docusaurus_tag:${e}`))]}(),d=a.searchParameters?.facetFilters??[],p=n?function(e,n){const t=e=>"string"==typeof e?[e]:e;return[...t(e),...t(n)]}(c,d):d,f={...a.searchParameters,facetFilters:p},m=(0,s.Uz)(),g=(0,r.useRef)(null),h=(0,r.useRef)(null),[y,b]=(0,r.useState)(!1),[v,S]=(0,r.useState)(void 0),w=(0,r.useCallback)((()=>Re?Promise.resolve():Promise.all([t.e(2528).then(t.bind(t,148)),Promise.all([t.e(2176),t.e(1676)]).then(t.bind(t,1676)),Promise.all([t.e(2176),t.e(8879)]).then(t.bind(t,8879))]).then((e=>{let[{DocSearchModal:n}]=e;Re=n}))),[]),x=(0,r.useCallback)((()=>{w().then((()=>{g.current=document.createElement("div"),document.body.insertBefore(g.current,document.body.firstChild),b(!0)}))}),[w,b]),k=(0,r.useCallback)((()=>{b(!1),g.current?.remove()}),[b]),T=(0,r.useCallback)((e=>{w().then((()=>{b(!0),S(e.key)}))}),[w,b,S]),E=(0,r.useRef)({navigate(e){let{itemUrl:n}=e;(0,ee._)(o,n)?window.location.href=n:m.push(n)}}).current,C=(0,r.useRef)((e=>a.transformItems?a.transformItems(e):e.map((e=>({...e,url:l(e.url)}))))).current,_=(0,r.useMemo)((()=>e=>(0,u.jsx)(Oe,{...e,onClose:k})),[k]),A=(0,r.useCallback)((e=>(e.addAlgoliaAgent("docusaurus",i.docusaurusVersion),e)),[i.docusaurusVersion]);return function(e){var n=e.isOpen,t=e.onOpen,o=e.onClose,a=e.onInput,i=e.searchButtonRef;r.useEffect((function(){function e(e){var r;(27===e.keyCode&&n||"k"===(null===(r=e.key)||void 0===r?void 0:r.toLowerCase())&&(e.metaKey||e.ctrlKey)||!function(e){var n=e.target,t=n.tagName;return n.isContentEditable||"INPUT"===t||"SELECT"===t||"TEXTAREA"===t}(e)&&"/"===e.key&&!n)&&(e.preventDefault(),n?o():document.body.classList.contains("DocSearch--active")||document.body.classList.contains("DocSearch--active")||t()),i&&i.current===document.activeElement&&a&&/[a-zA-Z0-9]/.test(String.fromCharCode(e.keyCode))&&a(e)}return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}}),[n,t,o,a,i])}({isOpen:y,onOpen:x,onClose:k,onInput:T,searchButtonRef:h}),(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(_e.c,{children:(0,u.jsx)("link",{rel:"preconnect",href:`https://${a.appId}-dsn.algolia.net`,crossOrigin:"anonymous"})}),(0,u.jsx)(Ce,{onTouchStart:w,onFocus:w,onMouseOver:w,onClick:x,ref:h,translations:Le.button}),y&&Re&&g.current&&(0,ye.createPortal)((0,u.jsx)(Re,{onClose:k,initialScrollY:window.scrollY,initialQuery:v,navigator:E,transformItems:C,hitComponent:Ne,transformSearchClient:A,...a.searchPagePath&&{resultsFooterComponent:_},...a,searchParameters:f,placeholder:Le.placeholder,translations:Le.modal}),g.current)]})}function je(){const{siteConfig:e}=(0,le.c)();return(0,u.jsx)(Fe,{...e.themeConfig.algolia})}const De={navbarSearchContainer:"navbarSearchContainer_Bca1"};function Me(e){let{children:n,className:t}=e;return(0,u.jsx)("div",{className:(0,o.c)(t,De.navbarSearchContainer),children:n})}var Be=t(5172),$e=t(9940);var Ue=t(4592);const Ve=e=>e.docs.find((n=>n.id===e.mainDocId));const ze={default:ae,localeDropdown:function(e){let{mobile:n,dropdownItemsBefore:t,dropdownItemsAfter:r,queryString:o="",...a}=e;const{i18n:{currentLocale:i,locales:c,localeConfigs:d}}=(0,le.c)(),p=(0,me.D)(),{search:f,hash:m}=(0,s.IT)(),g=[...t,...c.map((e=>{const t=`${`pathname://${p.createUrl({locale:e,fullyQualified:!1})}`}${f}${m}${o}`;return{label:d[e].label,lang:d[e].htmlLang,to:t,target:"_self",autoAddBaseUrl:!1,className:e===i?n?"menu__link--active":"dropdown__link--active":""}})),...r],h=n?(0,l.G)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):d[i].label;return(0,u.jsx)(fe,{...a,mobile:n,label:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(ge,{className:he}),h]}),items:g})},search:function(e){let{mobile:n,className:t}=e;return n?null:(0,u.jsx)(Me,{className:t,children:(0,u.jsx)(je,{})})},dropdown:fe,html:function(e){let{value:n,className:t,mobile:r=!1,isDropdownItem:a=!1}=e;const i=a?"li":"div";return(0,u.jsx)(i,{className:(0,o.c)({navbar__item:!r&&!a,"menu__list-item":r},t),dangerouslySetInnerHTML:{__html:n}})},doc:function(e){let{docId:n,label:t,docsPluginId:r,...o}=e;const{activeDoc:a}=(0,Be.wB)(r),i=(0,$e.Qf)(n,r),s=a?.path===i?.path;return null===i||i.unlisted&&!s?null:(0,u.jsx)(ae,{exact:!0,...o,isActive:()=>s||!!a?.sidebar&&a.sidebar===i.sidebar,label:t??i.id,to:i.path})},docSidebar:function(e){let{sidebarId:n,label:t,docsPluginId:r,...o}=e;const{activeDoc:a}=(0,Be.wB)(r),i=(0,$e.Ab)(n,r).link;if(!i)throw new Error(`DocSidebarNavbarItem: Sidebar with ID "${n}" doesn't have anything to be linked to.`);return(0,u.jsx)(ae,{exact:!0,...o,isActive:()=>a?.sidebar===n,label:t??i.label,to:i.path})},docsVersion:function(e){let{label:n,to:t,docsPluginId:r,...o}=e;const a=(0,$e.b7)(r)[0],i=n??a.label,s=t??(e=>e.docs.find((n=>n.id===e.mainDocId)))(a).path;return(0,u.jsx)(ae,{...o,label:i,to:s})},docsVersionDropdown:function(e){let{mobile:n,docsPluginId:t,dropdownActiveClassDisabled:r,dropdownItemsBefore:o,dropdownItemsAfter:a,...i}=e;const{search:c,hash:d}=(0,s.IT)(),p=(0,Be.wB)(t),f=(0,Be.gN)(t),{savePreferredVersionName:m}=(0,Ue.iy)(t),g=[...o,...f.map((e=>{const n=p.alternateDocVersions[e.name]??Ve(e);return{label:e.label,to:`${n.path}${c}${d}`,isActive:()=>e===p.activeVersion,onClick:()=>m(e.name)}})),...a],h=(0,$e.b7)(t)[0],y=n&&g.length>1?(0,l.G)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):h.label,b=n&&g.length>1?void 0:Ve(h).path;return g.length<=1?(0,u.jsx)(ae,{...i,mobile:n,label:y,to:b,isActive:r?()=>!1:void 0}):(0,u.jsx)(fe,{...i,mobile:n,label:y,to:b,items:g,isActive:r?()=>!1:void 0})}};function He(e){let{type:n,...t}=e;const r=function(e,n){return e&&"default"!==e?e:"items"in n?"dropdown":"default"}(n,t),o=ze[r];if(!o)throw new Error(`No NavbarItem component found for type "${n}".`);return(0,u.jsx)(o,{...t})}function We(){const e=(0,I.q)(),n=(0,S.y)().navbar.items;return(0,u.jsx)("ul",{className:"menu__list",children:n.map(((n,t)=>(0,r.createElement)(He,{mobile:!0,...n,onClick:()=>e.toggle(),key:t})))})}function Ge(e){return(0,u.jsx)("button",{...e,type:"button",className:"clean-btn navbar-sidebar__back",children:(0,u.jsx)(l.c,{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 qe(){const e=0===(0,S.y)().navbar.items.length,n=j();return(0,u.jsxs)(u.Fragment,{children:[!e&&(0,u.jsx)(Ge,{onClick:()=>n.hide()}),n.content]})}function Ye(){const e=(0,I.q)();var n;return void 0===(n=e.shown)&&(n=!0),(0,r.useEffect)((()=>(document.body.style.overflow=n?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[n]),e.shouldRender?(0,u.jsx)(D,{header:(0,u.jsx)(X,{}),primaryMenu:(0,u.jsx)(We,{}),secondaryMenu:(0,u.jsx)(qe,{})}):null}const Ke={navbarHideable:"navbarHideable_m1mJ",navbarHidden:"navbarHidden_jGov"};function Xe(e){return(0,u.jsx)("div",{role:"presentation",...e,className:(0,o.c)("navbar-sidebar__backdrop",e.className)})}function Qe(e){let{children:n}=e;const{navbar:{hideOnScroll:t,style:a}}=(0,S.y)(),i=(0,I.q)(),{navbarRef:s,isNavbarVisible:d}=function(e){const[n,t]=(0,r.useState)(e),o=(0,r.useRef)(!1),a=(0,r.useRef)(0),i=(0,r.useCallback)((e=>{null!==e&&(a.current=e.getBoundingClientRect().height)}),[]);return(0,P.SM)(((n,r)=>{let{scrollY:i}=n;if(!e)return;if(i<a.current)return void t(!0);if(o.current)return void(o.current=!1);const s=r?.scrollY,l=document.documentElement.scrollHeight-a.current,c=window.innerHeight;s&&i>=s?t(!1):i+c<l&&t(!0)})),(0,c.c)((n=>{if(!e)return;const r=n.location.hash;if(r?document.getElementById(r.substring(1)):void 0)return o.current=!0,void t(!1);t(!0)})),{navbarRef:i,isNavbarVisible:n}}(t);return(0,u.jsxs)("nav",{ref:s,"aria-label":(0,l.G)({id:"theme.NavBar.navAriaLabel",message:"Main",description:"The ARIA label for the main navigation"}),className:(0,o.c)("navbar","navbar--fixed-top",t&&[Ke.navbarHideable,!d&&Ke.navbarHidden],{"navbar--dark":"dark"===a,"navbar--primary":"primary"===a,"navbar-sidebar--show":i.shown}),children:[n,(0,u.jsx)(Xe,{onClick:i.toggle}),(0,u.jsx)(Ye,{})]})}var Ze=t(5684);const Je={errorBoundaryError:"errorBoundaryError_a6uf",errorBoundaryFallback:"errorBoundaryFallback_VBag"};function en(e){return(0,u.jsx)("button",{type:"button",...e,children:(0,u.jsx)(l.c,{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 nn(e){let{error:n}=e;const t=(0,Ze.getErrorCausalChain)(n).map((e=>e.message)).join("\n\nCause:\n");return(0,u.jsx)("p",{className:Je.errorBoundaryError,children:t})}class tn extends r.Component{componentDidCatch(e,n){throw this.props.onError(e,n)}render(){return this.props.children}}const rn="right";function on(e){let{width:n=30,height:t=30,className:r,...o}=e;return(0,u.jsx)("svg",{className:r,width:n,height:t,viewBox:"0 0 30 30","aria-hidden":"true",...o,children:(0,u.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"})})}function an(){const{toggle:e,shown:n}=(0,I.q)();return(0,u.jsx)("button",{onClick:e,"aria-label":(0,l.G)({id:"theme.docs.sidebar.toggleSidebarButtonAriaLabel",message:"Toggle navigation bar",description:"The ARIA label for hamburger menu button of mobile navigation"}),"aria-expanded":n,className:"navbar__toggle clean-btn",type:"button",children:(0,u.jsx)(on,{})})}const sn={colorModeToggle:"colorModeToggle_DEke"};function ln(e){let{items:n}=e;return(0,u.jsx)(u.Fragment,{children:n.map(((e,n)=>(0,u.jsx)(tn,{onError:n=>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:n}),children:(0,u.jsx)(He,{...e})},n)))})}function cn(e){let{left:n,right:t}=e;return(0,u.jsxs)("div",{className:"navbar__inner",children:[(0,u.jsx)("div",{className:"navbar__items",children:n}),(0,u.jsx)("div",{className:"navbar__items navbar__items--right",children:t})]})}function un(){const e=(0,I.q)(),n=(0,S.y)().navbar.items,[t,r]=function(e){function n(e){return"left"===(e.position??rn)}return[e.filter(n),e.filter((e=>!n(e)))]}(n),o=n.find((e=>"search"===e.type));return(0,u.jsx)(cn,{left:(0,u.jsxs)(u.Fragment,{children:[!e.disabled&&(0,u.jsx)(an,{}),(0,u.jsx)(Y,{}),(0,u.jsx)(ln,{items:t})]}),right:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(ln,{items:r}),(0,u.jsx)(G,{className:sn.colorModeToggle}),!o&&(0,u.jsx)(Me,{children:(0,u.jsx)(je,{})})]})})}function dn(){return(0,u.jsx)(Qe,{children:(0,u.jsx)(un,{})})}function pn(e){let{item:n}=e;const{to:t,href:r,label:o,prependBaseUrlToHref:a,...i}=n,s=(0,Z.c)(t),l=(0,Z.c)(r,{forcePrependBaseUrl:!0});return(0,u.jsxs)(Q.c,{className:"footer__link-item",...r?{href:a?l:r}:{to:s},...i,children:[o,r&&!(0,J.c)(r)&&(0,u.jsx)(ne.c,{})]})}function fn(e){let{item:n}=e;return n.html?(0,u.jsx)("li",{className:"footer__item",dangerouslySetInnerHTML:{__html:n.html}}):(0,u.jsx)("li",{className:"footer__item",children:(0,u.jsx)(pn,{item:n})},n.href??n.to)}function mn(e){let{column:n}=e;return(0,u.jsxs)("div",{className:"col footer__col",children:[(0,u.jsx)("div",{className:"footer__title",children:n.title}),(0,u.jsx)("ul",{className:"footer__items clean-list",children:n.items.map(((e,n)=>(0,u.jsx)(fn,{item:e},n)))})]})}function gn(e){let{columns:n}=e;return(0,u.jsx)("div",{className:"row footer__links",children:n.map(((e,n)=>(0,u.jsx)(mn,{column:e},n)))})}function hn(){return(0,u.jsx)("span",{className:"footer__link-separator",children:"\xb7"})}function yn(e){let{item:n}=e;return n.html?(0,u.jsx)("span",{className:"footer__link-item",dangerouslySetInnerHTML:{__html:n.html}}):(0,u.jsx)(pn,{item:n})}function bn(e){let{links:n}=e;return(0,u.jsx)("div",{className:"footer__links text--center",children:(0,u.jsx)("div",{className:"footer__links",children:n.map(((e,t)=>(0,u.jsxs)(r.Fragment,{children:[(0,u.jsx)(yn,{item:e}),n.length!==t+1&&(0,u.jsx)(hn,{})]},t)))})})}function vn(e){let{links:n}=e;return function(e){return"title"in e[0]}(n)?(0,u.jsx)(gn,{columns:n}):(0,u.jsx)(bn,{links:n})}var Sn=t(1964);const wn={footerLogoLink:"footerLogoLink_BH7S"};function xn(e){let{logo:n}=e;const{withBaseUrl:t}=(0,Z.E)(),r={light:t(n.src),dark:t(n.srcDark??n.src)};return(0,u.jsx)(Sn.c,{className:(0,o.c)("footer__logo",n.className),alt:n.alt,sources:r,width:n.width,height:n.height,style:n.style})}function kn(e){let{logo:n}=e;return n.href?(0,u.jsx)(Q.c,{href:n.href,className:wn.footerLogoLink,target:n.target,children:(0,u.jsx)(xn,{logo:n})}):(0,u.jsx)(xn,{logo:n})}function Tn(e){let{copyright:n}=e;return(0,u.jsx)("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:n}})}function En(e){let{style:n,links:t,logo:r,copyright:a}=e;return(0,u.jsx)("footer",{className:(0,o.c)("footer",{"footer--dark":"dark"===n}),children:(0,u.jsxs)("div",{className:"container container-fluid",children:[t,(r||a)&&(0,u.jsxs)("div",{className:"footer__bottom text--center",children:[r&&(0,u.jsx)("div",{className:"margin-bottom--sm",children:r}),a]})]})})}function Cn(){const{footer:e}=(0,S.y)();if(!e)return null;const{copyright:n,links:t,logo:r,style:o}=e;return(0,u.jsx)(En,{style:o,links:t&&t.length>0&&(0,u.jsx)(vn,{links:t}),logo:r&&(0,u.jsx)(kn,{logo:r}),copyright:n&&(0,u.jsx)(Tn,{copyright:n})})}const _n=r.memo(Cn),An=(0,L.qY)([M.C,w.qu,P.S2,Ue.gc,i.w7,function(e){let{children:n}=e;return(0,u.jsx)(R.Ub,{children:(0,u.jsx)(I.y,{children:(0,u.jsx)(O,{children:n})})})}]);function In(e){let{children:n}=e;return(0,u.jsx)(An,{children:n})}var Pn=t(6448);function Ln(e){let{error:n,tryAgain:t}=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)(Pn.c,{as:"h1",className:"hero__title",children:(0,u.jsx)(l.c,{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)(en,{onClick:t,className:"button button--primary shadow--lw"})}),(0,u.jsx)("hr",{}),(0,u.jsx)("div",{className:"margin-vert--md",children:(0,u.jsx)(nn,{error:n})})]})})})}const Rn={mainWrapper:"mainWrapper_z2l0"};function Nn(e){const{children:n,noFooter:t,wrapperClassName:r,title:s,description:l}=e;return(0,y.W)(),(0,u.jsxs)(In,{children:[(0,u.jsx)(i.U7,{title:s,description:l}),(0,u.jsx)(v,{}),(0,u.jsx)(A,{}),(0,u.jsx)(dn,{}),(0,u.jsx)("div",{id:d,className:(0,o.c)(h.W.wrapper.main,Rn.mainWrapper,r),children:(0,u.jsx)(a.c,{fallback:e=>(0,u.jsx)(Ln,{...e}),children:n})}),!t&&(0,u.jsx)(_n,{})]})}},8164:(e,n,t)=>{"use strict";t.d(n,{c:()=>u});t(1504);var r=t(867),o=t(964),a=t(8264),i=t(1824),s=t(1964),l=t(7624);function c(e){let{logo:n,alt:t,imageClassName:r}=e;const a={light:(0,o.c)(n.src),dark:(0,o.c)(n.srcDark||n.src)},i=(0,l.jsx)(s.c,{className:n.className,sources:a,height:n.height,width:n.width,alt:t,style:n.style});return r?(0,l.jsx)("div",{className:r,children:i}):i}function u(e){const{siteConfig:{title:n}}=(0,a.c)(),{navbar:{title:t,logo:s}}=(0,i.y)(),{imageClassName:u,titleClassName:d,...p}=e,f=(0,o.c)(s?.href||"/"),m=t?"":n,g=s?.alt??m;return(0,l.jsxs)(r.c,{to:f,...p,...s?.target&&{target:s.target},children:[s&&(0,l.jsx)(c,{logo:s,alt:g,imageClassName:u}),null!=t&&(0,l.jsx)("b",{className:d,children:t})]})}},8712:(e,n,t)=>{"use strict";t.d(n,{c:()=>a});t(1504);var r=t(6952),o=t(7624);function a(e){let{locale:n,version:t,tag:a}=e;const i=n;return(0,o.jsxs)(r.c,{children:[n&&(0,o.jsx)("meta",{name:"docusaurus_locale",content:n}),t&&(0,o.jsx)("meta",{name:"docusaurus_version",content:t}),a&&(0,o.jsx)("meta",{name:"docusaurus_tag",content:a}),i&&(0,o.jsx)("meta",{name:"docsearch:language",content:i}),t&&(0,o.jsx)("meta",{name:"docsearch:version",content:t}),a&&(0,o.jsx)("meta",{name:"docsearch:docusaurus_tag",content:a})]})}},1964:(e,n,t)=>{"use strict";t.d(n,{c:()=>u});var r=t(1504),o=t(5456),a=t(3664),i=t(6528);const s={themedComponent:"themedComponent_mlkZ","themedComponent--light":"themedComponent--light_NVdE","themedComponent--dark":"themedComponent--dark_xIcU"};var l=t(7624);function c(e){let{className:n,children:t}=e;const c=(0,a.c)(),{colorMode:u}=(0,i.U)();return(0,l.jsx)(l.Fragment,{children:(c?"dark"===u?["dark"]:["light"]:["light","dark"]).map((e=>{const a=t({theme:e,className:(0,o.c)(n,s.themedComponent,s[`themedComponent--${e}`])});return(0,l.jsx)(r.Fragment,{children:a},e)}))})}function u(e){const{sources:n,className:t,alt:r,...o}=e;return(0,l.jsx)(c,{className:t,children:e=>{let{theme:t,className:a}=e;return(0,l.jsx)("img",{src:n[t],alt:r,className:a,...o})}})}},8448:(e,n,t)=>{"use strict";t.d(n,{U:()=>y,a:()=>c});var r=t(1504),o=t(8684),a=t(5288),i=t(3856),s=t(7624);const l="ease-in-out";function c(e){let{initialState:n}=e;const[t,o]=(0,r.useState)(n??!1),a=(0,r.useCallback)((()=>{o((e=>!e))}),[]);return{collapsed:t,setCollapsed:o,toggleCollapsed:a}}const u={display:"none",overflow:"hidden",height:"0px"},d={display:"block",overflow:"visible",height:"auto"};function p(e,n){const t=n?u:d;e.style.display=t.display,e.style.overflow=t.overflow,e.style.height=t.height}function f(e){let{collapsibleRef:n,collapsed:t,animation:o}=e;const a=(0,r.useRef)(!1);(0,r.useEffect)((()=>{const e=n.current;function r(){const n=e.scrollHeight,t=o?.duration??function(e){if((0,i.I)())return 1;const n=e/36;return Math.round(10*(4+15*n**.25+n/5))}(n);return{transition:`height ${t}ms ${o?.easing??l}`,height:`${n}px`}}function s(){const n=r();e.style.transition=n.transition,e.style.height=n.height}if(!a.current)return p(e,t),void(a.current=!0);return e.style.willChange="height",function(){const n=requestAnimationFrame((()=>{t?(s(),requestAnimationFrame((()=>{e.style.height=u.height,e.style.overflow=u.overflow}))):(e.style.display="block",requestAnimationFrame((()=>{s()})))}));return()=>cancelAnimationFrame(n)}()}),[n,t,o])}function m(e){if(!o.c.canUseDOM)return e?u:d}function g(e){let{as:n="div",collapsed:t,children:o,animation:a,onCollapseTransitionEnd:i,className:l,disableSSRStyle:c}=e;const u=(0,r.useRef)(null);return f({collapsibleRef:u,collapsed:t,animation:a}),(0,s.jsx)(n,{ref:u,style:c?void 0:m(t),onTransitionEnd:e=>{"height"===e.propertyName&&(p(u.current,t),i?.(t))},className:l,children:o})}function h(e){let{collapsed:n,...t}=e;const[o,i]=(0,r.useState)(!n),[l,c]=(0,r.useState)(n);return(0,a.c)((()=>{n||i(!0)}),[n]),(0,a.c)((()=>{o&&c(n)}),[o,n]),o?(0,s.jsx)(g,{...t,collapsed:l}):null}function y(e){let{lazy:n,...t}=e;const r=n?h:g;return(0,s.jsx)(r,{...t})}},3868:(e,n,t)=>{"use strict";t.d(n,{el:()=>g,qu:()=>m});var r=t(1504),o=t(3664),a=t(1148),i=t(1100),s=t(1824),l=t(7624);const c=(0,a.GS)("docusaurus.announcement.dismiss"),u=(0,a.GS)("docusaurus.announcement.id"),d=()=>"true"===c.get(),p=e=>c.set(String(e)),f=r.createContext(null);function m(e){let{children:n}=e;const t=function(){const{announcementBar:e}=(0,s.y)(),n=(0,o.c)(),[t,a]=(0,r.useState)((()=>!!n&&d()));(0,r.useEffect)((()=>{a(d())}),[]);const i=(0,r.useCallback)((()=>{p(!0),a(!0)}),[]);return(0,r.useEffect)((()=>{if(!e)return;const{id:n}=e;let t=u.get();"annoucement-bar"===t&&(t="announcement-bar");const r=n!==t;u.set(n),r&&p(!1),!r&&d()||a(!1)}),[e]),(0,r.useMemo)((()=>({isActive:!!e&&!t,close:i})),[e,t,i])}();return(0,l.jsx)(f.Provider,{value:t,children:n})}function g(){const e=(0,r.useContext)(f);if(!e)throw new i.AH("AnnouncementBarProvider");return e}},6528:(e,n,t)=>{"use strict";t.d(n,{C:()=>h,U:()=>y});var r=t(1504),o=t(8684),a=t(1100),i=t(1148),s=t(1824),l=t(7624);const c=r.createContext(void 0),u="theme",d=(0,i.GS)(u),p={light:"light",dark:"dark"},f=e=>e===p.dark?p.dark:p.light,m=e=>o.c.canUseDOM?f(document.documentElement.getAttribute("data-theme")):f(e),g=e=>{d.set(f(e))};function h(e){let{children:n}=e;const t=function(){const{colorMode:{defaultMode:e,disableSwitch:n,respectPrefersColorScheme:t}}=(0,s.y)(),[o,a]=(0,r.useState)(m(e));(0,r.useEffect)((()=>{n&&d.del()}),[n]);const i=(0,r.useCallback)((function(n,r){void 0===r&&(r={});const{persist:o=!0}=r;n?(a(n),o&&g(n)):(a(t?window.matchMedia("(prefers-color-scheme: dark)").matches?p.dark:p.light:e),d.del())}),[t,e]);(0,r.useEffect)((()=>{document.documentElement.setAttribute("data-theme",f(o))}),[o]),(0,r.useEffect)((()=>{if(n)return;const e=e=>{if(e.key!==u)return;const n=d.get();null!==n&&i(f(n))};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)}),[n,i]);const l=(0,r.useRef)(!1);return(0,r.useEffect)((()=>{if(n&&!t)return;const e=window.matchMedia("(prefers-color-scheme: dark)"),r=()=>{window.matchMedia("print").matches||l.current?l.current=window.matchMedia("print").matches:i(null)};return e.addListener(r),()=>e.removeListener(r)}),[i,n,t]),(0,r.useMemo)((()=>({colorMode:o,setColorMode:i,get isDarkTheme(){return o===p.dark},setLightTheme(){i(p.light)},setDarkTheme(){i(p.dark)}})),[o,i])}();return(0,l.jsx)(c.Provider,{value:t,children:n})}function y(){const e=(0,r.useContext)(c);if(null==e)throw new a.AH("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},4592:(e,n,t)=>{"use strict";t.d(n,{eM:()=>S,gc:()=>y,iy:()=>v});var r=t(1504),o=t(5172),a=t(2488),i=t(1824),s=t(9940),l=t(1100),c=t(1148),u=t(7624);const d=e=>`docs-preferred-version-${e}`,p={save:(e,n,t)=>{(0,c.GS)(d(e),{persistence:n}).set(t)},read:(e,n)=>(0,c.GS)(d(e),{persistence:n}).get(),clear:(e,n)=>{(0,c.GS)(d(e),{persistence:n}).del()}},f=e=>Object.fromEntries(e.map((e=>[e,{preferredVersionName:null}])));const m=r.createContext(null);function g(){const e=(0,o.L0)(),n=(0,i.y)().docs.versionPersistence,t=(0,r.useMemo)((()=>Object.keys(e)),[e]),[a,s]=(0,r.useState)((()=>f(t)));(0,r.useEffect)((()=>{s(function(e){let{pluginIds:n,versionPersistence:t,allDocsData:r}=e;function o(e){const n=p.read(e,t);return r[e].versions.some((e=>e.name===n))?{preferredVersionName:n}:(p.clear(e,t),{preferredVersionName:null})}return Object.fromEntries(n.map((e=>[e,o(e)])))}({allDocsData:e,versionPersistence:n,pluginIds:t}))}),[e,n,t]);return[a,(0,r.useMemo)((()=>({savePreferredVersion:function(e,t){p.save(e,n,t),s((n=>({...n,[e]:{preferredVersionName:t}})))}})),[n])]}function h(e){let{children:n}=e;const t=g();return(0,u.jsx)(m.Provider,{value:t,children:n})}function y(e){let{children:n}=e;return s.c1?(0,u.jsx)(h,{children:n}):(0,u.jsx)(u.Fragment,{children:n})}function b(){const e=(0,r.useContext)(m);if(!e)throw new l.AH("DocsPreferredVersionContextProvider");return e}function v(e){void 0===e&&(e=a.M);const n=(0,o.OK)(e),[t,i]=b(),{preferredVersionName:s}=t[e];return{preferredVersion:n.versions.find((e=>e.name===s))??null,savePreferredVersionName:(0,r.useCallback)((n=>{i.savePreferredVersion(e,n)}),[i,e])}}function S(){const e=(0,o.L0)(),[n]=b();function t(t){const r=e[t],{preferredVersionName:o}=n[t];return r.versions.find((e=>e.name===o))??null}const r=Object.keys(e);return Object.fromEntries(r.map((e=>[e,t(e)])))}},6192:(e,n,t)=>{"use strict";t.d(n,{m:()=>c,y:()=>l});var r=t(1504),o=t(1100),a=t(7624);const i=Symbol("EmptyContext"),s=r.createContext(i);function l(e){let{children:n,name:t,items:o}=e;const i=(0,r.useMemo)((()=>t&&o?{name:t,items:o}:null),[t,o]);return(0,a.jsx)(s.Provider,{value:i,children:n})}function c(){const e=(0,r.useContext)(s);if(e===i)throw new o.AH("DocsSidebarProvider");return e}},9920:(e,n,t)=>{"use strict";t.d(n,{E:()=>l,Q:()=>s});var r=t(1504),o=t(1100),a=t(7624);const i=r.createContext(null);function s(e){let{children:n,version:t}=e;return(0,a.jsx)(i.Provider,{value:t,children:n})}function l(){const e=(0,r.useContext)(i);if(null===e)throw new o.AH("DocsVersionProvider");return e}},8200:(e,n,t)=>{"use strict";t.d(n,{q:()=>f,y:()=>p});var r=t(1504),o=t(5168),a=t(1432),i=t(632),s=t(1824),l=t(1100),c=t(7624);const u=r.createContext(void 0);function d(){const e=function(){const e=(0,o.MF)(),{items:n}=(0,s.y)().navbar;return 0===n.length&&!e.component}(),n=(0,a.U)(),t=!e&&"mobile"===n,[l,c]=(0,r.useState)(!1);(0,i.a4)((()=>{if(l)return c(!1),!1}));const u=(0,r.useCallback)((()=>{c((e=>!e))}),[]);return(0,r.useEffect)((()=>{"desktop"===n&&c(!1)}),[n]),(0,r.useMemo)((()=>({disabled:e,shouldRender:t,toggle:u,shown:l})),[e,t,u,l])}function p(e){let{children:n}=e;const t=d();return(0,c.jsx)(u.Provider,{value:t,children:n})}function f(){const e=r.useContext(u);if(void 0===e)throw new l.AH("NavbarMobileSidebarProvider");return e}},5168:(e,n,t)=>{"use strict";t.d(n,{MF:()=>l,Mx:()=>c,Ub:()=>s});var r=t(1504),o=t(1100),a=t(7624);const i=r.createContext(null);function s(e){let{children:n}=e;const t=(0,r.useState)({component:null,props:null});return(0,a.jsx)(i.Provider,{value:t,children:n})}function l(){const e=(0,r.useContext)(i);if(!e)throw new o.AH("NavbarSecondaryMenuContentProvider");return e[0]}function c(e){let{component:n,props:t}=e;const a=(0,r.useContext)(i);if(!a)throw new o.AH("NavbarSecondaryMenuContentProvider");const[,s]=a,l=(0,o.Mh)(t);return(0,r.useEffect)((()=>{s({component:n,props:l})}),[s,n,l]),(0,r.useEffect)((()=>()=>s({component:null,props:null})),[s]),null}},204:(e,n,t)=>{"use strict";t.d(n,{m:()=>o,W:()=>a});var r=t(1504);const o="navigation-with-keyboard";function a(){(0,r.useEffect)((()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(o),"mousedown"===e.type&&document.body.classList.remove(o)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(o),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},7092:(e,n,t)=>{"use strict";t.d(n,{Y:()=>l,a:()=>s});var r=t(1504),o=t(8264),a=t(632);const i="q";function s(){return(0,a.E9)(i)}function l(){const{siteConfig:{baseUrl:e,themeConfig:n}}=(0,o.c)(),{algolia:{searchPagePath:t}}=n;return(0,r.useCallback)((n=>`${e}${t}?${i}=${encodeURIComponent(n)}`),[e,t])}},1432:(e,n,t)=>{"use strict";t.d(n,{U:()=>s});var r=t(1504),o=t(8684);const a={desktop:"desktop",mobile:"mobile",ssr:"ssr"},i=996;function s(e){let{desktopBreakpoint:n=i}=void 0===e?{}:e;const[t,s]=(0,r.useState)((()=>"ssr"));return(0,r.useEffect)((()=>{function e(){s(function(e){if(!o.c.canUseDOM)throw new Error("getWindowSize() should only be called after React hydration");return window.innerWidth>e?a.desktop:a.mobile}(n))}return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[n]),t}},5864:(e,n,t)=>{"use strict";t.d(n,{W:()=>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:{}}},3856:(e,n,t)=>{"use strict";function r(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}t.d(n,{I:()=>r})},9940:(e,n,t)=>{"use strict";t.d(n,{Gw:()=>f,Md:()=>h,c1:()=>p,Uj:()=>T,b7:()=>w,Qf:()=>k,Ab:()=>x,js:()=>S,mg:()=>b});var r=t(1504),o=t(5592),a=t(5464),i=t(5172),s=t(4592),l=t(9920),c=t(6192);function u(e){return Array.from(new Set(e))}var d=t(3376);const p=!!i.L0;function f(e){return"link"!==e.type||e.unlisted?"category"===e.type?function(e){if(e.href&&!e.linkUnlisted)return e.href;for(const n of e.items){const e=f(n);if(e)return e}}(e):void 0:e.href}const m=(e,n)=>void 0!==e&&(0,d.Sc)(e,n),g=(e,n)=>e.some((e=>h(e,n)));function h(e,n){return"link"===e.type?m(e.href,n):"category"===e.type&&(m(e.href,n)||g(e.items,n))}function y(e,n){switch(e.type){case"category":return h(e,n)||e.items.some((e=>y(e,n)));case"link":return!e.unlisted||h(e,n);default:return!0}}function b(e,n){return(0,r.useMemo)((()=>e.filter((e=>y(e,n)))),[e,n])}function v(e){let{sidebarItems:n,pathname:t,onlyCategories:r=!1}=e;const o=[];return function e(n){for(const a of n)if("category"===a.type&&((0,d.Sc)(a.href,t)||e(a.items))||"link"===a.type&&(0,d.Sc)(a.href,t)){return r&&"category"!==a.type||o.unshift(a),!0}return!1}(n),o}function S(){const e=(0,c.m)(),{pathname:n}=(0,o.IT)(),t=(0,i.UF)()?.pluginData.breadcrumbs;return!1!==t&&e?v({sidebarItems:e.items,pathname:n}):null}function w(e){const{activeVersion:n}=(0,i.wB)(e),{preferredVersion:t}=(0,s.iy)(e),o=(0,i.aA)(e);return(0,r.useMemo)((()=>u([n,t,o].filter(Boolean))),[n,t,o])}function x(e,n){const t=w(n);return(0,r.useMemo)((()=>{const n=t.flatMap((e=>e.sidebars?Object.entries(e.sidebars):[])),r=n.find((n=>n[0]===e));if(!r)throw new Error(`Can't find any sidebar with id "${e}" in version${t.length>1?"s":""} ${t.map((e=>e.name)).join(", ")}".\nAvailable sidebar ids are:\n- ${n.map((e=>e[0])).join("\n- ")}`);return r[1]}),[e,t])}function k(e,n){const t=w(n);return(0,r.useMemo)((()=>{const n=t.flatMap((e=>e.docs)),r=n.find((n=>n.id===e));if(!r){if(t.flatMap((e=>e.draftIds)).includes(e))return null;throw new Error(`Couldn't find any doc with id "${e}" in version${t.length>1?"s":""} "${t.map((e=>e.name)).join(", ")}".\nAvailable doc ids are:\n- ${u(n.map((e=>e.id))).join("\n- ")}`)}return r}),[e,t])}function T(e){let{route:n}=e;const t=(0,o.IT)(),r=(0,l.E)(),i=n.routes,s=i.find((e=>(0,o.ot)(t.pathname,e)));if(!s)return null;const c=s.sidebar,u=c?r.docsSidebars[c]:void 0;return{docElement:(0,a.k)(i),sidebarName:c,sidebarItems:u}}},8648:(e,n,t)=>{"use strict";t.d(n,{g:()=>o});var r=t(8264);function o(e){const{siteConfig:n}=(0,r.c)(),{title:t,titleDelimiter:o}=n;return e?.trim().length?`${e.trim()} ${o} ${t}`:t}},632:(e,n,t)=>{"use strict";t.d(n,{E9:()=>l,a4:()=>i});var r=t(1504),o=t(5592),a=t(1100);function i(e){!function(e){const n=(0,o.Uz)(),t=(0,a.yA)(e);(0,r.useEffect)((()=>n.block(((e,n)=>t(e,n)))),[n,t])}(((n,t)=>{if("POP"===t)return e(n,t)}))}function s(e){return function(e){const n=(0,o.Uz)();return(0,r.useSyncExternalStore)(n.listen,(()=>e(n)),(()=>e(n)))}((n=>null===e?null:new URLSearchParams(n.location.search).get(e)))}function l(e){const n=s(e)??"",t=function(){const e=(0,o.Uz)();return(0,r.useCallback)(((n,t,r)=>{const o=new URLSearchParams(e.location.search);t?o.set(n,t):o.delete(n),(r?.push?e.push:e.replace)({search:o.toString()})}),[e])}();return[n,(0,r.useCallback)(((n,r)=>{t(e,n,r)}),[t,e])]}},5008:(e,n,t)=>{"use strict";t.d(n,{cr:()=>f,U7:()=>d,w7:()=>m});var r=t(1504),o=t(5456),a=t(6952),i=t(5548);function s(){const e=r.useContext(i.e);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}var l=t(964),c=t(8648),u=t(7624);function d(e){let{title:n,description:t,keywords:r,image:o,children:i}=e;const s=(0,c.g)(n),{withBaseUrl:d}=(0,l.E)(),p=o?d(o,{absolute:!0}):void 0;return(0,u.jsxs)(a.c,{children:[n&&(0,u.jsx)("title",{children:s}),n&&(0,u.jsx)("meta",{property:"og:title",content:s}),t&&(0,u.jsx)("meta",{name:"description",content:t}),t&&(0,u.jsx)("meta",{property:"og:description",content:t}),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:n,children:t}=e;const i=r.useContext(p),s=(0,o.c)(i,n);return(0,u.jsxs)(p.Provider,{value:s,children:[(0,u.jsx)(a.c,{children:(0,u.jsx)("html",{className:s})}),t]})}function m(e){let{children:n}=e;const t=s(),r=`plugin-${t.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,"")}`;const a=`plugin-id-${t.plugin.id}`;return(0,u.jsx)(f,{className:(0,o.c)(r,a),children:n})}},1100:(e,n,t)=>{"use strict";t.d(n,{AH:()=>l,Mh:()=>c,i0:()=>s,qY:()=>u,yA:()=>i});var r=t(1504),o=t(5288),a=t(7624);function i(e){const n=(0,r.useRef)(e);return(0,o.c)((()=>{n.current=e}),[e]),(0,r.useCallback)((function(){return n.current(...arguments)}),[])}function s(e){const n=(0,r.useRef)();return(0,o.c)((()=>{n.current=e})),n.current}class l extends Error{constructor(e,n){super(),this.name="ReactContextError",this.message=`Hook ${this.stack?.split("\n")[1]?.match(/at (?:\w+\.)?(?<name>\w+)/)?.groups.name??""} is called outside the <${e}>. ${n??""}`}}function c(e){const n=Object.entries(e);return n.sort(((e,n)=>e[0].localeCompare(n[0]))),(0,r.useMemo)((()=>e),n.flat())}function u(e){return n=>{let{children:t}=n;return(0,a.jsx)(a.Fragment,{children:e.reduceRight(((e,n)=>(0,a.jsx)(n,{children:e})),t)})}}},1064:(e,n,t)=>{"use strict";function r(e,n){return void 0!==e&&void 0!==n&&new RegExp(e,"gi").test(n)}t.d(n,{_:()=>r})},3376:(e,n,t)=>{"use strict";t.d(n,{Sc:()=>i,Y5:()=>s});var r=t(1504),o=t(628),a=t(8264);function i(e,n){const t=e=>(!e||e.endsWith("/")?e:`${e}/`)?.toLowerCase();return t(e)===t(n)}function s(){const{baseUrl:e}=(0,a.c)().siteConfig;return(0,r.useMemo)((()=>function(e){let{baseUrl:n,routes:t}=e;function r(e){return e.path===n&&!0===e.exact}function o(e){return e.path===n&&!e.exact}return function e(n){if(0===n.length)return;return n.find(r)||e(n.filter(o).flatMap((e=>e.routes??[])))}(t)}({routes:o.c,baseUrl:e})),[e])}},3943:(e,n,t)=>{"use strict";t.d(n,{S2:()=>c,SM:()=>p,yI:()=>f});var r=t(1504),o=t(8684),a=t(3664),i=(t(5288),t(1100)),s=t(7624);const l=r.createContext(void 0);function c(e){let{children:n}=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)(l.Provider,{value:t,children:n})}function u(){const e=(0,r.useContext)(l);if(null==e)throw new i.AH("ScrollControllerProvider");return e}const d=()=>o.c.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function p(e,n){void 0===n&&(n=[]);const{scrollEventsEnabledRef:t}=u(),o=(0,r.useRef)(d()),a=(0,i.yA)(e);(0,r.useEffect)((()=>{const e=()=>{if(!t.current)return;const e=d();a(e,o.current),o.current=e},n={passive:!0};return e(),window.addEventListener("scroll",e,n),()=>window.removeEventListener("scroll",e,n)}),[a,t,...n])}function f(){const e=(0,r.useRef)(null),n=(0,a.c)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:t=>{e.current=n?function(e){return window.scrollTo({top:e,behavior:"smooth"}),()=>{}}(t):function(e){let n=null;const t=document.documentElement.scrollTop>e;return function r(){const o=document.documentElement.scrollTop;(t&&o>e||!t&&o<e)&&(n=requestAnimationFrame(r),window.scrollTo(0,Math.floor(.85*(o-e))+e))}(),()=>n&&cancelAnimationFrame(n)}(t)},cancelScroll:()=>e.current?.()}}},4456:(e,n,t)=>{"use strict";t.d(n,{SE:()=>s,e6:()=>i,mY:()=>l});var r=t(5172),o=t(8264),a=t(4592);const i="default";function s(e,n){return`docs-${e}-${n}`}function l(){const{i18n:e}=(0,o.c)(),n=(0,r.L0)(),t=(0,r.mU)(),l=(0,a.eM)();const c=[i,...Object.keys(n).map((function(e){const r=t?.activePlugin.pluginId===e?t.activeVersion:void 0,o=l[e],a=n[e].versions.find((e=>e.isLast));return s(e,(r??o??a).name)}))];return{locale:e.currentLocale,tags:c}}},1148:(e,n,t)=>{"use strict";t.d(n,{GS:()=>l});t(1504);const r="localStorage";function o(e){let{key:n,oldValue:t,newValue:r,storage:o}=e;if(t===r)return;const a=document.createEvent("StorageEvent");a.initStorageEvent("storage",!1,!1,n,t,r,window.location.href,o),window.dispatchEvent(a)}function a(e){if(void 0===e&&(e=r),"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(t){return n=t,i||(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.",n),i=!0),null}var n}let i=!1;const s={get:()=>null,set:()=>{},del:()=>{},listen:()=>()=>{}};function l(e,n){if("undefined"==typeof window)return function(e){function n(){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:n,set:n,del:n,listen:n}}(e);const t=a(n?.persistence);return null===t?s:{get:()=>{try{return t.getItem(e)}catch(n){return console.error(`Docusaurus storage error, can't get key=${e}`,n),null}},set:n=>{try{const r=t.getItem(e);t.setItem(e,n),o({key:e,oldValue:r,newValue:n,storage:t})}catch(r){console.error(`Docusaurus storage error, can't set ${e}=${n}`,r)}},del:()=>{try{const n=t.getItem(e);t.removeItem(e),o({key:e,oldValue:n,newValue:null,storage:t})}catch(n){console.error(`Docusaurus storage error, can't delete key=${e}`,n)}},listen:n=>{try{const r=r=>{r.storageArea===t&&r.key===e&&n(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),()=>{}}}}}},1616:(e,n,t)=>{"use strict";t.d(n,{D:()=>i});var r=t(8264),o=t(5592),a=t(5684);function i(){const{siteConfig:{baseUrl:e,url:n,trailingSlash:t},i18n:{defaultLocale:i,currentLocale:s}}=(0,r.c)(),{pathname:l}=(0,o.IT)(),c=(0,a.applyTrailingSlash)(l,{trailingSlash:t,baseUrl:e}),u=s===i?e:e.replace(`/${s}/`,"/"),d=c.replace(e,"");return{createUrl:function(e){let{locale:t,fullyQualified:r}=e;return`${r?n:""}${function(e){return e===i?`${u}`:`${u}${e}/`}(t)}${d}`}}}},7124:(e,n,t)=>{"use strict";t.d(n,{c:()=>i});var r=t(1504),o=t(5592),a=t(1100);function i(e){const n=(0,o.IT)(),t=(0,a.i0)(n),i=(0,a.yA)(e);(0,r.useEffect)((()=>{t&&n!==t&&i({location:n,previousLocation:t})}),[i,n,t])}},1824:(e,n,t)=>{"use strict";t.d(n,{y:()=>o});var r=t(8264);function o(){return(0,r.c)().siteConfig.themeConfig}},8589:(e,n,t)=>{"use strict";t.d(n,{E:()=>o});var r=t(8264);function o(){const{siteConfig:{themeConfig:e}}=(0,r.c)();return e}},9032:(e,n,t)=>{"use strict";t.d(n,{Q:()=>s});var r=t(1504),o=t(1064),a=t(964),i=t(8589);function s(){const{withBaseUrl:e}=(0,a.E)(),{algolia:{externalUrlRegex:n,replaceSearchResultPathname:t}}=(0,i.E)();return(0,r.useCallback)((r=>{const a=new URL(r);if((0,o._)(n,a.href))return r;const i=`${a.pathname+a.hash}`;return e(function(e,n){return n?e.replaceAll(new RegExp(n.from,"g"),n.to):e}(i,t))}),[e,n,t])}},1600:(e,n)=>{"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(e,n){const{trailingSlash:t,baseUrl:r}=n;if(e.startsWith("#"))return e;if(void 0===t)return e;const[o]=e.split(/[#?]/),a="/"===o||o===r?o:(i=o,t?function(e){return e.endsWith("/")?e:`${e}/`}(i):function(e){return e.endsWith("/")?e.slice(0,-1):e}(i));var i;return e.replace(o,a)}},4292:(e,n)=>{"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.getErrorCausalChain=void 0,n.getErrorCausalChain=function e(n){return n.cause?[n,...e(n.cause)]:[n]}},5684:function(e,n,t){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(n,"__esModule",{value:!0}),n.getErrorCausalChain=n.applyTrailingSlash=n.blogPostContainerID=void 0,n.blogPostContainerID="__blog-post-container";var o=t(1600);Object.defineProperty(n,"applyTrailingSlash",{enumerable:!0,get:function(){return r(o).default}});var a=t(4292);Object.defineProperty(n,"getErrorCausalChain",{enumerable:!0,get:function(){return a.getErrorCausalChain}})},8064:(e,n,t)=>{"use strict";t.d(n,{iU:()=>S,Yf:()=>C,gh:()=>f,Wi:()=>A,Ep:()=>p});var r=t(6404);function o(e){return"/"===e.charAt(0)}function a(e,n){for(var t=n,r=t+1,o=e.length;r<o;t+=1,r+=1)e[t]=e[r];e.pop()}const i=function(e,n){void 0===n&&(n="");var t,r=e&&e.split("/")||[],i=n&&n.split("/")||[],s=e&&o(e),l=n&&o(n),c=s||l;if(e&&o(e)?i=r:r.length&&(i.pop(),i=i.concat(r)),!i.length)return"/";if(i.length){var u=i[i.length-1];t="."===u||".."===u||""===u}else t=!1;for(var d=0,p=i.length;p>=0;p--){var f=i[p];"."===f?a(i,p):".."===f?(a(i,p),d++):d&&(a(i,p),d--)}if(!c)for(;d--;d)i.unshift("..");!c||""===i[0]||i[0]&&o(i[0])||i.unshift("");var m=i.join("/");return t&&"/"!==m.substr(-1)&&(m+="/"),m};var s=t(6136);function l(e){return"/"===e.charAt(0)?e:"/"+e}function c(e){return"/"===e.charAt(0)?e.substr(1):e}function u(e,n){return function(e,n){return 0===e.toLowerCase().indexOf(n.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(n.length))}(e,n)?e.substr(n.length):e}function d(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function p(e){var n=e.pathname,t=e.search,r=e.hash,o=n||"/";return t&&"?"!==t&&(o+="?"===t.charAt(0)?t:"?"+t),r&&"#"!==r&&(o+="#"===r.charAt(0)?r:"#"+r),o}function f(e,n,t,o){var a;"string"==typeof e?(a=function(e){var n=e||"/",t="",r="",o=n.indexOf("#");-1!==o&&(r=n.substr(o),n=n.substr(0,o));var a=n.indexOf("?");return-1!==a&&(t=n.substr(a),n=n.substr(0,a)),{pathname:n,search:"?"===t?"":t,hash:"#"===r?"":r}}(e),a.state=n):(void 0===(a=(0,r.c)({},e)).pathname&&(a.pathname=""),a.search?"?"!==a.search.charAt(0)&&(a.search="?"+a.search):a.search="",a.hash?"#"!==a.hash.charAt(0)&&(a.hash="#"+a.hash):a.hash="",void 0!==n&&void 0===a.state&&(a.state=n));try{a.pathname=decodeURI(a.pathname)}catch(s){throw s instanceof URIError?new URIError('Pathname "'+a.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):s}return t&&(a.key=t),o?a.pathname?"/"!==a.pathname.charAt(0)&&(a.pathname=i(a.pathname,o.pathname)):a.pathname=o.pathname:a.pathname||(a.pathname="/"),a}function m(){var e=null;var n=[];return{setPrompt:function(n){return e=n,function(){e===n&&(e=null)}},confirmTransitionTo:function(n,t,r,o){if(null!=e){var a="function"==typeof e?e(n,t):e;"string"==typeof a?"function"==typeof r?r(a,o):o(!0):o(!1!==a)}else o(!0)},appendListener:function(e){var t=!0;function r(){t&&e.apply(void 0,arguments)}return n.push(r),function(){t=!1,n=n.filter((function(e){return e!==r}))}},notifyListeners:function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];n.forEach((function(e){return e.apply(void 0,t)}))}}}var g=!("undefined"==typeof window||!window.document||!window.document.createElement);function h(e,n){n(window.confirm(e))}var y="popstate",b="hashchange";function v(){try{return window.history.state||{}}catch(e){return{}}}function S(e){void 0===e&&(e={}),g||(0,s.c)(!1);var n,t=window.history,o=(-1===(n=window.navigator.userAgent).indexOf("Android 2.")&&-1===n.indexOf("Android 4.0")||-1===n.indexOf("Mobile Safari")||-1!==n.indexOf("Chrome")||-1!==n.indexOf("Windows Phone"))&&window.history&&"pushState"in window.history,a=!(-1===window.navigator.userAgent.indexOf("Trident")),i=e,c=i.forceRefresh,S=void 0!==c&&c,w=i.getUserConfirmation,x=void 0===w?h:w,k=i.keyLength,T=void 0===k?6:k,E=e.basename?d(l(e.basename)):"";function C(e){var n=e||{},t=n.key,r=n.state,o=window.location,a=o.pathname+o.search+o.hash;return E&&(a=u(a,E)),f(a,r,t)}function _(){return Math.random().toString(36).substr(2,T)}var A=m();function I(e){(0,r.c)(U,e),U.length=t.length,A.notifyListeners(U.location,U.action)}function P(e){(function(e){return void 0===e.state&&-1===navigator.userAgent.indexOf("CriOS")})(e)||N(C(e.state))}function L(){N(C(v()))}var R=!1;function N(e){if(R)R=!1,I();else{A.confirmTransitionTo(e,"POP",x,(function(n){n?I({action:"POP",location:e}):function(e){var n=U.location,t=F.indexOf(n.key);-1===t&&(t=0);var r=F.indexOf(e.key);-1===r&&(r=0);var o=t-r;o&&(R=!0,D(o))}(e)}))}}var O=C(v()),F=[O.key];function j(e){return E+p(e)}function D(e){t.go(e)}var M=0;function B(e){1===(M+=e)&&1===e?(window.addEventListener(y,P),a&&window.addEventListener(b,L)):0===M&&(window.removeEventListener(y,P),a&&window.removeEventListener(b,L))}var $=!1;var U={length:t.length,action:"POP",location:O,createHref:j,push:function(e,n){var r="PUSH",a=f(e,n,_(),U.location);A.confirmTransitionTo(a,r,x,(function(e){if(e){var n=j(a),i=a.key,s=a.state;if(o)if(t.pushState({key:i,state:s},null,n),S)window.location.href=n;else{var l=F.indexOf(U.location.key),c=F.slice(0,l+1);c.push(a.key),F=c,I({action:r,location:a})}else window.location.href=n}}))},replace:function(e,n){var r="REPLACE",a=f(e,n,_(),U.location);A.confirmTransitionTo(a,r,x,(function(e){if(e){var n=j(a),i=a.key,s=a.state;if(o)if(t.replaceState({key:i,state:s},null,n),S)window.location.replace(n);else{var l=F.indexOf(U.location.key);-1!==l&&(F[l]=a.key),I({action:r,location:a})}else window.location.replace(n)}}))},go:D,goBack:function(){D(-1)},goForward:function(){D(1)},block:function(e){void 0===e&&(e=!1);var n=A.setPrompt(e);return $||(B(1),$=!0),function(){return $&&($=!1,B(-1)),n()}},listen:function(e){var n=A.appendListener(e);return B(1),function(){B(-1),n()}}};return U}var w="hashchange",x={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:l},slash:{encodePath:l,decodePath:l}};function k(e){var n=e.indexOf("#");return-1===n?e:e.slice(0,n)}function T(){var e=window.location.href,n=e.indexOf("#");return-1===n?"":e.substring(n+1)}function E(e){window.location.replace(k(window.location.href)+"#"+e)}function C(e){void 0===e&&(e={}),g||(0,s.c)(!1);var n=window.history,t=(window.navigator.userAgent.indexOf("Firefox"),e),o=t.getUserConfirmation,a=void 0===o?h:o,i=t.hashType,c=void 0===i?"slash":i,y=e.basename?d(l(e.basename)):"",b=x[c],v=b.encodePath,S=b.decodePath;function C(){var e=S(T());return y&&(e=u(e,y)),f(e)}var _=m();function A(e){(0,r.c)($,e),$.length=n.length,_.notifyListeners($.location,$.action)}var I=!1,P=null;function L(){var e,n,t=T(),r=v(t);if(t!==r)E(r);else{var o=C(),i=$.location;if(!I&&(n=o,(e=i).pathname===n.pathname&&e.search===n.search&&e.hash===n.hash))return;if(P===p(o))return;P=null,function(e){if(I)I=!1,A();else{var n="POP";_.confirmTransitionTo(e,n,a,(function(t){t?A({action:n,location:e}):function(e){var n=$.location,t=F.lastIndexOf(p(n));-1===t&&(t=0);var r=F.lastIndexOf(p(e));-1===r&&(r=0);var o=t-r;o&&(I=!0,j(o))}(e)}))}}(o)}}var R=T(),N=v(R);R!==N&&E(N);var O=C(),F=[p(O)];function j(e){n.go(e)}var D=0;function M(e){1===(D+=e)&&1===e?window.addEventListener(w,L):0===D&&window.removeEventListener(w,L)}var B=!1;var $={length:n.length,action:"POP",location:O,createHref:function(e){var n=document.querySelector("base"),t="";return n&&n.getAttribute("href")&&(t=k(window.location.href)),t+"#"+v(y+p(e))},push:function(e,n){var t="PUSH",r=f(e,void 0,void 0,$.location);_.confirmTransitionTo(r,t,a,(function(e){if(e){var n=p(r),o=v(y+n);if(T()!==o){P=n,function(e){window.location.hash=e}(o);var a=F.lastIndexOf(p($.location)),i=F.slice(0,a+1);i.push(n),F=i,A({action:t,location:r})}else A()}}))},replace:function(e,n){var t="REPLACE",r=f(e,void 0,void 0,$.location);_.confirmTransitionTo(r,t,a,(function(e){if(e){var n=p(r),o=v(y+n);T()!==o&&(P=n,E(o));var a=F.indexOf(p($.location));-1!==a&&(F[a]=n),A({action:t,location:r})}}))},go:j,goBack:function(){j(-1)},goForward:function(){j(1)},block:function(e){void 0===e&&(e=!1);var n=_.setPrompt(e);return B||(M(1),B=!0),function(){return B&&(B=!1,M(-1)),n()}},listen:function(e){var n=_.appendListener(e);return M(1),function(){M(-1),n()}}};return $}function _(e,n,t){return Math.min(Math.max(e,n),t)}function A(e){void 0===e&&(e={});var n=e,t=n.getUserConfirmation,o=n.initialEntries,a=void 0===o?["/"]:o,i=n.initialIndex,s=void 0===i?0:i,l=n.keyLength,c=void 0===l?6:l,u=m();function d(e){(0,r.c)(S,e),S.length=S.entries.length,u.notifyListeners(S.location,S.action)}function g(){return Math.random().toString(36).substr(2,c)}var h=_(s,0,a.length-1),y=a.map((function(e){return f(e,void 0,"string"==typeof e?g():e.key||g())})),b=p;function v(e){var n=_(S.index+e,0,S.entries.length-1),r=S.entries[n];u.confirmTransitionTo(r,"POP",t,(function(e){e?d({action:"POP",location:r,index:n}):d()}))}var S={length:y.length,action:"POP",location:y[h],index:h,entries:y,createHref:b,push:function(e,n){var r="PUSH",o=f(e,n,g(),S.location);u.confirmTransitionTo(o,r,t,(function(e){if(e){var n=S.index+1,t=S.entries.slice(0);t.length>n?t.splice(n,t.length-n,o):t.push(o),d({action:r,location:o,index:n,entries:t})}}))},replace:function(e,n){var r="REPLACE",o=f(e,n,g(),S.location);u.confirmTransitionTo(o,r,t,(function(e){e&&(S.entries[S.index]=o,d({action:r,location:o}))}))},go:v,goBack:function(){v(-1)},goForward:function(){v(1)},canGo:function(e){var n=S.index+e;return n>=0&&n<S.entries.length},block:function(e){return void 0===e&&(e=!1),u.setPrompt(e)},listen:function(e){return u.appendListener(e)}};return S}},4792:(e,n,t)=>{"use strict";var r=t(2168),o={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},a={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},s={};function l(e){return r.isMemo(e)?i:s[e.$$typeof]||o}s[r.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},s[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(n,t,r){if("string"!=typeof t){if(m){var o=f(t);o&&o!==m&&e(n,o,r)}var i=u(t);d&&(i=i.concat(d(t)));for(var s=l(n),g=l(t),h=0;h<i.length;++h){var y=i[h];if(!(a[y]||r&&r[y]||g&&g[y]||s&&s[y])){var b=p(t,y);try{c(n,y,b)}catch(v){}}}}return n}},9328:e=>{"use strict";e.exports=function(e,n,t,r,o,a,i,s){if(!e){var l;if(void 0===n)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[t,r,o,a,i,s],u=0;(l=new Error(n.replace(/%s/g,(function(){return c[u++]})))).name="Invariant Violation"}throw l.framesToPop=1,l}}},9600:e=>{e.exports=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)}},1462:(e,n,t)=>{"use strict";t.r(n)},9115:(e,n,t)=>{"use strict";t.r(n)},2272:function(e,n,t){var r,o;r=function(){var e,n,t={version:"0.2.0"},r=t.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 o(e,n,t){return e<n?n:e>t?t:e}function a(e){return 100*(-1+e)}function i(e,n,t){var o;return(o="translate3d"===r.positionUsing?{transform:"translate3d("+a(e)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+a(e)+"%,0)"}:{"margin-left":a(e)+"%"}).transition="all "+n+"ms "+t,o}t.configure=function(e){var n,t;for(n in e)void 0!==(t=e[n])&&e.hasOwnProperty(n)&&(r[n]=t);return this},t.status=null,t.set=function(e){var n=t.isStarted();e=o(e,r.minimum,1),t.status=1===e?null:e;var a=t.render(!n),c=a.querySelector(r.barSelector),u=r.speed,d=r.easing;return a.offsetWidth,s((function(n){""===r.positionUsing&&(r.positionUsing=t.getPositioningCSS()),l(c,i(e,u,d)),1===e?(l(a,{transition:"none",opacity:1}),a.offsetWidth,setTimeout((function(){l(a,{transition:"all "+u+"ms linear",opacity:0}),setTimeout((function(){t.remove(),n()}),u)}),u)):setTimeout(n,u)})),this},t.isStarted=function(){return"number"==typeof t.status},t.start=function(){t.status||t.set(0);var e=function(){setTimeout((function(){t.status&&(t.trickle(),e())}),r.trickleSpeed)};return r.trickle&&e(),this},t.done=function(e){return e||t.status?t.inc(.3+.5*Math.random()).set(1):this},t.inc=function(e){var n=t.status;return n?("number"!=typeof e&&(e=(1-n)*o(Math.random()*n,.1,.95)),n=o(n+e,0,.994),t.set(n)):t.start()},t.trickle=function(){return t.inc(Math.random()*r.trickleRate)},e=0,n=0,t.promise=function(r){return r&&"resolved"!==r.state()?(0===n&&t.start(),e++,n++,r.always((function(){0==--n?(e=0,t.done()):t.set((e-n)/e)})),this):this},t.render=function(e){if(t.isRendered())return document.getElementById("nprogress");u(document.documentElement,"nprogress-busy");var n=document.createElement("div");n.id="nprogress",n.innerHTML=r.template;var o,i=n.querySelector(r.barSelector),s=e?"-100":a(t.status||0),c=document.querySelector(r.parent);return l(i,{transition:"all 0 linear",transform:"translate3d("+s+"%,0,0)"}),r.showSpinner||(o=n.querySelector(r.spinnerSelector))&&f(o),c!=document.body&&u(c,"nprogress-custom-parent"),c.appendChild(n),n},t.remove=function(){d(document.documentElement,"nprogress-busy"),d(document.querySelector(r.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&f(e)},t.isRendered=function(){return!!document.getElementById("nprogress")},t.getPositioningCSS=function(){var e=document.body.style,n="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return n+"Perspective"in e?"translate3d":n+"Transform"in e?"translate":"margin"};var s=function(){var e=[];function n(){var t=e.shift();t&&t(n)}return function(t){e.push(t),1==e.length&&n()}}(),l=function(){var e=["Webkit","O","Moz","ms"],n={};function t(e){return e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,n){return n.toUpperCase()}))}function r(n){var t=document.body.style;if(n in t)return n;for(var r,o=e.length,a=n.charAt(0).toUpperCase()+n.slice(1);o--;)if((r=e[o]+a)in t)return r;return n}function o(e){return e=t(e),n[e]||(n[e]=r(e))}function a(e,n,t){n=o(n),e.style[n]=t}return function(e,n){var t,r,o=arguments;if(2==o.length)for(t in n)void 0!==(r=n[t])&&n.hasOwnProperty(t)&&a(e,t,r);else a(e,o[1],o[2])}}();function c(e,n){return("string"==typeof e?e:p(e)).indexOf(" "+n+" ")>=0}function u(e,n){var t=p(e),r=t+n;c(t,n)||(e.className=r.substring(1))}function d(e,n){var t,r=p(e);c(e,n)&&(t=r.replace(" "+n+" "," "),e.className=t.substring(1,t.length-1))}function p(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function f(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return t},void 0===(o="function"==typeof r?r.call(n,t,n,e):r)||(e.exports=o)},1596:()=>{!function(e){var n="\\b(?:BASH|BASHOPTS|BASH_ALIASES|BASH_ARGC|BASH_ARGV|BASH_CMDS|BASH_COMPLETION_COMPAT_DIR|BASH_LINENO|BASH_REMATCH|BASH_SOURCE|BASH_VERSINFO|BASH_VERSION|COLORTERM|COLUMNS|COMP_WORDBREAKS|DBUS_SESSION_BUS_ADDRESS|DEFAULTS_PATH|DESKTOP_SESSION|DIRSTACK|DISPLAY|EUID|GDMSESSION|GDM_LANG|GNOME_KEYRING_CONTROL|GNOME_KEYRING_PID|GPG_AGENT_INFO|GROUPS|HISTCONTROL|HISTFILE|HISTFILESIZE|HISTSIZE|HOME|HOSTNAME|HOSTTYPE|IFS|INSTANCE|JOB|LANG|LANGUAGE|LC_ADDRESS|LC_ALL|LC_IDENTIFICATION|LC_MEASUREMENT|LC_MONETARY|LC_NAME|LC_NUMERIC|LC_PAPER|LC_TELEPHONE|LC_TIME|LESSCLOSE|LESSOPEN|LINES|LOGNAME|LS_COLORS|MACHTYPE|MAILCHECK|MANDATORY_PATH|NO_AT_BRIDGE|OLDPWD|OPTERR|OPTIND|ORBIT_SOCKETDIR|OSTYPE|PAPERSIZE|PATH|PIPESTATUS|PPID|PS1|PS2|PS3|PS4|PWD|RANDOM|REPLY|SECONDS|SELINUX_INIT|SESSION|SESSIONTYPE|SESSION_MANAGER|SHELL|SHELLOPTS|SHLVL|SSH_AUTH_SOCK|TERM|UID|UPSTART_EVENTS|UPSTART_INSTANCE|UPSTART_JOB|UPSTART_SESSION|USER|WINDOWID|XAUTHORITY|XDG_CONFIG_DIRS|XDG_CURRENT_DESKTOP|XDG_DATA_DIRS|XDG_GREETER_DATA_DIR|XDG_MENU_PREFIX|XDG_RUNTIME_DIR|XDG_SEAT|XDG_SEAT_PATH|XDG_SESSION_DESKTOP|XDG_SESSION_ID|XDG_SESSION_PATH|XDG_SESSION_TYPE|XDG_VTNR|XMODIFIERS)\\b",t={pattern:/(^(["']?)\w+\2)[ \t]+\S.*/,lookbehind:!0,alias:"punctuation",inside:null},r={bash:t,environment:{pattern:RegExp("\\$"+n),alias:"constant"},variable:[{pattern:/\$?\(\([\s\S]+?\)\)/,greedy:!0,inside:{variable:[{pattern:/(^\$\(\([\s\S]+)\)\)/,lookbehind:!0},/^\$\(\(/],number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee]-?\d+)?/,operator:/--|\+\+|\*\*=?|<<=?|>>=?|&&|\|\||[=!+\-*/%<>^&|]=?|[?~:]/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\((?:\([^)]+\)|[^()])+\)|`[^`]+`/,greedy:!0,inside:{variable:/^\$\(|^`|\)$|`$/}},{pattern:/\$\{[^}]+\}/,greedy:!0,inside:{operator:/:[-=?+]?|[!\/]|##?|%%?|\^\^?|,,?/,punctuation:/[\[\]]/,environment:{pattern:RegExp("(\\{)"+n),lookbehind:!0,alias:"constant"}}},/\$(?:\w+|[#?*!@$])/],entity:/\\(?:[abceEfnrtv\\"]|O?[0-7]{1,3}|U[0-9a-fA-F]{8}|u[0-9a-fA-F]{4}|x[0-9a-fA-F]{1,2})/};e.languages.bash={shebang:{pattern:/^#!\s*\/.*/,alias:"important"},comment:{pattern:/(^|[^"{\\$])#.*/,lookbehind:!0},"function-name":[{pattern:/(\bfunction\s+)[\w-]+(?=(?:\s*\(?:\s*\))?\s*\{)/,lookbehind:!0,alias:"function"},{pattern:/\b[\w-]+(?=\s*\(\s*\)\s*\{)/,alias:"function"}],"for-or-select":{pattern:/(\b(?:for|select)\s+)\w+(?=\s+in\s)/,alias:"variable",lookbehind:!0},"assign-left":{pattern:/(^|[\s;|&]|[<>]\()\w+(?:\.\w+)*(?=\+?=)/,inside:{environment:{pattern:RegExp("(^|[\\s;|&]|[<>]\\()"+n),lookbehind:!0,alias:"constant"}},alias:"variable",lookbehind:!0},parameter:{pattern:/(^|\s)-{1,2}(?:\w+:[+-]?)?\w+(?:\.\w+)*(?=[=\s]|$)/,alias:"variable",lookbehind:!0},string:[{pattern:/((?:^|[^<])<<-?\s*)(\w+)\s[\s\S]*?(?:\r?\n|\r)\2/,lookbehind:!0,greedy:!0,inside:r},{pattern:/((?:^|[^<])<<-?\s*)(["'])(\w+)\2\s[\s\S]*?(?:\r?\n|\r)\3/,lookbehind:!0,greedy:!0,inside:{bash:t}},{pattern:/(^|[^\\](?:\\\\)*)"(?:\\[\s\S]|\$\([^)]+\)|\$(?!\()|`[^`]+`|[^"\\`$])*"/,lookbehind:!0,greedy:!0,inside:r},{pattern:/(^|[^$\\])'[^']*'/,lookbehind:!0,greedy:!0},{pattern:/\$'(?:[^'\\]|\\[\s\S])*'/,greedy:!0,inside:{entity:r.entity}}],environment:{pattern:RegExp("\\$?"+n),alias:"constant"},variable:r.variable,function:{pattern:/(^|[\s;|&]|[<>]\()(?:add|apropos|apt|apt-cache|apt-get|aptitude|aspell|automysqlbackup|awk|basename|bash|bc|bconsole|bg|bzip2|cal|cargo|cat|cfdisk|chgrp|chkconfig|chmod|chown|chroot|cksum|clear|cmp|column|comm|composer|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|debootstrap|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|docker|docker-compose|du|egrep|eject|env|ethtool|expand|expect|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|git|gparted|grep|groupadd|groupdel|groupmod|groups|grub-mkconfig|gzip|halt|head|hg|history|host|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|ip|java|jobs|join|kill|killall|less|link|ln|locate|logname|logrotate|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|lynx|make|man|mc|mdadm|mkconfig|mkdir|mke2fs|mkfifo|mkfs|mkisofs|mknod|mkswap|mmv|more|most|mount|mtools|mtr|mutt|mv|nano|nc|netstat|nice|nl|node|nohup|notify-send|npm|nslookup|op|open|parted|passwd|paste|pathchk|ping|pkill|pnpm|podman|podman-compose|popd|pr|printcap|printenv|ps|pushd|pv|quota|quotacheck|quotactl|ram|rar|rcp|reboot|remsync|rename|renice|rev|rm|rmdir|rpm|rsync|scp|screen|sdiff|sed|sendmail|seq|service|sftp|sh|shellcheck|shuf|shutdown|sleep|slocate|sort|split|ssh|stat|strace|su|sudo|sum|suspend|swapon|sync|sysctl|tac|tail|tar|tee|time|timeout|top|touch|tr|traceroute|tsort|tty|umount|uname|unexpand|uniq|units|unrar|unshar|unzip|update-grub|uptime|useradd|userdel|usermod|users|uudecode|uuencode|v|vcpkg|vdir|vi|vim|virsh|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yarn|yes|zenity|zip|zsh|zypper)(?=$|[)\s;|&])/,lookbehind:!0},keyword:{pattern:/(^|[\s;|&]|[<>]\()(?:case|do|done|elif|else|esac|fi|for|function|if|in|select|then|until|while)(?=$|[)\s;|&])/,lookbehind:!0},builtin:{pattern:/(^|[\s;|&]|[<>]\()(?:\.|:|alias|bind|break|builtin|caller|cd|command|continue|declare|echo|enable|eval|exec|exit|export|getopts|hash|help|let|local|logout|mapfile|printf|pwd|read|readarray|readonly|return|set|shift|shopt|source|test|times|trap|type|typeset|ulimit|umask|unalias|unset)(?=$|[)\s;|&])/,lookbehind:!0,alias:"class-name"},boolean:{pattern:/(^|[\s;|&]|[<>]\()(?:false|true)(?=$|[)\s;|&])/,lookbehind:!0},"file-descriptor":{pattern:/\B&\d\b/,alias:"important"},operator:{pattern:/\d?<>|>\||\+=|=[=~]?|!=?|<<[<-]?|[&\d]?>>|\d[<>]&?|[<>][&=]?|&[>&]?|\|[&|]?/,inside:{"file-descriptor":{pattern:/^\d/,alias:"important"}}},punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];\\]/,number:{pattern:/(^|\s)(?:[1-9]\d*|0)(?:[.,]\d+)?\b/,lookbehind:!0}},t.inside=e.languages.bash;for(var o=["comment","function-name","for-or-select","assign-left","parameter","string","environment","function","keyword","builtin","boolean","file-descriptor","operator","punctuation","number"],a=r.variable[1].inside,i=0;i<o.length;i++)a[o[i]]=e.languages.bash[o[i]];e.languages.sh=e.languages.bash,e.languages.shell=e.languages.bash}(Prism)},1496:()=>{!function(e){e.languages.diff={coord:[/^(?:\*{3}|-{3}|\+{3}).*$/m,/^@@.*@@$/m,/^\d.*$/m]};var n={"deleted-sign":"-","deleted-arrow":"<","inserted-sign":"+","inserted-arrow":">",unchanged:" ",diff:"!"};Object.keys(n).forEach((function(t){var r=n[t],o=[];/^\w+$/.test(t)||o.push(/\w+/.exec(t)[0]),"diff"===t&&o.push("bold"),e.languages.diff[t]={pattern:RegExp("^(?:["+r+"].*(?:\r\n?|\n|(?![\\s\\S])))+","m"),alias:o,inside:{line:{pattern:/(.)(?=[\s\S]).*(?:\r\n?|\n)?/,lookbehind:!0},prefix:{pattern:/[\s\S]/,alias:/\w+/.exec(t)[0]}}}})),Object.defineProperty(e.languages.diff,"PREFIXES",{value:n})}(Prism)},5960:()=>{!function(e){e.languages.ejs={delimiter:{pattern:/^<%[-_=]?|[-_]?%>$/,alias:"punctuation"},comment:/^#[\s\S]*/,"language-javascript":{pattern:/[\s\S]+/,inside:e.languages.javascript}},e.hooks.add("before-tokenize",(function(n){e.languages["markup-templating"].buildPlaceholders(n,"ejs",/<%(?!%)[\s\S]+?%>/g)})),e.hooks.add("after-tokenize",(function(n){e.languages["markup-templating"].tokenizePlaceholders(n,"ejs")})),e.languages.eta=e.languages.ejs}(Prism)},9264:()=>{Prism.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"}},Prism.languages.webmanifest=Prism.languages.json},1808:()=>{!function(e){function n(e,n){return"___"+e.toUpperCase()+n+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(t,r,o,a){if(t.language===r){var i=t.tokenStack=[];t.code=t.code.replace(o,(function(e){if("function"==typeof a&&!a(e))return e;for(var o,s=i.length;-1!==t.code.indexOf(o=n(r,s));)++s;return i[s]=e,o})),t.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(t,r){if(t.language===r&&t.tokenStack){t.grammar=e.languages[r];var o=0,a=Object.keys(t.tokenStack);!function i(s){for(var l=0;l<s.length&&!(o>=a.length);l++){var c=s[l];if("string"==typeof c||c.content&&"string"==typeof c.content){var u=a[o],d=t.tokenStack[u],p="string"==typeof c?c:c.content,f=n(r,u),m=p.indexOf(f);if(m>-1){++o;var g=p.substring(0,m),h=new e.Token(r,e.tokenize(d,t.grammar),"language-"+r,d),y=p.substring(m+f.length),b=[];g&&b.push.apply(b,i([g])),b.push(h),y&&b.push.apply(b,i([y])),"string"==typeof c?s.splice.apply(s,[l,1].concat(b)):c.content=b}}else c.content&&i(c.content)}return s}(t.tokens)}}}})}(Prism)},712:()=>{!function(e){e.languages.ruby=e.languages.extend("clike",{comment:{pattern:/#.*|^=begin\s[\s\S]*?^=end/m,greedy:!0},"class-name":{pattern:/(\b(?:class|module)\s+|\bcatch\s+\()[\w.\\]+|\b[A-Z_]\w*(?=\s*\.\s*new\b)/,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:BEGIN|END|alias|and|begin|break|case|class|def|define_method|defined|do|each|else|elsif|end|ensure|extend|for|if|in|include|module|new|next|nil|not|or|prepend|private|protected|public|raise|redo|require|rescue|retry|return|self|super|then|throw|undef|unless|until|when|while|yield)\b/,operator:/\.{2,3}|&\.|===|<?=>|[!=]?~|(?:&&|\|\||<<|>>|\*\*|[+\-*/%<>!^&|=])=?|[?:]/,punctuation:/[(){}[\].,;]/}),e.languages.insertBefore("ruby","operator",{"double-colon":{pattern:/::/,alias:"punctuation"}});var n={pattern:/((?:^|[^\\])(?:\\{2})*)#\{(?:[^{}]|\{[^{}]*\})*\}/,lookbehind:!0,inside:{content:{pattern:/^(#\{)[\s\S]+(?=\}$)/,lookbehind:!0,inside:e.languages.ruby},delimiter:{pattern:/^#\{|\}$/,alias:"punctuation"}}};delete e.languages.ruby.function;var t="(?:"+[/([^a-zA-Z0-9\s{(\[<=])(?:(?!\1)[^\\]|\\[\s\S])*\1/.source,/\((?:[^()\\]|\\[\s\S]|\((?:[^()\\]|\\[\s\S])*\))*\)/.source,/\{(?:[^{}\\]|\\[\s\S]|\{(?:[^{}\\]|\\[\s\S])*\})*\}/.source,/\[(?:[^\[\]\\]|\\[\s\S]|\[(?:[^\[\]\\]|\\[\s\S])*\])*\]/.source,/<(?:[^<>\\]|\\[\s\S]|<(?:[^<>\\]|\\[\s\S])*>)*>/.source].join("|")+")",r=/(?:"(?:\\.|[^"\\\r\n])*"|(?:\b[a-zA-Z_]\w*|[^\s\0-\x7F]+)[?!]?|\$.)/.source;e.languages.insertBefore("ruby","keyword",{"regex-literal":[{pattern:RegExp(/%r/.source+t+/[egimnosux]{0,6}/.source),greedy:!0,inside:{interpolation:n,regex:/[\s\S]+/}},{pattern:/(^|[^/])\/(?!\/)(?:\[[^\r\n\]]+\]|\\.|[^[/\\\r\n])+\/[egimnosux]{0,6}(?=\s*(?:$|[\r\n,.;})#]))/,lookbehind:!0,greedy:!0,inside:{interpolation:n,regex:/[\s\S]+/}}],variable:/[@$]+[a-zA-Z_]\w*(?:[?!]|\b)/,symbol:[{pattern:RegExp(/(^|[^:]):/.source+r),lookbehind:!0,greedy:!0},{pattern:RegExp(/([\r\n{(,][ \t]*)/.source+r+/(?=:(?!:))/.source),lookbehind:!0,greedy:!0}],"method-definition":{pattern:/(\bdef\s+)\w+(?:\s*\.\s*\w+)?/,lookbehind:!0,inside:{function:/\b\w+$/,keyword:/^self\b/,"class-name":/^\w+/,punctuation:/\./}}}),e.languages.insertBefore("ruby","string",{"string-literal":[{pattern:RegExp(/%[qQiIwWs]?/.source+t),greedy:!0,inside:{interpolation:n,string:/[\s\S]+/}},{pattern:/("|')(?:#\{[^}]+\}|#(?!\{)|\\(?:\r\n|[\s\S])|(?!\1)[^\\#\r\n])*\1/,greedy:!0,inside:{interpolation:n,string:/[\s\S]+/}},{pattern:/<<[-~]?([a-z_]\w*)[\r\n](?:.*[\r\n])*?[\t ]*\1/i,alias:"heredoc-string",greedy:!0,inside:{delimiter:{pattern:/^<<[-~]?[a-z_]\w*|\b[a-z_]\w*$/i,inside:{symbol:/\b\w+/,punctuation:/^<<[-~]?/}},interpolation:n,string:/[\s\S]+/}},{pattern:/<<[-~]?'([a-z_]\w*)'[\r\n](?:.*[\r\n])*?[\t ]*\1/i,alias:"heredoc-string",greedy:!0,inside:{delimiter:{pattern:/^<<[-~]?'[a-z_]\w*'|\b[a-z_]\w*$/i,inside:{symbol:/\b\w+/,punctuation:/^<<[-~]?'|'$/}},string:/[\s\S]+/}}],"command-literal":[{pattern:RegExp(/%x/.source+t),greedy:!0,inside:{interpolation:n,command:{pattern:/[\s\S]+/,alias:"string"}}},{pattern:/`(?:#\{[^}]+\}|#(?!\{)|\\(?:\r\n|[\s\S])|[^\\`#\r\n])*`/,greedy:!0,inside:{interpolation:n,command:{pattern:/[\s\S]+/,alias:"string"}}}]}),delete e.languages.ruby.string,e.languages.insertBefore("ruby","number",{builtin:/\b(?:Array|Bignum|Binding|Class|Continuation|Dir|Exception|FalseClass|File|Fixnum|Float|Hash|IO|Integer|MatchData|Method|Module|NilClass|Numeric|Object|Proc|Range|Regexp|Stat|String|Struct|Symbol|TMS|Thread|ThreadGroup|Time|TrueClass)\b/,constant:/\b[A-Z][A-Z0-9_]*(?:[?!]|\b)/}),e.languages.rb=e.languages.ruby}(Prism)},4096:(e,n,t)=>{var r={"./prism-bash":1596,"./prism-diff":1496,"./prism-ejs":5960,"./prism-json":9264,"./prism-markup-templating":1808,"./prism-ruby":712};function o(e){var n=a(e);return t(n)}function a(e){if(!t.o(r,e)){var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}return r[e]}o.keys=function(){return Object.keys(r)},o.resolve=a,e.exports=o,o.id=4096},9776:(e,n,t)=>{"use strict";var r=t(9143);function o(){}function a(){}a.resetWarningCache=o,e.exports=function(){function e(e,n,t,o,a,i){if(i!==r){var s=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 s.name="Invariant Violation",s}}function n(){return e}e.isRequired=e;var t={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:n,element:e,elementType:e,instanceOf:n,node:e,objectOf:n,oneOf:n,oneOfType:n,shape:n,exact:n,checkPropTypes:a,resetWarningCache:o};return t.PropTypes=t,t}},3268:(e,n,t)=>{e.exports=t(9776)()},9143:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},9516:(e,n,t)=>{"use strict";var r=t(1504),o=t(4712);function a(e){for(var n="https://reactjs.org/docs/error-decoder.html?invariant="+e,t=1;t<arguments.length;t++)n+="&args[]="+encodeURIComponent(arguments[t]);return"Minified React error #"+e+"; visit "+n+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var i=new Set,s={};function l(e,n){c(e,n),c(e+"Capture",n)}function c(e,n){for(s[e]=n,e=0;e<n.length;e++)i.add(n[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 g(e,n,t,r,o,a,i){this.acceptsBooleans=2===n||3===n||4===n,this.attributeName=r,this.attributeNamespace=o,this.mustUseProperty=t,this.propertyName=e,this.type=n,this.sanitizeURL=a,this.removeEmptyString=i}var h={};"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach((function(e){h[e]=new g(e,0,!1,e,null,!1,!1)})),[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach((function(e){var n=e[0];h[n]=new g(n,1,!1,e[1],null,!1,!1)})),["contentEditable","draggable","spellCheck","value"].forEach((function(e){h[e]=new g(e,2,!1,e.toLowerCase(),null,!1,!1)})),["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach((function(e){h[e]=new g(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){h[e]=new g(e,3,!1,e.toLowerCase(),null,!1,!1)})),["checked","multiple","muted","selected"].forEach((function(e){h[e]=new g(e,3,!0,e,null,!1,!1)})),["capture","download"].forEach((function(e){h[e]=new g(e,4,!1,e,null,!1,!1)})),["cols","rows","size","span"].forEach((function(e){h[e]=new g(e,6,!1,e,null,!1,!1)})),["rowSpan","start"].forEach((function(e){h[e]=new g(e,5,!1,e.toLowerCase(),null,!1,!1)}));var y=/[\-:]([a-z])/g;function b(e){return e[1].toUpperCase()}function v(e,n,t,r){var o=h.hasOwnProperty(n)?h[n]:null;(null!==o?0!==o.type:r||!(2<n.length)||"o"!==n[0]&&"O"!==n[0]||"n"!==n[1]&&"N"!==n[1])&&(function(e,n,t,r){if(null==n||function(e,n,t,r){if(null!==t&&0===t.type)return!1;switch(typeof n){case"function":case"symbol":return!0;case"boolean":return!r&&(null!==t?!t.acceptsBooleans:"data-"!==(e=e.toLowerCase().slice(0,5))&&"aria-"!==e);default:return!1}}(e,n,t,r))return!0;if(r)return!1;if(null!==t)switch(t.type){case 3:return!n;case 4:return!1===n;case 5:return isNaN(n);case 6:return isNaN(n)||1>n}return!1}(n,t,o,r)&&(t=null),r||null===o?function(e){return!!d.call(m,e)||!d.call(f,e)&&(p.test(e)?m[e]=!0:(f[e]=!0,!1))}(n)&&(null===t?e.removeAttribute(n):e.setAttribute(n,""+t)):o.mustUseProperty?e[o.propertyName]=null===t?3!==o.type&&"":t:(n=o.attributeName,r=o.attributeNamespace,null===t?e.removeAttribute(n):(t=3===(o=o.type)||4===o&&!0===t?"":""+t,r?e.setAttributeNS(r,n,t):e.setAttribute(n,t))))}"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 n=e.replace(y,b);h[n]=new g(n,1,!1,e,null,!1,!1)})),"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach((function(e){var n=e.replace(y,b);h[n]=new g(n,1,!1,e,"http://www.w3.org/1999/xlink",!1,!1)})),["xml:base","xml:lang","xml:space"].forEach((function(e){var n=e.replace(y,b);h[n]=new g(n,1,!1,e,"http://www.w3.org/XML/1998/namespace",!1,!1)})),["tabIndex","crossOrigin"].forEach((function(e){h[e]=new g(e,1,!1,e.toLowerCase(),null,!1,!1)})),h.xlinkHref=new g("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0,!1),["src","href","action","formAction"].forEach((function(e){h[e]=new g(e,1,!1,e.toLowerCase(),null,!0,!0)}));var S=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,w=Symbol.for("react.element"),x=Symbol.for("react.portal"),k=Symbol.for("react.fragment"),T=Symbol.for("react.strict_mode"),E=Symbol.for("react.profiler"),C=Symbol.for("react.provider"),_=Symbol.for("react.context"),A=Symbol.for("react.forward_ref"),I=Symbol.for("react.suspense"),P=Symbol.for("react.suspense_list"),L=Symbol.for("react.memo"),R=Symbol.for("react.lazy");Symbol.for("react.scope"),Symbol.for("react.debug_trace_mode");var N=Symbol.for("react.offscreen");Symbol.for("react.legacy_hidden"),Symbol.for("react.cache"),Symbol.for("react.tracing_marker");var O=Symbol.iterator;function F(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=O&&e[O]||e["@@iterator"])?e:null}var j,D=Object.assign;function M(e){if(void 0===j)try{throw Error()}catch(t){var n=t.stack.trim().match(/\n( *(at )?)/);j=n&&n[1]||""}return"\n"+j+e}var B=!1;function $(e,n){if(!e||B)return"";B=!0;var t=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{if(n)if(n=function(){throw Error()},Object.defineProperty(n.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(n,[])}catch(c){var r=c}Reflect.construct(e,[],n)}else{try{n.call()}catch(c){r=c}e.call(n.prototype)}else{try{throw Error()}catch(c){r=c}e()}}catch(c){if(c&&r&&"string"==typeof c.stack){for(var o=c.stack.split("\n"),a=r.stack.split("\n"),i=o.length-1,s=a.length-1;1<=i&&0<=s&&o[i]!==a[s];)s--;for(;1<=i&&0<=s;i--,s--)if(o[i]!==a[s]){if(1!==i||1!==s)do{if(i--,0>--s||o[i]!==a[s]){var l="\n"+o[i].replace(" at new "," at ");return e.displayName&&l.includes("<anonymous>")&&(l=l.replace("<anonymous>",e.displayName)),l}}while(1<=i&&0<=s);break}}}finally{B=!1,Error.prepareStackTrace=t}return(e=e?e.displayName||e.name:"")?M(e):""}function U(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=$(e.type,!1);case 11:return e=$(e.type.render,!1);case 1:return e=$(e.type,!0);default:return""}}function V(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 k:return"Fragment";case x:return"Portal";case E:return"Profiler";case T:return"StrictMode";case I:return"Suspense";case P:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case _:return(e.displayName||"Context")+".Consumer";case C:return(e._context.displayName||"Context")+".Provider";case A:var n=e.render;return(e=e.displayName)||(e=""!==(e=n.displayName||n.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case L:return null!==(n=e.displayName||null)?n:V(e.type)||"Memo";case R:n=e._payload,e=e._init;try{return V(e(n))}catch(t){}}return null}function z(e){var n=e.type;switch(e.tag){case 24:return"Cache";case 9:return(n.displayName||"Context")+".Consumer";case 10:return(n._context.displayName||"Context")+".Provider";case 18:return"DehydratedFragment";case 11:return e=(e=n.render).displayName||e.name||"",n.displayName||(""!==e?"ForwardRef("+e+")":"ForwardRef");case 7:return"Fragment";case 5:return n;case 4:return"Portal";case 3:return"Root";case 6:return"Text";case 16:return V(n);case 8:return n===T?"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 n)return n.displayName||n.name||null;if("string"==typeof n)return n}return null}function H(e){switch(typeof e){case"boolean":case"number":case"string":case"undefined":case"object":return e;default:return""}}function W(e){var n=e.type;return(e=e.nodeName)&&"input"===e.toLowerCase()&&("checkbox"===n||"radio"===n)}function G(e){e._valueTracker||(e._valueTracker=function(e){var n=W(e)?"checked":"value",t=Object.getOwnPropertyDescriptor(e.constructor.prototype,n),r=""+e[n];if(!e.hasOwnProperty(n)&&void 0!==t&&"function"==typeof t.get&&"function"==typeof t.set){var o=t.get,a=t.set;return Object.defineProperty(e,n,{configurable:!0,get:function(){return o.call(this)},set:function(e){r=""+e,a.call(this,e)}}),Object.defineProperty(e,n,{enumerable:t.enumerable}),{getValue:function(){return r},setValue:function(e){r=""+e},stopTracking:function(){e._valueTracker=null,delete e[n]}}}}(e))}function q(e){if(!e)return!1;var n=e._valueTracker;if(!n)return!0;var t=n.getValue(),r="";return e&&(r=W(e)?e.checked?"true":"false":e.value),(e=r)!==t&&(n.setValue(e),!0)}function Y(e){if(void 0===(e=e||("undefined"!=typeof document?document:void 0)))return null;try{return e.activeElement||e.body}catch(n){return e.body}}function K(e,n){var t=n.checked;return D({},n,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:null!=t?t:e._wrapperState.initialChecked})}function X(e,n){var t=null==n.defaultValue?"":n.defaultValue,r=null!=n.checked?n.checked:n.defaultChecked;t=H(null!=n.value?n.value:t),e._wrapperState={initialChecked:r,initialValue:t,controlled:"checkbox"===n.type||"radio"===n.type?null!=n.checked:null!=n.value}}function Q(e,n){null!=(n=n.checked)&&v(e,"checked",n,!1)}function Z(e,n){Q(e,n);var t=H(n.value),r=n.type;if(null!=t)"number"===r?(0===t&&""===e.value||e.value!=t)&&(e.value=""+t):e.value!==""+t&&(e.value=""+t);else if("submit"===r||"reset"===r)return void e.removeAttribute("value");n.hasOwnProperty("value")?ee(e,n.type,t):n.hasOwnProperty("defaultValue")&&ee(e,n.type,H(n.defaultValue)),null==n.checked&&null!=n.defaultChecked&&(e.defaultChecked=!!n.defaultChecked)}function J(e,n,t){if(n.hasOwnProperty("value")||n.hasOwnProperty("defaultValue")){var r=n.type;if(!("submit"!==r&&"reset"!==r||void 0!==n.value&&null!==n.value))return;n=""+e._wrapperState.initialValue,t||n===e.value||(e.value=n),e.defaultValue=n}""!==(t=e.name)&&(e.name=""),e.defaultChecked=!!e._wrapperState.initialChecked,""!==t&&(e.name=t)}function ee(e,n,t){"number"===n&&Y(e.ownerDocument)===e||(null==t?e.defaultValue=""+e._wrapperState.initialValue:e.defaultValue!==""+t&&(e.defaultValue=""+t))}var ne=Array.isArray;function te(e,n,t,r){if(e=e.options,n){n={};for(var o=0;o<t.length;o++)n["$"+t[o]]=!0;for(t=0;t<e.length;t++)o=n.hasOwnProperty("$"+e[t].value),e[t].selected!==o&&(e[t].selected=o),o&&r&&(e[t].defaultSelected=!0)}else{for(t=""+H(t),n=null,o=0;o<e.length;o++){if(e[o].value===t)return e[o].selected=!0,void(r&&(e[o].defaultSelected=!0));null!==n||e[o].disabled||(n=e[o])}null!==n&&(n.selected=!0)}}function re(e,n){if(null!=n.dangerouslySetInnerHTML)throw Error(a(91));return D({},n,{value:void 0,defaultValue:void 0,children:""+e._wrapperState.initialValue})}function oe(e,n){var t=n.value;if(null==t){if(t=n.children,n=n.defaultValue,null!=t){if(null!=n)throw Error(a(92));if(ne(t)){if(1<t.length)throw Error(a(93));t=t[0]}n=t}null==n&&(n=""),t=n}e._wrapperState={initialValue:H(t)}}function ae(e,n){var t=H(n.value),r=H(n.defaultValue);null!=t&&((t=""+t)!==e.value&&(e.value=t),null==n.defaultValue&&e.defaultValue!==t&&(e.defaultValue=t)),null!=r&&(e.defaultValue=""+r)}function ie(e){var n=e.textContent;n===e._wrapperState.initialValue&&""!==n&&null!==n&&(e.value=n)}function se(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 le(e,n){return null==e||"http://www.w3.org/1999/xhtml"===e?se(n):"http://www.w3.org/2000/svg"===e&&"foreignObject"===n?"http://www.w3.org/1999/xhtml":e}var ce,ue,de=(ue=function(e,n){if("http://www.w3.org/2000/svg"!==e.namespaceURI||"innerHTML"in e)e.innerHTML=n;else{for((ce=ce||document.createElement("div")).innerHTML="<svg>"+n.valueOf().toString()+"</svg>",n=ce.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;n.firstChild;)e.appendChild(n.firstChild)}},"undefined"!=typeof MSApp&&MSApp.execUnsafeLocalFunction?function(e,n,t,r){MSApp.execUnsafeLocalFunction((function(){return ue(e,n)}))}:ue);function pe(e,n){if(n){var t=e.firstChild;if(t&&t===e.lastChild&&3===t.nodeType)return void(t.nodeValue=n)}e.textContent=n}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 ge(e,n,t){return null==n||"boolean"==typeof n||""===n?"":t||"number"!=typeof n||0===n||fe.hasOwnProperty(e)&&fe[e]?(""+n).trim():n+"px"}function he(e,n){for(var t in e=e.style,n)if(n.hasOwnProperty(t)){var r=0===t.indexOf("--"),o=ge(t,n[t],r);"float"===t&&(t="cssFloat"),r?e.setProperty(t,o):e[t]=o}}Object.keys(fe).forEach((function(e){me.forEach((function(n){n=n+e.charAt(0).toUpperCase()+e.substring(1),fe[n]=fe[e]}))}));var ye=D({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,n){if(n){if(ye[e]&&(null!=n.children||null!=n.dangerouslySetInnerHTML))throw Error(a(137,e));if(null!=n.dangerouslySetInnerHTML){if(null!=n.children)throw Error(a(60));if("object"!=typeof n.dangerouslySetInnerHTML||!("__html"in n.dangerouslySetInnerHTML))throw Error(a(61))}if(null!=n.style&&"object"!=typeof n.style)throw Error(a(62))}}function ve(e,n){if(-1===e.indexOf("-"))return"string"==typeof n.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 Se=null;function we(e){return(e=e.target||e.srcElement||window).correspondingUseElement&&(e=e.correspondingUseElement),3===e.nodeType?e.parentNode:e}var xe=null,ke=null,Te=null;function Ee(e){if(e=So(e)){if("function"!=typeof xe)throw Error(a(280));var n=e.stateNode;n&&(n=xo(n),xe(e.stateNode,e.type,n))}}function Ce(e){ke?Te?Te.push(e):Te=[e]:ke=e}function _e(){if(ke){var e=ke,n=Te;if(Te=ke=null,Ee(e),n)for(e=0;e<n.length;e++)Ee(n[e])}}function Ae(e,n){return e(n)}function Ie(){}var Pe=!1;function Le(e,n,t){if(Pe)return e(n,t);Pe=!0;try{return Ae(e,n,t)}finally{Pe=!1,(null!==ke||null!==Te)&&(Ie(),_e())}}function Re(e,n){var t=e.stateNode;if(null===t)return null;var r=xo(t);if(null===r)return null;t=r[n];e:switch(n){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(t&&"function"!=typeof t)throw Error(a(231,n,typeof t));return t}var Ne=!1;if(u)try{var Oe={};Object.defineProperty(Oe,"passive",{get:function(){Ne=!0}}),window.addEventListener("test",Oe,Oe),window.removeEventListener("test",Oe,Oe)}catch(ue){Ne=!1}function Fe(e,n,t,r,o,a,i,s,l){var c=Array.prototype.slice.call(arguments,3);try{n.apply(t,c)}catch(u){this.onError(u)}}var je=!1,De=null,Me=!1,Be=null,$e={onError:function(e){je=!0,De=e}};function Ue(e,n,t,r,o,a,i,s,l){je=!1,De=null,Fe.apply($e,arguments)}function Ve(e){var n=e,t=e;if(e.alternate)for(;n.return;)n=n.return;else{e=n;do{0!=(4098&(n=e).flags)&&(t=n.return),e=n.return}while(e)}return 3===n.tag?t:null}function ze(e){if(13===e.tag){var n=e.memoizedState;if(null===n&&(null!==(e=e.alternate)&&(n=e.memoizedState)),null!==n)return n.dehydrated}return null}function He(e){if(Ve(e)!==e)throw Error(a(188))}function We(e){return null!==(e=function(e){var n=e.alternate;if(!n){if(null===(n=Ve(e)))throw Error(a(188));return n!==e?null:e}for(var t=e,r=n;;){var o=t.return;if(null===o)break;var i=o.alternate;if(null===i){if(null!==(r=o.return)){t=r;continue}break}if(o.child===i.child){for(i=o.child;i;){if(i===t)return He(o),e;if(i===r)return He(o),n;i=i.sibling}throw Error(a(188))}if(t.return!==r.return)t=o,r=i;else{for(var s=!1,l=o.child;l;){if(l===t){s=!0,t=o,r=i;break}if(l===r){s=!0,r=o,t=i;break}l=l.sibling}if(!s){for(l=i.child;l;){if(l===t){s=!0,t=i,r=o;break}if(l===r){s=!0,r=i,t=o;break}l=l.sibling}if(!s)throw Error(a(189))}}if(t.alternate!==r)throw Error(a(190))}if(3!==t.tag)throw Error(a(188));return t.stateNode.current===t?e:n}(e))?Ge(e):null}function Ge(e){if(5===e.tag||6===e.tag)return e;for(e=e.child;null!==e;){var n=Ge(e);if(null!==n)return n;e=e.sibling}return null}var qe=o.unstable_scheduleCallback,Ye=o.unstable_cancelCallback,Ke=o.unstable_shouldYield,Xe=o.unstable_requestPaint,Qe=o.unstable_now,Ze=o.unstable_getCurrentPriorityLevel,Je=o.unstable_ImmediatePriority,en=o.unstable_UserBlockingPriority,nn=o.unstable_NormalPriority,tn=o.unstable_LowPriority,rn=o.unstable_IdlePriority,on=null,an=null;var sn=Math.clz32?Math.clz32:function(e){return e>>>=0,0===e?32:31-(ln(e)/cn|0)|0},ln=Math.log,cn=Math.LN2;var un=64,dn=4194304;function pn(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 fn(e,n){var t=e.pendingLanes;if(0===t)return 0;var r=0,o=e.suspendedLanes,a=e.pingedLanes,i=268435455&t;if(0!==i){var s=i&~o;0!==s?r=pn(s):0!==(a&=i)&&(r=pn(a))}else 0!==(i=t&~o)?r=pn(i):0!==a&&(r=pn(a));if(0===r)return 0;if(0!==n&&n!==r&&0==(n&o)&&((o=r&-r)>=(a=n&-n)||16===o&&0!=(4194240&a)))return n;if(0!=(4&r)&&(r|=16&t),0!==(n=e.entangledLanes))for(e=e.entanglements,n&=r;0<n;)o=1<<(t=31-sn(n)),r|=e[t],n&=~o;return r}function mn(e,n){switch(e){case 1:case 2:case 4:return n+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 n+5e3;default:return-1}}function gn(e){return 0!==(e=-1073741825&e.pendingLanes)?e:1073741824&e?1073741824:0}function hn(){var e=un;return 0==(4194240&(un<<=1))&&(un=64),e}function yn(e){for(var n=[],t=0;31>t;t++)n.push(e);return n}function bn(e,n,t){e.pendingLanes|=n,536870912!==n&&(e.suspendedLanes=0,e.pingedLanes=0),(e=e.eventTimes)[n=31-sn(n)]=t}function vn(e,n){var t=e.entangledLanes|=n;for(e=e.entanglements;t;){var r=31-sn(t),o=1<<r;o&n|e[r]&n&&(e[r]|=n),t&=~o}}var Sn=0;function wn(e){return 1<(e&=-e)?4<e?0!=(268435455&e)?16:536870912:4:1}var xn,kn,Tn,En,Cn,_n=!1,An=[],In=null,Pn=null,Ln=null,Rn=new Map,Nn=new Map,On=[],Fn="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 jn(e,n){switch(e){case"focusin":case"focusout":In=null;break;case"dragenter":case"dragleave":Pn=null;break;case"mouseover":case"mouseout":Ln=null;break;case"pointerover":case"pointerout":Rn.delete(n.pointerId);break;case"gotpointercapture":case"lostpointercapture":Nn.delete(n.pointerId)}}function Dn(e,n,t,r,o,a){return null===e||e.nativeEvent!==a?(e={blockedOn:n,domEventName:t,eventSystemFlags:r,nativeEvent:a,targetContainers:[o]},null!==n&&(null!==(n=So(n))&&kn(n)),e):(e.eventSystemFlags|=r,n=e.targetContainers,null!==o&&-1===n.indexOf(o)&&n.push(o),e)}function Mn(e){var n=vo(e.target);if(null!==n){var t=Ve(n);if(null!==t)if(13===(n=t.tag)){if(null!==(n=ze(t)))return e.blockedOn=n,void Cn(e.priority,(function(){Tn(t)}))}else if(3===n&&t.stateNode.current.memoizedState.isDehydrated)return void(e.blockedOn=3===t.tag?t.stateNode.containerInfo:null)}e.blockedOn=null}function Bn(e){if(null!==e.blockedOn)return!1;for(var n=e.targetContainers;0<n.length;){var t=Xn(e.domEventName,e.eventSystemFlags,n[0],e.nativeEvent);if(null!==t)return null!==(n=So(t))&&kn(n),e.blockedOn=t,!1;var r=new(t=e.nativeEvent).constructor(t.type,t);Se=r,t.target.dispatchEvent(r),Se=null,n.shift()}return!0}function $n(e,n,t){Bn(e)&&t.delete(n)}function Un(){_n=!1,null!==In&&Bn(In)&&(In=null),null!==Pn&&Bn(Pn)&&(Pn=null),null!==Ln&&Bn(Ln)&&(Ln=null),Rn.forEach($n),Nn.forEach($n)}function Vn(e,n){e.blockedOn===n&&(e.blockedOn=null,_n||(_n=!0,o.unstable_scheduleCallback(o.unstable_NormalPriority,Un)))}function zn(e){function n(n){return Vn(n,e)}if(0<An.length){Vn(An[0],e);for(var t=1;t<An.length;t++){var r=An[t];r.blockedOn===e&&(r.blockedOn=null)}}for(null!==In&&Vn(In,e),null!==Pn&&Vn(Pn,e),null!==Ln&&Vn(Ln,e),Rn.forEach(n),Nn.forEach(n),t=0;t<On.length;t++)(r=On[t]).blockedOn===e&&(r.blockedOn=null);for(;0<On.length&&null===(t=On[0]).blockedOn;)Mn(t),null===t.blockedOn&&On.shift()}var Hn=S.ReactCurrentBatchConfig,Wn=!0;function Gn(e,n,t,r){var o=Sn,a=Hn.transition;Hn.transition=null;try{Sn=1,Yn(e,n,t,r)}finally{Sn=o,Hn.transition=a}}function qn(e,n,t,r){var o=Sn,a=Hn.transition;Hn.transition=null;try{Sn=4,Yn(e,n,t,r)}finally{Sn=o,Hn.transition=a}}function Yn(e,n,t,r){if(Wn){var o=Xn(e,n,t,r);if(null===o)Hr(e,n,r,Kn,t),jn(e,r);else if(function(e,n,t,r,o){switch(n){case"focusin":return In=Dn(In,e,n,t,r,o),!0;case"dragenter":return Pn=Dn(Pn,e,n,t,r,o),!0;case"mouseover":return Ln=Dn(Ln,e,n,t,r,o),!0;case"pointerover":var a=o.pointerId;return Rn.set(a,Dn(Rn.get(a)||null,e,n,t,r,o)),!0;case"gotpointercapture":return a=o.pointerId,Nn.set(a,Dn(Nn.get(a)||null,e,n,t,r,o)),!0}return!1}(o,e,n,t,r))r.stopPropagation();else if(jn(e,r),4&n&&-1<Fn.indexOf(e)){for(;null!==o;){var a=So(o);if(null!==a&&xn(a),null===(a=Xn(e,n,t,r))&&Hr(e,n,r,Kn,t),a===o)break;o=a}null!==o&&r.stopPropagation()}else Hr(e,n,r,null,t)}}var Kn=null;function Xn(e,n,t,r){if(Kn=null,null!==(e=vo(e=we(r))))if(null===(n=Ve(e)))e=null;else if(13===(t=n.tag)){if(null!==(e=ze(n)))return e;e=null}else if(3===t){if(n.stateNode.current.memoizedState.isDehydrated)return 3===n.tag?n.stateNode.containerInfo:null;e=null}else n!==e&&(e=null);return Kn=e,null}function Qn(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(Ze()){case Je:return 1;case en:return 4;case nn:case tn:return 16;case rn:return 536870912;default:return 16}default:return 16}}var Zn=null,Jn=null,et=null;function nt(){if(et)return et;var e,n,t=Jn,r=t.length,o="value"in Zn?Zn.value:Zn.textContent,a=o.length;for(e=0;e<r&&t[e]===o[e];e++);var i=r-e;for(n=1;n<=i&&t[r-n]===o[a-n];n++);return et=o.slice(e,1<n?1-n:void 0)}function tt(e){var n=e.keyCode;return"charCode"in e?0===(e=e.charCode)&&13===n&&(e=13):e=n,10===e&&(e=13),32<=e||13===e?e:0}function rt(){return!0}function ot(){return!1}function at(e){function n(n,t,r,o,a){for(var i in this._reactName=n,this._targetInst=r,this.type=t,this.nativeEvent=o,this.target=a,this.currentTarget=null,e)e.hasOwnProperty(i)&&(n=e[i],this[i]=n?n(o):o[i]);return this.isDefaultPrevented=(null!=o.defaultPrevented?o.defaultPrevented:!1===o.returnValue)?rt:ot,this.isPropagationStopped=ot,this}return D(n.prototype,{preventDefault:function(){this.defaultPrevented=!0;var e=this.nativeEvent;e&&(e.preventDefault?e.preventDefault():"unknown"!=typeof e.returnValue&&(e.returnValue=!1),this.isDefaultPrevented=rt)},stopPropagation:function(){var e=this.nativeEvent;e&&(e.stopPropagation?e.stopPropagation():"unknown"!=typeof e.cancelBubble&&(e.cancelBubble=!0),this.isPropagationStopped=rt)},persist:function(){},isPersistent:rt}),n}var it,st,lt,ct={eventPhase:0,bubbles:0,cancelable:0,timeStamp:function(e){return e.timeStamp||Date.now()},defaultPrevented:0,isTrusted:0},ut=at(ct),dt=D({},ct,{view:0,detail:0}),pt=at(dt),ft=D({},dt,{screenX:0,screenY:0,clientX:0,clientY:0,pageX:0,pageY:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,getModifierState:Et,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!==lt&&(lt&&"mousemove"===e.type?(it=e.screenX-lt.screenX,st=e.screenY-lt.screenY):st=it=0,lt=e),it)},movementY:function(e){return"movementY"in e?e.movementY:st}}),mt=at(ft),gt=at(D({},ft,{dataTransfer:0})),ht=at(D({},dt,{relatedTarget:0})),yt=at(D({},ct,{animationName:0,elapsedTime:0,pseudoElement:0})),bt=D({},ct,{clipboardData:function(e){return"clipboardData"in e?e.clipboardData:window.clipboardData}}),vt=at(bt),St=at(D({},ct,{data:0})),wt={Esc:"Escape",Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",MozPrintableKey:"Unidentified"},xt={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"},kt={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"};function Tt(e){var n=this.nativeEvent;return n.getModifierState?n.getModifierState(e):!!(e=kt[e])&&!!n[e]}function Et(){return Tt}var Ct=D({},dt,{key:function(e){if(e.key){var n=wt[e.key]||e.key;if("Unidentified"!==n)return n}return"keypress"===e.type?13===(e=tt(e))?"Enter":String.fromCharCode(e):"keydown"===e.type||"keyup"===e.type?xt[e.keyCode]||"Unidentified":""},code:0,location:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,repeat:0,locale:0,getModifierState:Et,charCode:function(e){return"keypress"===e.type?tt(e):0},keyCode:function(e){return"keydown"===e.type||"keyup"===e.type?e.keyCode:0},which:function(e){return"keypress"===e.type?tt(e):"keydown"===e.type||"keyup"===e.type?e.keyCode:0}}),_t=at(Ct),At=at(D({},ft,{pointerId:0,width:0,height:0,pressure:0,tangentialPressure:0,tiltX:0,tiltY:0,twist:0,pointerType:0,isPrimary:0})),It=at(D({},dt,{touches:0,targetTouches:0,changedTouches:0,altKey:0,metaKey:0,ctrlKey:0,shiftKey:0,getModifierState:Et})),Pt=at(D({},ct,{propertyName:0,elapsedTime:0,pseudoElement:0})),Lt=D({},ft,{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}),Rt=at(Lt),Nt=[9,13,27,32],Ot=u&&"CompositionEvent"in window,Ft=null;u&&"documentMode"in document&&(Ft=document.documentMode);var jt=u&&"TextEvent"in window&&!Ft,Dt=u&&(!Ot||Ft&&8<Ft&&11>=Ft),Mt=String.fromCharCode(32),Bt=!1;function $t(e,n){switch(e){case"keyup":return-1!==Nt.indexOf(n.keyCode);case"keydown":return 229!==n.keyCode;case"keypress":case"mousedown":case"focusout":return!0;default:return!1}}function Ut(e){return"object"==typeof(e=e.detail)&&"data"in e?e.data:null}var Vt=!1;var zt={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 Ht(e){var n=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===n?!!zt[e.type]:"textarea"===n}function Wt(e,n,t,r){Ce(r),0<(n=Gr(n,"onChange")).length&&(t=new ut("onChange","change",null,t,r),e.push({event:t,listeners:n}))}var Gt=null,qt=null;function Yt(e){Mr(e,0)}function Kt(e){if(q(wo(e)))return e}function Xt(e,n){if("change"===e)return n}var Qt=!1;if(u){var Zt;if(u){var Jt="oninput"in document;if(!Jt){var er=document.createElement("div");er.setAttribute("oninput","return;"),Jt="function"==typeof er.oninput}Zt=Jt}else Zt=!1;Qt=Zt&&(!document.documentMode||9<document.documentMode)}function nr(){Gt&&(Gt.detachEvent("onpropertychange",tr),qt=Gt=null)}function tr(e){if("value"===e.propertyName&&Kt(qt)){var n=[];Wt(n,qt,e,we(e)),Le(Yt,n)}}function rr(e,n,t){"focusin"===e?(nr(),qt=t,(Gt=n).attachEvent("onpropertychange",tr)):"focusout"===e&&nr()}function or(e){if("selectionchange"===e||"keyup"===e||"keydown"===e)return Kt(qt)}function ar(e,n){if("click"===e)return Kt(n)}function ir(e,n){if("input"===e||"change"===e)return Kt(n)}var sr="function"==typeof Object.is?Object.is:function(e,n){return e===n&&(0!==e||1/e==1/n)||e!=e&&n!=n};function lr(e,n){if(sr(e,n))return!0;if("object"!=typeof e||null===e||"object"!=typeof n||null===n)return!1;var t=Object.keys(e),r=Object.keys(n);if(t.length!==r.length)return!1;for(r=0;r<t.length;r++){var o=t[r];if(!d.call(n,o)||!sr(e[o],n[o]))return!1}return!0}function cr(e){for(;e&&e.firstChild;)e=e.firstChild;return e}function ur(e,n){var t,r=cr(e);for(e=0;r;){if(3===r.nodeType){if(t=e+r.textContent.length,e<=n&&t>=n)return{node:r,offset:n-e};e=t}e:{for(;r;){if(r.nextSibling){r=r.nextSibling;break e}r=r.parentNode}r=void 0}r=cr(r)}}function dr(e,n){return!(!e||!n)&&(e===n||(!e||3!==e.nodeType)&&(n&&3===n.nodeType?dr(e,n.parentNode):"contains"in e?e.contains(n):!!e.compareDocumentPosition&&!!(16&e.compareDocumentPosition(n))))}function pr(){for(var e=window,n=Y();n instanceof e.HTMLIFrameElement;){try{var t="string"==typeof n.contentWindow.location.href}catch(r){t=!1}if(!t)break;n=Y((e=n.contentWindow).document)}return n}function fr(e){var n=e&&e.nodeName&&e.nodeName.toLowerCase();return n&&("input"===n&&("text"===e.type||"search"===e.type||"tel"===e.type||"url"===e.type||"password"===e.type)||"textarea"===n||"true"===e.contentEditable)}function mr(e){var n=pr(),t=e.focusedElem,r=e.selectionRange;if(n!==t&&t&&t.ownerDocument&&dr(t.ownerDocument.documentElement,t)){if(null!==r&&fr(t))if(n=r.start,void 0===(e=r.end)&&(e=n),"selectionStart"in t)t.selectionStart=n,t.selectionEnd=Math.min(e,t.value.length);else if((e=(n=t.ownerDocument||document)&&n.defaultView||window).getSelection){e=e.getSelection();var o=t.textContent.length,a=Math.min(r.start,o);r=void 0===r.end?a:Math.min(r.end,o),!e.extend&&a>r&&(o=r,r=a,a=o),o=ur(t,a);var i=ur(t,r);o&&i&&(1!==e.rangeCount||e.anchorNode!==o.node||e.anchorOffset!==o.offset||e.focusNode!==i.node||e.focusOffset!==i.offset)&&((n=n.createRange()).setStart(o.node,o.offset),e.removeAllRanges(),a>r?(e.addRange(n),e.extend(i.node,i.offset)):(n.setEnd(i.node,i.offset),e.addRange(n)))}for(n=[],e=t;e=e.parentNode;)1===e.nodeType&&n.push({element:e,left:e.scrollLeft,top:e.scrollTop});for("function"==typeof t.focus&&t.focus(),t=0;t<n.length;t++)(e=n[t]).element.scrollLeft=e.left,e.element.scrollTop=e.top}}var gr=u&&"documentMode"in document&&11>=document.documentMode,hr=null,yr=null,br=null,vr=!1;function Sr(e,n,t){var r=t.window===t?t.document:9===t.nodeType?t:t.ownerDocument;vr||null==hr||hr!==Y(r)||("selectionStart"in(r=hr)&&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&&lr(br,r)||(br=r,0<(r=Gr(yr,"onSelect")).length&&(n=new ut("onSelect","select",null,n,t),e.push({event:n,listeners:r}),n.target=hr)))}function wr(e,n){var t={};return t[e.toLowerCase()]=n.toLowerCase(),t["Webkit"+e]="webkit"+n,t["Moz"+e]="moz"+n,t}var xr={animationend:wr("Animation","AnimationEnd"),animationiteration:wr("Animation","AnimationIteration"),animationstart:wr("Animation","AnimationStart"),transitionend:wr("Transition","TransitionEnd")},kr={},Tr={};function Er(e){if(kr[e])return kr[e];if(!xr[e])return e;var n,t=xr[e];for(n in t)if(t.hasOwnProperty(n)&&n in Tr)return kr[e]=t[n];return e}u&&(Tr=document.createElement("div").style,"AnimationEvent"in window||(delete xr.animationend.animation,delete xr.animationiteration.animation,delete xr.animationstart.animation),"TransitionEvent"in window||delete xr.transitionend.transition);var Cr=Er("animationend"),_r=Er("animationiteration"),Ar=Er("animationstart"),Ir=Er("transitionend"),Pr=new Map,Lr="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,n){Pr.set(e,n),l(n,[e])}for(var Nr=0;Nr<Lr.length;Nr++){var Or=Lr[Nr];Rr(Or.toLowerCase(),"on"+(Or[0].toUpperCase()+Or.slice(1)))}Rr(Cr,"onAnimationEnd"),Rr(_r,"onAnimationIteration"),Rr(Ar,"onAnimationStart"),Rr("dblclick","onDoubleClick"),Rr("focusin","onFocus"),Rr("focusout","onBlur"),Rr(Ir,"onTransitionEnd"),c("onMouseEnter",["mouseout","mouseover"]),c("onMouseLeave",["mouseout","mouseover"]),c("onPointerEnter",["pointerout","pointerover"]),c("onPointerLeave",["pointerout","pointerover"]),l("onChange","change click focusin focusout input keydown keyup selectionchange".split(" ")),l("onSelect","focusout contextmenu dragend focusin keydown keyup mousedown mouseup selectionchange".split(" ")),l("onBeforeInput",["compositionend","keypress","textInput","paste"]),l("onCompositionEnd","compositionend focusout keydown keypress keyup mousedown".split(" ")),l("onCompositionStart","compositionstart focusout keydown keypress keyup mousedown".split(" ")),l("onCompositionUpdate","compositionupdate focusout keydown keypress keyup mousedown".split(" "));var Fr="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(" "),jr=new Set("cancel close invalid load scroll toggle".split(" ").concat(Fr));function Dr(e,n,t){var r=e.type||"unknown-event";e.currentTarget=t,function(e,n,t,r,o,i,s,l,c){if(Ue.apply(this,arguments),je){if(!je)throw Error(a(198));var u=De;je=!1,De=null,Me||(Me=!0,Be=u)}}(r,n,void 0,e),e.currentTarget=null}function Mr(e,n){n=0!=(4&n);for(var t=0;t<e.length;t++){var r=e[t],o=r.event;r=r.listeners;e:{var a=void 0;if(n)for(var i=r.length-1;0<=i;i--){var s=r[i],l=s.instance,c=s.currentTarget;if(s=s.listener,l!==a&&o.isPropagationStopped())break e;Dr(o,s,c),a=l}else for(i=0;i<r.length;i++){if(l=(s=r[i]).instance,c=s.currentTarget,s=s.listener,l!==a&&o.isPropagationStopped())break e;Dr(o,s,c),a=l}}}if(Me)throw e=Be,Me=!1,Be=null,e}function Br(e,n){var t=n[ho];void 0===t&&(t=n[ho]=new Set);var r=e+"__bubble";t.has(r)||(zr(n,e,2,!1),t.add(r))}function $r(e,n,t){var r=0;n&&(r|=4),zr(t,e,r,n)}var Ur="_reactListening"+Math.random().toString(36).slice(2);function Vr(e){if(!e[Ur]){e[Ur]=!0,i.forEach((function(n){"selectionchange"!==n&&(jr.has(n)||$r(n,!1,e),$r(n,!0,e))}));var n=9===e.nodeType?e:e.ownerDocument;null===n||n[Ur]||(n[Ur]=!0,$r("selectionchange",!1,n))}}function zr(e,n,t,r){switch(Qn(n)){case 1:var o=Gn;break;case 4:o=qn;break;default:o=Yn}t=o.bind(null,n,t,e),o=void 0,!Ne||"touchstart"!==n&&"touchmove"!==n&&"wheel"!==n||(o=!0),r?void 0!==o?e.addEventListener(n,t,{capture:!0,passive:o}):e.addEventListener(n,t,!0):void 0!==o?e.addEventListener(n,t,{passive:o}):e.addEventListener(n,t,!1)}function Hr(e,n,t,r,o){var a=r;if(0==(1&n)&&0==(2&n)&&null!==r)e:for(;;){if(null===r)return;var i=r.tag;if(3===i||4===i){var s=r.stateNode.containerInfo;if(s===o||8===s.nodeType&&s.parentNode===o)break;if(4===i)for(i=r.return;null!==i;){var l=i.tag;if((3===l||4===l)&&((l=i.stateNode.containerInfo)===o||8===l.nodeType&&l.parentNode===o))return;i=i.return}for(;null!==s;){if(null===(i=vo(s)))return;if(5===(l=i.tag)||6===l){r=a=i;continue e}s=s.parentNode}}r=r.return}Le((function(){var r=a,o=we(t),i=[];e:{var s=Pr.get(e);if(void 0!==s){var l=ut,c=e;switch(e){case"keypress":if(0===tt(t))break e;case"keydown":case"keyup":l=_t;break;case"focusin":c="focus",l=ht;break;case"focusout":c="blur",l=ht;break;case"beforeblur":case"afterblur":l=ht;break;case"click":if(2===t.button)break e;case"auxclick":case"dblclick":case"mousedown":case"mousemove":case"mouseup":case"mouseout":case"mouseover":case"contextmenu":l=mt;break;case"drag":case"dragend":case"dragenter":case"dragexit":case"dragleave":case"dragover":case"dragstart":case"drop":l=gt;break;case"touchcancel":case"touchend":case"touchmove":case"touchstart":l=It;break;case Cr:case _r:case Ar:l=yt;break;case Ir:l=Pt;break;case"scroll":l=pt;break;case"wheel":l=Rt;break;case"copy":case"cut":case"paste":l=vt;break;case"gotpointercapture":case"lostpointercapture":case"pointercancel":case"pointerdown":case"pointermove":case"pointerout":case"pointerover":case"pointerup":l=At}var u=0!=(4&n),d=!u&&"scroll"===e,p=u?null!==s?s+"Capture":null:s;u=[];for(var f,m=r;null!==m;){var g=(f=m).stateNode;if(5===f.tag&&null!==g&&(f=g,null!==p&&(null!=(g=Re(m,p))&&u.push(Wr(m,g,f)))),d)break;m=m.return}0<u.length&&(s=new l(s,c,null,t,o),i.push({event:s,listeners:u}))}}if(0==(7&n)){if(l="mouseout"===e||"pointerout"===e,(!(s="mouseover"===e||"pointerover"===e)||t===Se||!(c=t.relatedTarget||t.fromElement)||!vo(c)&&!c[go])&&(l||s)&&(s=o.window===o?o:(s=o.ownerDocument)?s.defaultView||s.parentWindow:window,l?(l=r,null!==(c=(c=t.relatedTarget||t.toElement)?vo(c):null)&&(c!==(d=Ve(c))||5!==c.tag&&6!==c.tag)&&(c=null)):(l=null,c=r),l!==c)){if(u=mt,g="onMouseLeave",p="onMouseEnter",m="mouse","pointerout"!==e&&"pointerover"!==e||(u=At,g="onPointerLeave",p="onPointerEnter",m="pointer"),d=null==l?s:wo(l),f=null==c?s:wo(c),(s=new u(g,m+"leave",l,t,o)).target=d,s.relatedTarget=f,g=null,vo(o)===r&&((u=new u(p,m+"enter",c,t,o)).target=f,u.relatedTarget=d,g=u),d=g,l&&c)e:{for(p=c,m=0,f=u=l;f;f=qr(f))m++;for(f=0,g=p;g;g=qr(g))f++;for(;0<m-f;)u=qr(u),m--;for(;0<f-m;)p=qr(p),f--;for(;m--;){if(u===p||null!==p&&u===p.alternate)break e;u=qr(u),p=qr(p)}u=null}else u=null;null!==l&&Yr(i,s,l,u,!1),null!==c&&null!==d&&Yr(i,d,c,u,!0)}if("select"===(l=(s=r?wo(r):window).nodeName&&s.nodeName.toLowerCase())||"input"===l&&"file"===s.type)var h=Xt;else if(Ht(s))if(Qt)h=ir;else{h=or;var y=rr}else(l=s.nodeName)&&"input"===l.toLowerCase()&&("checkbox"===s.type||"radio"===s.type)&&(h=ar);switch(h&&(h=h(e,r))?Wt(i,h,t,o):(y&&y(e,s,r),"focusout"===e&&(y=s._wrapperState)&&y.controlled&&"number"===s.type&&ee(s,"number",s.value)),y=r?wo(r):window,e){case"focusin":(Ht(y)||"true"===y.contentEditable)&&(hr=y,yr=r,br=null);break;case"focusout":br=yr=hr=null;break;case"mousedown":vr=!0;break;case"contextmenu":case"mouseup":case"dragend":vr=!1,Sr(i,t,o);break;case"selectionchange":if(gr)break;case"keydown":case"keyup":Sr(i,t,o)}var b;if(Ot)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 Vt?$t(e,t)&&(v="onCompositionEnd"):"keydown"===e&&229===t.keyCode&&(v="onCompositionStart");v&&(Dt&&"ko"!==t.locale&&(Vt||"onCompositionStart"!==v?"onCompositionEnd"===v&&Vt&&(b=nt()):(Jn="value"in(Zn=o)?Zn.value:Zn.textContent,Vt=!0)),0<(y=Gr(r,v)).length&&(v=new St(v,e,null,t,o),i.push({event:v,listeners:y}),b?v.data=b:null!==(b=Ut(t))&&(v.data=b))),(b=jt?function(e,n){switch(e){case"compositionend":return Ut(n);case"keypress":return 32!==n.which?null:(Bt=!0,Mt);case"textInput":return(e=n.data)===Mt&&Bt?null:e;default:return null}}(e,t):function(e,n){if(Vt)return"compositionend"===e||!Ot&&$t(e,n)?(e=nt(),et=Jn=Zn=null,Vt=!1,e):null;switch(e){case"paste":default:return null;case"keypress":if(!(n.ctrlKey||n.altKey||n.metaKey)||n.ctrlKey&&n.altKey){if(n.char&&1<n.char.length)return n.char;if(n.which)return String.fromCharCode(n.which)}return null;case"compositionend":return Dt&&"ko"!==n.locale?null:n.data}}(e,t))&&(0<(r=Gr(r,"onBeforeInput")).length&&(o=new St("onBeforeInput","beforeinput",null,t,o),i.push({event:o,listeners:r}),o.data=b))}Mr(i,n)}))}function Wr(e,n,t){return{instance:e,listener:n,currentTarget:t}}function Gr(e,n){for(var t=n+"Capture",r=[];null!==e;){var o=e,a=o.stateNode;5===o.tag&&null!==a&&(o=a,null!=(a=Re(e,t))&&r.unshift(Wr(e,a,o)),null!=(a=Re(e,n))&&r.push(Wr(e,a,o))),e=e.return}return r}function qr(e){if(null===e)return null;do{e=e.return}while(e&&5!==e.tag);return e||null}function Yr(e,n,t,r,o){for(var a=n._reactName,i=[];null!==t&&t!==r;){var s=t,l=s.alternate,c=s.stateNode;if(null!==l&&l===r)break;5===s.tag&&null!==c&&(s=c,o?null!=(l=Re(t,a))&&i.unshift(Wr(t,l,s)):o||null!=(l=Re(t,a))&&i.push(Wr(t,l,s))),t=t.return}0!==i.length&&e.push({event:n,listeners:i})}var Kr=/\r\n?/g,Xr=/\u0000|\uFFFD/g;function Qr(e){return("string"==typeof e?e:""+e).replace(Kr,"\n").replace(Xr,"")}function Zr(e,n,t){if(n=Qr(n),Qr(e)!==n&&t)throw Error(a(425))}function Jr(){}var eo=null,no=null;function to(e,n){return"textarea"===e||"noscript"===e||"string"==typeof n.children||"number"==typeof n.children||"object"==typeof n.dangerouslySetInnerHTML&&null!==n.dangerouslySetInnerHTML&&null!=n.dangerouslySetInnerHTML.__html}var ro="function"==typeof setTimeout?setTimeout:void 0,oo="function"==typeof clearTimeout?clearTimeout:void 0,ao="function"==typeof Promise?Promise:void 0,io="function"==typeof queueMicrotask?queueMicrotask:void 0!==ao?function(e){return ao.resolve(null).then(e).catch(so)}:ro;function so(e){setTimeout((function(){throw e}))}function lo(e,n){var t=n,r=0;do{var o=t.nextSibling;if(e.removeChild(t),o&&8===o.nodeType)if("/$"===(t=o.data)){if(0===r)return e.removeChild(o),void zn(n);r--}else"$"!==t&&"$?"!==t&&"$!"!==t||r++;t=o}while(t);zn(n)}function co(e){for(;null!=e;e=e.nextSibling){var n=e.nodeType;if(1===n||3===n)break;if(8===n){if("$"===(n=e.data)||"$!"===n||"$?"===n)break;if("/$"===n)return null}}return e}function uo(e){e=e.previousSibling;for(var n=0;e;){if(8===e.nodeType){var t=e.data;if("$"===t||"$!"===t||"$?"===t){if(0===n)return e;n--}else"/$"===t&&n++}e=e.previousSibling}return null}var po=Math.random().toString(36).slice(2),fo="__reactFiber$"+po,mo="__reactProps$"+po,go="__reactContainer$"+po,ho="__reactEvents$"+po,yo="__reactListeners$"+po,bo="__reactHandles$"+po;function vo(e){var n=e[fo];if(n)return n;for(var t=e.parentNode;t;){if(n=t[go]||t[fo]){if(t=n.alternate,null!==n.child||null!==t&&null!==t.child)for(e=uo(e);null!==e;){if(t=e[fo])return t;e=uo(e)}return n}t=(e=t).parentNode}return null}function So(e){return!(e=e[fo]||e[go])||5!==e.tag&&6!==e.tag&&13!==e.tag&&3!==e.tag?null:e}function wo(e){if(5===e.tag||6===e.tag)return e.stateNode;throw Error(a(33))}function xo(e){return e[mo]||null}var ko=[],To=-1;function Eo(e){return{current:e}}function Co(e){0>To||(e.current=ko[To],ko[To]=null,To--)}function _o(e,n){To++,ko[To]=e.current,e.current=n}var Ao={},Io=Eo(Ao),Po=Eo(!1),Lo=Ao;function Ro(e,n){var t=e.type.contextTypes;if(!t)return Ao;var r=e.stateNode;if(r&&r.__reactInternalMemoizedUnmaskedChildContext===n)return r.__reactInternalMemoizedMaskedChildContext;var o,a={};for(o in t)a[o]=n[o];return r&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=n,e.__reactInternalMemoizedMaskedChildContext=a),a}function No(e){return null!=(e=e.childContextTypes)}function Oo(){Co(Po),Co(Io)}function Fo(e,n,t){if(Io.current!==Ao)throw Error(a(168));_o(Io,n),_o(Po,t)}function jo(e,n,t){var r=e.stateNode;if(n=n.childContextTypes,"function"!=typeof r.getChildContext)return t;for(var o in r=r.getChildContext())if(!(o in n))throw Error(a(108,z(e)||"Unknown",o));return D({},t,r)}function Do(e){return e=(e=e.stateNode)&&e.__reactInternalMemoizedMergedChildContext||Ao,Lo=Io.current,_o(Io,e),_o(Po,Po.current),!0}function Mo(e,n,t){var r=e.stateNode;if(!r)throw Error(a(169));t?(e=jo(e,n,Lo),r.__reactInternalMemoizedMergedChildContext=e,Co(Po),Co(Io),_o(Io,e)):Co(Po),_o(Po,t)}var Bo=null,$o=!1,Uo=!1;function Vo(e){null===Bo?Bo=[e]:Bo.push(e)}function zo(){if(!Uo&&null!==Bo){Uo=!0;var e=0,n=Sn;try{var t=Bo;for(Sn=1;e<t.length;e++){var r=t[e];do{r=r(!0)}while(null!==r)}Bo=null,$o=!1}catch(o){throw null!==Bo&&(Bo=Bo.slice(e+1)),qe(Je,zo),o}finally{Sn=n,Uo=!1}}return null}var Ho=[],Wo=0,Go=null,qo=0,Yo=[],Ko=0,Xo=null,Qo=1,Zo="";function Jo(e,n){Ho[Wo++]=qo,Ho[Wo++]=Go,Go=e,qo=n}function ea(e,n,t){Yo[Ko++]=Qo,Yo[Ko++]=Zo,Yo[Ko++]=Xo,Xo=e;var r=Qo;e=Zo;var o=32-sn(r)-1;r&=~(1<<o),t+=1;var a=32-sn(n)+o;if(30<a){var i=o-o%5;a=(r&(1<<i)-1).toString(32),r>>=i,o-=i,Qo=1<<32-sn(n)+o|t<<o|r,Zo=a+e}else Qo=1<<a|t<<o|r,Zo=e}function na(e){null!==e.return&&(Jo(e,1),ea(e,1,0))}function ta(e){for(;e===Go;)Go=Ho[--Wo],Ho[Wo]=null,qo=Ho[--Wo],Ho[Wo]=null;for(;e===Xo;)Xo=Yo[--Ko],Yo[Ko]=null,Zo=Yo[--Ko],Yo[Ko]=null,Qo=Yo[--Ko],Yo[Ko]=null}var ra=null,oa=null,aa=!1,ia=null;function sa(e,n){var t=Rc(5,null,null,0);t.elementType="DELETED",t.stateNode=n,t.return=e,null===(n=e.deletions)?(e.deletions=[t],e.flags|=16):n.push(t)}function la(e,n){switch(e.tag){case 5:var t=e.type;return null!==(n=1!==n.nodeType||t.toLowerCase()!==n.nodeName.toLowerCase()?null:n)&&(e.stateNode=n,ra=e,oa=co(n.firstChild),!0);case 6:return null!==(n=""===e.pendingProps||3!==n.nodeType?null:n)&&(e.stateNode=n,ra=e,oa=null,!0);case 13:return null!==(n=8!==n.nodeType?null:n)&&(t=null!==Xo?{id:Qo,overflow:Zo}:null,e.memoizedState={dehydrated:n,treeContext:t,retryLane:1073741824},(t=Rc(18,null,null,0)).stateNode=n,t.return=e,e.child=t,ra=e,oa=null,!0);default:return!1}}function ca(e){return 0!=(1&e.mode)&&0==(128&e.flags)}function ua(e){if(aa){var n=oa;if(n){var t=n;if(!la(e,n)){if(ca(e))throw Error(a(418));n=co(t.nextSibling);var r=ra;n&&la(e,n)?sa(r,t):(e.flags=-4097&e.flags|2,aa=!1,ra=e)}}else{if(ca(e))throw Error(a(418));e.flags=-4097&e.flags|2,aa=!1,ra=e}}}function da(e){for(e=e.return;null!==e&&5!==e.tag&&3!==e.tag&&13!==e.tag;)e=e.return;ra=e}function pa(e){if(e!==ra)return!1;if(!aa)return da(e),aa=!0,!1;var n;if((n=3!==e.tag)&&!(n=5!==e.tag)&&(n="head"!==(n=e.type)&&"body"!==n&&!to(e.type,e.memoizedProps)),n&&(n=oa)){if(ca(e))throw fa(),Error(a(418));for(;n;)sa(e,n),n=co(n.nextSibling)}if(da(e),13===e.tag){if(!(e=null!==(e=e.memoizedState)?e.dehydrated:null))throw Error(a(317));e:{for(e=e.nextSibling,n=0;e;){if(8===e.nodeType){var t=e.data;if("/$"===t){if(0===n){oa=co(e.nextSibling);break e}n--}else"$"!==t&&"$!"!==t&&"$?"!==t||n++}e=e.nextSibling}oa=null}}else oa=ra?co(e.stateNode.nextSibling):null;return!0}function fa(){for(var e=oa;e;)e=co(e.nextSibling)}function ma(){oa=ra=null,aa=!1}function ga(e){null===ia?ia=[e]:ia.push(e)}var ha=S.ReactCurrentBatchConfig;function ya(e,n){if(e&&e.defaultProps){for(var t in n=D({},n),e=e.defaultProps)void 0===n[t]&&(n[t]=e[t]);return n}return n}var ba=Eo(null),va=null,Sa=null,wa=null;function xa(){wa=Sa=va=null}function ka(e){var n=ba.current;Co(ba),e._currentValue=n}function Ta(e,n,t){for(;null!==e;){var r=e.alternate;if((e.childLanes&n)!==n?(e.childLanes|=n,null!==r&&(r.childLanes|=n)):null!==r&&(r.childLanes&n)!==n&&(r.childLanes|=n),e===t)break;e=e.return}}function Ea(e,n){va=e,wa=Sa=null,null!==(e=e.dependencies)&&null!==e.firstContext&&(0!=(e.lanes&n)&&(Ss=!0),e.firstContext=null)}function Ca(e){var n=e._currentValue;if(wa!==e)if(e={context:e,memoizedValue:n,next:null},null===Sa){if(null===va)throw Error(a(308));Sa=e,va.dependencies={lanes:0,firstContext:e}}else Sa=Sa.next=e;return n}var _a=null;function Aa(e){null===_a?_a=[e]:_a.push(e)}function Ia(e,n,t,r){var o=n.interleaved;return null===o?(t.next=t,Aa(n)):(t.next=o.next,o.next=t),n.interleaved=t,Pa(e,r)}function Pa(e,n){e.lanes|=n;var t=e.alternate;for(null!==t&&(t.lanes|=n),t=e,e=e.return;null!==e;)e.childLanes|=n,null!==(t=e.alternate)&&(t.childLanes|=n),t=e,e=e.return;return 3===t.tag?t.stateNode:null}var La=!1;function Ra(e){e.updateQueue={baseState:e.memoizedState,firstBaseUpdate:null,lastBaseUpdate:null,shared:{pending:null,interleaved:null,lanes:0},effects:null}}function Na(e,n){e=e.updateQueue,n.updateQueue===e&&(n.updateQueue={baseState:e.baseState,firstBaseUpdate:e.firstBaseUpdate,lastBaseUpdate:e.lastBaseUpdate,shared:e.shared,effects:e.effects})}function Oa(e,n){return{eventTime:e,lane:n,tag:0,payload:null,callback:null,next:null}}function Fa(e,n,t){var r=e.updateQueue;if(null===r)return null;if(r=r.shared,0!=(2&Il)){var o=r.pending;return null===o?n.next=n:(n.next=o.next,o.next=n),r.pending=n,Pa(e,t)}return null===(o=r.interleaved)?(n.next=n,Aa(r)):(n.next=o.next,o.next=n),r.interleaved=n,Pa(e,t)}function ja(e,n,t){if(null!==(n=n.updateQueue)&&(n=n.shared,0!=(4194240&t))){var r=n.lanes;t|=r&=e.pendingLanes,n.lanes=t,vn(e,t)}}function Da(e,n){var t=e.updateQueue,r=e.alternate;if(null!==r&&t===(r=r.updateQueue)){var o=null,a=null;if(null!==(t=t.firstBaseUpdate)){do{var i={eventTime:t.eventTime,lane:t.lane,tag:t.tag,payload:t.payload,callback:t.callback,next:null};null===a?o=a=i:a=a.next=i,t=t.next}while(null!==t);null===a?o=a=n:a=a.next=n}else o=a=n;return t={baseState:r.baseState,firstBaseUpdate:o,lastBaseUpdate:a,shared:r.shared,effects:r.effects},void(e.updateQueue=t)}null===(e=t.lastBaseUpdate)?t.firstBaseUpdate=n:e.next=n,t.lastBaseUpdate=n}function Ma(e,n,t,r){var o=e.updateQueue;La=!1;var a=o.firstBaseUpdate,i=o.lastBaseUpdate,s=o.shared.pending;if(null!==s){o.shared.pending=null;var l=s,c=l.next;l.next=null,null===i?a=c:i.next=c,i=l;var u=e.alternate;null!==u&&((s=(u=u.updateQueue).lastBaseUpdate)!==i&&(null===s?u.firstBaseUpdate=c:s.next=c,u.lastBaseUpdate=l))}if(null!==a){var d=o.baseState;for(i=0,u=c=l=null,s=a;;){var p=s.lane,f=s.eventTime;if((r&p)===p){null!==u&&(u=u.next={eventTime:f,lane:0,tag:s.tag,payload:s.payload,callback:s.callback,next:null});e:{var m=e,g=s;switch(p=n,f=t,g.tag){case 1:if("function"==typeof(m=g.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=g.payload)?m.call(f,d,p):m))break e;d=D({},d,p);break e;case 2:La=!0}}null!==s.callback&&0!==s.lane&&(e.flags|=64,null===(p=o.effects)?o.effects=[s]:p.push(s))}else f={eventTime:f,lane:p,tag:s.tag,payload:s.payload,callback:s.callback,next:null},null===u?(c=u=f,l=d):u=u.next=f,i|=p;if(null===(s=s.next)){if(null===(s=o.shared.pending))break;s=(p=s).next,p.next=null,o.lastBaseUpdate=p,o.shared.pending=null}}if(null===u&&(l=d),o.baseState=l,o.firstBaseUpdate=c,o.lastBaseUpdate=u,null!==(n=o.shared.interleaved)){o=n;do{i|=o.lane,o=o.next}while(o!==n)}else null===a&&(o.shared.lanes=0);Dl|=i,e.lanes=i,e.memoizedState=d}}function Ba(e,n,t){if(e=n.effects,n.effects=null,null!==e)for(n=0;n<e.length;n++){var r=e[n],o=r.callback;if(null!==o){if(r.callback=null,r=t,"function"!=typeof o)throw Error(a(191,o));o.call(r)}}}var $a=(new r.Component).refs;function Ua(e,n,t,r){t=null==(t=t(r,n=e.memoizedState))?n:D({},n,t),e.memoizedState=t,0===e.lanes&&(e.updateQueue.baseState=t)}var Va={isMounted:function(e){return!!(e=e._reactInternals)&&Ve(e)===e},enqueueSetState:function(e,n,t){e=e._reactInternals;var r=nc(),o=tc(e),a=Oa(r,o);a.payload=n,null!=t&&(a.callback=t),null!==(n=Fa(e,a,o))&&(rc(n,e,o,r),ja(n,e,o))},enqueueReplaceState:function(e,n,t){e=e._reactInternals;var r=nc(),o=tc(e),a=Oa(r,o);a.tag=1,a.payload=n,null!=t&&(a.callback=t),null!==(n=Fa(e,a,o))&&(rc(n,e,o,r),ja(n,e,o))},enqueueForceUpdate:function(e,n){e=e._reactInternals;var t=nc(),r=tc(e),o=Oa(t,r);o.tag=2,null!=n&&(o.callback=n),null!==(n=Fa(e,o,r))&&(rc(n,e,r,t),ja(n,e,r))}};function za(e,n,t,r,o,a,i){return"function"==typeof(e=e.stateNode).shouldComponentUpdate?e.shouldComponentUpdate(r,a,i):!n.prototype||!n.prototype.isPureReactComponent||(!lr(t,r)||!lr(o,a))}function Ha(e,n,t){var r=!1,o=Ao,a=n.contextType;return"object"==typeof a&&null!==a?a=Ca(a):(o=No(n)?Lo:Io.current,a=(r=null!=(r=n.contextTypes))?Ro(e,o):Ao),n=new n(t,a),e.memoizedState=null!==n.state&&void 0!==n.state?n.state:null,n.updater=Va,e.stateNode=n,n._reactInternals=e,r&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=o,e.__reactInternalMemoizedMaskedChildContext=a),n}function Wa(e,n,t,r){e=n.state,"function"==typeof n.componentWillReceiveProps&&n.componentWillReceiveProps(t,r),"function"==typeof n.UNSAFE_componentWillReceiveProps&&n.UNSAFE_componentWillReceiveProps(t,r),n.state!==e&&Va.enqueueReplaceState(n,n.state,null)}function Ga(e,n,t,r){var o=e.stateNode;o.props=t,o.state=e.memoizedState,o.refs=$a,Ra(e);var a=n.contextType;"object"==typeof a&&null!==a?o.context=Ca(a):(a=No(n)?Lo:Io.current,o.context=Ro(e,a)),o.state=e.memoizedState,"function"==typeof(a=n.getDerivedStateFromProps)&&(Ua(e,n,a,t),o.state=e.memoizedState),"function"==typeof n.getDerivedStateFromProps||"function"==typeof o.getSnapshotBeforeUpdate||"function"!=typeof o.UNSAFE_componentWillMount&&"function"!=typeof o.componentWillMount||(n=o.state,"function"==typeof o.componentWillMount&&o.componentWillMount(),"function"==typeof o.UNSAFE_componentWillMount&&o.UNSAFE_componentWillMount(),n!==o.state&&Va.enqueueReplaceState(o,o.state,null),Ma(e,t,o,r),o.state=e.memoizedState),"function"==typeof o.componentDidMount&&(e.flags|=4194308)}function qa(e,n,t){if(null!==(e=t.ref)&&"function"!=typeof e&&"object"!=typeof e){if(t._owner){if(t=t._owner){if(1!==t.tag)throw Error(a(309));var r=t.stateNode}if(!r)throw Error(a(147,e));var o=r,i=""+e;return null!==n&&null!==n.ref&&"function"==typeof n.ref&&n.ref._stringRef===i?n.ref:(n=function(e){var n=o.refs;n===$a&&(n=o.refs={}),null===e?delete n[i]:n[i]=e},n._stringRef=i,n)}if("string"!=typeof e)throw Error(a(284));if(!t._owner)throw Error(a(290,e))}return e}function Ya(e,n){throw e=Object.prototype.toString.call(n),Error(a(31,"[object Object]"===e?"object with keys {"+Object.keys(n).join(", ")+"}":e))}function Ka(e){return(0,e._init)(e._payload)}function Xa(e){function n(n,t){if(e){var r=n.deletions;null===r?(n.deletions=[t],n.flags|=16):r.push(t)}}function t(t,r){if(!e)return null;for(;null!==r;)n(t,r),r=r.sibling;return null}function r(e,n){for(e=new Map;null!==n;)null!==n.key?e.set(n.key,n):e.set(n.index,n),n=n.sibling;return e}function o(e,n){return(e=Oc(e,n)).index=0,e.sibling=null,e}function i(n,t,r){return n.index=r,e?null!==(r=n.alternate)?(r=r.index)<t?(n.flags|=2,t):r:(n.flags|=2,t):(n.flags|=1048576,t)}function s(n){return e&&null===n.alternate&&(n.flags|=2),n}function l(e,n,t,r){return null===n||6!==n.tag?((n=Mc(t,e.mode,r)).return=e,n):((n=o(n,t)).return=e,n)}function c(e,n,t,r){var a=t.type;return a===k?d(e,n,t.props.children,r,t.key):null!==n&&(n.elementType===a||"object"==typeof a&&null!==a&&a.$$typeof===R&&Ka(a)===n.type)?((r=o(n,t.props)).ref=qa(e,n,t),r.return=e,r):((r=Fc(t.type,t.key,t.props,null,e.mode,r)).ref=qa(e,n,t),r.return=e,r)}function u(e,n,t,r){return null===n||4!==n.tag||n.stateNode.containerInfo!==t.containerInfo||n.stateNode.implementation!==t.implementation?((n=Bc(t,e.mode,r)).return=e,n):((n=o(n,t.children||[])).return=e,n)}function d(e,n,t,r,a){return null===n||7!==n.tag?((n=jc(t,e.mode,r,a)).return=e,n):((n=o(n,t)).return=e,n)}function p(e,n,t){if("string"==typeof n&&""!==n||"number"==typeof n)return(n=Mc(""+n,e.mode,t)).return=e,n;if("object"==typeof n&&null!==n){switch(n.$$typeof){case w:return(t=Fc(n.type,n.key,n.props,null,e.mode,t)).ref=qa(e,null,n),t.return=e,t;case x:return(n=Bc(n,e.mode,t)).return=e,n;case R:return p(e,(0,n._init)(n._payload),t)}if(ne(n)||F(n))return(n=jc(n,e.mode,t,null)).return=e,n;Ya(e,n)}return null}function f(e,n,t,r){var o=null!==n?n.key:null;if("string"==typeof t&&""!==t||"number"==typeof t)return null!==o?null:l(e,n,""+t,r);if("object"==typeof t&&null!==t){switch(t.$$typeof){case w:return t.key===o?c(e,n,t,r):null;case x:return t.key===o?u(e,n,t,r):null;case R:return f(e,n,(o=t._init)(t._payload),r)}if(ne(t)||F(t))return null!==o?null:d(e,n,t,r,null);Ya(e,t)}return null}function m(e,n,t,r,o){if("string"==typeof r&&""!==r||"number"==typeof r)return l(n,e=e.get(t)||null,""+r,o);if("object"==typeof r&&null!==r){switch(r.$$typeof){case w:return c(n,e=e.get(null===r.key?t:r.key)||null,r,o);case x:return u(n,e=e.get(null===r.key?t:r.key)||null,r,o);case R:return m(e,n,t,(0,r._init)(r._payload),o)}if(ne(r)||F(r))return d(n,e=e.get(t)||null,r,o,null);Ya(n,r)}return null}function g(o,a,s,l){for(var c=null,u=null,d=a,g=a=0,h=null;null!==d&&g<s.length;g++){d.index>g?(h=d,d=null):h=d.sibling;var y=f(o,d,s[g],l);if(null===y){null===d&&(d=h);break}e&&d&&null===y.alternate&&n(o,d),a=i(y,a,g),null===u?c=y:u.sibling=y,u=y,d=h}if(g===s.length)return t(o,d),aa&&Jo(o,g),c;if(null===d){for(;g<s.length;g++)null!==(d=p(o,s[g],l))&&(a=i(d,a,g),null===u?c=d:u.sibling=d,u=d);return aa&&Jo(o,g),c}for(d=r(o,d);g<s.length;g++)null!==(h=m(d,o,g,s[g],l))&&(e&&null!==h.alternate&&d.delete(null===h.key?g:h.key),a=i(h,a,g),null===u?c=h:u.sibling=h,u=h);return e&&d.forEach((function(e){return n(o,e)})),aa&&Jo(o,g),c}function h(o,s,l,c){var u=F(l);if("function"!=typeof u)throw Error(a(150));if(null==(l=u.call(l)))throw Error(a(151));for(var d=u=null,g=s,h=s=0,y=null,b=l.next();null!==g&&!b.done;h++,b=l.next()){g.index>h?(y=g,g=null):y=g.sibling;var v=f(o,g,b.value,c);if(null===v){null===g&&(g=y);break}e&&g&&null===v.alternate&&n(o,g),s=i(v,s,h),null===d?u=v:d.sibling=v,d=v,g=y}if(b.done)return t(o,g),aa&&Jo(o,h),u;if(null===g){for(;!b.done;h++,b=l.next())null!==(b=p(o,b.value,c))&&(s=i(b,s,h),null===d?u=b:d.sibling=b,d=b);return aa&&Jo(o,h),u}for(g=r(o,g);!b.done;h++,b=l.next())null!==(b=m(g,o,h,b.value,c))&&(e&&null!==b.alternate&&g.delete(null===b.key?h:b.key),s=i(b,s,h),null===d?u=b:d.sibling=b,d=b);return e&&g.forEach((function(e){return n(o,e)})),aa&&Jo(o,h),u}return function e(r,a,i,l){if("object"==typeof i&&null!==i&&i.type===k&&null===i.key&&(i=i.props.children),"object"==typeof i&&null!==i){switch(i.$$typeof){case w:e:{for(var c=i.key,u=a;null!==u;){if(u.key===c){if((c=i.type)===k){if(7===u.tag){t(r,u.sibling),(a=o(u,i.props.children)).return=r,r=a;break e}}else if(u.elementType===c||"object"==typeof c&&null!==c&&c.$$typeof===R&&Ka(c)===u.type){t(r,u.sibling),(a=o(u,i.props)).ref=qa(r,u,i),a.return=r,r=a;break e}t(r,u);break}n(r,u),u=u.sibling}i.type===k?((a=jc(i.props.children,r.mode,l,i.key)).return=r,r=a):((l=Fc(i.type,i.key,i.props,null,r.mode,l)).ref=qa(r,a,i),l.return=r,r=l)}return s(r);case x:e:{for(u=i.key;null!==a;){if(a.key===u){if(4===a.tag&&a.stateNode.containerInfo===i.containerInfo&&a.stateNode.implementation===i.implementation){t(r,a.sibling),(a=o(a,i.children||[])).return=r,r=a;break e}t(r,a);break}n(r,a),a=a.sibling}(a=Bc(i,r.mode,l)).return=r,r=a}return s(r);case R:return e(r,a,(u=i._init)(i._payload),l)}if(ne(i))return g(r,a,i,l);if(F(i))return h(r,a,i,l);Ya(r,i)}return"string"==typeof i&&""!==i||"number"==typeof i?(i=""+i,null!==a&&6===a.tag?(t(r,a.sibling),(a=o(a,i)).return=r,r=a):(t(r,a),(a=Mc(i,r.mode,l)).return=r,r=a),s(r)):t(r,a)}}var Qa=Xa(!0),Za=Xa(!1),Ja={},ei=Eo(Ja),ni=Eo(Ja),ti=Eo(Ja);function ri(e){if(e===Ja)throw Error(a(174));return e}function oi(e,n){switch(_o(ti,n),_o(ni,e),_o(ei,Ja),e=n.nodeType){case 9:case 11:n=(n=n.documentElement)?n.namespaceURI:le(null,"");break;default:n=le(n=(e=8===e?n.parentNode:n).namespaceURI||null,e=e.tagName)}Co(ei),_o(ei,n)}function ai(){Co(ei),Co(ni),Co(ti)}function ii(e){ri(ti.current);var n=ri(ei.current),t=le(n,e.type);n!==t&&(_o(ni,e),_o(ei,t))}function si(e){ni.current===e&&(Co(ei),Co(ni))}var li=Eo(0);function ci(e){for(var n=e;null!==n;){if(13===n.tag){var t=n.memoizedState;if(null!==t&&(null===(t=t.dehydrated)||"$?"===t.data||"$!"===t.data))return n}else if(19===n.tag&&void 0!==n.memoizedProps.revealOrder){if(0!=(128&n.flags))return n}else if(null!==n.child){n.child.return=n,n=n.child;continue}if(n===e)break;for(;null===n.sibling;){if(null===n.return||n.return===e)return null;n=n.return}n.sibling.return=n.return,n=n.sibling}return null}var ui=[];function di(){for(var e=0;e<ui.length;e++)ui[e]._workInProgressVersionPrimary=null;ui.length=0}var pi=S.ReactCurrentDispatcher,fi=S.ReactCurrentBatchConfig,mi=0,gi=null,hi=null,yi=null,bi=!1,vi=!1,Si=0,wi=0;function xi(){throw Error(a(321))}function ki(e,n){if(null===n)return!1;for(var t=0;t<n.length&&t<e.length;t++)if(!sr(e[t],n[t]))return!1;return!0}function Ti(e,n,t,r,o,i){if(mi=i,gi=n,n.memoizedState=null,n.updateQueue=null,n.lanes=0,pi.current=null===e||null===e.memoizedState?ss:ls,e=t(r,o),vi){i=0;do{if(vi=!1,Si=0,25<=i)throw Error(a(301));i+=1,yi=hi=null,n.updateQueue=null,pi.current=cs,e=t(r,o)}while(vi)}if(pi.current=is,n=null!==hi&&null!==hi.next,mi=0,yi=hi=gi=null,bi=!1,n)throw Error(a(300));return e}function Ei(){var e=0!==Si;return Si=0,e}function Ci(){var e={memoizedState:null,baseState:null,baseQueue:null,queue:null,next:null};return null===yi?gi.memoizedState=yi=e:yi=yi.next=e,yi}function _i(){if(null===hi){var e=gi.alternate;e=null!==e?e.memoizedState:null}else e=hi.next;var n=null===yi?gi.memoizedState:yi.next;if(null!==n)yi=n,hi=e;else{if(null===e)throw Error(a(310));e={memoizedState:(hi=e).memoizedState,baseState:hi.baseState,baseQueue:hi.baseQueue,queue:hi.queue,next:null},null===yi?gi.memoizedState=yi=e:yi=yi.next=e}return yi}function Ai(e,n){return"function"==typeof n?n(e):n}function Ii(e){var n=_i(),t=n.queue;if(null===t)throw Error(a(311));t.lastRenderedReducer=e;var r=hi,o=r.baseQueue,i=t.pending;if(null!==i){if(null!==o){var s=o.next;o.next=i.next,i.next=s}r.baseQueue=o=i,t.pending=null}if(null!==o){i=o.next,r=r.baseState;var l=s=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?(l=c=p,s=r):c=c.next=p,gi.lanes|=d,Dl|=d}u=u.next}while(null!==u&&u!==i);null===c?s=r:c.next=l,sr(r,n.memoizedState)||(Ss=!0),n.memoizedState=r,n.baseState=s,n.baseQueue=c,t.lastRenderedState=r}if(null!==(e=t.interleaved)){o=e;do{i=o.lane,gi.lanes|=i,Dl|=i,o=o.next}while(o!==e)}else null===o&&(t.lanes=0);return[n.memoizedState,t.dispatch]}function Pi(e){var n=_i(),t=n.queue;if(null===t)throw Error(a(311));t.lastRenderedReducer=e;var r=t.dispatch,o=t.pending,i=n.memoizedState;if(null!==o){t.pending=null;var s=o=o.next;do{i=e(i,s.action),s=s.next}while(s!==o);sr(i,n.memoizedState)||(Ss=!0),n.memoizedState=i,null===n.baseQueue&&(n.baseState=i),t.lastRenderedState=i}return[i,r]}function Li(){}function Ri(e,n){var t=gi,r=_i(),o=n(),i=!sr(r.memoizedState,o);if(i&&(r.memoizedState=o,Ss=!0),r=r.queue,Hi(Fi.bind(null,t,r,e),[e]),r.getSnapshot!==n||i||null!==yi&&1&yi.memoizedState.tag){if(t.flags|=2048,Bi(9,Oi.bind(null,t,r,o,n),void 0,null),null===Pl)throw Error(a(349));0!=(30&mi)||Ni(t,n,o)}return o}function Ni(e,n,t){e.flags|=16384,e={getSnapshot:n,value:t},null===(n=gi.updateQueue)?(n={lastEffect:null,stores:null},gi.updateQueue=n,n.stores=[e]):null===(t=n.stores)?n.stores=[e]:t.push(e)}function Oi(e,n,t,r){n.value=t,n.getSnapshot=r,ji(n)&&Di(e)}function Fi(e,n,t){return t((function(){ji(n)&&Di(e)}))}function ji(e){var n=e.getSnapshot;e=e.value;try{var t=n();return!sr(e,t)}catch(r){return!0}}function Di(e){var n=Pa(e,1);null!==n&&rc(n,e,1,-1)}function Mi(e){var n=Ci();return"function"==typeof e&&(e=e()),n.memoizedState=n.baseState=e,e={pending:null,interleaved:null,lanes:0,dispatch:null,lastRenderedReducer:Ai,lastRenderedState:e},n.queue=e,e=e.dispatch=ts.bind(null,gi,e),[n.memoizedState,e]}function Bi(e,n,t,r){return e={tag:e,create:n,destroy:t,deps:r,next:null},null===(n=gi.updateQueue)?(n={lastEffect:null,stores:null},gi.updateQueue=n,n.lastEffect=e.next=e):null===(t=n.lastEffect)?n.lastEffect=e.next=e:(r=t.next,t.next=e,e.next=r,n.lastEffect=e),e}function $i(){return _i().memoizedState}function Ui(e,n,t,r){var o=Ci();gi.flags|=e,o.memoizedState=Bi(1|n,t,void 0,void 0===r?null:r)}function Vi(e,n,t,r){var o=_i();r=void 0===r?null:r;var a=void 0;if(null!==hi){var i=hi.memoizedState;if(a=i.destroy,null!==r&&ki(r,i.deps))return void(o.memoizedState=Bi(n,t,a,r))}gi.flags|=e,o.memoizedState=Bi(1|n,t,a,r)}function zi(e,n){return Ui(8390656,8,e,n)}function Hi(e,n){return Vi(2048,8,e,n)}function Wi(e,n){return Vi(4,2,e,n)}function Gi(e,n){return Vi(4,4,e,n)}function qi(e,n){return"function"==typeof n?(e=e(),n(e),function(){n(null)}):null!=n?(e=e(),n.current=e,function(){n.current=null}):void 0}function Yi(e,n,t){return t=null!=t?t.concat([e]):null,Vi(4,4,qi.bind(null,n,e),t)}function Ki(){}function Xi(e,n){var t=_i();n=void 0===n?null:n;var r=t.memoizedState;return null!==r&&null!==n&&ki(n,r[1])?r[0]:(t.memoizedState=[e,n],e)}function Qi(e,n){var t=_i();n=void 0===n?null:n;var r=t.memoizedState;return null!==r&&null!==n&&ki(n,r[1])?r[0]:(e=e(),t.memoizedState=[e,n],e)}function Zi(e,n,t){return 0==(21&mi)?(e.baseState&&(e.baseState=!1,Ss=!0),e.memoizedState=t):(sr(t,n)||(t=hn(),gi.lanes|=t,Dl|=t,e.baseState=!0),n)}function Ji(e,n){var t=Sn;Sn=0!==t&&4>t?t:4,e(!0);var r=fi.transition;fi.transition={};try{e(!1),n()}finally{Sn=t,fi.transition=r}}function es(){return _i().memoizedState}function ns(e,n,t){var r=tc(e);if(t={lane:r,action:t,hasEagerState:!1,eagerState:null,next:null},rs(e))os(n,t);else if(null!==(t=Ia(e,n,t,r))){rc(t,e,r,nc()),as(t,n,r)}}function ts(e,n,t){var r=tc(e),o={lane:r,action:t,hasEagerState:!1,eagerState:null,next:null};if(rs(e))os(n,o);else{var a=e.alternate;if(0===e.lanes&&(null===a||0===a.lanes)&&null!==(a=n.lastRenderedReducer))try{var i=n.lastRenderedState,s=a(i,t);if(o.hasEagerState=!0,o.eagerState=s,sr(s,i)){var l=n.interleaved;return null===l?(o.next=o,Aa(n)):(o.next=l.next,l.next=o),void(n.interleaved=o)}}catch(c){}null!==(t=Ia(e,n,o,r))&&(rc(t,e,r,o=nc()),as(t,n,r))}}function rs(e){var n=e.alternate;return e===gi||null!==n&&n===gi}function os(e,n){vi=bi=!0;var t=e.pending;null===t?n.next=n:(n.next=t.next,t.next=n),e.pending=n}function as(e,n,t){if(0!=(4194240&t)){var r=n.lanes;t|=r&=e.pendingLanes,n.lanes=t,vn(e,t)}}var is={readContext:Ca,useCallback:xi,useContext:xi,useEffect:xi,useImperativeHandle:xi,useInsertionEffect:xi,useLayoutEffect:xi,useMemo:xi,useReducer:xi,useRef:xi,useState:xi,useDebugValue:xi,useDeferredValue:xi,useTransition:xi,useMutableSource:xi,useSyncExternalStore:xi,useId:xi,unstable_isNewReconciler:!1},ss={readContext:Ca,useCallback:function(e,n){return Ci().memoizedState=[e,void 0===n?null:n],e},useContext:Ca,useEffect:zi,useImperativeHandle:function(e,n,t){return t=null!=t?t.concat([e]):null,Ui(4194308,4,qi.bind(null,n,e),t)},useLayoutEffect:function(e,n){return Ui(4194308,4,e,n)},useInsertionEffect:function(e,n){return Ui(4,2,e,n)},useMemo:function(e,n){var t=Ci();return n=void 0===n?null:n,e=e(),t.memoizedState=[e,n],e},useReducer:function(e,n,t){var r=Ci();return n=void 0!==t?t(n):n,r.memoizedState=r.baseState=n,e={pending:null,interleaved:null,lanes:0,dispatch:null,lastRenderedReducer:e,lastRenderedState:n},r.queue=e,e=e.dispatch=ns.bind(null,gi,e),[r.memoizedState,e]},useRef:function(e){return e={current:e},Ci().memoizedState=e},useState:Mi,useDebugValue:Ki,useDeferredValue:function(e){return Ci().memoizedState=e},useTransition:function(){var e=Mi(!1),n=e[0];return e=Ji.bind(null,e[1]),Ci().memoizedState=e,[n,e]},useMutableSource:function(){},useSyncExternalStore:function(e,n,t){var r=gi,o=Ci();if(aa){if(void 0===t)throw Error(a(407));t=t()}else{if(t=n(),null===Pl)throw Error(a(349));0!=(30&mi)||Ni(r,n,t)}o.memoizedState=t;var i={value:t,getSnapshot:n};return o.queue=i,zi(Fi.bind(null,r,i,e),[e]),r.flags|=2048,Bi(9,Oi.bind(null,r,i,t,n),void 0,null),t},useId:function(){var e=Ci(),n=Pl.identifierPrefix;if(aa){var t=Zo;n=":"+n+"R"+(t=(Qo&~(1<<32-sn(Qo)-1)).toString(32)+t),0<(t=Si++)&&(n+="H"+t.toString(32)),n+=":"}else n=":"+n+"r"+(t=wi++).toString(32)+":";return e.memoizedState=n},unstable_isNewReconciler:!1},ls={readContext:Ca,useCallback:Xi,useContext:Ca,useEffect:Hi,useImperativeHandle:Yi,useInsertionEffect:Wi,useLayoutEffect:Gi,useMemo:Qi,useReducer:Ii,useRef:$i,useState:function(){return Ii(Ai)},useDebugValue:Ki,useDeferredValue:function(e){return Zi(_i(),hi.memoizedState,e)},useTransition:function(){return[Ii(Ai)[0],_i().memoizedState]},useMutableSource:Li,useSyncExternalStore:Ri,useId:es,unstable_isNewReconciler:!1},cs={readContext:Ca,useCallback:Xi,useContext:Ca,useEffect:Hi,useImperativeHandle:Yi,useInsertionEffect:Wi,useLayoutEffect:Gi,useMemo:Qi,useReducer:Pi,useRef:$i,useState:function(){return Pi(Ai)},useDebugValue:Ki,useDeferredValue:function(e){var n=_i();return null===hi?n.memoizedState=e:Zi(n,hi.memoizedState,e)},useTransition:function(){return[Pi(Ai)[0],_i().memoizedState]},useMutableSource:Li,useSyncExternalStore:Ri,useId:es,unstable_isNewReconciler:!1};function us(e,n){try{var t="",r=n;do{t+=U(r),r=r.return}while(r);var o=t}catch(a){o="\nError generating stack: "+a.message+"\n"+a.stack}return{value:e,source:n,stack:o,digest:null}}function ds(e,n,t){return{value:e,source:null,stack:null!=t?t:null,digest:null!=n?n:null}}function ps(e,n){try{console.error(n.value)}catch(t){setTimeout((function(){throw t}))}}var fs="function"==typeof WeakMap?WeakMap:Map;function ms(e,n,t){(t=Oa(-1,t)).tag=3,t.payload={element:null};var r=n.value;return t.callback=function(){Wl||(Wl=!0,Gl=r),ps(0,n)},t}function gs(e,n,t){(t=Oa(-1,t)).tag=3;var r=e.type.getDerivedStateFromError;if("function"==typeof r){var o=n.value;t.payload=function(){return r(o)},t.callback=function(){ps(0,n)}}var a=e.stateNode;return null!==a&&"function"==typeof a.componentDidCatch&&(t.callback=function(){ps(0,n),"function"!=typeof r&&(null===ql?ql=new Set([this]):ql.add(this));var e=n.stack;this.componentDidCatch(n.value,{componentStack:null!==e?e:""})}),t}function hs(e,n,t){var r=e.pingCache;if(null===r){r=e.pingCache=new fs;var o=new Set;r.set(n,o)}else void 0===(o=r.get(n))&&(o=new Set,r.set(n,o));o.has(t)||(o.add(t),e=Cc.bind(null,e,n,t),n.then(e,e))}function ys(e){do{var n;if((n=13===e.tag)&&(n=null===(n=e.memoizedState)||null!==n.dehydrated),n)return e;e=e.return}while(null!==e);return null}function bs(e,n,t,r,o){return 0==(1&e.mode)?(e===n?e.flags|=65536:(e.flags|=128,t.flags|=131072,t.flags&=-52805,1===t.tag&&(null===t.alternate?t.tag=17:((n=Oa(-1,1)).tag=2,Fa(t,n,1))),t.lanes|=1),e):(e.flags|=65536,e.lanes=o,e)}var vs=S.ReactCurrentOwner,Ss=!1;function ws(e,n,t,r){n.child=null===e?Za(n,null,t,r):Qa(n,e.child,t,r)}function xs(e,n,t,r,o){t=t.render;var a=n.ref;return Ea(n,o),r=Ti(e,n,t,r,a,o),t=Ei(),null===e||Ss?(aa&&t&&na(n),n.flags|=1,ws(e,n,r,o),n.child):(n.updateQueue=e.updateQueue,n.flags&=-2053,e.lanes&=~o,Ws(e,n,o))}function ks(e,n,t,r,o){if(null===e){var a=t.type;return"function"!=typeof a||Nc(a)||void 0!==a.defaultProps||null!==t.compare||void 0!==t.defaultProps?((e=Fc(t.type,null,r,n,n.mode,o)).ref=n.ref,e.return=n,n.child=e):(n.tag=15,n.type=a,Ts(e,n,a,r,o))}if(a=e.child,0==(e.lanes&o)){var i=a.memoizedProps;if((t=null!==(t=t.compare)?t:lr)(i,r)&&e.ref===n.ref)return Ws(e,n,o)}return n.flags|=1,(e=Oc(a,r)).ref=n.ref,e.return=n,n.child=e}function Ts(e,n,t,r,o){if(null!==e){var a=e.memoizedProps;if(lr(a,r)&&e.ref===n.ref){if(Ss=!1,n.pendingProps=r=a,0==(e.lanes&o))return n.lanes=e.lanes,Ws(e,n,o);0!=(131072&e.flags)&&(Ss=!0)}}return _s(e,n,t,r,o)}function Es(e,n,t){var r=n.pendingProps,o=r.children,a=null!==e?e.memoizedState:null;if("hidden"===r.mode)if(0==(1&n.mode))n.memoizedState={baseLanes:0,cachePool:null,transitions:null},_o(Ol,Nl),Nl|=t;else{if(0==(1073741824&t))return e=null!==a?a.baseLanes|t:t,n.lanes=n.childLanes=1073741824,n.memoizedState={baseLanes:e,cachePool:null,transitions:null},n.updateQueue=null,_o(Ol,Nl),Nl|=e,null;n.memoizedState={baseLanes:0,cachePool:null,transitions:null},r=null!==a?a.baseLanes:t,_o(Ol,Nl),Nl|=r}else null!==a?(r=a.baseLanes|t,n.memoizedState=null):r=t,_o(Ol,Nl),Nl|=r;return ws(e,n,o,t),n.child}function Cs(e,n){var t=n.ref;(null===e&&null!==t||null!==e&&e.ref!==t)&&(n.flags|=512,n.flags|=2097152)}function _s(e,n,t,r,o){var a=No(t)?Lo:Io.current;return a=Ro(n,a),Ea(n,o),t=Ti(e,n,t,r,a,o),r=Ei(),null===e||Ss?(aa&&r&&na(n),n.flags|=1,ws(e,n,t,o),n.child):(n.updateQueue=e.updateQueue,n.flags&=-2053,e.lanes&=~o,Ws(e,n,o))}function As(e,n,t,r,o){if(No(t)){var a=!0;Do(n)}else a=!1;if(Ea(n,o),null===n.stateNode)Hs(e,n),Ha(n,t,r),Ga(n,t,r,o),r=!0;else if(null===e){var i=n.stateNode,s=n.memoizedProps;i.props=s;var l=i.context,c=t.contextType;"object"==typeof c&&null!==c?c=Ca(c):c=Ro(n,c=No(t)?Lo:Io.current);var u=t.getDerivedStateFromProps,d="function"==typeof u||"function"==typeof i.getSnapshotBeforeUpdate;d||"function"!=typeof i.UNSAFE_componentWillReceiveProps&&"function"!=typeof i.componentWillReceiveProps||(s!==r||l!==c)&&Wa(n,i,r,c),La=!1;var p=n.memoizedState;i.state=p,Ma(n,r,i,o),l=n.memoizedState,s!==r||p!==l||Po.current||La?("function"==typeof u&&(Ua(n,t,u,r),l=n.memoizedState),(s=La||za(n,t,s,r,p,l,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&&(n.flags|=4194308)):("function"==typeof i.componentDidMount&&(n.flags|=4194308),n.memoizedProps=r,n.memoizedState=l),i.props=r,i.state=l,i.context=c,r=s):("function"==typeof i.componentDidMount&&(n.flags|=4194308),r=!1)}else{i=n.stateNode,Na(e,n),s=n.memoizedProps,c=n.type===n.elementType?s:ya(n.type,s),i.props=c,d=n.pendingProps,p=i.context,"object"==typeof(l=t.contextType)&&null!==l?l=Ca(l):l=Ro(n,l=No(t)?Lo:Io.current);var f=t.getDerivedStateFromProps;(u="function"==typeof f||"function"==typeof i.getSnapshotBeforeUpdate)||"function"!=typeof i.UNSAFE_componentWillReceiveProps&&"function"!=typeof i.componentWillReceiveProps||(s!==d||p!==l)&&Wa(n,i,r,l),La=!1,p=n.memoizedState,i.state=p,Ma(n,r,i,o);var m=n.memoizedState;s!==d||p!==m||Po.current||La?("function"==typeof f&&(Ua(n,t,f,r),m=n.memoizedState),(c=La||za(n,t,c,r,p,m,l)||!1)?(u||"function"!=typeof i.UNSAFE_componentWillUpdate&&"function"!=typeof i.componentWillUpdate||("function"==typeof i.componentWillUpdate&&i.componentWillUpdate(r,m,l),"function"==typeof i.UNSAFE_componentWillUpdate&&i.UNSAFE_componentWillUpdate(r,m,l)),"function"==typeof i.componentDidUpdate&&(n.flags|=4),"function"==typeof i.getSnapshotBeforeUpdate&&(n.flags|=1024)):("function"!=typeof i.componentDidUpdate||s===e.memoizedProps&&p===e.memoizedState||(n.flags|=4),"function"!=typeof i.getSnapshotBeforeUpdate||s===e.memoizedProps&&p===e.memoizedState||(n.flags|=1024),n.memoizedProps=r,n.memoizedState=m),i.props=r,i.state=m,i.context=l,r=c):("function"!=typeof i.componentDidUpdate||s===e.memoizedProps&&p===e.memoizedState||(n.flags|=4),"function"!=typeof i.getSnapshotBeforeUpdate||s===e.memoizedProps&&p===e.memoizedState||(n.flags|=1024),r=!1)}return Is(e,n,t,r,a,o)}function Is(e,n,t,r,o,a){Cs(e,n);var i=0!=(128&n.flags);if(!r&&!i)return o&&Mo(n,t,!1),Ws(e,n,a);r=n.stateNode,vs.current=n;var s=i&&"function"!=typeof t.getDerivedStateFromError?null:r.render();return n.flags|=1,null!==e&&i?(n.child=Qa(n,e.child,null,a),n.child=Qa(n,null,s,a)):ws(e,n,s,a),n.memoizedState=r.state,o&&Mo(n,t,!0),n.child}function Ps(e){var n=e.stateNode;n.pendingContext?Fo(0,n.pendingContext,n.pendingContext!==n.context):n.context&&Fo(0,n.context,!1),oi(e,n.containerInfo)}function Ls(e,n,t,r,o){return ma(),ga(o),n.flags|=256,ws(e,n,t,r),n.child}var Rs,Ns,Os,Fs,js={dehydrated:null,treeContext:null,retryLane:0};function Ds(e){return{baseLanes:e,cachePool:null,transitions:null}}function Ms(e,n,t){var r,o=n.pendingProps,i=li.current,s=!1,l=0!=(128&n.flags);if((r=l)||(r=(null===e||null!==e.memoizedState)&&0!=(2&i)),r?(s=!0,n.flags&=-129):null!==e&&null===e.memoizedState||(i|=1),_o(li,1&i),null===e)return ua(n),null!==(e=n.memoizedState)&&null!==(e=e.dehydrated)?(0==(1&n.mode)?n.lanes=1:"$!"===e.data?n.lanes=8:n.lanes=1073741824,null):(l=o.children,e=o.fallback,s?(o=n.mode,s=n.child,l={mode:"hidden",children:l},0==(1&o)&&null!==s?(s.childLanes=0,s.pendingProps=l):s=Dc(l,o,0,null),e=jc(e,o,t,null),s.return=n,e.return=n,s.sibling=e,n.child=s,n.child.memoizedState=Ds(t),n.memoizedState=js,e):Bs(n,l));if(null!==(i=e.memoizedState)&&null!==(r=i.dehydrated))return function(e,n,t,r,o,i,s){if(t)return 256&n.flags?(n.flags&=-257,$s(e,n,s,r=ds(Error(a(422))))):null!==n.memoizedState?(n.child=e.child,n.flags|=128,null):(i=r.fallback,o=n.mode,r=Dc({mode:"visible",children:r.children},o,0,null),(i=jc(i,o,s,null)).flags|=2,r.return=n,i.return=n,r.sibling=i,n.child=r,0!=(1&n.mode)&&Qa(n,e.child,null,s),n.child.memoizedState=Ds(s),n.memoizedState=js,i);if(0==(1&n.mode))return $s(e,n,s,null);if("$!"===o.data){if(r=o.nextSibling&&o.nextSibling.dataset)var l=r.dgst;return r=l,$s(e,n,s,r=ds(i=Error(a(419)),r,void 0))}if(l=0!=(s&e.childLanes),Ss||l){if(null!==(r=Pl)){switch(s&-s){case 4:o=2;break;case 16:o=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:o=32;break;case 536870912:o=268435456;break;default:o=0}0!==(o=0!=(o&(r.suspendedLanes|s))?0:o)&&o!==i.retryLane&&(i.retryLane=o,Pa(e,o),rc(r,e,o,-1))}return hc(),$s(e,n,s,r=ds(Error(a(421))))}return"$?"===o.data?(n.flags|=128,n.child=e.child,n=Ac.bind(null,e),o._reactRetry=n,null):(e=i.treeContext,oa=co(o.nextSibling),ra=n,aa=!0,ia=null,null!==e&&(Yo[Ko++]=Qo,Yo[Ko++]=Zo,Yo[Ko++]=Xo,Qo=e.id,Zo=e.overflow,Xo=n),n=Bs(n,r.children),n.flags|=4096,n)}(e,n,l,o,r,i,t);if(s){s=o.fallback,l=n.mode,r=(i=e.child).sibling;var c={mode:"hidden",children:o.children};return 0==(1&l)&&n.child!==i?((o=n.child).childLanes=0,o.pendingProps=c,n.deletions=null):(o=Oc(i,c)).subtreeFlags=14680064&i.subtreeFlags,null!==r?s=Oc(r,s):(s=jc(s,l,t,null)).flags|=2,s.return=n,o.return=n,o.sibling=s,n.child=o,o=s,s=n.child,l=null===(l=e.child.memoizedState)?Ds(t):{baseLanes:l.baseLanes|t,cachePool:null,transitions:l.transitions},s.memoizedState=l,s.childLanes=e.childLanes&~t,n.memoizedState=js,o}return e=(s=e.child).sibling,o=Oc(s,{mode:"visible",children:o.children}),0==(1&n.mode)&&(o.lanes=t),o.return=n,o.sibling=null,null!==e&&(null===(t=n.deletions)?(n.deletions=[e],n.flags|=16):t.push(e)),n.child=o,n.memoizedState=null,o}function Bs(e,n){return(n=Dc({mode:"visible",children:n},e.mode,0,null)).return=e,e.child=n}function $s(e,n,t,r){return null!==r&&ga(r),Qa(n,e.child,null,t),(e=Bs(n,n.pendingProps.children)).flags|=2,n.memoizedState=null,e}function Us(e,n,t){e.lanes|=n;var r=e.alternate;null!==r&&(r.lanes|=n),Ta(e.return,n,t)}function Vs(e,n,t,r,o){var a=e.memoizedState;null===a?e.memoizedState={isBackwards:n,rendering:null,renderingStartTime:0,last:r,tail:t,tailMode:o}:(a.isBackwards=n,a.rendering=null,a.renderingStartTime=0,a.last=r,a.tail=t,a.tailMode=o)}function zs(e,n,t){var r=n.pendingProps,o=r.revealOrder,a=r.tail;if(ws(e,n,r.children,t),0!=(2&(r=li.current)))r=1&r|2,n.flags|=128;else{if(null!==e&&0!=(128&e.flags))e:for(e=n.child;null!==e;){if(13===e.tag)null!==e.memoizedState&&Us(e,t,n);else if(19===e.tag)Us(e,t,n);else if(null!==e.child){e.child.return=e,e=e.child;continue}if(e===n)break e;for(;null===e.sibling;){if(null===e.return||e.return===n)break e;e=e.return}e.sibling.return=e.return,e=e.sibling}r&=1}if(_o(li,r),0==(1&n.mode))n.memoizedState=null;else switch(o){case"forwards":for(t=n.child,o=null;null!==t;)null!==(e=t.alternate)&&null===ci(e)&&(o=t),t=t.sibling;null===(t=o)?(o=n.child,n.child=null):(o=t.sibling,t.sibling=null),Vs(n,!1,o,t,a);break;case"backwards":for(t=null,o=n.child,n.child=null;null!==o;){if(null!==(e=o.alternate)&&null===ci(e)){n.child=o;break}e=o.sibling,o.sibling=t,t=o,o=e}Vs(n,!0,t,null,a);break;case"together":Vs(n,!1,null,null,void 0);break;default:n.memoizedState=null}return n.child}function Hs(e,n){0==(1&n.mode)&&null!==e&&(e.alternate=null,n.alternate=null,n.flags|=2)}function Ws(e,n,t){if(null!==e&&(n.dependencies=e.dependencies),Dl|=n.lanes,0==(t&n.childLanes))return null;if(null!==e&&n.child!==e.child)throw Error(a(153));if(null!==n.child){for(t=Oc(e=n.child,e.pendingProps),n.child=t,t.return=n;null!==e.sibling;)e=e.sibling,(t=t.sibling=Oc(e,e.pendingProps)).return=n;t.sibling=null}return n.child}function Gs(e,n){if(!aa)switch(e.tailMode){case"hidden":n=e.tail;for(var t=null;null!==n;)null!==n.alternate&&(t=n),n=n.sibling;null===t?e.tail=null:t.sibling=null;break;case"collapsed":t=e.tail;for(var r=null;null!==t;)null!==t.alternate&&(r=t),t=t.sibling;null===r?n||null===e.tail?e.tail=null:e.tail.sibling=null:r.sibling=null}}function qs(e){var n=null!==e.alternate&&e.alternate.child===e.child,t=0,r=0;if(n)for(var o=e.child;null!==o;)t|=o.lanes|o.childLanes,r|=14680064&o.subtreeFlags,r|=14680064&o.flags,o.return=e,o=o.sibling;else for(o=e.child;null!==o;)t|=o.lanes|o.childLanes,r|=o.subtreeFlags,r|=o.flags,o.return=e,o=o.sibling;return e.subtreeFlags|=r,e.childLanes=t,n}function Ys(e,n,t){var r=n.pendingProps;switch(ta(n),n.tag){case 2:case 16:case 15:case 0:case 11:case 7:case 8:case 12:case 9:case 14:return qs(n),null;case 1:case 17:return No(n.type)&&Oo(),qs(n),null;case 3:return r=n.stateNode,ai(),Co(Po),Co(Io),di(),r.pendingContext&&(r.context=r.pendingContext,r.pendingContext=null),null!==e&&null!==e.child||(pa(n)?n.flags|=4:null===e||e.memoizedState.isDehydrated&&0==(256&n.flags)||(n.flags|=1024,null!==ia&&(sc(ia),ia=null))),Ns(e,n),qs(n),null;case 5:si(n);var o=ri(ti.current);if(t=n.type,null!==e&&null!=n.stateNode)Os(e,n,t,r,o),e.ref!==n.ref&&(n.flags|=512,n.flags|=2097152);else{if(!r){if(null===n.stateNode)throw Error(a(166));return qs(n),null}if(e=ri(ei.current),pa(n)){r=n.stateNode,t=n.type;var i=n.memoizedProps;switch(r[fo]=n,r[mo]=i,e=0!=(1&n.mode),t){case"dialog":Br("cancel",r),Br("close",r);break;case"iframe":case"object":case"embed":Br("load",r);break;case"video":case"audio":for(o=0;o<Fr.length;o++)Br(Fr[o],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":X(r,i),Br("invalid",r);break;case"select":r._wrapperState={wasMultiple:!!i.multiple},Br("invalid",r);break;case"textarea":oe(r,i),Br("invalid",r)}for(var l in be(t,i),o=null,i)if(i.hasOwnProperty(l)){var c=i[l];"children"===l?"string"==typeof c?r.textContent!==c&&(!0!==i.suppressHydrationWarning&&Zr(r.textContent,c,e),o=["children",c]):"number"==typeof c&&r.textContent!==""+c&&(!0!==i.suppressHydrationWarning&&Zr(r.textContent,c,e),o=["children",""+c]):s.hasOwnProperty(l)&&null!=c&&"onScroll"===l&&Br("scroll",r)}switch(t){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=o,n.updateQueue=r,null!==r&&(n.flags|=4)}else{l=9===o.nodeType?o:o.ownerDocument,"http://www.w3.org/1999/xhtml"===e&&(e=se(t)),"http://www.w3.org/1999/xhtml"===e?"script"===t?((e=l.createElement("div")).innerHTML="<script><\/script>",e=e.removeChild(e.firstChild)):"string"==typeof r.is?e=l.createElement(t,{is:r.is}):(e=l.createElement(t),"select"===t&&(l=e,r.multiple?l.multiple=!0:r.size&&(l.size=r.size))):e=l.createElementNS(e,t),e[fo]=n,e[mo]=r,Rs(e,n,!1,!1),n.stateNode=e;e:{switch(l=ve(t,r),t){case"dialog":Br("cancel",e),Br("close",e),o=r;break;case"iframe":case"object":case"embed":Br("load",e),o=r;break;case"video":case"audio":for(o=0;o<Fr.length;o++)Br(Fr[o],e);o=r;break;case"source":Br("error",e),o=r;break;case"img":case"image":case"link":Br("error",e),Br("load",e),o=r;break;case"details":Br("toggle",e),o=r;break;case"input":X(e,r),o=K(e,r),Br("invalid",e);break;case"option":default:o=r;break;case"select":e._wrapperState={wasMultiple:!!r.multiple},o=D({},r,{value:void 0}),Br("invalid",e);break;case"textarea":oe(e,r),o=re(e,r),Br("invalid",e)}for(i in be(t,o),c=o)if(c.hasOwnProperty(i)){var u=c[i];"style"===i?he(e,u):"dangerouslySetInnerHTML"===i?null!=(u=u?u.__html:void 0)&&de(e,u):"children"===i?"string"==typeof u?("textarea"!==t||""!==u)&&pe(e,u):"number"==typeof u&&pe(e,""+u):"suppressContentEditableWarning"!==i&&"suppressHydrationWarning"!==i&&"autoFocus"!==i&&(s.hasOwnProperty(i)?null!=u&&"onScroll"===i&&Br("scroll",e):null!=u&&v(e,i,u,l))}switch(t){case"input":G(e),J(e,r,!1);break;case"textarea":G(e),ie(e);break;case"option":null!=r.value&&e.setAttribute("value",""+H(r.value));break;case"select":e.multiple=!!r.multiple,null!=(i=r.value)?te(e,!!r.multiple,i,!1):null!=r.defaultValue&&te(e,!!r.multiple,r.defaultValue,!0);break;default:"function"==typeof o.onClick&&(e.onclick=Jr)}switch(t){case"button":case"input":case"select":case"textarea":r=!!r.autoFocus;break e;case"img":r=!0;break e;default:r=!1}}r&&(n.flags|=4)}null!==n.ref&&(n.flags|=512,n.flags|=2097152)}return qs(n),null;case 6:if(e&&null!=n.stateNode)Fs(e,n,e.memoizedProps,r);else{if("string"!=typeof r&&null===n.stateNode)throw Error(a(166));if(t=ri(ti.current),ri(ei.current),pa(n)){if(r=n.stateNode,t=n.memoizedProps,r[fo]=n,(i=r.nodeValue!==t)&&null!==(e=ra))switch(e.tag){case 3:Zr(r.nodeValue,t,0!=(1&e.mode));break;case 5:!0!==e.memoizedProps.suppressHydrationWarning&&Zr(r.nodeValue,t,0!=(1&e.mode))}i&&(n.flags|=4)}else(r=(9===t.nodeType?t:t.ownerDocument).createTextNode(r))[fo]=n,n.stateNode=r}return qs(n),null;case 13:if(Co(li),r=n.memoizedState,null===e||null!==e.memoizedState&&null!==e.memoizedState.dehydrated){if(aa&&null!==oa&&0!=(1&n.mode)&&0==(128&n.flags))fa(),ma(),n.flags|=98560,i=!1;else if(i=pa(n),null!==r&&null!==r.dehydrated){if(null===e){if(!i)throw Error(a(318));if(!(i=null!==(i=n.memoizedState)?i.dehydrated:null))throw Error(a(317));i[fo]=n}else ma(),0==(128&n.flags)&&(n.memoizedState=null),n.flags|=4;qs(n),i=!1}else null!==ia&&(sc(ia),ia=null),i=!0;if(!i)return 65536&n.flags?n:null}return 0!=(128&n.flags)?(n.lanes=t,n):((r=null!==r)!==(null!==e&&null!==e.memoizedState)&&r&&(n.child.flags|=8192,0!=(1&n.mode)&&(null===e||0!=(1&li.current)?0===Fl&&(Fl=3):hc())),null!==n.updateQueue&&(n.flags|=4),qs(n),null);case 4:return ai(),Ns(e,n),null===e&&Vr(n.stateNode.containerInfo),qs(n),null;case 10:return ka(n.type._context),qs(n),null;case 19:if(Co(li),null===(i=n.memoizedState))return qs(n),null;if(r=0!=(128&n.flags),null===(l=i.rendering))if(r)Gs(i,!1);else{if(0!==Fl||null!==e&&0!=(128&e.flags))for(e=n.child;null!==e;){if(null!==(l=ci(e))){for(n.flags|=128,Gs(i,!1),null!==(r=l.updateQueue)&&(n.updateQueue=r,n.flags|=4),n.subtreeFlags=0,r=t,t=n.child;null!==t;)e=r,(i=t).flags&=14680066,null===(l=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=l.childLanes,i.lanes=l.lanes,i.child=l.child,i.subtreeFlags=0,i.deletions=null,i.memoizedProps=l.memoizedProps,i.memoizedState=l.memoizedState,i.updateQueue=l.updateQueue,i.type=l.type,e=l.dependencies,i.dependencies=null===e?null:{lanes:e.lanes,firstContext:e.firstContext}),t=t.sibling;return _o(li,1&li.current|2),n.child}e=e.sibling}null!==i.tail&&Qe()>zl&&(n.flags|=128,r=!0,Gs(i,!1),n.lanes=4194304)}else{if(!r)if(null!==(e=ci(l))){if(n.flags|=128,r=!0,null!==(t=e.updateQueue)&&(n.updateQueue=t,n.flags|=4),Gs(i,!0),null===i.tail&&"hidden"===i.tailMode&&!l.alternate&&!aa)return qs(n),null}else 2*Qe()-i.renderingStartTime>zl&&1073741824!==t&&(n.flags|=128,r=!0,Gs(i,!1),n.lanes=4194304);i.isBackwards?(l.sibling=n.child,n.child=l):(null!==(t=i.last)?t.sibling=l:n.child=l,i.last=l)}return null!==i.tail?(n=i.tail,i.rendering=n,i.tail=n.sibling,i.renderingStartTime=Qe(),n.sibling=null,t=li.current,_o(li,r?1&t|2:1&t),n):(qs(n),null);case 22:case 23:return pc(),r=null!==n.memoizedState,null!==e&&null!==e.memoizedState!==r&&(n.flags|=8192),r&&0!=(1&n.mode)?0!=(1073741824&Nl)&&(qs(n),6&n.subtreeFlags&&(n.flags|=8192)):qs(n),null;case 24:case 25:return null}throw Error(a(156,n.tag))}function Ks(e,n){switch(ta(n),n.tag){case 1:return No(n.type)&&Oo(),65536&(e=n.flags)?(n.flags=-65537&e|128,n):null;case 3:return ai(),Co(Po),Co(Io),di(),0!=(65536&(e=n.flags))&&0==(128&e)?(n.flags=-65537&e|128,n):null;case 5:return si(n),null;case 13:if(Co(li),null!==(e=n.memoizedState)&&null!==e.dehydrated){if(null===n.alternate)throw Error(a(340));ma()}return 65536&(e=n.flags)?(n.flags=-65537&e|128,n):null;case 19:return Co(li),null;case 4:return ai(),null;case 10:return ka(n.type._context),null;case 22:case 23:return pc(),null;default:return null}}Rs=function(e,n){for(var t=n.child;null!==t;){if(5===t.tag||6===t.tag)e.appendChild(t.stateNode);else if(4!==t.tag&&null!==t.child){t.child.return=t,t=t.child;continue}if(t===n)break;for(;null===t.sibling;){if(null===t.return||t.return===n)return;t=t.return}t.sibling.return=t.return,t=t.sibling}},Ns=function(){},Os=function(e,n,t,r){var o=e.memoizedProps;if(o!==r){e=n.stateNode,ri(ei.current);var a,i=null;switch(t){case"input":o=K(e,o),r=K(e,r),i=[];break;case"select":o=D({},o,{value:void 0}),r=D({},r,{value:void 0}),i=[];break;case"textarea":o=re(e,o),r=re(e,r),i=[];break;default:"function"!=typeof o.onClick&&"function"==typeof r.onClick&&(e.onclick=Jr)}for(u in be(t,r),t=null,o)if(!r.hasOwnProperty(u)&&o.hasOwnProperty(u)&&null!=o[u])if("style"===u){var l=o[u];for(a in l)l.hasOwnProperty(a)&&(t||(t={}),t[a]="")}else"dangerouslySetInnerHTML"!==u&&"children"!==u&&"suppressContentEditableWarning"!==u&&"suppressHydrationWarning"!==u&&"autoFocus"!==u&&(s.hasOwnProperty(u)?i||(i=[]):(i=i||[]).push(u,null));for(u in r){var c=r[u];if(l=null!=o?o[u]:void 0,r.hasOwnProperty(u)&&c!==l&&(null!=c||null!=l))if("style"===u)if(l){for(a in l)!l.hasOwnProperty(a)||c&&c.hasOwnProperty(a)||(t||(t={}),t[a]="");for(a in c)c.hasOwnProperty(a)&&l[a]!==c[a]&&(t||(t={}),t[a]=c[a])}else t||(i||(i=[]),i.push(u,t)),t=c;else"dangerouslySetInnerHTML"===u?(c=c?c.__html:void 0,l=l?l.__html:void 0,null!=c&&l!==c&&(i=i||[]).push(u,c)):"children"===u?"string"!=typeof c&&"number"!=typeof c||(i=i||[]).push(u,""+c):"suppressContentEditableWarning"!==u&&"suppressHydrationWarning"!==u&&(s.hasOwnProperty(u)?(null!=c&&"onScroll"===u&&Br("scroll",e),i||l===c||(i=[])):(i=i||[]).push(u,c))}t&&(i=i||[]).push("style",t);var u=i;(n.updateQueue=u)&&(n.flags|=4)}},Fs=function(e,n,t,r){t!==r&&(n.flags|=4)};var Xs=!1,Qs=!1,Zs="function"==typeof WeakSet?WeakSet:Set,Js=null;function el(e,n){var t=e.ref;if(null!==t)if("function"==typeof t)try{t(null)}catch(r){Ec(e,n,r)}else t.current=null}function nl(e,n,t){try{t()}catch(r){Ec(e,n,r)}}var tl=!1;function rl(e,n,t){var r=n.updateQueue;if(null!==(r=null!==r?r.lastEffect:null)){var o=r=r.next;do{if((o.tag&e)===e){var a=o.destroy;o.destroy=void 0,void 0!==a&&nl(n,t,a)}o=o.next}while(o!==r)}}function ol(e,n){if(null!==(n=null!==(n=n.updateQueue)?n.lastEffect:null)){var t=n=n.next;do{if((t.tag&e)===e){var r=t.create;t.destroy=r()}t=t.next}while(t!==n)}}function al(e){var n=e.ref;if(null!==n){var t=e.stateNode;e.tag,e=t,"function"==typeof n?n(e):n.current=e}}function il(e){var n=e.alternate;null!==n&&(e.alternate=null,il(n)),e.child=null,e.deletions=null,e.sibling=null,5===e.tag&&(null!==(n=e.stateNode)&&(delete n[fo],delete n[mo],delete n[ho],delete n[yo],delete n[bo])),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 sl(e){return 5===e.tag||3===e.tag||4===e.tag}function ll(e){e:for(;;){for(;null===e.sibling;){if(null===e.return||sl(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 cl(e,n,t){var r=e.tag;if(5===r||6===r)e=e.stateNode,n?8===t.nodeType?t.parentNode.insertBefore(e,n):t.insertBefore(e,n):(8===t.nodeType?(n=t.parentNode).insertBefore(e,t):(n=t).appendChild(e),null!=(t=t._reactRootContainer)||null!==n.onclick||(n.onclick=Jr));else if(4!==r&&null!==(e=e.child))for(cl(e,n,t),e=e.sibling;null!==e;)cl(e,n,t),e=e.sibling}function ul(e,n,t){var r=e.tag;if(5===r||6===r)e=e.stateNode,n?t.insertBefore(e,n):t.appendChild(e);else if(4!==r&&null!==(e=e.child))for(ul(e,n,t),e=e.sibling;null!==e;)ul(e,n,t),e=e.sibling}var dl=null,pl=!1;function fl(e,n,t){for(t=t.child;null!==t;)ml(e,n,t),t=t.sibling}function ml(e,n,t){if(an&&"function"==typeof an.onCommitFiberUnmount)try{an.onCommitFiberUnmount(on,t)}catch(s){}switch(t.tag){case 5:Qs||el(t,n);case 6:var r=dl,o=pl;dl=null,fl(e,n,t),pl=o,null!==(dl=r)&&(pl?(e=dl,t=t.stateNode,8===e.nodeType?e.parentNode.removeChild(t):e.removeChild(t)):dl.removeChild(t.stateNode));break;case 18:null!==dl&&(pl?(e=dl,t=t.stateNode,8===e.nodeType?lo(e.parentNode,t):1===e.nodeType&&lo(e,t),zn(e)):lo(dl,t.stateNode));break;case 4:r=dl,o=pl,dl=t.stateNode.containerInfo,pl=!0,fl(e,n,t),dl=r,pl=o;break;case 0:case 11:case 14:case 15:if(!Qs&&(null!==(r=t.updateQueue)&&null!==(r=r.lastEffect))){o=r=r.next;do{var a=o,i=a.destroy;a=a.tag,void 0!==i&&(0!=(2&a)||0!=(4&a))&&nl(t,n,i),o=o.next}while(o!==r)}fl(e,n,t);break;case 1:if(!Qs&&(el(t,n),"function"==typeof(r=t.stateNode).componentWillUnmount))try{r.props=t.memoizedProps,r.state=t.memoizedState,r.componentWillUnmount()}catch(s){Ec(t,n,s)}fl(e,n,t);break;case 21:fl(e,n,t);break;case 22:1&t.mode?(Qs=(r=Qs)||null!==t.memoizedState,fl(e,n,t),Qs=r):fl(e,n,t);break;default:fl(e,n,t)}}function gl(e){var n=e.updateQueue;if(null!==n){e.updateQueue=null;var t=e.stateNode;null===t&&(t=e.stateNode=new Zs),n.forEach((function(n){var r=Ic.bind(null,e,n);t.has(n)||(t.add(n),n.then(r,r))}))}}function hl(e,n){var t=n.deletions;if(null!==t)for(var r=0;r<t.length;r++){var o=t[r];try{var i=e,s=n,l=s;e:for(;null!==l;){switch(l.tag){case 5:dl=l.stateNode,pl=!1;break e;case 3:case 4:dl=l.stateNode.containerInfo,pl=!0;break e}l=l.return}if(null===dl)throw Error(a(160));ml(i,s,o),dl=null,pl=!1;var c=o.alternate;null!==c&&(c.return=null),o.return=null}catch(u){Ec(o,n,u)}}if(12854&n.subtreeFlags)for(n=n.child;null!==n;)yl(n,e),n=n.sibling}function yl(e,n){var t=e.alternate,r=e.flags;switch(e.tag){case 0:case 11:case 14:case 15:if(hl(n,e),bl(e),4&r){try{rl(3,e,e.return),ol(3,e)}catch(h){Ec(e,e.return,h)}try{rl(5,e,e.return)}catch(h){Ec(e,e.return,h)}}break;case 1:hl(n,e),bl(e),512&r&&null!==t&&el(t,t.return);break;case 5:if(hl(n,e),bl(e),512&r&&null!==t&&el(t,t.return),32&e.flags){var o=e.stateNode;try{pe(o,"")}catch(h){Ec(e,e.return,h)}}if(4&r&&null!=(o=e.stateNode)){var i=e.memoizedProps,s=null!==t?t.memoizedProps:i,l=e.type,c=e.updateQueue;if(e.updateQueue=null,null!==c)try{"input"===l&&"radio"===i.type&&null!=i.name&&Q(o,i),ve(l,s);var u=ve(l,i);for(s=0;s<c.length;s+=2){var d=c[s],p=c[s+1];"style"===d?he(o,p):"dangerouslySetInnerHTML"===d?de(o,p):"children"===d?pe(o,p):v(o,d,p,u)}switch(l){case"input":Z(o,i);break;case"textarea":ae(o,i);break;case"select":var f=o._wrapperState.wasMultiple;o._wrapperState.wasMultiple=!!i.multiple;var m=i.value;null!=m?te(o,!!i.multiple,m,!1):f!==!!i.multiple&&(null!=i.defaultValue?te(o,!!i.multiple,i.defaultValue,!0):te(o,!!i.multiple,i.multiple?[]:"",!1))}o[mo]=i}catch(h){Ec(e,e.return,h)}}break;case 6:if(hl(n,e),bl(e),4&r){if(null===e.stateNode)throw Error(a(162));o=e.stateNode,i=e.memoizedProps;try{o.nodeValue=i}catch(h){Ec(e,e.return,h)}}break;case 3:if(hl(n,e),bl(e),4&r&&null!==t&&t.memoizedState.isDehydrated)try{zn(n.containerInfo)}catch(h){Ec(e,e.return,h)}break;case 4:default:hl(n,e),bl(e);break;case 13:hl(n,e),bl(e),8192&(o=e.child).flags&&(i=null!==o.memoizedState,o.stateNode.isHidden=i,!i||null!==o.alternate&&null!==o.alternate.memoizedState||(Vl=Qe())),4&r&&gl(e);break;case 22:if(d=null!==t&&null!==t.memoizedState,1&e.mode?(Qs=(u=Qs)||d,hl(n,e),Qs=u):hl(n,e),bl(e),8192&r){if(u=null!==e.memoizedState,(e.stateNode.isHidden=u)&&!d&&0!=(1&e.mode))for(Js=e,d=e.child;null!==d;){for(p=Js=d;null!==Js;){switch(m=(f=Js).child,f.tag){case 0:case 11:case 14:case 15:rl(4,f,f.return);break;case 1:el(f,f.return);var g=f.stateNode;if("function"==typeof g.componentWillUnmount){r=f,t=f.return;try{n=r,g.props=n.memoizedProps,g.state=n.memoizedState,g.componentWillUnmount()}catch(h){Ec(r,t,h)}}break;case 5:el(f,f.return);break;case 22:if(null!==f.memoizedState){xl(p);continue}}null!==m?(m.return=f,Js=m):xl(p)}d=d.sibling}e:for(d=null,p=e;;){if(5===p.tag){if(null===d){d=p;try{o=p.stateNode,u?"function"==typeof(i=o.style).setProperty?i.setProperty("display","none","important"):i.display="none":(l=p.stateNode,s=null!=(c=p.memoizedProps.style)&&c.hasOwnProperty("display")?c.display:null,l.style.display=ge("display",s))}catch(h){Ec(e,e.return,h)}}}else if(6===p.tag){if(null===d)try{p.stateNode.nodeValue=u?"":p.memoizedProps}catch(h){Ec(e,e.return,h)}}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:hl(n,e),bl(e),4&r&&gl(e);case 21:}}function bl(e){var n=e.flags;if(2&n){try{e:{for(var t=e.return;null!==t;){if(sl(t)){var r=t;break e}t=t.return}throw Error(a(160))}switch(r.tag){case 5:var o=r.stateNode;32&r.flags&&(pe(o,""),r.flags&=-33),ul(e,ll(e),o);break;case 3:case 4:var i=r.stateNode.containerInfo;cl(e,ll(e),i);break;default:throw Error(a(161))}}catch(s){Ec(e,e.return,s)}e.flags&=-3}4096&n&&(e.flags&=-4097)}function vl(e,n,t){Js=e,Sl(e,n,t)}function Sl(e,n,t){for(var r=0!=(1&e.mode);null!==Js;){var o=Js,a=o.child;if(22===o.tag&&r){var i=null!==o.memoizedState||Xs;if(!i){var s=o.alternate,l=null!==s&&null!==s.memoizedState||Qs;s=Xs;var c=Qs;if(Xs=i,(Qs=l)&&!c)for(Js=o;null!==Js;)l=(i=Js).child,22===i.tag&&null!==i.memoizedState?kl(o):null!==l?(l.return=i,Js=l):kl(o);for(;null!==a;)Js=a,Sl(a,n,t),a=a.sibling;Js=o,Xs=s,Qs=c}wl(e)}else 0!=(8772&o.subtreeFlags)&&null!==a?(a.return=o,Js=a):wl(e)}}function wl(e){for(;null!==Js;){var n=Js;if(0!=(8772&n.flags)){var t=n.alternate;try{if(0!=(8772&n.flags))switch(n.tag){case 0:case 11:case 15:Qs||ol(5,n);break;case 1:var r=n.stateNode;if(4&n.flags&&!Qs)if(null===t)r.componentDidMount();else{var o=n.elementType===n.type?t.memoizedProps:ya(n.type,t.memoizedProps);r.componentDidUpdate(o,t.memoizedState,r.__reactInternalSnapshotBeforeUpdate)}var i=n.updateQueue;null!==i&&Ba(n,i,r);break;case 3:var s=n.updateQueue;if(null!==s){if(t=null,null!==n.child)switch(n.child.tag){case 5:case 1:t=n.child.stateNode}Ba(n,s,t)}break;case 5:var l=n.stateNode;if(null===t&&4&n.flags){t=l;var c=n.memoizedProps;switch(n.type){case"button":case"input":case"select":case"textarea":c.autoFocus&&t.focus();break;case"img":c.src&&(t.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===n.memoizedState){var u=n.alternate;if(null!==u){var d=u.memoizedState;if(null!==d){var p=d.dehydrated;null!==p&&zn(p)}}}break;default:throw Error(a(163))}Qs||512&n.flags&&al(n)}catch(f){Ec(n,n.return,f)}}if(n===e){Js=null;break}if(null!==(t=n.sibling)){t.return=n.return,Js=t;break}Js=n.return}}function xl(e){for(;null!==Js;){var n=Js;if(n===e){Js=null;break}var t=n.sibling;if(null!==t){t.return=n.return,Js=t;break}Js=n.return}}function kl(e){for(;null!==Js;){var n=Js;try{switch(n.tag){case 0:case 11:case 15:var t=n.return;try{ol(4,n)}catch(l){Ec(n,t,l)}break;case 1:var r=n.stateNode;if("function"==typeof r.componentDidMount){var o=n.return;try{r.componentDidMount()}catch(l){Ec(n,o,l)}}var a=n.return;try{al(n)}catch(l){Ec(n,a,l)}break;case 5:var i=n.return;try{al(n)}catch(l){Ec(n,i,l)}}}catch(l){Ec(n,n.return,l)}if(n===e){Js=null;break}var s=n.sibling;if(null!==s){s.return=n.return,Js=s;break}Js=n.return}}var Tl,El=Math.ceil,Cl=S.ReactCurrentDispatcher,_l=S.ReactCurrentOwner,Al=S.ReactCurrentBatchConfig,Il=0,Pl=null,Ll=null,Rl=0,Nl=0,Ol=Eo(0),Fl=0,jl=null,Dl=0,Ml=0,Bl=0,$l=null,Ul=null,Vl=0,zl=1/0,Hl=null,Wl=!1,Gl=null,ql=null,Yl=!1,Kl=null,Xl=0,Ql=0,Zl=null,Jl=-1,ec=0;function nc(){return 0!=(6&Il)?Qe():-1!==Jl?Jl:Jl=Qe()}function tc(e){return 0==(1&e.mode)?1:0!=(2&Il)&&0!==Rl?Rl&-Rl:null!==ha.transition?(0===ec&&(ec=hn()),ec):0!==(e=Sn)?e:e=void 0===(e=window.event)?16:Qn(e.type)}function rc(e,n,t,r){if(50<Ql)throw Ql=0,Zl=null,Error(a(185));bn(e,t,r),0!=(2&Il)&&e===Pl||(e===Pl&&(0==(2&Il)&&(Ml|=t),4===Fl&&lc(e,Rl)),oc(e,r),1===t&&0===Il&&0==(1&n.mode)&&(zl=Qe()+500,$o&&zo()))}function oc(e,n){var t=e.callbackNode;!function(e,n){for(var t=e.suspendedLanes,r=e.pingedLanes,o=e.expirationTimes,a=e.pendingLanes;0<a;){var i=31-sn(a),s=1<<i,l=o[i];-1===l?0!=(s&t)&&0==(s&r)||(o[i]=mn(s,n)):l<=n&&(e.expiredLanes|=s),a&=~s}}(e,n);var r=fn(e,e===Pl?Rl:0);if(0===r)null!==t&&Ye(t),e.callbackNode=null,e.callbackPriority=0;else if(n=r&-r,e.callbackPriority!==n){if(null!=t&&Ye(t),1===n)0===e.tag?function(e){$o=!0,Vo(e)}(cc.bind(null,e)):Vo(cc.bind(null,e)),io((function(){0==(6&Il)&&zo()})),t=null;else{switch(wn(r)){case 1:t=Je;break;case 4:t=en;break;case 16:default:t=nn;break;case 536870912:t=rn}t=Pc(t,ac.bind(null,e))}e.callbackPriority=n,e.callbackNode=t}}function ac(e,n){if(Jl=-1,ec=0,0!=(6&Il))throw Error(a(327));var t=e.callbackNode;if(kc()&&e.callbackNode!==t)return null;var r=fn(e,e===Pl?Rl:0);if(0===r)return null;if(0!=(30&r)||0!=(r&e.expiredLanes)||n)n=yc(e,r);else{n=r;var o=Il;Il|=2;var i=gc();for(Pl===e&&Rl===n||(Hl=null,zl=Qe()+500,fc(e,n));;)try{vc();break}catch(l){mc(e,l)}xa(),Cl.current=i,Il=o,null!==Ll?n=0:(Pl=null,Rl=0,n=Fl)}if(0!==n){if(2===n&&(0!==(o=gn(e))&&(r=o,n=ic(e,o))),1===n)throw t=jl,fc(e,0),lc(e,r),oc(e,Qe()),t;if(6===n)lc(e,r);else{if(o=e.current.alternate,0==(30&r)&&!function(e){for(var n=e;;){if(16384&n.flags){var t=n.updateQueue;if(null!==t&&null!==(t=t.stores))for(var r=0;r<t.length;r++){var o=t[r],a=o.getSnapshot;o=o.value;try{if(!sr(a(),o))return!1}catch(s){return!1}}}if(t=n.child,16384&n.subtreeFlags&&null!==t)t.return=n,n=t;else{if(n===e)break;for(;null===n.sibling;){if(null===n.return||n.return===e)return!0;n=n.return}n.sibling.return=n.return,n=n.sibling}}return!0}(o)&&(2===(n=yc(e,r))&&(0!==(i=gn(e))&&(r=i,n=ic(e,i))),1===n))throw t=jl,fc(e,0),lc(e,r),oc(e,Qe()),t;switch(e.finishedWork=o,e.finishedLanes=r,n){case 0:case 1:throw Error(a(345));case 2:case 5:xc(e,Ul,Hl);break;case 3:if(lc(e,r),(130023424&r)===r&&10<(n=Vl+500-Qe())){if(0!==fn(e,0))break;if(((o=e.suspendedLanes)&r)!==r){nc(),e.pingedLanes|=e.suspendedLanes&o;break}e.timeoutHandle=ro(xc.bind(null,e,Ul,Hl),n);break}xc(e,Ul,Hl);break;case 4:if(lc(e,r),(4194240&r)===r)break;for(n=e.eventTimes,o=-1;0<r;){var s=31-sn(r);i=1<<s,(s=n[s])>o&&(o=s),r&=~i}if(r=o,10<(r=(120>(r=Qe()-r)?120:480>r?480:1080>r?1080:1920>r?1920:3e3>r?3e3:4320>r?4320:1960*El(r/1960))-r)){e.timeoutHandle=ro(xc.bind(null,e,Ul,Hl),r);break}xc(e,Ul,Hl);break;default:throw Error(a(329))}}}return oc(e,Qe()),e.callbackNode===t?ac.bind(null,e):null}function ic(e,n){var t=$l;return e.current.memoizedState.isDehydrated&&(fc(e,n).flags|=256),2!==(e=yc(e,n))&&(n=Ul,Ul=t,null!==n&&sc(n)),e}function sc(e){null===Ul?Ul=e:Ul.push.apply(Ul,e)}function lc(e,n){for(n&=~Bl,n&=~Ml,e.suspendedLanes|=n,e.pingedLanes&=~n,e=e.expirationTimes;0<n;){var t=31-sn(n),r=1<<t;e[t]=-1,n&=~r}}function cc(e){if(0!=(6&Il))throw Error(a(327));kc();var n=fn(e,0);if(0==(1&n))return oc(e,Qe()),null;var t=yc(e,n);if(0!==e.tag&&2===t){var r=gn(e);0!==r&&(n=r,t=ic(e,r))}if(1===t)throw t=jl,fc(e,0),lc(e,n),oc(e,Qe()),t;if(6===t)throw Error(a(345));return e.finishedWork=e.current.alternate,e.finishedLanes=n,xc(e,Ul,Hl),oc(e,Qe()),null}function uc(e,n){var t=Il;Il|=1;try{return e(n)}finally{0===(Il=t)&&(zl=Qe()+500,$o&&zo())}}function dc(e){null!==Kl&&0===Kl.tag&&0==(6&Il)&&kc();var n=Il;Il|=1;var t=Al.transition,r=Sn;try{if(Al.transition=null,Sn=1,e)return e()}finally{Sn=r,Al.transition=t,0==(6&(Il=n))&&zo()}}function pc(){Nl=Ol.current,Co(Ol)}function fc(e,n){e.finishedWork=null,e.finishedLanes=0;var t=e.timeoutHandle;if(-1!==t&&(e.timeoutHandle=-1,oo(t)),null!==Ll)for(t=Ll.return;null!==t;){var r=t;switch(ta(r),r.tag){case 1:null!=(r=r.type.childContextTypes)&&Oo();break;case 3:ai(),Co(Po),Co(Io),di();break;case 5:si(r);break;case 4:ai();break;case 13:case 19:Co(li);break;case 10:ka(r.type._context);break;case 22:case 23:pc()}t=t.return}if(Pl=e,Ll=e=Oc(e.current,null),Rl=Nl=n,Fl=0,jl=null,Bl=Ml=Dl=0,Ul=$l=null,null!==_a){for(n=0;n<_a.length;n++)if(null!==(r=(t=_a[n]).interleaved)){t.interleaved=null;var o=r.next,a=t.pending;if(null!==a){var i=a.next;a.next=o,r.next=i}t.pending=r}_a=null}return e}function mc(e,n){for(;;){var t=Ll;try{if(xa(),pi.current=is,bi){for(var r=gi.memoizedState;null!==r;){var o=r.queue;null!==o&&(o.pending=null),r=r.next}bi=!1}if(mi=0,yi=hi=gi=null,vi=!1,Si=0,_l.current=null,null===t||null===t.return){Fl=1,jl=n,Ll=null;break}e:{var i=e,s=t.return,l=t,c=n;if(n=Rl,l.flags|=32768,null!==c&&"object"==typeof c&&"function"==typeof c.then){var u=c,d=l,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=ys(s);if(null!==m){m.flags&=-257,bs(m,s,l,0,n),1&m.mode&&hs(i,u,n),c=u;var g=(n=m).updateQueue;if(null===g){var h=new Set;h.add(c),n.updateQueue=h}else g.add(c);break e}if(0==(1&n)){hs(i,u,n),hc();break e}c=Error(a(426))}else if(aa&&1&l.mode){var y=ys(s);if(null!==y){0==(65536&y.flags)&&(y.flags|=256),bs(y,s,l,0,n),ga(us(c,l));break e}}i=c=us(c,l),4!==Fl&&(Fl=2),null===$l?$l=[i]:$l.push(i),i=s;do{switch(i.tag){case 3:i.flags|=65536,n&=-n,i.lanes|=n,Da(i,ms(0,c,n));break e;case 1:l=c;var b=i.type,v=i.stateNode;if(0==(128&i.flags)&&("function"==typeof b.getDerivedStateFromError||null!==v&&"function"==typeof v.componentDidCatch&&(null===ql||!ql.has(v)))){i.flags|=65536,n&=-n,i.lanes|=n,Da(i,gs(i,l,n));break e}}i=i.return}while(null!==i)}wc(t)}catch(S){n=S,Ll===t&&null!==t&&(Ll=t=t.return);continue}break}}function gc(){var e=Cl.current;return Cl.current=is,null===e?is:e}function hc(){0!==Fl&&3!==Fl&&2!==Fl||(Fl=4),null===Pl||0==(268435455&Dl)&&0==(268435455&Ml)||lc(Pl,Rl)}function yc(e,n){var t=Il;Il|=2;var r=gc();for(Pl===e&&Rl===n||(Hl=null,fc(e,n));;)try{bc();break}catch(o){mc(e,o)}if(xa(),Il=t,Cl.current=r,null!==Ll)throw Error(a(261));return Pl=null,Rl=0,Fl}function bc(){for(;null!==Ll;)Sc(Ll)}function vc(){for(;null!==Ll&&!Ke();)Sc(Ll)}function Sc(e){var n=Tl(e.alternate,e,Nl);e.memoizedProps=e.pendingProps,null===n?wc(e):Ll=n,_l.current=null}function wc(e){var n=e;do{var t=n.alternate;if(e=n.return,0==(32768&n.flags)){if(null!==(t=Ys(t,n,Nl)))return void(Ll=t)}else{if(null!==(t=Ks(t,n)))return t.flags&=32767,void(Ll=t);if(null===e)return Fl=6,void(Ll=null);e.flags|=32768,e.subtreeFlags=0,e.deletions=null}if(null!==(n=n.sibling))return void(Ll=n);Ll=n=e}while(null!==n);0===Fl&&(Fl=5)}function xc(e,n,t){var r=Sn,o=Al.transition;try{Al.transition=null,Sn=1,function(e,n,t,r){do{kc()}while(null!==Kl);if(0!=(6&Il))throw Error(a(327));t=e.finishedWork;var o=e.finishedLanes;if(null===t)return null;if(e.finishedWork=null,e.finishedLanes=0,t===e.current)throw Error(a(177));e.callbackNode=null,e.callbackPriority=0;var i=t.lanes|t.childLanes;if(function(e,n){var t=e.pendingLanes&~n;e.pendingLanes=n,e.suspendedLanes=0,e.pingedLanes=0,e.expiredLanes&=n,e.mutableReadLanes&=n,e.entangledLanes&=n,n=e.entanglements;var r=e.eventTimes;for(e=e.expirationTimes;0<t;){var o=31-sn(t),a=1<<o;n[o]=0,r[o]=-1,e[o]=-1,t&=~a}}(e,i),e===Pl&&(Ll=Pl=null,Rl=0),0==(2064&t.subtreeFlags)&&0==(2064&t.flags)||Yl||(Yl=!0,Pc(nn,(function(){return kc(),null}))),i=0!=(15990&t.flags),0!=(15990&t.subtreeFlags)||i){i=Al.transition,Al.transition=null;var s=Sn;Sn=1;var l=Il;Il|=4,_l.current=null,function(e,n){if(eo=Wn,fr(e=pr())){if("selectionStart"in e)var t={start:e.selectionStart,end:e.selectionEnd};else e:{var r=(t=(t=e.ownerDocument)&&t.defaultView||window).getSelection&&t.getSelection();if(r&&0!==r.rangeCount){t=r.anchorNode;var o=r.anchorOffset,i=r.focusNode;r=r.focusOffset;try{t.nodeType,i.nodeType}catch(w){t=null;break e}var s=0,l=-1,c=-1,u=0,d=0,p=e,f=null;n:for(;;){for(var m;p!==t||0!==o&&3!==p.nodeType||(l=s+o),p!==i||0!==r&&3!==p.nodeType||(c=s+r),3===p.nodeType&&(s+=p.nodeValue.length),null!==(m=p.firstChild);)f=p,p=m;for(;;){if(p===e)break n;if(f===t&&++u===o&&(l=s),f===i&&++d===r&&(c=s),null!==(m=p.nextSibling))break;f=(p=f).parentNode}p=m}t=-1===l||-1===c?null:{start:l,end:c}}else t=null}t=t||{start:0,end:0}}else t=null;for(no={focusedElem:e,selectionRange:t},Wn=!1,Js=n;null!==Js;)if(e=(n=Js).child,0!=(1028&n.subtreeFlags)&&null!==e)e.return=n,Js=e;else for(;null!==Js;){n=Js;try{var g=n.alternate;if(0!=(1024&n.flags))switch(n.tag){case 0:case 11:case 15:case 5:case 6:case 4:case 17:break;case 1:if(null!==g){var h=g.memoizedProps,y=g.memoizedState,b=n.stateNode,v=b.getSnapshotBeforeUpdate(n.elementType===n.type?h:ya(n.type,h),y);b.__reactInternalSnapshotBeforeUpdate=v}break;case 3:var S=n.stateNode.containerInfo;1===S.nodeType?S.textContent="":9===S.nodeType&&S.documentElement&&S.removeChild(S.documentElement);break;default:throw Error(a(163))}}catch(w){Ec(n,n.return,w)}if(null!==(e=n.sibling)){e.return=n.return,Js=e;break}Js=n.return}g=tl,tl=!1}(e,t),yl(t,e),mr(no),Wn=!!eo,no=eo=null,e.current=t,vl(t,e,o),Xe(),Il=l,Sn=s,Al.transition=i}else e.current=t;if(Yl&&(Yl=!1,Kl=e,Xl=o),i=e.pendingLanes,0===i&&(ql=null),function(e){if(an&&"function"==typeof an.onCommitFiberRoot)try{an.onCommitFiberRoot(on,e,void 0,128==(128&e.current.flags))}catch(n){}}(t.stateNode),oc(e,Qe()),null!==n)for(r=e.onRecoverableError,t=0;t<n.length;t++)o=n[t],r(o.value,{componentStack:o.stack,digest:o.digest});if(Wl)throw Wl=!1,e=Gl,Gl=null,e;0!=(1&Xl)&&0!==e.tag&&kc(),i=e.pendingLanes,0!=(1&i)?e===Zl?Ql++:(Ql=0,Zl=e):Ql=0,zo()}(e,n,t,r)}finally{Al.transition=o,Sn=r}return null}function kc(){if(null!==Kl){var e=wn(Xl),n=Al.transition,t=Sn;try{if(Al.transition=null,Sn=16>e?16:e,null===Kl)var r=!1;else{if(e=Kl,Kl=null,Xl=0,0!=(6&Il))throw Error(a(331));var o=Il;for(Il|=4,Js=e.current;null!==Js;){var i=Js,s=i.child;if(0!=(16&Js.flags)){var l=i.deletions;if(null!==l){for(var c=0;c<l.length;c++){var u=l[c];for(Js=u;null!==Js;){var d=Js;switch(d.tag){case 0:case 11:case 15:rl(8,d,i)}var p=d.child;if(null!==p)p.return=d,Js=p;else for(;null!==Js;){var f=(d=Js).sibling,m=d.return;if(il(d),d===u){Js=null;break}if(null!==f){f.return=m,Js=f;break}Js=m}}}var g=i.alternate;if(null!==g){var h=g.child;if(null!==h){g.child=null;do{var y=h.sibling;h.sibling=null,h=y}while(null!==h)}}Js=i}}if(0!=(2064&i.subtreeFlags)&&null!==s)s.return=i,Js=s;else e:for(;null!==Js;){if(0!=(2048&(i=Js).flags))switch(i.tag){case 0:case 11:case 15:rl(9,i,i.return)}var b=i.sibling;if(null!==b){b.return=i.return,Js=b;break e}Js=i.return}}var v=e.current;for(Js=v;null!==Js;){var S=(s=Js).child;if(0!=(2064&s.subtreeFlags)&&null!==S)S.return=s,Js=S;else e:for(s=v;null!==Js;){if(0!=(2048&(l=Js).flags))try{switch(l.tag){case 0:case 11:case 15:ol(9,l)}}catch(x){Ec(l,l.return,x)}if(l===s){Js=null;break e}var w=l.sibling;if(null!==w){w.return=l.return,Js=w;break e}Js=l.return}}if(Il=o,zo(),an&&"function"==typeof an.onPostCommitFiberRoot)try{an.onPostCommitFiberRoot(on,e)}catch(x){}r=!0}return r}finally{Sn=t,Al.transition=n}}return!1}function Tc(e,n,t){e=Fa(e,n=ms(0,n=us(t,n),1),1),n=nc(),null!==e&&(bn(e,1,n),oc(e,n))}function Ec(e,n,t){if(3===e.tag)Tc(e,e,t);else for(;null!==n;){if(3===n.tag){Tc(n,e,t);break}if(1===n.tag){var r=n.stateNode;if("function"==typeof n.type.getDerivedStateFromError||"function"==typeof r.componentDidCatch&&(null===ql||!ql.has(r))){n=Fa(n,e=gs(n,e=us(t,e),1),1),e=nc(),null!==n&&(bn(n,1,e),oc(n,e));break}}n=n.return}}function Cc(e,n,t){var r=e.pingCache;null!==r&&r.delete(n),n=nc(),e.pingedLanes|=e.suspendedLanes&t,Pl===e&&(Rl&t)===t&&(4===Fl||3===Fl&&(130023424&Rl)===Rl&&500>Qe()-Vl?fc(e,0):Bl|=t),oc(e,n)}function _c(e,n){0===n&&(0==(1&e.mode)?n=1:(n=dn,0==(130023424&(dn<<=1))&&(dn=4194304)));var t=nc();null!==(e=Pa(e,n))&&(bn(e,n,t),oc(e,t))}function Ac(e){var n=e.memoizedState,t=0;null!==n&&(t=n.retryLane),_c(e,t)}function Ic(e,n){var t=0;switch(e.tag){case 13:var r=e.stateNode,o=e.memoizedState;null!==o&&(t=o.retryLane);break;case 19:r=e.stateNode;break;default:throw Error(a(314))}null!==r&&r.delete(n),_c(e,t)}function Pc(e,n){return qe(e,n)}function Lc(e,n,t,r){this.tag=e,this.key=t,this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null,this.index=0,this.ref=null,this.pendingProps=n,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,n,t,r){return new Lc(e,n,t,r)}function Nc(e){return!(!(e=e.prototype)||!e.isReactComponent)}function Oc(e,n){var t=e.alternate;return null===t?((t=Rc(e.tag,n,e.key,e.mode)).elementType=e.elementType,t.type=e.type,t.stateNode=e.stateNode,t.alternate=e,e.alternate=t):(t.pendingProps=n,t.type=e.type,t.flags=0,t.subtreeFlags=0,t.deletions=null),t.flags=14680064&e.flags,t.childLanes=e.childLanes,t.lanes=e.lanes,t.child=e.child,t.memoizedProps=e.memoizedProps,t.memoizedState=e.memoizedState,t.updateQueue=e.updateQueue,n=e.dependencies,t.dependencies=null===n?null:{lanes:n.lanes,firstContext:n.firstContext},t.sibling=e.sibling,t.index=e.index,t.ref=e.ref,t}function Fc(e,n,t,r,o,i){var s=2;if(r=e,"function"==typeof e)Nc(e)&&(s=1);else if("string"==typeof e)s=5;else e:switch(e){case k:return jc(t.children,o,i,n);case T:s=8,o|=8;break;case E:return(e=Rc(12,t,n,2|o)).elementType=E,e.lanes=i,e;case I:return(e=Rc(13,t,n,o)).elementType=I,e.lanes=i,e;case P:return(e=Rc(19,t,n,o)).elementType=P,e.lanes=i,e;case N:return Dc(t,o,i,n);default:if("object"==typeof e&&null!==e)switch(e.$$typeof){case C:s=10;break e;case _:s=9;break e;case A:s=11;break e;case L:s=14;break e;case R:s=16,r=null;break e}throw Error(a(130,null==e?e:typeof e,""))}return(n=Rc(s,t,n,o)).elementType=e,n.type=r,n.lanes=i,n}function jc(e,n,t,r){return(e=Rc(7,e,r,n)).lanes=t,e}function Dc(e,n,t,r){return(e=Rc(22,e,r,n)).elementType=N,e.lanes=t,e.stateNode={isHidden:!1},e}function Mc(e,n,t){return(e=Rc(6,e,null,n)).lanes=t,e}function Bc(e,n,t){return(n=Rc(4,null!==e.children?e.children:[],e.key,n)).lanes=t,n.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},n}function $c(e,n,t,r,o){this.tag=n,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=yn(0),this.expirationTimes=yn(-1),this.entangledLanes=this.finishedLanes=this.mutableReadLanes=this.expiredLanes=this.pingedLanes=this.suspendedLanes=this.pendingLanes=0,this.entanglements=yn(0),this.identifierPrefix=r,this.onRecoverableError=o,this.mutableSourceEagerHydrationData=null}function Uc(e,n,t,r,o,a,i,s,l){return e=new $c(e,n,t,s,l),1===n?(n=1,!0===a&&(n|=8)):n=0,a=Rc(3,null,null,n),e.current=a,a.stateNode=e,a.memoizedState={element:r,isDehydrated:t,cache:null,transitions:null,pendingSuspenseBoundaries:null},Ra(a),e}function Vc(e){if(!e)return Ao;e:{if(Ve(e=e._reactInternals)!==e||1!==e.tag)throw Error(a(170));var n=e;do{switch(n.tag){case 3:n=n.stateNode.context;break e;case 1:if(No(n.type)){n=n.stateNode.__reactInternalMemoizedMergedChildContext;break e}}n=n.return}while(null!==n);throw Error(a(171))}if(1===e.tag){var t=e.type;if(No(t))return jo(e,t,n)}return n}function zc(e,n,t,r,o,a,i,s,l){return(e=Uc(t,r,!0,e,0,a,0,s,l)).context=Vc(null),t=e.current,(a=Oa(r=nc(),o=tc(t))).callback=null!=n?n:null,Fa(t,a,o),e.current.lanes=o,bn(e,o,r),oc(e,r),e}function Hc(e,n,t,r){var o=n.current,a=nc(),i=tc(o);return t=Vc(t),null===n.context?n.context=t:n.pendingContext=t,(n=Oa(a,i)).payload={element:e},null!==(r=void 0===r?null:r)&&(n.callback=r),null!==(e=Fa(o,n,i))&&(rc(e,o,i,a),ja(e,o,i)),i}function Wc(e){return(e=e.current).child?(e.child.tag,e.child.stateNode):null}function Gc(e,n){if(null!==(e=e.memoizedState)&&null!==e.dehydrated){var t=e.retryLane;e.retryLane=0!==t&&t<n?t:n}}function qc(e,n){Gc(e,n),(e=e.alternate)&&Gc(e,n)}Tl=function(e,n,t){if(null!==e)if(e.memoizedProps!==n.pendingProps||Po.current)Ss=!0;else{if(0==(e.lanes&t)&&0==(128&n.flags))return Ss=!1,function(e,n,t){switch(n.tag){case 3:Ps(n),ma();break;case 5:ii(n);break;case 1:No(n.type)&&Do(n);break;case 4:oi(n,n.stateNode.containerInfo);break;case 10:var r=n.type._context,o=n.memoizedProps.value;_o(ba,r._currentValue),r._currentValue=o;break;case 13:if(null!==(r=n.memoizedState))return null!==r.dehydrated?(_o(li,1&li.current),n.flags|=128,null):0!=(t&n.child.childLanes)?Ms(e,n,t):(_o(li,1&li.current),null!==(e=Ws(e,n,t))?e.sibling:null);_o(li,1&li.current);break;case 19:if(r=0!=(t&n.childLanes),0!=(128&e.flags)){if(r)return zs(e,n,t);n.flags|=128}if(null!==(o=n.memoizedState)&&(o.rendering=null,o.tail=null,o.lastEffect=null),_o(li,li.current),r)break;return null;case 22:case 23:return n.lanes=0,Es(e,n,t)}return Ws(e,n,t)}(e,n,t);Ss=0!=(131072&e.flags)}else Ss=!1,aa&&0!=(1048576&n.flags)&&ea(n,qo,n.index);switch(n.lanes=0,n.tag){case 2:var r=n.type;Hs(e,n),e=n.pendingProps;var o=Ro(n,Io.current);Ea(n,t),o=Ti(null,n,r,e,o,t);var i=Ei();return n.flags|=1,"object"==typeof o&&null!==o&&"function"==typeof o.render&&void 0===o.$$typeof?(n.tag=1,n.memoizedState=null,n.updateQueue=null,No(r)?(i=!0,Do(n)):i=!1,n.memoizedState=null!==o.state&&void 0!==o.state?o.state:null,Ra(n),o.updater=Va,n.stateNode=o,o._reactInternals=n,Ga(n,r,e,t),n=Is(null,n,r,!0,i,t)):(n.tag=0,aa&&i&&na(n),ws(null,n,o,t),n=n.child),n;case 16:r=n.elementType;e:{switch(Hs(e,n),e=n.pendingProps,r=(o=r._init)(r._payload),n.type=r,o=n.tag=function(e){if("function"==typeof e)return Nc(e)?1:0;if(null!=e){if((e=e.$$typeof)===A)return 11;if(e===L)return 14}return 2}(r),e=ya(r,e),o){case 0:n=_s(null,n,r,e,t);break e;case 1:n=As(null,n,r,e,t);break e;case 11:n=xs(null,n,r,e,t);break e;case 14:n=ks(null,n,r,ya(r.type,e),t);break e}throw Error(a(306,r,""))}return n;case 0:return r=n.type,o=n.pendingProps,_s(e,n,r,o=n.elementType===r?o:ya(r,o),t);case 1:return r=n.type,o=n.pendingProps,As(e,n,r,o=n.elementType===r?o:ya(r,o),t);case 3:e:{if(Ps(n),null===e)throw Error(a(387));r=n.pendingProps,o=(i=n.memoizedState).element,Na(e,n),Ma(n,r,null,t);var s=n.memoizedState;if(r=s.element,i.isDehydrated){if(i={element:r,isDehydrated:!1,cache:s.cache,pendingSuspenseBoundaries:s.pendingSuspenseBoundaries,transitions:s.transitions},n.updateQueue.baseState=i,n.memoizedState=i,256&n.flags){n=Ls(e,n,r,t,o=us(Error(a(423)),n));break e}if(r!==o){n=Ls(e,n,r,t,o=us(Error(a(424)),n));break e}for(oa=co(n.stateNode.containerInfo.firstChild),ra=n,aa=!0,ia=null,t=Za(n,null,r,t),n.child=t;t;)t.flags=-3&t.flags|4096,t=t.sibling}else{if(ma(),r===o){n=Ws(e,n,t);break e}ws(e,n,r,t)}n=n.child}return n;case 5:return ii(n),null===e&&ua(n),r=n.type,o=n.pendingProps,i=null!==e?e.memoizedProps:null,s=o.children,to(r,o)?s=null:null!==i&&to(r,i)&&(n.flags|=32),Cs(e,n),ws(e,n,s,t),n.child;case 6:return null===e&&ua(n),null;case 13:return Ms(e,n,t);case 4:return oi(n,n.stateNode.containerInfo),r=n.pendingProps,null===e?n.child=Qa(n,null,r,t):ws(e,n,r,t),n.child;case 11:return r=n.type,o=n.pendingProps,xs(e,n,r,o=n.elementType===r?o:ya(r,o),t);case 7:return ws(e,n,n.pendingProps,t),n.child;case 8:case 12:return ws(e,n,n.pendingProps.children,t),n.child;case 10:e:{if(r=n.type._context,o=n.pendingProps,i=n.memoizedProps,s=o.value,_o(ba,r._currentValue),r._currentValue=s,null!==i)if(sr(i.value,s)){if(i.children===o.children&&!Po.current){n=Ws(e,n,t);break e}}else for(null!==(i=n.child)&&(i.return=n);null!==i;){var l=i.dependencies;if(null!==l){s=i.child;for(var c=l.firstContext;null!==c;){if(c.context===r){if(1===i.tag){(c=Oa(-1,t&-t)).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|=t,null!==(c=i.alternate)&&(c.lanes|=t),Ta(i.return,t,n),l.lanes|=t;break}c=c.next}}else if(10===i.tag)s=i.type===n.type?null:i.child;else if(18===i.tag){if(null===(s=i.return))throw Error(a(341));s.lanes|=t,null!==(l=s.alternate)&&(l.lanes|=t),Ta(s,t,n),s=i.sibling}else s=i.child;if(null!==s)s.return=i;else for(s=i;null!==s;){if(s===n){s=null;break}if(null!==(i=s.sibling)){i.return=s.return,s=i;break}s=s.return}i=s}ws(e,n,o.children,t),n=n.child}return n;case 9:return o=n.type,r=n.pendingProps.children,Ea(n,t),r=r(o=Ca(o)),n.flags|=1,ws(e,n,r,t),n.child;case 14:return o=ya(r=n.type,n.pendingProps),ks(e,n,r,o=ya(r.type,o),t);case 15:return Ts(e,n,n.type,n.pendingProps,t);case 17:return r=n.type,o=n.pendingProps,o=n.elementType===r?o:ya(r,o),Hs(e,n),n.tag=1,No(r)?(e=!0,Do(n)):e=!1,Ea(n,t),Ha(n,r,o),Ga(n,r,o,t),Is(null,n,r,!0,e,t);case 19:return zs(e,n,t);case 22:return Es(e,n,t)}throw Error(a(156,n.tag))};var Yc="function"==typeof reportError?reportError:function(e){console.error(e)};function Kc(e){this._internalRoot=e}function Xc(e){this._internalRoot=e}function Qc(e){return!(!e||1!==e.nodeType&&9!==e.nodeType&&11!==e.nodeType)}function Zc(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,n,t,r,o){var a=t._reactRootContainer;if(a){var i=a;if("function"==typeof o){var s=o;o=function(){var e=Wc(i);s.call(e)}}Hc(n,i,e,o)}else i=function(e,n,t,r,o){if(o){if("function"==typeof r){var a=r;r=function(){var e=Wc(i);a.call(e)}}var i=zc(n,r,e,0,null,!1,0,"",Jc);return e._reactRootContainer=i,e[go]=i.current,Vr(8===e.nodeType?e.parentNode:e),dc(),i}for(;o=e.lastChild;)e.removeChild(o);if("function"==typeof r){var s=r;r=function(){var e=Wc(l);s.call(e)}}var l=Uc(e,0,!1,null,0,!1,0,"",Jc);return e._reactRootContainer=l,e[go]=l.current,Vr(8===e.nodeType?e.parentNode:e),dc((function(){Hc(n,l,t,r)})),l}(t,n,e,o,r);return Wc(i)}Xc.prototype.render=Kc.prototype.render=function(e){var n=this._internalRoot;if(null===n)throw Error(a(409));Hc(e,n,null,null)},Xc.prototype.unmount=Kc.prototype.unmount=function(){var e=this._internalRoot;if(null!==e){this._internalRoot=null;var n=e.containerInfo;dc((function(){Hc(null,e,null,null)})),n[go]=null}},Xc.prototype.unstable_scheduleHydration=function(e){if(e){var n=En();e={blockedOn:null,target:e,priority:n};for(var t=0;t<On.length&&0!==n&&n<On[t].priority;t++);On.splice(t,0,e),0===t&&Mn(e)}},xn=function(e){switch(e.tag){case 3:var n=e.stateNode;if(n.current.memoizedState.isDehydrated){var t=pn(n.pendingLanes);0!==t&&(vn(n,1|t),oc(n,Qe()),0==(6&Il)&&(zl=Qe()+500,zo()))}break;case 13:dc((function(){var n=Pa(e,1);if(null!==n){var t=nc();rc(n,e,1,t)}})),qc(e,1)}},kn=function(e){if(13===e.tag){var n=Pa(e,134217728);if(null!==n)rc(n,e,134217728,nc());qc(e,134217728)}},Tn=function(e){if(13===e.tag){var n=tc(e),t=Pa(e,n);if(null!==t)rc(t,e,n,nc());qc(e,n)}},En=function(){return Sn},Cn=function(e,n){var t=Sn;try{return Sn=e,n()}finally{Sn=t}},xe=function(e,n,t){switch(n){case"input":if(Z(e,t),n=t.name,"radio"===t.type&&null!=n){for(t=e;t.parentNode;)t=t.parentNode;for(t=t.querySelectorAll("input[name="+JSON.stringify(""+n)+'][type="radio"]'),n=0;n<t.length;n++){var r=t[n];if(r!==e&&r.form===e.form){var o=xo(r);if(!o)throw Error(a(90));q(r),Z(r,o)}}}break;case"textarea":ae(e,t);break;case"select":null!=(n=t.value)&&te(e,!!t.multiple,n,!1)}},Ae=uc,Ie=dc;var nu={usingClientEntryPoint:!1,Events:[So,wo,xo,Ce,_e,uc]},tu={findFiberByHostInstance:vo,bundleType:0,version:"18.2.0",rendererPackageName:"react-dom"},ru={bundleType:tu.bundleType,version:tu.version,rendererPackageName:tu.rendererPackageName,rendererConfig:tu.rendererConfig,overrideHookState:null,overrideHookStateDeletePath:null,overrideHookStateRenamePath:null,overrideProps:null,overridePropsDeletePath:null,overridePropsRenamePath:null,setErrorHandler:null,setSuspenseHandler:null,scheduleUpdate:null,currentDispatcherRef:S.ReactCurrentDispatcher,findHostInstanceByFiber:function(e){return null===(e=We(e))?null:e.stateNode},findFiberByHostInstance:tu.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 ou=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!ou.isDisabled&&ou.supportsFiber)try{on=ou.inject(ru),an=ou}catch(ue){}}n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=nu,n.createPortal=function(e,n){var t=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;if(!Qc(n))throw Error(a(200));return function(e,n,t){var r=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null;return{$$typeof:x,key:null==r?null:""+r,children:e,containerInfo:n,implementation:t}}(e,n,null,t)},n.createRoot=function(e,n){if(!Qc(e))throw Error(a(299));var t=!1,r="",o=Yc;return null!=n&&(!0===n.unstable_strictMode&&(t=!0),void 0!==n.identifierPrefix&&(r=n.identifierPrefix),void 0!==n.onRecoverableError&&(o=n.onRecoverableError)),n=Uc(e,1,!1,null,0,t,0,r,o),e[go]=n.current,Vr(8===e.nodeType?e.parentNode:e),new Kc(n)},n.findDOMNode=function(e){if(null==e)return null;if(1===e.nodeType)return e;var n=e._reactInternals;if(void 0===n){if("function"==typeof e.render)throw Error(a(188));throw e=Object.keys(e).join(","),Error(a(268,e))}return e=null===(e=We(n))?null:e.stateNode},n.flushSync=function(e){return dc(e)},n.hydrate=function(e,n,t){if(!Zc(n))throw Error(a(200));return eu(null,e,n,!0,t)},n.hydrateRoot=function(e,n,t){if(!Qc(e))throw Error(a(405));var r=null!=t&&t.hydratedSources||null,o=!1,i="",s=Yc;if(null!=t&&(!0===t.unstable_strictMode&&(o=!0),void 0!==t.identifierPrefix&&(i=t.identifierPrefix),void 0!==t.onRecoverableError&&(s=t.onRecoverableError)),n=zc(n,null,e,1,null!=t?t:null,o,0,i,s),e[go]=n.current,Vr(e),r)for(e=0;e<r.length;e++)o=(o=(t=r[e])._getVersion)(t._source),null==n.mutableSourceEagerHydrationData?n.mutableSourceEagerHydrationData=[t,o]:n.mutableSourceEagerHydrationData.push(t,o);return new Xc(n)},n.render=function(e,n,t){if(!Zc(n))throw Error(a(200));return eu(null,e,n,!1,t)},n.unmountComponentAtNode=function(e){if(!Zc(e))throw Error(a(40));return!!e._reactRootContainer&&(dc((function(){eu(null,null,e,!1,(function(){e._reactRootContainer=null,e[go]=null}))})),!0)},n.unstable_batchedUpdates=uc,n.unstable_renderSubtreeIntoContainer=function(e,n,t,r){if(!Zc(t))throw Error(a(200));if(null==e||void 0===e._reactInternals)throw Error(a(38));return eu(e,n,t,!1,r)},n.version="18.2.0-next-9e3b772b8-20220608"},8352:(e,n,t)=>{"use strict";var r=t(7104);n.createRoot=r.createRoot,n.hydrateRoot=r.hydrateRoot},7104:(e,n,t)=>{"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(n){console.error(n)}}(),e.exports=t(9516)},448:e=>{var n="undefined"!=typeof Element,t="function"==typeof Map,r="function"==typeof Set,o="function"==typeof ArrayBuffer&&!!ArrayBuffer.isView;function a(e,i){if(e===i)return!0;if(e&&i&&"object"==typeof e&&"object"==typeof i){if(e.constructor!==i.constructor)return!1;var s,l,c,u;if(Array.isArray(e)){if((s=e.length)!=i.length)return!1;for(l=s;0!=l--;)if(!a(e[l],i[l]))return!1;return!0}if(t&&e instanceof Map&&i instanceof Map){if(e.size!==i.size)return!1;for(u=e.entries();!(l=u.next()).done;)if(!i.has(l.value[0]))return!1;for(u=e.entries();!(l=u.next()).done;)if(!a(l.value[1],i.get(l.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();!(l=u.next()).done;)if(!i.has(l.value[0]))return!1;return!0}if(o&&ArrayBuffer.isView(e)&&ArrayBuffer.isView(i)){if((s=e.length)!=i.length)return!1;for(l=s;0!=l--;)if(e[l]!==i[l])return!1;return!0}if(e.constructor===RegExp)return e.source===i.source&&e.flags===i.flags;if(e.valueOf!==Object.prototype.valueOf)return e.valueOf()===i.valueOf();if(e.toString!==Object.prototype.toString)return e.toString()===i.toString();if((s=(c=Object.keys(e)).length)!==Object.keys(i).length)return!1;for(l=s;0!=l--;)if(!Object.prototype.hasOwnProperty.call(i,c[l]))return!1;if(n&&e instanceof Element)return!1;for(l=s;0!=l--;)if(("_owner"!==c[l]&&"__v"!==c[l]&&"__o"!==c[l]||!e.$$typeof)&&!a(e[c[l]],i[c[l]]))return!1;return!0}return e!=e&&i!=i}e.exports=function(e,n){try{return a(e,n)}catch(t){if((t.message||"").match(/stack|recursion/i))return console.warn("react-fast-compare cannot handle circular refs"),!1;throw t}}},2160:(e,n,t)=>{"use strict";t.d(n,{EN:()=>W,So:()=>J});var r=t(1504),o=t(3268),a=t.n(o),i=t(448),s=t.n(i),l=t(9328),c=t.n(l),u=t(1072),d=t.n(u);function p(){return p=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},p.apply(this,arguments)}function f(e,n){e.prototype=Object.create(n.prototype),e.prototype.constructor=e,m(e,n)}function m(e,n){return m=Object.setPrototypeOf||function(e,n){return e.__proto__=n,e},m(e,n)}function g(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n.indexOf(t=a[r])>=0||(o[t]=e[t]);return o}var h={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"]},S=Object.keys(h).map((function(e){return h[e]})),w={accesskey:"accessKey",charset:"charSet",class:"className",contenteditable:"contentEditable",contextmenu:"contextMenu","http-equiv":"httpEquiv",itemprop:"itemProp",tabindex:"tabIndex"},x=Object.keys(w).reduce((function(e,n){return e[w[n]]=n,e}),{}),k=function(e,n){for(var t=e.length-1;t>=0;t-=1){var r=e[t];if(Object.prototype.hasOwnProperty.call(r,n))return r[n]}return null},T=function(e){var n=k(e,h.TITLE),t=k(e,"titleTemplate");if(Array.isArray(n)&&(n=n.join("")),t&&n)return t.replace(/%s/g,(function(){return n}));var r=k(e,"defaultTitle");return n||r||void 0},E=function(e){return k(e,"onChangeClientState")||function(){}},C=function(e,n){return n.filter((function(n){return void 0!==n[e]})).map((function(n){return n[e]})).reduce((function(e,n){return p({},e,n)}),{})},_=function(e,n){return n.filter((function(e){return void 0!==e[h.BASE]})).map((function(e){return e[h.BASE]})).reverse().reduce((function(n,t){if(!n.length)for(var r=Object.keys(t),o=0;o<r.length;o+=1){var a=r[o].toLowerCase();if(-1!==e.indexOf(a)&&t[a])return n.concat(t)}return n}),[])},A=function(e,n,t){var r={};return t.filter((function(n){return!!Array.isArray(n[e])||(void 0!==n[e]&&console&&"function"==typeof console.warn&&console.warn("Helmet: "+e+' should be of type "Array". Instead found type "'+typeof n[e]+'"'),!1)})).map((function(n){return n[e]})).reverse().reduce((function(e,t){var o={};t.filter((function(e){for(var t,a=Object.keys(e),i=0;i<a.length;i+=1){var s=a[i],l=s.toLowerCase();-1===n.indexOf(l)||"rel"===t&&"canonical"===e[t].toLowerCase()||"rel"===l&&"stylesheet"===e[l].toLowerCase()||(t=l),-1===n.indexOf(s)||"innerHTML"!==s&&"cssText"!==s&&"itemprop"!==s||(t=s)}if(!t||!e[t])return!1;var c=e[t].toLowerCase();return r[t]||(r[t]={}),o[t]||(o[t]={}),!r[t][c]&&(o[t][c]=!0,!0)})).reverse().forEach((function(n){return e.push(n)}));for(var a=Object.keys(o),i=0;i<a.length;i+=1){var s=a[i],l=p({},r[s],o[s]);r[s]=l}return e}),[]).reverse()},I=function(e,n){if(Array.isArray(e)&&e.length)for(var t=0;t<e.length;t+=1)if(e[t][n])return!0;return!1},P=function(e){return Array.isArray(e)?e.join(""):e},L=function(e,n){return Array.isArray(e)?e.reduce((function(e,t){return function(e,n){for(var t=Object.keys(e),r=0;r<t.length;r+=1)if(n[t[r]]&&n[t[r]].includes(e[t[r]]))return!0;return!1}(t,n)?e.priority.push(t):e.default.push(t),e}),{priority:[],default:[]}):{default:e}},R=function(e,n){var t;return p({},e,((t={})[n]=void 0,t))},N=[h.NOSCRIPT,h.SCRIPT,h.STYLE],O=function(e,n){return void 0===n&&(n=!0),!1===n?String(e):String(e).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;")},F=function(e){return Object.keys(e).reduce((function(n,t){var r=void 0!==e[t]?t+'="'+e[t]+'"':""+t;return n?n+" "+r:r}),"")},j=function(e,n){return void 0===n&&(n={}),Object.keys(e).reduce((function(n,t){return n[w[t]||t]=e[t],n}),n)},D=function(e,n){return n.map((function(n,t){var o,a=((o={key:t})["data-rh"]=!0,o);return Object.keys(n).forEach((function(e){var t=w[e]||e;"innerHTML"===t||"cssText"===t?a.dangerouslySetInnerHTML={__html:n.innerHTML||n.cssText}:a[t]=n[e]})),r.createElement(e,a)}))},M=function(e,n,t){switch(e){case h.TITLE:return{toComponent:function(){return t=n.titleAttributes,(o={key:e=n.title})["data-rh"]=!0,a=j(t,o),[r.createElement(h.TITLE,a,e)];var e,t,o,a},toString:function(){return function(e,n,t,r){var o=F(t),a=P(n);return o?"<"+e+' data-rh="true" '+o+">"+O(a,r)+"</"+e+">":"<"+e+' data-rh="true">'+O(a,r)+"</"+e+">"}(e,n.title,n.titleAttributes,t)}};case"bodyAttributes":case"htmlAttributes":return{toComponent:function(){return j(n)},toString:function(){return F(n)}};default:return{toComponent:function(){return D(e,n)},toString:function(){return function(e,n,t){return n.reduce((function(n,r){var o=Object.keys(r).filter((function(e){return!("innerHTML"===e||"cssText"===e)})).reduce((function(e,n){var o=void 0===r[n]?n:n+'="'+O(r[n],t)+'"';return e?e+" "+o:o}),""),a=r.innerHTML||r.cssText||"",i=-1===N.indexOf(e);return n+"<"+e+' data-rh="true" '+o+(i?"/>":">"+a+"</"+e+">")}),"")}(e,n,t)}}}},B=function(e){var n=e.baseTag,t=e.bodyAttributes,r=e.encode,o=e.htmlAttributes,a=e.noscriptTags,i=e.styleTags,s=e.title,l=void 0===s?"":s,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 n=e.linkTags,t=e.scriptTags,r=e.encode,o=L(e.metaTags,v),a=L(n,y),i=L(t,b);return{priorityMethods:{toComponent:function(){return[].concat(D(h.META,o.priority),D(h.LINK,a.priority),D(h.SCRIPT,i.priority))},toString:function(){return M(h.META,o.priority,r)+" "+M(h.LINK,a.priority,r)+" "+M(h.SCRIPT,i.priority,r)}},metaTags:o.default,linkTags:a.default,scriptTags:i.default}}(e);f=m.priorityMethods,u=m.linkTags,d=m.metaTags,p=m.scriptTags}return{priority:f,base:M(h.BASE,n,r),bodyAttributes:M("bodyAttributes",t,r),htmlAttributes:M("htmlAttributes",o,r),link:M(h.LINK,u,r),meta:M(h.META,d,r),noscript:M(h.NOSCRIPT,a,r),script:M(h.SCRIPT,p,r),style:M(h.STYLE,i,r),title:M(h.TITLE,{title:l,titleAttributes:c},r)}},$=[],U=function(e,n){var t=this;void 0===n&&(n="undefined"!=typeof document),this.instances=[],this.value={setHelmet:function(e){t.context.helmet=e},helmetInstances:{get:function(){return t.canUseDOM?$:t.instances},add:function(e){(t.canUseDOM?$:t.instances).push(e)},remove:function(e){var n=(t.canUseDOM?$:t.instances).indexOf(e);(t.canUseDOM?$:t.instances).splice(n,1)}}},this.context=e,this.canUseDOM=n,n||(e.helmet=B({baseTag:[],bodyAttributes:{},encodeSpecialCharacters:!0,htmlAttributes:{},linkTags:[],metaTags:[],noscriptTags:[],scriptTags:[],styleTags:[],title:"",titleAttributes:{}}))},V=r.createContext({}),z=a().shape({setHelmet:a().func,helmetInstances:a().shape({get:a().func,add:a().func,remove:a().func})}),H="undefined"!=typeof document,W=function(e){function n(t){var r;return(r=e.call(this,t)||this).helmetData=new U(r.props.context,n.canUseDOM),r}return f(n,e),n.prototype.render=function(){return r.createElement(V.Provider,{value:this.helmetData.value},this.props.children)},n}(r.Component);W.canUseDOM=H,W.propTypes={context:a().shape({helmet:a().shape()}),children:a().node.isRequired},W.defaultProps={context:{}},W.displayName="HelmetProvider";var G=function(e,n){var t,r=document.head||document.querySelector(h.HEAD),o=r.querySelectorAll(e+"[data-rh]"),a=[].slice.call(o),i=[];return n&&n.length&&n.forEach((function(n){var r=document.createElement(e);for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&("innerHTML"===o?r.innerHTML=n.innerHTML:"cssText"===o?r.styleSheet?r.styleSheet.cssText=n.cssText:r.appendChild(document.createTextNode(n.cssText)):r.setAttribute(o,void 0===n[o]?"":n[o]));r.setAttribute("data-rh","true"),a.some((function(e,n){return t=n,r.isEqualNode(e)}))?a.splice(t,1):i.push(r)})),a.forEach((function(e){return e.parentNode.removeChild(e)})),i.forEach((function(e){return r.appendChild(e)})),{oldTags:a,newTags:i}},q=function(e,n){var t=document.getElementsByTagName(e)[0];if(t){for(var r=t.getAttribute("data-rh"),o=r?r.split(","):[],a=[].concat(o),i=Object.keys(n),s=0;s<i.length;s+=1){var l=i[s],c=n[l]||"";t.getAttribute(l)!==c&&t.setAttribute(l,c),-1===o.indexOf(l)&&o.push(l);var u=a.indexOf(l);-1!==u&&a.splice(u,1)}for(var d=a.length-1;d>=0;d-=1)t.removeAttribute(a[d]);o.length===a.length?t.removeAttribute("data-rh"):t.getAttribute("data-rh")!==i.join(",")&&t.setAttribute("data-rh",i.join(","))}},Y=function(e,n){var t=e.baseTag,r=e.htmlAttributes,o=e.linkTags,a=e.metaTags,i=e.noscriptTags,s=e.onChangeClientState,l=e.scriptTags,c=e.styleTags,u=e.title,d=e.titleAttributes;q(h.BODY,e.bodyAttributes),q(h.HTML,r),function(e,n){void 0!==e&&document.title!==e&&(document.title=P(e)),q(h.TITLE,n)}(u,d);var p={baseTag:G(h.BASE,t),linkTags:G(h.LINK,o),metaTags:G(h.META,a),noscriptTags:G(h.NOSCRIPT,i),scriptTags:G(h.SCRIPT,l),styleTags:G(h.STYLE,c)},f={},m={};Object.keys(p).forEach((function(e){var n=p[e],t=n.newTags,r=n.oldTags;t.length&&(f[e]=t),r.length&&(m[e]=p[e].oldTags)})),n&&n(),s(e,f,m)},K=null,X=function(e){function n(){for(var n,t=arguments.length,r=new Array(t),o=0;o<t;o++)r[o]=arguments[o];return(n=e.call.apply(e,[this].concat(r))||this).rendered=!1,n}f(n,e);var t=n.prototype;return t.shouldComponentUpdate=function(e){return!d()(e,this.props)},t.componentDidUpdate=function(){this.emitChange()},t.componentWillUnmount=function(){this.props.context.helmetInstances.remove(this),this.emitChange()},t.emitChange=function(){var e,n,t=this.props.context,r=t.setHelmet,o=null,a=(e=t.helmetInstances.get().map((function(e){var n=p({},e.props);return delete n.context,n})),{baseTag:_(["href"],e),bodyAttributes:C("bodyAttributes",e),defer:k(e,"defer"),encode:k(e,"encodeSpecialCharacters"),htmlAttributes:C("htmlAttributes",e),linkTags:A(h.LINK,["rel","href"],e),metaTags:A(h.META,["name","charset","http-equiv","property","itemprop"],e),noscriptTags:A(h.NOSCRIPT,["innerHTML"],e),onChangeClientState:E(e),scriptTags:A(h.SCRIPT,["src","innerHTML"],e),styleTags:A(h.STYLE,["cssText"],e),title:T(e),titleAttributes:C("titleAttributes",e),prioritizeSeoTags:I(e,"prioritizeSeoTags")});W.canUseDOM?(n=a,K&&cancelAnimationFrame(K),n.defer?K=requestAnimationFrame((function(){Y(n,(function(){K=null}))})):(Y(n),K=null)):B&&(o=B(a)),r(o)},t.init=function(){this.rendered||(this.rendered=!0,this.props.context.helmetInstances.add(this),this.emitChange())},t.render=function(){return this.init(),null},n}(r.Component);X.propTypes={context:z.isRequired},X.displayName="HelmetDispatcher";var Q=["children"],Z=["children"],J=function(e){function n(){return e.apply(this,arguments)||this}f(n,e);var t=n.prototype;return t.shouldComponentUpdate=function(e){return!s()(R(this.props,"helmetData"),R(e,"helmetData"))},t.mapNestedChildrenToProps=function(e,n){if(!n)return null;switch(e.type){case h.SCRIPT:case h.NOSCRIPT:return{innerHTML:n};case h.STYLE:return{cssText:n};default:throw new Error("<"+e.type+" /> elements are self-closing and can not contain children. Refer to our API for more information.")}},t.flattenArrayTypeChildren=function(e){var n,t=e.child,r=e.arrayTypeChildren;return p({},r,((n={})[t.type]=[].concat(r[t.type]||[],[p({},e.newChildProps,this.mapNestedChildrenToProps(t,e.nestedChildren))]),n))},t.mapObjectTypeChildren=function(e){var n,t,r=e.child,o=e.newProps,a=e.newChildProps,i=e.nestedChildren;switch(r.type){case h.TITLE:return p({},o,((n={})[r.type]=i,n.titleAttributes=p({},a),n));case h.BODY:return p({},o,{bodyAttributes:p({},a)});case h.HTML:return p({},o,{htmlAttributes:p({},a)});default:return p({},o,((t={})[r.type]=p({},a),t))}},t.mapArrayTypeChildrenToProps=function(e,n){var t=p({},n);return Object.keys(e).forEach((function(n){var r;t=p({},t,((r={})[n]=e[n],r))})),t},t.warnOnInvalidChildren=function(e,n){return c()(S.some((function(n){return e.type===n})),"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 "+S.join(", ")+" are allowed. Helmet does not support rendering <"+e.type+"> elements. Refer to our API for more information."),c()(!n||"string"==typeof n||Array.isArray(n)&&!n.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},t.mapChildrenToProps=function(e,n){var t=this,o={};return r.Children.forEach(e,(function(e){if(e&&e.props){var r=e.props,a=r.children,i=g(r,Q),s=Object.keys(i).reduce((function(e,n){return e[x[n]||n]=i[n],e}),{}),l=e.type;switch("symbol"==typeof l?l=l.toString():t.warnOnInvalidChildren(e,a),l){case h.FRAGMENT:n=t.mapChildrenToProps(a,n);break;case h.LINK:case h.META:case h.NOSCRIPT:case h.SCRIPT:case h.STYLE:o=t.flattenArrayTypeChildren({child:e,arrayTypeChildren:o,newChildProps:s,nestedChildren:a});break;default:n=t.mapObjectTypeChildren({child:e,newProps:n,newChildProps:s,nestedChildren:a})}}})),this.mapArrayTypeChildrenToProps(o,n)},t.render=function(){var e=this.props,n=e.children,t=g(e,Z),o=p({},t),a=t.helmetData;return n&&(o=this.mapChildrenToProps(n,o)),!a||a instanceof U||(a=new U(a.context,a.instances)),a?r.createElement(X,p({},o,{context:a.value,helmetData:void 0})):r.createElement(V.Consumer,null,(function(e){return r.createElement(X,p({},o,{context:e}))}))},n}(r.Component);J.propTypes={base:a().object,bodyAttributes:a().object,children:a().oneOfType([a().arrayOf(a().node),a().node]),defaultTitle:a().string,defer:a().bool,encodeSpecialCharacters:a().bool,htmlAttributes:a().object,link:a().arrayOf(a().object),meta:a().arrayOf(a().object),noscript:a().arrayOf(a().object),onChangeClientState:a().func,script:a().arrayOf(a().object),style:a().arrayOf(a().object),title:a().string,titleAttributes:a().object,titleTemplate:a().string,prioritizeSeoTags:a().bool,helmetData:a().object},J.defaultProps={defer:!0,encodeSpecialCharacters:!0,prioritizeSeoTags:!1},J.displayName="Helmet"},9764:(e,n)=>{"use strict";var t="function"==typeof Symbol&&Symbol.for,r=t?Symbol.for("react.element"):60103,o=t?Symbol.for("react.portal"):60106,a=t?Symbol.for("react.fragment"):60107,i=t?Symbol.for("react.strict_mode"):60108,s=t?Symbol.for("react.profiler"):60114,l=t?Symbol.for("react.provider"):60109,c=t?Symbol.for("react.context"):60110,u=t?Symbol.for("react.async_mode"):60111,d=t?Symbol.for("react.concurrent_mode"):60111,p=t?Symbol.for("react.forward_ref"):60112,f=t?Symbol.for("react.suspense"):60113,m=t?Symbol.for("react.suspense_list"):60120,g=t?Symbol.for("react.memo"):60115,h=t?Symbol.for("react.lazy"):60116,y=t?Symbol.for("react.block"):60121,b=t?Symbol.for("react.fundamental"):60117,v=t?Symbol.for("react.responder"):60118,S=t?Symbol.for("react.scope"):60119;function w(e){if("object"==typeof e&&null!==e){var n=e.$$typeof;switch(n){case r:switch(e=e.type){case u:case d:case a:case s:case i:case f:return e;default:switch(e=e&&e.$$typeof){case c:case p:case h:case g:case l:return e;default:return n}}case o:return n}}}function x(e){return w(e)===d}n.AsyncMode=u,n.ConcurrentMode=d,n.ContextConsumer=c,n.ContextProvider=l,n.Element=r,n.ForwardRef=p,n.Fragment=a,n.Lazy=h,n.Memo=g,n.Portal=o,n.Profiler=s,n.StrictMode=i,n.Suspense=f,n.isAsyncMode=function(e){return x(e)||w(e)===u},n.isConcurrentMode=x,n.isContextConsumer=function(e){return w(e)===c},n.isContextProvider=function(e){return w(e)===l},n.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r},n.isForwardRef=function(e){return w(e)===p},n.isFragment=function(e){return w(e)===a},n.isLazy=function(e){return w(e)===h},n.isMemo=function(e){return w(e)===g},n.isPortal=function(e){return w(e)===o},n.isProfiler=function(e){return w(e)===s},n.isStrictMode=function(e){return w(e)===i},n.isSuspense=function(e){return w(e)===f},n.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===a||e===d||e===s||e===i||e===f||e===m||"object"==typeof e&&null!==e&&(e.$$typeof===h||e.$$typeof===g||e.$$typeof===l||e.$$typeof===c||e.$$typeof===p||e.$$typeof===b||e.$$typeof===v||e.$$typeof===S||e.$$typeof===y)},n.typeOf=w},2168:(e,n,t)=>{"use strict";e.exports=t(9764)},8852:(e,n,t)=>{"use strict";function r(e,n){e.prototype=Object.create(n.prototype),e.prototype.constructor=e,e.__proto__=n}function o(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function i(){return i=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},i.apply(this,arguments)}var s=t(1504),l=t(3268),c=[],u=[];function d(e){var n=e(),t={loading:!0,loaded:null,error:null};return t.promise=n.then((function(e){return t.loading=!1,t.loaded=e,e})).catch((function(e){throw t.loading=!1,t.error=e,e})),t}function p(e){var n={loading:!1,loaded:{},error:null},t=[];try{Object.keys(e).forEach((function(r){var o=d(e[r]);o.loading?n.loading=!0:(n.loaded[r]=o.loaded,n.error=o.error),t.push(o.promise),o.promise.then((function(e){n.loaded[r]=e})).catch((function(e){n.error=e}))}))}catch(r){n.error=r}return n.promise=Promise.all(t).then((function(e){return n.loading=!1,e})).catch((function(e){throw n.loading=!1,e})),n}function f(e,n){return s.createElement((t=e)&&t.__esModule?t.default:t,n);var t}function m(e,n){var d,p;if(!n.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},n),g=null;function h(){return g||(g=e(m.loader)),g.promise}return c.push(h),"function"==typeof m.webpack&&u.push((function(){if((0,m.webpack)().every((function(e){return void 0!==e&&void 0!==t.m[e]})))return h()})),p=d=function(n){function t(t){var r;return a(o(o(r=n.call(this,t)||this)),"retry",(function(){r.setState({error:null,loading:!0,timedOut:!1}),g=e(m.loader),r._loadModule()})),h(),r.state={error:g.error,pastDelay:!1,timedOut:!1,loading:g.loading,loaded:g.loaded},r}r(t,n),t.preload=function(){return h()};var i=t.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(n){e.context.loadable.report(n)})),g.loading){var n=function(n){e._mounted&&e.setState(n)};"number"==typeof m.delay&&(0===m.delay?this.setState({pastDelay:!0}):this._delay=setTimeout((function(){n({pastDelay:!0})}),m.delay)),"number"==typeof m.timeout&&(this._timeout=setTimeout((function(){n({timedOut:!0})}),m.timeout));var t=function(){n({error:g.error,loaded:g.loaded,loading:g.loading}),e._clearTimeouts()};g.promise.then((function(){return t(),null})).catch((function(e){return t(),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?s.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},t}(s.Component),a(d,"contextTypes",{loadable:l.shape({report:l.func.isRequired})}),p}function g(e){return m(d,e)}g.Map=function(e){if("function"!=typeof e.render)throw new Error("LoadableMap requires a `render(loaded, props)` function");return m(p,e)};var h=function(e){function n(){return e.apply(this,arguments)||this}r(n,e);var t=n.prototype;return t.getChildContext=function(){return{loadable:{report:this.props.report}}},t.render=function(){return s.Children.only(this.props.children)},n}(s.Component);function y(e){for(var n=[];e.length;){var t=e.pop();n.push(t())}return Promise.all(n).then((function(){if(e.length)return y(e)}))}a(h,"propTypes",{report:l.func.isRequired}),a(h,"childContextTypes",{loadable:l.shape({report:l.func.isRequired}).isRequired}),g.Capture=h,g.preloadAll=function(){return new Promise((function(e,n){y(c).then(e,n)}))},g.preloadReady=function(){return new Promise((function(e,n){y(u).then(e,e)}))},e.exports=g},5464:(e,n,t)=>{"use strict";t.d(n,{C:()=>i,k:()=>s});var r=t(5592),o=t(6404),a=t(1504);function i(e,n,t){return void 0===t&&(t=[]),e.some((function(e){var o=e.path?(0,r.ot)(n,e):t.length?t[t.length-1].match:r.E5.computeRootMatch(n);return o&&(t.push({route:e,match:o}),e.routes&&i(e.routes,n,t)),o})),t}function s(e,n,t){return void 0===n&&(n={}),void 0===t&&(t={}),e?a.createElement(r.Wk,t,e.map((function(e,t){return a.createElement(r.kX,{key:e.key||t,path:e.path,exact:e.exact,strict:e.strict,render:function(t){return e.render?e.render((0,o.c)({},t,{},n,{route:e})):a.createElement(e.component,(0,o.c)({},t,n,{route:e}))}})}))):null}},440:(e,n,t)=>{"use strict";t.d(n,{Af:()=>v,cH:()=>h,kn:()=>u});var r=t(5592),o=t(9948),a=t(1504),i=t(8064),s=t(6404),l=t(4384),c=t(6136),u=function(e){function n(){for(var n,t=arguments.length,r=new Array(t),o=0;o<t;o++)r[o]=arguments[o];return(n=e.call.apply(e,[this].concat(r))||this).history=(0,i.iU)(n.props),n}return(0,o.c)(n,e),n.prototype.render=function(){return a.createElement(r.E5,{history:this.history,children:this.props.children})},n}(a.Component);a.Component;var d=function(e,n){return"function"==typeof e?e(n):e},p=function(e,n){return"string"==typeof e?(0,i.gh)(e,null,null,n):e},f=function(e){return e},m=a.forwardRef;void 0===m&&(m=f);var g=m((function(e,n){var t=e.innerRef,r=e.navigate,o=e.onClick,i=(0,l.c)(e,["innerRef","navigate","onClick"]),c=i.target,u=(0,s.c)({},i,{onClick:function(e){try{o&&o(e)}catch(n){throw e.preventDefault(),n}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&&n||t,a.createElement("a",u)}));var h=m((function(e,n){var t=e.component,o=void 0===t?g:t,u=e.replace,h=e.to,y=e.innerRef,b=(0,l.c)(e,["component","replace","to","innerRef"]);return a.createElement(r.Os.Consumer,null,(function(e){e||(0,c.c)(!1);var t=e.history,r=p(d(h,e.location),e.location),l=r?t.createHref(r):"",g=(0,s.c)({},b,{href:l,navigate:function(){var n=d(h,e.location),r=(0,i.Ep)(e.location)===(0,i.Ep)(p(n));(u||r?t.replace:t.push)(n)}});return f!==m?g.ref=n||y:g.innerRef=y,a.createElement(o,g)}))})),y=function(e){return e},b=a.forwardRef;void 0===b&&(b=y);var v=b((function(e,n){var t=e["aria-current"],o=void 0===t?"page":t,i=e.activeClassName,u=void 0===i?"active":i,f=e.activeStyle,m=e.className,g=e.exact,v=e.isActive,S=e.location,w=e.sensitive,x=e.strict,k=e.style,T=e.to,E=e.innerRef,C=(0,l.c)(e,["aria-current","activeClassName","activeStyle","className","exact","isActive","location","sensitive","strict","style","to","innerRef"]);return a.createElement(r.Os.Consumer,null,(function(e){e||(0,c.c)(!1);var t=S||e.location,i=p(d(T,t),t),l=i.pathname,_=l&&l.replace(/([.+*?=^!:${}()[\]|/\\])/g,"\\$1"),A=_?(0,r.ot)(t.pathname,{path:_,exact:g,sensitive:w,strict:x}):null,I=!!(v?v(A,t):A),P="function"==typeof m?m(I):m,L="function"==typeof k?k(I):k;I&&(P=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return n.filter((function(e){return e})).join(" ")}(P,u),L=(0,s.c)({},L,f));var R=(0,s.c)({"aria-current":I&&o||null,className:P,style:L,to:i},C);return y!==b?R.ref=n||E:R.innerRef=E,a.createElement(h,R)}))}))},5592:(e,n,t)=>{"use strict";t.d(n,{E5:()=>v,IT:()=>N,Os:()=>b,Uz:()=>R,Wk:()=>P,kX:()=>T,ot:()=>k});var r=t(9948),o=t(1504),a=t(3268),i=t.n(a),s=t(8064),l=t(6136),c=t(6404),u=t(8216),d=t.n(u),p=(t(2168),t(4384)),f=(t(4792),1073741823),m="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:void 0!==t.g?t.g:{};var g=o.createContext||function(e,n){var t,a,s="__create-react-context-"+function(){var e="__global_unique_id__";return m[e]=(m[e]||0)+1}()+"__",l=function(e){function t(){for(var n,t,r,o=arguments.length,a=new Array(o),i=0;i<o;i++)a[i]=arguments[i];return(n=e.call.apply(e,[this].concat(a))||this).emitter=(t=n.props.value,r=[],{on:function(e){r.push(e)},off:function(e){r=r.filter((function(n){return n!==e}))},get:function(){return t},set:function(e,n){t=e,r.forEach((function(e){return e(t,n)}))}}),n}(0,r.c)(t,e);var o=t.prototype;return o.getChildContext=function(){var e;return(e={})[s]=this.emitter,e},o.componentWillReceiveProps=function(e){if(this.props.value!==e.value){var t,r=this.props.value,o=e.value;((a=r)===(i=o)?0!==a||1/a==1/i:a!=a&&i!=i)?t=0:(t="function"==typeof n?n(r,o):f,0!==(t|=0)&&this.emitter.set(e.value,t))}var a,i},o.render=function(){return this.props.children},t}(o.Component);l.childContextTypes=((t={})[s]=i().object.isRequired,t);var c=function(n){function t(){for(var e,t=arguments.length,r=new Array(t),o=0;o<t;o++)r[o]=arguments[o];return(e=n.call.apply(n,[this].concat(r))||this).observedBits=void 0,e.state={value:e.getValue()},e.onUpdate=function(n,t){0!=((0|e.observedBits)&t)&&e.setState({value:e.getValue()})},e}(0,r.c)(t,n);var o=t.prototype;return o.componentWillReceiveProps=function(e){var n=e.observedBits;this.observedBits=null==n?f:n},o.componentDidMount=function(){this.context[s]&&this.context[s].on(this.onUpdate);var e=this.props.observedBits;this.observedBits=null==e?f:e},o.componentWillUnmount=function(){this.context[s]&&this.context[s].off(this.onUpdate)},o.getValue=function(){return this.context[s]?this.context[s].get():e},o.render=function(){return(e=this.props.children,Array.isArray(e)?e[0]:e)(this.state.value);var e},t}(o.Component);return c.contextTypes=((a={})[s]=i().object,a),{Provider:l,Consumer:c}},h=function(e){var n=g();return n.displayName=e,n},y=h("Router-History"),b=h("Router"),v=function(e){function n(n){var t;return(t=e.call(this,n)||this).state={location:n.history.location},t._isMounted=!1,t._pendingLocation=null,n.staticContext||(t.unlisten=n.history.listen((function(e){t._pendingLocation=e}))),t}(0,r.c)(n,e),n.computeRootMatch=function(e){return{path:"/",url:"/",params:{},isExact:"/"===e}};var t=n.prototype;return t.componentDidMount=function(){var e=this;this._isMounted=!0,this.unlisten&&this.unlisten(),this.props.staticContext||(this.unlisten=this.props.history.listen((function(n){e._isMounted&&e.setState({location:n})}))),this._pendingLocation&&this.setState({location:this._pendingLocation})},t.componentWillUnmount=function(){this.unlisten&&(this.unlisten(),this._isMounted=!1,this._pendingLocation=null)},t.render=function(){return o.createElement(b.Provider,{value:{history:this.props.history,location:this.state.location,match:n.computeRootMatch(this.state.location.pathname),staticContext:this.props.staticContext}},o.createElement(y.Provider,{children:this.props.children||null,value:this.props.history}))},n}(o.Component);o.Component;o.Component;var S={},w=1e4,x=0;function k(e,n){void 0===n&&(n={}),("string"==typeof n||Array.isArray(n))&&(n={path:n});var t=n,r=t.path,o=t.exact,a=void 0!==o&&o,i=t.strict,s=void 0!==i&&i,l=t.sensitive,c=void 0!==l&&l;return[].concat(r).reduce((function(n,t){if(!t&&""!==t)return null;if(n)return n;var r=function(e,n){var t=""+n.end+n.strict+n.sensitive,r=S[t]||(S[t]={});if(r[e])return r[e];var o=[],a={regexp:d()(e,o,n),keys:o};return x<w&&(r[e]=a,x++),a}(t,{end:a,strict:s,sensitive:c}),o=r.regexp,i=r.keys,l=o.exec(e);if(!l)return null;var u=l[0],p=l.slice(1),f=e===u;return a&&!f?null:{path:t,url:"/"===t&&""===u?"/":u,isExact:f,params:i.reduce((function(e,n,t){return e[n.name]=p[t],e}),{})}}),null)}var T=function(e){function n(){return e.apply(this,arguments)||this}return(0,r.c)(n,e),n.prototype.render=function(){var e=this;return o.createElement(b.Consumer,null,(function(n){n||(0,l.c)(!1);var t=e.props.location||n.location,r=e.props.computedMatch?e.props.computedMatch:e.props.path?k(t.pathname,e.props):n.match,a=(0,c.c)({},n,{location:t,match:r}),i=e.props,s=i.children,u=i.component,d=i.render;return Array.isArray(s)&&function(e){return 0===o.Children.count(e)}(s)&&(s=null),o.createElement(b.Provider,{value:a},a.match?s?"function"==typeof s?s(a):s:u?o.createElement(u,a):d?d(a):null:"function"==typeof s?s(a):null)}))},n}(o.Component);function E(e){return"/"===e.charAt(0)?e:"/"+e}function C(e,n){if(!e)return n;var t=E(e);return 0!==n.pathname.indexOf(t)?n:(0,c.c)({},n,{pathname:n.pathname.substr(t.length)})}function _(e){return"string"==typeof e?e:(0,s.Ep)(e)}function A(e){return function(){(0,l.c)(!1)}}function I(){}o.Component;var P=function(e){function n(){return e.apply(this,arguments)||this}return(0,r.c)(n,e),n.prototype.render=function(){var e=this;return o.createElement(b.Consumer,null,(function(n){n||(0,l.c)(!1);var t,r,a=e.props.location||n.location;return o.Children.forEach(e.props.children,(function(e){if(null==r&&o.isValidElement(e)){t=e;var i=e.props.path||e.props.from;r=i?k(a.pathname,(0,c.c)({},e.props,{path:i})):n.match}})),r?o.cloneElement(t,{location:a,computedMatch:r}):null}))},n}(o.Component);var L=o.useContext;function R(){return L(y)}function N(){return L(b).location}},8216:(e,n,t)=>{var r=t(9600);e.exports=f,e.exports.parse=a,e.exports.compile=function(e,n){return s(a(e,n),n)},e.exports.tokensToFunction=s,e.exports.tokensToRegExp=p;var o=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function a(e,n){for(var t,r=[],a=0,i=0,s="",u=n&&n.delimiter||"/";null!=(t=o.exec(e));){var d=t[0],p=t[1],f=t.index;if(s+=e.slice(i,f),i=f+d.length,p)s+=p[1];else{var m=e[i],g=t[2],h=t[3],y=t[4],b=t[5],v=t[6],S=t[7];s&&(r.push(s),s="");var w=null!=g&&null!=m&&m!==g,x="+"===v||"*"===v,k="?"===v||"*"===v,T=t[2]||u,E=y||b;r.push({name:h||a++,prefix:g||"",delimiter:T,optional:k,repeat:x,partial:w,asterisk:!!S,pattern:E?c(E):S?".*":"[^"+l(T)+"]+?"})}}return i<e.length&&(s+=e.substr(i)),s&&r.push(s),r}function i(e){return encodeURI(e).replace(/[\/?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()}))}function s(e,n){for(var t=new Array(e.length),o=0;o<e.length;o++)"object"==typeof e[o]&&(t[o]=new RegExp("^(?:"+e[o].pattern+")$",d(n)));return function(n,o){for(var a="",s=n||{},l=(o||{}).pretty?i:encodeURIComponent,c=0;c<e.length;c++){var u=e[c];if("string"!=typeof u){var d,p=s[u.name];if(null==p){if(u.optional){u.partial&&(a+=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=l(p[f]),!t[c].test(d))throw new TypeError('Expected all "'+u.name+'" to match "'+u.pattern+'", but received `'+JSON.stringify(d)+"`");a+=(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()})):l(p),!t[c].test(d))throw new TypeError('Expected "'+u.name+'" to match "'+u.pattern+'", but received "'+d+'"');a+=u.prefix+d}}else a+=u}return a}}function l(e){return e.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function c(e){return e.replace(/([=!:$\/()])/g,"\\$1")}function u(e,n){return e.keys=n,e}function d(e){return e&&e.sensitive?"":"i"}function p(e,n,t){r(n)||(t=n||t,n=[]);for(var o=(t=t||{}).strict,a=!1!==t.end,i="",s=0;s<e.length;s++){var c=e[s];if("string"==typeof c)i+=l(c);else{var p=l(c.prefix),f="(?:"+c.pattern+")";n.push(c),c.repeat&&(f+="(?:"+p+f+")*"),i+=f=c.optional?c.partial?p+"("+f+")?":"(?:"+p+"("+f+"))?":p+"("+f+")"}}var m=l(t.delimiter||"/"),g=i.slice(-m.length)===m;return o||(i=(g?i.slice(0,-m.length):i)+"(?:"+m+"(?=$))?"),i+=a?"$":o&&g?"":"(?="+m+"|$)",u(new RegExp("^"+i,d(t)),n)}function f(e,n,t){return r(n)||(t=n||t,n=[]),t=t||{},e instanceof RegExp?function(e,n){var t=e.source.match(/\((?!\?)/g);if(t)for(var r=0;r<t.length;r++)n.push({name:r,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return u(e,n)}(e,n):r(e)?function(e,n,t){for(var r=[],o=0;o<e.length;o++)r.push(f(e[o],n,t).source);return u(new RegExp("(?:"+r.join("|")+")",d(t)),n)}(e,n,t):function(e,n,t){return p(a(e,t),n,t)}(e,n,t)}},4808:(e,n,t)=>{"use strict";var r=t(1504),o=Symbol.for("react.element"),a=Symbol.for("react.fragment"),i=Object.prototype.hasOwnProperty,s=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,l={key:!0,ref:!0,__self:!0,__source:!0};function c(e,n,t){var r,a={},c=null,u=null;for(r in void 0!==t&&(c=""+t),void 0!==n.key&&(c=""+n.key),void 0!==n.ref&&(u=n.ref),n)i.call(n,r)&&!l.hasOwnProperty(r)&&(a[r]=n[r]);if(e&&e.defaultProps)for(r in n=e.defaultProps)void 0===a[r]&&(a[r]=n[r]);return{$$typeof:o,type:e,key:c,ref:u,props:a,_owner:s.current}}n.Fragment=a,n.jsx=c,n.jsxs=c},3028:(e,n)=>{"use strict";var t=Symbol.for("react.element"),r=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),a=Symbol.for("react.strict_mode"),i=Symbol.for("react.profiler"),s=Symbol.for("react.provider"),l=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(){}},g=Object.assign,h={};function y(e,n,t){this.props=e,this.context=n,this.refs=h,this.updater=t||m}function b(){}function v(e,n,t){this.props=e,this.context=n,this.refs=h,this.updater=t||m}y.prototype.isReactComponent={},y.prototype.setState=function(e,n){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,n,"setState")},y.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},b.prototype=y.prototype;var S=v.prototype=new b;S.constructor=v,g(S,y.prototype),S.isPureReactComponent=!0;var w=Array.isArray,x=Object.prototype.hasOwnProperty,k={current:null},T={key:!0,ref:!0,__self:!0,__source:!0};function E(e,n,r){var o,a={},i=null,s=null;if(null!=n)for(o in void 0!==n.ref&&(s=n.ref),void 0!==n.key&&(i=""+n.key),n)x.call(n,o)&&!T.hasOwnProperty(o)&&(a[o]=n[o]);var l=arguments.length-2;if(1===l)a.children=r;else if(1<l){for(var c=Array(l),u=0;u<l;u++)c[u]=arguments[u+2];a.children=c}if(e&&e.defaultProps)for(o in l=e.defaultProps)void 0===a[o]&&(a[o]=l[o]);return{$$typeof:t,type:e,key:i,ref:s,props:a,_owner:k.current}}function C(e){return"object"==typeof e&&null!==e&&e.$$typeof===t}var _=/\/+/g;function A(e,n){return"object"==typeof e&&null!==e&&null!=e.key?function(e){var n={"=":"=0",":":"=2"};return"$"+e.replace(/[=:]/g,(function(e){return n[e]}))}(""+e.key):n.toString(36)}function I(e,n,o,a,i){var s=typeof e;"undefined"!==s&&"boolean"!==s||(e=null);var l=!1;if(null===e)l=!0;else switch(s){case"string":case"number":l=!0;break;case"object":switch(e.$$typeof){case t:case r:l=!0}}if(l)return i=i(l=e),e=""===a?"."+A(l,0):a,w(i)?(o="",null!=e&&(o=e.replace(_,"$&/")+"/"),I(i,n,o,"",(function(e){return e}))):null!=i&&(C(i)&&(i=function(e,n){return{$$typeof:t,type:e.type,key:n,ref:e.ref,props:e.props,_owner:e._owner}}(i,o+(!i.key||l&&l.key===i.key?"":(""+i.key).replace(_,"$&/")+"/")+e)),n.push(i)),1;if(l=0,a=""===a?".":a+":",w(e))for(var c=0;c<e.length;c++){var u=a+A(s=e[c],c);l+=I(s,n,o,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;!(s=e.next()).done;)l+=I(s=s.value,n,o,u=a+A(s,c++),i);else if("object"===s)throw n=String(e),Error("Objects are not valid as a React child (found: "+("[object Object]"===n?"object with keys {"+Object.keys(e).join(", ")+"}":n)+"). If you meant to render a collection of children, use an array instead.");return l}function P(e,n,t){if(null==e)return e;var r=[],o=0;return I(e,r,"","",(function(e){return n.call(t,e,o++)})),r}function L(e){if(-1===e._status){var n=e._result;(n=n()).then((function(n){0!==e._status&&-1!==e._status||(e._status=1,e._result=n)}),(function(n){0!==e._status&&-1!==e._status||(e._status=2,e._result=n)})),-1===e._status&&(e._status=0,e._result=n)}if(1===e._status)return e._result.default;throw e._result}var R={current:null},N={transition:null},O={ReactCurrentDispatcher:R,ReactCurrentBatchConfig:N,ReactCurrentOwner:k};n.Children={map:P,forEach:function(e,n,t){P(e,(function(){n.apply(this,arguments)}),t)},count:function(e){var n=0;return P(e,(function(){n++})),n},toArray:function(e){return P(e,(function(e){return e}))||[]},only:function(e){if(!C(e))throw Error("React.Children.only expected to receive a single React element child.");return e}},n.Component=y,n.Fragment=o,n.Profiler=i,n.PureComponent=v,n.StrictMode=a,n.Suspense=u,n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=O,n.cloneElement=function(e,n,r){if(null==e)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+e+".");var o=g({},e.props),a=e.key,i=e.ref,s=e._owner;if(null!=n){if(void 0!==n.ref&&(i=n.ref,s=k.current),void 0!==n.key&&(a=""+n.key),e.type&&e.type.defaultProps)var l=e.type.defaultProps;for(c in n)x.call(n,c)&&!T.hasOwnProperty(c)&&(o[c]=void 0===n[c]&&void 0!==l?l[c]:n[c])}var c=arguments.length-2;if(1===c)o.children=r;else if(1<c){l=Array(c);for(var u=0;u<c;u++)l[u]=arguments[u+2];o.children=l}return{$$typeof:t,type:e.type,key:a,ref:i,props:o,_owner:s}},n.createContext=function(e){return(e={$$typeof:l,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null}).Provider={$$typeof:s,_context:e},e.Consumer=e},n.createElement=E,n.createFactory=function(e){var n=E.bind(null,e);return n.type=e,n},n.createRef=function(){return{current:null}},n.forwardRef=function(e){return{$$typeof:c,render:e}},n.isValidElement=C,n.lazy=function(e){return{$$typeof:p,_payload:{_status:-1,_result:e},_init:L}},n.memo=function(e,n){return{$$typeof:d,type:e,compare:void 0===n?null:n}},n.startTransition=function(e){var n=N.transition;N.transition={};try{e()}finally{N.transition=n}},n.unstable_act=function(){throw Error("act(...) is not supported in production builds of React.")},n.useCallback=function(e,n){return R.current.useCallback(e,n)},n.useContext=function(e){return R.current.useContext(e)},n.useDebugValue=function(){},n.useDeferredValue=function(e){return R.current.useDeferredValue(e)},n.useEffect=function(e,n){return R.current.useEffect(e,n)},n.useId=function(){return R.current.useId()},n.useImperativeHandle=function(e,n,t){return R.current.useImperativeHandle(e,n,t)},n.useInsertionEffect=function(e,n){return R.current.useInsertionEffect(e,n)},n.useLayoutEffect=function(e,n){return R.current.useLayoutEffect(e,n)},n.useMemo=function(e,n){return R.current.useMemo(e,n)},n.useReducer=function(e,n,t){return R.current.useReducer(e,n,t)},n.useRef=function(e){return R.current.useRef(e)},n.useState=function(e){return R.current.useState(e)},n.useSyncExternalStore=function(e,n,t){return R.current.useSyncExternalStore(e,n,t)},n.useTransition=function(){return R.current.useTransition()},n.version="18.2.0"},1504:(e,n,t)=>{"use strict";e.exports=t(3028)},7624:(e,n,t)=>{"use strict";e.exports=t(4808)},8328:(e,n)=>{"use strict";function t(e,n){var t=e.length;e.push(n);e:for(;0<t;){var r=t-1>>>1,o=e[r];if(!(0<a(o,n)))break e;e[r]=n,e[t]=o,t=r}}function r(e){return 0===e.length?null:e[0]}function o(e){if(0===e.length)return null;var n=e[0],t=e.pop();if(t!==n){e[0]=t;e:for(var r=0,o=e.length,i=o>>>1;r<i;){var s=2*(r+1)-1,l=e[s],c=s+1,u=e[c];if(0>a(l,t))c<o&&0>a(u,l)?(e[r]=u,e[c]=t,r=c):(e[r]=l,e[s]=t,r=s);else{if(!(c<o&&0>a(u,t)))break e;e[r]=u,e[c]=t,r=c}}}return n}function a(e,n){var t=e.sortIndex-n.sortIndex;return 0!==t?t:e.id-n.id}if("object"==typeof performance&&"function"==typeof performance.now){var i=performance;n.unstable_now=function(){return i.now()}}else{var s=Date,l=s.now();n.unstable_now=function(){return s.now()-l}}var c=[],u=[],d=1,p=null,f=3,m=!1,g=!1,h=!1,y="function"==typeof setTimeout?setTimeout:null,b="function"==typeof clearTimeout?clearTimeout:null,v="undefined"!=typeof setImmediate?setImmediate:null;function S(e){for(var n=r(u);null!==n;){if(null===n.callback)o(u);else{if(!(n.startTime<=e))break;o(u),n.sortIndex=n.expirationTime,t(c,n)}n=r(u)}}function w(e){if(h=!1,S(e),!g)if(null!==r(c))g=!0,N(x);else{var n=r(u);null!==n&&O(w,n.startTime-e)}}function x(e,t){g=!1,h&&(h=!1,b(C),C=-1),m=!0;var a=f;try{for(S(t),p=r(c);null!==p&&(!(p.expirationTime>t)||e&&!I());){var i=p.callback;if("function"==typeof i){p.callback=null,f=p.priorityLevel;var s=i(p.expirationTime<=t);t=n.unstable_now(),"function"==typeof s?p.callback=s:p===r(c)&&o(c),S(t)}else o(c);p=r(c)}if(null!==p)var l=!0;else{var d=r(u);null!==d&&O(w,d.startTime-t),l=!1}return l}finally{p=null,f=a,m=!1}}"undefined"!=typeof navigator&&void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);var k,T=!1,E=null,C=-1,_=5,A=-1;function I(){return!(n.unstable_now()-A<_)}function P(){if(null!==E){var e=n.unstable_now();A=e;var t=!0;try{t=E(!0,e)}finally{t?k():(T=!1,E=null)}}else T=!1}if("function"==typeof v)k=function(){v(P)};else if("undefined"!=typeof MessageChannel){var L=new MessageChannel,R=L.port2;L.port1.onmessage=P,k=function(){R.postMessage(null)}}else k=function(){y(P,0)};function N(e){E=e,T||(T=!0,k())}function O(e,t){C=y((function(){e(n.unstable_now())}),t)}n.unstable_IdlePriority=5,n.unstable_ImmediatePriority=1,n.unstable_LowPriority=4,n.unstable_NormalPriority=3,n.unstable_Profiling=null,n.unstable_UserBlockingPriority=2,n.unstable_cancelCallback=function(e){e.callback=null},n.unstable_continueExecution=function(){g||m||(g=!0,N(x))},n.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},n.unstable_getCurrentPriorityLevel=function(){return f},n.unstable_getFirstCallbackNode=function(){return r(c)},n.unstable_next=function(e){switch(f){case 1:case 2:case 3:var n=3;break;default:n=f}var t=f;f=n;try{return e()}finally{f=t}},n.unstable_pauseExecution=function(){},n.unstable_requestPaint=function(){},n.unstable_runWithPriority=function(e,n){switch(e){case 1:case 2:case 3:case 4:case 5:break;default:e=3}var t=f;f=e;try{return n()}finally{f=t}},n.unstable_scheduleCallback=function(e,o,a){var i=n.unstable_now();switch("object"==typeof a&&null!==a?a="number"==typeof(a=a.delay)&&0<a?i+a:i:a=i,e){case 1:var s=-1;break;case 2:s=250;break;case 5:s=1073741823;break;case 4:s=1e4;break;default:s=5e3}return e={id:d++,callback:o,priorityLevel:e,startTime:a,expirationTime:s=a+s,sortIndex:-1},a>i?(e.sortIndex=a,t(u,e),null===r(c)&&e===r(u)&&(h?(b(C),C=-1):h=!0,O(w,a-i))):(e.sortIndex=s,t(c,e),g||m||(g=!0,N(x))),e},n.unstable_shouldYield=I,n.unstable_wrapCallback=function(e){var n=f;return function(){var t=f;f=n;try{return e.apply(this,arguments)}finally{f=t}}}},4712:(e,n,t)=>{"use strict";e.exports=t(8328)},1072:e=>{e.exports=function(e,n,t,r){var o=t?t.call(r,e,n):void 0;if(void 0!==o)return!!o;if(e===n)return!0;if("object"!=typeof e||!e||"object"!=typeof n||!n)return!1;var a=Object.keys(e),i=Object.keys(n);if(a.length!==i.length)return!1;for(var s=Object.prototype.hasOwnProperty.bind(n),l=0;l<a.length;l++){var c=a[l];if(!s(c))return!1;var u=e[c],d=n[c];if(!1===(o=t?t.call(r,u,d,c):void 0)||void 0===o&&u!==d)return!1}return!0}},6136:(e,n,t)=>{"use strict";t.d(n,{c:()=>a});var r=!0,o="Invariant failed";function a(e,n){if(!e){if(r)throw new Error(o);var t="function"==typeof n?n():n;throw new Error(t?o+": "+t:o)}}},7768:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>r});const r={title:"Ignite Cookbook for React Native",tagline:"Cooking up some cool recipes in Ignite for React Native!",url:"https://infinitered.github.io",baseUrl:"/",onBrokenLinks:"throw",onBrokenMarkdownLinks:"warn",favicon:"img/favicon.ico",organizationName:"infinitered",projectName:"ignite-cookbook",i18n:{defaultLocale:"en",locales:["en"],path:"i18n",localeConfigs:{}},plugins:[null],presets:[["classic",{docs:{path:"docs",showLastUpdateAuthor:!0,showLastUpdateTime:!0,sidebarPath:"/home/runner/work/ignite-cookbook/ignite-cookbook/sidebars.js"},blog:!1,theme:{customCss:"/home/runner/work/ignite-cookbook/ignite-cookbook/src/css/custom.css"},gtag:{trackingID:"G-1NP64B0XVM",anonymizeIP:!0}}]],themeConfig:{colorMode:{defaultMode:"light",disableSwitch:!0,respectPrefersColorScheme:!1},navbar:{hideOnScroll:!0,logo:{alt:"React Native Cookbook Logo",src:"img/logo.svg"},items:[{type:"search",position:"right"},{type:"doc",docId:"intro",position:"right",html:'<div class="hover-underline">Recipes</div>'},{position:"right",html:'<div class="hover-underline">Ignite Boilerplate</div>',to:"https://github.com/infinitered/ignite"},{position:"right",html:'<div class="hover-underline">Infinite Red</div>',to:"https://infinite.red"},{style:{marginRight:"0px"},type:"dropdown",html:' <div class="hover-underline">\n                      Community\n                      <img src="/img/caret-down.svg" alt="dropdown" class="icon" />\n                    </div>\n                  ',position:"right",items:[{html:' <div>\n                          <div class="dropdown-item  hover-underline">\n                            Slack community\n                            <img src="/img/arrow.svg" alt="dropdown" class="icon" />\n                          </div>\n                          <div class="dropdown-item-description">\n                            <p>Join a growing React Native community with 2,000 developers and counting.<p>\n                          </div>\n                        </div>\n                      ',to:"https://join.slack.com/t/infiniteredcommunity/shared_invite/zt-1e1gob8vn-pcFjKM~n1c~aXFsTnvHpdg"},{html:' <div>\n                          <div class="dropdown-item  hover-underline">\n                            Submit an idea\n                            <img src="/img/arrow.svg" alt="dropdown" class="icon" />\n                          </div>\n                          <div class="dropdown-item-description">\n                            <p>Have an recipe idea for the cookbook? Contribute your ideas on GitHub!<p>\n                          </div>\n                        </div>\n                      ',to:"https://github.com/infinitered/ignite-cookbook/issues/new?assignees=&labels=new+recipe&template=recipe_idea.yml"}]}]},footer:{copyright:'From the team at <a href="https://infinite.red/" target="_blank" rel="noopener noreferrer" class="ir-footer-link">Infinite Red</a> <img width="32" height="32" src="/img/ir-mark.svg" alt="dropdown" class="ir-mark" />',style:"dark",links:[{title:"Community",items:[{html:'<a href="https://join.slack.com/t/infiniteredcommunity/shared_invite/zt-1e1gob8vn-pcFjKM~n1c~aXFsTnvHpdg" target="_blank" rel="noopener noreferrer" class="footer__link-item">Slack Community<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a>'},{html:'<a href="https://reactnativeradio.com/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React Native Radio<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a>'},{html:'<a href="https://reactnative.cc/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React Native Newsletter<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a>'}]},{title:"Resources",items:[{html:'<a href="https://github.com/infinitered/ignite-cookbook/issues" target="_blank" rel="noopener noreferrer" class="footer__link-item">Submit a Recipe<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a>'},{html:'<a href="https://github.com/infinitered/ignite-cookbook" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub - Ignite Cookbook<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a>'},{html:'<a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub - Ignite Boilerplate<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a>'},{html:'<a href="https://shift.infinite.red/" target="_blank" rel="noopener noreferrer" class="footer__link-item">RedShift Blog <div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a>'},{html:'<a href="https://infinite.red/privacy-policy" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy Policy<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a>'}]},{title:"Infinite Red",items:[{html:'<a href="https://infinite.red/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Website<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a>'},{html:'<a href="https://docs.infinite.red/" target="_blank" rel="noopener noreferrer" class="footer__link-item">IR Docs<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a>'},{html:'<a href="https://chainreactconf.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Chain React Conf<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a>'}]}]},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:["bash","ruby","json","ejs","diff","markup-templating"],magicComments:[{className:"theme-code-block-highlighted-line",line:"highlight-next-line",block:{start:"highlight-start",end:"highlight-end"}},{className:"code-block-error-line",line:"error-line",block:{start:"error-line-start",end:"error-line-end"}},{className:"code-block-success-line",line:"success-line",block:{start:"success-line-start",end:"success-line-end"}}]},algolia:{appId:"MFHD60DIB5",apiKey:"4e924e740d603ec90f106067754ccf50",indexName:"ignite-cookbook",searchParameters:{},searchPagePath:"search",contextualSearch:!0},docs:{versionPersistence:"localStorage",sidebar:{hideable:!1,autoCollapseCategories:!1}},metadata:[],tableOfContents:{minHeadingLevel:2,maxHeadingLevel:3}},baseUrlIssueBanner:!0,onBrokenAnchors:"warn",onDuplicateRoutes:"warn",staticDirectories:["static"],customFields:{},themes:[],scripts:[],headTags:[],stylesheets:[],clientModules:[],titleDelimiter:"|",noIndex:!1,markdown:{format:"mdx",mermaid:!1,mdx1Compat:{comments:!0,admonitions:!0,headingIds:!0}}}},6404:(e,n,t)=>{"use strict";function r(){return r=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},r.apply(this,arguments)}t.d(n,{c:()=>r})},9948:(e,n,t)=>{"use strict";function r(e,n){return r=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,n){return e.__proto__=n,e},r(e,n)}function o(e,n){e.prototype=Object.create(n.prototype),e.prototype.constructor=e,r(e,n)}t.d(n,{c:()=>o})},4384:(e,n,t)=>{"use strict";function r(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}t.d(n,{c:()=>r})},5456:(e,n,t)=>{"use strict";function r(e){var n,t,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e)){var a=e.length;for(n=0;n<a;n++)e[n]&&(t=r(e[n]))&&(o&&(o+=" "),o+=t)}else for(t in e)e[t]&&(o&&(o+=" "),o+=t);return o}t.d(n,{c:()=>o});const o=function(){for(var e,n,t=0,o="",a=arguments.length;t<a;t++)(e=arguments[t])&&(n=r(e))&&(o&&(o+=" "),o+=n);return o}},5720:(e,n,t)=>{"use strict";t.d(n,{gl:()=>ee,sp:()=>_});var r,o,a,i,s,l,c,u=t(1504),d=t(5456),p=Object.create,f=Object.defineProperty,m=Object.defineProperties,g=Object.getOwnPropertyDescriptor,h=Object.getOwnPropertyDescriptors,y=Object.getOwnPropertyNames,b=Object.getOwnPropertySymbols,v=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable,x=(e,n,t)=>n in e?f(e,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[n]=t,k=(e,n)=>{for(var t in n||(n={}))S.call(n,t)&&x(e,t,n[t]);if(b)for(var t of b(n))w.call(n,t)&&x(e,t,n[t]);return e},T=(e,n)=>m(e,h(n)),E=(e,n)=>{var t={};for(var r in e)S.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&b)for(var r of b(e))n.indexOf(r)<0&&w.call(e,r)&&(t[r]=e[r]);return t},C=(r={"../../node_modules/.pnpm/prismjs@1.29.0_patch_hash=vrxx3pzkik6jpmgpayxfjunetu/node_modules/prismjs/prism.js"(e,n){var t=function(){var e=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,n=0,t={},r={util:{encode:function e(n){return n instanceof o?new o(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.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:++n}),e.__id},clone:function e(n,t){var o,a;switch(t=t||{},r.util.type(n)){case"Object":if(a=r.util.objId(n),t[a])return t[a];for(var i in o={},t[a]=o,n)n.hasOwnProperty(i)&&(o[i]=e(n[i],t));return o;case"Array":return a=r.util.objId(n),t[a]?t[a]:(o=[],t[a]=o,n.forEach((function(n,r){o[r]=e(n,t)})),o);default:return n}},getLanguage:function(n){for(;n;){var t=e.exec(n.className);if(t)return t[1].toLowerCase();n=n.parentElement}return"none"},setLanguage:function(n,t){n.className=n.className.replace(RegExp(e,"gi"),""),n.classList.add("language-"+t)},isActive:function(e,n,t){for(var r="no-"+n;e;){var o=e.classList;if(o.contains(n))return!0;if(o.contains(r))return!1;e=e.parentElement}return!!t}},languages:{plain:t,plaintext:t,text:t,txt:t,extend:function(e,n){var t=r.util.clone(r.languages[e]);for(var o in n)t[o]=n[o];return t},insertBefore:function(e,n,t,o){var a=(o=o||r.languages)[e],i={};for(var s in a)if(a.hasOwnProperty(s)){if(s==n)for(var l in t)t.hasOwnProperty(l)&&(i[l]=t[l]);t.hasOwnProperty(s)||(i[s]=a[s])}var c=o[e];return o[e]=i,r.languages.DFS(r.languages,(function(n,t){t===c&&n!=e&&(this[n]=i)})),i},DFS:function e(n,t,o,a){a=a||{};var i=r.util.objId;for(var s in n)if(n.hasOwnProperty(s)){t.call(n,s,n[s],o||s);var l=n[s],c=r.util.type(l);"Object"!==c||a[i(l)]?"Array"!==c||a[i(l)]||(a[i(l)]=!0,e(l,t,s,a)):(a[i(l)]=!0,e(l,t,null,a))}}},plugins:{},highlight:function(e,n,t){var a={code:e,grammar:n,language:t};if(r.hooks.run("before-tokenize",a),!a.grammar)throw new Error('The language "'+a.language+'" has no grammar.');return a.tokens=r.tokenize(a.code,a.grammar),r.hooks.run("after-tokenize",a),o.stringify(r.util.encode(a.tokens),a.language)},tokenize:function(e,n){var t=n.rest;if(t){for(var r in t)n[r]=t[r];delete n.rest}var o=new s;return l(o,o.head,e),i(e,o,n,o.head,0),function(e){for(var n=[],t=e.head.next;t!==e.tail;)n.push(t.value),t=t.next;return n}(o)},hooks:{all:{},add:function(e,n){var t=r.hooks.all;t[e]=t[e]||[],t[e].push(n)},run:function(e,n){var t=r.hooks.all[e];if(t&&t.length)for(var o,a=0;o=t[a++];)o(n)}},Token:o};function o(e,n,t,r){this.type=e,this.content=n,this.alias=t,this.length=0|(r||"").length}function a(e,n,t,r){e.lastIndex=n;var o=e.exec(t);if(o&&r&&o[1]){var a=o[1].length;o.index+=a,o[0]=o[0].slice(a)}return o}function i(e,n,t,s,u,d){for(var p in t)if(t.hasOwnProperty(p)&&t[p]){var f=t[p];f=Array.isArray(f)?f:[f];for(var m=0;m<f.length;++m){if(d&&d.cause==p+","+m)return;var g=f[m],h=g.inside,y=!!g.lookbehind,b=!!g.greedy,v=g.alias;if(b&&!g.pattern.global){var S=g.pattern.toString().match(/[imsuy]*$/)[0];g.pattern=RegExp(g.pattern.source,S+"g")}for(var w=g.pattern||g,x=s.next,k=u;x!==n.tail&&!(d&&k>=d.reach);k+=x.value.length,x=x.next){var T=x.value;if(n.length>e.length)return;if(!(T instanceof o)){var E,C=1;if(b){if(!(E=a(w,k,e,y))||E.index>=e.length)break;var _=E.index,A=E.index+E[0].length,I=k;for(I+=x.value.length;_>=I;)I+=(x=x.next).value.length;if(k=I-=x.value.length,x.value instanceof o)continue;for(var P=x;P!==n.tail&&(I<A||"string"==typeof P.value);P=P.next)C++,I+=P.value.length;C--,T=e.slice(k,I),E.index-=k}else if(!(E=a(w,0,T,y)))continue;_=E.index;var L=E[0],R=T.slice(0,_),N=T.slice(_+L.length),O=k+T.length;d&&O>d.reach&&(d.reach=O);var F=x.prev;if(R&&(F=l(n,F,R),k+=R.length),c(n,F,C),x=l(n,F,new o(p,h?r.tokenize(L,h):L,v,L)),N&&l(n,x,N),C>1){var j={cause:p+","+m,reach:O};i(e,n,t,x.prev,k,j),d&&j.reach>d.reach&&(d.reach=j.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function l(e,n,t){var r=n.next,o={value:t,prev:n,next:r};return n.next=o,r.prev=o,e.length++,o}function c(e,n,t){for(var r=n.next,o=0;o<t&&r!==e.tail;o++)r=r.next;n.next=r,r.prev=n,e.length-=o}return o.stringify=function e(n,t){if("string"==typeof n)return n;if(Array.isArray(n)){var o="";return n.forEach((function(n){o+=e(n,t)})),o}var a={type:n.type,content:e(n.content,t),tag:"span",classes:["token",n.type],attributes:{},language:t},i=n.alias;i&&(Array.isArray(i)?Array.prototype.push.apply(a.classes,i):a.classes.push(i)),r.hooks.run("wrap",a);var s="";for(var l in a.attributes)s+=" "+l+'="'+(a.attributes[l]||"").replace(/"/g,"&quot;")+'"';return"<"+a.tag+' class="'+a.classes.join(" ")+'"'+s+">"+a.content+"</"+a.tag+">"},r}();n.exports=t,t.default=t}},function(){return o||(0,r[y(r)[0]])((o={exports:{}}).exports,o),o.exports}),_=((e,n,t)=>(t=null!=e?p(v(e)):{},((e,n,t,r)=>{if(n&&"object"==typeof n||"function"==typeof n)for(let o of y(n))S.call(e,o)||o===t||f(e,o,{get:()=>n[o],enumerable:!(r=g(n,o))||r.enumerable});return e})(!n&&e&&e.__esModule?t:f(t,"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]},_.languages.markup.tag.inside["attr-value"].inside.entity=_.languages.markup.entity,_.languages.markup.doctype.inside["internal-subset"].inside=_.languages.markup,_.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&amp;/,"&"))})),Object.defineProperty(_.languages.markup.tag,"addInlined",{value:function(e,n){var t;(n=((t=((t={})["language-"+n]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:_.languages[n]},t.cdata=/^<!\[CDATA\[|\]\]>$/i,{"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:t}}))["language-"+n]={pattern:/[\s\S]+/,inside:_.languages[n]},{}))[e]={pattern:RegExp(/(<__[^>]*>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:t},_.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(_.languages.markup.tag,"addAttribute",{value:function(e,n){_.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:[n,"language-"+n],inside:_.languages[n]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),_.languages.html=_.languages.markup,_.languages.mathml=_.languages.markup,_.languages.svg=_.languages.markup,_.languages.xml=_.languages.extend("markup",{}),_.languages.ssml=_.languages.xml,_.languages.atom=_.languages.xml,_.languages.rss=_.languages.xml,a=_,i={pattern:/\\[\\(){}[\]^$+*?|.]/,alias:"escape"},l="(?:[^\\\\-]|"+(s=/\\(?: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+")",l=RegExp(l+"-"+l),c={pattern:/(<|')[^<>']+(?=[>']$)/,lookbehind:!0,alias:"variable"},a.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:l,inside:{escape:s,"range-punctuation":{pattern:/-/,alias:"operator"}}},"special-escape":i,"char-set":{pattern:/\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},escape:s}},"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:s,group:[{pattern:/\((?:\?(?:<[^<>']+>|'[^<>']+'|[>:]|<?[=!]|[idmnsuxU]+(?:-[idmnsuxU]+)?:?))?/,alias:"punctuation",inside:{"group-name":c}},{pattern:/\)/,alias:"punctuation"}],quantifier:{pattern:/(?:[+*?]|\{\d+(?:,\d*)?\})[?+]?/,alias:"number"},alternation:{pattern:/\|/,alias:"keyword"}},_.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:/[{}[\];(),.:]/},_.languages.javascript=_.languages.extend("clike",{"class-name":[_.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}|\?\?=?|\?\.?|[~:]/}),_.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,_.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:_.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:_.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:_.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:_.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:_.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),_.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:_.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"}}),_.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),_.languages.markup&&(_.languages.markup.tag.addInlined("script","javascript"),_.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")),_.languages.js=_.languages.javascript,_.languages.actionscript=_.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:/\+\+|--|(?:[+\-*\/%^]|&&?|\|\|?|<<?|>>?>?|[!=]=?)=?|[~?@]/}),_.languages.actionscript["class-name"].alias="function",delete _.languages.actionscript.parameter,delete _.languages.actionscript["literal-property"],_.languages.markup&&_.languages.insertBefore("actionscript","string",{xml:{pattern:/(^|[^.])<\/?\w+(?:\s+[^\s>\/=]+=("|')(?:\\[\s\S]|(?!\2)[^\\])*\2)*\s*\/?>/,lookbehind:!0,inside:_.languages.markup}}),function(e){var n=/#(?!\{).+/,t={pattern:/#\{[^}]+\}/,alias:"variable"};e.languages.coffeescript=e.languages.extend("javascript",{comment:n,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:t}}],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:n,interpolation:t}}}),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:t}}]}),e.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete e.languages.coffeescript["template-string"],e.languages.coffee=e.languages.coffeescript}(_),function(e){var n=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(n,"addSupport",{value:function(n,t){(n="string"==typeof n?[n]:n).forEach((function(n){var r=function(e){e.inside||(e.inside={}),e.inside.rest=t},o="doc-comment";if(a=e.languages[n]){var a,i=a[o];if((i=i||(a=e.languages.insertBefore(n,"comment",{"doc-comment":{pattern:/(^|[^\\])\/\*\*[^/][\s\S]*?(?:\*\/|$)/,lookbehind:!0,alias:"comment"}}))[o])instanceof RegExp&&(i=a[o]={pattern:i}),Array.isArray(i))for(var s=0,l=i.length;s<l;s++)i[s]instanceof RegExp&&(i[s]={pattern:i[s]}),r(i[s]);else r(i)}}))}}),n.addSupport(["java","javascript","php"],n)}(_),function(e){var n=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;(n=(e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:RegExp("@[\\w-](?:"+/[^;{\s"']|\s+(?!\s)/.source+"|"+n.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\\((?:"+n.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+n.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+n.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:n,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))&&(n.tag.addInlined("style","css"),n.tag.addAttribute("style","css"))}(_),function(e){var n=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,t=(n=(e.languages.css.selector={pattern:e.languages.css.selector.pattern,lookbehind:!0,inside:n={"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,"pseudo-class":/:[-\w]+/,class:/\.[-\w]+/,id:/#[-\w]+/,attribute:{pattern:RegExp("\\[(?:[^[\\]\"']|"+n.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":[n,{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=n,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:n,number:t,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:n,number:t})}(_),function(e){var n=/[*&][^\s[\]{},]+/,t=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,r="(?:"+t.source+"(?:[ \t]+"+n.source+")?|"+n.source+"(?:[ \t]+"+t.source+")?)",o=/(?:[^\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})),a=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;function i(e,n){n=(n||"").replace(/m/g,"")+"m";var t=/([:\-,[{]\s*(?:\s<<prop>>[ \t]+)?)(?:<<value>>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<<prop>>/g,(function(){return r})).replace(/<<value>>/g,(function(){return e}));return RegExp(t,n)}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"(?:"+o+"|"+a+")"}))),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(a),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:t,important:n,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(_),function(e){var n=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function t(e){return e=e.replace(/<inner>/g,(function(){return n})),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var r=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,o=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,(function(){return r})),a=/\|?[ \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("^"+o+a+"(?:"+o+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+o+a+")(?:"+o+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(r),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+o+")"+a+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+o+"$"),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:t(/\b__(?:(?!_)<inner>|_(?:(?!_)<inner>)+_)+__\b|\*\*(?:(?!\*)<inner>|\*(?:(?!\*)<inner>)+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:t(/\b_(?:(?!_)<inner>|__(?:(?!_)<inner>)+__)+_\b|\*(?:(?!\*)<inner>|\*\*(?:(?!\*)<inner>)+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:t(/(~~?)(?:(?!~)<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:t(/!?\[(?:(?!\])<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(n){["url","bold","italic","strike","code-snippet"].forEach((function(t){n!==t&&(e.languages.markdown[n].inside.content.inside[t]=e.languages.markdown[t])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(n){if(n&&"string"!=typeof n)for(var t=0,r=n.length;t<r;t++){var o,a=n[t];"code"!==a.type?e(a.content):(o=a.content[1],a=a.content[3],o&&a&&"code-language"===o.type&&"code-block"===a.type&&"string"==typeof o.content&&(o=o.content.replace(/\b#/g,"sharp").replace(/\b\+\+/g,"pp"),o="language-"+(o=(/[a-z][\w-]*/i.exec(o)||[""])[0].toLowerCase()),a.alias?"string"==typeof a.alias?a.alias=[a.alias,o]:a.alias.push(o):a.alias=[o]))}}(e.tokens)})),e.hooks.add("wrap",(function(n){if("code-block"===n.type){for(var t="",r=0,o=n.classes.length;r<o;r++){var a=n.classes[r];if(a=/language-(.+)/.exec(a)){t=a[1];break}}var c,u=e.languages[t];u?n.content=e.highlight(n.content.replace(i,"").replace(/&(\w{1,8}|#x?[\da-f]{1,8});/gi,(function(e,n){var t;return"#"===(n=n.toLowerCase())[0]?(t="x"===n[1]?parseInt(n.slice(2),16):Number(n.slice(1)),l(t)):s[n]||e})),u,t):t&&"none"!==t&&e.plugins.autoloader&&(c="md-"+(new Date).valueOf()+"-"+Math.floor(1e16*Math.random()),n.attributes.id=c,e.plugins.autoloader.loadLanguages(t,(function(){var n=document.getElementById(c);n&&(n.innerHTML=e.highlight(n.textContent,e.languages[t],t))})))}})),RegExp(e.languages.markup.tag.pattern.source,"gi")),s={amp:"&",lt:"<",gt:">",quot:'"'},l=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(_),_.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:_.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+/},_.hooks.add("after-tokenize",(function(e){if("graphql"===e.language)for(var n=e.tokens.filter((function(e){return"string"!=typeof e&&"comment"!==e.type&&"scalar"!==e.type})),t=0;t<n.length;){var r=n[t++];if("keyword"===r.type&&"mutation"===r.content){var o=[];if(d(["definition-mutation","punctuation"])&&"("===u(1).content){t+=2;var a=p(/^\($/,/^\)$/);if(-1===a)continue;for(;t<a;t++){var i=u(0);"variable"===i.type&&(f(i,"variable-input"),o.push(i.content))}t=a+1}if(d(["punctuation","property-query"])&&"{"===u(0).content&&(t++,f(u(0),"property-mutation"),0<o.length)){var s=p(/^\{$/,/^\}$/);if(-1!==s)for(var l=t;l<s;l++){var c=n[l];"variable"===c.type&&0<=o.indexOf(c.content)&&f(c,"variable-input")}}}}function u(e){return n[t+e]}function d(e,n){n=n||0;for(var t=0;t<e.length;t++){var r=u(t+n);if(!r||r.type!==e[t])return}return 1}function p(e,r){for(var o=1,a=t;a<n.length;a++){var i=n[a],s=i.content;if("punctuation"===i.type&&"string"==typeof s)if(e.test(s))o++;else if(r.test(s)&&0==--o)return a}return-1}function f(e,n){var t=e.alias;t?Array.isArray(t)||(e.alias=t=[t]):e.alias=t=[],t.push(n)}})),_.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 n=e.languages.javascript["template-string"],t=n.pattern.source,r=n.inside.interpolation,o=r.inside["interpolation-punctuation"],a=r.pattern.source;function i(n,r){if(e.languages[n])return{pattern:RegExp("((?:"+r+")\\s*)"+t),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:n}}}}function s(n,t,r){return n={code:n,grammar:t,language:r},e.hooks.run("before-tokenize",n),n.tokens=e.tokenize(n.code,n.grammar),e.hooks.run("after-tokenize",n),n.tokens}function l(n,t,i){var l=e.tokenize(n,{interpolation:{pattern:RegExp(a),lookbehind:!0}}),c=0,u={},d=(l=s(l.map((function(e){if("string"==typeof e)return e;var t,r;for(e=e.content;-1!==n.indexOf((r=c++,t="___"+i.toUpperCase()+"_"+r+"___")););return u[t]=e,t})).join(""),t,i),Object.keys(u));return c=0,function n(t){for(var a=0;a<t.length;a++){if(c>=d.length)return;var i,l,p,f,m,g,h,y=t[a];"string"==typeof y||"string"==typeof y.content?(i=d[c],-1!==(h=(g="string"==typeof y?y:y.content).indexOf(i))&&(++c,l=g.substring(0,h),m=u[i],p=void 0,(f={})["interpolation-punctuation"]=o,3===(f=e.tokenize(m,f)).length&&((p=[1,1]).push.apply(p,s(f[1],e.languages.javascript,"javascript")),f.splice.apply(f,p)),p=new e.Token("interpolation",f,r.alias,m),f=g.substring(h+i.length),m=[],l&&m.push(l),m.push(p),f&&(n(g=[f]),m.push.apply(m,g)),"string"==typeof y?(t.splice.apply(t,[a,1].concat(m)),a+=m.length-1):y.content=m)):(h=y.content,Array.isArray(h)?n(h):n([h]))}}(l),new e.Token(i,l,"language-"+i,n)}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),n].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(n){n.language in c&&function n(t){for(var r=0,o=t.length;r<o;r++){var a,i,s,c=t[r];"string"!=typeof c&&(a=c.content,Array.isArray(a)?"template-string"===c.type?(c=a[1],3===a.length&&"string"!=typeof c&&"embedded-code"===c.type&&(i=u(c),c=c.alias,c=Array.isArray(c)?c[0]:c,s=e.languages[c])&&(a[1]=l(i,s,c))):n(a):"string"!=typeof a&&n([a]))}}(n.tokens)}))}(_),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 n=e.languages.extend("typescript",{});delete n["class-name"],e.languages.typescript["class-name"].inside=n,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:n}}}}),e.languages.ts=e.languages.typescript}(_),function(e){var n=e.languages.javascript,t=/\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})+\}/.source,r="(@(?:arg|argument|param|property)\\s+(?:"+t+"\\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:n,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 t}))),lookbehind:!0,inside:{punctuation:/\./}},{pattern:RegExp("(@[a-z]+\\s+)"+t),lookbehind:!0,inside:{string:n.string,number:n.number,boolean:n.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:n,alias:"language-javascript"}}}}),e.languages.javadoclike.addSupport("javascript",e.languages.jsdoc)}(_),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})}(_),_.languages.n4js=_.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/}),_.languages.insertBefore("n4js","constant",{annotation:{pattern:/@+\w+/,alias:"operator"}}),_.languages.n4jsd=_.languages.n4js,function(e){function n(e,n){return RegExp(e.replace(/<ID>/g,(function(){return/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/.source})),n)}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:n(/(\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:n(/(\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:n(/(\.\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 t=["function","function-variable","method","method-variable","property-access"],r=0;r<t.length;r++){var o=t[r],a=e.languages.javascript[o];o=(a="RegExp"===e.util.type(a)?e.languages.javascript[o]={pattern:a}:a).inside||{};(a.inside=o)["maybe-class-name"]=/^[A-Z][\s\S]*/}}(_),function(e){var n=e.util.clone(e.languages.javascript),t=/(?:\s|\/\/.*(?!.)|\/\*(?:[^*]|\*(?!\/))\*\/)/.source,r=/(?:\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])*\})/.source,o=/(?:\{<S>*\.{3}(?:[^{}]|<BRACES>)*\})/.source;function a(e,n){return e=e.replace(/<S>/g,(function(){return t})).replace(/<BRACES>/g,(function(){return r})).replace(/<SPREAD>/g,(function(){return o})),RegExp(e,n)}function i(n){for(var t=[],r=0;r<n.length;r++){var o=n[r],a=!1;"string"!=typeof o&&("tag"===o.type&&o.content[0]&&"tag"===o.content[0].type?"</"===o.content[0].content[0].content?0<t.length&&t[t.length-1].tagName===s(o.content[0].content[1])&&t.pop():"/>"!==o.content[o.content.length-1].content&&t.push({tagName:s(o.content[0].content[1]),openedBraces:0}):0<t.length&&"punctuation"===o.type&&"{"===o.content?t[t.length-1].openedBraces++:0<t.length&&0<t[t.length-1].openedBraces&&"punctuation"===o.type&&"}"===o.content?t[t.length-1].openedBraces--:a=!0),(a||"string"==typeof o)&&0<t.length&&0===t[t.length-1].openedBraces&&(a=s(o),r<n.length-1&&("string"==typeof n[r+1]||"plain-text"===n[r+1].type)&&(a+=s(n[r+1]),n.splice(r+1,1)),0<r&&("string"==typeof n[r-1]||"plain-text"===n[r-1].type)&&(a=s(n[r-1])+a,n.splice(r-1,1),r--),n[r]=new e.Token("plain-text",a,null,a)),o.content&&"string"!=typeof o.content&&i(o.content)}}o=a(o).source,e.languages.jsx=e.languages.extend("markup",n),e.languages.jsx.tag.pattern=a(/<\/?(?:[\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=n.comment,e.languages.insertBefore("inside","attr-name",{spread:{pattern:a(/<SPREAD>/.source),inside:e.languages.jsx}},e.languages.jsx.tag),e.languages.insertBefore("inside","special-attr",{script:{pattern:a(/=<BRACES>/.source),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:e.languages.jsx}}},e.languages.jsx.tag);var s=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(s).join(""):""};e.hooks.add("after-tokenize",(function(e){"jsx"!==e.language&&"tsx"!==e.language||i(e.tokens)}))}(_),function(e){var n=e.util.clone(e.languages.typescript);(n=(e.languages.tsx=e.languages.extend("jsx",n),delete e.languages.tsx.parameter,delete e.languages.tsx["literal-property"],e.languages.tsx.tag)).pattern=RegExp(/(^|[^\w$]|(?=<\/))/.source+"(?:"+n.pattern.source+")",n.pattern.flags),n.lookbehind=!0}(_),_.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:/[{}[\]();,.:\\]/},_.languages.swift["string-literal"].forEach((function(e){e.inside.interpolation.inside=_.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 n={"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:n},string:/[\s\S]+/}},{pattern:/"(?:[^"\\\r\n$]|\\.|\$(?:(?!\{)|\{[^{}]*\}))*"/,alias:"singleline",inside:{interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$(?:[a-z_]\w*|\{[^{}]*\})/i,lookbehind:!0,inside:n},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}(_),_.languages.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|[?:~]|[-+*/%&|^!=<>]=?/}),_.languages.insertBefore("c","string",{char:{pattern:/'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,greedy:!0}}),_.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},_.languages.c.string],char:_.languages.c.char,comment:_.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:_.languages.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 _.languages.c.boolean,_.languages.objectivec=_.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 _.languages.objectivec["class-name"],_.languages.objc=_.languages.objectivec,_.languages.reason=_.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/}),_.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 _.languages.reason.function,function(e){for(var n=/\/\*(?:[^*/]|\*(?!\/)|\/(?!\*)|<self>)*\*\//.source,t=0;t<2;t++)n=n.replace(/<self>/g,(function(){return n}));n=n.replace(/<self>/g,(function(){return/[^\s\S]/.source})),e.languages.rust={comment:[{pattern:RegExp(/(^|[^\\])/.source+n),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}(_),_.languages.go=_.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/}),_.languages.insertBefore("go","string",{char:{pattern:/'(?:\\.|[^'\\\r\n]){0,10}'/,greedy:!0}}),delete _.languages.go["class-name"],function(e){var n=/\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/,t=/\b(?!<keyword>)\w+(?:\s*\.\s*\w+)*\b/.source.replace(/<keyword>/g,(function(){return n.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 n.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:n,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 t}))+")"),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"])}(_),_.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:/[{}[\];(),.:]/},_.languages.python["string-interpolation"].inside.interpolation.inside.rest=_.languages.python,_.languages.py=_.languages.python;((e,n)=>{for(var t in n)f(e,t,{get:n[t],enumerable:!0})})({},{dracula:()=>A,duotoneDark:()=>I,duotoneLight:()=>P,github:()=>L,jettwaveDark:()=>H,jettwaveLight:()=>W,nightOwl:()=>R,nightOwlLight:()=>N,oceanicNext:()=>j,okaidia:()=>D,oneDark:()=>G,oneLight:()=>q,palenight:()=>M,shadesOfPurple:()=>B,synthwave84:()=>$,ultramin:()=>U,vsDark:()=>V,vsLight:()=>z});var A={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)"}}]},I={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"}}]},P={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"}}]},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)"}}]},N={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)"}}]},O="#c5a5c5",F="#8dc891",j={plain:{backgroundColor:"#282c34",color:"#ffffff"},styles:[{types:["attr-name"],style:{color:O}},{types:["attr-value"],style:{color:F}},{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:F}},{types:["punctuation"],style:{color:F}},{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:O}},{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}}]},D={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)"}}]},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)"}}]},$={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"}}]},U={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)"}}]},V={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)"}}]},z={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)"}}]},H={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"}}]},W={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%)"}}]},q={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%)"}}]},Y=(e,n)=>{const{plain:t}=e,r=e.styles.reduce(((e,t)=>{const{languages:r,style:o}=t;return r&&!r.includes(n)||t.types.forEach((n=>{const t=k(k({},e[n]),o);e[n]=t})),e}),{});return r.root=t,r.plain=T(k({},t),{backgroundColor:void 0}),r},K=/\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)},Q=(e,n)=>{const t=e.length;return t>0&&e[t-1]===n?e:e.concat(n)},Z=e=>{const n=[[]],t=[e],r=[0],o=[e.length];let a=0,i=0,s=[];const l=[s];for(;i>-1;){for(;(a=r[i]++)<o[i];){let e,c=n[i];const u=t[i][a];if("string"==typeof u?(c=i>0?c:["plain"],e=u):(c=Q(c,u.type),u.alias&&(c=Q(c,u.alias)),e=u.content),"string"!=typeof e){i++,n.push(c),t.push(e),r.push(0),o.push(e.length);continue}const d=e.split(K),p=d.length;s.push({types:c,content:d[0]});for(let n=1;n<p;n++)X(s),l.push(s=[]),s.push({types:c,content:d[n]})}i--,n.pop(),t.pop(),r.pop(),o.pop()}return X(s),l},J=({children:e,language:n,code:t,theme:r,prism:o})=>{const a=n.toLowerCase(),i=((e,n)=>{const[t,r]=(0,u.useState)(Y(n,e)),o=(0,u.useRef)(),a=(0,u.useRef)();return(0,u.useEffect)((()=>{n===o.current&&e===a.current||(o.current=n,a.current=e,r(Y(n,e)))}),[e,n]),t})(a,r),s=(e=>(0,u.useCallback)((n=>{var t=n,{className:r,style:o,line:a}=t,i=E(t,["className","style","line"]);const s=T(k({},i),{className:(0,d.c)("token-line",r)});return"object"==typeof e&&"plain"in e&&(s.style=e.plain),"object"==typeof o&&(s.style=k(k({},s.style||{}),o)),s}),[e]))(i),l=(e=>{const n=(0,u.useCallback)((({types:n,empty:t})=>{if(null!=e)return 1===n.length&&"plain"===n[0]?null!=t?{display:"inline-block"}:void 0:1===n.length&&null!=t?e[n[0]]:Object.assign(null!=t?{display:"inline-block"}:{},...n.map((n=>e[n])))}),[e]);return(0,u.useCallback)((e=>{var t=e,{token:r,className:o,style:a}=t,i=E(t,["token","className","style"]);const s=T(k({},i),{className:(0,d.c)("token",...r.types,o),children:r.content,style:n(r)});return null!=a&&(s.style=k(k({},s.style||{}),a)),s}),[n])})(i),c=(({prism:e,code:n,grammar:t,language:r})=>{const o=(0,u.useRef)(e);return(0,u.useMemo)((()=>{if(null==t)return Z([n]);const e={code:n,grammar:t,language:r,tokens:[]};return o.current.hooks.run("before-tokenize",e),e.tokens=o.current.tokenize(n,t),o.current.hooks.run("after-tokenize",e),Z(e.tokens)}),[n,t,r])})({prism:o,language:a,code:t,grammar:o.languages[a]});return e({tokens:c,className:`prism-code language-${a}`,style:null!=i?i.root:{},getLineProps:s,getTokenProps:l})},ee=e=>(0,u.createElement)(J,T(k({},e),{prism:e.prism||_,theme:e.theme||V,code:e.code,language:e.language}))},144:e=>{"use strict";e.exports={}},4504:e=>{"use strict";e.exports=JSON.parse('{"/search-437":{"__comp":"1a4e3797","__context":{"plugin":"abaad534"}},"/docs-384":{"__comp":"5e95c892","__context":{"plugin":"e7928ab4"}},"/docs-086":{"__comp":"a7bd4aaa","version":"935f2afb"},"/docs/tags-0cc":{"__comp":"3720c009","tags":"55960ee5"},"/docs/tags/accessibility-8aa":{"__comp":"df203c0f","tag":"4a4fb967"},"/docs/tags/android-e3a":{"__comp":"df203c0f","tag":"6728e797"},"/docs/tags/apisauce-143":{"__comp":"df203c0f","tag":"1ab29606"},"/docs/tags/archive-51b":{"__comp":"df203c0f","tag":"985027d8"},"/docs/tags/async-storage-afc":{"__comp":"df203c0f","tag":"d01c4de2"},"/docs/tags/authentication-587":{"__comp":"df203c0f","tag":"ecce3b64"},"/docs/tags/babel-e90":{"__comp":"df203c0f","tag":"b3d1732c"},"/docs/tags/backend-908":{"__comp":"df203c0f","tag":"0825c398"},"/docs/tags/ci-cd-56c":{"__comp":"df203c0f","tag":"a951c726"},"/docs/tags/cng-581":{"__comp":"df203c0f","tag":"31ac2bc7"},"/docs/tags/data-synchronization-453":{"__comp":"df203c0f","tag":"3663082a"},"/docs/tags/database-7e4":{"__comp":"df203c0f","tag":"abfb2977"},"/docs/tags/debug-888":{"__comp":"df203c0f","tag":"e1b6b0a8"},"/docs/tags/dependencies-c34":{"__comp":"df203c0f","tag":"8b0d950b"},"/docs/tags/eas-17a":{"__comp":"df203c0f","tag":"99d16955"},"/docs/tags/eas-update-632":{"__comp":"df203c0f","tag":"33f24359"},"/docs/tags/environment-variables-0f3":{"__comp":"df203c0f","tag":"fd1937a7"},"/docs/tags/expo-a41":{"__comp":"df203c0f","tag":"ce17b301"},"/docs/tags/expo-dev-client-0df":{"__comp":"df203c0f","tag":"a0d6a633"},"/docs/tags/expo-router-257":{"__comp":"df203c0f","tag":"c5ca3bf3"},"/docs/tags/expo-updates-807":{"__comp":"df203c0f","tag":"08a54ed9"},"/docs/tags/flat-list-5a7":{"__comp":"df203c0f","tag":"e0854532"},"/docs/tags/generator-80e":{"__comp":"df203c0f","tag":"24a07a83"},"/docs/tags/guide-cea":{"__comp":"df203c0f","tag":"b8c37621"},"/docs/tags/hardware-303":{"__comp":"df203c0f","tag":"569bff92"},"/docs/tags/i-os-96e":{"__comp":"df203c0f","tag":"3bb7a4af"},"/docs/tags/imports-887":{"__comp":"df203c0f","tag":"b832b2ff"},"/docs/tags/intro-b42":{"__comp":"df203c0f","tag":"51658ad1"},"/docs/tags/maestro-034":{"__comp":"df203c0f","tag":"dec1aed8"},"/docs/tags/mmkv-f7e":{"__comp":"df203c0f","tag":"a8646ade"},"/docs/tags/mob-x-a01":{"__comp":"df203c0f","tag":"51ea30c5"},"/docs/tags/offline-support-6ec":{"__comp":"df203c0f","tag":"199ff765"},"/docs/tags/power-sync-dca":{"__comp":"df203c0f","tag":"7f8cce85"},"/docs/tags/prebuild-83d":{"__comp":"df203c0f","tag":"f50f3884"},"/docs/tags/prettier-db7":{"__comp":"df203c0f","tag":"69dd30cd"},"/docs/tags/react-native-873":{"__comp":"df203c0f","tag":"cf59a740"},"/docs/tags/react-native-vision-camera-ea0":{"__comp":"df203c0f","tag":"82139467"},"/docs/tags/react-navigation-0ad":{"__comp":"df203c0f","tag":"94ee064e"},"/docs/tags/redux-c5e":{"__comp":"df203c0f","tag":"e2041b9b"},"/docs/tags/scroll-to-f32":{"__comp":"df203c0f","tag":"a8f9d519"},"/docs/tags/section-list-8de":{"__comp":"df203c0f","tag":"9dc0f37b"},"/docs/tags/select-field-5f4":{"__comp":"df203c0f","tag":"dce6faa4"},"/docs/tags/state-management-181":{"__comp":"df203c0f","tag":"18d888f3"},"/docs/tags/testing-b53":{"__comp":"df203c0f","tag":"47a03c7f"},"/docs/tags/text-field-782":{"__comp":"df203c0f","tag":"72dfd944"},"/docs/tags/type-script-825":{"__comp":"df203c0f","tag":"ff2c7cca"},"/docs/tags/ui-020":{"__comp":"df203c0f","tag":"19d620af"},"/docs/tags/ui-required-device-capabilities-73a":{"__comp":"df203c0f","tag":"ccf3150e"},"/docs/tags/uses-feature-f1a":{"__comp":"df203c0f","tag":"d699663a"},"/docs/tags/vision-camera-e9b":{"__comp":"df203c0f","tag":"c5abe9fe"},"/docs/tags/yarn-e4e":{"__comp":"df203c0f","tag":"7acb6f50"},"/docs/tags/zustand-24d":{"__comp":"df203c0f","tag":"954f316d"},"/docs-058":{"__comp":"a94703ab"},"/docs/archive/-ab8":{"__comp":"17896441","content":"dd3340a6"},"/docs/archive/PristineExpoProject-afa":{"__comp":"17896441","content":"b33180cb"},"/docs/intro-194":{"__comp":"17896441","content":"0e384e19"},"/docs/recipes/AccessibilityFontSizes-872":{"__comp":"17896441","content":"145425bc"},"/docs/recipes/CircleCIRNSetup-ce2":{"__comp":"17896441","content":"fe9b09bf"},"/docs/recipes/CreatingGreateExperienceForScreenReaders-752":{"__comp":"17896441","content":"f523b160"},"/docs/recipes/DetoxIntro-700":{"__comp":"17896441","content":"03224537"},"/docs/recipes/DistributingAuthTokenToAPI-298":{"__comp":"17896441","content":"24c3776a"},"/docs/recipes/EASUpdate-938":{"__comp":"17896441","content":"9fc76e3d"},"/docs/recipes/EnforcingImportOrder-713":{"__comp":"17896441","content":"d7af48b9"},"/docs/recipes/EnvironmentVariables-92b":{"__comp":"17896441","content":"d6ab422f"},"/docs/recipes/ExpoRouter-0b5":{"__comp":"17896441","content":"c47fa949"},"/docs/recipes/GeneratorComponentTests-e55":{"__comp":"17896441","content":"7b45617e"},"/docs/recipes/LocalFirstDataWithPowerSync-9a4":{"__comp":"17896441","content":"5fd7ef2e"},"/docs/recipes/MaestroSetup-237":{"__comp":"17896441","content":"51e76fb5"},"/docs/recipes/MigratingToMMKV-9d0":{"__comp":"17896441","content":"657027a7"},"/docs/recipes/PatchingBuildingAndroid-ac8":{"__comp":"17896441","content":"d0e08e4a"},"/docs/recipes/PrepForEASBuild-64a":{"__comp":"17896441","content":"54a9c7e8"},"/docs/recipes/ReactNativeVisionCamera-e2e":{"__comp":"17896441","content":"cc1d3934"},"/docs/recipes/Redux-0f8":{"__comp":"17896441","content":"a2f5d017"},"/docs/recipes/RemoveMobxStateTree-50f":{"__comp":"17896441","content":"c75b21fd"},"/docs/recipes/RequiringHardwareFeaturesWithExpo-2fd":{"__comp":"17896441","content":"cecd52bc"},"/docs/recipes/SampleYAMLCircleCI-30a":{"__comp":"17896441","content":"4e09609f"},"/docs/recipes/SelectFieldWithBottomSheet-ca3":{"__comp":"17896441","content":"d63d2b89"},"/docs/recipes/SwitchBetweenExpoGoCNG-695":{"__comp":"17896441","content":"78a0b2f7"},"/docs/recipes/TypeScriptBaseURL-986":{"__comp":"17896441","content":"1c9ea255"},"/docs/recipes/UnrenderedItemInScrollView-c15":{"__comp":"17896441","content":"c3e2f4d4"},"/docs/recipes/UpdatingDependencies-21c":{"__comp":"17896441","content":"da9277bc"},"/docs/recipes/UpdatingIgnite-f0c":{"__comp":"17896441","content":"6fd287af"},"/docs/recipes/UsingScreenReaders-324":{"__comp":"17896441","content":"63181745"},"/docs/recipes/Zustand-0e1":{"__comp":"17896441","content":"e33e793e"},"/-703":{"__comp":"1df93b7f","__context":{"plugin":"3192f89a"},"config":"5e9f5e1a"}}')}},e=>{e.O(0,[2176],(()=>{return n=8808,e(e.s=n);var n}));e.O()}]);
\ No newline at end of file
diff --git a/assets/js/main.d1a308a0.js.LICENSE.txt b/assets/js/main.98d21fb0.js.LICENSE.txt
similarity index 100%
rename from assets/js/main.d1a308a0.js.LICENSE.txt
rename to assets/js/main.98d21fb0.js.LICENSE.txt
diff --git a/assets/js/main.d1a308a0.js b/assets/js/main.d1a308a0.js
deleted file mode 100644
index 57f19c5b..00000000
--- a/assets/js/main.d1a308a0.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! For license information please see main.d1a308a0.js.LICENSE.txt */
-(self.webpackChunkignite_cookbook=self.webpackChunkignite_cookbook||[]).push([[1590],{5052:(e,n,t)=>{"use strict";t.d(n,{I:()=>o});var r=t(1504);function o(){return r.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20"},r.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}},628:(e,n,t)=>{"use strict";t.d(n,{c:()=>p});t(1504);var r=t(8852),o=t.n(r),a=t(4504);const i={"03224537":[()=>t.e(5284).then(t.bind(t,4024)),"@site/docs/recipes/DetoxIntro.md",4024],"0825c398":[()=>t.e(5524).then(t.t.bind(t,5708,19)),"~docs/default/tag-docs-tags-backend-b17.json",5708],"08a54ed9":[()=>t.e(5156).then(t.t.bind(t,1128,19)),"~docs/default/tag-docs-tags-expo-updates-8e6.json",1128],"0e384e19":[()=>t.e(6328).then(t.bind(t,9404)),"@site/docs/intro.md",9404],"145425bc":[()=>t.e(16).then(t.bind(t,9856)),"@site/docs/recipes/AccessibilityFontSizes.md",9856],17896441:[()=>Promise.all([t.e(2176),t.e(4912),t.e(6752)]).then(t.bind(t,4276)),"@theme/DocItem",4276],"18d888f3":[()=>t.e(5640).then(t.t.bind(t,9584,19)),"~docs/default/tag-docs-tags-state-management-fd9.json",9584],"199ff765":[()=>t.e(8368).then(t.t.bind(t,2520,19)),"~docs/default/tag-docs-tags-offline-support-d09.json",2520],"19d620af":[()=>t.e(3966).then(t.t.bind(t,5568,19)),"~docs/default/tag-docs-tags-ui-22c.json",5568],"1a4e3797":[()=>Promise.all([t.e(2176),t.e(9648)]).then(t.bind(t,3416)),"@theme/SearchPage",3416],"1ab29606":[()=>t.e(6928).then(t.t.bind(t,7704,19)),"~docs/default/tag-docs-tags-apisauce-8de.json",7704],"1c9ea255":[()=>t.e(8636).then(t.bind(t,620)),"@site/docs/recipes/TypeScriptBaseURL.md",620],"1df93b7f":[()=>Promise.all([t.e(2176),t.e(2096),t.e(8552)]).then(t.bind(t,9184)),"@site/src/pages/index.tsx",9184],"24a07a83":[()=>t.e(4424).then(t.t.bind(t,4136,19)),"~docs/default/tag-docs-tags-generator-e43.json",4136],"24c3776a":[()=>t.e(9828).then(t.bind(t,176)),"@site/docs/recipes/DistributingAuthTokenToAPI.md",176],"3192f89a":[()=>t.e(4992).then(t.t.bind(t,590,19)),"/home/runner/work/ignite-cookbook/ignite-cookbook/.docusaurus/docusaurus-plugin-content-pages/default/plugin-route-context-module-100.json",590],"31ac2bc7":[()=>t.e(9632).then(t.t.bind(t,9010,19)),"~docs/default/tag-docs-tags-cng-585.json",9010],"33f24359":[()=>t.e(222).then(t.t.bind(t,1592,19)),"~docs/default/tag-docs-tags-eas-update-bce.json",1592],"3663082a":[()=>t.e(5592).then(t.t.bind(t,6944,19)),"~docs/default/tag-docs-tags-data-synchronization-126.json",6944],"3720c009":[()=>Promise.all([t.e(2176),t.e(4492)]).then(t.bind(t,2808)),"@theme/DocTagsListPage",2808],"3bb7a4af":[()=>t.e(2008).then(t.t.bind(t,7264,19)),"~docs/default/tag-docs-tags-i-os-d44.json",7264],"47a03c7f":[()=>t.e(3336).then(t.t.bind(t,7536,19)),"~docs/default/tag-docs-tags-testing-194.json",7536],"4a4fb967":[()=>t.e(6756).then(t.t.bind(t,9056,19)),"~docs/default/tag-docs-tags-accessibility-83c.json",9056],"4e09609f":[()=>t.e(3128).then(t.bind(t,8220)),"@site/docs/recipes/SampleYAMLCircleCI.md",8220],"51658ad1":[()=>t.e(9576).then(t.t.bind(t,5752,19)),"~docs/default/tag-docs-tags-intro-ce4.json",5752],"51e76fb5":[()=>t.e(5064).then(t.bind(t,4488)),"@site/docs/recipes/MaestroSetup.md",4488],"51ea30c5":[()=>t.e(2324).then(t.t.bind(t,162,19)),"~docs/default/tag-docs-tags-mob-x-748.json",162],"54a9c7e8":[()=>t.e(8576).then(t.bind(t,2716)),"@site/docs/recipes/PrepForEASBuild.md",2716],"55960ee5":[()=>t.e(4296).then(t.t.bind(t,2416,19)),"~docs/default/tags-list-current-prop-15a.json",2416],"569bff92":[()=>t.e(5320).then(t.t.bind(t,2968,19)),"~docs/default/tag-docs-tags-hardware-92c.json",2968],"5e95c892":[()=>t.e(4304).then(t.bind(t,3564)),"@theme/DocsRoot",3564],"5e9f5e1a":[()=>Promise.resolve().then(t.bind(t,7768)),"@generated/docusaurus.config",7768],"5fd7ef2e":[()=>t.e(656).then(t.bind(t,9044)),"@site/docs/recipes/LocalFirstDataWithPowerSync.md",9044],63181745:[()=>t.e(5548).then(t.bind(t,9108)),"@site/docs/recipes/UsingScreenReaders.md",9108],"657027a7":[()=>t.e(3180).then(t.bind(t,8232)),"@site/docs/recipes/MigratingToMMKV.md",8232],"6728e797":[()=>t.e(8616).then(t.t.bind(t,6824,19)),"~docs/default/tag-docs-tags-android-593.json",6824],"69dd30cd":[()=>t.e(4e3).then(t.t.bind(t,7672,19)),"~docs/default/tag-docs-tags-prettier-367.json",7672],"6fd287af":[()=>t.e(4264).then(t.bind(t,9700)),"@site/docs/recipes/UpdatingIgnite.md",9700],"72dfd944":[()=>t.e(40).then(t.t.bind(t,8466,19)),"~docs/default/tag-docs-tags-text-field-8cc.json",8466],"78a0b2f7":[()=>t.e(4224).then(t.bind(t,4068)),"@site/docs/recipes/SwitchBetweenExpoGoCNG.md",4068],"7acb6f50":[()=>t.e(56).then(t.t.bind(t,9200,19)),"~docs/default/tag-docs-tags-yarn-9bd.json",9200],"7b45617e":[()=>t.e(8436).then(t.bind(t,9368)),"@site/docs/recipes/GeneratorComponentTests.md",9368],"7f8cce85":[()=>t.e(4212).then(t.t.bind(t,2536,19)),"~docs/default/tag-docs-tags-power-sync-570.json",2536],82139467:[()=>t.e(7820).then(t.t.bind(t,5688,19)),"~docs/default/tag-docs-tags-react-native-vision-camera-af5.json",5688],"8b0d950b":[()=>t.e(3960).then(t.t.bind(t,4832,19)),"~docs/default/tag-docs-tags-dependencies-d4f.json",4832],"935f2afb":[()=>t.e(5696).then(t.t.bind(t,5988,19)),"~docs/default/version-current-metadata-prop-751.json",5988],"94ee064e":[()=>t.e(7300).then(t.t.bind(t,5683,19)),"~docs/default/tag-docs-tags-react-navigation-23c.json",5683],"954f316d":[()=>t.e(6044).then(t.t.bind(t,9272,19)),"~docs/default/tag-docs-tags-zustand-18e.json",9272],"985027d8":[()=>t.e(2160).then(t.t.bind(t,6843,19)),"~docs/default/tag-docs-tags-archive-6cf.json",6843],"99d16955":[()=>t.e(622).then(t.t.bind(t,5004,19)),"~docs/default/tag-docs-tags-eas-228.json",5004],"9dc0f37b":[()=>t.e(6704).then(t.t.bind(t,6154,19)),"~docs/default/tag-docs-tags-section-list-198.json",6154],"9fc76e3d":[()=>t.e(900).then(t.bind(t,8468)),"@site/docs/recipes/EASUpdate.md",8468],a0d6a633:[()=>t.e(7732).then(t.t.bind(t,1284,19)),"~docs/default/tag-docs-tags-expo-dev-client-4bf.json",1284],a2f5d017:[()=>t.e(916).then(t.bind(t,3884)),"@site/docs/recipes/Redux.md",3884],a7bd4aaa:[()=>t.e(6500).then(t.bind(t,2e3)),"@theme/DocVersionRoot",2e3],a8646ade:[()=>t.e(3008).then(t.t.bind(t,1492,19)),"~docs/default/tag-docs-tags-mmkv-046.json",1492],a8f9d519:[()=>t.e(6216).then(t.t.bind(t,606,19)),"~docs/default/tag-docs-tags-scroll-to-8d4.json",606],a94703ab:[()=>Promise.all([t.e(2176),t.e(4666)]).then(t.bind(t,996)),"@theme/DocRoot",996],a951c726:[()=>t.e(8200).then(t.t.bind(t,7976,19)),"~docs/default/tag-docs-tags-ci-cd-ed9.json",7976],abaad534:[()=>t.e(2464).then(t.t.bind(t,4684,19)),"/home/runner/work/ignite-cookbook/ignite-cookbook/.docusaurus/docusaurus-theme-search-algolia/default/plugin-route-context-module-100.json",4684],abfb2977:[()=>t.e(2044).then(t.t.bind(t,6278,19)),"~docs/default/tag-docs-tags-database-1c7.json",6278],b33180cb:[()=>t.e(1528).then(t.bind(t,7160)),"@site/docs/archive/PristineExpoProject.md",7160],b3d1732c:[()=>t.e(95).then(t.t.bind(t,2464,19)),"~docs/default/tag-docs-tags-babel-ecc.json",2464],b832b2ff:[()=>t.e(4822).then(t.t.bind(t,2962,19)),"~docs/default/tag-docs-tags-imports-63f.json",2962],b8c37621:[()=>t.e(2372).then(t.t.bind(t,4328,19)),"~docs/default/tag-docs-tags-guide-a32.json",4328],c3e2f4d4:[()=>t.e(1264).then(t.bind(t,5800)),"@site/docs/recipes/UnrenderedItemInScrollView.md",5800],c47fa949:[()=>t.e(5032).then(t.bind(t,8332)),"@site/docs/recipes/ExpoRouter.md",8332],c5abe9fe:[()=>t.e(9607).then(t.t.bind(t,1344,19)),"~docs/default/tag-docs-tags-vision-camera-2ad.json",1344],c5ca3bf3:[()=>t.e(8872).then(t.t.bind(t,872,19)),"~docs/default/tag-docs-tags-expo-router-e61.json",872],c75b21fd:[()=>t.e(1412).then(t.bind(t,6188)),"@site/docs/recipes/RemoveMobxStateTree.md",6188],cc1d3934:[()=>t.e(8500).then(t.bind(t,5220)),"@site/docs/recipes/ReactNativeVisionCamera.md",5220],ccf3150e:[()=>t.e(7600).then(t.t.bind(t,3030,19)),"~docs/default/tag-docs-tags-ui-required-device-capabilities-7ff.json",3030],ce17b301:[()=>t.e(1388).then(t.t.bind(t,1540,19)),"~docs/default/tag-docs-tags-expo-4de.json",1540],cecd52bc:[()=>t.e(8).then(t.bind(t,6040)),"@site/docs/recipes/RequiringHardwareFeaturesWithExpo.md",6040],cf59a740:[()=>t.e(8780).then(t.t.bind(t,411,19)),"~docs/default/tag-docs-tags-react-native-b11.json",411],d01c4de2:[()=>t.e(7224).then(t.t.bind(t,488,19)),"~docs/default/tag-docs-tags-async-storage-da0.json",488],d0e08e4a:[()=>t.e(9016).then(t.bind(t,2980)),"@site/docs/recipes/PatchingBuildingAndroid.md",2980],d63d2b89:[()=>Promise.all([t.e(6432),t.e(5276)]).then(t.bind(t,6960)),"@site/docs/recipes/SelectFieldWithBottomSheet.mdx",6960],d699663a:[()=>t.e(1784).then(t.t.bind(t,5820,19)),"~docs/default/tag-docs-tags-uses-feature-818.json",5820],d6ab422f:[()=>t.e(8762).then(t.bind(t,7748)),"@site/docs/recipes/EnvironmentVariables.md",7748],d7af48b9:[()=>t.e(6264).then(t.bind(t,2508)),"@site/docs/recipes/EnforcingImportOrder.md",2508],da9277bc:[()=>t.e(5856).then(t.bind(t,1188)),"@site/docs/recipes/UpdatingDependencies.md",1188],dce6faa4:[()=>t.e(2596).then(t.t.bind(t,5892,19)),"~docs/default/tag-docs-tags-select-field-e86.json",5892],dd3340a6:[()=>t.e(7572).then(t.bind(t,8508)),"@site/docs/archive/index.md",8508],dec1aed8:[()=>t.e(9144).then(t.t.bind(t,4986,19)),"~docs/default/tag-docs-tags-maestro-a0f.json",4986],df203c0f:[()=>Promise.all([t.e(2176),t.e(3400)]).then(t.bind(t,8614)),"@theme/DocTagDocListPage",8614],e0854532:[()=>t.e(2288).then(t.t.bind(t,2456,19)),"~docs/default/tag-docs-tags-flat-list-bca.json",2456],e1b6b0a8:[()=>t.e(328).then(t.t.bind(t,2984,19)),"~docs/default/tag-docs-tags-debug-69b.json",2984],e2041b9b:[()=>t.e(7164).then(t.t.bind(t,9680,19)),"~docs/default/tag-docs-tags-redux-49b.json",9680],e33e793e:[()=>t.e(5708).then(t.bind(t,3356)),"@site/docs/recipes/Zustand.md",3356],e7928ab4:[()=>t.e(6460).then(t.t.bind(t,2080,19)),"/home/runner/work/ignite-cookbook/ignite-cookbook/.docusaurus/docusaurus-plugin-content-docs/default/plugin-route-context-module-100.json",2080],ecce3b64:[()=>t.e(3324).then(t.t.bind(t,4640,19)),"~docs/default/tag-docs-tags-authentication-9a3.json",4640],f50f3884:[()=>t.e(1236).then(t.t.bind(t,9720,19)),"~docs/default/tag-docs-tags-prebuild-64b.json",9720],f523b160:[()=>t.e(3504).then(t.bind(t,2232)),"@site/docs/recipes/CreatingGreateExperienceForScreenReaders.md",2232],fd1937a7:[()=>t.e(4116).then(t.t.bind(t,7472,19)),"~docs/default/tag-docs-tags-environment-variables-3be.json",7472],fe9b09bf:[()=>t.e(140).then(t.bind(t,1204)),"@site/docs/recipes/CircleCIRNSetup.md",1204],ff2c7cca:[()=>t.e(6252).then(t.t.bind(t,2248,19)),"~docs/default/tag-docs-tags-type-script-6e5.json",2248]};var s=t(7624);function l(e){let{error:n,retry:t,pastDelay:r}=e;return n?(0,s.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,s.jsx)("p",{children:String(n)}),(0,s.jsx)("div",{children:(0,s.jsx)("button",{type:"button",onClick:t,children:"Retry"})})]}):r?(0,s.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"},children:(0,s.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,s.jsxs)("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[(0,s.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,s.jsx)("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,s.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,s.jsx)("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,s.jsx)("circle",{cx:"22",cy:"22",r:"8",children:(0,s.jsx)("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})}):null}var c=t(8120),u=t(5548);function d(e,n){if("*"===e)return o()({loading:l,loader:()=>t.e(4552).then(t.bind(t,4552)),modules:["@theme/NotFound"],webpack:()=>[4552],render(e,n){const t=e.default;return(0,s.jsx)(u.Y,{value:{plugin:{name:"native",id:"default"}},children:(0,s.jsx)(t,{...n})})}});const r=a[`${e}-${n}`],d={},p=[],f=[],m=(0,c.c)(r);return Object.entries(m).forEach((e=>{let[n,t]=e;const r=i[t];r&&(d[n]=r[0],p.push(r[1]),f.push(r[2]))})),o().Map({loading:l,loader:d,modules:p,webpack:()=>f,render(n,t){const o=JSON.parse(JSON.stringify(r));Object.entries(n).forEach((n=>{let[t,r]=n;const a=r.default;if(!a)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 a&&"function"!=typeof a||Object.keys(r).filter((e=>"default"!==e)).forEach((e=>{a[e]=r[e]}));let i=o;const s=t.split(".");s.slice(0,-1).forEach((e=>{i=i[e]})),i[s[s.length-1]]=a}));const a=o.__comp;delete o.__comp;const i=o.__context;return delete o.__context,(0,s.jsx)(u.Y,{value:i,children:(0,s.jsx)(a,{...o,...t})})}})}const p=[{path:"/search",component:d("/search","437"),exact:!0},{path:"/docs",component:d("/docs","384"),routes:[{path:"/docs",component:d("/docs","086"),routes:[{path:"/docs/tags",component:d("/docs/tags","0cc"),exact:!0},{path:"/docs/tags/accessibility",component:d("/docs/tags/accessibility","8aa"),exact:!0},{path:"/docs/tags/android",component:d("/docs/tags/android","e3a"),exact:!0},{path:"/docs/tags/apisauce",component:d("/docs/tags/apisauce","143"),exact:!0},{path:"/docs/tags/archive",component:d("/docs/tags/archive","51b"),exact:!0},{path:"/docs/tags/async-storage",component:d("/docs/tags/async-storage","afc"),exact:!0},{path:"/docs/tags/authentication",component:d("/docs/tags/authentication","587"),exact:!0},{path:"/docs/tags/babel",component:d("/docs/tags/babel","e90"),exact:!0},{path:"/docs/tags/backend",component:d("/docs/tags/backend","908"),exact:!0},{path:"/docs/tags/ci-cd",component:d("/docs/tags/ci-cd","56c"),exact:!0},{path:"/docs/tags/cng",component:d("/docs/tags/cng","581"),exact:!0},{path:"/docs/tags/data-synchronization",component:d("/docs/tags/data-synchronization","453"),exact:!0},{path:"/docs/tags/database",component:d("/docs/tags/database","7e4"),exact:!0},{path:"/docs/tags/debug",component:d("/docs/tags/debug","888"),exact:!0},{path:"/docs/tags/dependencies",component:d("/docs/tags/dependencies","c34"),exact:!0},{path:"/docs/tags/eas",component:d("/docs/tags/eas","17a"),exact:!0},{path:"/docs/tags/eas-update",component:d("/docs/tags/eas-update","632"),exact:!0},{path:"/docs/tags/environment-variables",component:d("/docs/tags/environment-variables","0f3"),exact:!0},{path:"/docs/tags/expo",component:d("/docs/tags/expo","a41"),exact:!0},{path:"/docs/tags/expo-dev-client",component:d("/docs/tags/expo-dev-client","0df"),exact:!0},{path:"/docs/tags/expo-router",component:d("/docs/tags/expo-router","257"),exact:!0},{path:"/docs/tags/expo-updates",component:d("/docs/tags/expo-updates","807"),exact:!0},{path:"/docs/tags/flat-list",component:d("/docs/tags/flat-list","5a7"),exact:!0},{path:"/docs/tags/generator",component:d("/docs/tags/generator","80e"),exact:!0},{path:"/docs/tags/guide",component:d("/docs/tags/guide","cea"),exact:!0},{path:"/docs/tags/hardware",component:d("/docs/tags/hardware","303"),exact:!0},{path:"/docs/tags/i-os",component:d("/docs/tags/i-os","96e"),exact:!0},{path:"/docs/tags/imports",component:d("/docs/tags/imports","887"),exact:!0},{path:"/docs/tags/intro",component:d("/docs/tags/intro","b42"),exact:!0},{path:"/docs/tags/maestro",component:d("/docs/tags/maestro","034"),exact:!0},{path:"/docs/tags/mmkv",component:d("/docs/tags/mmkv","f7e"),exact:!0},{path:"/docs/tags/mob-x",component:d("/docs/tags/mob-x","a01"),exact:!0},{path:"/docs/tags/offline-support",component:d("/docs/tags/offline-support","6ec"),exact:!0},{path:"/docs/tags/power-sync",component:d("/docs/tags/power-sync","dca"),exact:!0},{path:"/docs/tags/prebuild",component:d("/docs/tags/prebuild","83d"),exact:!0},{path:"/docs/tags/prettier",component:d("/docs/tags/prettier","db7"),exact:!0},{path:"/docs/tags/react-native",component:d("/docs/tags/react-native","873"),exact:!0},{path:"/docs/tags/react-native-vision-camera",component:d("/docs/tags/react-native-vision-camera","ea0"),exact:!0},{path:"/docs/tags/react-navigation",component:d("/docs/tags/react-navigation","0ad"),exact:!0},{path:"/docs/tags/redux",component:d("/docs/tags/redux","c5e"),exact:!0},{path:"/docs/tags/scroll-to",component:d("/docs/tags/scroll-to","f32"),exact:!0},{path:"/docs/tags/section-list",component:d("/docs/tags/section-list","8de"),exact:!0},{path:"/docs/tags/select-field",component:d("/docs/tags/select-field","5f4"),exact:!0},{path:"/docs/tags/state-management",component:d("/docs/tags/state-management","181"),exact:!0},{path:"/docs/tags/testing",component:d("/docs/tags/testing","b53"),exact:!0},{path:"/docs/tags/text-field",component:d("/docs/tags/text-field","782"),exact:!0},{path:"/docs/tags/type-script",component:d("/docs/tags/type-script","825"),exact:!0},{path:"/docs/tags/ui",component:d("/docs/tags/ui","020"),exact:!0},{path:"/docs/tags/ui-required-device-capabilities",component:d("/docs/tags/ui-required-device-capabilities","73a"),exact:!0},{path:"/docs/tags/uses-feature",component:d("/docs/tags/uses-feature","f1a"),exact:!0},{path:"/docs/tags/vision-camera",component:d("/docs/tags/vision-camera","e9b"),exact:!0},{path:"/docs/tags/yarn",component:d("/docs/tags/yarn","e4e"),exact:!0},{path:"/docs/tags/zustand",component:d("/docs/tags/zustand","24d"),exact:!0},{path:"/docs",component:d("/docs","058"),routes:[{path:"/docs/archive/",component:d("/docs/archive/","ab8"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/archive/PristineExpoProject",component:d("/docs/archive/PristineExpoProject","afa"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/intro",component:d("/docs/intro","194"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/AccessibilityFontSizes",component:d("/docs/recipes/AccessibilityFontSizes","872"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/CircleCIRNSetup",component:d("/docs/recipes/CircleCIRNSetup","ce2"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/CreatingGreateExperienceForScreenReaders",component:d("/docs/recipes/CreatingGreateExperienceForScreenReaders","752"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/DetoxIntro",component:d("/docs/recipes/DetoxIntro","700"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/DistributingAuthTokenToAPI",component:d("/docs/recipes/DistributingAuthTokenToAPI","298"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/EASUpdate",component:d("/docs/recipes/EASUpdate","938"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/EnforcingImportOrder",component:d("/docs/recipes/EnforcingImportOrder","713"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/EnvironmentVariables",component:d("/docs/recipes/EnvironmentVariables","92b"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/ExpoRouter",component:d("/docs/recipes/ExpoRouter","0b5"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/GeneratorComponentTests",component:d("/docs/recipes/GeneratorComponentTests","e55"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/LocalFirstDataWithPowerSync",component:d("/docs/recipes/LocalFirstDataWithPowerSync","9a4"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/MaestroSetup",component:d("/docs/recipes/MaestroSetup","237"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/MigratingToMMKV",component:d("/docs/recipes/MigratingToMMKV","9d0"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/PatchingBuildingAndroid",component:d("/docs/recipes/PatchingBuildingAndroid","ac8"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/PrepForEASBuild",component:d("/docs/recipes/PrepForEASBuild","64a"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/ReactNativeVisionCamera",component:d("/docs/recipes/ReactNativeVisionCamera","e2e"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/Redux",component:d("/docs/recipes/Redux","0f8"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/RemoveMobxStateTree",component:d("/docs/recipes/RemoveMobxStateTree","50f"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/RequiringHardwareFeaturesWithExpo",component:d("/docs/recipes/RequiringHardwareFeaturesWithExpo","2fd"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/SampleYAMLCircleCI",component:d("/docs/recipes/SampleYAMLCircleCI","30a"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/SelectFieldWithBottomSheet",component:d("/docs/recipes/SelectFieldWithBottomSheet","ca3"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/SwitchBetweenExpoGoCNG",component:d("/docs/recipes/SwitchBetweenExpoGoCNG","695"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/TypeScriptBaseURL",component:d("/docs/recipes/TypeScriptBaseURL","986"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/UnrenderedItemInScrollView",component:d("/docs/recipes/UnrenderedItemInScrollView","c15"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/UpdatingDependencies",component:d("/docs/recipes/UpdatingDependencies","21c"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/UpdatingIgnite",component:d("/docs/recipes/UpdatingIgnite","f0c"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/UsingScreenReaders",component:d("/docs/recipes/UsingScreenReaders","324"),exact:!0,sidebar:"mainSidebar"},{path:"/docs/recipes/Zustand",component:d("/docs/recipes/Zustand","0e1"),exact:!0,sidebar:"mainSidebar"}]}]}]},{path:"/",component:d("/","703"),exact:!0},{path:"*",component:d("*")}]},240:(e,n,t)=>{"use strict";t.d(n,{e:()=>a,g:()=>i});var r=t(1504),o=t(7624);const a=r.createContext(!1);function i(e){let{children:n}=e;const[t,i]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{i(!0)}),[]),(0,o.jsx)(a.Provider,{value:t,children:n})}},8808:(e,n,t)=>{"use strict";var r=t(1504),o=t(8352),a=t(440),i=t(2160),s=t(8684);const l=[t(7483),t(1462),t(5396),t(1976),t(9115)];var c=t(628),u=t(5592),d=t(5464),p=t(7624);function f(e){let{children:n}=e;return(0,p.jsx)(p.Fragment,{children:n})}var m=t(6952),g=t(8264),h=t(964),y=t(1824),b=t(5008),v=t(1616),S=t(204),w=t(4456),x=t(5684),k=t(8712);function T(){const{i18n:{currentLocale:e,defaultLocale:n,localeConfigs:t}}=(0,g.c)(),r=(0,v.D)(),o=t[e].htmlLang,a=e=>e.replace("-","_");return(0,p.jsxs)(m.c,{children:[Object.entries(t).map((e=>{let[n,{htmlLang:t}]=e;return(0,p.jsx)("link",{rel:"alternate",href:r.createUrl({locale:n,fullyQualified:!0}),hrefLang:t},n)})),(0,p.jsx)("link",{rel:"alternate",href:r.createUrl({locale:n,fullyQualified:!0}),hrefLang:"x-default"}),(0,p.jsx)("meta",{property:"og:locale",content:a(o)}),Object.values(t).filter((e=>o!==e.htmlLang)).map((e=>(0,p.jsx)("meta",{property:"og:locale:alternate",content:a(e.htmlLang)},`meta-og-${e.htmlLang}`)))]})}function E(e){let{permalink:n}=e;const{siteConfig:{url:t}}=(0,g.c)(),r=function(){const{siteConfig:{url:e,baseUrl:n,trailingSlash:t}}=(0,g.c)(),{pathname:r}=(0,u.IT)();return e+(0,x.applyTrailingSlash)((0,h.c)(r),{trailingSlash:t,baseUrl:n})}(),o=n?`${t}${n}`:r;return(0,p.jsxs)(m.c,{children:[(0,p.jsx)("meta",{property:"og:url",content:o}),(0,p.jsx)("link",{rel:"canonical",href:o})]})}function C(){const{i18n:{currentLocale:e}}=(0,g.c)(),{metadata:n,image:t}=(0,y.y)();return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsxs)(m.c,{children:[(0,p.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,p.jsx)("body",{className:S.m})]}),t&&(0,p.jsx)(b.U7,{image:t}),(0,p.jsx)(E,{}),(0,p.jsx)(T,{}),(0,p.jsx)(k.c,{tag:w.e6,locale:e}),(0,p.jsx)(m.c,{children:n.map(((e,n)=>(0,p.jsx)("meta",{...e},n)))})]})}const _=new Map;function A(e){if(_.has(e.pathname))return{...e,pathname:_.get(e.pathname)};if((0,d.C)(c.c,e.pathname).some((e=>{let{route:n}=e;return!0===n.exact})))return _.set(e.pathname,e.pathname),e;const n=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return _.set(e.pathname,n),{...e,pathname:n}}var I=t(240),P=t(136),L=t(5288);function R(e){for(var n=arguments.length,t=new Array(n>1?n-1:0),r=1;r<n;r++)t[r-1]=arguments[r];const o=l.map((n=>{const r=n.default?.[e]??n[e];return r?.(...t)}));return()=>o.forEach((e=>e?.()))}const N=function(e){let{children:n,location:t,previousLocation:r}=e;return(0,L.c)((()=>{r!==t&&(!function(e){let{location:n,previousLocation:t}=e;if(!t)return;const r=n.pathname===t.pathname,o=n.hash===t.hash,a=n.search===t.search;if(r&&o&&!a)return;const{hash:i}=n;if(i){const e=decodeURIComponent(i.substring(1)),n=document.getElementById(e);n?.scrollIntoView()}else window.scrollTo(0,0)}({location:t,previousLocation:r}),R("onRouteDidUpdate",{previousLocation:r,location:t}))}),[r,t]),n};function O(e){const n=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,d.C)(c.c,e))).flat();return Promise.all(n.map((e=>e.route.component.preload?.())))}class F extends r.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=s.c.canUseDOM?R("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,n){if(e.location===this.props.location)return n.nextRouteHasLoaded;const t=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=R("onRouteUpdate",{previousLocation:this.previousLocation,location:t}),O(t.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:n}=this.props;return(0,p.jsx)(N,{previousLocation:this.previousLocation,location:n,children:(0,p.jsx)(u.kX,{location:n,render:()=>e})})}}const j=F,D="__docusaurus-base-url-issue-banner-container",M="__docusaurus-base-url-issue-banner",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 = '${D}';\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 U(){const{siteConfig:{baseUrl:e}}=(0,g.c)();return(0,p.jsx)(p.Fragment,{children:!s.c.canUseDOM&&(0,p.jsx)(m.c,{children:(0,p.jsx)("script",{children:$(e)})})})}function V(){const{siteConfig:{baseUrl:e,baseUrlIssueBanner:n}}=(0,g.c)(),{pathname:t}=(0,u.IT)();return n&&t===e?(0,p.jsx)(U,{}):null}function z(){const{siteConfig:{favicon:e,title:n,noIndex:t},i18n:{currentLocale:r,localeConfigs:o}}=(0,g.c)(),a=(0,h.c)(e),{htmlLang:i,direction:s}=o[r];return(0,p.jsxs)(m.c,{children:[(0,p.jsx)("html",{lang:i,dir:s}),(0,p.jsx)("title",{children:n}),(0,p.jsx)("meta",{property:"og:title",content:n}),(0,p.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),t&&(0,p.jsx)("meta",{name:"robots",content:"noindex, nofollow"}),e&&(0,p.jsx)("link",{rel:"icon",href:a})]})}var H=t(5852),W=t(3664);function G(){const e=(0,W.c)();return(0,p.jsx)(m.c,{children:(0,p.jsx)("html",{"data-has-hydrated":e})})}function q(){const e=(0,d.k)(c.c),n=(0,u.IT)();return(0,p.jsx)(H.c,{children:(0,p.jsx)(P.y,{children:(0,p.jsxs)(I.g,{children:[(0,p.jsxs)(f,{children:[(0,p.jsx)(z,{}),(0,p.jsx)(C,{}),(0,p.jsx)(V,{}),(0,p.jsx)(j,{location:A(n),children:e})]}),(0,p.jsx)(G,{})]})})})}var Y=t(4504);const K=function(e){try{return document.createElement("link").relList.supports(e)}catch{return!1}}("prefetch")?function(e){return new Promise(((n,t)=>{if("undefined"==typeof document)return void t();const r=document.createElement("link");r.setAttribute("rel","prefetch"),r.setAttribute("href",e),r.onload=()=>n(),r.onerror=()=>t();const o=document.getElementsByTagName("head")[0]??document.getElementsByName("script")[0]?.parentNode;o?.appendChild(r)}))}:function(e){return new Promise(((n,t)=>{const r=new XMLHttpRequest;r.open("GET",e,!0),r.withCredentials=!0,r.onload=()=>{200===r.status?n():t()},r.send(null)}))};var X=t(8120);const Q=new Set,Z=new Set,J=()=>navigator.connection?.effectiveType.includes("2g")||navigator.connection?.saveData,ee={prefetch(e){if(!(e=>!J()&&!Z.has(e)&&!Q.has(e))(e))return!1;Q.add(e);const n=(0,d.C)(c.c,e).flatMap((e=>{return n=e.route.path,Object.entries(Y).filter((e=>{let[t]=e;return t.replace(/-[^-]+$/,"")===n})).flatMap((e=>{let[,n]=e;return Object.values((0,X.c)(n))}));var n}));return Promise.all(n.map((e=>{const n=t.gca(e);return n&&!n.includes("undefined")?K(n).catch((()=>{})):Promise.resolve()})))},preload:e=>!!(e=>!J()&&!Z.has(e))(e)&&(Z.add(e),O(e))},ne=Object.freeze(ee),te=Boolean(!0);if(s.c.canUseDOM){window.docusaurus=ne;const e=document.getElementById("__docusaurus"),n=(0,p.jsx)(i.EN,{children:(0,p.jsx)(a.kn,{children:(0,p.jsx)(q,{})})}),t=(e,n)=>{console.error("Docusaurus React Root onRecoverableError:",e,n)},s=()=>{if(te)r.startTransition((()=>{o.hydrateRoot(e,n,{onRecoverableError:t})}));else{const a=o.createRoot(e,{onRecoverableError:t});r.startTransition((()=>{a.render(n)}))}};O(window.location.pathname).then(s)}},136:(e,n,t)=>{"use strict";t.d(n,{e:()=>d,y:()=>p});var r=t(1504),o=t(7768);const a=JSON.parse('{"docusaurus-plugin-google-gtag":{"default":{"trackingID":["G-1NP64B0XVM"],"anonymizeIP":true,"id":"default"}},"example-code-snippets":{"default":{"snippets":[{"author":"Mark Rickert","content":"import * as React from \\"react\\";\\nimport { View, TextProps, PixelRatio, AppState } from \\"react-native\\";\\nimport { MaterialTopTabNavigationOptions } from \\"@react-navigation/material-top-tabs\\";\\nimport { StackNavigationOptions } from \\"@react-navigation/stack\\";\\nimport { BottomTabNavigationOptions } from \\"@react-navigation/bottom-tabs\\";\\nimport { DrawerNavigationOptions } from \\"@react-navigation/drawer\\";\\nimport { Text } from \\"./Text\\";\\n\\n// These constants determine how much bigger the font size should get based on the user\'s\\n// accessibility settings. Even if they turn the dial all the way to 11, we will only ever\\n// scale the fonts by these factors. This is to prevent the font size from getting too large\\n// and completely breaking the layout.\\nconst MAX_FONT_SCALE = 1.2;\\nconst MIN_FONT_SCALE = 0.8;\\n\\n// Returns fontScaling props for Text and TextInput components\\n// Usage:\\n// const fontProps = useFontScaling();\\n// return <Text {...fontProps}>Text Here</Text>;\\nexport const useFontScaling = (): Partial<TextProps> => {\\n  // You probably want to get this value from your user\'s preferences\\n  const [allowFontScaling,] = React.useState(true);\\n\\n  const fontScaling: Partial<TextProps> = React.useMemo(() => {\\n    return {\\n      minimumFontScale: allowFontScaling ? MIN_FONT_SCALE : 1, // This prevents the font from getting too small.\\n      maxFontSizeMultiplier: allowFontScaling ? MAX_FONT_SCALE : 1, // This prevents the font from getting too big.\\n      allowFontScaling, // This allows the font to be scaled or not.\\n    };\\n  }, [allowFontScaling]);\\n\\n  return fontScaling;\\n};\\n\\n// Returns fontScaling props for Navigator components\\nexport const useNavigatorFontScalingScreenOptions =\\n  (): Partial<StackNavigationOptions> => {\\n    // You probably want to get this value from your user\'s preferences\\n    const [allowFontScaling,] = React.useState(true);\\n\\n    const fontScaling: Partial<StackNavigationOptions> = React.useMemo(() => {\\n      return {\\n        headerBackAllowFontScaling: allowFontScaling,\\n        headerTitleAllowFontScaling: allowFontScaling,\\n      };\\n    }, [allowFontScaling]);\\n\\n    return fontScaling;\\n  };\\n\\n// Returns fontScaling props for Top Tab Navigator components\\nexport const useTopTabNavigatorFontScalingScreenOptions =\\n  (): Partial<MaterialTopTabNavigationOptions> => {\\n    // You probably want to get this value from your user\'s preferences\\n    const [allowFontScaling,] = React.useState(true);\\n\\n    const fontScaling: Partial<MaterialTopTabNavigationOptions> =\\n      React.useMemo(() => {\\n        return {\\n          tabBarAllowFontScaling: allowFontScaling,\\n        };\\n      }, [allowFontScaling]);\\n\\n    return fontScaling;\\n  };\\n\\n// Returns fontScaling props for Tab Navigator components\\nexport const useTabNavigatorFontScalingScreenOptions =\\n  (): Partial<BottomTabNavigationOptions> => {\\n    // You probably want to get this value from your user\'s preferences\\n    const [allowFontScaling,] = React.useState(true);\\n\\n    const fontScaling: Partial<BottomTabNavigationOptions> =\\n      React.useMemo(() => {\\n        return {\\n          tabBarAllowFontScaling: fontScaling,\\n          headerTitleAllowFontScaling: fontScaling,\\n        };\\n      }, [allowFontScaling]);\\n\\n    return fontScaling;\\n  };\\n\\n// Returns fontScaling props for Tab Navigator components\\nexport const useDrawerNavigatorFontScalingScreenOptions =\\n  (): Partial<DrawerNavigationOptions> => {\\n    const [allowFontScaling,] = React.useState(true);\\n\\n    const fontScaling: Partial<DrawerNavigationOptions> = React.useMemo(() => {\\n      return {\\n        drawerAllowFontScaling: allowFontScaling,\\n        headerTitleAllowFontScaling: allowFontScaling,\\n      };\\n    }, [allowFontScaling]);\\n\\n    return fontScaling;\\n  };\\n\\n// Use this handy __DEV__ mode only component to figure out what the font size is actually doing.\\nexport const DevFontSize = () => {\\n  const [allowFontScaling,] = React.useState(true);\\n  const [appStateVisible, setAppStateVisible] = React.useState(\\n    AppState.currentState\\n  );\\n\\n  React.useEffect(() => {\\n    const subscription = AppState.addEventListener(\\"change\\", (nextAppState) => {\\n      setAppStateVisible(nextAppState);\\n    });\\n\\n    return () => subscription.remove();\\n  }, []);\\n\\n  // This memo has to listen to appStateVisible even though it\'s not a direct dependency\\n  // so that we can reload the font size when the app switches back from user settings.\\n  const fontSize = React.useMemo(() => {\\n    if (allowFontScaling) {\\n      return Math.min(\\n        Math.max(PixelRatio.getFontScale(), MIN_FONT_SCALE),\\n        MAX_FONT_SCALE\\n      );\\n    } else {\\n      return 1.0;\\n    }\\n  }, [allowFontScaling, appStateVisible]); // eslint-disable-line react-hooks/exhaustive-deps\\n\\n  return __DEV__ ? (\\n    <View style={{\\n      backgroundColor: \'#E58F83\',\\n      padding: 10,\\n      margin: 10,\\n      borderRadius: 5,\\n      borderColor: \'#000,\\n      borderWidth: 1,\\n    }}>\\n      <Text>\\n        User Font Setting: {Math.trunc(PixelRatio.getFontScale() * 100) / 100}\\n      </Text>\\n      <Text>\\n        Currently limiting ratio to: {Math.trunc(fontSize * 100) / 100}\\n      </Text>\\n    </View>\\n  ) : null;\\n};\\n\\n","lastUpdated":"1 year, 2 months ago","title":"Accessiblity Font Sizes","publish_date":"2022-10-09","doc_name":"AccessibilityFontSizes.md"},{"author":"Robin Heinze","content":"defaults: &defaults\\n  docker:\\n    # Choose the version of Node you want here\\n    - image: circleci/node:10.11\\n  working_directory: ~/repo\\n\\nversion: 2\\njobs:\\n  setup:\\n    <<: *defaults\\n    steps:\\n      - checkout\\n      - restore_cache:\\n          keys:\\n            - v1-dependencies-node-{{ checksum \\"package.json\\" }}\\n            # fallback to using the latest cache if no exact match is found\\n            - v1-dependencies-node-\\n      - run:\\n          name: Install dependencies\\n          command: yarn install\\n      - save_cache:\\n          name: Save node modules\\n          paths:\\n            - node_modules\\n          key: v1-dependencies-node-{{ checksum \\"package.json\\" }}\\n\\n  tests:\\n    <<: *defaults\\n    steps:\\n      - checkout\\n      - restore_cache:\\n          keys:\\n            - v1-dependencies-node-{{ checksum \\"package.json\\" }}\\n            # fallback to using the latest cache if no exact match is found\\n            - v1-dependencies-node-\\n      - run:\\n          name: Run tests\\n          command: yarn ci:test # this command will be added to/found in your package.json scripts\\n\\nworkflows:\\n  version: 2\\n  test_and_release:\\n    jobs:\\n      - setup\\n      - tests:\\n          requires:\\n            - setup\\n\\n  {\\n    ...\\n    \\"scripts\\": {\\n      ...\\n      \\"ci:test\\": \\"<command to run tests>\\" <<-- if you don\'t already have this one\\n    },\\n    ...\\n  }\\n\\nbefore_all do\\n setup_circle_ci\\nend\\n\\nPROJECT = \\"YourProject\\"\\nXCODE_PROJECT    = \\"#{PROJECT}.xcodeproj\\"\\n  lane :beta do\\n    increment_build_number(xcodeproj: \\"./#{XCODE_PROJECT}\\")\\n    match(type: \\"appstore\\")\\n    build_ios_app(\\n      scheme: PROJECT,\\n      workspace: \\"./YourProject.xcworkspace\\",\\n      xcargs: \\"-UseNewBuildSystem=NO -allowProvisioningUpdates\\",\\n      export_method: \\"app-store\\"\\n    )\\n    # Ship it!\\n    upload_to_testflight(\\n      skip_waiting_for_build_processing: true\\n    )\\n    commit_version_bump(\\n      xcodeproj: \\"./#{XCODE_PROJECT}\\",\\n      ignore: /tvOS/,\\n      force: true,\\n      message: \\"[skip ci] Version bump\\"\\n    )\\n  end\\n\\n  {\\n    ...\\n    \\"scripts\\": {\\n      ...\\n      \\"ci:setup\\": \\"touch .env && echo \\\\\\"ENV_VAR=\\\\\\"$ENV_VAR >> .env\\",\\n    },\\n    ...\\n  }\\n\\ndefaults: ...\\n\\nmac: &mac\\n  macos:\\n    xcode: \\"10.1.0\\"\\n  working_directory: ~/repo\\n  environment:\\n    FL_OUTPUT_DIR: output\\n  shell: /bin/bash --login -o pipefail\\n\\nversion: 2\\njobs:\\n  setup: ...\\n\\n  tests: ...\\n\\n  deploy_ios:\\n    <<: *mac\\n    steps:\\n      - checkout\\n      - add_ssh_keys:\\n          fingerprints: \u2014 \u201cSSH_FINGERPRINT_HERE\u201d\\n      - run:\\n          name: Git configuration\\n          command: git config user.email \\"ci@your.domain\\" && git config user.name \\"CircleCI\\"\\n      - run:\\n          name: Set upstream branch\\n          command: git branch --set-upstream-to origin ${CIRCLE_BRANCH}\\n      # Node modules\\n      - restore_cache:\\n          name: Restore node modules\\n          keys:\\n            - v1-dependencies-mac-{{ checksum \\"package.json\\" }}\\n            # fallback to using the latest cache if no exact match is found\\n            - v1-dependencies-mac-\\n      - run:\\n          name: Install dependencies\\n          command: NOYARNPOSTINSTALL=1 yarn install\\n      - save_cache:\\n          name: Save node modules\\n          paths:\\n            - node_modules\\n          key: v1-dependencies-mac-{{ checksum \\"package.json\\" }}\\n\\n      # Cocoapods\\n      - run:\\n          name: Fetch CocoaPods Specs\\n          command: |\\n            curl https://cocoapods-specs.circleci.com/fetch-cocoapods-repo-from-s3.sh | bash -s cf\\n      - run:\\n          working_directory: ios\\n          name: Install CocoaPods\\n          command: pod install --verbose\\n\\n      # Gems\\n      - restore_cache:\\n          name: Restore gems\\n          key: bundle-v1-{{ checksum \\"ios/Gemfile.lock\\" }}-{{ arch }}\\n      - run:\\n          name: Bundle Install\\n          command: bundle install\\n          working_directory: ios\\n      - save_cache:\\n          key: bundle-v1-{{ checksum \\"ios/Gemfile.lock\\" }}-{{ arch }}\\n          paths:\\n            - vendor/bundle\\n\\n      # Misc setup\\n      - run:\\n          name: Misc setup\\n          command: yarn ci:setup\\n\\n      # Git grooming\\n      - run:\\n          name: Pull latest git\\n          command: git stash && git pull && git stash pop\\n\\n      # Run Fastlane\\n      - run:\\n          working_directory: ios\\n          name: Fastlane\\n          command: bundle exec fastlane ios beta\\n\\n      # Git cleanup\\n      - run:\\n          name: Pull latest git\\n          command: git stash && git pull && git stash pop\\n      - run:\\n          name: Push version bump commit\\n          command: git push\\n      - store_artifacts:\\n          path: output\\n\\nworkflows:\\n  version: 2\\n  test_and_release:\\n    jobs:\\n      - setup\\n      - tests:\\n          requires:\\n            - setup\\n      - deploy_ios:\\n          filters:\\n            branches:\\n              only: master\\n\\n\\n**Troubleshooting tips**\\n\\n- If you need to debug failed builds, you can use the \\"Rebuild with SSH\\" option in CircleCI. See [https://circleci.com/docs/2.0/ssh-access-jobs/](https://circleci.com/docs/2.0/ssh-access-jobs/) for more info.\\n- Tip: make sure you are logged in to Github/CircleCI as yourself (not the CI user) when you hit the button to rebuild with SSH.\\n- If you get a vague error saying `File main.jsbundle does not exist`, that means there was an error while building the app and you can view the more detailed message by inspecting the log files with the following command (while in SSH mode). Increase the number of lines from 50 as needed.\\n- `tail -50 ios/output/buildlogs/gym/YourProject-YourProject.log`\\n","lastUpdated":"1 year, 3 months ago","title":"CircleCI CD Setup - React Native","publish_date":"2022-10-09","doc_name":"CircleCIRNSetup.md"},{"author":"Ellie Croce","content":"export const DEFAULT_API_CONFIG: ApiConfig = {\\n  url: Config.API_URL,\\n  timeout: 10000,\\n}\\n\\n\\nexport class Api {\\n  apisauce: ApisauceInstance\\n  config: ApiConfig\\n\\n  constructor(config: ApiConfig = DEFAULT_API_CONFIG) {\\n    this.config = config\\n    this.apisauce = create({\\n      baseURL: this.config.url,\\n      timeout: this.config.timeout,\\n      headers: {\\n        Accept: \\"application/json\\",\\n      },\\n    })\\n  }\\n\\n  async getEpisodes(): Promise<{ kind: \\"ok\\"; episodes: EpisodeSnapshotIn[] } | GeneralApiProblem> {\\n    ... // example API call that needs authenticating\\n  }\\n\\n}\\n\\n// Singleton instance of the API for convenience\\nexport const api = new Api()\\n\\nimport { Instance, SnapshotOut, types } from \\"mobx-state-tree\\";\\n\\nexport const AuthenticationStoreModel = types\\n  .model(\\"AuthenticationStore\\")\\n  .props({\\n    authToken: types.maybe(types.string),\\n    authEmail: \\"\\",\\n  })\\n  .views((store) => ({}))\\n  .actions((store) => ({\\n    setAuthToken(value?: string) {\\n      store.authToken = value;\\n    },\\n  }));\\n\\nexport interface AuthenticationStore\\n  extends Instance<typeof AuthenticationStoreModel> {}\\nexport interface AuthenticationStoreSnapshot\\n  extends SnapshotOut<typeof AuthenticationStoreModel> {}\\n\\n\\t// We will need to import the api from the service\\n\\timport { api } from \\"app/services/api\\"\\n\\n  ...\\n\\n  // then update the Authentication Model actions\\n  .actions((store) => ({\\n    setAuthToken(value?: string) {\\n      store.authToken = value;\\n    },\\n    distributeAuthToken(value?: string) {\\n      // optionally grab the store\'s authToken if not passing a value\\n      const token = value || store.authToken;\\n      api.apiSauce.setHeader(\\"Authorization\\", `Bearer ${token}`);\\n    },\\n  })\\n\\n\\t// We can update `authenticationStore` from the useStores hook to include `distributeAuthToken`\\n\\tconst {\\n\\t    authenticationStore: { authEmail, setAuthEmail, setAuthToken, distributeAuthToken, validationError },\\n\\t  } = useStores()\\n\\n\\t  ...\\n\\n  function login() {\\n    setIsSubmitted(true);\\n    setAttemptsCount(attemptsCount + 1);\\n\\n    if (validationError) return;\\n\\n    // Make a request to your server to get an authentication token.\\n    // If successful, reset the fields and set the token.\\n    setIsSubmitted(false);\\n    setAuthPassword(\\"\\");\\n    setAuthEmail(\\"\\");\\n\\n    // We\'ll mock this with a fake token.\\n    const token = String(Date.now());\\n    setAuthToken(token);\\n    distributeAuthToken(token);\\n  }\\n\\n","lastUpdated":"11 months ago","title":"Distributing Auth Token to APIs","publish_date":"2023-05-09","doc_name":"DistributingAuthTokenToAPI.md"},{"author":"Frank Calise","content":"npm install -g eas-cli\\n\\nnpx expo install expo-updates\\neas build:configure\\n\\neas update:configure\\n\\n{\\n  \\"cli\\": {\\n    \\"version\\": \\">= 3.0.0\\"\\n  },\\n  \\"build\\": {\\n    \\"development\\": {\\n      \\"developmentClient\\": true,\\n      \\"distribution\\": \\"internal\\"\\n    },\\n    \\"preview\\": {\\n      \\"channel\\": \\"preview\\",\\n      \\"android\\": { \\"buildType\\": \\"apk\\" },\\n      \\"ios\\": { \\"simulator\\": false }\\n    },\\n    \\"production\\": {}\\n  },\\n  \\"submit\\": {\\n    \\"production\\": {}\\n  }\\n}\\n\\n# via EAS\\neas build --profile preview -p android\\n\\n# locally\\neas build --profile preview -p android --local\\n\\n// error-line\\n<Text testID=\\"login-heading\\" tx=\\"loginScreen.signIn\\" preset=\\"heading\\" style={$signIn} />\\n// success-line\\n<Text testID=\\"login-heading\\" text=\\"Welcome! Please sign in\\" preset=\\"heading\\" style={$signIn} />\\n\\neas channel:create preview\\n\\neas update --branch preview --message \\"update login screen\\"\\n\\n{\\n  // ...\\n  \\"updates\\": {\\n    \\"checkAutomatically\\": \\"ON_ERROR_RECOVERY\\"\\n    // ...\\n  }\\n}\\n\\n","lastUpdated":"8 weeks ago","title":"EAS Update","publish_date":"2023-01-06","doc_name":"EASUpdate.md"},{"author":"Mark Rickert","content":"npx ignite-cli new PizzaApp --workflow=cng --yes\\ncd PizzaApp\\n\\nyarn add --dev @serverless-guru/prettier-plugin-import-order\\n\\n// @ts-check\\n/** @type {import(\\"@serverless-guru/prettier-plugin-import-order\\").PrettierConfig} */\\nmodule.exports = {\\n  // begin: settings from the package.json file\\n  printWidth: 100,\\n  semi: false,\\n  singleQuote: false,\\n  trailingComma: \\"all\\",\\n  // end: settings from the package.json file\\n\\n  // Sort and group imports using the @serverless-guru/prettier-import-order plugin.\\n  // https://github.com/serverless-guru/prettier-import-order\\n  //\\n  // See documentation and usage: https://www.npmjs.com/package/@serverless-guru/prettier-plugin-import-order#usage\\n  importOrder: [\\n    \\"^react(-native)?$\\", // React and react-native stuff goes at the top\\n    \\"\\", // use empty strings to separate groups with empty lines\\n    \\"<THIRD_PARTY_MODULES>\\", // Third party modules (this is a plugin keyword)\\n    \\"\\",\\n    \\"^app/(.*)$\\",\\n    \\"\\",\\n    \\"^../(.*)$\\", // Local imports in parent directories\\n    \\"^./(.*)$\\", // Local imports in current directory\\n  ],\\n  importOrderSeparation: false, // turn this on to see the sorting groups.\\n  importOrderSortIndividualImports: true,\\n  importOrderMergeDuplicateImports: true,\\n  importOrderTypeImportsToTop: true, // Set this to false if you want type imports to be sorted with the rest of the imports\\n  importOrderCaseInsensitive: true,\\n  importOrderParserPlugins: [\\"typescript\\", \\"jsx\\"],\\n  // End sort options\\n}\\n\\nyarn format\\n\\n","lastUpdated":"7 weeks ago","title":"Enforcing JS/TS Import Order","publish_date":"2024-02-29","doc_name":"EnforcingImportOrder.md"},{"author":"Frank Calise","content":"yarn add -D dotenv babel-plugin-inline-dotenv\\n\\n// babel.config.js\\n\\nconst plugins = [\\n  [\\n    \\"@babel/plugin-proposal-decorators\\",\\n    {\\n      legacy: true,\\n    },\\n  ],\\n  [\\"@babel/plugin-proposal-optional-catch-binding\\"],\\n  \\"inline-dotenv\\",\\n  \\"react-native-reanimated/plugin\\", // NOTE: this must be last in the plugins\\n];\\n\\nconst expoConfig = {\\n  presets: [\\"babel-preset-expo\\"],\\n  env: {\\n    production: {},\\n  },\\n  plugins,\\n};\\n\\nMY_VAR=\\"MY_VALUE\\"\\nKEEP_IN_MIND=\\"THESE ARE NOT SECURE\\"\\n\\nconsole.log(process.env.MY_VAR); // results in: MY_VALUE\\nconsole.log(process.env.KEEP_IN_MIND); // results in: THESE ARE NOT SECURE\\n\\n","lastUpdated":"1 year, 3 months ago","title":"Environment Variables","publish_date":"2022-10-11","doc_name":"EnvironmentVariables.md"},{"author":"Frank Calise & Justin Poliachik","content":"npx ignite-cli@next new pizza-router --yes\\ncd pizza-router\\n\\nnpx expo install expo-router expo-constants\\n\\n\\"plugins\\": [\\n   ...\\n  \\"expo-font\\",\\n  // success-line\\n  \\"expo-router\\"\\n],\\n\\n// error-line\\n\\"main\\": \\"node_modules/expo/AppEntry.js\\",\\n// success-line\\n\\"main\\": \\"expo-router/entry\\",\\n\\n{\\n  \\"expo\\": {\\n    \\"experiments\\": {\\n      \\"tsconfigPaths\\": true,\\n      // success-line\\n      \\"typedRoutes\\": true\\n    }\\n  }\\n}\\n\\nrm App.tsx\\nmv app src\\nmkdir src/app\\n\\n{\\n  \\"compilerOptions\\": {\\n    // ...\\n    \\"paths\\": {\\n      // error-line\\n      \\"app/*\\": [\\"./app/*\\"],\\n      // success-line\\n      \\"src/*\\": [\\"./src/*\\"],\\n      // ...\\n    },\\n  }\\n  // error-line-start\\n   \\"include\\": [\\n    \\"index.js\\",\\n    \\"App.tsx\\",\\n    \\"app\\",\\n    \\"types\\",\\n    \\"plugins\\",\\n    \\"app.config.ts\\",\\n    \\".expo/types/**/*.ts\\",\\n    \\"expo-env.d.ts\\"\\n  ],\\n  // error-line-end\\n  // success-line\\n  \\"include\\": [\\"**/*.ts\\", \\"**/*.tsx\\"],\\n  // ...\\n}\\n\\n// error-line-start\\n\\"format\\": \\"prettier --write \\\\\\"app/**/*.{js,jsx,json,md,ts,tsx}\\\\\\"\\",\\n\\"lint\\": \\"eslint App.tsx app test --fix --ext .js,.ts,.tsx && npm run format\\",\\n// error-line-end\\n// success-line-start\\n\\"format\\": \\"prettier --write \\\\\\"src/**/*.{js,jsx,json,md,ts,tsx}\\\\\\"\\",\\n\\"lint\\": \\"eslint src test --fix --ext .js,.ts,.tsx && npm run format\\",\\n// success-line-end\\n\\n// error-line-start\\nimport { clear } from \\"app/utils/storage\\";\\nimport { goBack, resetRoot, navigate } from \\"app/navigators/navigationUtilities\\";\\n// error-line-end\\n// success-line-start\\nimport { clear } from \\"src/utils/storage\\";\\nimport { goBack, resetRoot, navigate } from \\"src/navigators/navigationUtilities\\";\\n// success-line-end\\n\\n// error-line\\nimport { isRTL } from \\"app/i18n\\";\\n// success-line\\nimport { isRTL } from \\"src/i18n\\";\\n\\n// error-line\\nimport { isRTL } from \\"app/i18n\\";\\n// success-line\\nimport { isRTL } from \\"src/i18n\\";\\n\\n// error-line\\nimport en from \\"../app/i18n/en\\";\\n// success-line\\nimport en from \\"../src/i18n/en\\";\\nimport { exec } from \\"child_process\\";\\n\\n---\\npatch:\\n  // error-line\\n  path: \\"app/components/index.ts\\"\\n  // success-line\\n  path: \\"src/components/index.ts\\"\\n  append: \\"export * from \\\\\\"./<%= props.subdirectory %><%= props.pascalCaseName %>\\\\\\"\\\\n\\"\\n  skip: <%= props.skipIndexFile %>\\n---\\nimport * as React from \\"react\\"\\nimport { StyleProp, TextStyle, View, ViewStyle } from \\"react-native\\"\\nimport { observer } from \\"mobx-react-lite\\"\\n// error-line-start\\nimport { colors, typography } from \\"app/theme\\"\\nimport { Text } from \\"app/components/Text\\"\\n// error-line-end\\n// success-line-start\\nimport { colors, typography } from \\"src/theme\\"\\nimport { Text } from \\"src/components/Text\\"\\n// success-line-end\\n\\n---\\npatches:\\n// error-line\\n- path: \\"app/models/RootStore.ts\\"\\n// success-line\\n- path: \\"src/models/RootStore.ts\\"\\n  after: \\"from \\\\\\"mobx-state-tree\\\\\\"\\\\n\\"\\n  insert: \\"import { <%= props.pascalCaseName %>Model } from \\\\\\"./<%= props.pascalCaseName %>\\\\\\"\\\\n\\"\\n  skip: <%= !props.pascalCaseName.endsWith(\'Store\') %>\\n// error-line\\n- path: \\"app/models/RootStore.ts\\"\\n// success-line\\n- path: \\"src/models/RootStore.ts\\"\\n  after: \\"types.model(\\\\\\"RootStore\\\\\\").props({\\\\n\\"\\n  insert: \\"  <%= props.camelCaseName %>: types.optional(<%= props.pascalCaseName %>Model, {} as any),\\\\n\\"\\n  skip: <%= !props.pascalCaseName.endsWith(\'Store\') %>\\n// error-line\\n- path: \\"app/models/index.ts\\"\\n// success-line\\n- path: \\"src/models/index.ts\\"\\n\\n\\n// app/_layout.tsx\\nimport React from \\"react\\";\\nimport { Slot, SplashScreen } from \\"expo-router\\";\\nimport { useInitialRootStore } from \\"src/models\\";\\n\\nSplashScreen.preventAutoHideAsync();\\n\\nif (__DEV__) {\\n  // Load Reactotron configuration in development. We don\'t want to\\n  // include this in our production bundle, so we are using `if (__DEV__)`\\n  // to only execute this in development.\\n  require(\\"src/devtools/ReactotronConfig.ts\\");\\n}\\n\\nexport { ErrorBoundary } from \\"src/components/ErrorBoundary/ErrorBoundary\\";\\n\\nexport default function Root() {\\n  // Wait for stores to load and render our layout inside of it so we have access\\n  // to auth info etc\\n  const { rehydrated } = useInitialRootStore();\\n  if (!rehydrated) {\\n    return null;\\n  }\\n\\n  return <Slot />;\\n}\\n\\nmkdir src/components/ErrorBoundary\\nmv src/screens/ErrorScreen/* src/components/ErrorBoundary\\n\\nimport React from \\"react\\";\\nimport { Redirect, SplashScreen, Stack } from \\"expo-router\\";\\nimport { observer } from \\"mobx-react-lite\\";\\nimport { useStores } from \\"src/models\\";\\nimport { useFonts } from \\"expo-font\\";\\nimport { customFontsToLoad } from \\"src/theme\\";\\n\\nexport default observer(function Layout() {\\n  const {\\n    authenticationStore: { isAuthenticated },\\n  } = useStores();\\n\\n  const [fontsLoaded, fontError] = useFonts(customFontsToLoad);\\n\\n  React.useEffect(() => {\\n    if (fontsLoaded || fontError) {\\n      // Hide the splash screen after the fonts have loaded and the UI is ready.\\n      SplashScreen.hideAsync();\\n    }\\n  }, [fontsLoaded, fontError]);\\n\\n  if (!fontsLoaded && !fontError) {\\n    return null;\\n  }\\n\\n  if (!isAuthenticated) {\\n    return <Redirect href=\\"/log-in\\" />;\\n  }\\n\\n  return <Stack screenOptions={{ headerShown: false }} />;\\n});\\n\\nimport { router } from \\"expo-router\\";\\nimport { observer } from \\"mobx-react-lite\\";\\nimport React, { ComponentType, useEffect, useMemo, useRef, useState } from \\"react\\";\\nimport { TextInput, TextStyle, ViewStyle } from \\"react-native\\";\\nimport { Button, Icon, Screen, Text, TextField, TextFieldAccessoryProps } from \\"src/components\\";\\nimport { useStores } from \\"src/models\\";\\nimport { colors, spacing } from \\"src/theme\\";\\n\\nexport default observer(function Login(_props) {\\n  const authPasswordInput = useRef<TextInput>(null);\\n\\n  const [authPassword, setAuthPassword] = useState(\\"\\");\\n  const [isAuthPasswordHidden, setIsAuthPasswordHidden] = useState(true);\\n  const [isSubmitted, setIsSubmitted] = useState(false);\\n  const [attemptsCount, setAttemptsCount] = useState(0);\\n  const {\\n    authenticationStore: { authEmail, setAuthEmail, setAuthToken, validationError },\\n  } = useStores();\\n\\n  useEffect(() => {\\n    // Here is where you could fetch credentials from keychain or storage\\n    // and pre-fill the form fields.\\n    setAuthEmail(\\"ignite@infinite.red\\");\\n    setAuthPassword(\\"ign1teIsAwes0m3\\");\\n\\n    // Return a \\"cleanup\\" function that React will run when the component unmounts\\n    return () => {\\n      setAuthPassword(\\"\\");\\n      setAuthEmail(\\"\\");\\n    };\\n  }, []);\\n\\n  const error = isSubmitted ? validationError : \\"\\";\\n\\n  function login() {\\n    setIsSubmitted(true);\\n    setAttemptsCount(attemptsCount + 1);\\n\\n    if (validationError) return;\\n\\n    // Make a request to your server to get an authentication token.\\n    // If successful, reset the fields and set the token.\\n    setIsSubmitted(false);\\n    setAuthPassword(\\"\\");\\n    setAuthEmail(\\"\\");\\n\\n    // We\'ll mock this with a fake token.\\n    setAuthToken(String(Date.now()));\\n\\n    // navigate to the main screen\\n    router.replace(\\"/\\");\\n  }\\n\\n  const PasswordRightAccessory: ComponentType<TextFieldAccessoryProps> = useMemo(\\n    () =>\\n      function PasswordRightAccessory(props: TextFieldAccessoryProps) {\\n        return (\\n          <Icon\\n            icon={isAuthPasswordHidden ? \\"view\\" : \\"hidden\\"}\\n            color={colors.palette.neutral800}\\n            containerStyle={props.style}\\n            size={20}\\n            onPress={() => setIsAuthPasswordHidden(!isAuthPasswordHidden)}\\n          />\\n        );\\n      },\\n    [isAuthPasswordHidden]\\n  );\\n\\n  return (\\n    <Screen preset=\\"auto\\" contentContainerStyle={$screenContentContainer} safeAreaEdges={[\\"top\\", \\"bottom\\"]}>\\n      <Text testID=\\"login-heading\\" tx=\\"loginScreen.signIn\\" preset=\\"heading\\" style={$signIn} />\\n      <Text tx=\\"loginScreen.enterDetails\\" preset=\\"subheading\\" style={$enterDetails} />\\n      {attemptsCount > 2 && <Text tx=\\"loginScreen.hint\\" size=\\"sm\\" weight=\\"light\\" style={$hint} />}\\n\\n      <TextField\\n        value={authEmail}\\n        onChangeText={setAuthEmail}\\n        containerStyle={$textField}\\n        autoCapitalize=\\"none\\"\\n        autoComplete=\\"email\\"\\n        autoCorrect={false}\\n        keyboardType=\\"email-address\\"\\n        labelTx=\\"loginScreen.emailFieldLabel\\"\\n        placeholderTx=\\"loginScreen.emailFieldPlaceholder\\"\\n        helper={error}\\n        status={error ? \\"error\\" : undefined}\\n        onSubmitEditing={() => authPasswordInput.current?.focus()}\\n      />\\n\\n      <TextField\\n        ref={authPasswordInput}\\n        value={authPassword}\\n        onChangeText={setAuthPassword}\\n        containerStyle={$textField}\\n        autoCapitalize=\\"none\\"\\n        autoComplete=\\"password\\"\\n        autoCorrect={false}\\n        secureTextEntry={isAuthPasswordHidden}\\n        labelTx=\\"loginScreen.passwordFieldLabel\\"\\n        placeholderTx=\\"loginScreen.passwordFieldPlaceholder\\"\\n        onSubmitEditing={login}\\n        RightAccessory={PasswordRightAccessory}\\n      />\\n\\n      <Button testID=\\"login-button\\" tx=\\"loginScreen.tapToSignIn\\" style={$tapButton} preset=\\"reversed\\" onPress={login} />\\n    </Screen>\\n  );\\n});\\n\\nconst $screenContentContainer: ViewStyle = {\\n  paddingVertical: spacing.xxl,\\n  paddingHorizontal: spacing.lg,\\n};\\n\\nconst $signIn: TextStyle = {\\n  marginBottom: spacing.sm,\\n};\\n\\nconst $enterDetails: TextStyle = {\\n  marginBottom: spacing.lg,\\n};\\n\\nconst $hint: TextStyle = {\\n  color: colors.tint,\\n  marginBottom: spacing.md,\\n};\\n\\nconst $textField: ViewStyle = {\\n  marginBottom: spacing.lg,\\n};\\n\\nconst $tapButton: ViewStyle = {\\n  marginTop: spacing.xs,\\n};\\n\\nimport { router } from \\"expo-router\\";\\nimport { observer } from \\"mobx-react-lite\\";\\nimport React from \\"react\\";\\nimport { Image, ImageStyle, TextStyle, View, ViewStyle } from \\"react-native\\";\\nimport { Button, Text } from \\"src/components\\";\\nimport { isRTL } from \\"src/i18n\\";\\nimport { useStores } from \\"src/models\\";\\nimport { colors, spacing } from \\"src/theme\\";\\nimport { useHeader } from \\"src/utils/useHeader\\";\\nimport { useSafeAreaInsetsStyle } from \\"src/utils/useSafeAreaInsetsStyle\\";\\n\\nconst welcomeLogo = require(\\"assets/images/logo.png\\");\\nconst welcomeFace = require(\\"assets/images/welcome-face.png\\");\\n\\nexport default observer(function WelcomeScreen() {\\n  const {\\n    authenticationStore: { logout },\\n  } = useStores();\\n\\n  function goNext() {\\n    router.replace(\\"/showroom\\");\\n  }\\n\\n  useHeader(\\n    {\\n      rightTx: \\"common.logOut\\",\\n      onRightPress: logout,\\n    },\\n    [logout]\\n  );\\n\\n  const $bottomContainerInsets = useSafeAreaInsetsStyle([\\"bottom\\"]);\\n\\n  return (\\n    <View style={$container}>\\n      <View style={$topContainer}>\\n        <Image style={$welcomeLogo} source={welcomeLogo} resizeMode=\\"contain\\" />\\n        <Text testID=\\"welcome-heading\\" style={$welcomeHeading} tx=\\"welcomeScreen.readyForLaunch\\" preset=\\"heading\\" />\\n        <Text tx=\\"welcomeScreen.exciting\\" preset=\\"subheading\\" />\\n        <Image style={$welcomeFace} source={welcomeFace} resizeMode=\\"contain\\" />\\n      </View>\\n\\n      <View style={[$bottomContainer, $bottomContainerInsets]}>\\n        <Text tx=\\"welcomeScreen.postscript\\" size=\\"md\\" />\\n        <Button testID=\\"next-screen-button\\" preset=\\"reversed\\" tx=\\"welcomeScreen.letsGo\\" onPress={goNext} />\\n      </View>\\n    </View>\\n  );\\n});\\n\\nconst $container: ViewStyle = {\\n  flex: 1,\\n  backgroundColor: colors.background,\\n};\\n\\nconst $topContainer: ViewStyle = {\\n  flexShrink: 1,\\n  flexGrow: 1,\\n  flexBasis: \\"57%\\",\\n  justifyContent: \\"center\\",\\n  paddingHorizontal: spacing.lg,\\n};\\n\\nconst $bottomContainer: ViewStyle = {\\n  flexShrink: 1,\\n  flexGrow: 0,\\n  flexBasis: \\"43%\\",\\n  backgroundColor: colors.palette.neutral100,\\n  borderTopLeftRadius: 16,\\n  borderTopRightRadius: 16,\\n  paddingHorizontal: spacing.lg,\\n  justifyContent: \\"space-around\\",\\n};\\nconst $welcomeLogo: ImageStyle = {\\n  height: 88,\\n  width: \\"100%\\",\\n  marginBottom: spacing.xxl,\\n};\\n\\nconst $welcomeFace: ImageStyle = {\\n  height: 169,\\n  width: 269,\\n  position: \\"absolute\\",\\n  bottom: -47,\\n  right: -80,\\n  transform: [{ scaleX: isRTL ? -1 : 1 }],\\n};\\n\\nconst $welcomeHeading: TextStyle = {\\n  marginBottom: spacing.md,\\n};\\n\\nimport React from \\"react\\";\\nimport { Tabs } from \\"expo-router/tabs\\";\\nimport { observer } from \\"mobx-react-lite\\";\\nimport { Icon } from \\"src/components\\";\\nimport { translate } from \\"src/i18n\\";\\nimport { colors, spacing, typography } from \\"src/theme\\";\\nimport { TextStyle, ViewStyle } from \\"react-native\\";\\nimport { useSafeAreaInsets } from \\"react-native-safe-area-context\\";\\n\\nexport default observer(function Layout() {\\n  const { bottom } = useSafeAreaInsets();\\n\\n  return (\\n    <Tabs\\n      screenOptions={{\\n        headerShown: false,\\n        tabBarHideOnKeyboard: true,\\n        tabBarStyle: [$tabBar, { height: bottom + 70 }],\\n        tabBarActiveTintColor: colors.text,\\n        tabBarInactiveTintColor: colors.text,\\n        tabBarLabelStyle: $tabBarLabel,\\n        tabBarItemStyle: $tabBarItem,\\n      }}\\n    >\\n      <Tabs.Screen\\n        name=\\"showroom\\"\\n        options={{\\n          href: \\"/showroom\\",\\n          headerShown: false,\\n          tabBarLabel: translate(\\"demoNavigator.componentsTab\\"),\\n          tabBarIcon: ({ focused }) => <Icon icon=\\"components\\" color={focused ? colors.tint : undefined} size={30} />,\\n        }}\\n      />\\n      <Tabs.Screen\\n        name=\\"community\\"\\n        options={{\\n          href: \\"/community\\",\\n          headerShown: false,\\n          tabBarLabel: translate(\\"demoNavigator.communityTab\\"),\\n          tabBarIcon: ({ focused }) => <Icon icon=\\"community\\" color={focused ? colors.tint : undefined} size={30} />,\\n        }}\\n      />\\n      <Tabs.Screen\\n        name=\\"podcasts\\"\\n        options={{\\n          href: \\"/podcasts\\",\\n          headerShown: false,\\n          tabBarAccessibilityLabel: translate(\\"demoNavigator.podcastListTab\\"),\\n          tabBarLabel: translate(\\"demoNavigator.podcastListTab\\"),\\n          tabBarIcon: ({ focused }) => <Icon icon=\\"podcast\\" color={focused ? colors.tint : undefined} size={30} />,\\n        }}\\n      />\\n      <Tabs.Screen\\n        name=\\"debug\\"\\n        options={{\\n          href: \\"/debug\\",\\n          headerShown: false,\\n          tabBarLabel: translate(\\"demoNavigator.debugTab\\"),\\n          tabBarIcon: ({ focused }) => <Icon icon=\\"debug\\" color={focused ? colors.tint : undefined} size={30} />,\\n        }}\\n      />\\n    </Tabs>\\n  );\\n});\\n\\nconst $tabBar: ViewStyle = {\\n  backgroundColor: colors.background,\\n  borderTopColor: colors.transparent,\\n};\\n\\nconst $tabBarItem: ViewStyle = {\\n  paddingTop: spacing.md,\\n};\\n\\nconst $tabBarLabel: TextStyle = {\\n  fontSize: 12,\\n  fontFamily: typography.primary.medium,\\n  lineHeight: 16,\\n  flex: 1,\\n};\\n\\nimport React from \\"react\\";\\nimport { Image, ImageStyle, TextStyle, View, ViewStyle } from \\"react-native\\";\\nimport { ListItem, Screen, Text } from \\"src/components\\";\\nimport { spacing } from \\"src/theme\\";\\nimport { openLinkInBrowser } from \\"src/utils/openLinkInBrowser\\";\\nimport { isRTL } from \\"src/i18n\\";\\n\\nconst chainReactLogo = require(\\"assets/images/demo/cr-logo.png\\");\\nconst reactNativeLiveLogo = require(\\"assets/images/demo/rnl-logo.png\\");\\nconst reactNativeRadioLogo = require(\\"assets/images/demo/rnr-logo.png\\");\\nconst reactNativeNewsletterLogo = require(\\"assets/images/demo/rnn-logo.png\\");\\n\\nexport default function DemoCommunityScreen() {\\n  return (\\n    <Screen preset=\\"scroll\\" contentContainerStyle={$container} safeAreaEdges={[\\"top\\"]}>\\n      <Text preset=\\"heading\\" tx=\\"demoCommunityScreen.title\\" style={$title} />\\n      <Text tx=\\"demoCommunityScreen.tagLine\\" style={$tagline} />\\n\\n      <Text preset=\\"subheading\\" tx=\\"demoCommunityScreen.joinUsOnSlackTitle\\" />\\n      <Text tx=\\"demoCommunityScreen.joinUsOnSlack\\" style={$description} />\\n      <ListItem\\n        tx=\\"demoCommunityScreen.joinSlackLink\\"\\n        leftIcon=\\"slack\\"\\n        rightIcon={isRTL ? \\"caretLeft\\" : \\"caretRight\\"}\\n        onPress={() => openLinkInBrowser(\\"https://community.infinite.red/\\")}\\n      />\\n      <Text preset=\\"subheading\\" tx=\\"demoCommunityScreen.makeIgniteEvenBetterTitle\\" style={$sectionTitle} />\\n      <Text tx=\\"demoCommunityScreen.makeIgniteEvenBetter\\" style={$description} />\\n      <ListItem\\n        tx=\\"demoCommunityScreen.contributeToIgniteLink\\"\\n        leftIcon=\\"github\\"\\n        rightIcon={isRTL ? \\"caretLeft\\" : \\"caretRight\\"}\\n        onPress={() => openLinkInBrowser(\\"https://github.com/infinitered/ignite\\")}\\n      />\\n\\n      <Text preset=\\"subheading\\" tx=\\"demoCommunityScreen.theLatestInReactNativeTitle\\" style={$sectionTitle} />\\n      <Text tx=\\"demoCommunityScreen.theLatestInReactNative\\" style={$description} />\\n      <ListItem\\n        tx=\\"demoCommunityScreen.reactNativeRadioLink\\"\\n        bottomSeparator\\n        rightIcon={isRTL ? \\"caretLeft\\" : \\"caretRight\\"}\\n        LeftComponent={\\n          <View style={$logoContainer}>\\n            <Image source={reactNativeRadioLogo} style={$logo} />\\n          </View>\\n        }\\n        onPress={() => openLinkInBrowser(\\"https://reactnativeradio.com/\\")}\\n      />\\n      <ListItem\\n        tx=\\"demoCommunityScreen.reactNativeNewsletterLink\\"\\n        bottomSeparator\\n        rightIcon={isRTL ? \\"caretLeft\\" : \\"caretRight\\"}\\n        LeftComponent={\\n          <View style={$logoContainer}>\\n            <Image source={reactNativeNewsletterLogo} style={$logo} />\\n          </View>\\n        }\\n        onPress={() => openLinkInBrowser(\\"https://reactnativenewsletter.com/\\")}\\n      />\\n      <ListItem\\n        tx=\\"demoCommunityScreen.reactNativeLiveLink\\"\\n        bottomSeparator\\n        rightIcon={isRTL ? \\"caretLeft\\" : \\"caretRight\\"}\\n        LeftComponent={\\n          <View style={$logoContainer}>\\n            <Image source={reactNativeLiveLogo} style={$logo} />\\n          </View>\\n        }\\n        onPress={() => openLinkInBrowser(\\"https://rn.live/\\")}\\n      />\\n      <ListItem\\n        tx=\\"demoCommunityScreen.chainReactConferenceLink\\"\\n        rightIcon={isRTL ? \\"caretLeft\\" : \\"caretRight\\"}\\n        LeftComponent={\\n          <View style={$logoContainer}>\\n            <Image source={chainReactLogo} style={$logo} />\\n          </View>\\n        }\\n        onPress={() => openLinkInBrowser(\\"https://cr.infinite.red/\\")}\\n      />\\n      <Text preset=\\"subheading\\" tx=\\"demoCommunityScreen.hireUsTitle\\" style={$sectionTitle} />\\n      <Text tx=\\"demoCommunityScreen.hireUs\\" style={$description} />\\n      <ListItem\\n        tx=\\"demoCommunityScreen.hireUsLink\\"\\n        leftIcon=\\"clap\\"\\n        rightIcon={isRTL ? \\"caretLeft\\" : \\"caretRight\\"}\\n        onPress={() => openLinkInBrowser(\\"https://infinite.red/contact\\")}\\n      />\\n    </Screen>\\n  );\\n}\\n\\nconst $container: ViewStyle = {\\n  paddingTop: spacing.lg + spacing.xl,\\n  paddingHorizontal: spacing.lg,\\n};\\n\\nconst $title: TextStyle = {\\n  marginBottom: spacing.sm,\\n};\\n\\nconst $tagline: TextStyle = {\\n  marginBottom: spacing.xxl,\\n};\\n\\nconst $description: TextStyle = {\\n  marginBottom: spacing.lg,\\n};\\n\\nconst $sectionTitle: TextStyle = {\\n  marginTop: spacing.xxl,\\n};\\n\\nconst $logoContainer: ViewStyle = {\\n  marginEnd: spacing.md,\\n  flexDirection: \\"row\\",\\n  flexWrap: \\"wrap\\",\\n  alignContent: \\"center\\",\\n};\\n\\nconst $logo: ImageStyle = {\\n  height: 38,\\n  width: 38,\\n};\\n\\nimport { observer } from \\"mobx-react-lite\\";\\nimport React, { ComponentType, useEffect, useMemo } from \\"react\\";\\nimport {\\n  AccessibilityProps,\\n  ActivityIndicator,\\n  Image,\\n  ImageSourcePropType,\\n  ImageStyle,\\n  Platform,\\n  StyleSheet,\\n  TextStyle,\\n  View,\\n  ViewStyle,\\n} from \\"react-native\\";\\nimport { type ContentStyle } from \\"@shopify/flash-list\\";\\nimport Animated, {\\n  Extrapolate,\\n  interpolate,\\n  useAnimatedStyle,\\n  useSharedValue,\\n  withSpring,\\n} from \\"react-native-reanimated\\";\\nimport { Button, ButtonAccessoryProps, Card, EmptyState, Icon, ListView, Screen, Text, Toggle } from \\"src/components\\";\\nimport { isRTL, translate } from \\"src/i18n\\";\\nimport { useStores } from \\"src/models\\";\\nimport { Episode } from \\"src/models/Episode\\";\\nimport { colors, spacing } from \\"src/theme\\";\\nimport { delay } from \\"src/utils/delay\\";\\nimport { openLinkInBrowser } from \\"src/utils/openLinkInBrowser\\";\\n\\nconst ICON_SIZE = 14;\\n\\nconst rnrImage1 = require(\\"assets/images/demo/rnr-image-1.png\\");\\nconst rnrImage2 = require(\\"assets/images/demo/rnr-image-2.png\\");\\nconst rnrImage3 = require(\\"assets/images/demo/rnr-image-3.png\\");\\nconst rnrImages = [rnrImage1, rnrImage2, rnrImage3];\\n\\nexport default observer(function DemoPodcastListScreen(_props) {\\n  const { episodeStore } = useStores();\\n\\n  const [refreshing, setRefreshing] = React.useState(false);\\n  const [isLoading, setIsLoading] = React.useState(false);\\n\\n  // initially, kick off a background refresh without the refreshing UI\\n  useEffect(() => {\\n    (async function load() {\\n      setIsLoading(true);\\n      await episodeStore.fetchEpisodes();\\n      setIsLoading(false);\\n    })();\\n  }, [episodeStore]);\\n\\n  // simulate a longer refresh, if the refresh is too fast for UX\\n  async function manualRefresh() {\\n    setRefreshing(true);\\n    await Promise.all([episodeStore.fetchEpisodes(), delay(750)]);\\n    setRefreshing(false);\\n  }\\n\\n  return (\\n    <Screen preset=\\"fixed\\" safeAreaEdges={[\\"top\\"]} contentContainerStyle={$screenContentContainer}>\\n      <ListView<Episode>\\n        contentContainerStyle={$listContentContainer}\\n        data={episodeStore.episodesForList.slice()}\\n        extraData={episodeStore.favorites.length + episodeStore.episodes.length}\\n        refreshing={refreshing}\\n        estimatedItemSize={177}\\n        onRefresh={manualRefresh}\\n        ListEmptyComponent={\\n          isLoading ? (\\n            <ActivityIndicator />\\n          ) : (\\n            <EmptyState\\n              preset=\\"generic\\"\\n              style={$emptyState}\\n              headingTx={episodeStore.favoritesOnly ? \\"demoPodcastListScreen.noFavoritesEmptyState.heading\\" : undefined}\\n              contentTx={episodeStore.favoritesOnly ? \\"demoPodcastListScreen.noFavoritesEmptyState.content\\" : undefined}\\n              button={episodeStore.favoritesOnly ? \\"\\" : undefined}\\n              buttonOnPress={manualRefresh}\\n              imageStyle={$emptyStateImage}\\n              ImageProps={{ resizeMode: \\"contain\\" }}\\n            />\\n          )\\n        }\\n        ListHeaderComponent={\\n          <View style={$heading}>\\n            <Text preset=\\"heading\\" tx=\\"demoPodcastListScreen.title\\" />\\n            {(episodeStore.favoritesOnly || episodeStore.episodesForList.length > 0) && (\\n              <View style={$toggle}>\\n                <Toggle\\n                  value={episodeStore.favoritesOnly}\\n                  onValueChange={() => episodeStore.setProp(\\"favoritesOnly\\", !episodeStore.favoritesOnly)}\\n                  variant=\\"switch\\"\\n                  labelTx=\\"demoPodcastListScreen.onlyFavorites\\"\\n                  labelPosition=\\"left\\"\\n                  labelStyle={$labelStyle}\\n                  accessibilityLabel={translate(\\"demoPodcastListScreen.accessibility.switch\\")}\\n                />\\n              </View>\\n            )}\\n          </View>\\n        }\\n        renderItem={({ item }) => (\\n          <EpisodeCard\\n            episode={item}\\n            isFavorite={episodeStore.hasFavorite(item)}\\n            onPressFavorite={() => episodeStore.toggleFavorite(item)}\\n          />\\n        )}\\n      />\\n    </Screen>\\n  );\\n});\\n\\nconst EpisodeCard = observer(function EpisodeCard({\\n  episode,\\n  isFavorite,\\n  onPressFavorite,\\n}: {\\n  episode: Episode;\\n  onPressFavorite: () => void;\\n  isFavorite: boolean;\\n}) {\\n  const liked = useSharedValue(isFavorite ? 1 : 0);\\n\\n  const imageUri = useMemo<ImageSourcePropType>(() => {\\n    return rnrImages[Math.floor(Math.random() * rnrImages.length)];\\n  }, []);\\n\\n  // Grey heart\\n  const animatedLikeButtonStyles = useAnimatedStyle(() => {\\n    return {\\n      transform: [\\n        {\\n          scale: interpolate(liked.value, [0, 1], [1, 0], Extrapolate.EXTEND),\\n        },\\n      ],\\n      opacity: interpolate(liked.value, [0, 1], [1, 0], Extrapolate.CLAMP),\\n    };\\n  });\\n\\n  // Pink heart\\n  const animatedUnlikeButtonStyles = useAnimatedStyle(() => {\\n    return {\\n      transform: [\\n        {\\n          scale: liked.value,\\n        },\\n      ],\\n      opacity: liked.value,\\n    };\\n  });\\n\\n  /**\\n   * Android has a \\"longpress\\" accessibility action. iOS does not, so we just have to use a hint.\\n   * @see https://reactnative.dev/docs/accessibility#accessibilityactions\\n   */\\n  const accessibilityHintProps = useMemo(\\n    () =>\\n      Platform.select<AccessibilityProps>({\\n        ios: {\\n          accessibilityLabel: episode.title,\\n          accessibilityHint: translate(\\"demoPodcastListScreen.accessibility.cardHint\\", {\\n            action: isFavorite ? \\"unfavorite\\" : \\"favorite\\",\\n          }),\\n        },\\n        android: {\\n          accessibilityLabel: episode.title,\\n          accessibilityActions: [\\n            {\\n              name: \\"longpress\\",\\n              label: translate(\\"demoPodcastListScreen.accessibility.favoriteAction\\"),\\n            },\\n          ],\\n          onAccessibilityAction: ({ nativeEvent }) => {\\n            if (nativeEvent.actionName === \\"longpress\\") {\\n              handlePressFavorite();\\n            }\\n          },\\n        },\\n      }),\\n    [episode, isFavorite]\\n  );\\n\\n  const handlePressFavorite = () => {\\n    onPressFavorite();\\n    liked.value = withSpring(liked.value ? 0 : 1);\\n  };\\n\\n  const handlePressCard = () => {\\n    openLinkInBrowser(episode.enclosure.link);\\n  };\\n\\n  const ButtonLeftAccessory: ComponentType<ButtonAccessoryProps> = useMemo(\\n    () =>\\n      function ButtonLeftAccessory() {\\n        return (\\n          <View>\\n            <Animated.View style={[$iconContainer, StyleSheet.absoluteFill, animatedLikeButtonStyles]}>\\n              <Icon\\n                icon=\\"heart\\"\\n                size={ICON_SIZE}\\n                color={colors.palette.neutral800} // dark grey\\n              />\\n            </Animated.View>\\n            <Animated.View style={[$iconContainer, animatedUnlikeButtonStyles]}>\\n              <Icon\\n                icon=\\"heart\\"\\n                size={ICON_SIZE}\\n                color={colors.palette.primary400} // pink\\n              />\\n            </Animated.View>\\n          </View>\\n        );\\n      },\\n    []\\n  );\\n\\n  return (\\n    <Card\\n      style={$item}\\n      verticalAlignment=\\"force-footer-bottom\\"\\n      onPress={handlePressCard}\\n      onLongPress={handlePressFavorite}\\n      HeadingComponent={\\n        <View style={$metadata}>\\n          <Text style={$metadataText} size=\\"xxs\\" accessibilityLabel={episode.datePublished.accessibilityLabel}>\\n            {episode.datePublished.textLabel}\\n          </Text>\\n          <Text style={$metadataText} size=\\"xxs\\" accessibilityLabel={episode.duration.accessibilityLabel}>\\n            {episode.duration.textLabel}\\n          </Text>\\n        </View>\\n      }\\n      content={`${episode.parsedTitleAndSubtitle.title} - ${episode.parsedTitleAndSubtitle.subtitle}`}\\n      {...accessibilityHintProps}\\n      RightComponent={<Image source={imageUri} style={$itemThumbnail} />}\\n      FooterComponent={\\n        <Button\\n          onPress={handlePressFavorite}\\n          onLongPress={handlePressFavorite}\\n          style={[$favoriteButton, isFavorite && $unFavoriteButton]}\\n          accessibilityLabel={\\n            isFavorite\\n              ? translate(\\"demoPodcastListScreen.accessibility.unfavoriteIcon\\")\\n              : translate(\\"demoPodcastListScreen.accessibility.favoriteIcon\\")\\n          }\\n          LeftAccessory={ButtonLeftAccessory}\\n        >\\n          <Text\\n            size=\\"xxs\\"\\n            accessibilityLabel={episode.duration.accessibilityLabel}\\n            weight=\\"medium\\"\\n            text={\\n              isFavorite\\n                ? translate(\\"demoPodcastListScreen.unfavoriteButton\\")\\n                : translate(\\"demoPodcastListScreen.favoriteButton\\")\\n            }\\n          />\\n        </Button>\\n      }\\n    />\\n  );\\n});\\n\\nconst $screenContentContainer: ViewStyle = {\\n  flex: 1,\\n};\\n\\nconst $listContentContainer: ContentStyle = {\\n  paddingHorizontal: spacing.lg,\\n  paddingTop: spacing.lg + spacing.xl,\\n  paddingBottom: spacing.lg,\\n};\\n\\nconst $heading: ViewStyle = {\\n  marginBottom: spacing.md,\\n};\\n\\nconst $item: ViewStyle = {\\n  padding: spacing.md,\\n  marginTop: spacing.md,\\n  minHeight: 120,\\n};\\n\\nconst $itemThumbnail: ImageStyle = {\\n  marginTop: spacing.sm,\\n  borderRadius: 50,\\n  alignSelf: \\"flex-start\\",\\n};\\n\\nconst $toggle: ViewStyle = {\\n  marginTop: spacing.md,\\n};\\n\\nconst $labelStyle: TextStyle = {\\n  textAlign: \\"left\\",\\n};\\n\\nconst $iconContainer: ViewStyle = {\\n  height: ICON_SIZE,\\n  width: ICON_SIZE,\\n  flexDirection: \\"row\\",\\n  marginEnd: spacing.sm,\\n};\\n\\nconst $metadata: TextStyle = {\\n  color: colors.textDim,\\n  marginTop: spacing.xs,\\n  flexDirection: \\"row\\",\\n};\\n\\nconst $metadataText: TextStyle = {\\n  color: colors.textDim,\\n  marginEnd: spacing.md,\\n  marginBottom: spacing.xs,\\n};\\n\\nconst $favoriteButton: ViewStyle = {\\n  borderRadius: 17,\\n  marginTop: spacing.md,\\n  justifyContent: \\"flex-start\\",\\n  backgroundColor: colors.palette.neutral300,\\n  borderColor: colors.palette.neutral300,\\n  paddingHorizontal: spacing.md,\\n  paddingTop: spacing.xxxs,\\n  paddingBottom: 0,\\n  minHeight: 32,\\n  alignSelf: \\"flex-start\\",\\n};\\n\\nconst $unFavoriteButton: ViewStyle = {\\n  borderColor: colors.palette.primary100,\\n  backgroundColor: colors.palette.primary100,\\n};\\n\\nconst $emptyState: ViewStyle = {\\n  marginTop: spacing.xxl,\\n};\\n\\nconst $emptyStateImage: ImageStyle = {\\n  transform: [{ scaleX: isRTL ? -1 : 1 }],\\n};\\n\\nimport React from \\"react\\";\\nimport * as Application from \\"expo-application\\";\\nimport { Linking, Platform, TextStyle, View, ViewStyle } from \\"react-native\\";\\nimport { Button, ListItem, Screen, Text } from \\"src/components\\";\\nimport { colors, spacing } from \\"src/theme\\";\\nimport { isRTL } from \\"src/i18n\\";\\nimport { useStores } from \\"src/models\\";\\n\\nfunction openLinkInBrowser(url: string) {\\n  Linking.canOpenURL(url).then((canOpen) => canOpen && Linking.openURL(url));\\n}\\n\\nexport default function DemoDebugScreen() {\\n  const {\\n    authenticationStore: { logout },\\n  } = useStores();\\n\\n  const usingHermes = typeof HermesInternal === \\"object\\" && HermesInternal !== null;\\n  // @ts-expect-error\\n  const usingFabric = global.nativeFabricUIManager != null;\\n\\n  const demoReactotron = React.useMemo(\\n    () => async () => {\\n      if (__DEV__) {\\n        console.tron.display({\\n          name: \\"DISPLAY\\",\\n          value: {\\n            appId: Application.applicationId,\\n            appName: Application.applicationName,\\n            appVersion: Application.nativeApplicationVersion,\\n            appBuildVersion: Application.nativeBuildVersion,\\n            hermesEnabled: usingHermes,\\n          },\\n          important: true,\\n        });\\n      }\\n    },\\n    []\\n  );\\n\\n  return (\\n    <Screen preset=\\"scroll\\" safeAreaEdges={[\\"top\\"]} contentContainerStyle={$container}>\\n      <Text\\n        style={$reportBugsLink}\\n        tx=\\"demoDebugScreen.reportBugs\\"\\n        onPress={() => openLinkInBrowser(\\"https://github.com/infinitered/ignite/issues\\")}\\n      />\\n      <Text style={$title} preset=\\"heading\\" tx=\\"demoDebugScreen.title\\" />\\n      <View style={$itemsContainer}>\\n        <ListItem\\n          LeftComponent={\\n            <View style={$item}>\\n              <Text preset=\\"bold\\">App Id</Text>\\n              <Text>{Application.applicationId}</Text>\\n            </View>\\n          }\\n        />\\n        <ListItem\\n          LeftComponent={\\n            <View style={$item}>\\n              <Text preset=\\"bold\\">App Name</Text>\\n              <Text>{Application.applicationName}</Text>\\n            </View>\\n          }\\n        />\\n        <ListItem\\n          LeftComponent={\\n            <View style={$item}>\\n              <Text preset=\\"bold\\">App Version</Text>\\n              <Text>{Application.nativeApplicationVersion}</Text>\\n            </View>\\n          }\\n        />\\n        <ListItem\\n          LeftComponent={\\n            <View style={$item}>\\n              <Text preset=\\"bold\\">App Build Version</Text>\\n              <Text>{Application.nativeBuildVersion}</Text>\\n            </View>\\n          }\\n        />\\n        <ListItem\\n          LeftComponent={\\n            <View style={$item}>\\n              <Text preset=\\"bold\\">Hermes Enabled</Text>\\n              <Text>{String(usingHermes)}</Text>\\n            </View>\\n          }\\n        />\\n        <ListItem\\n          LeftComponent={\\n            <View style={$item}>\\n              <Text preset=\\"bold\\">Fabric Enabled</Text>\\n              <Text>{String(usingFabric)}</Text>\\n            </View>\\n          }\\n        />\\n      </View>\\n      <View style={$buttonContainer}>\\n        <Button style={$button} tx=\\"demoDebugScreen.reactotron\\" onPress={demoReactotron} />\\n        <Text style={$hint} tx={`demoDebugScreen.${Platform.OS}ReactotronHint` as const} />\\n      </View>\\n      <View style={$buttonContainer}>\\n        <Button style={$button} tx=\\"common.logOut\\" onPress={logout} />\\n      </View>\\n    </Screen>\\n  );\\n}\\n\\nconst $container: ViewStyle = {\\n  paddingTop: spacing.lg + spacing.xl,\\n  paddingBottom: spacing.xxl,\\n  paddingHorizontal: spacing.lg,\\n};\\n\\nconst $title: TextStyle = {\\n  marginBottom: spacing.xxl,\\n};\\n\\nconst $reportBugsLink: TextStyle = {\\n  color: colors.tint,\\n  marginBottom: spacing.lg,\\n  alignSelf: isRTL ? \\"flex-start\\" : \\"flex-end\\",\\n};\\n\\nconst $item: ViewStyle = {\\n  marginBottom: spacing.md,\\n};\\n\\nconst $itemsContainer: ViewStyle = {\\n  marginBottom: spacing.xl,\\n};\\n\\nconst $button: ViewStyle = {\\n  marginBottom: spacing.xs,\\n};\\n\\nconst $buttonContainer: ViewStyle = {\\n  marginBottom: spacing.md,\\n};\\n\\nconst $hint: TextStyle = {\\n  color: colors.palette.neutral600,\\n  fontSize: 12,\\n  lineHeight: 15,\\n  paddingBottom: spacing.lg,\\n};\\n\\nmv src/screens/DemoShowroomScreen src/components/Showroom\\nrm src/components/Showroom/DemoShowroomScreen.tsx\\n\\n> import { ReactElement } from \\"react\\";\\n>\\n> export interface Demo {\\n>   name: string;\\n>   description: string;\\n>   data: ReactElement[];\\n> }\\n\\nconst WebListItem: FC<DemoListItem> = ({ item, sectionIndex }) => {\\n  const sectionSlug = item.name.toLowerCase();\\n\\n  return (\\n    <View>\\n      <Link to={`/showroom/${sectionSlug}`} style={$menuContainer}>\\n        <Text preset=\\"bold\\">{item.name}</Text>\\n      </Link>\\n      {item.useCases.map((u) => {\\n        const itemSlug = slugify(u);\\n\\n        return (\\n          <Link key={`section${sectionIndex}-${u}`} to={`/showroom/${sectionSlug}/${itemSlug}`}>\\n            <Text>{u}</Text>\\n          </Link>\\n        );\\n      })}\\n    </View>\\n  );\\n};\\n\\nconst NativeListItem: FC<DemoListItem> = ({ item, sectionIndex, handleScroll }) => (\\n  <View>\\n    <Text onPress={() => handleScroll?.(sectionIndex)} preset=\\"bold\\" style={$menuContainer}>\\n      {item.name}\\n    </Text>\\n    {item.useCases.map((u, index) => (\\n      <ListItem\\n        key={`section${sectionIndex}-${u}`}\\n        onPress={() => handleScroll?.(sectionIndex, index + 1)}\\n        text={u}\\n        rightIcon={isRTL ? \\"caretLeft\\" : \\"caretRight\\"}\\n      />\\n    ))}\\n  </View>\\n);\\n\\nconst ShowroomListItem = Platform.select({\\n  web: WebListItem,\\n  default: NativeListItem,\\n});\\n\\nconst ShowroomListItem: FC<DemoListItem> = ({ item, sectionIndex }) => {\\n  const sectionSlug = item.name.toLowerCase();\\n\\n  return (\\n    <View>\\n      <Link href={{ pathname: \\"/showroom\\", params: { sectionSlug } }}>\\n        <Text preset=\\"bold\\">{item.name}</Text>\\n      </Link>\\n      {item.useCases.map((u) => {\\n        const itemSlug = slugify(u);\\n        return (\\n          <Link\\n            key={`section${sectionIndex}-${u}`}\\n            href={{ pathname: \\"/showroom\\", params: { sectionSlug, itemSlug } }}\\n            asChild\\n          >\\n            <ListItem text={u} rightIcon={isRTL ? \\"caretLeft\\" : \\"caretRight\\"} />\\n          </Link>\\n        );\\n      })}\\n    </View>\\n  );\\n};\\n\\nimport React, { FC, useEffect, useRef, useState } from \\"react\\";\\nimport { Image, ImageStyle, SectionList, TextStyle, View, ViewStyle } from \\"react-native\\";\\nimport { Drawer } from \\"react-native-drawer-layout\\";\\nimport { type ContentStyle } from \\"@shopify/flash-list\\";\\nimport { ListItem, ListView, ListViewRef, Screen, Text } from \\"src/components\\";\\nimport { isRTL } from \\"src/i18n\\";\\nimport { colors, spacing } from \\"src/theme\\";\\nimport { useSafeAreaInsetsStyle } from \\"src/utils/useSafeAreaInsetsStyle\\";\\nimport * as Demos from \\"src/components/Showroom/demos\\";\\nimport { DrawerIconButton } from \\"src/components/Showroom/DrawerIconButton\\";\\nimport { Link, useLocalSearchParams } from \\"expo-router\\";\\n\\nconst logo = require(\\"assets/images/logo.png\\");\\n\\ninterface DemoListItem {\\n  item: { name: string; useCases: string[] };\\n  sectionIndex: number;\\n  onPress?: () => void;\\n}\\n\\nconst slugify = (str: string) =>\\n  str\\n    .toLowerCase()\\n    .trim()\\n    .replace(/[^\\\\w\\\\s-]/g, \\"\\")\\n    .replace(/[\\\\s_-]+/g, \\"-\\")\\n    .replace(/^-+|-+$/g, \\"\\");\\n\\nconst ShowroomListItem: FC<DemoListItem> = ({ item, sectionIndex, onPress }) => {\\n  const sectionSlug = item.name.toLowerCase();\\n\\n  return (\\n    <View>\\n      <Link href={{ pathname: \\"/showroom\\", params: { sectionSlug } }} onPress={onPress}>\\n        <Text preset=\\"bold\\">{item.name}</Text>\\n      </Link>\\n      {item.useCases.map((u) => {\\n        const itemSlug = slugify(u);\\n        return (\\n          <Link\\n            key={`section${sectionIndex}-${u}`}\\n            href={{ pathname: \\"/showroom\\", params: { sectionSlug, itemSlug } }}\\n            onPress={onPress}\\n            asChild\\n          >\\n            <ListItem text={u} rightIcon={isRTL ? \\"caretLeft\\" : \\"caretRight\\"} />\\n          </Link>\\n        );\\n      })}\\n    </View>\\n  );\\n};\\n\\nexport default function DemoShowroomScreen() {\\n  const [open, setOpen] = useState(false);\\n  const timeout = useRef<ReturnType<typeof setTimeout>>();\\n  const listRef = useRef<SectionList>(null);\\n  const menuRef = useRef<ListViewRef<DemoListItem[\\"item\\"]>>(null);\\n\\n  const params = useLocalSearchParams<{\\n    sectionSlug?: string;\\n    itemSlug?: string;\\n  }>();\\n\\n  // handle scroll when section/item params change\\n  React.useEffect(() => {\\n    if (Object.keys(params).length > 0) {\\n      const demoValues = Object.values(Demos);\\n      const findSectionIndex = demoValues.findIndex((x) => x.name.toLowerCase() === params.sectionSlug);\\n      let findItemIndex = 0;\\n      if (params.itemSlug) {\\n        try {\\n          findItemIndex =\\n            demoValues[findSectionIndex].data.findIndex((u) => slugify(u.props.name) === params.itemSlug) + 1;\\n        } catch (err) {\\n          console.error(err);\\n        }\\n      }\\n      handleScroll(findSectionIndex, findItemIndex);\\n    }\\n  }, [params]);\\n\\n  const toggleDrawer = () => {\\n    if (!open) {\\n      setOpen(true);\\n    } else {\\n      setOpen(false);\\n    }\\n  };\\n\\n  const handleScroll = (sectionIndex: number, itemIndex = 0) => {\\n    listRef.current?.scrollToLocation({\\n      animated: true,\\n      itemIndex,\\n      sectionIndex,\\n    });\\n  };\\n\\n  const scrollToIndexFailed = (info: {\\n    index: number;\\n    highestMeasuredFrameIndex: number;\\n    averageItemLength: number;\\n  }) => {\\n    listRef.current?.getScrollResponder()?.scrollToEnd();\\n    timeout.current = setTimeout(\\n      () =>\\n        listRef.current?.scrollToLocation({\\n          animated: true,\\n          itemIndex: info.index,\\n          sectionIndex: 0,\\n        }),\\n      50\\n    );\\n  };\\n\\n  useEffect(() => {\\n    return () => timeout.current && clearTimeout(timeout.current);\\n  }, []);\\n\\n  const $drawerInsets = useSafeAreaInsetsStyle([\\"top\\"]);\\n\\n  return (\\n    <Drawer\\n      open={open}\\n      onOpen={() => setOpen(true)}\\n      onClose={() => setOpen(false)}\\n      drawerType={\\"slide\\"}\\n      drawerPosition={isRTL ? \\"right\\" : \\"left\\"}\\n      renderDrawerContent={() => (\\n        <View style={[$drawer, $drawerInsets]}>\\n          <View style={$logoContainer}>\\n            <Image source={logo} style={$logoImage} />\\n          </View>\\n\\n          <ListView<DemoListItem[\\"item\\"]>\\n            ref={menuRef}\\n            contentContainerStyle={$listContentContainer}\\n            estimatedItemSize={250}\\n            data={Object.values(Demos).map((d) => ({\\n              name: d.name,\\n              useCases: d.data.map((u) => u.props.name as string),\\n            }))}\\n            keyExtractor={(item) => item.name}\\n            renderItem={({ item, index: sectionIndex }) => (\\n              <ShowroomListItem {...{ item, sectionIndex, onPress }} />\\n            )}\\n          />\\n        </View>\\n      )}\\n    >\\n      <Screen preset=\\"fixed\\" safeAreaEdges={[\\"top\\"]} contentContainerStyle={$screenContainer}>\\n        <DrawerIconButton onPress={toggleDrawer} {...{ open }} />\\n\\n        <SectionList\\n          ref={listRef}\\n          contentContainerStyle={$sectionListContentContainer}\\n          stickySectionHeadersEnabled={false}\\n          sections={Object.values(Demos)}\\n          renderItem={({ item }) => item}\\n          renderSectionFooter={() => <View style={$demoUseCasesSpacer} />}\\n          ListHeaderComponent={\\n            <View style={$heading}>\\n              <Text preset=\\"heading\\" tx=\\"demoShowroomScreen.jumpStart\\" />\\n            </View>\\n          }\\n          onScrollToIndexFailed={scrollToIndexFailed}\\n          renderSectionHeader={({ section }) => {\\n            return (\\n              <View>\\n                <Text preset=\\"heading\\" style={$demoItemName}>\\n                  {section.name}\\n                </Text>\\n                <Text style={$demoItemDescription}>{section.description}</Text>\\n              </View>\\n            );\\n          }}\\n        />\\n      </Screen>\\n    </Drawer>\\n  );\\n}\\n\\nconst $screenContainer: ViewStyle = {\\n  flex: 1,\\n};\\n\\nconst $drawer: ViewStyle = {\\n  backgroundColor: colors.background,\\n  flex: 1,\\n};\\n\\nconst $listContentContainer: ContentStyle = {\\n  paddingHorizontal: spacing.lg,\\n};\\n\\nconst $sectionListContentContainer: ViewStyle = {\\n  paddingHorizontal: spacing.lg,\\n};\\n\\nconst $heading: ViewStyle = {\\n  marginBottom: spacing.xxxl,\\n};\\n\\nconst $logoImage: ImageStyle = {\\n  height: 42,\\n  width: 77,\\n};\\n\\nconst $logoContainer: ViewStyle = {\\n  alignSelf: \\"flex-start\\",\\n  justifyContent: \\"center\\",\\n  height: 56,\\n  paddingHorizontal: spacing.lg,\\n};\\n\\nconst $demoItemName: TextStyle = {\\n  fontSize: 24,\\n  marginBottom: spacing.md,\\n};\\n\\nconst $demoItemDescription: TextStyle = {\\n  marginBottom: spacing.xxl,\\n};\\n\\nconst $demoUseCasesSpacer: ViewStyle = {\\n  paddingBottom: spacing.xxl,\\n};\\n\\nnpx uri-scheme open exp://localhost:8081/--/showroom --ios\\n\\nrm src/app.tsx\\nrm -rf src/screens\\nrm -rf src/navigators\\n\\n// error-line\\nimport { goBack, resetRoot, navigate } from \\"src/navigators/navigationUtilities\\";\\n// success-line\\nimport { router } from \\"expo-router\\";\\n// ...\\n// error-line-start\\nreactotron.onCustomCommand({\\n  title: \\"Reset Navigation State\\",\\n  description: \\"Resets the navigation state\\",\\n  command: \\"resetNavigation\\",\\n  handler: () => {\\n    Reactotron.log(\\"resetting navigation state\\");\\n    resetRoot({ index: 0, routes: [] });\\n  },\\n});\\n// error-line-end\\n\\nreactotron.onCustomCommand<[{ name: \\"route\\"; type: ArgType.String }]>({\\n  command: \\"navigateTo\\",\\n  handler: (args) => {\\n    const { route } = args ?? {};\\n    if (route) {\\n      Reactotron.log(`Navigating to: ${route}`);\\n      // error-line\\n      navigate(route as any); // this should be tied to the navigator, but since this is for debugging, we can navigate to illegal routes\\n      // success-line-start\\n      // @ts-ignore - bypass Expo Router Typed Routes\\n      router.push(route);\\n      // success-line-end\\n    } else {\\n      Reactotron.log(\\"Could not navigate. No route provided.\\");\\n    }\\n  },\\n  title: \\"Navigate To Screen\\",\\n  description: \\"Navigates to a screen by name.\\",\\n  args: [{ name: \\"route\\", type: ArgType.String }],\\n});\\n\\nreactotron.onCustomCommand({\\n  title: \\"Go Back\\",\\n  description: \\"Goes back\\",\\n  command: \\"goBack\\",\\n  handler: () => {\\n    Reactotron.log(\\"Going back\\");\\n    // error-line\\n    goBack();\\n    // success-line\\n    router.back();\\n  },\\n});\\n\\nERROR  Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?\\n\\n/**\\n * A styled row component that can be used in FlatList, SectionList, or by itself.\\n * @see [Documentation and Examples]{@link https://docs.infinite.red/ignite-cli/boilerplate/components/ListItem/}\\n * @param {ListItemProps} props - The props for the `ListItem` component.\\n * @returns {JSX.Element} The rendered `ListItem` component.\\n */\\n// error-line\\n  export function ListItem(props: ListItemProps) {\\n// success-line-start\\n  export const ListItem = React.forwardRef<View, ListItemProps>(function ListItem(\\n  props: ListItemProps,\\n  ref,\\n) {\\n// success-line-end\\n  const {\\n    bottomSeparator,\\n    children,\\n    height = 56,\\n    LeftComponent,\\n    leftIcon,\\n    leftIconColor,\\n    RightComponent,\\n    rightIcon,\\n    rightIconColor,\\n    style,\\n    text,\\n    TextProps,\\n    topSeparator,\\n    tx,\\n    txOptions,\\n    textStyle: $textStyleOverride,\\n    containerStyle: $containerStyleOverride,\\n    ...TouchableOpacityProps\\n  } = props\\n\\n  const $textStyles = [$textStyle, $textStyleOverride, TextProps?.style]\\n\\n  const $containerStyles = [\\n    topSeparator && $separatorTop,\\n    bottomSeparator && $separatorBottom,\\n    $containerStyleOverride,\\n  ]\\n\\n  const $touchableStyles = [$touchableStyle, { minHeight: height }, style]\\n\\n  return (\\n    // error-line\\n   <View style={$containerStyles}>\\n    // success-line\\n   <View ref={ref} style={$containerStyles}>\\n      <TouchableOpacity {...TouchableOpacityProps} style={$touchableStyles}>\\n        <ListItemAction\\n          side=\\"left\\"\\n          size={height}\\n          icon={leftIcon}\\n          iconColor={leftIconColor}\\n          Component={LeftComponent}\\n        />\\n\\n        <Text {...TextProps} tx={tx} text={text} txOptions={txOptions} style={$textStyles}>\\n          {children}\\n        </Text>\\n\\n        <ListItemAction\\n          side=\\"right\\"\\n          size={height}\\n          icon={rightIcon}\\n          iconColor={rightIconColor}\\n          Component={RightComponent}\\n        />\\n      </TouchableOpacity>\\n    </View>\\n  )\\n  //error-line\\n}\\n  //success-line\\n})\\n\\n\\n","lastUpdated":"28 seconds ago","title":"Expo Router","publish_date":"2024-01-25","doc_name":"ExpoRouter.md"},{"author":"Joshua Yoes","content":"---\\ndestinationDir: app/components/specs\\n---\\n// https://reactnativetesting.io/component/testing/\\n\\nimport React from \\"react\\"\\nimport { fireEvent, render, screen } from \\"@testing-library/react-native\\"\\nimport { <%= props.pascalCaseName %> } from \\"../<%= props.pascalCaseName %>\\"\\n\\ndescribe(\\"<%= props.pascalCaseName %>\\", () => {\\n  it(\\"renders\\", () => {\\n    render(<<%= props.pascalCaseName %> />)\\n    expect(screen.getByText(\\"Hello\\")).toBeTruthy()\\n  })\\n})\\n\\n","lastUpdated":"1 year ago","title":"Generator for Component Tests","publish_date":"2022-10-10","doc_name":"GeneratorComponentTests.md"},{"author":"Trevor Coleman","content":"   npx ignite-cli@latest new PowerSyncIgnite --remove-demo --workflow=cng --yes\\n\\nnpx expo install \\\\\\n  @journeyapps/powersync-sdk-react-native \\\\\\n  @journeyapps/react-native-quick-sqlite \\n\\nnpx expo install \\\\\\n  react-native-fetch-api \\\\\\n  react-native-polyfill-globals \\\\\\n  react-native-url-polyfill \\\\\\n  text-encoding \\\\\\n  web-streams-polyfill@^3.2.1 \\\\\\n  base-64 \\\\\\n  @azure/core-asynciterator-polyfill \\\\\\n  react-native-get-random-values\\n\\nyarn add -D @babel/plugin-transform-async-generator-functions\\n\\nnpx expo install @supabase/supabase-js\\n\\nnpx expo install @react-native-async-storage/async-storage\\n\\n    import \\"react-native-polyfill-globals/auto\\"\\n    import \\"@azure/core-asynciterator-polyfill\\"\\n\\n    /** @type {import(\'@babel/core\').TransformOptions[\'plugins\']} */\\n    const plugins = [\\n            //... other plugins\\n            // success-line\\n            \'@babel/plugin-transform-async-generator-functions\',  // <-- Add this\\n            /** NOTE: This must be last in the plugins @see https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/#babel-plugin */\\n            \\"react-native-reanimated/plugin\\",\\n        ]\\n    \\n\\n{\\n  \\"expo\\": {\\n    \\"plugins\\": [\\n      // ...\\n      [\\n        \\"expo-build-properties\\",\\n        {\\n          \\"ios\\": {\\n            \\"newArchEnabled\\": false,\\n            \\"flipper\\": false\\n          },\\n          \\"android\\": {\\n            \\"newArchEnabled\\": false,\\n            // success-line\\n            \\"networkInspector\\": false\\n          }\\n        }\\n      ]\\n      //...\\n    ]\\n    //...\\n  }\\n}\\n\\n// `app/config/config.base.ts`:\\n\\n// update the interface to include the new properties\\nexport interface ConfigBaseProps {\\n  // Existing config properties\\n\\n  // success-line\\n  supabaseUrl: string\\n  // success-line\\n  supabaseAnonKey: string\\n}\\n\\n// Add the new properties to the config object\\nconst BaseConfig: ConfigBaseProps = {\\n  // Existing config values\\n  // success-line\\n  supabaseUrl: \'<<YOUR_SUPABASE_URL>>\',\\n  // success-line\\n  supabaseAnonKey: \'<<YOUR_SUPABASE_ANON_KEY>>\',\\n}\\n\\n// app/services/database/supabase.ts\\nimport AsyncStorage from \'@react-native-async-storage/async-storage\'\\nimport { createClient } from \\"@supabase/supabase-js\\"\\nimport { Config } from \'../../config\'\\n\\nexport const supabase = createClient(Config.supabaseUrl, Config.supabaseAnonKey, {\\n  auth: {\\n    persistSession: true, storage: AsyncStorage,\\n  },\\n})\\n\\n// app/services/database/use-auth.tsx\\nimport { User } from \\"@supabase/supabase-js\\"\\nimport { supabase } from \\"app/services/database/supabase\\"\\nimport React, { createContext, PropsWithChildren, useCallback, useContext, useMemo, useState } from \\"react\\"\\n\\ntype AuthContextType = {\\n  signIn: (email: string, password: string) => void\\n  signUp: (email: string, password: string) => void\\n  signOut: () => Promise<void>\\n  signedIn: boolean\\n  loading: boolean\\n  error: string\\n  user: User | null\\n}\\n\\n// We initialize the context with null to ensure that it is not used outside of the provider\\nconst AuthContext = createContext<AuthContextType | null>(null)\\n\\n/**\\n * AuthProvider manages the authentication state and provides the necessary methods to sign in, sign up and sign out.\\n */\\nexport const AuthProvider = ({ children }: PropsWithChildren<any>) => {\\n  const [signedIn, setSignedIn] = useState(false)\\n  const [loading, setLoading] = useState(false)\\n  const [error, setError] = useState(\\"\\")\\n  const [user, setUser] = useState<User | null>(null)\\n\\n\\n  // Sign in with provided email and password\\n  const signIn = useCallback(async (email: string, password: string) => {\\n    setLoading(true)\\n    setError(\\"\\")\\n    setUser(null)\\n    \\n    try {\\n      // get the session and user from supabase\\n      const { \\n        data: {session, user}, \\n        error \\n      } = await supabase.auth.signInWithPassword({ email, password })\\n      \\n      // if we have a session and user, sign them in\\n      if (session && user) {\\n        setSignedIn(true)\\n        setUser(user)\\n      // otherwise sign them out and set an error\\n      } else {\\n        throw new Error(error?.message);\\n        setSignedIn(false)\\n        setUser(null)\\n      }\\n    } catch (error: any) {\\n      setError(error?.message ?? \\"Unknown error\\")\\n      setSignedIn(false)\\n      setUser(null)\\n    } finally {\\n      setLoading(false)\\n    }\\n  }, [\\n    setSignedIn, setLoading, setError, setUser, supabase\\n  ])\\n\\n  // Create a new account with provided email and password\\n  const signUp = useCallback(async (email: string, password: string) => {\\n    setLoading(true)\\n    setError(\\"\\")\\n    setUser(null)\\n    try {\\n      const { data, error } = await supabase.auth.signUp({ email, password })\\n      if (error) {\\n        setSignedIn(false)\\n        setError(error.message)\\n      } else if (data.session) {\\n        await supabase.auth.setSession(data.session)\\n        setSignedIn(true)\\n        setUser(data.user)\\n      }\\n    } catch (error: any) {\\n      setUser(null)\\n      setSignedIn(false)\\n      setError(error?.message ?? \\"Unknown error\\")\\n    } finally {\\n      setLoading(false)\\n    }\\n  }, [\\n    setSignedIn, setLoading, setError, setUser, supabase\\n  ])\\n\\n  // Sign out the current user\\n  const signOut = useCallback(async () => {\\n    setLoading(true)\\n    await supabase.auth.signOut()\\n    setError(\\"\\")\\n    setSignedIn(false)\\n    setLoading(false)\\n    setUser(null)\\n  }, [\\n    setSignedIn, setLoading, setError, setUser, supabase\\n  ])\\n\\n  // Always memoize context values as they can cause unnecessary re-renders if they aren\'t stable!\\n  const value = useMemo(() => ({\\n    signIn, signOut, signUp, signedIn, loading, error, user\\n  }), [\\n    signIn, signOut, signUp, signedIn, loading, error, user\\n  ])\\n  return <AuthContext.Provider value={ value }>{ children }</AuthContext.Provider>\\n}\\n\\nexport const useAuth = () => {\\n  const context = useContext(AuthContext)\\n\\n  // It\'s a good idea to throw an error if the context is null, as it means the hook is being used outside of the provider\\n  if (context === null) {\\n    throw new Error(\'useAuthContext must be used within a AuthProvider\')\\n  }\\n  return context\\n}\\n\\n\\n// app/app.tsx\\n// ...other imports\\n// success-line\\nimport { AuthProvider } from \\"app/services/database/use-auth\\"\\n\\n// ...\\nfunction App(props: AppProps) {\\n  // ...\\n  return (\\n    // success-line\\n    <AuthProvider>\\n      <SafeAreaProvider>\\n        {/* ... */ }\\n      </SafeAreaProvider>\\n      // success-line\\n    </AuthProvider>\\n  )\\n}\\n\\n\\n\\nnpx ignite-cli generate screen Auth\\n\\n// app/screens/AuthScreen.tsx\\nimport { AppStackScreenProps } from \\"app/navigators\\"\\nimport { Button, Screen, Text, TextField } from \\"app/components\\"\\nimport { useAuth } from \\"app/services/database/use-auth\\"\\nimport React, { useEffect, useState } from \\"react\\"\\nimport { ActivityIndicator, Modal, TextStyle, View, ViewStyle } from \\"react-native\\"\\nimport { colors, spacing } from \\"../theme\\"\\n\\ninterface AuthScreenProps extends AppStackScreenProps<\\"Auth\\"> {}\\n\\nexport const AuthScreen: React.FC<AuthScreenProps> = ({ navigation }) => {\\n  const { signUp, signIn, loading, error, user } = useAuth()\\n  const [email, setEmail] = useState(\\"\\")\\n  const [password, setPassword] = useState(\\"\\")\\n\\n  const handleSignIn = async () => {\\n    signIn(email, password)\\n  }\\n\\n  const handleSignUp = async () => {\\n    signUp(email, password)\\n  }\\n\\n  useEffect(() => {\\n    if (user) {\\n      navigation.navigate(\\"Welcome\\")\\n    }\\n  }, [user])\\n\\n  return (\\n    <Screen style={ $container } safeAreaEdges={ [\\"top\\"] }>\\n      <Text preset={ \\"subheading\\" }>PowerSync + Supabase</Text>\\n      <Text preset={ \\"heading\\" }>Sign in or Create Account</Text>\\n      <TextField\\n        inputWrapperStyle={ $inputWrapper }\\n        containerStyle={ $inputContainer }\\n        label={ \\"Email\\" }\\n        value={ email }\\n        inputMode={ \\"email\\" }\\n        onChangeText={ setEmail }\\n        keyboardType=\\"email-address\\"\\n        autoCapitalize={ \\"none\\" }\\n      />\\n      <TextField\\n        containerStyle={ $inputContainer }\\n        inputWrapperStyle={ $inputWrapper }\\n        label={ \\"Password\\" }\\n        value={ password }\\n        onChangeText={ setPassword }\\n        secureTextEntry\\n      />\\n\\n      <View style={ $buttonContainer }>\\n        <Button\\n          disabled={ loading }\\n          text={ \\"Sign In\\" }\\n          onPress={ handleSignIn }\\n          style={ $button }\\n          preset={ \\"reversed\\" }\\n        />\\n\\n        <Button\\n          disabled={ loading }\\n          text={ \\"Register New Account\\" }\\n          onPress={ handleSignUp }\\n          style={ $button }\\n        />\\n      </View>\\n      { error ? <Text style={ $error } text={ error }/> : null }\\n      <Modal transparent visible={ loading }>\\n        <View style={ $modalBackground }>\\n          <ActivityIndicator size=\\"large\\" color={ colors.palette.primary500 }/>\\n        </View>\\n      </Modal>\\n    </Screen>\\n  )\\n}\\n\\nconst $container: ViewStyle = {\\n  backgroundColor: colors.background,\\n  flex: 1,\\n  justifyContent: \\"center\\",\\n  paddingHorizontal: spacing.lg,\\n}\\n\\nconst $inputContainer: TextStyle = {\\n  marginTop: spacing.md,\\n}\\n\\nconst $inputWrapper: TextStyle = {\\n  backgroundColor: colors.palette.neutral100,\\n}\\nconst $modalBackground: ViewStyle = {\\n  alignItems: \\"center\\",\\n  backgroundColor: \\"#00000040\\",\\n  flex: 1,\\n  flexDirection: \\"column\\",\\n  justifyContent: \\"space-around\\",\\n}\\n\\nconst $error: TextStyle = {\\n  color: colors.error,\\n  marginVertical: spacing.md,\\n  textAlign: \\"center\\",\\n  width: \\"100%\\",\\n  fontSize: 20,\\n}\\n\\nconst $buttonContainer: ViewStyle = {\\n  display: \\"flex\\",\\n  flexDirection: \\"column\\",\\n  justifyContent: \\"space-between\\",\\n  marginVertical: spacing.md,\\n}\\n\\nconst $button: ViewStyle = {\\n  marginTop: spacing.xs,\\n}\\n\\nnpx ignite-cli generate component SignOutButton\\n\\n// app/components/SignOutButton.tsx\\n\\nimport { Button } from \\"app/components/Button\\"\\nimport { useAuth } from \\"app/services/database/use-auth\\"\\nimport * as React from \\"react\\"\\nimport { StyleProp, View, ViewStyle } from \\"react-native\\"\\nimport { observer } from \\"mobx-react-lite\\"\\nimport { spacing } from \\"app/theme\\"\\n\\nexport interface SignOutButtonProps {\\n  /**\\n   * An optional style override useful for padding & margin.\\n   */\\n  style?: StyleProp<ViewStyle>\\n}\\n\\n/**\\n * Describe your component here\\n */\\nexport const SignOutButton = observer(function SignOutButton(props: SignOutButtonProps) {\\n  const { style } = props\\n  const $styles = [$container, style]\\n\\n  const { signOut } = useAuth()\\n\\n  const handleSignOut = async () => {\\n    await signOut()\\n  }\\n\\n  return (\\n    <View style={ $styles }>\\n      <Button text=\\"Sign Out\\" onPress={ handleSignOut }/>\\n    </View>\\n  )\\n})\\n\\nconst $container: ViewStyle = {\\n  padding: spacing.md,\\n}\\n\\n// app/screens/WelcomeScreen.tsx\\nimport { NativeStackScreenProps } from \\"@react-navigation/native-stack\\"\\nimport { Lists, SignOutButton } from \\"app/components\\"\\nimport { DatabaseProvider } from \\"app/services/database/database\\"\\nimport { observer } from \\"mobx-react-lite\\"\\nimport React, { FC } from \\"react\\"\\nimport { ViewStyle } from \\"react-native\\"\\nimport { SafeAreaView } from \\"react-native-safe-area-context\\"\\nimport { SignedInNavigatorParamList } from \\"../navigators\\"\\nimport { colors } from \\"../theme\\"\\n\\nexport const WelcomeScreen: FC<WelcomeScreenProps> = observer(function WelcomeScreen() {\\n  return (\\n    <DatabaseProvider>\\n      <SafeAreaView style={ $container }>\\n        <SignOutButton/>\\n      </SafeAreaView>\\n    </DatabaseProvider>\\n  )\\n})\\n\\nconst $container: ViewStyle = {\\n  flex: 1,\\n  backgroundColor: colors.palette.neutral300,\\n  display: \\"flex\\",\\n  justifyContent: \\"flex-start\\",\\n  height: \\"100%\\",\\n  flexDirection: \\"column\\",\\n}\\n\\n// app/navigators/AppNavigator.tsx\\n\\n//...\\n\\nconst AppStack = observer(function AppStack() {\\n  // Fetch the user from the auth context\\n  // success-line\\n  // success-line\\n  const { signedIn } = useAuth()\\n  return (\\n    <Stack.Navigator\\n      screenOptions={ { headerShown: false, navigationBarColor: colors.background } }\\n    >\\n      {/**\\n       * by wrapping the Welcome screen in a conditional, we ensure that\\n       * the user can only access it if they are signed in\\n       */ }\\n      // success-line\\n      { signedIn\\n        // success-line\\n        ? <Stack.Screen name=\\"Welcome\\" component={ Screens.WelcomeScreen }/>\\n        // success-line\\n        : null\\n        // success-line\\n      }\\n      <Stack.Screen name=\\"Auth\\" component={ Screens.AuthScreen }/>\\n      {/* IGNITE_GENERATOR_ANCHOR_APP_STACK_SCREENS */ }\\n    </Stack.Navigator>\\n  )\\n})\\n\\n// ...\\n\\n// app/config/config.base.ts:\\n\\n// update the interface to include the new properties\\nexport interface ConfigBaseProps {\\n  // Existing config properties\\n  supabaseUrl: string\\n  supabaseAnonKey: string\\n  // success-line\\n  powersyncUrl: string\\n}\\n\\n// Add the new properties to the config object\\nconst BaseConfig: ConfigBaseProps = {\\n  // Existing config values\\n  supabaseUrl: \'<<YOUR_SUPABASE_URL>>\',\\n  supabaseAnonKey: \'<<YOUR_SUPABASE_ANON_KEY>>\',\\n  // success-line\\n  powersyncUrl: \'<<YOUR_POWER_SYNC_URL>>\',\\n}\\n\\n// app/services/database/schema.ts\\nimport {\\n  Column,\\n  ColumnType,\\n  Index,\\n  IndexedColumn,\\n  Schema,\\n  Table\\n} from \'@journeyapps/powersync-sdk-react-native\'\\n\\nexport const TODO_TABLE = \'todos\'\\nexport const LIST_TABLE = \'lists\'\\n\\nexport interface ListRecord {\\n  id: string\\n  name: string\\n  created_at: string\\n  owner_id?: string\\n}\\n\\nexport interface TodoRecord {\\n  id: string\\n  created_at: string\\n  completed: boolean\\n  description: string\\n  completed_at?: string\\n  created_by: string\\n  completed_by?: string\\n  list_id: string\\n  photo_id?: string\\n}\\n\\nexport const AppSchema = new Schema([\\n  new Table({\\n    name: \'todos\',\\n    columns: [\\n      new Column({ name: \'list_id\', type: ColumnType.TEXT }),\\n      new Column({ name: \'created_at\', type: ColumnType.TEXT }),\\n      new Column({ name: \'completed_at\', type: ColumnType.TEXT }),\\n      new Column({ name: \'description\', type: ColumnType.TEXT }),\\n      new Column({ name: \'completed\', type: ColumnType.INTEGER }),\\n      new Column({ name: \'created_by\', type: ColumnType.TEXT }),\\n      new Column({ name: \'completed_by\', type: ColumnType.TEXT })\\n    ],\\n    indexes: [\\n      new Index({\\n        name: \'list\',\\n        columns: [new IndexedColumn({ name: \'list_id\' })]\\n      })\\n    ]\\n  }),\\n  new Table({\\n    name: \'lists\',\\n    columns: [\\n      new Column({ name: \'created_at\', type: ColumnType.TEXT }),\\n      new Column({ name: \'name\', type: ColumnType.TEXT }),\\n      new Column({ name: \'owner_id\', type: ColumnType.TEXT })\\n    ]\\n  }),\\n])\\n\\n\\n// from @journeyapps/powersync-sdk-common \\nexport interface PowerSyncBackendConnector {\\n  /** Allows the PowerSync client to retrieve an authentication token from your backend\\n   * which is used to authenticate against the PowerSync service.\\n   *\\n   * This should always fetch a fresh set of credentials - don\'t use cached\\n   * values.\\n   *\\n   * Return null if the user is not signed in. Throw an error if credentials\\n   * cannot be fetched due to a network error or other temporary error.\\n   *\\n   * This token is kept for the duration of a sync connection.\\n   */\\n  fetchCredentials: () => Promise<PowerSyncCredentials | null>\\n\\n  /** Upload local changes to the app backend.\\n   *\\n   * Use {@link AbstractPowerSyncDatabase.getCrudBatch} to get a batch of changes to upload.\\n   *\\n   * Any thrown errors will result in a retry after the configured wait period (default: 5 seconds).\\n   */\\n  uploadData: (database: AbstractPowerSyncDatabase) => Promise<void>\\n}\\n\\n// app/services/database/supabase.ts\\nimport {\\n  AbstractPowerSyncDatabase,\\n  CrudEntry, PowerSyncBackendConnector,\\n  UpdateType, PowerSyncCredentials\\n} from \\"@journeyapps/powersync-sdk-react-native\\"\\nimport AsyncStorage from \'@react-native-async-storage/async-storage\'\\nimport { createClient } from \\"@supabase/supabase-js\\"\\nimport Config from \\"../../config\\"\\n\\nexport const supabase = createClient(Config.supabaseUrl, Config.supabaseAnonKey, {\\n  auth: {\\n    persistSession: true, storage: AsyncStorage,\\n  },\\n})\\n\\n\\n// This function fetches the session token from Supabase, it should return null if the user is not signed in, and the session token if they are.\\nasync function fetchCredentials(): Promise<PowerSyncCredentials | null> {\\n  const { data: { session }, error } = await supabase.auth.getSession()\\n\\n  if (error) {\\n    throw new Error(`Could not fetch Supabase credentials: ${ error }`)\\n  }\\n\\n  if (!session) {\\n    return null\\n  }\\n\\n  return {\\n    endpoint: Config.powersyncUrl,\\n    token: session.access_token ?? \\"\\",\\n    expiresAt: session.expires_at\\n               ? new Date(session.expires_at * 1000)\\n               : undefined\\n  }\\n}\\n\\n\\n// Regexes for response codes indicating unrecoverable errors.\\nconst FATAL_RESPONSE_CODES = [\\n  /^22...$/, // Data Exception\\n  /^23...$/, // Integrity Constraint Violation\\n  /^42501$/, // INSUFFICIENT PRIVILEGE\\n]\\n\\n// PowerSync will call this function to upload data to the backend\\nconst uploadData: (database: AbstractPowerSyncDatabase) => Promise<void> = async (database) => {\\n  const transaction = await database.getNextCrudTransaction()\\n\\n  if (!transaction) {\\n    return\\n  }\\n\\n\\n  let lastOp: CrudEntry | null = null\\n  try {\\n    // Note: If transactional consistency is important, use database functions\\n    // or edge functions to process the entire transaction in a single call.\\n    for (const op of transaction.crud) {\\n      lastOp = op\\n      const table = supabase.from(op.table)\\n      let result: any = null\\n      switch (op.op) {\\n        case UpdateType.PUT:\\n          // eslint-disable-next-line no-case-declarations\\n          const record = { ...op.opData, id: op.id }\\n          result = await table.upsert(record)\\n          break\\n        case UpdateType.PATCH:\\n          result = await table.update(op.opData).eq(\'id\', op.id)\\n          break\\n        case UpdateType.DELETE:\\n          result = await table.delete().eq(\'id\', op.id)\\n          break\\n      }\\n\\n      if (result?.error) {\\n        throw new Error(`Could not ${ op.op } data to Supabase error: ${ JSON.stringify(result) }`)\\n      }\\n    }\\n\\n    await transaction.complete()\\n  } catch (ex: any) {\\n    console.debug(ex)\\n    if (typeof ex.code === \'string\' && FATAL_RESPONSE_CODES.some((regex) => regex.test(ex.code))) {\\n      /**\\n       * Instead of blocking the queue with these errors,\\n       * discard the (rest of the) transaction.\\n       *\\n       * Note that these errors typically indicate a bug in the application.\\n       * If protecting against data loss is important, save the failing records\\n       * elsewhere instead of discarding, and/or notify the user.\\n       */\\n      console.error(`Data upload error - discarding ${ lastOp }`, ex)\\n      await transaction.complete()\\n    } else {\\n      // Error may be retryable - e.g. network error or temporary server error.\\n      // Throwing an error here causes this call to be retried after a delay.\\n      throw ex\\n    }\\n  }\\n}\\n\\nexport const supabaseConnector: PowerSyncBackendConnector = {\\n  fetchCredentials, uploadData,\\n}\\n\\n// app/services/database/database.tsx\\nimport { SupabaseClient } from \\"@supabase/supabase-js\\"\\nimport { useAuth } from \\"./use-auth\\"\\nimport React, { PropsWithChildren, useEffect } from \\"react\\"\\nimport {\\n  AbstractPowerSyncDatabase,\\n  PowerSyncContext,\\n  RNQSPowerSyncDatabaseOpenFactory,\\n} from \\"@journeyapps/powersync-sdk-react-native\\"\\nimport { supabase, supabaseConnector } from \\"./supabase\\" // Adjust the path as needed\\nimport { AppSchema } from \\"./schema\\" // Adjust the path as needed\\n\\nexport class Database {\\n  // We expose the PowerSync and Supabase instances for easy access elsewhere in the app\\n  powersync: AbstractPowerSyncDatabase\\n  supabase: SupabaseClient = supabase\\n\\n  /**\\n   * Initialize the Database class with a new PowerSync instance\\n   */\\n  constructor() {\\n    const factory = new RNQSPowerSyncDatabaseOpenFactory({\\n      schema: AppSchema,\\n      dbFilename: \\"sqlite.db\\",\\n    })\\n    this.powersync = factory.getInstance()\\n  }\\n\\n  /**\\n   * Initialize the PowerSync instance and connect it to the Supabase backend.\\n   * This will call `fetchCredentials` on the Supabase connector to get the session token.\\n   * So if your database requires authentication, the user will need to be signed in before this is\\n   * called.\\n   */\\n  async init() {\\n    await this.powersync.init()\\n    await this.powersync.connect(supabaseConnector)\\n  }\\n\\n  async disconnect() {\\n    await this.powersync.disconnectAndClear()\\n  }\\n}\\n\\nconst database = new Database()\\n\\n// A context to provide our singleton to the rest of the app\\nconst DatabaseContext = React.createContext<Database | null>(null)\\n\\nexport const useDatabase = () => {\\n  const context: Database | null = React.useContext(DatabaseContext)\\n  if (!context) {\\n    throw new Error(\\"useDatabase must be used within a DatabaseProvider\\")\\n  }\\n\\n  return context\\n}\\n\\n// Finally, we create a provider component that initializes the database and provides it to the app\\nexport function DatabaseProvider<T>({ children }: PropsWithChildren<T>) {\\n  const { user } = useAuth()\\n  useEffect(() => {\\n    if (user) {\\n      database.init().catch(console.error)\\n    }\\n  }, [database, user])\\n  return (\\n    <DatabaseContext.Provider value={ database }>\\n      <PowerSyncContext.Provider value={ database.powersync }>\\n        { children }\\n      </PowerSyncContext.Provider>\\n    </DatabaseContext.Provider>\\n  )\\n}\\n\\n// app/app.tsx\\n\\n\\n//... other imports\\n// success-line\\n// Import the provder\\n// success-line\\nimport { DatabaseProvider } from \\"app/services/database/database\\"\\n\\n// ...\\n\\nfunction App(props: AppProps) {\\n  // ...\\n  return (\\n    <AuthProvider>\\n      // success-line\\n      {/* Add the Database Provider inside the AuthProvider */ }\\n      // success-line\\n      <DatabaseProvider>\\n        <SafeAreaProvider initialMetrics={ initialWindowMetrics }>\\n          // ...\\n        </SafeAreaProvider>\\n        // success-line\\n      </DatabaseProvider>\\n    </AuthProvider>\\n  )\\n}\\n\\nexport default App\\n\\nconst $container: ViewStyle = {\\n  flex: 1,\\n}\\n\\n\\nconst lists = usePowerSyncWatchedQuery<ListItemRecord>(`\\n    SELECT ${ LIST_TABLE }.*,\\n         COUNT(${ TODO_TABLE }.id) AS total_tasks,\\n         SUM(CASE WHEN ${ TODO_TABLE }.completed = true THEN 1 ELSE 0 END) AS completed_tasks\\n    FROM ${ LIST_TABLE }\\n         LEFT JOIN ${ TODO_TABLE } ON ${ LIST_TABLE }.id = ${ TODO_TABLE }.list_id\\n    GROUP BY ${ LIST_TABLE }.id;\\n  `);\\n\\nconst deleteList = useCallback(async (id: string) => {\\n  console.log(\'Deleting list\', id)\\n  return powersync.execute(`DELETE FROM ${ LIST_TABLE } WHERE id = ?`, [id])\\n}, [powersync])\\n\\n// app/components/SignOutButton.tsx\\n\\n//...other imports\\nimport { useDatabase } from \\"app/services/database/database\\"\\n\\n// ...\\nexport const SignOutButton = observer(function SignOutButton(props: SignOutButtonProps) {\\n  // ...\\n\\n  const { signOut } = useAuth()\\n  // success-line\\n  const { powersync } = useDatabase()\\n\\n  // success-line\\n  const handleSignOut = async () => {  // make this async\\n    // success-line\\n    await powersync.disconnectAndClear()\\n    await signOut()\\n  }\\n\\n  return (\\n    <View style={ $styles }>\\n      <Button text=\\"Sign Out\\" onPress={ handleSignOut }/>\\n    </View>\\n  )\\n})\\n\\n\\nnpx expo add expo-crypto\\n\\n// app/services/database/use-lists.ts\\nimport { usePowerSyncWatchedQuery } from \\"@journeyapps/powersync-sdk-react-native\\"\\nimport { useAuth } from \\"app/services/database/use-auth\\"\\nimport { useCallback } from \\"react\\"\\nimport { useDatabase } from \\"app/services/database/database\\"\\nimport { LIST_TABLE, ListRecord, TODO_TABLE } from \\"app/services/database/schema\\"\\nimport { randomUUID } from \'expo-crypto\'\\n\\n// Extend the base type with the calculated fields from our query  \\nexport type ListItemRecord = ListRecord & { total_tasks: number; completed_tasks: number }\\n\\nexport const useLists = () => {\\n  // Get the current user from the auth context \\n  const { user } = useAuth()\\n  // Get the database instance from the context\\n  const { powersync } = useDatabase()\\n\\n  // List fetching logic here. You can modify it as per your needs.\\n  const lists = usePowerSyncWatchedQuery<ListItemRecord>(`\\n      SELECT ${ LIST_TABLE }.*,\\n             COUNT(${ TODO_TABLE }.id) AS total_tasks,\\n             SUM(CASE WHEN ${ TODO_TABLE }.completed = true THEN 1 ELSE 0 END) as completed_tasks\\n      FROM ${ LIST_TABLE }\\n               LEFT JOIN ${ TODO_TABLE } ON ${ LIST_TABLE }.id = ${ TODO_TABLE }.list_id\\n      GROUP BY ${ LIST_TABLE }.id\\n  `)\\n\\n\\n  const createList = useCallback(async (name: string) => {\\n\\n    if (!user) {throw new Error(\\"Can\'t add list -- user is undefined\\")}\\n\\n    return powersync.execute(\\n      `\\n          INSERT INTO ${ LIST_TABLE }\\n              (id, name, created_at, owner_id)\\n          VALUES (?, ?, ?, ?)`,\\n      [randomUUID(), name, new Date().toISOString(), user?.id],\\n    )\\n  }, [user, powersync])\\n\\n  const deleteList = useCallback(async (id: string) => {\\n    console.log(\'Deleting list\', id)\\n    return powersync.execute(`DELETE\\n                             FROM ${ LIST_TABLE }\\n                             WHERE id = ?`, [id])\\n  }, [powersync])\\n\\n  return { lists, createList, deleteList }\\n}\\n\\n\\nnpx ignite-cli generate component AddList\\n\\nnpx ignite-cli generate component Lists\\n\\n// app/screens/WelcomeScreen.tsx\\nimport { NativeStackScreenProps } from \\"@react-navigation/native-stack\\"\\nimport { Lists, SignOutButton } from \\"app/components\\"\\nimport { observer } from \\"mobx-react-lite\\"\\nimport React, { FC } from \\"react\\"\\nimport { ViewStyle } from \\"react-native\\"\\nimport { SafeAreaView } from \\"react-native-safe-area-context\\"\\nimport { SignedInNavigatorParamList } from \\"../navigators\\"\\nimport { colors } from \\"../theme\\"\\n\\ninterface WelcomeScreenProps\\n  extends NativeStackScreenProps<SignedInNavigatorParamList, \\"Welcome\\"> {}\\n\\nexport const WelcomeScreen: FC<WelcomeScreenProps> = observer(function WelcomeScreen() {\\n  return (\\n    <SafeAreaView style={ $container }>\\n      <Lists/>\\n      <SignOutButton/>\\n    </SafeAreaView>\\n  )\\n})\\n\\nconst $container: ViewStyle = {\\n  flex: 1,\\n  backgroundColor: colors.palette.neutral300,\\n  display: \\"flex\\",\\n  justifyContent: \\"flex-start\\",\\n  height: \\"100%\\",\\n  flexDirection: \\"column\\",\\n}\\n\\n\\n\\n// app/components/Lists.tsx\\nimport { NavigationProp, useNavigation } from \\"@react-navigation/native\\"\\nimport { AddList, Icon, ListItem, Text } from \\"app/components\\"\\nimport { AppStackParamList } from \\"app/navigators\\"\\nimport { ListItemRecord, useLists } from \\"app/services/database/use-lists\\"\\nimport React, { useCallback } from \\"react\\"\\nimport { FlatList, TextStyle, View, ViewStyle } from \\"react-native\\"\\nimport { colors, spacing } from \\"../theme\\"\\n\\nexport function Lists() {\\n  \\n  // use our hook to fetch the lists\\n  const { lists, deleteList } = useLists()\\n  const navigation = useNavigation<NavigationProp<AppStackParamList>>()\\n\\n  // This function tells FlatList how to render each item\\n  const renderItem = useCallback(({ item }: { item: ListItemRecord }) => {\\n    return (\\n      <ListItem\\n        textStyle={ $listItemText }\\n        onPress={ () => {\\n          // Eventually  this si where we\'ll navigate to the todo, but for now we\'ll just log the list name\\n          console.log(\'Pressed: \', item.name)\\n        } }\\n        text={ `${ item.name }` }\\n        RightComponent={\\n          <View style={ $deleteListIcon }>\\n            {/* Let users delete lists */}\\n            <Icon icon={ \\"x\\" } onPress={ () => deleteList(item.id) }/>\\n          </View>\\n        }\\n      />\\n    )\\n  }, [])\\n\\n  return (\\n    <View style={ $container }>\\n      <Text preset={ \\"heading\\" }>Lists</Text>\\n      <View style={ $card }>\\n        <AddList/>\\n      </View>\\n      <View style={ [$list, $card] }>\\n        <Text preset={ \\"subheading\\" }>Your Lists</Text>\\n        <FlatList\\n          style={ $listContainer }\\n          // pass in our lists\\n          data={ lists }\\n          // pass in our renderItem function\\n          renderItem={ renderItem }\\n          keyExtractor={ (item) => item.id }\\n          ItemSeparatorComponent={ () => <View style={ $separator }/> }\\n          // show a message if the list is empty\\n          ListEmptyComponent={ <Text style={ $emptyList }>No lists found</Text> }\\n        />\\n      </View>\\n    </View>\\n  )\\n}\\n\\n// STYLES\\nconst $separator: ViewStyle = { height: 1, backgroundColor: colors.border }\\nconst $emptyList: TextStyle = {\\n  textAlign: \\"center\\",\\n  color: colors.textDim,\\n  opacity: 0.5,\\n  padding: spacing.lg,\\n}\\nconst $card: ViewStyle = {\\n  shadowColor: colors.palette.neutral800,\\n  shadowOffset: { width: 0, height: 1 },\\n  shadowRadius: 2,\\n  shadowOpacity: 0.35,\\n  borderRadius: 8,\\n}\\nconst $listContainer: ViewStyle = {\\n  backgroundColor: colors.palette.neutral100,\\n  paddingHorizontal: spacing.md,\\n  height: \\"100%\\",\\n  borderColor: colors.border,\\n  borderWidth: 1,\\n}\\nconst $list: ViewStyle = {\\n  flex: 1,\\n  marginVertical: spacing.md,\\n  backgroundColor: colors.palette.neutral200,\\n  padding: spacing.md,\\n}\\nconst $container: ViewStyle = {\\n  flex: 1,\\n  display: \\"flex\\",\\n  flexGrow: 1,\\n  padding: spacing.md,\\n}\\nconst $listItemText: TextStyle = {\\n  height: 44,\\n  width: 44,\\n}\\nconst $deleteListIcon: ViewStyle = {\\n  display: \\"flex\\",\\n  justifyContent: \\"center\\",\\n  alignItems: \\"center\\",\\n  height: 44,\\n  marginVertical: spacing.xxs,\\n}\\n\\n// app/components/AddList.tsx\\nimport { Button, Text, TextField } from \\"app/components\\"\\nimport { useLists } from \\"app/services/database/use-lists\\"\\nimport { colors, spacing } from \\"app/theme\\"\\nimport { observer } from \\"mobx-react-lite\\"\\nimport React from \\"react\\"\\nimport { Keyboard, TextStyle, View, ViewStyle } from \\"react-native\\"\\n\\n/**\\n * Display a form to add a new list\\n */\\nexport const AddList = observer(function AddList() {\\n  const [newListName, setNewListName] = React.useState(\\"\\")\\n  const [error, setError] = React.useState<string | null>(null)\\n\\n  // we use the function from  our hook to create a new list\\n  const { createList } = useLists()\\n\\n  const handleAddList = React.useCallback(async () => {\\n    if (!newListName) {\\n      Keyboard.dismiss()\\n      return\\n    }\\n    try {\\n      await createList(newListName)\\n      setNewListName(\\"\\")\\n    } catch (e: any) {\\n      setError(`Failed to create list: ${ e?.message ?? \\"unknown error\\" }`)\\n    } finally {\\n      Keyboard.dismiss()\\n    }\\n  }, [createList, newListName])\\n\\n  return (\\n    <View style={ $container }>\\n      <Text preset={ \\"subheading\\" }>Add a List</Text>\\n      <View style={ $form }>\\n        <TextField\\n          placeholder=\\"Enter a list name\\"\\n          containerStyle={ $textField }\\n          inputWrapperStyle={ $textInput }\\n          onChangeText={ setNewListName }\\n          value={ newListName }\\n          onSubmitEditing={ handleAddList }\\n        />\\n        <Button text=\\"Add List\\" style={ $button } onPress={ handleAddList }/>\\n      </View>\\n      { error && <Text style={ $error }>{ error }</Text> }\\n    </View>\\n  )\\n})\\n\\nconst $container: ViewStyle = {\\n  padding: spacing.md,\\n  backgroundColor: colors.palette.neutral200,\\n}\\n\\nconst $form: ViewStyle = {\\n  display: \\"flex\\",\\n  flexDirection: \\"row\\",\\n  alignItems: \\"center\\",\\n}\\n\\nconst $textField: ViewStyle = {\\n  flex: 1,\\n}\\n\\nconst $textInput: ViewStyle = {\\n  backgroundColor: colors.palette.neutral100,\\n}\\n\\nconst $button: ViewStyle = {\\n  marginHorizontal: spacing.xs,\\n  padding: 0,\\n  paddingHorizontal: spacing.xs,\\n  paddingVertical: 0,\\n  minHeight: 44,\\n}\\n\\nconst $error: TextStyle = {\\n  color: colors.error,\\n  marginTop: spacing.sm,\\n}\\n\\n\\n\\nnpx ignite-cli generate screen TodoList\\n\\n    // app/navigators/AppNavigator.tsx\\n    export type AppStackParamList = {\\n      Welcome: undefined\\n      Auth: undefined\\n      // success-line\\n      TodoList: { listId: string }  // add this line\\n      // IGNITE_GENERATOR_ANCHOR_APP_STACK_PARAM_LIST\\n    }\\n\\n    // ...\\n    \\n    const AppStack = observer(function AppStack() {\\n      // Fetch the user from the auth context\\n      const { signedIn } = useAuth()\\n      return (\\n        <Stack.Navigator screenOptions={ { headerShown: false, navigationBarColor: colors.background } }>\\n          <Stack.Screen name={ \\"Auth\\" } component={ AuthScreen }/>\\n          // success-line\\n          { signedIn ? (\\n            // success-line\\n            <>\\n              // success-line\\n              <Stack.Screen name=\\"Welcome\\" component={ Screens.WelcomeScreen }/>\\n              // success-line\\n              <Stack.Screen name=\\"TodoList\\" component={ Screens.TodoListScreen }/>\\n              // success-line\\n            </>\\n            // success-line\\n          ) : null }\\n          {/* IGNITE_GENERATOR_ANCHOR_APP_STACK_SCREENS */ }\\n        </Stack.Navigator>\\n      )\\n    })\\n \\n    export const AppNavigator = observer(function AppNavigator(props: NavigationProps) {\\n      // ...   \\n    })\\n\\n    // app/screens/TodoListScreen.tsx\\n    // ...\\n    \\n    export const TodoListScreen: FC<TodoListScreenProps> = function TodoListScreen({\\n      navigation,\\n      // success-line\\n      // We get the listId from the route params\\n      // success-line\\n      route: { params: {listId} }\\n    }) {\\n      return (\\n        <Screen style={ $root } preset=\\"scroll\\" safeAreaEdges={ [\\"top\\"] }>\\n          // success-line\\n          <Pressable onPress={ () => navigation.goBack() }>\\n            <Icon icon={ \\"back\\" } size={ 50 }/>\\n          </Pressable>\\n          // success-line\\n          <Text preset={ \\"heading\\" } text={ listId }/>\\n        </Screen>\\n      )\\n    }\\n    \\n    const $root: ViewStyle = {\\n      flex: 1,\\n    }\\n    \\n    const $backButton: ViewStyle = {\\n      height: 44,\\n    }\\n    \\n    \\n\\n// app/components/Lists.tsx\\n\\n// ... other imports\\nimport { NavigationProp, useNavigation } from \\"@react-navigation/native\\"\\nimport { AppStackParamList } from \\"app/navigators\\"\\n\\nexport function Lists() {\\n\\n  const { lists, deleteList } = useLists()\\n  // We use the root param list, because this component might be reusing in other screens/navigators\\n  // success-line\\n  const navigation = useNavigation<NavigationProp<AppStackParamList>>()\\n\\n  const renderItem = useCallback(({ item }: { item: ListItemRecord }) => {\\n    return <ListItem\\n      // ... other props\\n      // Navigate to the TodoList screen, passing the `listId` as a parameter\\n      onPress={ () => {\\n        // success-line\\n        navigation.navigate(\\"TodoList\\", { listId: item.id })\\n      } }\\n    />\\n  }, [])\\n\\n  return (\\n    //... component body\\n  )\\n}\\n\\n// app/services/database/use-list.ts\\n\\nimport { usePowerSyncQuery, usePowerSyncWatchedQuery } from \\"@journeyapps/powersync-sdk-react-native\\"\\nimport { useDatabase } from \\"app/services/database/database\\"\\nimport { LIST_TABLE, ListRecord, TODO_TABLE, TodoRecord } from \\"app/services/database/schema\\"\\nimport { useAuth } from \\"app/services/database/use-auth\\"\\nimport { useCallback } from \\"react\\"\\nimport { randomUUID } from \'expo-crypto\'\\n\\n\\nexport function useList(listId: string) {\\n  const { user } = useAuth()\\n  const { powersync } = useDatabase()\\n\\n\\n  const listRecords = usePowerSyncQuery<ListRecord>(`\\n      SELECT *\\n      FROM ${ LIST_TABLE }\\n      WHERE id = ?\\n  `, [listId])\\n\\n  // we only expect one list record\\n  const list = listRecords[0]\\n\\n\\n  const todos = usePowerSyncWatchedQuery<TodoRecord>(`\\n      SELECT *\\n      FROM ${ TODO_TABLE }\\n      WHERE list_id = ?\\n  `, [listId])\\n\\n\\n  const addTodo = useCallback(async (description: string): Promise<{ error: string | null }> => {\\n    if (!user) {\\n      throw new Error(\\"Can\'t add todo -- user is undefined\\")\\n    }\\n    try {\\n      await powersync.execute(\\n        `INSERT INTO ${ TODO_TABLE }\\n             (id, description, created_at, list_id, created_by, completed)\\n         VALUES (?, ?, ?, ?, ?, ?)`,\\n        [randomUUID(), description, new Date().toISOString(), listId, user?.id, 0],\\n      )\\n\\n      return { error: null }\\n    } catch (error: any) {\\n      return { error: `Error adding todo: ${ error?.message }` }\\n    }\\n  }, [user, powersync, listId])\\n\\n  const removeTodo = useCallback(async (id: string): Promise<{ error: string | null }> => {\\n    try {\\n      await powersync.execute(`DELETE\\n                                FROM ${ TODO_TABLE }\\n                                WHERE id = ?`, [id])\\n      return { error: null }\\n    } catch (error: any) {\\n      console.error(\\"Error removing todo\\", error)\\n      return { error: `Error removing todo: ${ error?.message }` }\\n    }\\n\\n  }, [\\n    powersync,\\n  ])\\n\\n  const setTodoCompleted = useCallback(async (id: string, completed: boolean): Promise<{ error: string | null }> => {\\n\\n    const completedAt = completed ? new Date().toISOString() : null\\n    const completedBy = completed ? user?.id : null\\n\\n    try {\\n      await powersync.execute(`\\n            UPDATE ${ TODO_TABLE }\\n            SET completed = ?, completed_at = ?, completed_by = ?\\n            WHERE id = ?\\n        `, [completed, completedAt, completedBy, id])\\n\\n      return { error: null }\\n\\n    } catch (error: any) {\\n      console.error(\'Error toggling todo\', error)\\n      return { error: `Error toggling todo: ${ error?.message }` }\\n    }\\n  }, [powersync])\\n\\n\\n  return { list, todos, addTodo, removeTodo, setTodoCompleted }\\n\\n}\\n\\n\\n// app/screens/TodoListScreen.tsx\\nimport { Button, Icon, ListItem, Screen, Text, TextField } from \\"app/components\\"\\nimport { SignedInNavigatorScreenProps } from \\"app/navigators\\"\\nimport { TodoRecord } from \\"app/services/database/schema\\"\\nimport { useList } from \\"app/services/database/use-list\\"\\nimport { colors, spacing } from \\"app/theme\\"\\nimport React, { FC, useCallback } from \\"react\\"\\nimport { FlatList, Pressable, TextStyle, View, ViewStyle } from \\"react-native\\"\\nimport { SafeAreaView } from \\"react-native-safe-area-context\\"\\n\\ninterface TodoListScreenProps extends SignedInNavigatorScreenProps<\\"TodoList\\"> {}\\n\\nexport const TodoListScreen: FC<TodoListScreenProps> = function TodoListScreen({\\n  navigation,\\n  route: { params: { listId } },\\n}) {\\n\\n  // We use the hook to get the list and todos for the list\\n  const { list, todos, addTodo, removeTodo, setTodoCompleted } = useList(listId)\\n\\n  // State for managing the new todo input and errors\\n  const [newTodo, setNewTodo] = React.useState(\\"\\")\\n  const [error, setError] = React.useState<string | null>(null)\\n\\n  // We wrap the addTodo from the hook with a bit of error handling\\n  const handleAddTodo = useCallback(async () => {\\n    const { error } = await addTodo(newTodo)\\n    if (error) {\\n      setError(error)\\n      return\\n    }\\n    setNewTodo(\\"\\")\\n  }, [newTodo])\\n\\n  // And do the same for removeTodo\\n  const handleRemoveTodo = useCallback(async (id: string) => {\\n    const { error } = await removeTodo(id)\\n    if (error) {\\n      setError(error)\\n    }\\n  }, [removeTodo, setError])\\n\\n  // We\'ll use the ListItem component to display each todo, as we did with the lists\\n  const renderItem = useCallback(({ item }: { item: TodoRecord }) => {\\n    return <ListItem\\n      containerStyle={ $listItemContainer }\\n      textStyle={ [$listItemText, item.completed && $strikeThrough] }\\n      text={ `${ item.description }` }\\n      RightComponent={ (\\n        <Pressable style={ $deleteIcon }>\\n          <Icon icon={ \\"x\\" } onPress={ () => handleRemoveTodo(item.id) }/>\\n        </Pressable>) }\\n      onPress={ () => setTodoCompleted(item.id, !item.completed) }\\n    />\\n  }, [\\n    handleRemoveTodo,\\n  ])\\n\\n  return (\\n    <Screen style={ $root } preset=\\"fixed\\">\\n      <SafeAreaView style={ $header } edges={ [\\"top\\"] }>\\n        <Pressable onPress={ () => navigation.goBack() }>\\n          <Icon icon={ \\"back\\" } size={ 44 }/>\\n        </Pressable>\\n        <Text style={ $listName } preset={ \\"heading\\" } text={ list?.name }/>\\n      </SafeAreaView>\\n      <View style={ $addTodoContainer }>\\n        <Text preset={ \\"subheading\\" }>Add a list</Text>\\n        <View style={ $form }>\\n          <TextField\\n            placeholder=\\"New todo...\\"\\n            containerStyle={ $textField }\\n            inputWrapperStyle={ $textInput }\\n            onChangeText={ setNewTodo }\\n            value={ newTodo }/>\\n          <Button text=\\"ADD\\" style={ $button } onPress={ handleAddTodo }/>\\n        </View>\\n        { error && <Text style={ $error }>{ error }</Text> }\\n      </View>\\n      <View style={ $container }>\\n        <FlatList\\n          data={ todos }\\n          renderItem={ renderItem }\\n          ItemSeparatorComponent={ () => <View style={ $separator }/> }\\n          ListEmptyComponent={ <Text style={ $emptyList }>List is Empty</Text> }\\n        />\\n      </View>\\n    </Screen>\\n  )\\n}\\n\\nconst $root: ViewStyle = {\\n  flex: 1,\\n}\\nconst $listItemContainer: ViewStyle = {\\n  alignItems: \\"center\\",\\n}\\n\\nconst $strikeThrough: TextStyle = { textDecorationLine: \\"line-through\\" }\\n\\nconst $form: ViewStyle = {\\n  display: \\"flex\\",\\n  flexDirection: \\"row\\",\\n  alignItems: \\"center\\",\\n}\\n\\nconst $separator: ViewStyle = { height: 1, backgroundColor: colors.border }\\n\\nconst $emptyList: TextStyle = {\\n  color: colors.textDim,\\n  opacity: 0.5,\\n  padding: spacing.lg,\\n  fontSize: 24,\\n}\\n\\nconst $textField: ViewStyle = {\\n  flex: 1,\\n}\\n\\nconst $textInput: ViewStyle = {\\n  backgroundColor: colors.palette.neutral100,\\n}\\n\\n\\nconst $button: ViewStyle = {\\n  marginHorizontal: spacing.xs,\\n  padding: 0,\\n  paddingHorizontal: spacing.xs,\\n  paddingVertical: 0,\\n}\\n\\nconst $addTodoContainer: ViewStyle = {\\n  padding: spacing.md,\\n  backgroundColor: colors.palette.neutral300,\\n}\\nconst $header: ViewStyle = {\\n  display: \\"flex\\",\\n  flexDirection: \\"row\\",\\n  alignItems: \\"center\\",\\n  backgroundColor: colors.palette.secondary200,\\n  paddingBottom: spacing.md,\\n}\\n\\nconst $listName: TextStyle = {\\n  marginLeft: spacing.sm,\\n  flex: 1,\\n}\\n\\nconst $error: TextStyle = {\\n  color: colors.error,\\n  marginTop: spacing.sm,\\n}\\n\\nconst $container: ViewStyle = {\\n  padding: spacing.md,\\n}\\n\\nconst $listItemText: TextStyle = {\\n  height: 44,\\n  verticalAlign: \\"middle\\"\\n}\\n\\nconst $deleteIcon: ViewStyle = {\\n  display: \\"flex\\",\\n  justifyContent: \\"center\\",\\n  alignItems: \\"center\\",\\n  height: 44,\\n  marginVertical: spacing.xxs,\\n}\\n\\n\\n","lastUpdated":"7 days ago","title":"PowerSync and Supabase for Local-First Data Management","publish_date":"2024-03-22","doc_name":"LocalFirstDataWithPowerSync.md"},{"author":"Dan Edwards","content":"curl -Ls \\"https://get.maestro.mobile.dev\\" | bash\\n\\nbrew tap facebook/fb\\nbrew install idb-companion\\n\\n#flow: Login\\n#intent:\\n# Open up our app and use the default credentials to login\\n# and navigate to the demo screen\\n\\nappId: com.maestroapp # the app id of the app we want to test\\n# You can find the appId of an Ignite app in the `app.json` file\\n# as the \\"package\\" under the \\"android\\" section and \\"bundleIdentifier\\" under the \\"ios\\" section\\n---\\n- clearState # clears the state of our app (navigation and authentication)\\n- launchApp # launches the app\\n- assertVisible: \\"Sign In\\"\\n- tapOn:\\n    text: \\"Tap to sign in!\\"\\n- assertVisible: \\"Your app, almost ready for launch!\\"\\n- tapOn:\\n    text: \\"Let\'s go!\\"\\n- assertVisible: \\"Components to jump start your project!\\"\\n\\ncd .maestro\\nmaestro test Login.yaml\\n\\n    \u2551  > Flow\\n        Running on iPhone 11 - iOS 16.2 - 5A269AA1-2704-429B-BF30-D6965060E03E\\n    \u2551    \u2705  Clear state of com.maestroapp\\n    \u2551    \u2705  Launch app \\"com.maestroapp\\"\\n    \u2551    \u2705  Assert that \\"Sign In\\" is visible\\n    \u2551    \u2705  Tap on \\"Tap to sign in!\\"\\n    \u2551    \u2705  Assert that \\"Your app, almost ready for launch!\\" is visible\\n    \u2551    \u2705  Tap on \\"Let\'s go!\\"\\n    \u2551    \u2705  Assert that \\"Components to jump start your project!\\" is visible\\n\\n# flow: run the login flow and then navigate to the demo podcast list screen, favorite a podcast, and then switch the list to only be favorites.\\n\\nappId: com.maestroapp\\nenv:\\n  TITLE: \\"RNR 257 - META RESPONDS! How can we improve React Native, part 2\\"\\n  FAVORITES_TEXT: \\"Switch on to only show favorites\\"\\n\\n---\\n- runFlow: Login.yaml\\n- tapOn: \\"Podcast, tab, 3 of 4\\"\\n- assertVisible: \\"React Native Radio episodes\\"\\n- tapOn:\\n    text: ${FAVORITES_TEXT}\\n- assertVisible: \\"This looks a bit empty\\"\\n- tapOn:\\n    text: ${FAVORITES_TEXT}\\n- scrollUntilVisible:\\n    element:\\n      text: ${TITLE}\\n    direction: DOWN\\n    timeout: 50000\\n    speed: 40\\n    visibilityPercentage: 100\\n- longPressOn: ${TITLE}\\n- scrollUntilVisible:\\n    element:\\n      text: ${FAVORITES_TEXT}\\n    direction: UP\\n    timeout: 50000\\n    speed: 40\\n    visibilityPercentage: 100\\n- tapOn:\\n    text: ${FAVORITES_TEXT}\\n- assertVisible: ${TITLE}\\n\\n","lastUpdated":"2 months ago","title":"Maestro Setup","publish_date":"2023-02-01","doc_name":"MaestroSetup.md"},{"author":"Frank Calise","content":"npx ignite-cli new PizzaApp --workflow=cng --yes\\ncd PizzaApp\\n\\nyarn remove @react-native-async-storage/async-storage\\nyarn add react-native-mmkv\\nyarn prebuild\\n\\n// error-line\\nimport AsyncStorage from \\"@react-native-async-storage/async-storage\\";\\n// success-line\\nimport { MMKV } from \\"react-native-mmkv\\";\\n// success-line\\nexport const storage = new MMKV();\\n\\n/**\\n * Loads a string from storage.\\n *\\n * @param key The key to fetch.\\n */\\n// error-line\\nexport async function loadString(key: string): Promise<string | null> {\\n// success-line\\nexport function loadString(key: string): string | null {\\n  try {\\n    // error-line\\n    return await AsyncStorage.getItem(key);\\n    // success-line\\n    return storage.getString(key);\\n  } catch {\\n    // not sure why this would fail... even reading the RN docs I\'m unclear\\n    return null;\\n  }\\n}\\n\\n/**\\n * Saves a string to storage.\\n *\\n * @param key The key to fetch.\\n * @param value The value to store.\\n */\\n// error-line\\nexport async function saveString(key: string, value: string): Promise<boolean> {\\n// success-line\\nexport function saveString(key: string, value: string): boolean {\\n  try {\\n    // error-line\\n    await AsyncStorage.setItem(key, value);\\n    // success-line\\n    storage.set(key, value);\\n    return true;\\n  } catch {\\n    return false;\\n  }\\n}\\n\\n/**\\n * Loads something from storage and runs it thru JSON.parse.\\n *\\n * @param key The key to fetch.\\n */\\n// error-line\\nexport async function load(key: string): Promise<unknown | null> {\\n// success-line\\nexport function load(key: string): unknown | null {\\n  try {\\n    // error-line\\n    const almostThere = await AsyncStorage.getItem(key)\\n    // success-line\\n    const almostThere = storage.getString(key);\\n    return JSON.parse(almostThere);\\n  } catch {\\n    return null;\\n  }\\n}\\n\\n/**\\n * Saves an object to storage.\\n *\\n * @param key The key to fetch.\\n * @param value The value to store.\\n */\\n// error-line\\nexport async function save(key: string, value: unknown): Promise<boolean> {\\n// success-line\\nexport function save(key: string, value: unknown): boolean {\\n  try {\\n    // error-line\\n    await AsyncStorage.setItem(key, JSON.stringify(value));\\n    // success-line\\n    saveString(key, JSON.stringify(value));\\n    return true;\\n  } catch {\\n    return false;\\n  }\\n}\\n\\n/**\\n * Removes something from storage.\\n *\\n * @param key The key to kill.\\n */\\n// error-line\\nexport async function remove(key: string): Promise<void> {\\n// success-line\\nexport function remove(key: string): void {\\n  try {\\n    // error-line\\n    await AsyncStorage.removeItem(key);\\n    // success-line\\n    storage.delete(key);\\n  } catch {}\\n}\\n\\n/**\\n * Burn it all to the ground.\\n */\\n// error-line\\nexport async function clear(): Promise<void> {\\n// success-line\\nexport function clear(): void {\\n  try {\\n    // error-line\\n    await AsyncStorage.clear();\\n    // success-line\\n    storage.clearAll();\\n  } catch {}\\n}\\n\\nimport {\\n  storage,\\n  load,\\n  loadString,\\n  save,\\n  saveString,\\n  clear,\\n  remove,\\n} from \\"./storage\\";\\n\\nconst VALUE_OBJECT = { x: 1 };\\nconst VALUE_STRING = JSON.stringify(VALUE_OBJECT);\\n\\ndescribe(\\"MMKV Storage\\", () => {\\n  beforeEach(() => {\\n    storage.clearAll();\\n    storage.set(\\"string\\", \\"string\\");\\n    storage.set(\\"object\\", JSON.stringify(VALUE_OBJECT));\\n  });\\n\\n  it(\\"should be defined\\", () => {\\n    expect(storage).toBeDefined();\\n  });\\n\\n  it(\\"should have default keys\\", () => {\\n    expect(storage.getAllKeys()).toEqual([\\"string\\", \\"object\\"]);\\n  });\\n\\n  it(\\"should load data\\", () => {\\n    expect(load(\\"object\\")).toEqual(VALUE_OBJECT);\\n    expect(loadString(\\"object\\")).toEqual(VALUE_STRING);\\n\\n    expect(load(\\"string\\")).toEqual(\\"string\\");\\n    expect(loadString(\\"string\\")).toEqual(\\"string\\");\\n  });\\n\\n  it(\\"should save strings\\", () => {\\n    saveString(\\"string\\", \\"new string\\");\\n    expect(loadString(\\"string\\")).toEqual(\\"new string\\");\\n  });\\n\\n  it(\\"should save objects\\", () => {\\n    save(\\"object\\", { y: 2 });\\n    expect(load(\\"object\\")).toEqual({ y: 2 });\\n    save(\\"object\\", { z: 3, also: true });\\n    expect(load(\\"object\\")).toEqual({ z: 3, also: true });\\n  });\\n\\n  it(\\"should save strings and objects\\", () => {\\n    saveString(\\"object\\", \\"new string\\");\\n    expect(loadString(\\"object\\")).toEqual(\\"new string\\");\\n  });\\n\\n  it(\\"should remove data\\", () => {\\n    remove(\\"object\\");\\n    expect(load(\\"object\\")).toBeUndefined();\\n    expect(storage.getAllKeys()).toEqual([\\"string\\"]);\\n\\n    remove(\\"string\\");\\n    expect(load(\\"string\\")).toBeUndefined();\\n    expect(storage.getAllKeys()).toEqual([]);\\n  });\\n\\n  it(\\"should clear all data\\", () => {\\n    expect(storage.getAllKeys()).toEqual([\\"string\\", \\"object\\"]);\\n    clear();\\n    expect(storage.getAllKeys()).toEqual([]);\\n  });\\n});\\n\\n","lastUpdated":"3 weeks ago","title":"Migrating to MMKV","publish_date":"2022-12-28","doc_name":"MigratingToMMKV.md"},{"author":"Yulian Glukhenko","content":"sdk.dir=/Users/path/to/sdk\\nndk.dir=/Users/path/to/ndk\\n\\nsdk.dir=/Users/~Usernamehere~/Library/Android/sdk\\nndk.dir=/Users/~Usernamehere~/Library/Android/sdk/ndk/21.4.7075529\\n\\narch -x86_64 ./gradlew :ReactAndroid:installArchives --no-daemon\\n\\n","lastUpdated":"8 weeks ago","title":"Patching/Building Android .aar From Source","publish_date":"2022-10-09","doc_name":"PatchingBuildingAndroid.md"},{"author":"Frank Calise","content":"npx ignite-cli@latest new PizzaApp --workflow=prebuild --yes\\n\\nnpm install -g eas-cli\\n\\nbrew install cocoapods fastlane\\n\\nyarn add expo-dev-client\\n\\neas init\\n\\nWarning: Your project uses dynamic app configuration, and the EAS project ID can\'t automatically be added to it.\\nhttps://docs.expo.dev/workflow/configuration/#dynamic-configuration-with-appconfigjs\\n\\nTo complete the setup process, set \\"extra.eas.projectId\\" in your app.config.ts or app.json:\\n\\n{\\n  \\"expo\\": {\\n    \\"extra\\": {\\n      \\"eas\\": {\\n        \\"projectId\\": \\"...id here...\\"\\n      }\\n    }\\n  }\\n}\\n\\neas build:configure\\n\\n{\\n  \\"cli\\": {\\n    \\"version\\": \\">= 0.60.0\\"\\n  },\\n  \\"build\\": {\\n    \\"development\\": {\\n      \\"developmentClient\\": true,\\n      \\"distribution\\": \\"internal\\"\\n    },\\n    \\"preview\\": {\\n      \\"developmentClient\\": true,\\n      \\"ios\\": {\\n        \\"simulator\\": true\\n      }\\n    },\\n    \\"production\\": {}\\n  },\\n  \\"submit\\": {\\n    \\"production\\": {}\\n  }\\n}\\n\\neas build --profile preview\\n\\neas build --profile preview --local\\n\\nEAS_LOCAL_BUILD_ARTIFACTS_DIR=build eas build --profile preview --local\\n\\n--\\"start\\": \\"expo start\\"\\n++\\"start\\": \\"expo start --dev-client\\"\\n\\n","lastUpdated":"8 weeks ago","title":"Prepping Ignite for EAS Build","publish_date":"2023-12-04","doc_name":"PrepForEASBuild.md"},{"author":"Frank Calise","content":"npx ignite-cli@latest new PizzaApp --remove-demo --workflow=cng --yes\\ncd PizzaApp\\n\\nnpx expo install react-native-vision-camera\\n\\n\\"plugins\\": [\\n  \\"expo-localization\\",\\n  [\\n    \\"expo-build-properties\\",\\n    {\\n      \\"ios\\": {\\n        \\"newArchEnabled\\": false\\n      },\\n      \\"android\\": {\\n        \\"newArchEnabled\\": false\\n      }\\n    }\\n  ],\\n  [\\n    \\"react-native-vision-camera\\",\\n    {\\n      \\"cameraPermissionText\\": \\"$(PRODUCT_NAME) needs access to your Camera.\\",\\n      \\"enableCodeScanner\\": true\\n    }\\n  ]\\n],\\n\\nnpx expo prebuild\\nyarn android\\n\\nimport { observer } from \\"mobx-react-lite\\";\\nimport React, { FC } from \\"react\\";\\nimport { AppStackScreenProps } from \\"../navigators\\";\\nimport { Camera, CameraPermissionStatus } from \\"react-native-vision-camera\\";\\nimport { Linking, View, ViewStyle } from \\"react-native\\";\\nimport { Button, Screen, Text } from \\"app/components\\";\\n\\ninterface WelcomeScreenProps extends AppStackScreenProps<\\"Welcome\\"> {}\\n\\nexport const WelcomeScreen: FC<WelcomeScreenProps> = observer(\\n  function WelcomeScreen(_props) {\\n    const [cameraPermission, setCameraPermission] =\\n      React.useState<CameraPermissionStatus>();\\n\\n    React.useEffect(() => {\\n      Camera.getCameraPermissionStatus().then(setCameraPermission);\\n    }, []);\\n\\n    const promptForCameraPermissions = React.useCallback(async () => {\\n      const permission = await Camera.requestCameraPermission();\\n      Camera.getCameraPermissionStatus().then(setCameraPermission);\\n\\n      if (permission === \\"denied\\") await Linking.openSettings();\\n    }, [cameraPermission]);\\n\\n    if (cameraPermission == null) {\\n      // still loading\\n      return null;\\n    }\\n\\n    return (\\n      <Screen contentContainerStyle={$container}>\\n        <View>\\n          <Text>\\n            Camera Permission:{\\" \\"}\\n            {cameraPermission === null ? \\"Loading...\\" : cameraPermission}\\n          </Text>\\n          {cameraPermission !== \\"granted\\" && (\\n            <Button\\n              onPress={promptForCameraPermissions}\\n              text=\\"Request Camera Permission\\"\\n            />\\n          )}\\n        </View>\\n      </Screen>\\n    );\\n  }\\n);\\n\\nconst $container: ViewStyle = {\\n  flex: 1,\\n  padding: 20,\\n  justifyContent: \\"space-evenly\\",\\n};\\n\\nnpx ignite-cli@next g model CodeStore\\nnpx ignite-cli@next g screen Codes\\n\\nimport { Instance, SnapshotIn, SnapshotOut, types } from \\"mobx-state-tree\\";\\nimport { withSetPropAction } from \\"./helpers/withSetPropAction\\";\\n\\n/**\\n * Model description here for TypeScript hints.\\n */\\nexport const CodeStoreModel = types\\n  .model(\\"CodeStore\\")\\n  .props({\\n    codes: types.array(types.string),\\n  })\\n  .actions(withSetPropAction)\\n  .actions((self) => ({\\n    addCode(code: string) {\\n      self.codes.push(code);\\n    },\\n  }));\\n\\nexport interface CodeStore extends Instance<typeof CodeStoreModel> {}\\nexport interface CodeStoreSnapshotOut\\n  extends SnapshotOut<typeof CodeStoreModel> {}\\nexport interface CodeStoreSnapshotIn\\n  extends SnapshotIn<typeof CodeStoreModel> {}\\nexport const createCodeStoreDefaultModel = () =>\\n  types.optional(CodeStoreModel, {});\\n\\nimport React, { FC } from \\"react\\";\\nimport { observer } from \\"mobx-react-lite\\";\\nimport { View, ViewStyle } from \\"react-native\\";\\nimport { AppStackScreenProps } from \\"app/navigators\\";\\nimport { Button, Screen, Text } from \\"app/components\\";\\nimport { useNavigation } from \\"@react-navigation/native\\";\\nimport { useStores } from \\"app/models\\";\\nimport { spacing } from \\"app/theme\\";\\n\\ninterface CodesScreenProps extends AppStackScreenProps<\\"Codes\\"> {}\\n\\nexport const CodesScreen: FC<CodesScreenProps> = observer(\\n  function CodesScreen() {\\n    // Pull in one of our MST stores\\n    const { codeStore } = useStores();\\n\\n    // Pull in navigation via hook\\n    const navigation = useNavigation();\\n    return (\\n      <Screen\\n        safeAreaEdges={[\\"top\\", \\"bottom\\"]}\\n        style={$root}\\n        preset=\\"scroll\\"\\n        contentContainerStyle={$container}\\n      >\\n        <View>\\n          <Text text={`${codeStore.codes.length} codes scanned`} />\\n\\n          {codeStore.codes.map((code, index) => (\\n            <Text key={`code-index-${index}`} text={code} />\\n          ))}\\n        </View>\\n\\n        <Button text=\\"Go back\\" onPress={() => navigation.goBack()} />\\n      </Screen>\\n    );\\n  }\\n);\\n\\nconst $root: ViewStyle = {\\n  flex: 1,\\n};\\n\\nconst $container: ViewStyle = {\\n  flex: 1,\\n  justifyContent: \\"space-between\\",\\n  paddingHorizontal: spacing.md,\\n};\\n\\nimport { observer } from \\"mobx-react-lite\\";\\nimport React, { FC } from \\"react\\";\\nimport { AppStackScreenProps } from \\"../navigators\\";\\n// success-line-start\\nimport {\\n  Camera,\\n  CameraPermissionStatus,\\n  useCameraDevice,\\n  useCodeScanner,\\n} from \\"react-native-vision-camera\\";\\nimport {\\n  Alert,\\n  Linking,\\n  StyleSheet,\\n  TouchableOpacity,\\n  View,\\n  ViewStyle,\\n} from \\"react-native\\";\\nimport { Button, Icon, Screen, Text } from \\"app/components\\";\\nimport { useSafeAreaInsets } from \\"react-native-safe-area-context\\";\\nimport { useStores } from \\"app/models\\";\\nimport { spacing } from \\"app/theme\\";\\n// success-line-end\\n\\ninterface WelcomeScreenProps extends AppStackScreenProps<\\"Welcome\\"> {}\\n\\nexport const WelcomeScreen: FC<WelcomeScreenProps> = observer(\\n  function WelcomeScreen(_props) {\\n    const [cameraPermission, setCameraPermission] =\\n      React.useState<CameraPermissionStatus>();\\n    // success-line-start\\n    const [showScanner, setShowScanner] = React.useState(false);\\n    const [isActive, setIsActive] = React.useState(false);\\n\\n    const { codeStore } = useStores();\\n    // success-line-end\\n\\n    React.useEffect(() => {\\n      Camera.getCameraPermissionStatus().then(setCameraPermission);\\n    }, []);\\n\\n    const promptForCameraPermissions = React.useCallback(async () => {\\n      const permission = await Camera.requestCameraPermission();\\n      Camera.getCameraPermissionStatus().then(setCameraPermission);\\n\\n      if (permission === \\"denied\\") await Linking.openSettings();\\n    }, [cameraPermission]);\\n\\n    // success-line-start\\n    const codeScanner = useCodeScanner({\\n      codeTypes: [\\"qr\\", \\"ean-13\\"],\\n      onCodeScanned: (codes) => {\\n        setIsActive(false);\\n\\n        codes.every((code) => {\\n          if (code.value) {\\n            codeStore.addCode(code.value);\\n          }\\n          return true;\\n        });\\n\\n        setShowScanner(false);\\n        Alert.alert(\\"Code scanned!\\");\\n      },\\n    });\\n\\n    const device = useCameraDevice(\\"back\\");\\n\\n    const { right, top } = useSafeAreaInsets();\\n    // success-line-end\\n\\n    if (cameraPermission == null) {\\n      // still loading\\n      return null;\\n    }\\n\\n    // success-line-start\\n    if (showScanner && device) {\\n      return (\\n        <View style={$cameraContainer}>\\n          <Camera\\n            isActive={isActive}\\n            device={device}\\n            codeScanner={codeScanner}\\n            style={StyleSheet.absoluteFill}\\n            photo\\n            video\\n          />\\n          <View\\n            style={[\\n              $cameraButtons,\\n              { right: right + spacing.md, top: top + spacing.md },\\n            ]}\\n          >\\n            <TouchableOpacity\\n              style={$closeCamera}\\n              onPress={() => setShowScanner(false)}\\n            >\\n              <Icon icon=\\"x\\" size={50} />\\n            </TouchableOpacity>\\n          </View>\\n        </View>\\n      );\\n    }\\n    // success-line-end\\n\\n    return (\\n      <Screen contentContainerStyle={$container}>\\n        <View>\\n          <Text>\\n            Camera Permission:{\\" \\"}\\n            {cameraPermission === null ? \\"Loading...\\" : cameraPermission}\\n          </Text>\\n          {cameraPermission !== \\"granted\\" && (\\n            <Button\\n              onPress={promptForCameraPermissions}\\n              text=\\"Request Camera Permission\\"\\n            />\\n          )}\\n        </View>\\n        // success-line-start\\n        <View>\\n          <Button\\n            onPress={() => {\\n              setIsActive(true);\\n              setShowScanner(true);\\n            }}\\n            text=\\"Scan Barcodes\\"\\n          />\\n        </View>\\n        <View>\\n          <Button\\n            onPress={() => _props.navigation.navigate(\\"Codes\\")}\\n            text={`View Scans (${codeStore.codes.length})`}\\n          />\\n          // success-line-end\\n        </View>\\n      </Screen>\\n    );\\n  }\\n);\\n\\nconst $container: ViewStyle = {\\n  flex: 1,\\n  padding: 20,\\n  justifyContent: \\"space-evenly\\",\\n};\\n\\n// success-line-start\\nconst $cameraContainer: ViewStyle = {\\n  flex: 1,\\n};\\n\\nconst $cameraButtons: ViewStyle = {\\n  position: \\"absolute\\",\\n};\\n\\nconst $closeCamera: ViewStyle = {\\n  marginBottom: spacing.md,\\n  width: 100,\\n  height: 100,\\n  borderRadius: 100 / 2,\\n  backgroundColor: \\"rgba(140, 140, 140, 0.3)\\",\\n  justifyContent: \\"center\\",\\n  alignItems: \\"center\\",\\n};\\n// success-line-end\\n\\n","lastUpdated":"3 weeks ago","title":"React Native Vision Camera","publish_date":"2023-10-23","doc_name":"ReactNativeVisionCamera.md"},{"author":"Justin Poliachik","content":"npx ignite-cli new ReduxApp --yes --removeDemo\\n\\nyarn add @reduxjs/toolkit\\nyarn add react-redux\\n\\nimport { configureStore } from \\"@reduxjs/toolkit\\";\\nimport { TypedUseSelectorHook, useDispatch, useSelector } from \\"react-redux\\";\\nimport counterReducer from \\"./counterSlice\\";\\n\\nexport const store = configureStore({\\n  reducer: {\\n    counter: counterReducer,\\n    // add other state here\\n  },\\n});\\n\\n// Infer the `RootState` and `AppDispatch` types from the store itself\\nexport type RootState = ReturnType<typeof store.getState>;\\nexport type AppDispatch = typeof store.dispatch;\\n\\n// Use throughout app instead of plain `useDispatch` and `useSelector` for type safety\\ntype DispatchFunc = () => AppDispatch;\\nexport const useAppDispatch: DispatchFunc = useDispatch;\\nexport const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;\\n\\nimport { createSlice } from \\"@reduxjs/toolkit\\";\\n\\n// Define a type for the slice state\\ninterface CounterState {\\n  value: number;\\n}\\n\\n// Define the initial state using that type\\nconst initialState: CounterState = {\\n  value: 0,\\n};\\n\\nexport const counterSlice = createSlice({\\n  name: \\"counter\\",\\n  // `createSlice` will infer the state type from the `initialState` argument\\n  initialState,\\n  reducers: {\\n    increment: (state) => {\\n      state.value += 1;\\n    },\\n    decrement: (state) => {\\n      state.value -= 1;\\n    },\\n  },\\n});\\n\\nexport const { increment, decrement } = counterSlice.actions;\\nexport default counterSlice.reducer;\\n\\nimport { Provider } from \\"react-redux\\";\\nimport { store } from \\"./store/store\\";\\n\\n...\\n\\n<Provider store={store}>\\n  <AppNavigator\\n    linking={linking}\\n    initialState={initialNavigationState}\\n    onStateChange={onNavigationStateChange}\\n  />\\n</Provider>\\n\\nimport React, { FC } from \\"react\\";\\nimport { View, ViewStyle } from \\"react-native\\";\\nimport { Button, Text } from \\"app/components\\";\\nimport { AppStackScreenProps } from \\"../navigators\\";\\nimport { colors } from \\"../theme\\";\\nimport { useSafeAreaInsetsStyle } from \\"../utils/useSafeAreaInsetsStyle\\";\\nimport { useAppDispatch, useAppSelector } from \\"app/store/store\\";\\nimport { decrement, increment } from \\"app/store/counterSlice\\";\\n\\ninterface WelcomeScreenProps extends AppStackScreenProps<\\"Welcome\\"> {}\\n\\nexport const WelcomeScreen: FC<WelcomeScreenProps> = () => {\\n  const $containerInsets = useSafeAreaInsetsStyle([\\"top\\", \\"bottom\\"]);\\n  const count = useAppSelector((state) => state.counter.value);\\n  const dispatch = useAppDispatch();\\n  return (\\n    <View style={[$containerInsets, $container]}>\\n      <Button text=\\"Increment\\" onPress={() => dispatch(increment())} />\\n      <Button text=\\"Decrement\\" onPress={() => dispatch(decrement())} />\\n      <Text text={`Count: ${count}`} />\\n    </View>\\n  );\\n};\\n\\nconst $container: ViewStyle = {\\n  flex: 1,\\n  backgroundColor: colors.background,\\n};\\n\\nyarn add redux-persist\\n\\nimport { combineReducers, configureStore } from \\"@reduxjs/toolkit\\";\\nimport counterReducer from \\"./counterSlice\\";\\nimport { TypedUseSelectorHook, useDispatch, useSelector } from \\"react-redux\\";\\nimport { persistStore, persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from \\"redux-persist\\";\\nimport AsyncStorage from \\"@react-native-async-storage/async-storage\\";\\n\\nconst persistConfig = {\\n  key: \\"root\\",\\n  version: 1,\\n  storage: AsyncStorage,\\n};\\n\\nconst rootReducer = combineReducers({\\n  counter: counterReducer,\\n});\\n\\nconst persistedReducer = persistReducer(persistConfig, rootReducer);\\n\\nexport const store = configureStore({\\n  reducer: persistedReducer,\\n  middleware: (getDefaultMiddleware) =>\\n    getDefaultMiddleware({\\n      serializableCheck: {\\n        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],\\n      },\\n    }),\\n});\\n\\nexport const persistor = persistStore(store);\\n\\n// Infer the `RootState` and `AppDispatch` types from the store itself\\nexport type RootState = ReturnType<typeof store.getState>;\\nexport type AppDispatch = typeof store.dispatch;\\n\\n// Use throughout app instead of plain `useDispatch` and `useSelector` for type safety\\ntype DispatchFunc = () => AppDispatch;\\nexport const useAppDispatch: DispatchFunc = useDispatch;\\nexport const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;\\n\\n...\\n\\nimport { persistor, store } from \\"./store/store\\"\\nimport { PersistGate } from \\"redux-persist/integration/react\\"\\n\\n...\\n\\nfunction App(props: AppProps) {\\n  const { hideSplashScreen } = props\\n...\\n  const onBeforeLiftPersistGate = () => {\\n    // If your initialization scripts run very fast, it\'s good to show the splash screen for just a bit longer to prevent flicker.\\n    // Slightly delaying splash screen hiding for better UX; can be customized or removed as needed,\\n    // Note: (vanilla Android) The splash-screen will not appear if you launch your app via the terminal or Android Studio. Kill the app and launch it normally by tapping on the launcher icon. https://stackoverflow.com/a/69831106\\n    // Note: (vanilla iOS) You might notice the splash-screen logo change size. This happens in debug/development mode. Try building the app for release.\\n    setTimeout(hideSplashScreen, 500)\\n  }\\n...\\n  return (\\n    <SafeAreaProvider initialMetrics={initialWindowMetrics}>\\n      <ErrorBoundary catchErrors={Config.catchErrors}>\\n        <GestureHandlerRootView style={$container}>\\n          <Provider store={store}>\\n            <PersistGate\\n              loading={null}\\n              onBeforeLift={onBeforeLiftPersistGate}\\n              persistor={persistor}\\n            >\\n              <AppNavigator\\n                linking={linking}\\n                initialState={initialNavigationState}\\n                onStateChange={onNavigationStateChange}\\n              />\\n            </PersistGate>\\n          </Provider>\\n        </GestureHandlerRootView>\\n      </ErrorBoundary>\\n    </SafeAreaProvider>\\n  )\\n}\\n\\nexport default App\\n\\n","lastUpdated":"8 weeks ago","title":"Redux","publish_date":"2024-01-16","doc_name":"Redux.md"},{"author":"Justin Poliachik","content":"yarn remove mobx mobx-react-lite mobx-state-tree reactotron-mst\\n\\nrm -rf ./app/models\\n\\n--import { mst } from \\"reactotron-mst\\"\\n\\n...\\n\\nconst reactotron = Reactotron.configure({\\n  name: require(\\"../../package.json\\").name,\\n  onConnect: () => {\\n    /** since this file gets hot reloaded, let\'s clear the past logs every time we connect */\\n    Reactotron.clear()\\n  },\\n--}).use(\\n--  mst({\\n--    /** ignore some chatty `mobx-state-tree` actions  */\\n--    filter: (event) => /postProcessSnapshot|@APPLY_SNAPSHOT/.test(event.name) === false,\\n--  }),\\n--)\\n++})\\n\\n--import { observer } from \\"mobx-react-lite\\"\\n\\n--export const WelcomeScreen: FC<WelcomeScreenProps> = observer(function WelcomeScreen(props) {\\n++export const WelcomeScreen: FC<WelcomeScreenProps> = (props) => {\\n    ...\\n--})\\n++}\\n\\n--import { useStores } from \\"../models\\"\\n\\nconst AppStack = () => {\\n--  const { authenticationStore: { isAuthenticated } } = useStores()\\n++  const isAuthenticated = false // TODO: TEMPORARY VALUE - replace with alternative state management solution\\n\\n--import { observer } from \\"mobx-react-lite\\"\\n\\n--export const <%= props.pascalCaseName %> = observer(function <%= props.pascalCaseName %>(props: <%= props.pascalCaseName %>Props) {\\n++export const <%= props.pascalCaseName %> = (props: <%= props.pascalCaseName %>Props) => {\\n    ...\\n--})\\n++}\\n\\n--import { useInitialRootStore } from \\"./models\\"\\n\\n--const { rehydrated } = useInitialRootStore(() => {\\n--setTimeout(hideSplashScreen, 500)\\n--})\\n++React.useEffect(() => {\\n++    setTimeout(hideSplashScreen, 500)\\n++}, [])\\n\\n--if (!rehydrated || !isNavigationStateRestored || !areFontsLoaded) return null\\n++if (!isNavigationStateRestored || !areFontsLoaded) return null\\n\\n--import type { ApiConfig, ApiFeedResponse } from \\"./api.types\\"\\n--import type { EpisodeSnapshotIn } from \\"../../models/Episode\\"\\n++import type { ApiConfig, ApiFeedResponse, EpisodeItem } from \\"./api.types\\"\\n\\n\\n--async getEpisodes(): Promise<{ kind: \\"ok\\"; episodes: EpisodeSnapshotIn[] } | GeneralApiProblem> {\\n++async getEpisodes(): Promise<{ kind: \\"ok\\"; episodes: EpisodeItem[] } | GeneralApiProblem> {\\n// make the api call\\n\\n--// This is where we transform the data into the shape we expect for our MST model.\\n--const episodes: EpisodeSnapshotIn[] =\\n--  rawData?.items.map((raw) => ({\\n--    ...raw,\\n--  })) ?? []\\n++const episodes = rawData?.items ?? []\\n\\n","lastUpdated":"8 weeks ago","title":"Remove MobX-State-Tree","publish_date":"2024-02-05","doc_name":"RemoveMobxStateTree.md"},{"author":"Mark Rickert","content":"npx ignite-cli new PizzaApp --workflow=cng --yes\\ncd PizzaApp\\n\\nimport {\\n  withInfoPlist,\\n  withAndroidManifest,\\n  type ConfigPlugin,\\n  type AndroidConfig,\\n  type IOSConfig,\\n} from \\"@expo/config-plugins\\"\\n\\n// More info: https://developer.android.com/guide/topics/manifest/uses-feature-element\\nconst validAndroidFeatures = [\\n  \\"android.hardware.audio.low_latency\\",\\n  \\"android.hardware.audio.output\\",\\n  \\"android.hardware.audio.pro\\",\\n  \\"android.hardware.bluetooth\\",\\n  \\"android.hardware.bluetooth_le\\",\\n  \\"android.hardware.camera\\",\\n  \\"android.hardware.camera.any\\",\\n  \\"android.hardware.camera.autofocus\\",\\n  \\"android.hardware.camera.capability.manual_post_processing\\",\\n  \\"android.hardware.camera.capability.manual_sensor\\",\\n  \\"android.hardware.camera.capability.raw\\",\\n  \\"android.hardware.camera.external\\",\\n  \\"android.hardware.camera.flash\\",\\n  \\"android.hardware.camera.front\\",\\n  \\"android.hardware.camera.level.full\\",\\n  \\"android.hardware.consumerir\\",\\n  \\"android.hardware.faketouch\\",\\n  \\"android.hardware.faketouch.multitouch.distinct\\",\\n  \\"android.hardware.faketouch.multitouch.jazzhand\\",\\n  \\"android.hardware.fingerprint\\",\\n  \\"android.hardware.gamepad\\",\\n  \\"android.hardware.location\\",\\n  \\"android.hardware.location.gps\\",\\n  \\"android.hardware.location.network\\",\\n  \\"android.hardware.microphone\\",\\n  \\"android.hardware.nfc\\",\\n  \\"android.hardware.nfc.hce\\",\\n  \\"android.hardware.opengles.aep\\",\\n  \\"android.hardware.screen.landscape\\",\\n  \\"android.hardware.screen.portrait\\",\\n  \\"android.hardware.sensor.accelerometer\\",\\n  \\"android.hardware.sensor.ambient_temperature\\",\\n  \\"android.hardware.sensor.barometer\\",\\n  \\"android.hardware.sensor.compass\\",\\n  \\"android.hardware.sensor.gyroscope\\",\\n  \\"android.hardware.sensor.heartrate\\",\\n  \\"android.hardware.sensor.heartrate.ecg\\",\\n  \\"android.hardware.sensor.hifi_sensors\\",\\n  \\"android.hardware.sensor.light\\",\\n  \\"android.hardware.sensor.proximity\\",\\n  \\"android.hardware.sensor.relative_humidity\\",\\n  \\"android.hardware.sensor.stepcounter\\",\\n  \\"android.hardware.sensor.stepdetector\\",\\n  \\"android.hardware.telephony\\",\\n  \\"android.hardware.telephony.cdma\\",\\n  \\"android.hardware.telephony.gsm\\",\\n  \\"android.hardware.touchscreen\\",\\n  \\"android.hardware.touchscreen.multitouch\\",\\n  \\"android.hardware.touchscreen.multitouch.distinct\\",\\n  \\"android.hardware.touchscreen.multitouch.jazzhand\\",\\n  \\"android.hardware.type.automotive\\",\\n  \\"android.hardware.type.pc\\",\\n  \\"android.hardware.type.television\\",\\n  \\"android.hardware.type.watch\\",\\n  \\"android.hardware.usb.accessory\\",\\n  \\"android.hardware.usb.host\\",\\n  \\"android.hardware.vulkan.compute\\",\\n  \\"android.hardware.vulkan.level\\",\\n  \\"android.hardware.vulkan.version\\",\\n  \\"android.hardware.wifi\\",\\n  \\"android.hardware.wifi.direct\\",\\n] as const\\n\\n// More info: https://developer.apple.com/documentation/bundleresources/information_property_list/uirequireddevicecapabilities/\\nconst validIOSFeatures = [\\n  \\"accelerometer\\",\\n  \\"arkit\\",\\n  \\"arm64\\",\\n  \\"armv7\\",\\n  \\"auto-focus-camera\\",\\n  \\"bluetooth-le\\",\\n  \\"camera-flash\\",\\n  \\"driverkit\\",\\n  \\"front-facing-camera\\",\\n  \\"gamekit\\",\\n  \\"gps\\",\\n  \\"gyroscope\\",\\n  \\"healthkit\\",\\n  \\"iphone-ipad-minimum-performance-a12\\",\\n  \\"iphone-performance-gaming-tier\\",\\n  \\"location-services\\",\\n  \\"magnetometer\\",\\n  \\"metal\\",\\n  \\"microphone\\",\\n  \\"nfc\\",\\n  \\"opengles-1\\",\\n  \\"opengles-2\\",\\n  \\"opengles-3\\",\\n  \\"peer-peer\\",\\n  \\"sms\\",\\n  \\"still-camera\\",\\n  \\"telephony\\",\\n  \\"video-camera\\",\\n  \\"wifi\\",\\n] as const\\n\\ntype HardwareFeatureAndroid = (typeof validAndroidFeatures)[number]\\ntype HardwareFeatureIOS = (typeof validIOSFeatures)[number]\\n\\nexport const withRequiredHardware: ConfigPlugin<{\\n  ios: Array<HardwareFeatureIOS>\\n  android: Array<HardwareFeatureAndroid>\\n}> = (config, { android, ios }) => {\\n  // Add android required hardware\\n  config = withAndroidManifest(config, (config) => {\\n    config.modResults = addHardwareFeaturesToAndroidManifestManifest(config.modResults, android)\\n    return config\\n  })\\n\\n  // Add ios required hardware\\n  config = withInfoPlist(config, (config) => {\\n    config.modResults = addRequiredDeviceCapabilitiesToInfoPlist(config.modResults, ios)\\n    return config\\n  })\\n\\n  return config\\n}\\n\\nexport function addHardwareFeaturesToAndroidManifestManifest(\\n  androidManifest: AndroidConfig.Manifest.AndroidManifest,\\n  requiredFeatures: Array<HardwareFeatureAndroid>,\\n) {\\n  // Add `<uses-feature android:name=\\"android.hardware.camera.front\\" android:required=\\"true\\"/>` to the AndroidManifest.xml\\n  if (!Array.isArray(androidManifest.manifest[\\"uses-feature\\"])) {\\n    androidManifest.manifest[\\"uses-feature\\"] = []\\n  }\\n\\n  // Here we add the feature to the manifest:\\n  // loop through the array of features and add them to the manifest if they don\'t exist\\n  for (const feature of requiredFeatures) {\\n    if (\\n      !androidManifest.manifest[\\"uses-feature\\"].find((item) => item.$[\\"android:name\\"] === feature)\\n    ) {\\n      androidManifest.manifest[\\"uses-feature\\"]?.push({\\n        $: {\\n          \\"android:name\\": feature,\\n          \\"android:required\\": \\"true\\",\\n        },\\n      })\\n    }\\n  }\\n\\n  return androidManifest\\n}\\n\\nexport function addRequiredDeviceCapabilitiesToInfoPlist(\\n  infoPlist: IOSConfig.InfoPlist,\\n  requiredFeatures: Array<HardwareFeatureIOS>,\\n) {\\n  if (!infoPlist.UIRequiredDeviceCapabilities) {\\n    infoPlist.UIRequiredDeviceCapabilities = []\\n  }\\n  const existingFeatures = infoPlist.UIRequiredDeviceCapabilities as Array<HardwareFeatureIOS>\\n  for (const f of requiredFeatures) {\\n    if (!existingFeatures.includes(f)) {\\n      existingFeatures.push(f)\\n    }\\n  }\\n\\n  infoPlist.UIRequiredDeviceCapabilities = existingFeatures\\n  return infoPlist\\n}\\n\\n  return {\\n    ...config,\\n    plugins: [\\n      ...existingPlugins,\\n      require(\\"./plugins/withSplashScreen\\").withSplashScreen,\\n      require(\\"./plugins/withFlipperDisabled\\").withFlipperDisabled,\\n      // success-line-start\\n      [\\n        require(\\"./plugins/withRequiredHardware\\").withRequiredHardware,\\n        {\\n          // More info: https://developer.apple.com/documentation/bundleresources/information_property_list/uirequireddevicecapabilities/\\n          ios: [\\"front-facing-camera\\", \\"microphone\\"],\\n          // More info: https://developer.android.com/guide/topics/manifest/uses-feature-element\\n          android: [\\"android.hardware.camera.front\\", \\"android.hardware.microphone\\"],\\n        },\\n      ],\\n      // success-line-end\\n    ],\\n  }\\n\\n<key>UIRequiredDeviceCapabilities</key>\\n<array>\\n  <string>armv7</string>\\n  // success-line-start\\n  <string>front-facing-camera</string>\\n  <string>microphone</string>\\n  // success-line-end\\n</array>\\n\\n// success-line\\n<uses-feature android:name=\\"android.hardware.camera.front\\" android:required=\\"true\\"/>\\n// success-line\\n<uses-feature android:name=\\"android.hardware.microphone\\" android:required=\\"true\\"/>\\n\\n","lastUpdated":"7 weeks ago","title":"Requiring Hardware Features with Expo","publish_date":"2024-02-28","doc_name":"RequiringHardwareFeaturesWithExpo.md"},{"author":"Robin Heinze","content":"# Javascript Node CircleCI 2.0 configuration file\\n#\\n# Check https://circleci.com/docs/2.0/language-javascript/ for more details\\n#\\n\\ndefaults: &defaults\\n  docker:\\n    # Choose the version of Node you want here\\n    - image: circleci/node:10.11\\n  working_directory: ~/repo\\n\\nversion: 2\\njobs:\\n  setup:\\n    <<: *defaults\\n    steps:\\n      - checkout\\n      - restore_cache:\\n          name: Restore node modules\\n          keys:\\n            - v1-dependencies-{{ checksum \\"package.json\\" }}\\n            # fallback to using the latest cache if no exact match is found\\n            - v1-dependencies-\\n      - run:\\n          name: Install dependencies\\n          command: |\\n            yarn install\\n      - save_cache:\\n          name: Save node modules\\n          paths:\\n            - node_modules\\n          key: v1-dependencies-{{ checksum \\"package.json\\" }}\\n\\n  tests:\\n    <<: *defaults\\n    steps:\\n      - checkout\\n      - restore_cache:\\n          name: Restore node modules\\n          keys:\\n            - v1-dependencies-{{ checksum \\"package.json\\" }}\\n            # fallback to using the latest cache if no exact match is found\\n            - v1-dependencies-\\n      - run:\\n          name: Install React Native CLI and Ignite CLI\\n          command: |\\n            sudo npm i -g ignite-cli react-native-cli\\n      - run:\\n          name: Run tests\\n          command: yarn ci:test # this command will be added to/found in your package.json scripts\\n\\n  publish:\\n    <<: *defaults\\n    steps:\\n      - checkout\\n      - run: echo \\"//registry.npmjs.org/:_authToken=$NPM_TOKEN\\" >> ~/.npmrc\\n      - restore_cache:\\n          name: Restore node modules\\n          keys:\\n            - v1-dependencies-{{ checksum \\"package.json\\" }}\\n            # fallback to using the latest cache if no exact match is found\\n            - v1-dependencies-\\n      # Run semantic-release after all the above is set.\\n      - run:\\n          name: Publish to NPM\\n          command: yarn ci:publish # this will be added to your package.json scripts\\n\\nworkflows:\\n  version: 2\\n  test_and_release:\\n    jobs:\\n      - setup\\n      - tests:\\n          requires:\\n            - setup\\n      - publish:\\n          requires:\\n            - tests\\n          filters:\\n            branches:\\n              only: master\\n\\n","lastUpdated":"7 weeks ago","title":"Sample YAML for CircleCi for Ignite","publish_date":"2022-10-09","doc_name":"SampleYAMLCircleCI.md"},{"author":"Yulian Glukhenko","content":"yarn add @gorhom/bottom-sheet@^4\\n\\nyarn add react-native-reanimated react-native-gesture-handler\\n# or\\nexpo install react-native-reanimated react-native-gesture-handler\\n\\ntouch ./app/components/SelectField.tsx\\n\\nimport React, { forwardRef, Ref, useImperativeHandle } from \\"react\\";\\nimport { View, TouchableOpacity } from \\"react-native\\";\\nimport { TextField, TextFieldProps } from \\"./TextField\\";\\n\\nexport interface SelectFieldProps\\n  extends Omit<\\n    TextFieldProps,\\n    \\"ref\\" | \\"onValueChange\\" | \\"onChange\\" | \\"value\\"\\n  > {}\\nexport interface SelectFieldRef {}\\n\\nexport const SelectField = forwardRef(function SelectField(\\n  props: SelectFieldProps,\\n  ref: Ref<SelectFieldRef>\\n) {\\n  const { ...TextFieldProps } = props;\\n\\n  const disabled =\\n    TextFieldProps.editable === false || TextFieldProps.status === \\"disabled\\";\\n\\n  useImperativeHandle(ref, () => ({}));\\n\\n  return (\\n    <>\\n      <TouchableOpacity activeOpacity={1}>\\n        <View pointerEvents=\\"none\\">\\n          <TextField {...TextFieldProps} />\\n        </View>\\n      </TouchableOpacity>\\n    </>\\n  );\\n});\\n\\nimport { SelectField } from \\"../components/SelectField\\";\\n\\nfunction FavoriteNBATeamsScreen() {\\n  return (\\n    <SelectField\\n      label=\\"NBA Team(s)\\"\\n      helper=\\"Select your team(s)\\"\\n      placeholder=\\"e.g. Trail Blazers\\"\\n    />\\n  );\\n}\\n\\n<TextField\\n  {...TextFieldProps}\\n  RightAccessory={(props) => (\\n    <Icon icon=\\"caretRight\\" containerStyle={props.style} />\\n  )}\\n/>\\n\\nexport interface SelectFieldProps\\n  extends Omit<TextFieldProps, \\"ref\\" | \\"onValueChange\\" | \\"onChange\\"> {\\n  value?: string[];\\n  renderValue?: (value: string[]) => string;\\n  onSelect?: (newValue: string[]) => void;\\n  multiple?: boolean;\\n  options: { label: string; value: string }[];\\n}\\n\\n// ...\\n\\nconst {\\n  value = [],\\n  renderValue,\\n  onSelect,\\n  options = [],\\n  multiple = true,\\n  ...TextFieldProps\\n} = props;\\n\\nconst valueString =\\n  renderValue?.(value) ??\\n  value\\n    .map((v) => options.find((o) => o.value === v)?.label)\\n    .filter(Boolean)\\n    .join(\\", \\");\\n\\nimport React, { forwardRef, Ref, useImperativeHandle } from \\"react\\";\\nimport { TouchableOpacity, View } from \\"react-native\\";\\n// success-line\\nimport { Icon } from \\"./Icon\\";\\nimport { TextField, TextFieldProps } from \\"./TextField\\";\\n\\nexport interface SelectFieldProps\\n  extends Omit<TextFieldProps, \\"ref\\" | \\"onValueChange\\" | \\"onChange\\" | \\"value\\"> {\\n  // success-line-start\\n  value?: string[];\\n  renderValue?: (value: string[]) => string;\\n  onSelect?: (newValue: string[]) => void;\\n  multiple?: boolean;\\n  options: { label: string; value: string }[];\\n  // success-line-end\\n}\\nexport interface SelectFieldRef {}\\n\\nexport const SelectField = forwardRef(function SelectField(\\n  props: SelectFieldProps,\\n  ref: Ref<SelectFieldRef>\\n) {\\n  const {\\n    // success-line-start\\n    value = [],\\n    onSelect,\\n    renderValue,\\n    options = [],\\n    multiple = true,\\n    // success-line-end\\n    ...TextFieldProps\\n  } = props;\\n\\n  const disabled =\\n    TextFieldProps.editable === false || TextFieldProps.status === \\"disabled\\";\\n\\n  useImperativeHandle(ref, () => ({}));\\n\\n  // success-line-start\\n  const valueString =\\n    renderValue?.(value) ??\\n    value\\n      .map((v) => options.find((o) => o.value === v)?.label)\\n      .filter(Boolean)\\n      .join(\\", \\");\\n  // success-line-end\\n\\n  return (\\n    <>\\n      <TouchableOpacity activeOpacity={1}>\\n        <View pointerEvents=\\"none\\">\\n          <TextField\\n            {...TextFieldProps}\\n            // success-line-start\\n            value={valueString}\\n            RightAccessory={(props) => (\\n              <Icon icon=\\"caretRight\\" containerStyle={props.style} />\\n            )}\\n            // success-line-end\\n          />\\n        </View>\\n      </TouchableOpacity>\\n    </>\\n  );\\n});\\n\\nimport { SelectField } from \\"../components/SelectField\\";\\n\\nconst teams = [\\n  { label: \\"Hawks\\", value: \\"ATL\\" },\\n  { label: \\"Celtics\\", value: \\"BOS\\" },\\n  // ...\\n  { label: \\"Jazz\\", value: \\"UTA\\" },\\n  { label: \\"Wizards\\", value: \\"WAS\\" },\\n];\\n\\n// prettier-ignore\\nfunction FavoriteNBATeamsScreen() {\\n  return (\\n    <>\\n      <SelectField\\n        label=\\"NBA Team(s)\\"\\n        helper=\\"Select your team(s)\\"\\n        placeholder=\\"e.g. Trail Blazers\\"\\n        value={[\\"POR\\", \\"MEM\\", \\"NOP\\", \\"CHI\\", \\"CLE\\", \\"SAS\\", \\"MIL\\", \\"LAL\\", \\"PHX\\", \\"WAS\\"]}\\n        options={teams}\\n        containerStyle={{ marginBottom: spacing.large }}\\n      />\\n\\n      <SelectField\\n        label=\\"NBA Team(s)\\"\\n        helper=\\"Select your team(s)\\"\\n        placeholder=\\"e.g. Trail Blazers\\"\\n        value={[\\"POR\\", \\"MEM\\", \\"NOP\\", \\"CHI\\", \\"CLE\\", \\"SAS\\", \\"MIL\\", \\"LAL\\", \\"PHX\\", \\"WAS\\"]}\\n        options={teams}\\n        containerStyle={{ marginBottom: spacing.large }}\\n        multiline\\n      />\\n\\n      <SelectField\\n        label=\\"NBA Team(s)\\"\\n        helper=\\"Select your team(s)\\"\\n        placeholder=\\"e.g. Trail Blazers\\"\\n        value={[\\"POR\\", \\"MEM\\", \\"NOP\\", \\"CHI\\", \\"CLE\\", \\"SAS\\", \\"MIL\\", \\"LAL\\", \\"PHX\\", \\"WAS\\"]}\\n        options={teams}\\n        containerStyle={{ marginBottom: spacing.large }}\\n        renderValue={(value) => `Selected ${value.length} Teams`}\\n      />\\n    </>\\n  )\\n}\\n\\n//...\\n// success-line\\nimport { BottomSheetModalProvider } from \\"@gorhom/bottom-sheet\\";\\n\\n//...\\n\\nreturn (\\n  <SafeAreaProvider initialMetrics={initialWindowMetrics}>\\n    <ErrorBoundary catchErrors={Config.catchErrors}>\\n      // success-line\\n      <BottomSheetModalProvider>\\n        <AppNavigator\\n          linking={linking}\\n          initialState={initialNavigationState}\\n          onStateChange={onNavigationStateChange}\\n        />\\n        // success-line\\n      </BottomSheetModalProvider>\\n    </ErrorBoundary>\\n  </SafeAreaProvider>\\n);\\n\\n//...\\n\\n// success-line-start\\nimport {\\n  BottomSheetBackdrop,\\n  BottomSheetFlatList,\\n  BottomSheetFooter,\\n  BottomSheetModal,\\n} from \\"@gorhom/bottom-sheet\\";\\n// success-line-end\\nimport React, { forwardRef, Ref, useImperativeHandle, useRef } from \\"react\\";\\nimport { TouchableOpacity, View, ViewStyle } from \\"react-native\\";\\n// success-line\\nimport { useSafeAreaInsets } from \\"react-native-safe-area-context\\";\\n// success-line\\nimport { spacing } from \\"../theme\\";\\n// success-line\\nimport { Button } from \\"./Button\\";\\nimport { Icon } from \\"./Icon\\";\\n// success-line\\nimport { ListItem } from \\"./ListItem\\";\\nimport { TextField, TextFieldProps } from \\"./TextField\\";\\n\\nexport interface SelectFieldProps\\n  extends Omit<TextFieldProps, \\"ref\\" | \\"onValueChange\\" | \\"onChange\\" | \\"value\\"> {\\n  value?: string[];\\n  renderValue?: (value: string[]) => string;\\n  onSelect?: (newValue: string[]) => void;\\n  multiple?: boolean;\\n  options: { label: string; value: string }[];\\n}\\nexport interface SelectFieldRef {\\n  // success-line-start\\n  presentOptions: () => void;\\n  dismissOptions: () => void;\\n  // success-line-end\\n}\\n\\nexport const SelectField = forwardRef(function SelectField(\\n  props: SelectFieldProps,\\n  ref: Ref<SelectFieldRef>\\n) {\\n  const {\\n    value = [],\\n    onSelect,\\n    renderValue,\\n    options = [],\\n    multiple = true,\\n    ...TextFieldProps\\n  } = props;\\n  // success-line-start\\n  const sheet = useRef<BottomSheetModal>(null);\\n  const { bottom } = useSafeAreaInsets();\\n  // success-line-end\\n\\n  const disabled =\\n    TextFieldProps.editable === false || TextFieldProps.status === \\"disabled\\";\\n\\n  // success-line\\n  useImperativeHandle(ref, () => ({ presentOptions, dismissOptions }));\\n\\n  const valueString =\\n    renderValue?.(value) ??\\n    value\\n      .map((v) => options.find((o) => o.value === v)?.label)\\n      .filter(Boolean)\\n      .join(\\", \\");\\n\\n  // success-line-start\\n  function presentOptions() {\\n    if (disabled) return;\\n    sheet.current?.present();\\n  }\\n\\n  function dismissOptions() {\\n    sheet.current?.dismiss();\\n  }\\n  // success-line-end\\n\\n  return (\\n    <>\\n      <TouchableOpacity\\n        activeOpacity={1}\\n        // success-line\\n        onPress={presentOptions}\\n      >\\n        <View pointerEvents=\\"none\\">\\n          <TextField\\n            {...TextFieldProps}\\n            value={valueString}\\n            RightAccessory={(props) => (\\n              <Icon icon=\\"caretRight\\" containerStyle={props.style} />\\n            )}\\n          />\\n        </View>\\n      </TouchableOpacity>\\n\\n      {/* success-line-start */}\\n      <BottomSheetModal\\n        ref={sheet}\\n        snapPoints={[\\"50%\\"]}\\n        stackBehavior=\\"replace\\"\\n        enableDismissOnClose\\n        backdropComponent={(props) => (\\n          <BottomSheetBackdrop\\n            {...props}\\n            appearsOnIndex={0}\\n            disappearsOnIndex={-1}\\n          />\\n        )}\\n        footerComponent={\\n          !multiple\\n            ? undefined\\n            : (props) => (\\n                <BottomSheetFooter\\n                  {...props}\\n                  style={$bottomSheetFooter}\\n                  bottomInset={bottom}\\n                >\\n                  <Button\\n                    text=\\"Dismiss\\"\\n                    preset=\\"reversed\\"\\n                    onPress={dismissOptions}\\n                  />\\n                </BottomSheetFooter>\\n              )\\n        }\\n      >\\n        <BottomSheetFlatList\\n          style={{ marginBottom: bottom + (multiple ? 56 : 0) }}\\n          data={options}\\n          keyExtractor={(o) => o.value}\\n          renderItem={({ item, index }) => (\\n            <ListItem\\n              text={item.label}\\n              topSeparator={index !== 0}\\n              style={$listItem}\\n            />\\n          )}\\n        />\\n      </BottomSheetModal>\\n      {/* success-line-end */}\\n    </>\\n  );\\n});\\n\\n// success-line-start\\nconst $bottomSheetFooter: ViewStyle = {\\n  paddingHorizontal: spacing.large,\\n};\\n\\nconst $listItem: ViewStyle = {\\n  paddingHorizontal: spacing.large,\\n};\\n// success-line-end\\n\\nimport {\\n  BottomSheetBackdrop,\\n  BottomSheetFlatList,\\n  BottomSheetFooter,\\n  BottomSheetModal,\\n} from \\"@gorhom/bottom-sheet\\";\\nimport React, { forwardRef, Ref, useImperativeHandle, useRef } from \\"react\\";\\nimport { TouchableOpacity, View, ViewStyle } from \\"react-native\\";\\nimport { useSafeAreaInsets } from \\"react-native-safe-area-context\\";\\n// success-line\\nimport { colors, spacing } from \\"../theme\\";\\nimport { Button } from \\"./Button\\";\\nimport { Icon } from \\"./Icon\\";\\nimport { ListItem } from \\"./ListItem\\";\\nimport { TextField, TextFieldProps } from \\"./TextField\\";\\n\\nexport interface SelectFieldProps\\n  extends Omit<TextFieldProps, \\"ref\\" | \\"onValueChange\\" | \\"onChange\\" | \\"value\\"> {\\n  value?: string[];\\n  renderValue?: (value: string[]) => string;\\n  onSelect?: (newValue: string[]) => void;\\n  multiple?: boolean;\\n  options: { label: string; value: string }[];\\n}\\nexport interface SelectFieldRef {\\n  presentOptions: () => void;\\n  dismissOptions: () => void;\\n}\\n\\n// success-line-start\\nfunction without<T>(array: T[], value: T) {\\n  return array.filter((v) => v !== value);\\n}\\n// success-line-end\\n\\nexport const SelectField = forwardRef(function SelectField(\\n  props: SelectFieldProps,\\n  ref: Ref<SelectFieldRef>\\n) {\\n  const {\\n    value = [],\\n    onSelect,\\n    renderValue,\\n    options = [],\\n    multiple = true,\\n    ...TextFieldProps\\n  } = props;\\n  const sheet = useRef<BottomSheetModal>(null);\\n  const { bottom } = useSafeAreaInsets();\\n\\n  const disabled =\\n    TextFieldProps.editable === false || TextFieldProps.status === \\"disabled\\";\\n\\n  useImperativeHandle(ref, () => ({ presentOptions, dismissOptions }));\\n\\n  const valueString =\\n    renderValue?.(value) ??\\n    value\\n      .map((v) => options.find((o) => o.value === v)?.label)\\n      .filter(Boolean)\\n      .join(\\", \\");\\n\\n  function presentOptions() {\\n    if (disabled) return;\\n\\n    sheet.current?.present();\\n  }\\n\\n  function dismissOptions() {\\n    sheet.current?.dismiss();\\n  }\\n\\n  // success-line-start\\n  function updateValue(optionValue: string) {\\n    if (value.includes(optionValue)) {\\n      onSelect?.(multiple ? without(value, optionValue) : []);\\n    } else {\\n      onSelect?.(multiple ? [...value, optionValue] : [optionValue]);\\n      if (!multiple) dismissOptions();\\n    }\\n  }\\n  // success-line-end\\n\\n  return (\\n    <>\\n      <TouchableOpacity activeOpacity={1} onPress={presentOptions}>\\n        <View pointerEvents=\\"none\\">\\n          <TextField\\n            {...TextFieldProps}\\n            value={valueString}\\n            RightAccessory={(props) => (\\n              <Icon icon=\\"caretRight\\" containerStyle={props.style} />\\n            )}\\n          />\\n        </View>\\n      </TouchableOpacity>\\n\\n      <BottomSheetModal\\n        ref={sheet}\\n        snapPoints={[\\"50%\\"]}\\n        stackBehavior=\\"replace\\"\\n        enableDismissOnClose\\n        backdropComponent={(props) => (\\n          <BottomSheetBackdrop\\n            {...props}\\n            appearsOnIndex={0}\\n            disappearsOnIndex={-1}\\n          />\\n        )}\\n        footerComponent={\\n          !multiple\\n            ? undefined\\n            : (props) => (\\n                <BottomSheetFooter\\n                  {...props}\\n                  style={$bottomSheetFooter}\\n                  bottomInset={bottom}\\n                >\\n                  <Button\\n                    text=\\"Dismiss\\"\\n                    preset=\\"reversed\\"\\n                    onPress={dismissOptions}\\n                  />\\n                </BottomSheetFooter>\\n              )\\n        }\\n      >\\n        <BottomSheetFlatList\\n          style={{ marginBottom: bottom + (multiple ? 56 : 0) }}\\n          data={options}\\n          keyExtractor={(o) => o.value}\\n          renderItem={({ item, index }) => (\\n            <ListItem\\n              text={item.label}\\n              topSeparator={index !== 0}\\n              style={$listItem}\\n              // success-line-start\\n              rightIcon={value.includes(item.value) ? \\"check\\" : undefined}\\n              rightIconColor={colors.palette.angry500}\\n              onPress={() => updateValue(item.value)}\\n              // success-line-end\\n            />\\n          )}\\n        />\\n      </BottomSheetModal>\\n    </>\\n  );\\n});\\n\\nconst $bottomSheetFooter: ViewStyle = {\\n  paddingHorizontal: spacing.large,\\n};\\n\\nconst $listItem: ViewStyle = {\\n  paddingHorizontal: spacing.large,\\n};\\n\\nimport { SelectField } from \\"../components/SelectField\\";\\n\\nconst teams = [\\n  { label: \\"Hawks\\", value: \\"ATL\\" },\\n  { label: \\"Celtics\\", value: \\"BOS\\" },\\n  // ...\\n  { label: \\"Jazz\\", value: \\"UTA\\" },\\n  { label: \\"Wizards\\", value: \\"WAS\\" },\\n];\\n\\nfunction FavoriteNBATeamsScreen() {\\n  const [selectedTeam, setSelectedTeam] = useState<string[]>([]);\\n  const [selectedTeams, setSelectedTeams] = useState<string[]>([]);\\n\\n  return (\\n    <>\\n      <SelectField\\n        label=\\"NBA Team(s)\\"\\n        helper=\\"Select your team(s)\\"\\n        placeholder=\\"e.g. Trail Blazers\\"\\n        value={selectedTeam}\\n        onSelect={setSelectedTeam}\\n        options={teams}\\n        multiple={false}\\n        containerStyle={{ marginBottom: spacing.large }}\\n      />\\n\\n      <SelectField\\n        label=\\"NBA Team(s)\\"\\n        helper=\\"Select your team(s)\\"\\n        placeholder=\\"e.g. Trail Blazers\\"\\n        value={selectedTeams}\\n        onSelect={setSelectedTeams}\\n        options={teams}\\n        containerStyle={{ marginBottom: spacing.large }}\\n        renderValue={(value) => `Selected ${value.length} Teams`}\\n      />\\n    </>\\n  );\\n}\\n\\n","lastUpdated":"1 year, 2 months ago","title":"SelectField using `react-native-bottom-sheet`","publish_date":"2023-02-15","doc_name":"SelectFieldWithBottomSheet.mdx"},{"author":"Justin Poliachik","content":"--\\"android\\": \\"npx expo start --android\\",\\n--\\"ios\\": \\"npx expo start --ios\\",\\n++\\"android\\": \\"npx expo run:android\\",\\n++\\"ios\\": \\"npx expo run:ios\\",\\n\\n--\\"android\\": \\"npx expo run:android\\",\\n--\\"ios\\": \\"npx expo run:ios\\",\\n++\\"android\\": \\"npx expo start --android\\",\\n++\\"ios\\": \\"npx expo start --ios\\",\\n\\n\\"@react-native-async-storage/async-storage\\": \\"1.18.2\\",\\n\\"@shopify/flash-list\\": \\"1.4.3\\",\\n\\"expo-application\\": \\"~5.3.0\\",\\n\\"expo-font\\": \\"~11.4.0\\",\\n\\"expo-localization\\": \\"~14.3.0\\",\\n\\"react-native\\": \\"0.72.6\\",\\n\\n","lastUpdated":"3 months ago","title":"Switch Between Expo Go and Expo CNG","publish_date":"2024-01-11","doc_name":"SwitchBetweenExpoGoCNG.md"},{"author":"Frank Calise","content":"import { Thing } from \\"../../../../../components/thing\\";\\n\\nimport { Thing } from \\"~/components/thing\\";\\n\\nyarn add -D babel-plugin-root-import\\n\\n{\\n  // ...\\n  \\"baseUrl\\": \\"./\\",\\n  // the following assumes Ignite\'s app/ structure, however yours may differ\\n  \\"paths\\": { \\"~/*\\": [\\"app/*\\"] }\\n}\\n\\n[\\n  \\"babel-plugin-root-import\\",\\n  {\\n    root: __dirname,\\n    rootPathPrefix: \\"~/\\",\\n    // mapping ~/ to the ./app directory (again, your app structure may differ here)\\n    rootPathSuffix: \\"app\\",\\n  },\\n],\\n\\nimport { ListItem, Screen, Text } from \\"../../components\\";\\nimport { isRTL } from \\"../../i18n\\";\\nimport { DemoTabScreenProps } from \\"../../navigators/DemoNavigator\\";\\nimport { colors, spacing } from \\"../../theme\\";\\n\\nimport { ListItem, Screen, Text } from \\"~/components\\";\\nimport { isRTL } from \\"~/i18n\\";\\nimport { DemoTabScreenProps } from \\"~/navigators/DemoNavigator\\";\\nimport { colors, spacing } from \\"~/theme\\";\\n\\nyarn expo:start\\n\\nyarn expo:start --clear\\n\\n","lastUpdated":"1 year, 1 month ago","title":"TypeScript baseUrl Configuration","publish_date":"2022-10-24","doc_name":"TypeScriptBaseURL.md"},{"author":"Mark Rickert","content":"import * as React from \'react\';\\nimport { SectionList, SectionListProps, SectionListScrollParams } from \'react-native\';\\n\\ninterface SectionListHandle {\\n  scrollToLocation: (params: SectionListScrollParams) => void;\\n}\\n\\n/**\\n * This is a wrapper around react-native\'s SectionList that adds protection against scrolling to an\\n * unknown (not rendered yet) location. This is useful for cases where the user wants to scroll to a\\n * position very far down the list but we haven\'t rendered that far yet.\\n *\\n * This adds onScrollToIndexFailed property to SectionList so that if the scroll fails, we calculate the approximate\\n * scroll position, scroll there, and then try again to get the exact position requested.\\n *\\n * Essentially, it\'s a \\"guess the position and retry the operation\\" strategy until the list is scrolled to the\\n * correct location.\\n */\\nexport const ScrollProtectedSectionList = React.forwardRef<\\n  SectionListHandle,\\n  SectionListProps<any, any>\\n>((props, forwardedRef) => {\\n  const internalRef = React.useRef<SectionList>(null);\\n  const [lastScrollRequest, setLastScrollRequest] = React.useState<SectionListScrollParams>();\\n  const timeout = React.useRef<ReturnType<typeof setTimeout>>();\\n\\n  const onScrollToIndexFailed = (info: {\\n    index: number;\\n    highestMeasuredFrameIndex: number;\\n    averageItemLength: number;\\n  }) => {\\n    console.log(\'ScrollProtectedSectionList.onScrollToIndexFailed\', info);\\n\\n    // Calculate the possible position of the item and scroll there using the internal scroll responder.\\n    const offset = info.averageItemLength * info.index;\\n    internalRef.current?.getScrollResponder()?.scrollTo({ x: 0, y: offset, animated: false });\\n\\n    // If we know exactly where we want to scroll to, we can just scroll now since the item is likely visible.\\n    // Otherwise it\'ll call this function recursively again.\\n    if (lastScrollRequest) {\\n      timeout.current = setTimeout(() => {\\n        internalRef.current?.scrollToLocation(lastScrollRequest);\\n      }, 100);\\n    }\\n  };\\n\\n  // Clear the timeout if it still exists when the component unmounts.\\n  React.useEffect(() => {\\n    return () => timeout.current && clearTimeout(timeout.current);\\n  }, []);\\n\\n  React.useImperativeHandle(\\n    forwardedRef,\\n    () => ({\\n      scrollToLocation: (params: SectionListScrollParams) => {\\n        internalRef.current?.scrollToLocation(params);\\n        setLastScrollRequest(params);\\n      },\\n    }),\\n    [internalRef],\\n  );\\n\\n  return <SectionList {...props} ref={internalRef} onScrollToIndexFailed={onScrollToIndexFailed} />;\\n});\\n\\n","lastUpdated":"1 year, 3 months ago","title":"Scrolling to a location that hasn\'t been rendered using FlatList or SectionList","publish_date":"2022-10-09","doc_name":"UnrenderedItemInScrollView.md"},{"author":"Derek Greenberg","content":"yarn audit\\n\\nyarn outdated\\n\\nyarn upgrade-interactive\\nyarn upgrade-interactive --latest\\n\\n","lastUpdated":"8 weeks ago","title":"Updating Dependencies with Yarn Audit, Outdated and Upgrade","publish_date":"2022-10-09","doc_name":"UpdatingDependencies.md"},{"author":"Lizzi Lindboe","content":"# enable\\nadb shell settings put secure enabled_accessibility_services \\\\\\ncom.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService\\n# disable\\nadb shell settings put secure enabled_accessibility_services \\\\\\ncom.android.talkback/com.google.android.marvin.talkback.TalkBackService\\n\\n","lastUpdated":"1 year, 3 months ago","title":"Using Screen Readers","publish_date":"2022-10-09","doc_name":"UsingScreenReaders.md"},{"author":"Justin Poliachik","content":"npx ignite-cli new ZustandApp --yes\\n\\nyarn add zustand\\n\\nmkdir app/store\\n\\nimport { Instance, SnapshotOut, types } from \\"mobx-state-tree\\";\\n\\nexport const AuthenticationStoreModel = types\\n  .model(\\"AuthenticationStore\\")\\n  .props({\\n    authToken: types.maybe(types.string),\\n    authEmail: \\"\\",\\n  })\\n  .views((store) => ({\\n    get isAuthenticated() {\\n      return !!store.authToken;\\n    },\\n    get validationError() {\\n      if (store.authEmail.length === 0) return \\"can\'t be blank\\";\\n      if (store.authEmail.length < 6) return \\"must be at least 6 characters\\";\\n      if (!/^[^\\\\s@]+@[^\\\\s@]+\\\\.[^\\\\s@]+$/.test(store.authEmail)) return \\"must be a valid email address\\";\\n      return \\"\\";\\n    },\\n  }))\\n  .actions((store) => ({\\n    setAuthToken(value?: string) {\\n      store.authToken = value;\\n    },\\n    setAuthEmail(value: string) {\\n      store.authEmail = value.replace(/ /g, \\"\\");\\n    },\\n    logout() {\\n      store.authToken = undefined;\\n      store.authEmail = \\"\\";\\n    },\\n  }));\\n\\nexport interface AuthenticationStore extends Instance<typeof AuthenticationStoreModel> {}\\nexport interface AuthenticationStoreSnapshot extends SnapshotOut<typeof AuthenticationStoreModel> {}\\n\\nimport { StateCreator } from \\"zustand\\";\\nimport { RootStore } from \\"./RootStore\\";\\n\\n// Typescript interface for this store slice\\nexport interface AuthenticationStore {\\n  authToken?: string;\\n  authEmail: string;\\n  setAuthToken: (value?: string) => void;\\n  setAuthEmail: (value: string) => void;\\n  logout: () => void;\\n}\\n\\n// create our store slice with default data and actions\\nexport const createAuthenticationSlice: StateCreator<RootStore, [], [], AuthenticationStore> = (set) => ({\\n  authToken: undefined,\\n  authEmail: \\"\\",\\n  setAuthToken: (value) => set({ authToken: value }),\\n  setAuthEmail: (value) => set({ authEmail: value.replace(/ /g, \\"\\") }),\\n  logout: () => set({ authToken: undefined, authEmail: \\"\\" }),\\n});\\n\\n// a selector can be used to grab the full AuthenticationStore\\nexport const authenticationStoreSelector = (state: RootStore) => ({\\n  authToken: state.authToken,\\n  authEmail: state.authEmail,\\n  isAuthenticated: isAuthenticatedSelector(state),\\n  setAuthToken: state.setAuthToken,\\n  setAuthEmail: state.setAuthEmail,\\n  logout: state.logout,\\n});\\n\\n// selectors can also be used for derived values\\nexport const isAuthenticatedSelector = (state: RootStore) => !!state.authToken;\\n\\nexport const validationErrorSelector = (state: RootStore) => {\\n  if (state.authEmail.length === 0) return \\"can\'t be blank\\";\\n  if (state.authEmail.length < 6) return \\"must be at least 6 characters\\";\\n  if (!/^[^\\\\s@]+@[^\\\\s@]+\\\\.[^\\\\s@]+$/.test(state.authEmail)) return \\"must be a valid email address\\";\\n  return \\"\\";\\n};\\n\\nimport { Instance, SnapshotOut, types } from \\"mobx-state-tree\\";\\nimport { api } from \\"../services/api\\";\\nimport { Episode, EpisodeModel } from \\"./Episode\\";\\nimport { withSetPropAction } from \\"./helpers/withSetPropAction\\";\\n\\nexport const EpisodeStoreModel = types\\n  .model(\\"EpisodeStore\\")\\n  .props({\\n    episodes: types.array(EpisodeModel),\\n    favorites: types.array(types.reference(EpisodeModel)),\\n    favoritesOnly: false,\\n  })\\n  .actions(withSetPropAction)\\n  .actions((store) => ({\\n    async fetchEpisodes() {\\n      const response = await api.getEpisodes();\\n      if (response.kind === \\"ok\\") {\\n        store.setProp(\\"episodes\\", response.episodes);\\n      } else {\\n        console.error(`Error fetching episodes: ${JSON.stringify(response)}`);\\n      }\\n    },\\n    addFavorite(episode: Episode) {\\n      store.favorites.push(episode);\\n    },\\n    removeFavorite(episode: Episode) {\\n      store.favorites.remove(episode);\\n    },\\n  }))\\n  .views((store) => ({\\n    get episodesForList() {\\n      return store.favoritesOnly ? store.favorites : store.episodes;\\n    },\\n\\n    hasFavorite(episode: Episode) {\\n      return store.favorites.includes(episode);\\n    },\\n  }))\\n  .actions((store) => ({\\n    toggleFavorite(episode: Episode) {\\n      if (store.hasFavorite(episode)) {\\n        store.removeFavorite(episode);\\n      } else {\\n        store.addFavorite(episode);\\n      }\\n    },\\n  }));\\n\\nexport interface EpisodeStore extends Instance<typeof EpisodeStoreModel> {}\\nexport interface EpisodeStoreSnapshot extends SnapshotOut<typeof EpisodeStoreModel> {}\\n\\nimport { api } from \\"../services/api\\";\\nimport { Episode } from \\"./Episode\\";\\nimport { StateCreator } from \\"zustand\\";\\nimport { RootStore } from \\"./RootStore\\";\\n\\nexport interface EpisodeStore {\\n  episodes: Episode[];\\n  favorites: string[];\\n  favoritesOnly: boolean;\\n\\n  fetchEpisodes: () => Promise<void>;\\n  addFavorite: (episode: Episode) => void;\\n  removeFavorite: (episode: Episode) => void;\\n  toggleFavorite: (episode: Episode) => void;\\n  setFavoritesOnly: (value: boolean) => void;\\n}\\n\\nexport const createEpisodeSlice: StateCreator<RootStore, [], [], EpisodeStore> = (set, get) => ({\\n  episodes: [],\\n  favorites: [],\\n  favoritesOnly: false,\\n\\n  // Zustand supports async actions\\n  fetchEpisodes: async () => {\\n    const response = await api.getEpisodes();\\n    if (response.kind === \\"ok\\") {\\n      set({ episodes: response.episodes });\\n    } else {\\n      console.error(`Error fetching episodes: ${JSON.stringify(response)}`);\\n    }\\n  },\\n  addFavorite: (episode) => set((state) => ({ favorites: [...state.favorites, episode.guid] })),\\n  removeFavorite: (episode) => set((state) => ({ favorites: state.favorites.filter((guid) => guid !== episode.guid) })),\\n  toggleFavorite: (episode) => {\\n    // get() can be used within actions\\n    if (get().favorites.includes(episode.guid)) {\\n      get().removeFavorite(episode);\\n    } else {\\n      get().addFavorite(episode);\\n    }\\n  },\\n  setFavoritesOnly: (value: boolean) => set({ favoritesOnly: value }),\\n});\\n\\nexport const episodeStoreSelector = (state: RootStore) => ({\\n  episodes: state.episodes,\\n  favorites: state.favorites,\\n  favoritesOnly: state.favoritesOnly,\\n\\n  // derived values can be included in selectors like this\\n  episodesForList: getEpisodesForList(state),\\n\\n  fetchEpisodes: state.fetchEpisodes,\\n  addFavorite: state.addFavorite,\\n  removeFavorite: state.removeFavorite,\\n  toggleFavorite: state.toggleFavorite,\\n  setFavoritesOnly: state.setFavoritesOnly,\\n\\n  // we can also include helper functions that have access to state\\n  hasFavorite: (episode: Episode) => {\\n    return state.favorites.includes(episode.guid);\\n  },\\n});\\n\\nexport const getEpisodesForList = (store: EpisodeStore) => {\\n  return store.favoritesOnly ? store.episodes.filter((a) => store.favorites.includes(a.guid)) : store.episodes;\\n};\\n\\nimport { Instance, SnapshotIn, SnapshotOut, types } from \\"mobx-state-tree\\";\\nimport { withSetPropAction } from \\"./helpers/withSetPropAction\\";\\nimport { formatDate } from \\"../utils/formatDate\\";\\nimport { translate } from \\"../i18n\\";\\n\\ninterface Enclosure {\\n  link: string;\\n  type: string;\\n  length: number;\\n  duration: number;\\n  rating: { scheme: string; value: string };\\n}\\n\\n/**\\n * This represents an episode of React Native Radio.\\n */\\nexport const EpisodeModel = types\\n  .model(\\"Episode\\")\\n  .props({\\n    guid: types.identifier,\\n    title: \\"\\",\\n    pubDate: \\"\\", // Ex: 2022-08-12 21:05:36\\n    link: \\"\\",\\n    author: \\"\\",\\n    thumbnail: \\"\\",\\n    description: \\"\\",\\n    content: \\"\\",\\n    enclosure: types.frozen<Enclosure>(),\\n    categories: types.array(types.string),\\n  })\\n  .actions(withSetPropAction)\\n  .views((episode) => ({\\n    get parsedTitleAndSubtitle() {\\n      const defaultValue = { title: episode.title?.trim(), subtitle: \\"\\" };\\n\\n      if (!defaultValue.title) return defaultValue;\\n\\n      const titleMatches = defaultValue.title.match(/^(RNR.*\\\\d)(?: - )(.*$)/);\\n\\n      if (!titleMatches || titleMatches.length !== 3) return defaultValue;\\n\\n      return { title: titleMatches[1], subtitle: titleMatches[2] };\\n    },\\n    get datePublished() {\\n      try {\\n        const formatted = formatDate(episode.pubDate);\\n        return {\\n          textLabel: formatted,\\n          accessibilityLabel: translate(\\"demoPodcastListScreen.accessibility.publishLabel\\", {\\n            date: formatted,\\n          }),\\n        };\\n      } catch (error) {\\n        return { textLabel: \\"\\", accessibilityLabel: \\"\\" };\\n      }\\n    },\\n    get duration() {\\n      const seconds = Number(episode.enclosure.duration);\\n      const h = Math.floor(seconds / 3600);\\n      const m = Math.floor((seconds % 3600) / 60);\\n      const s = Math.floor((seconds % 3600) % 60);\\n\\n      const hDisplay = h > 0 ? `${h}:` : \\"\\";\\n      const mDisplay = m > 0 ? `${m}:` : \\"\\";\\n      const sDisplay = s > 0 ? s : \\"\\";\\n      return {\\n        textLabel: hDisplay + mDisplay + sDisplay,\\n        accessibilityLabel: translate(\\"demoPodcastListScreen.accessibility.durationLabel\\", {\\n          hours: h,\\n          minutes: m,\\n          seconds: s,\\n        }),\\n      };\\n    },\\n  }));\\n\\nexport interface Episode extends Instance<typeof EpisodeModel> {}\\nexport interface EpisodeSnapshotOut extends SnapshotOut<typeof EpisodeModel> {}\\nexport interface EpisodeSnapshotIn extends SnapshotIn<typeof EpisodeModel> {}\\n\\nimport { formatDate } from \\"../utils/formatDate\\";\\nimport { translate } from \\"../i18n\\";\\n\\ninterface Enclosure {\\n  link: string;\\n  type: string;\\n  length: number;\\n  duration: number;\\n  rating: { scheme: string; value: string };\\n}\\n\\nexport type Episode = {\\n  guid: string;\\n  title: string;\\n  pubDate: string;\\n  link: string;\\n  author: string;\\n  thumbnail: string;\\n  description: string;\\n  content: string;\\n  enclosure: Enclosure;\\n  categories: string[];\\n};\\n\\nexport const getParsedTitleAndSubtitle = (episode: Episode) => {\\n  const defaultValue = { title: episode.title?.trim(), subtitle: \\"\\" };\\n\\n  if (!defaultValue.title) return defaultValue;\\n\\n  const titleMatches = defaultValue.title.match(/^(RNR.*\\\\d)(?: - )(.*$)/);\\n\\n  if (!titleMatches || titleMatches.length !== 3) return defaultValue;\\n\\n  return { title: titleMatches[1], subtitle: titleMatches[2] };\\n};\\n\\nexport const getDatePublished = (episode: Episode) => {\\n  try {\\n    const formatted = formatDate(episode.pubDate);\\n    return {\\n      textLabel: formatted,\\n      accessibilityLabel: translate(\\"demoPodcastListScreen.accessibility.publishLabel\\", {\\n        date: formatted,\\n      }),\\n    };\\n  } catch (error) {\\n    return { textLabel: \\"\\", accessibilityLabel: \\"\\" };\\n  }\\n};\\n\\nexport const getDuration = (episode: Episode) => {\\n  const seconds = Number(episode.enclosure.duration);\\n  const h = Math.floor(seconds / 3600);\\n  const m = Math.floor((seconds % 3600) / 60);\\n  const s = Math.floor((seconds % 3600) % 60);\\n\\n  const hDisplay = h > 0 ? `${h}:` : \\"\\";\\n  const mDisplay = m > 0 ? `${m}:` : \\"\\";\\n  const sDisplay = s > 0 ? s : \\"\\";\\n  return {\\n    textLabel: hDisplay + mDisplay + sDisplay,\\n    accessibilityLabel: translate(\\"demoPodcastListScreen.accessibility.durationLabel\\", {\\n      hours: h,\\n      minutes: m,\\n      seconds: s,\\n    }),\\n  };\\n};\\n\\nimport { create } from \\"zustand\\";\\nimport { useShallow } from \\"zustand/react/shallow\\";\\nimport { AuthenticationStore, authenticationStoreSelector, createAuthenticationSlice } from \\"./AuthenticationStore\\";\\nimport { EpisodeStore, createEpisodeSlice, episodeStoreSelector } from \\"./EpisodeStore\\";\\n\\nexport interface RootStore extends AuthenticationStore, EpisodeStore {}\\n\\nexport const useStore = create<RootStore>()((...a) => ({\\n  ...createAuthenticationSlice(...a),\\n  ...createEpisodeSlice(...a),\\n  // add your state slices here\\n}));\\n\\n// optional: custom hooks can be used to pick pieces from state\\n// useShallow is used to help prevent unnecessary rerenders\\nexport const useAuthenticationStore = () => useStore(useShallow(authenticationStoreSelector));\\nexport const useEpisodeStore = () => useStore(useShallow(episodeStoreSelector));\\n\\nexport * from \\"./RootStore\\";\\nexport * from \\"./AuthenticationStore\\";\\nexport * from \\"./EpisodeStore\\";\\nexport * from \\"./Episode\\";\\n\\nimport { useStore, isAuthenticatedSelector } from \\"app/store\\";\\n\\nconst AppStack = () => {\\n\\n  // use a selector to pick only that value\\n  const isAuthenticated = useStore(isAuthenticatedSelector)\\n\\n  return (\\n    <Stack.Navigator\\n    ...\\n\\n// pick several values & actions from the AuthenticationStore\\nconst { authEmail, setAuthEmail, setAuthToken } = useAuthenticationStore();\\n// we can also use multiple hooks\\nconst validationError = useStore(validationErrorSelector);\\n\\nimport {\\n  useEpisodeStore,\\n  Episode,\\n  getDatePublished,\\n  getDuration,\\n  getParsedTitleAndSubtitle,\\n} from \\"app/store\\"\\n\\n...\\n\\nconst episodeStore = useEpisodeStore();\\n\\n<Toggle\\n  value={episodeStore.favoritesOnly}\\n  onValueChange={() =>\\n--  episodeStore.setProp(\\"favoritesOnly\\", !episodeStore.favoritesOnly)\\n++  episodeStore.setFavoritesOnly(!episodeStore.favoritesOnly)\\n  }\\n\\n\\nconst datePublished = getDatePublished(episode);\\nconst duration = getDuration(episode);\\nconst parsedTitleAndSubtitle = getParsedTitleAndSubtitle(episode);\\n\\n <Text\\n  style={$metadataText}\\n  size=\\"xxs\\"\\n--accessibilityLabel={episode.datePublished.accessibilityLabel}\\n++accessibilityLabel={datePublished.accessibilityLabel}\\n>\\n--{episode.datePublished.textLabel}\\n++{datePublished.textLabel}\\n</Text>\\n\\n++import { useStore } from \\"app/store\\"\\n\\n--const {\\n--  authenticationStore: { logout },\\n--} = useStores()\\n++const logout = useStore((state) => state.logout)\\n\\n++import { useStore } from \\"app/store\\"\\n\\n--const {\\n--  authenticationStore: { logout },\\n--} = useStores()\\n++const logout = useStore((state) => state.logout)\\n\\n+import { Episode } from \\"app/store/Episode\\";\\n\\n-const episodes: EpisodeSnapshotIn[] =\\n+const episodes: Episode[] =\\n\\nimport { create } from \\"zustand\\";\\nimport { useShallow } from \\"zustand/react/shallow\\";\\nimport { persist, createJSONStorage } from \\"zustand/middleware\\";\\n\\nimport { AuthenticationStore, authenticationStoreSelector, createAuthenticationSlice } from \\"./AuthenticationStore\\";\\nimport { EpisodeStore, createEpisodeSlice, episodeStoreSelector } from \\"./EpisodeStore\\";\\nimport AsyncStorage from \\"@react-native-async-storage/async-storage\\";\\n\\nexport interface RootStore extends AuthenticationStore, EpisodeStore {\\n  _hasHydrated: boolean;\\n  setHasHydrated: (state: boolean) => void;\\n}\\n\\nexport const useStore = create<RootStore>()(\\n  persist(\\n    (...a) => ({\\n      ...createAuthenticationSlice(...a),\\n      ...createEpisodeSlice(...a),\\n      // add your state slices here\\n\\n      _hasHydrated: false,\\n      setHasHydrated: (state) => {\\n        const set = a[0];\\n        set({\\n          _hasHydrated: state,\\n        });\\n      },\\n    }),\\n    {\\n      name: \\"zustand-app\\",\\n      storage: createJSONStorage(() => AsyncStorage),\\n      onRehydrateStorage: () => (state) => {\\n        state?.setHasHydrated(true);\\n      },\\n    }\\n  )\\n);\\n\\nexport const useAuthenticationStore = () => useStore(useShallow(authenticationStoreSelector));\\nexport const useEpisodeStore = () => useStore(useShallow(episodeStoreSelector));\\n\\n+import { useStore } from \\"./store\\"\\n\\n...\\n\\nconst [areFontsLoaded] = useFonts(customFontsToLoad)\\n\\n-useEffect(() => {\\n-  hideSplashScreen()\\n-}, [])\\n\\n+const hasHydrated = useStore((state) => state._hasHydrated)\\n+useEffect(() => {\\n+  if (hasHydrated) {\\n+    setTimeout(hideSplashScreen, 500)\\n+  }\\n+}, [hasHydrated])\\n\\n-if (!isNavigationStateRestored || !areFontsLoaded) return null\\n+if (!hasHydrated || !isNavigationStateRestored || !areFontsLoaded) return null\\n\\n\\n","lastUpdated":"8 weeks ago","title":"Zustand","publish_date":"2024-02-05","doc_name":"Zustand.md"}]}},"docusaurus-plugin-content-docs":{"default":{"path":"/docs","versions":[{"name":"current","label":"Next","isLast":true,"path":"/docs","mainDocId":"intro","docs":[{"id":"archive/index","path":"/docs/archive/","sidebar":"mainSidebar"},{"id":"archive/PristineExpoProject","path":"/docs/archive/PristineExpoProject","sidebar":"mainSidebar"},{"id":"intro","path":"/docs/intro","sidebar":"mainSidebar"},{"id":"recipes/AccessibilityFontSizes","path":"/docs/recipes/AccessibilityFontSizes","sidebar":"mainSidebar"},{"id":"recipes/CircleCIRNSetup","path":"/docs/recipes/CircleCIRNSetup","sidebar":"mainSidebar"},{"id":"recipes/CreatingGreateExperienceForScreenReaders","path":"/docs/recipes/CreatingGreateExperienceForScreenReaders","sidebar":"mainSidebar"},{"id":"recipes/DetoxIntro","path":"/docs/recipes/DetoxIntro","sidebar":"mainSidebar"},{"id":"recipes/DistributingAuthTokenToAPI","path":"/docs/recipes/DistributingAuthTokenToAPI","sidebar":"mainSidebar"},{"id":"recipes/EASUpdate","path":"/docs/recipes/EASUpdate","sidebar":"mainSidebar"},{"id":"recipes/EnforcingImportOrder","path":"/docs/recipes/EnforcingImportOrder","sidebar":"mainSidebar"},{"id":"recipes/EnvironmentVariables","path":"/docs/recipes/EnvironmentVariables","sidebar":"mainSidebar"},{"id":"recipes/ExpoRouter","path":"/docs/recipes/ExpoRouter","sidebar":"mainSidebar"},{"id":"recipes/GeneratorComponentTests","path":"/docs/recipes/GeneratorComponentTests","sidebar":"mainSidebar"},{"id":"recipes/LocalFirstDataWithPowerSync","path":"/docs/recipes/LocalFirstDataWithPowerSync","sidebar":"mainSidebar"},{"id":"recipes/MaestroSetup","path":"/docs/recipes/MaestroSetup","sidebar":"mainSidebar"},{"id":"recipes/MigratingToMMKV","path":"/docs/recipes/MigratingToMMKV","sidebar":"mainSidebar"},{"id":"recipes/PatchingBuildingAndroid","path":"/docs/recipes/PatchingBuildingAndroid","sidebar":"mainSidebar"},{"id":"recipes/PrepForEASBuild","path":"/docs/recipes/PrepForEASBuild","sidebar":"mainSidebar"},{"id":"recipes/ReactNativeVisionCamera","path":"/docs/recipes/ReactNativeVisionCamera","sidebar":"mainSidebar"},{"id":"recipes/Redux","path":"/docs/recipes/Redux","sidebar":"mainSidebar"},{"id":"recipes/RemoveMobxStateTree","path":"/docs/recipes/RemoveMobxStateTree","sidebar":"mainSidebar"},{"id":"recipes/RequiringHardwareFeaturesWithExpo","path":"/docs/recipes/RequiringHardwareFeaturesWithExpo","sidebar":"mainSidebar"},{"id":"recipes/SampleYAMLCircleCI","path":"/docs/recipes/SampleYAMLCircleCI","sidebar":"mainSidebar"},{"id":"recipes/SelectFieldWithBottomSheet","path":"/docs/recipes/SelectFieldWithBottomSheet","sidebar":"mainSidebar"},{"id":"recipes/SwitchBetweenExpoGoCNG","path":"/docs/recipes/SwitchBetweenExpoGoCNG","sidebar":"mainSidebar"},{"id":"recipes/TypeScriptBaseURL","path":"/docs/recipes/TypeScriptBaseURL","sidebar":"mainSidebar"},{"id":"recipes/UnrenderedItemInScrollView","path":"/docs/recipes/UnrenderedItemInScrollView","sidebar":"mainSidebar"},{"id":"recipes/UpdatingDependencies","path":"/docs/recipes/UpdatingDependencies","sidebar":"mainSidebar"},{"id":"recipes/UpdatingIgnite","path":"/docs/recipes/UpdatingIgnite","sidebar":"mainSidebar"},{"id":"recipes/UsingScreenReaders","path":"/docs/recipes/UsingScreenReaders","sidebar":"mainSidebar"},{"id":"recipes/Zustand","path":"/docs/recipes/Zustand","sidebar":"mainSidebar"}],"draftIds":[],"sidebars":{"mainSidebar":{"link":{"path":"/docs/intro","label":"intro"}}}}],"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 s=t(144);const l=JSON.parse('{"docusaurusVersion":"3.1.1","siteVersion":"0.0.0","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"3.1.1"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"3.1.1"},"docusaurus-plugin-google-gtag":{"type":"package","name":"@docusaurus/plugin-google-gtag","version":"3.1.1"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"3.1.1"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"3.1.1"},"docusaurus-theme-search-algolia":{"type":"package","name":"@docusaurus/theme-search-algolia","version":"3.1.1"},"example-code-snippets":{"type":"local"}}}');var c=t(7624);const u={siteConfig:o.default,siteMetadata:l,globalData:a,i18n:i,codeTranslations:s},d=r.createContext(u);function p(e){let{children:n}=e;return(0,c.jsx)(d.Provider,{value:u,children:n})}},5852:(e,n,t)=>{"use strict";t.d(n,{c:()=>f});var r=t(1504),o=t(8684),a=t(6952),i=t(5684),s=t(7468),l=t(7624);function c(e){let{error:n,tryAgain:t}=e;return(0,l.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,l.jsx)("h1",{style:{fontSize:"3rem"},children:"This page crashed"}),(0,l.jsx)("button",{type:"button",onClick:t,style:{margin:"1rem 0",fontSize:"2rem",cursor:"pointer",borderRadius:20,padding:"1rem"},children:"Try again"}),(0,l.jsx)(u,{error:n})]})}function u(e){let{error:n}=e;const t=(0,i.getErrorCausalChain)(n).map((e=>e.message)).join("\n\nCause:\n");return(0,l.jsx)("p",{style:{whiteSpace:"pre-wrap"},children:t})}function d(e){let{error:n,tryAgain:t}=e;return(0,l.jsxs)(f,{fallback:()=>(0,l.jsx)(c,{error:n,tryAgain:t}),children:[(0,l.jsx)(a.c,{children:(0,l.jsx)("title",{children:"Page Error"})}),(0,l.jsx)(s.c,{children:(0,l.jsx)(c,{error:n,tryAgain:t})})]})}const p=e=>(0,l.jsx)(d,{...e});class f extends r.Component{constructor(e){super(e),this.state={error:null}}componentDidCatch(e){o.c.canUseDOM&&this.setState({error:e})}render(){const{children:e}=this.props,{error:n}=this.state;if(n){const e={error:n,tryAgain:()=>this.setState({error:null})};return(this.props.fallback??p)(e)}return e??null}}},8684:(e,n,t)=>{"use strict";t.d(n,{c:()=>o});const r="undefined"!=typeof window&&"document"in window&&"createElement"in window.document,o={canUseDOM:r,canUseEventListeners:r&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:r&&"IntersectionObserver"in window,canUseViewport:r&&"screen"in window}},6952:(e,n,t)=>{"use strict";t.d(n,{c:()=>a});t(1504);var r=t(2160),o=t(7624);function a(e){return(0,o.jsx)(r.So,{...e})}},867:(e,n,t)=>{"use strict";t.d(n,{c:()=>f});var r=t(1504),o=t(440),a=t(5684),i=t(8264),s=t(8136),l=t(8684),c=t(5976),u=t(964),d=t(7624);function p(e,n){let{isNavLink:t,to:p,href:f,activeClassName:m,isActive:g,"data-noBrokenLinkCheck":h,autoAddBaseUrl:y=!0,...b}=e;const{siteConfig:{trailingSlash:v,baseUrl:S}}=(0,i.c)(),{withBaseUrl:w}=(0,u.E)(),x=(0,c.c)(),k=(0,r.useRef)(null);(0,r.useImperativeHandle)(n,(()=>k.current));const T=p||f;const E=(0,s.c)(T),C=T?.replace("pathname://","");let _=void 0!==C?(A=C,y&&(e=>e.startsWith("/"))(A)?w(A):A):void 0;var A;_&&E&&(_=(0,a.applyTrailingSlash)(_,{trailingSlash:v,baseUrl:S}));const I=(0,r.useRef)(!1),P=t?o.Af:o.cH,L=l.c.canUseIntersectionObserver,R=(0,r.useRef)(),N=()=>{I.current||null==_||(window.docusaurus.preload(_),I.current=!0)};(0,r.useEffect)((()=>(!L&&E&&null!=_&&window.docusaurus.prefetch(_),()=>{L&&R.current&&R.current.disconnect()})),[R,_,L,E]);const O=_?.startsWith("#")??!1,F=!b.target||"_self"===b.target,j=!_||!E||!F||O;return h||!O&&j||x.collectLink(_),b.id&&x.collectAnchor(b.id),j?(0,d.jsx)("a",{ref:k,href:_,...T&&!E&&{target:"_blank",rel:"noopener noreferrer"},...b}):(0,d.jsx)(P,{...b,onMouseEnter:N,onTouchStart:N,innerRef:e=>{k.current=e,L&&e&&E&&(R.current=new window.IntersectionObserver((n=>{n.forEach((n=>{e===n.target&&(n.isIntersecting||n.intersectionRatio>0)&&(R.current.unobserve(e),R.current.disconnect(),null!=_&&window.docusaurus.prefetch(_))}))})),R.current.observe(e))},to:_,...t&&{isActive:g,activeClassName:m}})}const f=r.forwardRef(p)},4357:(e,n,t)=>{"use strict";t.d(n,{c:()=>c,G:()=>l});var r=t(1504),o=t(7624);function a(e,n){const t=e.split(/(\{\w+\})/).map(((e,t)=>{if(t%2==1){const t=n?.[e.slice(1,-1)];if(void 0!==t)return t}return e}));return t.some((e=>(0,r.isValidElement)(e)))?t.map(((e,n)=>(0,r.isValidElement)(e)?r.cloneElement(e,{key:n}):e)).filter((e=>""!==e)):t.join("")}var i=t(144);function s(e){let{id:n,message:t}=e;if(void 0===n&&void 0===t)throw new Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return i[n??t]??t??n}function l(e,n){let{message:t,id:r}=e;return a(s({message:t,id:r}),n)}function c(e){let{children:n,id:t,values:r}=e;if(n&&"string"!=typeof n)throw console.warn("Illegal <Translate> children",n),new Error("The Docusaurus <Translate> component only accept simple string values");const i=s({message:n,id:t});return(0,o.jsx)(o.Fragment,{children:a(i,r)})}},2488:(e,n,t)=>{"use strict";t.d(n,{M:()=>r});const r="default"},8136:(e,n,t)=>{"use strict";function r(e){return/^(?:\w*:|\/\/)/.test(e)}function o(e){return void 0!==e&&!r(e)}t.d(n,{_:()=>r,c:()=>o})},964:(e,n,t)=>{"use strict";t.d(n,{E:()=>i,c:()=>s});var r=t(1504),o=t(8264),a=t(8136);function i(){const{siteConfig:{baseUrl:e,url:n}}=(0,o.c)(),t=(0,r.useCallback)(((t,r)=>function(e,n,t,r){let{forcePrependBaseUrl:o=!1,absolute:i=!1}=void 0===r?{}:r;if(!t||t.startsWith("#")||(0,a._)(t))return t;if(o)return n+t.replace(/^\//,"");if(t===n.replace(/\/$/,""))return n;const s=t.startsWith(n)?t:n+t.replace(/^\//,"");return i?e+s:s}(n,e,t,r)),[n,e]);return{withBaseUrl:t}}function s(e,n){void 0===n&&(n={});const{withBaseUrl:t}=i();return t(e,n)}},5976:(e,n,t)=>{"use strict";t.d(n,{c:()=>i});var r=t(1504);t(7624);const o=r.createContext({collectAnchor:()=>{},collectLink:()=>{}}),a=()=>(0,r.useContext)(o);function i(){return a()}},8264:(e,n,t)=>{"use strict";t.d(n,{c:()=>a});var r=t(1504),o=t(136);function a(){return(0,r.useContext)(o.e)}},3160:(e,n,t)=>{"use strict";t.d(n,{MP:()=>i,mm:()=>a});var r=t(8264),o=t(2488);function a(e,n){void 0===n&&(n={});const t=function(){const{globalData:e}=(0,r.c)();return e}()[e];if(!t&&n.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin.`);return t}function i(e,n,t){void 0===n&&(n=o.M),void 0===t&&(t={});const r=a(e),i=r?.[n];if(!i&&t.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin with id "${n}".`);return i}},3664:(e,n,t)=>{"use strict";t.d(n,{c:()=>a});var r=t(1504),o=t(240);function a(){return(0,r.useContext)(o.e)}},5288:(e,n,t)=>{"use strict";t.d(n,{c:()=>o});var r=t(1504);const o=t(8684).c.canUseDOM?r.useLayoutEffect:r.useEffect},8120:(e,n,t)=>{"use strict";t.d(n,{c:()=>o});const r=e=>"object"==typeof e&&!!e&&Object.keys(e).length>0;function o(e){const n={};return function e(t,o){Object.entries(t).forEach((t=>{let[a,i]=t;const s=o?`${o}.${a}`:a;r(i)?e(i,s):n[s]=i}))}(e),n}},5548:(e,n,t)=>{"use strict";t.d(n,{Y:()=>i,e:()=>a});var r=t(1504),o=t(7624);const a=r.createContext(null);function i(e){let{children:n,value:t}=e;const i=r.useContext(a),s=(0,r.useMemo)((()=>function(e){let{parent:n,value:t}=e;if(!n){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 r={...n.data,...t?.data};return{plugin:n.plugin,data:r}}({parent:i,value:t})),[i,t]);return(0,o.jsx)(a.Provider,{value:s,children:n})}},5172:(e,n,t)=>{"use strict";t.d(n,{wB:()=>g,UF:()=>d,mU:()=>p,L0:()=>c,i8:()=>h,OK:()=>u,aA:()=>m,gN:()=>f});var r=t(5592),o=t(3160);const a=e=>e.versions.find((e=>e.isLast));function i(e,n){const t=a(e);return[...e.versions.filter((e=>e!==t)),t].find((e=>!!(0,r.ot)(n,{path:e.path,exact:!1,strict:!1})))}function s(e,n){const t=i(e,n),o=t?.docs.find((e=>!!(0,r.ot)(n,{path:e.path,exact:!0,strict:!1})));return{activeVersion:t,activeDoc:o,alternateDocVersions:o?function(n){const t={};return e.versions.forEach((e=>{e.docs.forEach((r=>{r.id===n&&(t[e.name]=r)}))})),t}(o.id):{}}}const l={},c=()=>(0,o.mm)("docusaurus-plugin-content-docs")??l,u=e=>(0,o.MP)("docusaurus-plugin-content-docs",e,{failfast:!0});function d(e){void 0===e&&(e={});const n=c(),{pathname:t}=(0,r.IT)();return function(e,n,t){void 0===t&&(t={});const o=Object.entries(e).sort(((e,n)=>n[1].path.localeCompare(e[1].path))).find((e=>{let[,t]=e;return!!(0,r.ot)(n,{path:t.path,exact:!1,strict:!1})})),a=o?{pluginId:o[0],pluginData:o[1]}:void 0;if(!a&&t.failfast)throw new Error(`Can't find active docs plugin for "${n}" 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 a}(n,t,e)}function p(e){void 0===e&&(e={});const n=d(e),{pathname:t}=(0,r.IT)();if(!n)return;return{activePlugin:n,activeVersion:i(n.pluginData,t)}}function f(e){return u(e).versions}function m(e){const n=u(e);return a(n)}function g(e){const n=u(e),{pathname:t}=(0,r.IT)();return s(n,t)}function h(e){const n=u(e),{pathname:t}=(0,r.IT)();return function(e,n){const t=a(e);return{latestDocSuggestion:s(e,n).alternateDocVersions[t.name],latestVersionSuggestion:t}}(n,t)}},7483:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>r});const r={onRouteDidUpdate(e){let{location:n,previousLocation:t}=e;!t||n.pathname===t.pathname&&n.search===t.search&&n.hash===t.hash||setTimeout((()=>{window.gtag("set","page_path",n.pathname+n.search+n.hash),window.gtag("event","page_view")}))}}},1976:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>a});var r=t(2272),o=t.n(r);o().configure({showSpinner:!1});const a={onRouteUpdate(e){let{location:n,previousLocation:t}=e;if(t&&n.pathname!==t.pathname){const e=window.setTimeout((()=>{o().start()}),200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){o().done()}}},5396:(e,n,t)=>{"use strict";t.r(n);var r=t(5720),o=t(7768);!function(e){const{themeConfig:{prism:n}}=o.default,{additionalLanguages:r}=n;globalThis.Prism=e,r.forEach((e=>{"php"===e&&t(1808),t(4096)(`./prism-${e}`)})),delete globalThis.Prism}(r.sp)},6448:(e,n,t)=>{"use strict";t.d(n,{c:()=>u});t(1504);var r=t(5456),o=t(4357),a=t(1824),i=t(867),s=t(5976);const l={anchorWithStickyNavbar:"anchorWithStickyNavbar_LWe7",anchorWithHideOnScrollNavbar:"anchorWithHideOnScrollNavbar_WYt5"};var c=t(7624);function u(e){let{as:n,id:t,...u}=e;const d=(0,s.c)(),{navbar:{hideOnScroll:p}}=(0,a.y)();if("h1"===n||!t)return(0,c.jsx)(n,{...u,id:void 0});d.collectAnchor(t);const f=(0,o.G)({id:"theme.common.headingLinkTitle",message:"Direct link to {heading}",description:"Title for link to heading"},{heading:"string"==typeof u.children?u.children:t});return(0,c.jsxs)(n,{...u,className:(0,r.c)("anchor",p?l.anchorWithHideOnScrollNavbar:l.anchorWithStickyNavbar,u.className),id:t,children:[u.children,(0,c.jsx)(i.c,{className:"hash-link",to:`#${t}`,"aria-label":f,title:f,children:"\u200b"})]})}},3232:(e,n,t)=>{"use strict";t.d(n,{c:()=>a});t(1504);const r={iconExternalLink:"iconExternalLink_nPIU"};var o=t(7624);function a(e){let{width:n=13.5,height:t=13.5}=e;return(0,o.jsx)("svg",{width:n,height:t,"aria-hidden":"true",viewBox:"0 0 24 24",className:r.iconExternalLink,children:(0,o.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"})})}},7468:(e,n,t)=>{"use strict";t.d(n,{c:()=>Nn});var r=t(1504),o=t(5456),a=t(5852),i=t(5008),s=t(5592),l=t(4357),c=t(7124),u=t(7624);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:n}=(0,s.Uz)(),t=(0,r.useCallback)((e=>{e.preventDefault();const n=document.querySelector("main:first-of-type")??document.getElementById(d);n&&p(n)}),[]);return(0,c.c)((t=>{let{location:r}=t;e.current&&!r.hash&&"PUSH"===n&&p(e.current)})),{containerRef:e,onClick:t}}const m=(0,l.G)({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 g(e){const n=e.children??m,{containerRef:t,onClick:r}=f();return(0,u.jsx)("div",{ref:t,role:"region","aria-label":m,children:(0,u.jsx)("a",{...e,href:`#${d}`,onClick:r,children:n})})}var h=t(5864),y=t(204);const b={skipToContent:"skipToContent_fXgn"};function v(){return(0,u.jsx)(g,{className:b.skipToContent})}var S=t(1824),w=t(3868);function x(e){let{width:n=21,height:t=21,color:r="currentColor",strokeWidth:o=1.2,className:a,...i}=e;return(0,u.jsx)("svg",{viewBox:"0 0 15 15",width:n,height:t,...i,children:(0,u.jsx)("g",{stroke:r,strokeWidth:o,children:(0,u.jsx)("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})})})}const k={closeButton:"closeButton_CVFx"};function T(e){return(0,u.jsx)("button",{type:"button","aria-label":(0,l.G)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"}),...e,className:(0,o.c)("clean-btn close",k.closeButton,e.className),children:(0,u.jsx)(x,{width:14,height:14,strokeWidth:3.1})})}const E={content:"content_knG7"};function C(e){const{announcementBar:n}=(0,S.y)(),{content:t}=n;return(0,u.jsx)("div",{...e,className:(0,o.c)(E.content,e.className),dangerouslySetInnerHTML:{__html:t}})}const _={announcementBar:"announcementBar_mb4j",announcementBarPlaceholder:"announcementBarPlaceholder_vyr4",announcementBarClose:"announcementBarClose_gvF7",announcementBarContent:"announcementBarContent_xLdY"};function A(){const{announcementBar:e}=(0,S.y)(),{isActive:n,close:t}=(0,w.el)();if(!n)return null;const{backgroundColor:r,textColor:o,isCloseable:a}=e;return(0,u.jsxs)("div",{className:_.announcementBar,style:{backgroundColor:r,color:o},role:"banner",children:[a&&(0,u.jsx)("div",{className:_.announcementBarPlaceholder}),(0,u.jsx)(C,{className:_.announcementBarContent}),a&&(0,u.jsx)(T,{onClick:t,className:_.announcementBarClose})]})}var I=t(8200),P=t(3943);var L=t(1100),R=t(5168);const N=r.createContext(null);function O(e){let{children:n}=e;const t=function(){const e=(0,I.q)(),n=(0,R.MF)(),[t,o]=(0,r.useState)(!1),a=null!==n.component,i=(0,L.i0)(a);return(0,r.useEffect)((()=>{a&&!i&&o(!0)}),[a,i]),(0,r.useEffect)((()=>{a?e.shown||o(!0):o(!1)}),[e.shown,a]),(0,r.useMemo)((()=>[t,o]),[t])}();return(0,u.jsx)(N.Provider,{value:t,children:n})}function F(e){if(e.component){const n=e.component;return(0,u.jsx)(n,{...e.props})}}function j(){const e=(0,r.useContext)(N);if(!e)throw new L.AH("NavbarSecondaryMenuDisplayProvider");const[n,t]=e,o=(0,r.useCallback)((()=>t(!1)),[t]),a=(0,R.MF)();return(0,r.useMemo)((()=>({shown:n,hide:o,content:F(a)})),[o,a,n])}function D(e){let{header:n,primaryMenu:t,secondaryMenu:r}=e;const{shown:a}=j();return(0,u.jsxs)("div",{className:"navbar-sidebar",children:[n,(0,u.jsxs)("div",{className:(0,o.c)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":a}),children:[(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:t}),(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:r})]})]})}var M=t(6528),B=t(3664);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:"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 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:"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 V={toggle:"toggle_vylO",toggleButton:"toggleButton_gllP",darkToggleIcon:"darkToggleIcon_wfgR",lightToggleIcon:"lightToggleIcon_pyhR",toggleButtonDisabled:"toggleButtonDisabled_aARS"};function z(e){let{className:n,buttonClassName:t,value:r,onChange:a}=e;const i=(0,B.c)(),s=(0,l.G)({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,l.G)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,l.G)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return(0,u.jsx)("div",{className:(0,o.c)(V.toggle,n),children:(0,u.jsxs)("button",{className:(0,o.c)("clean-btn",V.toggleButton,!i&&V.toggleButtonDisabled,t),type:"button",onClick:()=>a("dark"===r?"light":"dark"),disabled:!i,title:s,"aria-label":s,"aria-live":"polite",children:[(0,u.jsx)($,{className:(0,o.c)(V.toggleIcon,V.lightToggleIcon)}),(0,u.jsx)(U,{className:(0,o.c)(V.toggleIcon,V.darkToggleIcon)})]})})}const H=r.memo(z),W={darkNavbarColorModeToggle:"darkNavbarColorModeToggle_X3D1"};function G(e){let{className:n}=e;const t=(0,S.y)().navbar.style,r=(0,S.y)().colorMode.disableSwitch,{colorMode:o,setColorMode:a}=(0,M.U)();return r?null:(0,u.jsx)(H,{className:n,buttonClassName:"dark"===t?W.darkNavbarColorModeToggle:void 0,value:o,onChange:a})}var q=t(8164);function Y(){return(0,u.jsx)(q.c,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function K(){const e=(0,I.q)();return(0,u.jsx)("button",{type:"button","aria-label":(0,l.G)({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)(x,{color:"var(--ifm-color-emphasis-600)"})})}function X(){return(0,u.jsxs)("div",{className:"navbar-sidebar__brand",children:[(0,u.jsx)(Y,{}),(0,u.jsx)(G,{className:"margin-right--md"}),(0,u.jsx)(K,{})]})}var Q=t(867),Z=t(964),J=t(8136),ee=t(1064),ne=t(3232);function te(e){let{activeBasePath:n,activeBaseRegex:t,to:r,href:o,label:a,html:i,isDropdownLink:s,prependBaseUrlToHref:l,...c}=e;const d=(0,Z.c)(r),p=(0,Z.c)(n),f=(0,Z.c)(o,{forcePrependBaseUrl:!0}),m=a&&o&&!(0,J.c)(o),g=i?{dangerouslySetInnerHTML:{__html:i}}:{children:(0,u.jsxs)(u.Fragment,{children:[a,m&&(0,u.jsx)(ne.c,{...s&&{width:12,height:12}})]})};return o?(0,u.jsx)(Q.c,{href:l?f:o,...c,...g}):(0,u.jsx)(Q.c,{to:d,isNavLink:!0,...(n||t)&&{isActive:(e,n)=>t?(0,ee._)(t,n.pathname):n.pathname.startsWith(p)},...c,...g})}function re(e){let{className:n,isDropdownItem:t=!1,...r}=e;const a=(0,u.jsx)(te,{className:(0,o.c)(t?"dropdown__link":"navbar__item navbar__link",n),isDropdownLink:t,...r});return t?(0,u.jsx)("li",{children:a}):a}function oe(e){let{className:n,isDropdownItem:t,...r}=e;return(0,u.jsx)("li",{className:"menu__list-item",children:(0,u.jsx)(te,{className:(0,o.c)("menu__link",n),...r})})}function ae(e){let{mobile:n=!1,position:t,...r}=e;const o=n?oe:re;return(0,u.jsx)(o,{...r,activeClassName:r.activeClassName??(n?"menu__link--active":"navbar__link--active")})}var ie=t(8448),se=t(3376),le=t(8264);const ce={dropdownNavbarItemMobile:"dropdownNavbarItemMobile_S0Fm"};function ue(e,n){return e.some((e=>function(e,n){return!!(0,se.Sc)(e.to,n)||!!(0,ee._)(e.activeBaseRegex,n)||!(!e.activeBasePath||!n.startsWith(e.activeBasePath))}(e,n)))}function de(e){let{items:n,position:t,className:a,onClick:i,...s}=e;const l=(0,r.useRef)(null),[c,d]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{const e=e=>{l.current&&!l.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)}}),[l]),(0,u.jsxs)("div",{ref:l,className:(0,o.c)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===t,"dropdown--show":c}),children:[(0,u.jsx)(te,{"aria-haspopup":"true","aria-expanded":c,role:"button",href:s.to?void 0:"#",className:(0,o.c)("navbar__link",a),...s,onClick:s.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),d(!c))},children:s.children??s.label}),(0,u.jsx)("ul",{className:"dropdown__menu",children:n.map(((e,n)=>(0,r.createElement)(He,{isDropdownItem:!0,activeClassName:"dropdown__link--active",...e,key:n})))})]})}function pe(e){let{items:n,className:t,position:a,onClick:i,...l}=e;const c=function(){const{siteConfig:{baseUrl:e}}=(0,le.c)(),{pathname:n}=(0,s.IT)();return n.replace(e,"/")}(),d=ue(n,c),{collapsed:p,toggleCollapsed:f,setCollapsed:m}=(0,ie.a)({initialState:()=>!d});return(0,r.useEffect)((()=>{d&&m(!d)}),[c,d,m]),(0,u.jsxs)("li",{className:(0,o.c)("menu__list-item",{"menu__list-item--collapsed":p}),children:[(0,u.jsx)(te,{role:"button",className:(0,o.c)(ce.dropdownNavbarItemMobile,"menu__link menu__link--sublist menu__link--sublist-caret",t),...l,onClick:e=>{e.preventDefault(),f()},children:l.children??l.label}),(0,u.jsx)(ie.U,{lazy:!0,as:"ul",className:"menu__list",collapsed:p,children:n.map(((e,n)=>(0,r.createElement)(He,{mobile:!0,isDropdownItem:!0,onClick:i,activeClassName:"menu__link--active",...e,key:n})))})]})}function fe(e){let{mobile:n=!1,...t}=e;const r=n?pe:de;return(0,u.jsx)(r,{...t})}var me=t(1616);function ge(e){let{width:n=20,height:t=20,...r}=e;return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:n,height:t,"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 he="iconLanguage_nlXk";var ye=t(7104);function be(){return r.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},r.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}var ve=t(5052),Se=["translations"];function we(){return we=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},we.apply(this,arguments)}function xe(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var r,o,a=[],i=!0,s=!1;try{for(t=t.call(e);!(i=(r=t.next()).done)&&(a.push(r.value),!n||a.length!==n);i=!0);}catch(l){s=!0,o=l}finally{try{i||null==t.return||t.return()}finally{if(s)throw o}}return a}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return ke(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return ke(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function ke(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function Te(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var Ee="Ctrl";var Ce=r.forwardRef((function(e,n){var t=e.translations,o=void 0===t?{}:t,a=Te(e,Se),i=o.buttonText,s=void 0===i?"Search":i,l=o.buttonAriaLabel,c=void 0===l?"Search":l,u=xe((0,r.useState)(null),2),d=u[0],p=u[1];return(0,r.useEffect)((function(){"undefined"!=typeof navigator&&(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?p("\u2318"):p(Ee))}),[]),r.createElement("button",we({type:"button",className:"DocSearch DocSearch-Button","aria-label":c},a,{ref:n}),r.createElement("span",{className:"DocSearch-Button-Container"},r.createElement(ve.I,null),r.createElement("span",{className:"DocSearch-Button-Placeholder"},s)),r.createElement("span",{className:"DocSearch-Button-Keys"},null!==d&&r.createElement(r.Fragment,null,r.createElement("kbd",{className:"DocSearch-Button-Key"},d===Ee?r.createElement(be,null):d),r.createElement("kbd",{className:"DocSearch-Button-Key"},"K"))))})),_e=t(6952),Ae=t(7092),Ie=t(9032),Pe=t(4456);const Le={button:{buttonText:(0,l.G)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"}),buttonAriaLabel:(0,l.G)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"})},modal:{searchBox:{resetButtonTitle:(0,l.G)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),resetButtonAriaLabel:(0,l.G)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),cancelButtonText:(0,l.G)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"}),cancelButtonAriaLabel:(0,l.G)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"})},startScreen:{recentSearchesTitle:(0,l.G)({id:"theme.SearchModal.startScreen.recentSearchesTitle",message:"Recent",description:"The title for recent searches"}),noRecentSearchesText:(0,l.G)({id:"theme.SearchModal.startScreen.noRecentSearchesText",message:"No recent searches",description:"The text when no recent searches"}),saveRecentSearchButtonTitle:(0,l.G)({id:"theme.SearchModal.startScreen.saveRecentSearchButtonTitle",message:"Save this search",description:"The label for save recent search button"}),removeRecentSearchButtonTitle:(0,l.G)({id:"theme.SearchModal.startScreen.removeRecentSearchButtonTitle",message:"Remove this search from history",description:"The label for remove recent search button"}),favoriteSearchesTitle:(0,l.G)({id:"theme.SearchModal.startScreen.favoriteSearchesTitle",message:"Favorite",description:"The title for favorite searches"}),removeFavoriteSearchButtonTitle:(0,l.G)({id:"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle",message:"Remove this search from favorites",description:"The label for remove favorite search button"})},errorScreen:{titleText:(0,l.G)({id:"theme.SearchModal.errorScreen.titleText",message:"Unable to fetch results",description:"The title for error screen of search modal"}),helpText:(0,l.G)({id:"theme.SearchModal.errorScreen.helpText",message:"You might want to check your network connection.",description:"The help text for error screen of search modal"})},footer:{selectText:(0,l.G)({id:"theme.SearchModal.footer.selectText",message:"to select",description:"The explanatory text of the action for the enter key"}),selectKeyAriaLabel:(0,l.G)({id:"theme.SearchModal.footer.selectKeyAriaLabel",message:"Enter key",description:"The ARIA label for the Enter key button that makes the selection"}),navigateText:(0,l.G)({id:"theme.SearchModal.footer.navigateText",message:"to navigate",description:"The explanatory text of the action for the Arrow up and Arrow down key"}),navigateUpKeyAriaLabel:(0,l.G)({id:"theme.SearchModal.footer.navigateUpKeyAriaLabel",message:"Arrow up",description:"The ARIA label for the Arrow up key button that makes the navigation"}),navigateDownKeyAriaLabel:(0,l.G)({id:"theme.SearchModal.footer.navigateDownKeyAriaLabel",message:"Arrow down",description:"The ARIA label for the Arrow down key button that makes the navigation"}),closeText:(0,l.G)({id:"theme.SearchModal.footer.closeText",message:"to close",description:"The explanatory text of the action for Escape key"}),closeKeyAriaLabel:(0,l.G)({id:"theme.SearchModal.footer.closeKeyAriaLabel",message:"Escape key",description:"The ARIA label for the Escape key button that close the modal"}),searchByText:(0,l.G)({id:"theme.SearchModal.footer.searchByText",message:"Search by",description:"The text explain that the search is making by Algolia"})},noResultsScreen:{noResultsText:(0,l.G)({id:"theme.SearchModal.noResultsScreen.noResultsText",message:"No results for",description:"The text explains that there are no results for the following search"}),suggestedQueryText:(0,l.G)({id:"theme.SearchModal.noResultsScreen.suggestedQueryText",message:"Try searching for",description:"The text for the suggested query when no results are found for the following search"}),reportMissingResultsText:(0,l.G)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsText",message:"Believe this query should return results?",description:"The text for the question where the user thinks there are missing results"}),reportMissingResultsLinkText:(0,l.G)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText",message:"Let us know.",description:"The text for the link to report missing results"})}},placeholder:(0,l.G)({id:"theme.SearchModal.placeholder",message:"Search docs",description:"The placeholder of the input of the DocSearch pop-up modal"})};let Re=null;function Ne(e){let{hit:n,children:t}=e;return(0,u.jsx)(Q.c,{to:n.url,children:t})}function Oe(e){let{state:n,onClose:t}=e;const r=(0,Ae.Y)();return(0,u.jsx)(Q.c,{to:r(n.query),onClick:t,children:(0,u.jsx)(l.c,{id:"theme.SearchBar.seeAll",values:{count:n.context.nbHits},children:"See all {count} results"})})}function Fe(e){let{contextualSearch:n,externalUrlRegex:o,...a}=e;const{siteMetadata:i}=(0,le.c)(),l=(0,Ie.Q)(),c=function(){const{locale:e,tags:n}=(0,Pe.mY)();return[`language:${e}`,n.map((e=>`docusaurus_tag:${e}`))]}(),d=a.searchParameters?.facetFilters??[],p=n?function(e,n){const t=e=>"string"==typeof e?[e]:e;return[...t(e),...t(n)]}(c,d):d,f={...a.searchParameters,facetFilters:p},m=(0,s.Uz)(),g=(0,r.useRef)(null),h=(0,r.useRef)(null),[y,b]=(0,r.useState)(!1),[v,S]=(0,r.useState)(void 0),w=(0,r.useCallback)((()=>Re?Promise.resolve():Promise.all([t.e(2528).then(t.bind(t,148)),Promise.all([t.e(2176),t.e(1676)]).then(t.bind(t,1676)),Promise.all([t.e(2176),t.e(8879)]).then(t.bind(t,8879))]).then((e=>{let[{DocSearchModal:n}]=e;Re=n}))),[]),x=(0,r.useCallback)((()=>{w().then((()=>{g.current=document.createElement("div"),document.body.insertBefore(g.current,document.body.firstChild),b(!0)}))}),[w,b]),k=(0,r.useCallback)((()=>{b(!1),g.current?.remove()}),[b]),T=(0,r.useCallback)((e=>{w().then((()=>{b(!0),S(e.key)}))}),[w,b,S]),E=(0,r.useRef)({navigate(e){let{itemUrl:n}=e;(0,ee._)(o,n)?window.location.href=n:m.push(n)}}).current,C=(0,r.useRef)((e=>a.transformItems?a.transformItems(e):e.map((e=>({...e,url:l(e.url)}))))).current,_=(0,r.useMemo)((()=>e=>(0,u.jsx)(Oe,{...e,onClose:k})),[k]),A=(0,r.useCallback)((e=>(e.addAlgoliaAgent("docusaurus",i.docusaurusVersion),e)),[i.docusaurusVersion]);return function(e){var n=e.isOpen,t=e.onOpen,o=e.onClose,a=e.onInput,i=e.searchButtonRef;r.useEffect((function(){function e(e){var r;(27===e.keyCode&&n||"k"===(null===(r=e.key)||void 0===r?void 0:r.toLowerCase())&&(e.metaKey||e.ctrlKey)||!function(e){var n=e.target,t=n.tagName;return n.isContentEditable||"INPUT"===t||"SELECT"===t||"TEXTAREA"===t}(e)&&"/"===e.key&&!n)&&(e.preventDefault(),n?o():document.body.classList.contains("DocSearch--active")||document.body.classList.contains("DocSearch--active")||t()),i&&i.current===document.activeElement&&a&&/[a-zA-Z0-9]/.test(String.fromCharCode(e.keyCode))&&a(e)}return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}}),[n,t,o,a,i])}({isOpen:y,onOpen:x,onClose:k,onInput:T,searchButtonRef:h}),(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(_e.c,{children:(0,u.jsx)("link",{rel:"preconnect",href:`https://${a.appId}-dsn.algolia.net`,crossOrigin:"anonymous"})}),(0,u.jsx)(Ce,{onTouchStart:w,onFocus:w,onMouseOver:w,onClick:x,ref:h,translations:Le.button}),y&&Re&&g.current&&(0,ye.createPortal)((0,u.jsx)(Re,{onClose:k,initialScrollY:window.scrollY,initialQuery:v,navigator:E,transformItems:C,hitComponent:Ne,transformSearchClient:A,...a.searchPagePath&&{resultsFooterComponent:_},...a,searchParameters:f,placeholder:Le.placeholder,translations:Le.modal}),g.current)]})}function je(){const{siteConfig:e}=(0,le.c)();return(0,u.jsx)(Fe,{...e.themeConfig.algolia})}const De={navbarSearchContainer:"navbarSearchContainer_Bca1"};function Me(e){let{children:n,className:t}=e;return(0,u.jsx)("div",{className:(0,o.c)(t,De.navbarSearchContainer),children:n})}var Be=t(5172),$e=t(9940);var Ue=t(4592);const Ve=e=>e.docs.find((n=>n.id===e.mainDocId));const ze={default:ae,localeDropdown:function(e){let{mobile:n,dropdownItemsBefore:t,dropdownItemsAfter:r,queryString:o="",...a}=e;const{i18n:{currentLocale:i,locales:c,localeConfigs:d}}=(0,le.c)(),p=(0,me.D)(),{search:f,hash:m}=(0,s.IT)(),g=[...t,...c.map((e=>{const t=`${`pathname://${p.createUrl({locale:e,fullyQualified:!1})}`}${f}${m}${o}`;return{label:d[e].label,lang:d[e].htmlLang,to:t,target:"_self",autoAddBaseUrl:!1,className:e===i?n?"menu__link--active":"dropdown__link--active":""}})),...r],h=n?(0,l.G)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):d[i].label;return(0,u.jsx)(fe,{...a,mobile:n,label:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(ge,{className:he}),h]}),items:g})},search:function(e){let{mobile:n,className:t}=e;return n?null:(0,u.jsx)(Me,{className:t,children:(0,u.jsx)(je,{})})},dropdown:fe,html:function(e){let{value:n,className:t,mobile:r=!1,isDropdownItem:a=!1}=e;const i=a?"li":"div";return(0,u.jsx)(i,{className:(0,o.c)({navbar__item:!r&&!a,"menu__list-item":r},t),dangerouslySetInnerHTML:{__html:n}})},doc:function(e){let{docId:n,label:t,docsPluginId:r,...o}=e;const{activeDoc:a}=(0,Be.wB)(r),i=(0,$e.Qf)(n,r),s=a?.path===i?.path;return null===i||i.unlisted&&!s?null:(0,u.jsx)(ae,{exact:!0,...o,isActive:()=>s||!!a?.sidebar&&a.sidebar===i.sidebar,label:t??i.id,to:i.path})},docSidebar:function(e){let{sidebarId:n,label:t,docsPluginId:r,...o}=e;const{activeDoc:a}=(0,Be.wB)(r),i=(0,$e.Ab)(n,r).link;if(!i)throw new Error(`DocSidebarNavbarItem: Sidebar with ID "${n}" doesn't have anything to be linked to.`);return(0,u.jsx)(ae,{exact:!0,...o,isActive:()=>a?.sidebar===n,label:t??i.label,to:i.path})},docsVersion:function(e){let{label:n,to:t,docsPluginId:r,...o}=e;const a=(0,$e.b7)(r)[0],i=n??a.label,s=t??(e=>e.docs.find((n=>n.id===e.mainDocId)))(a).path;return(0,u.jsx)(ae,{...o,label:i,to:s})},docsVersionDropdown:function(e){let{mobile:n,docsPluginId:t,dropdownActiveClassDisabled:r,dropdownItemsBefore:o,dropdownItemsAfter:a,...i}=e;const{search:c,hash:d}=(0,s.IT)(),p=(0,Be.wB)(t),f=(0,Be.gN)(t),{savePreferredVersionName:m}=(0,Ue.iy)(t),g=[...o,...f.map((e=>{const n=p.alternateDocVersions[e.name]??Ve(e);return{label:e.label,to:`${n.path}${c}${d}`,isActive:()=>e===p.activeVersion,onClick:()=>m(e.name)}})),...a],h=(0,$e.b7)(t)[0],y=n&&g.length>1?(0,l.G)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):h.label,b=n&&g.length>1?void 0:Ve(h).path;return g.length<=1?(0,u.jsx)(ae,{...i,mobile:n,label:y,to:b,isActive:r?()=>!1:void 0}):(0,u.jsx)(fe,{...i,mobile:n,label:y,to:b,items:g,isActive:r?()=>!1:void 0})}};function He(e){let{type:n,...t}=e;const r=function(e,n){return e&&"default"!==e?e:"items"in n?"dropdown":"default"}(n,t),o=ze[r];if(!o)throw new Error(`No NavbarItem component found for type "${n}".`);return(0,u.jsx)(o,{...t})}function We(){const e=(0,I.q)(),n=(0,S.y)().navbar.items;return(0,u.jsx)("ul",{className:"menu__list",children:n.map(((n,t)=>(0,r.createElement)(He,{mobile:!0,...n,onClick:()=>e.toggle(),key:t})))})}function Ge(e){return(0,u.jsx)("button",{...e,type:"button",className:"clean-btn navbar-sidebar__back",children:(0,u.jsx)(l.c,{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 qe(){const e=0===(0,S.y)().navbar.items.length,n=j();return(0,u.jsxs)(u.Fragment,{children:[!e&&(0,u.jsx)(Ge,{onClick:()=>n.hide()}),n.content]})}function Ye(){const e=(0,I.q)();var n;return void 0===(n=e.shown)&&(n=!0),(0,r.useEffect)((()=>(document.body.style.overflow=n?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[n]),e.shouldRender?(0,u.jsx)(D,{header:(0,u.jsx)(X,{}),primaryMenu:(0,u.jsx)(We,{}),secondaryMenu:(0,u.jsx)(qe,{})}):null}const Ke={navbarHideable:"navbarHideable_m1mJ",navbarHidden:"navbarHidden_jGov"};function Xe(e){return(0,u.jsx)("div",{role:"presentation",...e,className:(0,o.c)("navbar-sidebar__backdrop",e.className)})}function Qe(e){let{children:n}=e;const{navbar:{hideOnScroll:t,style:a}}=(0,S.y)(),i=(0,I.q)(),{navbarRef:s,isNavbarVisible:d}=function(e){const[n,t]=(0,r.useState)(e),o=(0,r.useRef)(!1),a=(0,r.useRef)(0),i=(0,r.useCallback)((e=>{null!==e&&(a.current=e.getBoundingClientRect().height)}),[]);return(0,P.SM)(((n,r)=>{let{scrollY:i}=n;if(!e)return;if(i<a.current)return void t(!0);if(o.current)return void(o.current=!1);const s=r?.scrollY,l=document.documentElement.scrollHeight-a.current,c=window.innerHeight;s&&i>=s?t(!1):i+c<l&&t(!0)})),(0,c.c)((n=>{if(!e)return;const r=n.location.hash;if(r?document.getElementById(r.substring(1)):void 0)return o.current=!0,void t(!1);t(!0)})),{navbarRef:i,isNavbarVisible:n}}(t);return(0,u.jsxs)("nav",{ref:s,"aria-label":(0,l.G)({id:"theme.NavBar.navAriaLabel",message:"Main",description:"The ARIA label for the main navigation"}),className:(0,o.c)("navbar","navbar--fixed-top",t&&[Ke.navbarHideable,!d&&Ke.navbarHidden],{"navbar--dark":"dark"===a,"navbar--primary":"primary"===a,"navbar-sidebar--show":i.shown}),children:[n,(0,u.jsx)(Xe,{onClick:i.toggle}),(0,u.jsx)(Ye,{})]})}var Ze=t(5684);const Je={errorBoundaryError:"errorBoundaryError_a6uf",errorBoundaryFallback:"errorBoundaryFallback_VBag"};function en(e){return(0,u.jsx)("button",{type:"button",...e,children:(0,u.jsx)(l.c,{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 nn(e){let{error:n}=e;const t=(0,Ze.getErrorCausalChain)(n).map((e=>e.message)).join("\n\nCause:\n");return(0,u.jsx)("p",{className:Je.errorBoundaryError,children:t})}class tn extends r.Component{componentDidCatch(e,n){throw this.props.onError(e,n)}render(){return this.props.children}}const rn="right";function on(e){let{width:n=30,height:t=30,className:r,...o}=e;return(0,u.jsx)("svg",{className:r,width:n,height:t,viewBox:"0 0 30 30","aria-hidden":"true",...o,children:(0,u.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"})})}function an(){const{toggle:e,shown:n}=(0,I.q)();return(0,u.jsx)("button",{onClick:e,"aria-label":(0,l.G)({id:"theme.docs.sidebar.toggleSidebarButtonAriaLabel",message:"Toggle navigation bar",description:"The ARIA label for hamburger menu button of mobile navigation"}),"aria-expanded":n,className:"navbar__toggle clean-btn",type:"button",children:(0,u.jsx)(on,{})})}const sn={colorModeToggle:"colorModeToggle_DEke"};function ln(e){let{items:n}=e;return(0,u.jsx)(u.Fragment,{children:n.map(((e,n)=>(0,u.jsx)(tn,{onError:n=>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:n}),children:(0,u.jsx)(He,{...e})},n)))})}function cn(e){let{left:n,right:t}=e;return(0,u.jsxs)("div",{className:"navbar__inner",children:[(0,u.jsx)("div",{className:"navbar__items",children:n}),(0,u.jsx)("div",{className:"navbar__items navbar__items--right",children:t})]})}function un(){const e=(0,I.q)(),n=(0,S.y)().navbar.items,[t,r]=function(e){function n(e){return"left"===(e.position??rn)}return[e.filter(n),e.filter((e=>!n(e)))]}(n),o=n.find((e=>"search"===e.type));return(0,u.jsx)(cn,{left:(0,u.jsxs)(u.Fragment,{children:[!e.disabled&&(0,u.jsx)(an,{}),(0,u.jsx)(Y,{}),(0,u.jsx)(ln,{items:t})]}),right:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(ln,{items:r}),(0,u.jsx)(G,{className:sn.colorModeToggle}),!o&&(0,u.jsx)(Me,{children:(0,u.jsx)(je,{})})]})})}function dn(){return(0,u.jsx)(Qe,{children:(0,u.jsx)(un,{})})}function pn(e){let{item:n}=e;const{to:t,href:r,label:o,prependBaseUrlToHref:a,...i}=n,s=(0,Z.c)(t),l=(0,Z.c)(r,{forcePrependBaseUrl:!0});return(0,u.jsxs)(Q.c,{className:"footer__link-item",...r?{href:a?l:r}:{to:s},...i,children:[o,r&&!(0,J.c)(r)&&(0,u.jsx)(ne.c,{})]})}function fn(e){let{item:n}=e;return n.html?(0,u.jsx)("li",{className:"footer__item",dangerouslySetInnerHTML:{__html:n.html}}):(0,u.jsx)("li",{className:"footer__item",children:(0,u.jsx)(pn,{item:n})},n.href??n.to)}function mn(e){let{column:n}=e;return(0,u.jsxs)("div",{className:"col footer__col",children:[(0,u.jsx)("div",{className:"footer__title",children:n.title}),(0,u.jsx)("ul",{className:"footer__items clean-list",children:n.items.map(((e,n)=>(0,u.jsx)(fn,{item:e},n)))})]})}function gn(e){let{columns:n}=e;return(0,u.jsx)("div",{className:"row footer__links",children:n.map(((e,n)=>(0,u.jsx)(mn,{column:e},n)))})}function hn(){return(0,u.jsx)("span",{className:"footer__link-separator",children:"\xb7"})}function yn(e){let{item:n}=e;return n.html?(0,u.jsx)("span",{className:"footer__link-item",dangerouslySetInnerHTML:{__html:n.html}}):(0,u.jsx)(pn,{item:n})}function bn(e){let{links:n}=e;return(0,u.jsx)("div",{className:"footer__links text--center",children:(0,u.jsx)("div",{className:"footer__links",children:n.map(((e,t)=>(0,u.jsxs)(r.Fragment,{children:[(0,u.jsx)(yn,{item:e}),n.length!==t+1&&(0,u.jsx)(hn,{})]},t)))})})}function vn(e){let{links:n}=e;return function(e){return"title"in e[0]}(n)?(0,u.jsx)(gn,{columns:n}):(0,u.jsx)(bn,{links:n})}var Sn=t(1964);const wn={footerLogoLink:"footerLogoLink_BH7S"};function xn(e){let{logo:n}=e;const{withBaseUrl:t}=(0,Z.E)(),r={light:t(n.src),dark:t(n.srcDark??n.src)};return(0,u.jsx)(Sn.c,{className:(0,o.c)("footer__logo",n.className),alt:n.alt,sources:r,width:n.width,height:n.height,style:n.style})}function kn(e){let{logo:n}=e;return n.href?(0,u.jsx)(Q.c,{href:n.href,className:wn.footerLogoLink,target:n.target,children:(0,u.jsx)(xn,{logo:n})}):(0,u.jsx)(xn,{logo:n})}function Tn(e){let{copyright:n}=e;return(0,u.jsx)("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:n}})}function En(e){let{style:n,links:t,logo:r,copyright:a}=e;return(0,u.jsx)("footer",{className:(0,o.c)("footer",{"footer--dark":"dark"===n}),children:(0,u.jsxs)("div",{className:"container container-fluid",children:[t,(r||a)&&(0,u.jsxs)("div",{className:"footer__bottom text--center",children:[r&&(0,u.jsx)("div",{className:"margin-bottom--sm",children:r}),a]})]})})}function Cn(){const{footer:e}=(0,S.y)();if(!e)return null;const{copyright:n,links:t,logo:r,style:o}=e;return(0,u.jsx)(En,{style:o,links:t&&t.length>0&&(0,u.jsx)(vn,{links:t}),logo:r&&(0,u.jsx)(kn,{logo:r}),copyright:n&&(0,u.jsx)(Tn,{copyright:n})})}const _n=r.memo(Cn),An=(0,L.qY)([M.C,w.qu,P.S2,Ue.gc,i.w7,function(e){let{children:n}=e;return(0,u.jsx)(R.Ub,{children:(0,u.jsx)(I.y,{children:(0,u.jsx)(O,{children:n})})})}]);function In(e){let{children:n}=e;return(0,u.jsx)(An,{children:n})}var Pn=t(6448);function Ln(e){let{error:n,tryAgain:t}=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)(Pn.c,{as:"h1",className:"hero__title",children:(0,u.jsx)(l.c,{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)(en,{onClick:t,className:"button button--primary shadow--lw"})}),(0,u.jsx)("hr",{}),(0,u.jsx)("div",{className:"margin-vert--md",children:(0,u.jsx)(nn,{error:n})})]})})})}const Rn={mainWrapper:"mainWrapper_z2l0"};function Nn(e){const{children:n,noFooter:t,wrapperClassName:r,title:s,description:l}=e;return(0,y.W)(),(0,u.jsxs)(In,{children:[(0,u.jsx)(i.U7,{title:s,description:l}),(0,u.jsx)(v,{}),(0,u.jsx)(A,{}),(0,u.jsx)(dn,{}),(0,u.jsx)("div",{id:d,className:(0,o.c)(h.W.wrapper.main,Rn.mainWrapper,r),children:(0,u.jsx)(a.c,{fallback:e=>(0,u.jsx)(Ln,{...e}),children:n})}),!t&&(0,u.jsx)(_n,{})]})}},8164:(e,n,t)=>{"use strict";t.d(n,{c:()=>u});t(1504);var r=t(867),o=t(964),a=t(8264),i=t(1824),s=t(1964),l=t(7624);function c(e){let{logo:n,alt:t,imageClassName:r}=e;const a={light:(0,o.c)(n.src),dark:(0,o.c)(n.srcDark||n.src)},i=(0,l.jsx)(s.c,{className:n.className,sources:a,height:n.height,width:n.width,alt:t,style:n.style});return r?(0,l.jsx)("div",{className:r,children:i}):i}function u(e){const{siteConfig:{title:n}}=(0,a.c)(),{navbar:{title:t,logo:s}}=(0,i.y)(),{imageClassName:u,titleClassName:d,...p}=e,f=(0,o.c)(s?.href||"/"),m=t?"":n,g=s?.alt??m;return(0,l.jsxs)(r.c,{to:f,...p,...s?.target&&{target:s.target},children:[s&&(0,l.jsx)(c,{logo:s,alt:g,imageClassName:u}),null!=t&&(0,l.jsx)("b",{className:d,children:t})]})}},8712:(e,n,t)=>{"use strict";t.d(n,{c:()=>a});t(1504);var r=t(6952),o=t(7624);function a(e){let{locale:n,version:t,tag:a}=e;const i=n;return(0,o.jsxs)(r.c,{children:[n&&(0,o.jsx)("meta",{name:"docusaurus_locale",content:n}),t&&(0,o.jsx)("meta",{name:"docusaurus_version",content:t}),a&&(0,o.jsx)("meta",{name:"docusaurus_tag",content:a}),i&&(0,o.jsx)("meta",{name:"docsearch:language",content:i}),t&&(0,o.jsx)("meta",{name:"docsearch:version",content:t}),a&&(0,o.jsx)("meta",{name:"docsearch:docusaurus_tag",content:a})]})}},1964:(e,n,t)=>{"use strict";t.d(n,{c:()=>u});var r=t(1504),o=t(5456),a=t(3664),i=t(6528);const s={themedComponent:"themedComponent_mlkZ","themedComponent--light":"themedComponent--light_NVdE","themedComponent--dark":"themedComponent--dark_xIcU"};var l=t(7624);function c(e){let{className:n,children:t}=e;const c=(0,a.c)(),{colorMode:u}=(0,i.U)();return(0,l.jsx)(l.Fragment,{children:(c?"dark"===u?["dark"]:["light"]:["light","dark"]).map((e=>{const a=t({theme:e,className:(0,o.c)(n,s.themedComponent,s[`themedComponent--${e}`])});return(0,l.jsx)(r.Fragment,{children:a},e)}))})}function u(e){const{sources:n,className:t,alt:r,...o}=e;return(0,l.jsx)(c,{className:t,children:e=>{let{theme:t,className:a}=e;return(0,l.jsx)("img",{src:n[t],alt:r,className:a,...o})}})}},8448:(e,n,t)=>{"use strict";t.d(n,{U:()=>y,a:()=>c});var r=t(1504),o=t(8684),a=t(5288),i=t(3856),s=t(7624);const l="ease-in-out";function c(e){let{initialState:n}=e;const[t,o]=(0,r.useState)(n??!1),a=(0,r.useCallback)((()=>{o((e=>!e))}),[]);return{collapsed:t,setCollapsed:o,toggleCollapsed:a}}const u={display:"none",overflow:"hidden",height:"0px"},d={display:"block",overflow:"visible",height:"auto"};function p(e,n){const t=n?u:d;e.style.display=t.display,e.style.overflow=t.overflow,e.style.height=t.height}function f(e){let{collapsibleRef:n,collapsed:t,animation:o}=e;const a=(0,r.useRef)(!1);(0,r.useEffect)((()=>{const e=n.current;function r(){const n=e.scrollHeight,t=o?.duration??function(e){if((0,i.I)())return 1;const n=e/36;return Math.round(10*(4+15*n**.25+n/5))}(n);return{transition:`height ${t}ms ${o?.easing??l}`,height:`${n}px`}}function s(){const n=r();e.style.transition=n.transition,e.style.height=n.height}if(!a.current)return p(e,t),void(a.current=!0);return e.style.willChange="height",function(){const n=requestAnimationFrame((()=>{t?(s(),requestAnimationFrame((()=>{e.style.height=u.height,e.style.overflow=u.overflow}))):(e.style.display="block",requestAnimationFrame((()=>{s()})))}));return()=>cancelAnimationFrame(n)}()}),[n,t,o])}function m(e){if(!o.c.canUseDOM)return e?u:d}function g(e){let{as:n="div",collapsed:t,children:o,animation:a,onCollapseTransitionEnd:i,className:l,disableSSRStyle:c}=e;const u=(0,r.useRef)(null);return f({collapsibleRef:u,collapsed:t,animation:a}),(0,s.jsx)(n,{ref:u,style:c?void 0:m(t),onTransitionEnd:e=>{"height"===e.propertyName&&(p(u.current,t),i?.(t))},className:l,children:o})}function h(e){let{collapsed:n,...t}=e;const[o,i]=(0,r.useState)(!n),[l,c]=(0,r.useState)(n);return(0,a.c)((()=>{n||i(!0)}),[n]),(0,a.c)((()=>{o&&c(n)}),[o,n]),o?(0,s.jsx)(g,{...t,collapsed:l}):null}function y(e){let{lazy:n,...t}=e;const r=n?h:g;return(0,s.jsx)(r,{...t})}},3868:(e,n,t)=>{"use strict";t.d(n,{el:()=>g,qu:()=>m});var r=t(1504),o=t(3664),a=t(1148),i=t(1100),s=t(1824),l=t(7624);const c=(0,a.GS)("docusaurus.announcement.dismiss"),u=(0,a.GS)("docusaurus.announcement.id"),d=()=>"true"===c.get(),p=e=>c.set(String(e)),f=r.createContext(null);function m(e){let{children:n}=e;const t=function(){const{announcementBar:e}=(0,s.y)(),n=(0,o.c)(),[t,a]=(0,r.useState)((()=>!!n&&d()));(0,r.useEffect)((()=>{a(d())}),[]);const i=(0,r.useCallback)((()=>{p(!0),a(!0)}),[]);return(0,r.useEffect)((()=>{if(!e)return;const{id:n}=e;let t=u.get();"annoucement-bar"===t&&(t="announcement-bar");const r=n!==t;u.set(n),r&&p(!1),!r&&d()||a(!1)}),[e]),(0,r.useMemo)((()=>({isActive:!!e&&!t,close:i})),[e,t,i])}();return(0,l.jsx)(f.Provider,{value:t,children:n})}function g(){const e=(0,r.useContext)(f);if(!e)throw new i.AH("AnnouncementBarProvider");return e}},6528:(e,n,t)=>{"use strict";t.d(n,{C:()=>h,U:()=>y});var r=t(1504),o=t(8684),a=t(1100),i=t(1148),s=t(1824),l=t(7624);const c=r.createContext(void 0),u="theme",d=(0,i.GS)(u),p={light:"light",dark:"dark"},f=e=>e===p.dark?p.dark:p.light,m=e=>o.c.canUseDOM?f(document.documentElement.getAttribute("data-theme")):f(e),g=e=>{d.set(f(e))};function h(e){let{children:n}=e;const t=function(){const{colorMode:{defaultMode:e,disableSwitch:n,respectPrefersColorScheme:t}}=(0,s.y)(),[o,a]=(0,r.useState)(m(e));(0,r.useEffect)((()=>{n&&d.del()}),[n]);const i=(0,r.useCallback)((function(n,r){void 0===r&&(r={});const{persist:o=!0}=r;n?(a(n),o&&g(n)):(a(t?window.matchMedia("(prefers-color-scheme: dark)").matches?p.dark:p.light:e),d.del())}),[t,e]);(0,r.useEffect)((()=>{document.documentElement.setAttribute("data-theme",f(o))}),[o]),(0,r.useEffect)((()=>{if(n)return;const e=e=>{if(e.key!==u)return;const n=d.get();null!==n&&i(f(n))};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)}),[n,i]);const l=(0,r.useRef)(!1);return(0,r.useEffect)((()=>{if(n&&!t)return;const e=window.matchMedia("(prefers-color-scheme: dark)"),r=()=>{window.matchMedia("print").matches||l.current?l.current=window.matchMedia("print").matches:i(null)};return e.addListener(r),()=>e.removeListener(r)}),[i,n,t]),(0,r.useMemo)((()=>({colorMode:o,setColorMode:i,get isDarkTheme(){return o===p.dark},setLightTheme(){i(p.light)},setDarkTheme(){i(p.dark)}})),[o,i])}();return(0,l.jsx)(c.Provider,{value:t,children:n})}function y(){const e=(0,r.useContext)(c);if(null==e)throw new a.AH("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},4592:(e,n,t)=>{"use strict";t.d(n,{eM:()=>S,gc:()=>y,iy:()=>v});var r=t(1504),o=t(5172),a=t(2488),i=t(1824),s=t(9940),l=t(1100),c=t(1148),u=t(7624);const d=e=>`docs-preferred-version-${e}`,p={save:(e,n,t)=>{(0,c.GS)(d(e),{persistence:n}).set(t)},read:(e,n)=>(0,c.GS)(d(e),{persistence:n}).get(),clear:(e,n)=>{(0,c.GS)(d(e),{persistence:n}).del()}},f=e=>Object.fromEntries(e.map((e=>[e,{preferredVersionName:null}])));const m=r.createContext(null);function g(){const e=(0,o.L0)(),n=(0,i.y)().docs.versionPersistence,t=(0,r.useMemo)((()=>Object.keys(e)),[e]),[a,s]=(0,r.useState)((()=>f(t)));(0,r.useEffect)((()=>{s(function(e){let{pluginIds:n,versionPersistence:t,allDocsData:r}=e;function o(e){const n=p.read(e,t);return r[e].versions.some((e=>e.name===n))?{preferredVersionName:n}:(p.clear(e,t),{preferredVersionName:null})}return Object.fromEntries(n.map((e=>[e,o(e)])))}({allDocsData:e,versionPersistence:n,pluginIds:t}))}),[e,n,t]);return[a,(0,r.useMemo)((()=>({savePreferredVersion:function(e,t){p.save(e,n,t),s((n=>({...n,[e]:{preferredVersionName:t}})))}})),[n])]}function h(e){let{children:n}=e;const t=g();return(0,u.jsx)(m.Provider,{value:t,children:n})}function y(e){let{children:n}=e;return s.c1?(0,u.jsx)(h,{children:n}):(0,u.jsx)(u.Fragment,{children:n})}function b(){const e=(0,r.useContext)(m);if(!e)throw new l.AH("DocsPreferredVersionContextProvider");return e}function v(e){void 0===e&&(e=a.M);const n=(0,o.OK)(e),[t,i]=b(),{preferredVersionName:s}=t[e];return{preferredVersion:n.versions.find((e=>e.name===s))??null,savePreferredVersionName:(0,r.useCallback)((n=>{i.savePreferredVersion(e,n)}),[i,e])}}function S(){const e=(0,o.L0)(),[n]=b();function t(t){const r=e[t],{preferredVersionName:o}=n[t];return r.versions.find((e=>e.name===o))??null}const r=Object.keys(e);return Object.fromEntries(r.map((e=>[e,t(e)])))}},6192:(e,n,t)=>{"use strict";t.d(n,{m:()=>c,y:()=>l});var r=t(1504),o=t(1100),a=t(7624);const i=Symbol("EmptyContext"),s=r.createContext(i);function l(e){let{children:n,name:t,items:o}=e;const i=(0,r.useMemo)((()=>t&&o?{name:t,items:o}:null),[t,o]);return(0,a.jsx)(s.Provider,{value:i,children:n})}function c(){const e=(0,r.useContext)(s);if(e===i)throw new o.AH("DocsSidebarProvider");return e}},9920:(e,n,t)=>{"use strict";t.d(n,{E:()=>l,Q:()=>s});var r=t(1504),o=t(1100),a=t(7624);const i=r.createContext(null);function s(e){let{children:n,version:t}=e;return(0,a.jsx)(i.Provider,{value:t,children:n})}function l(){const e=(0,r.useContext)(i);if(null===e)throw new o.AH("DocsVersionProvider");return e}},8200:(e,n,t)=>{"use strict";t.d(n,{q:()=>f,y:()=>p});var r=t(1504),o=t(5168),a=t(1432),i=t(632),s=t(1824),l=t(1100),c=t(7624);const u=r.createContext(void 0);function d(){const e=function(){const e=(0,o.MF)(),{items:n}=(0,s.y)().navbar;return 0===n.length&&!e.component}(),n=(0,a.U)(),t=!e&&"mobile"===n,[l,c]=(0,r.useState)(!1);(0,i.a4)((()=>{if(l)return c(!1),!1}));const u=(0,r.useCallback)((()=>{c((e=>!e))}),[]);return(0,r.useEffect)((()=>{"desktop"===n&&c(!1)}),[n]),(0,r.useMemo)((()=>({disabled:e,shouldRender:t,toggle:u,shown:l})),[e,t,u,l])}function p(e){let{children:n}=e;const t=d();return(0,c.jsx)(u.Provider,{value:t,children:n})}function f(){const e=r.useContext(u);if(void 0===e)throw new l.AH("NavbarMobileSidebarProvider");return e}},5168:(e,n,t)=>{"use strict";t.d(n,{MF:()=>l,Mx:()=>c,Ub:()=>s});var r=t(1504),o=t(1100),a=t(7624);const i=r.createContext(null);function s(e){let{children:n}=e;const t=(0,r.useState)({component:null,props:null});return(0,a.jsx)(i.Provider,{value:t,children:n})}function l(){const e=(0,r.useContext)(i);if(!e)throw new o.AH("NavbarSecondaryMenuContentProvider");return e[0]}function c(e){let{component:n,props:t}=e;const a=(0,r.useContext)(i);if(!a)throw new o.AH("NavbarSecondaryMenuContentProvider");const[,s]=a,l=(0,o.Mh)(t);return(0,r.useEffect)((()=>{s({component:n,props:l})}),[s,n,l]),(0,r.useEffect)((()=>()=>s({component:null,props:null})),[s]),null}},204:(e,n,t)=>{"use strict";t.d(n,{m:()=>o,W:()=>a});var r=t(1504);const o="navigation-with-keyboard";function a(){(0,r.useEffect)((()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(o),"mousedown"===e.type&&document.body.classList.remove(o)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(o),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},7092:(e,n,t)=>{"use strict";t.d(n,{Y:()=>l,a:()=>s});var r=t(1504),o=t(8264),a=t(632);const i="q";function s(){return(0,a.E9)(i)}function l(){const{siteConfig:{baseUrl:e,themeConfig:n}}=(0,o.c)(),{algolia:{searchPagePath:t}}=n;return(0,r.useCallback)((n=>`${e}${t}?${i}=${encodeURIComponent(n)}`),[e,t])}},1432:(e,n,t)=>{"use strict";t.d(n,{U:()=>s});var r=t(1504),o=t(8684);const a={desktop:"desktop",mobile:"mobile",ssr:"ssr"},i=996;function s(e){let{desktopBreakpoint:n=i}=void 0===e?{}:e;const[t,s]=(0,r.useState)((()=>"ssr"));return(0,r.useEffect)((()=>{function e(){s(function(e){if(!o.c.canUseDOM)throw new Error("getWindowSize() should only be called after React hydration");return window.innerWidth>e?a.desktop:a.mobile}(n))}return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[n]),t}},5864:(e,n,t)=>{"use strict";t.d(n,{W:()=>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:{}}},3856:(e,n,t)=>{"use strict";function r(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}t.d(n,{I:()=>r})},9940:(e,n,t)=>{"use strict";t.d(n,{Gw:()=>f,Md:()=>h,c1:()=>p,Uj:()=>T,b7:()=>w,Qf:()=>k,Ab:()=>x,js:()=>S,mg:()=>b});var r=t(1504),o=t(5592),a=t(5464),i=t(5172),s=t(4592),l=t(9920),c=t(6192);function u(e){return Array.from(new Set(e))}var d=t(3376);const p=!!i.L0;function f(e){return"link"!==e.type||e.unlisted?"category"===e.type?function(e){if(e.href&&!e.linkUnlisted)return e.href;for(const n of e.items){const e=f(n);if(e)return e}}(e):void 0:e.href}const m=(e,n)=>void 0!==e&&(0,d.Sc)(e,n),g=(e,n)=>e.some((e=>h(e,n)));function h(e,n){return"link"===e.type?m(e.href,n):"category"===e.type&&(m(e.href,n)||g(e.items,n))}function y(e,n){switch(e.type){case"category":return h(e,n)||e.items.some((e=>y(e,n)));case"link":return!e.unlisted||h(e,n);default:return!0}}function b(e,n){return(0,r.useMemo)((()=>e.filter((e=>y(e,n)))),[e,n])}function v(e){let{sidebarItems:n,pathname:t,onlyCategories:r=!1}=e;const o=[];return function e(n){for(const a of n)if("category"===a.type&&((0,d.Sc)(a.href,t)||e(a.items))||"link"===a.type&&(0,d.Sc)(a.href,t)){return r&&"category"!==a.type||o.unshift(a),!0}return!1}(n),o}function S(){const e=(0,c.m)(),{pathname:n}=(0,o.IT)(),t=(0,i.UF)()?.pluginData.breadcrumbs;return!1!==t&&e?v({sidebarItems:e.items,pathname:n}):null}function w(e){const{activeVersion:n}=(0,i.wB)(e),{preferredVersion:t}=(0,s.iy)(e),o=(0,i.aA)(e);return(0,r.useMemo)((()=>u([n,t,o].filter(Boolean))),[n,t,o])}function x(e,n){const t=w(n);return(0,r.useMemo)((()=>{const n=t.flatMap((e=>e.sidebars?Object.entries(e.sidebars):[])),r=n.find((n=>n[0]===e));if(!r)throw new Error(`Can't find any sidebar with id "${e}" in version${t.length>1?"s":""} ${t.map((e=>e.name)).join(", ")}".\nAvailable sidebar ids are:\n- ${n.map((e=>e[0])).join("\n- ")}`);return r[1]}),[e,t])}function k(e,n){const t=w(n);return(0,r.useMemo)((()=>{const n=t.flatMap((e=>e.docs)),r=n.find((n=>n.id===e));if(!r){if(t.flatMap((e=>e.draftIds)).includes(e))return null;throw new Error(`Couldn't find any doc with id "${e}" in version${t.length>1?"s":""} "${t.map((e=>e.name)).join(", ")}".\nAvailable doc ids are:\n- ${u(n.map((e=>e.id))).join("\n- ")}`)}return r}),[e,t])}function T(e){let{route:n}=e;const t=(0,o.IT)(),r=(0,l.E)(),i=n.routes,s=i.find((e=>(0,o.ot)(t.pathname,e)));if(!s)return null;const c=s.sidebar,u=c?r.docsSidebars[c]:void 0;return{docElement:(0,a.k)(i),sidebarName:c,sidebarItems:u}}},8648:(e,n,t)=>{"use strict";t.d(n,{g:()=>o});var r=t(8264);function o(e){const{siteConfig:n}=(0,r.c)(),{title:t,titleDelimiter:o}=n;return e?.trim().length?`${e.trim()} ${o} ${t}`:t}},632:(e,n,t)=>{"use strict";t.d(n,{E9:()=>l,a4:()=>i});var r=t(1504),o=t(5592),a=t(1100);function i(e){!function(e){const n=(0,o.Uz)(),t=(0,a.yA)(e);(0,r.useEffect)((()=>n.block(((e,n)=>t(e,n)))),[n,t])}(((n,t)=>{if("POP"===t)return e(n,t)}))}function s(e){return function(e){const n=(0,o.Uz)();return(0,r.useSyncExternalStore)(n.listen,(()=>e(n)),(()=>e(n)))}((n=>null===e?null:new URLSearchParams(n.location.search).get(e)))}function l(e){const n=s(e)??"",t=function(){const e=(0,o.Uz)();return(0,r.useCallback)(((n,t,r)=>{const o=new URLSearchParams(e.location.search);t?o.set(n,t):o.delete(n),(r?.push?e.push:e.replace)({search:o.toString()})}),[e])}();return[n,(0,r.useCallback)(((n,r)=>{t(e,n,r)}),[t,e])]}},5008:(e,n,t)=>{"use strict";t.d(n,{cr:()=>f,U7:()=>d,w7:()=>m});var r=t(1504),o=t(5456),a=t(6952),i=t(5548);function s(){const e=r.useContext(i.e);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}var l=t(964),c=t(8648),u=t(7624);function d(e){let{title:n,description:t,keywords:r,image:o,children:i}=e;const s=(0,c.g)(n),{withBaseUrl:d}=(0,l.E)(),p=o?d(o,{absolute:!0}):void 0;return(0,u.jsxs)(a.c,{children:[n&&(0,u.jsx)("title",{children:s}),n&&(0,u.jsx)("meta",{property:"og:title",content:s}),t&&(0,u.jsx)("meta",{name:"description",content:t}),t&&(0,u.jsx)("meta",{property:"og:description",content:t}),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:n,children:t}=e;const i=r.useContext(p),s=(0,o.c)(i,n);return(0,u.jsxs)(p.Provider,{value:s,children:[(0,u.jsx)(a.c,{children:(0,u.jsx)("html",{className:s})}),t]})}function m(e){let{children:n}=e;const t=s(),r=`plugin-${t.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,"")}`;const a=`plugin-id-${t.plugin.id}`;return(0,u.jsx)(f,{className:(0,o.c)(r,a),children:n})}},1100:(e,n,t)=>{"use strict";t.d(n,{AH:()=>l,Mh:()=>c,i0:()=>s,qY:()=>u,yA:()=>i});var r=t(1504),o=t(5288),a=t(7624);function i(e){const n=(0,r.useRef)(e);return(0,o.c)((()=>{n.current=e}),[e]),(0,r.useCallback)((function(){return n.current(...arguments)}),[])}function s(e){const n=(0,r.useRef)();return(0,o.c)((()=>{n.current=e})),n.current}class l extends Error{constructor(e,n){super(),this.name="ReactContextError",this.message=`Hook ${this.stack?.split("\n")[1]?.match(/at (?:\w+\.)?(?<name>\w+)/)?.groups.name??""} is called outside the <${e}>. ${n??""}`}}function c(e){const n=Object.entries(e);return n.sort(((e,n)=>e[0].localeCompare(n[0]))),(0,r.useMemo)((()=>e),n.flat())}function u(e){return n=>{let{children:t}=n;return(0,a.jsx)(a.Fragment,{children:e.reduceRight(((e,n)=>(0,a.jsx)(n,{children:e})),t)})}}},1064:(e,n,t)=>{"use strict";function r(e,n){return void 0!==e&&void 0!==n&&new RegExp(e,"gi").test(n)}t.d(n,{_:()=>r})},3376:(e,n,t)=>{"use strict";t.d(n,{Sc:()=>i,Y5:()=>s});var r=t(1504),o=t(628),a=t(8264);function i(e,n){const t=e=>(!e||e.endsWith("/")?e:`${e}/`)?.toLowerCase();return t(e)===t(n)}function s(){const{baseUrl:e}=(0,a.c)().siteConfig;return(0,r.useMemo)((()=>function(e){let{baseUrl:n,routes:t}=e;function r(e){return e.path===n&&!0===e.exact}function o(e){return e.path===n&&!e.exact}return function e(n){if(0===n.length)return;return n.find(r)||e(n.filter(o).flatMap((e=>e.routes??[])))}(t)}({routes:o.c,baseUrl:e})),[e])}},3943:(e,n,t)=>{"use strict";t.d(n,{S2:()=>c,SM:()=>p,yI:()=>f});var r=t(1504),o=t(8684),a=t(3664),i=(t(5288),t(1100)),s=t(7624);const l=r.createContext(void 0);function c(e){let{children:n}=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)(l.Provider,{value:t,children:n})}function u(){const e=(0,r.useContext)(l);if(null==e)throw new i.AH("ScrollControllerProvider");return e}const d=()=>o.c.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function p(e,n){void 0===n&&(n=[]);const{scrollEventsEnabledRef:t}=u(),o=(0,r.useRef)(d()),a=(0,i.yA)(e);(0,r.useEffect)((()=>{const e=()=>{if(!t.current)return;const e=d();a(e,o.current),o.current=e},n={passive:!0};return e(),window.addEventListener("scroll",e,n),()=>window.removeEventListener("scroll",e,n)}),[a,t,...n])}function f(){const e=(0,r.useRef)(null),n=(0,a.c)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:t=>{e.current=n?function(e){return window.scrollTo({top:e,behavior:"smooth"}),()=>{}}(t):function(e){let n=null;const t=document.documentElement.scrollTop>e;return function r(){const o=document.documentElement.scrollTop;(t&&o>e||!t&&o<e)&&(n=requestAnimationFrame(r),window.scrollTo(0,Math.floor(.85*(o-e))+e))}(),()=>n&&cancelAnimationFrame(n)}(t)},cancelScroll:()=>e.current?.()}}},4456:(e,n,t)=>{"use strict";t.d(n,{SE:()=>s,e6:()=>i,mY:()=>l});var r=t(5172),o=t(8264),a=t(4592);const i="default";function s(e,n){return`docs-${e}-${n}`}function l(){const{i18n:e}=(0,o.c)(),n=(0,r.L0)(),t=(0,r.mU)(),l=(0,a.eM)();const c=[i,...Object.keys(n).map((function(e){const r=t?.activePlugin.pluginId===e?t.activeVersion:void 0,o=l[e],a=n[e].versions.find((e=>e.isLast));return s(e,(r??o??a).name)}))];return{locale:e.currentLocale,tags:c}}},1148:(e,n,t)=>{"use strict";t.d(n,{GS:()=>l});t(1504);const r="localStorage";function o(e){let{key:n,oldValue:t,newValue:r,storage:o}=e;if(t===r)return;const a=document.createEvent("StorageEvent");a.initStorageEvent("storage",!1,!1,n,t,r,window.location.href,o),window.dispatchEvent(a)}function a(e){if(void 0===e&&(e=r),"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(t){return n=t,i||(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.",n),i=!0),null}var n}let i=!1;const s={get:()=>null,set:()=>{},del:()=>{},listen:()=>()=>{}};function l(e,n){if("undefined"==typeof window)return function(e){function n(){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:n,set:n,del:n,listen:n}}(e);const t=a(n?.persistence);return null===t?s:{get:()=>{try{return t.getItem(e)}catch(n){return console.error(`Docusaurus storage error, can't get key=${e}`,n),null}},set:n=>{try{const r=t.getItem(e);t.setItem(e,n),o({key:e,oldValue:r,newValue:n,storage:t})}catch(r){console.error(`Docusaurus storage error, can't set ${e}=${n}`,r)}},del:()=>{try{const n=t.getItem(e);t.removeItem(e),o({key:e,oldValue:n,newValue:null,storage:t})}catch(n){console.error(`Docusaurus storage error, can't delete key=${e}`,n)}},listen:n=>{try{const r=r=>{r.storageArea===t&&r.key===e&&n(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),()=>{}}}}}},1616:(e,n,t)=>{"use strict";t.d(n,{D:()=>i});var r=t(8264),o=t(5592),a=t(5684);function i(){const{siteConfig:{baseUrl:e,url:n,trailingSlash:t},i18n:{defaultLocale:i,currentLocale:s}}=(0,r.c)(),{pathname:l}=(0,o.IT)(),c=(0,a.applyTrailingSlash)(l,{trailingSlash:t,baseUrl:e}),u=s===i?e:e.replace(`/${s}/`,"/"),d=c.replace(e,"");return{createUrl:function(e){let{locale:t,fullyQualified:r}=e;return`${r?n:""}${function(e){return e===i?`${u}`:`${u}${e}/`}(t)}${d}`}}}},7124:(e,n,t)=>{"use strict";t.d(n,{c:()=>i});var r=t(1504),o=t(5592),a=t(1100);function i(e){const n=(0,o.IT)(),t=(0,a.i0)(n),i=(0,a.yA)(e);(0,r.useEffect)((()=>{t&&n!==t&&i({location:n,previousLocation:t})}),[i,n,t])}},1824:(e,n,t)=>{"use strict";t.d(n,{y:()=>o});var r=t(8264);function o(){return(0,r.c)().siteConfig.themeConfig}},8589:(e,n,t)=>{"use strict";t.d(n,{E:()=>o});var r=t(8264);function o(){const{siteConfig:{themeConfig:e}}=(0,r.c)();return e}},9032:(e,n,t)=>{"use strict";t.d(n,{Q:()=>s});var r=t(1504),o=t(1064),a=t(964),i=t(8589);function s(){const{withBaseUrl:e}=(0,a.E)(),{algolia:{externalUrlRegex:n,replaceSearchResultPathname:t}}=(0,i.E)();return(0,r.useCallback)((r=>{const a=new URL(r);if((0,o._)(n,a.href))return r;const i=`${a.pathname+a.hash}`;return e(function(e,n){return n?e.replaceAll(new RegExp(n.from,"g"),n.to):e}(i,t))}),[e,n,t])}},1600:(e,n)=>{"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(e,n){const{trailingSlash:t,baseUrl:r}=n;if(e.startsWith("#"))return e;if(void 0===t)return e;const[o]=e.split(/[#?]/),a="/"===o||o===r?o:(i=o,t?function(e){return e.endsWith("/")?e:`${e}/`}(i):function(e){return e.endsWith("/")?e.slice(0,-1):e}(i));var i;return e.replace(o,a)}},4292:(e,n)=>{"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.getErrorCausalChain=void 0,n.getErrorCausalChain=function e(n){return n.cause?[n,...e(n.cause)]:[n]}},5684:function(e,n,t){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(n,"__esModule",{value:!0}),n.getErrorCausalChain=n.applyTrailingSlash=n.blogPostContainerID=void 0,n.blogPostContainerID="__blog-post-container";var o=t(1600);Object.defineProperty(n,"applyTrailingSlash",{enumerable:!0,get:function(){return r(o).default}});var a=t(4292);Object.defineProperty(n,"getErrorCausalChain",{enumerable:!0,get:function(){return a.getErrorCausalChain}})},8064:(e,n,t)=>{"use strict";t.d(n,{iU:()=>S,Yf:()=>C,gh:()=>f,Wi:()=>A,Ep:()=>p});var r=t(6404);function o(e){return"/"===e.charAt(0)}function a(e,n){for(var t=n,r=t+1,o=e.length;r<o;t+=1,r+=1)e[t]=e[r];e.pop()}const i=function(e,n){void 0===n&&(n="");var t,r=e&&e.split("/")||[],i=n&&n.split("/")||[],s=e&&o(e),l=n&&o(n),c=s||l;if(e&&o(e)?i=r:r.length&&(i.pop(),i=i.concat(r)),!i.length)return"/";if(i.length){var u=i[i.length-1];t="."===u||".."===u||""===u}else t=!1;for(var d=0,p=i.length;p>=0;p--){var f=i[p];"."===f?a(i,p):".."===f?(a(i,p),d++):d&&(a(i,p),d--)}if(!c)for(;d--;d)i.unshift("..");!c||""===i[0]||i[0]&&o(i[0])||i.unshift("");var m=i.join("/");return t&&"/"!==m.substr(-1)&&(m+="/"),m};var s=t(6136);function l(e){return"/"===e.charAt(0)?e:"/"+e}function c(e){return"/"===e.charAt(0)?e.substr(1):e}function u(e,n){return function(e,n){return 0===e.toLowerCase().indexOf(n.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(n.length))}(e,n)?e.substr(n.length):e}function d(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function p(e){var n=e.pathname,t=e.search,r=e.hash,o=n||"/";return t&&"?"!==t&&(o+="?"===t.charAt(0)?t:"?"+t),r&&"#"!==r&&(o+="#"===r.charAt(0)?r:"#"+r),o}function f(e,n,t,o){var a;"string"==typeof e?(a=function(e){var n=e||"/",t="",r="",o=n.indexOf("#");-1!==o&&(r=n.substr(o),n=n.substr(0,o));var a=n.indexOf("?");return-1!==a&&(t=n.substr(a),n=n.substr(0,a)),{pathname:n,search:"?"===t?"":t,hash:"#"===r?"":r}}(e),a.state=n):(void 0===(a=(0,r.c)({},e)).pathname&&(a.pathname=""),a.search?"?"!==a.search.charAt(0)&&(a.search="?"+a.search):a.search="",a.hash?"#"!==a.hash.charAt(0)&&(a.hash="#"+a.hash):a.hash="",void 0!==n&&void 0===a.state&&(a.state=n));try{a.pathname=decodeURI(a.pathname)}catch(s){throw s instanceof URIError?new URIError('Pathname "'+a.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):s}return t&&(a.key=t),o?a.pathname?"/"!==a.pathname.charAt(0)&&(a.pathname=i(a.pathname,o.pathname)):a.pathname=o.pathname:a.pathname||(a.pathname="/"),a}function m(){var e=null;var n=[];return{setPrompt:function(n){return e=n,function(){e===n&&(e=null)}},confirmTransitionTo:function(n,t,r,o){if(null!=e){var a="function"==typeof e?e(n,t):e;"string"==typeof a?"function"==typeof r?r(a,o):o(!0):o(!1!==a)}else o(!0)},appendListener:function(e){var t=!0;function r(){t&&e.apply(void 0,arguments)}return n.push(r),function(){t=!1,n=n.filter((function(e){return e!==r}))}},notifyListeners:function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];n.forEach((function(e){return e.apply(void 0,t)}))}}}var g=!("undefined"==typeof window||!window.document||!window.document.createElement);function h(e,n){n(window.confirm(e))}var y="popstate",b="hashchange";function v(){try{return window.history.state||{}}catch(e){return{}}}function S(e){void 0===e&&(e={}),g||(0,s.c)(!1);var n,t=window.history,o=(-1===(n=window.navigator.userAgent).indexOf("Android 2.")&&-1===n.indexOf("Android 4.0")||-1===n.indexOf("Mobile Safari")||-1!==n.indexOf("Chrome")||-1!==n.indexOf("Windows Phone"))&&window.history&&"pushState"in window.history,a=!(-1===window.navigator.userAgent.indexOf("Trident")),i=e,c=i.forceRefresh,S=void 0!==c&&c,w=i.getUserConfirmation,x=void 0===w?h:w,k=i.keyLength,T=void 0===k?6:k,E=e.basename?d(l(e.basename)):"";function C(e){var n=e||{},t=n.key,r=n.state,o=window.location,a=o.pathname+o.search+o.hash;return E&&(a=u(a,E)),f(a,r,t)}function _(){return Math.random().toString(36).substr(2,T)}var A=m();function I(e){(0,r.c)(U,e),U.length=t.length,A.notifyListeners(U.location,U.action)}function P(e){(function(e){return void 0===e.state&&-1===navigator.userAgent.indexOf("CriOS")})(e)||N(C(e.state))}function L(){N(C(v()))}var R=!1;function N(e){if(R)R=!1,I();else{A.confirmTransitionTo(e,"POP",x,(function(n){n?I({action:"POP",location:e}):function(e){var n=U.location,t=F.indexOf(n.key);-1===t&&(t=0);var r=F.indexOf(e.key);-1===r&&(r=0);var o=t-r;o&&(R=!0,D(o))}(e)}))}}var O=C(v()),F=[O.key];function j(e){return E+p(e)}function D(e){t.go(e)}var M=0;function B(e){1===(M+=e)&&1===e?(window.addEventListener(y,P),a&&window.addEventListener(b,L)):0===M&&(window.removeEventListener(y,P),a&&window.removeEventListener(b,L))}var $=!1;var U={length:t.length,action:"POP",location:O,createHref:j,push:function(e,n){var r="PUSH",a=f(e,n,_(),U.location);A.confirmTransitionTo(a,r,x,(function(e){if(e){var n=j(a),i=a.key,s=a.state;if(o)if(t.pushState({key:i,state:s},null,n),S)window.location.href=n;else{var l=F.indexOf(U.location.key),c=F.slice(0,l+1);c.push(a.key),F=c,I({action:r,location:a})}else window.location.href=n}}))},replace:function(e,n){var r="REPLACE",a=f(e,n,_(),U.location);A.confirmTransitionTo(a,r,x,(function(e){if(e){var n=j(a),i=a.key,s=a.state;if(o)if(t.replaceState({key:i,state:s},null,n),S)window.location.replace(n);else{var l=F.indexOf(U.location.key);-1!==l&&(F[l]=a.key),I({action:r,location:a})}else window.location.replace(n)}}))},go:D,goBack:function(){D(-1)},goForward:function(){D(1)},block:function(e){void 0===e&&(e=!1);var n=A.setPrompt(e);return $||(B(1),$=!0),function(){return $&&($=!1,B(-1)),n()}},listen:function(e){var n=A.appendListener(e);return B(1),function(){B(-1),n()}}};return U}var w="hashchange",x={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:l},slash:{encodePath:l,decodePath:l}};function k(e){var n=e.indexOf("#");return-1===n?e:e.slice(0,n)}function T(){var e=window.location.href,n=e.indexOf("#");return-1===n?"":e.substring(n+1)}function E(e){window.location.replace(k(window.location.href)+"#"+e)}function C(e){void 0===e&&(e={}),g||(0,s.c)(!1);var n=window.history,t=(window.navigator.userAgent.indexOf("Firefox"),e),o=t.getUserConfirmation,a=void 0===o?h:o,i=t.hashType,c=void 0===i?"slash":i,y=e.basename?d(l(e.basename)):"",b=x[c],v=b.encodePath,S=b.decodePath;function C(){var e=S(T());return y&&(e=u(e,y)),f(e)}var _=m();function A(e){(0,r.c)($,e),$.length=n.length,_.notifyListeners($.location,$.action)}var I=!1,P=null;function L(){var e,n,t=T(),r=v(t);if(t!==r)E(r);else{var o=C(),i=$.location;if(!I&&(n=o,(e=i).pathname===n.pathname&&e.search===n.search&&e.hash===n.hash))return;if(P===p(o))return;P=null,function(e){if(I)I=!1,A();else{var n="POP";_.confirmTransitionTo(e,n,a,(function(t){t?A({action:n,location:e}):function(e){var n=$.location,t=F.lastIndexOf(p(n));-1===t&&(t=0);var r=F.lastIndexOf(p(e));-1===r&&(r=0);var o=t-r;o&&(I=!0,j(o))}(e)}))}}(o)}}var R=T(),N=v(R);R!==N&&E(N);var O=C(),F=[p(O)];function j(e){n.go(e)}var D=0;function M(e){1===(D+=e)&&1===e?window.addEventListener(w,L):0===D&&window.removeEventListener(w,L)}var B=!1;var $={length:n.length,action:"POP",location:O,createHref:function(e){var n=document.querySelector("base"),t="";return n&&n.getAttribute("href")&&(t=k(window.location.href)),t+"#"+v(y+p(e))},push:function(e,n){var t="PUSH",r=f(e,void 0,void 0,$.location);_.confirmTransitionTo(r,t,a,(function(e){if(e){var n=p(r),o=v(y+n);if(T()!==o){P=n,function(e){window.location.hash=e}(o);var a=F.lastIndexOf(p($.location)),i=F.slice(0,a+1);i.push(n),F=i,A({action:t,location:r})}else A()}}))},replace:function(e,n){var t="REPLACE",r=f(e,void 0,void 0,$.location);_.confirmTransitionTo(r,t,a,(function(e){if(e){var n=p(r),o=v(y+n);T()!==o&&(P=n,E(o));var a=F.indexOf(p($.location));-1!==a&&(F[a]=n),A({action:t,location:r})}}))},go:j,goBack:function(){j(-1)},goForward:function(){j(1)},block:function(e){void 0===e&&(e=!1);var n=_.setPrompt(e);return B||(M(1),B=!0),function(){return B&&(B=!1,M(-1)),n()}},listen:function(e){var n=_.appendListener(e);return M(1),function(){M(-1),n()}}};return $}function _(e,n,t){return Math.min(Math.max(e,n),t)}function A(e){void 0===e&&(e={});var n=e,t=n.getUserConfirmation,o=n.initialEntries,a=void 0===o?["/"]:o,i=n.initialIndex,s=void 0===i?0:i,l=n.keyLength,c=void 0===l?6:l,u=m();function d(e){(0,r.c)(S,e),S.length=S.entries.length,u.notifyListeners(S.location,S.action)}function g(){return Math.random().toString(36).substr(2,c)}var h=_(s,0,a.length-1),y=a.map((function(e){return f(e,void 0,"string"==typeof e?g():e.key||g())})),b=p;function v(e){var n=_(S.index+e,0,S.entries.length-1),r=S.entries[n];u.confirmTransitionTo(r,"POP",t,(function(e){e?d({action:"POP",location:r,index:n}):d()}))}var S={length:y.length,action:"POP",location:y[h],index:h,entries:y,createHref:b,push:function(e,n){var r="PUSH",o=f(e,n,g(),S.location);u.confirmTransitionTo(o,r,t,(function(e){if(e){var n=S.index+1,t=S.entries.slice(0);t.length>n?t.splice(n,t.length-n,o):t.push(o),d({action:r,location:o,index:n,entries:t})}}))},replace:function(e,n){var r="REPLACE",o=f(e,n,g(),S.location);u.confirmTransitionTo(o,r,t,(function(e){e&&(S.entries[S.index]=o,d({action:r,location:o}))}))},go:v,goBack:function(){v(-1)},goForward:function(){v(1)},canGo:function(e){var n=S.index+e;return n>=0&&n<S.entries.length},block:function(e){return void 0===e&&(e=!1),u.setPrompt(e)},listen:function(e){return u.appendListener(e)}};return S}},4792:(e,n,t)=>{"use strict";var r=t(2168),o={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},a={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},s={};function l(e){return r.isMemo(e)?i:s[e.$$typeof]||o}s[r.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},s[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(n,t,r){if("string"!=typeof t){if(m){var o=f(t);o&&o!==m&&e(n,o,r)}var i=u(t);d&&(i=i.concat(d(t)));for(var s=l(n),g=l(t),h=0;h<i.length;++h){var y=i[h];if(!(a[y]||r&&r[y]||g&&g[y]||s&&s[y])){var b=p(t,y);try{c(n,y,b)}catch(v){}}}}return n}},9328:e=>{"use strict";e.exports=function(e,n,t,r,o,a,i,s){if(!e){var l;if(void 0===n)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[t,r,o,a,i,s],u=0;(l=new Error(n.replace(/%s/g,(function(){return c[u++]})))).name="Invariant Violation"}throw l.framesToPop=1,l}}},9600:e=>{e.exports=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)}},1462:(e,n,t)=>{"use strict";t.r(n)},9115:(e,n,t)=>{"use strict";t.r(n)},2272:function(e,n,t){var r,o;r=function(){var e,n,t={version:"0.2.0"},r=t.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 o(e,n,t){return e<n?n:e>t?t:e}function a(e){return 100*(-1+e)}function i(e,n,t){var o;return(o="translate3d"===r.positionUsing?{transform:"translate3d("+a(e)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+a(e)+"%,0)"}:{"margin-left":a(e)+"%"}).transition="all "+n+"ms "+t,o}t.configure=function(e){var n,t;for(n in e)void 0!==(t=e[n])&&e.hasOwnProperty(n)&&(r[n]=t);return this},t.status=null,t.set=function(e){var n=t.isStarted();e=o(e,r.minimum,1),t.status=1===e?null:e;var a=t.render(!n),c=a.querySelector(r.barSelector),u=r.speed,d=r.easing;return a.offsetWidth,s((function(n){""===r.positionUsing&&(r.positionUsing=t.getPositioningCSS()),l(c,i(e,u,d)),1===e?(l(a,{transition:"none",opacity:1}),a.offsetWidth,setTimeout((function(){l(a,{transition:"all "+u+"ms linear",opacity:0}),setTimeout((function(){t.remove(),n()}),u)}),u)):setTimeout(n,u)})),this},t.isStarted=function(){return"number"==typeof t.status},t.start=function(){t.status||t.set(0);var e=function(){setTimeout((function(){t.status&&(t.trickle(),e())}),r.trickleSpeed)};return r.trickle&&e(),this},t.done=function(e){return e||t.status?t.inc(.3+.5*Math.random()).set(1):this},t.inc=function(e){var n=t.status;return n?("number"!=typeof e&&(e=(1-n)*o(Math.random()*n,.1,.95)),n=o(n+e,0,.994),t.set(n)):t.start()},t.trickle=function(){return t.inc(Math.random()*r.trickleRate)},e=0,n=0,t.promise=function(r){return r&&"resolved"!==r.state()?(0===n&&t.start(),e++,n++,r.always((function(){0==--n?(e=0,t.done()):t.set((e-n)/e)})),this):this},t.render=function(e){if(t.isRendered())return document.getElementById("nprogress");u(document.documentElement,"nprogress-busy");var n=document.createElement("div");n.id="nprogress",n.innerHTML=r.template;var o,i=n.querySelector(r.barSelector),s=e?"-100":a(t.status||0),c=document.querySelector(r.parent);return l(i,{transition:"all 0 linear",transform:"translate3d("+s+"%,0,0)"}),r.showSpinner||(o=n.querySelector(r.spinnerSelector))&&f(o),c!=document.body&&u(c,"nprogress-custom-parent"),c.appendChild(n),n},t.remove=function(){d(document.documentElement,"nprogress-busy"),d(document.querySelector(r.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&f(e)},t.isRendered=function(){return!!document.getElementById("nprogress")},t.getPositioningCSS=function(){var e=document.body.style,n="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return n+"Perspective"in e?"translate3d":n+"Transform"in e?"translate":"margin"};var s=function(){var e=[];function n(){var t=e.shift();t&&t(n)}return function(t){e.push(t),1==e.length&&n()}}(),l=function(){var e=["Webkit","O","Moz","ms"],n={};function t(e){return e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,n){return n.toUpperCase()}))}function r(n){var t=document.body.style;if(n in t)return n;for(var r,o=e.length,a=n.charAt(0).toUpperCase()+n.slice(1);o--;)if((r=e[o]+a)in t)return r;return n}function o(e){return e=t(e),n[e]||(n[e]=r(e))}function a(e,n,t){n=o(n),e.style[n]=t}return function(e,n){var t,r,o=arguments;if(2==o.length)for(t in n)void 0!==(r=n[t])&&n.hasOwnProperty(t)&&a(e,t,r);else a(e,o[1],o[2])}}();function c(e,n){return("string"==typeof e?e:p(e)).indexOf(" "+n+" ")>=0}function u(e,n){var t=p(e),r=t+n;c(t,n)||(e.className=r.substring(1))}function d(e,n){var t,r=p(e);c(e,n)&&(t=r.replace(" "+n+" "," "),e.className=t.substring(1,t.length-1))}function p(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function f(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return t},void 0===(o="function"==typeof r?r.call(n,t,n,e):r)||(e.exports=o)},1596:()=>{!function(e){var n="\\b(?:BASH|BASHOPTS|BASH_ALIASES|BASH_ARGC|BASH_ARGV|BASH_CMDS|BASH_COMPLETION_COMPAT_DIR|BASH_LINENO|BASH_REMATCH|BASH_SOURCE|BASH_VERSINFO|BASH_VERSION|COLORTERM|COLUMNS|COMP_WORDBREAKS|DBUS_SESSION_BUS_ADDRESS|DEFAULTS_PATH|DESKTOP_SESSION|DIRSTACK|DISPLAY|EUID|GDMSESSION|GDM_LANG|GNOME_KEYRING_CONTROL|GNOME_KEYRING_PID|GPG_AGENT_INFO|GROUPS|HISTCONTROL|HISTFILE|HISTFILESIZE|HISTSIZE|HOME|HOSTNAME|HOSTTYPE|IFS|INSTANCE|JOB|LANG|LANGUAGE|LC_ADDRESS|LC_ALL|LC_IDENTIFICATION|LC_MEASUREMENT|LC_MONETARY|LC_NAME|LC_NUMERIC|LC_PAPER|LC_TELEPHONE|LC_TIME|LESSCLOSE|LESSOPEN|LINES|LOGNAME|LS_COLORS|MACHTYPE|MAILCHECK|MANDATORY_PATH|NO_AT_BRIDGE|OLDPWD|OPTERR|OPTIND|ORBIT_SOCKETDIR|OSTYPE|PAPERSIZE|PATH|PIPESTATUS|PPID|PS1|PS2|PS3|PS4|PWD|RANDOM|REPLY|SECONDS|SELINUX_INIT|SESSION|SESSIONTYPE|SESSION_MANAGER|SHELL|SHELLOPTS|SHLVL|SSH_AUTH_SOCK|TERM|UID|UPSTART_EVENTS|UPSTART_INSTANCE|UPSTART_JOB|UPSTART_SESSION|USER|WINDOWID|XAUTHORITY|XDG_CONFIG_DIRS|XDG_CURRENT_DESKTOP|XDG_DATA_DIRS|XDG_GREETER_DATA_DIR|XDG_MENU_PREFIX|XDG_RUNTIME_DIR|XDG_SEAT|XDG_SEAT_PATH|XDG_SESSION_DESKTOP|XDG_SESSION_ID|XDG_SESSION_PATH|XDG_SESSION_TYPE|XDG_VTNR|XMODIFIERS)\\b",t={pattern:/(^(["']?)\w+\2)[ \t]+\S.*/,lookbehind:!0,alias:"punctuation",inside:null},r={bash:t,environment:{pattern:RegExp("\\$"+n),alias:"constant"},variable:[{pattern:/\$?\(\([\s\S]+?\)\)/,greedy:!0,inside:{variable:[{pattern:/(^\$\(\([\s\S]+)\)\)/,lookbehind:!0},/^\$\(\(/],number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee]-?\d+)?/,operator:/--|\+\+|\*\*=?|<<=?|>>=?|&&|\|\||[=!+\-*/%<>^&|]=?|[?~:]/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\((?:\([^)]+\)|[^()])+\)|`[^`]+`/,greedy:!0,inside:{variable:/^\$\(|^`|\)$|`$/}},{pattern:/\$\{[^}]+\}/,greedy:!0,inside:{operator:/:[-=?+]?|[!\/]|##?|%%?|\^\^?|,,?/,punctuation:/[\[\]]/,environment:{pattern:RegExp("(\\{)"+n),lookbehind:!0,alias:"constant"}}},/\$(?:\w+|[#?*!@$])/],entity:/\\(?:[abceEfnrtv\\"]|O?[0-7]{1,3}|U[0-9a-fA-F]{8}|u[0-9a-fA-F]{4}|x[0-9a-fA-F]{1,2})/};e.languages.bash={shebang:{pattern:/^#!\s*\/.*/,alias:"important"},comment:{pattern:/(^|[^"{\\$])#.*/,lookbehind:!0},"function-name":[{pattern:/(\bfunction\s+)[\w-]+(?=(?:\s*\(?:\s*\))?\s*\{)/,lookbehind:!0,alias:"function"},{pattern:/\b[\w-]+(?=\s*\(\s*\)\s*\{)/,alias:"function"}],"for-or-select":{pattern:/(\b(?:for|select)\s+)\w+(?=\s+in\s)/,alias:"variable",lookbehind:!0},"assign-left":{pattern:/(^|[\s;|&]|[<>]\()\w+(?:\.\w+)*(?=\+?=)/,inside:{environment:{pattern:RegExp("(^|[\\s;|&]|[<>]\\()"+n),lookbehind:!0,alias:"constant"}},alias:"variable",lookbehind:!0},parameter:{pattern:/(^|\s)-{1,2}(?:\w+:[+-]?)?\w+(?:\.\w+)*(?=[=\s]|$)/,alias:"variable",lookbehind:!0},string:[{pattern:/((?:^|[^<])<<-?\s*)(\w+)\s[\s\S]*?(?:\r?\n|\r)\2/,lookbehind:!0,greedy:!0,inside:r},{pattern:/((?:^|[^<])<<-?\s*)(["'])(\w+)\2\s[\s\S]*?(?:\r?\n|\r)\3/,lookbehind:!0,greedy:!0,inside:{bash:t}},{pattern:/(^|[^\\](?:\\\\)*)"(?:\\[\s\S]|\$\([^)]+\)|\$(?!\()|`[^`]+`|[^"\\`$])*"/,lookbehind:!0,greedy:!0,inside:r},{pattern:/(^|[^$\\])'[^']*'/,lookbehind:!0,greedy:!0},{pattern:/\$'(?:[^'\\]|\\[\s\S])*'/,greedy:!0,inside:{entity:r.entity}}],environment:{pattern:RegExp("\\$?"+n),alias:"constant"},variable:r.variable,function:{pattern:/(^|[\s;|&]|[<>]\()(?:add|apropos|apt|apt-cache|apt-get|aptitude|aspell|automysqlbackup|awk|basename|bash|bc|bconsole|bg|bzip2|cal|cargo|cat|cfdisk|chgrp|chkconfig|chmod|chown|chroot|cksum|clear|cmp|column|comm|composer|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|debootstrap|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|docker|docker-compose|du|egrep|eject|env|ethtool|expand|expect|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|git|gparted|grep|groupadd|groupdel|groupmod|groups|grub-mkconfig|gzip|halt|head|hg|history|host|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|ip|java|jobs|join|kill|killall|less|link|ln|locate|logname|logrotate|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|lynx|make|man|mc|mdadm|mkconfig|mkdir|mke2fs|mkfifo|mkfs|mkisofs|mknod|mkswap|mmv|more|most|mount|mtools|mtr|mutt|mv|nano|nc|netstat|nice|nl|node|nohup|notify-send|npm|nslookup|op|open|parted|passwd|paste|pathchk|ping|pkill|pnpm|podman|podman-compose|popd|pr|printcap|printenv|ps|pushd|pv|quota|quotacheck|quotactl|ram|rar|rcp|reboot|remsync|rename|renice|rev|rm|rmdir|rpm|rsync|scp|screen|sdiff|sed|sendmail|seq|service|sftp|sh|shellcheck|shuf|shutdown|sleep|slocate|sort|split|ssh|stat|strace|su|sudo|sum|suspend|swapon|sync|sysctl|tac|tail|tar|tee|time|timeout|top|touch|tr|traceroute|tsort|tty|umount|uname|unexpand|uniq|units|unrar|unshar|unzip|update-grub|uptime|useradd|userdel|usermod|users|uudecode|uuencode|v|vcpkg|vdir|vi|vim|virsh|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yarn|yes|zenity|zip|zsh|zypper)(?=$|[)\s;|&])/,lookbehind:!0},keyword:{pattern:/(^|[\s;|&]|[<>]\()(?:case|do|done|elif|else|esac|fi|for|function|if|in|select|then|until|while)(?=$|[)\s;|&])/,lookbehind:!0},builtin:{pattern:/(^|[\s;|&]|[<>]\()(?:\.|:|alias|bind|break|builtin|caller|cd|command|continue|declare|echo|enable|eval|exec|exit|export|getopts|hash|help|let|local|logout|mapfile|printf|pwd|read|readarray|readonly|return|set|shift|shopt|source|test|times|trap|type|typeset|ulimit|umask|unalias|unset)(?=$|[)\s;|&])/,lookbehind:!0,alias:"class-name"},boolean:{pattern:/(^|[\s;|&]|[<>]\()(?:false|true)(?=$|[)\s;|&])/,lookbehind:!0},"file-descriptor":{pattern:/\B&\d\b/,alias:"important"},operator:{pattern:/\d?<>|>\||\+=|=[=~]?|!=?|<<[<-]?|[&\d]?>>|\d[<>]&?|[<>][&=]?|&[>&]?|\|[&|]?/,inside:{"file-descriptor":{pattern:/^\d/,alias:"important"}}},punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];\\]/,number:{pattern:/(^|\s)(?:[1-9]\d*|0)(?:[.,]\d+)?\b/,lookbehind:!0}},t.inside=e.languages.bash;for(var o=["comment","function-name","for-or-select","assign-left","parameter","string","environment","function","keyword","builtin","boolean","file-descriptor","operator","punctuation","number"],a=r.variable[1].inside,i=0;i<o.length;i++)a[o[i]]=e.languages.bash[o[i]];e.languages.sh=e.languages.bash,e.languages.shell=e.languages.bash}(Prism)},1496:()=>{!function(e){e.languages.diff={coord:[/^(?:\*{3}|-{3}|\+{3}).*$/m,/^@@.*@@$/m,/^\d.*$/m]};var n={"deleted-sign":"-","deleted-arrow":"<","inserted-sign":"+","inserted-arrow":">",unchanged:" ",diff:"!"};Object.keys(n).forEach((function(t){var r=n[t],o=[];/^\w+$/.test(t)||o.push(/\w+/.exec(t)[0]),"diff"===t&&o.push("bold"),e.languages.diff[t]={pattern:RegExp("^(?:["+r+"].*(?:\r\n?|\n|(?![\\s\\S])))+","m"),alias:o,inside:{line:{pattern:/(.)(?=[\s\S]).*(?:\r\n?|\n)?/,lookbehind:!0},prefix:{pattern:/[\s\S]/,alias:/\w+/.exec(t)[0]}}}})),Object.defineProperty(e.languages.diff,"PREFIXES",{value:n})}(Prism)},5960:()=>{!function(e){e.languages.ejs={delimiter:{pattern:/^<%[-_=]?|[-_]?%>$/,alias:"punctuation"},comment:/^#[\s\S]*/,"language-javascript":{pattern:/[\s\S]+/,inside:e.languages.javascript}},e.hooks.add("before-tokenize",(function(n){e.languages["markup-templating"].buildPlaceholders(n,"ejs",/<%(?!%)[\s\S]+?%>/g)})),e.hooks.add("after-tokenize",(function(n){e.languages["markup-templating"].tokenizePlaceholders(n,"ejs")})),e.languages.eta=e.languages.ejs}(Prism)},9264:()=>{Prism.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"}},Prism.languages.webmanifest=Prism.languages.json},1808:()=>{!function(e){function n(e,n){return"___"+e.toUpperCase()+n+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(t,r,o,a){if(t.language===r){var i=t.tokenStack=[];t.code=t.code.replace(o,(function(e){if("function"==typeof a&&!a(e))return e;for(var o,s=i.length;-1!==t.code.indexOf(o=n(r,s));)++s;return i[s]=e,o})),t.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(t,r){if(t.language===r&&t.tokenStack){t.grammar=e.languages[r];var o=0,a=Object.keys(t.tokenStack);!function i(s){for(var l=0;l<s.length&&!(o>=a.length);l++){var c=s[l];if("string"==typeof c||c.content&&"string"==typeof c.content){var u=a[o],d=t.tokenStack[u],p="string"==typeof c?c:c.content,f=n(r,u),m=p.indexOf(f);if(m>-1){++o;var g=p.substring(0,m),h=new e.Token(r,e.tokenize(d,t.grammar),"language-"+r,d),y=p.substring(m+f.length),b=[];g&&b.push.apply(b,i([g])),b.push(h),y&&b.push.apply(b,i([y])),"string"==typeof c?s.splice.apply(s,[l,1].concat(b)):c.content=b}}else c.content&&i(c.content)}return s}(t.tokens)}}}})}(Prism)},712:()=>{!function(e){e.languages.ruby=e.languages.extend("clike",{comment:{pattern:/#.*|^=begin\s[\s\S]*?^=end/m,greedy:!0},"class-name":{pattern:/(\b(?:class|module)\s+|\bcatch\s+\()[\w.\\]+|\b[A-Z_]\w*(?=\s*\.\s*new\b)/,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:BEGIN|END|alias|and|begin|break|case|class|def|define_method|defined|do|each|else|elsif|end|ensure|extend|for|if|in|include|module|new|next|nil|not|or|prepend|private|protected|public|raise|redo|require|rescue|retry|return|self|super|then|throw|undef|unless|until|when|while|yield)\b/,operator:/\.{2,3}|&\.|===|<?=>|[!=]?~|(?:&&|\|\||<<|>>|\*\*|[+\-*/%<>!^&|=])=?|[?:]/,punctuation:/[(){}[\].,;]/}),e.languages.insertBefore("ruby","operator",{"double-colon":{pattern:/::/,alias:"punctuation"}});var n={pattern:/((?:^|[^\\])(?:\\{2})*)#\{(?:[^{}]|\{[^{}]*\})*\}/,lookbehind:!0,inside:{content:{pattern:/^(#\{)[\s\S]+(?=\}$)/,lookbehind:!0,inside:e.languages.ruby},delimiter:{pattern:/^#\{|\}$/,alias:"punctuation"}}};delete e.languages.ruby.function;var t="(?:"+[/([^a-zA-Z0-9\s{(\[<=])(?:(?!\1)[^\\]|\\[\s\S])*\1/.source,/\((?:[^()\\]|\\[\s\S]|\((?:[^()\\]|\\[\s\S])*\))*\)/.source,/\{(?:[^{}\\]|\\[\s\S]|\{(?:[^{}\\]|\\[\s\S])*\})*\}/.source,/\[(?:[^\[\]\\]|\\[\s\S]|\[(?:[^\[\]\\]|\\[\s\S])*\])*\]/.source,/<(?:[^<>\\]|\\[\s\S]|<(?:[^<>\\]|\\[\s\S])*>)*>/.source].join("|")+")",r=/(?:"(?:\\.|[^"\\\r\n])*"|(?:\b[a-zA-Z_]\w*|[^\s\0-\x7F]+)[?!]?|\$.)/.source;e.languages.insertBefore("ruby","keyword",{"regex-literal":[{pattern:RegExp(/%r/.source+t+/[egimnosux]{0,6}/.source),greedy:!0,inside:{interpolation:n,regex:/[\s\S]+/}},{pattern:/(^|[^/])\/(?!\/)(?:\[[^\r\n\]]+\]|\\.|[^[/\\\r\n])+\/[egimnosux]{0,6}(?=\s*(?:$|[\r\n,.;})#]))/,lookbehind:!0,greedy:!0,inside:{interpolation:n,regex:/[\s\S]+/}}],variable:/[@$]+[a-zA-Z_]\w*(?:[?!]|\b)/,symbol:[{pattern:RegExp(/(^|[^:]):/.source+r),lookbehind:!0,greedy:!0},{pattern:RegExp(/([\r\n{(,][ \t]*)/.source+r+/(?=:(?!:))/.source),lookbehind:!0,greedy:!0}],"method-definition":{pattern:/(\bdef\s+)\w+(?:\s*\.\s*\w+)?/,lookbehind:!0,inside:{function:/\b\w+$/,keyword:/^self\b/,"class-name":/^\w+/,punctuation:/\./}}}),e.languages.insertBefore("ruby","string",{"string-literal":[{pattern:RegExp(/%[qQiIwWs]?/.source+t),greedy:!0,inside:{interpolation:n,string:/[\s\S]+/}},{pattern:/("|')(?:#\{[^}]+\}|#(?!\{)|\\(?:\r\n|[\s\S])|(?!\1)[^\\#\r\n])*\1/,greedy:!0,inside:{interpolation:n,string:/[\s\S]+/}},{pattern:/<<[-~]?([a-z_]\w*)[\r\n](?:.*[\r\n])*?[\t ]*\1/i,alias:"heredoc-string",greedy:!0,inside:{delimiter:{pattern:/^<<[-~]?[a-z_]\w*|\b[a-z_]\w*$/i,inside:{symbol:/\b\w+/,punctuation:/^<<[-~]?/}},interpolation:n,string:/[\s\S]+/}},{pattern:/<<[-~]?'([a-z_]\w*)'[\r\n](?:.*[\r\n])*?[\t ]*\1/i,alias:"heredoc-string",greedy:!0,inside:{delimiter:{pattern:/^<<[-~]?'[a-z_]\w*'|\b[a-z_]\w*$/i,inside:{symbol:/\b\w+/,punctuation:/^<<[-~]?'|'$/}},string:/[\s\S]+/}}],"command-literal":[{pattern:RegExp(/%x/.source+t),greedy:!0,inside:{interpolation:n,command:{pattern:/[\s\S]+/,alias:"string"}}},{pattern:/`(?:#\{[^}]+\}|#(?!\{)|\\(?:\r\n|[\s\S])|[^\\`#\r\n])*`/,greedy:!0,inside:{interpolation:n,command:{pattern:/[\s\S]+/,alias:"string"}}}]}),delete e.languages.ruby.string,e.languages.insertBefore("ruby","number",{builtin:/\b(?:Array|Bignum|Binding|Class|Continuation|Dir|Exception|FalseClass|File|Fixnum|Float|Hash|IO|Integer|MatchData|Method|Module|NilClass|Numeric|Object|Proc|Range|Regexp|Stat|String|Struct|Symbol|TMS|Thread|ThreadGroup|Time|TrueClass)\b/,constant:/\b[A-Z][A-Z0-9_]*(?:[?!]|\b)/}),e.languages.rb=e.languages.ruby}(Prism)},4096:(e,n,t)=>{var r={"./prism-bash":1596,"./prism-diff":1496,"./prism-ejs":5960,"./prism-json":9264,"./prism-markup-templating":1808,"./prism-ruby":712};function o(e){var n=a(e);return t(n)}function a(e){if(!t.o(r,e)){var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}return r[e]}o.keys=function(){return Object.keys(r)},o.resolve=a,e.exports=o,o.id=4096},9776:(e,n,t)=>{"use strict";var r=t(9143);function o(){}function a(){}a.resetWarningCache=o,e.exports=function(){function e(e,n,t,o,a,i){if(i!==r){var s=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 s.name="Invariant Violation",s}}function n(){return e}e.isRequired=e;var t={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:n,element:e,elementType:e,instanceOf:n,node:e,objectOf:n,oneOf:n,oneOfType:n,shape:n,exact:n,checkPropTypes:a,resetWarningCache:o};return t.PropTypes=t,t}},3268:(e,n,t)=>{e.exports=t(9776)()},9143:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},9516:(e,n,t)=>{"use strict";var r=t(1504),o=t(4712);function a(e){for(var n="https://reactjs.org/docs/error-decoder.html?invariant="+e,t=1;t<arguments.length;t++)n+="&args[]="+encodeURIComponent(arguments[t]);return"Minified React error #"+e+"; visit "+n+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var i=new Set,s={};function l(e,n){c(e,n),c(e+"Capture",n)}function c(e,n){for(s[e]=n,e=0;e<n.length;e++)i.add(n[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 g(e,n,t,r,o,a,i){this.acceptsBooleans=2===n||3===n||4===n,this.attributeName=r,this.attributeNamespace=o,this.mustUseProperty=t,this.propertyName=e,this.type=n,this.sanitizeURL=a,this.removeEmptyString=i}var h={};"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach((function(e){h[e]=new g(e,0,!1,e,null,!1,!1)})),[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach((function(e){var n=e[0];h[n]=new g(n,1,!1,e[1],null,!1,!1)})),["contentEditable","draggable","spellCheck","value"].forEach((function(e){h[e]=new g(e,2,!1,e.toLowerCase(),null,!1,!1)})),["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach((function(e){h[e]=new g(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){h[e]=new g(e,3,!1,e.toLowerCase(),null,!1,!1)})),["checked","multiple","muted","selected"].forEach((function(e){h[e]=new g(e,3,!0,e,null,!1,!1)})),["capture","download"].forEach((function(e){h[e]=new g(e,4,!1,e,null,!1,!1)})),["cols","rows","size","span"].forEach((function(e){h[e]=new g(e,6,!1,e,null,!1,!1)})),["rowSpan","start"].forEach((function(e){h[e]=new g(e,5,!1,e.toLowerCase(),null,!1,!1)}));var y=/[\-:]([a-z])/g;function b(e){return e[1].toUpperCase()}function v(e,n,t,r){var o=h.hasOwnProperty(n)?h[n]:null;(null!==o?0!==o.type:r||!(2<n.length)||"o"!==n[0]&&"O"!==n[0]||"n"!==n[1]&&"N"!==n[1])&&(function(e,n,t,r){if(null==n||function(e,n,t,r){if(null!==t&&0===t.type)return!1;switch(typeof n){case"function":case"symbol":return!0;case"boolean":return!r&&(null!==t?!t.acceptsBooleans:"data-"!==(e=e.toLowerCase().slice(0,5))&&"aria-"!==e);default:return!1}}(e,n,t,r))return!0;if(r)return!1;if(null!==t)switch(t.type){case 3:return!n;case 4:return!1===n;case 5:return isNaN(n);case 6:return isNaN(n)||1>n}return!1}(n,t,o,r)&&(t=null),r||null===o?function(e){return!!d.call(m,e)||!d.call(f,e)&&(p.test(e)?m[e]=!0:(f[e]=!0,!1))}(n)&&(null===t?e.removeAttribute(n):e.setAttribute(n,""+t)):o.mustUseProperty?e[o.propertyName]=null===t?3!==o.type&&"":t:(n=o.attributeName,r=o.attributeNamespace,null===t?e.removeAttribute(n):(t=3===(o=o.type)||4===o&&!0===t?"":""+t,r?e.setAttributeNS(r,n,t):e.setAttribute(n,t))))}"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 n=e.replace(y,b);h[n]=new g(n,1,!1,e,null,!1,!1)})),"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach((function(e){var n=e.replace(y,b);h[n]=new g(n,1,!1,e,"http://www.w3.org/1999/xlink",!1,!1)})),["xml:base","xml:lang","xml:space"].forEach((function(e){var n=e.replace(y,b);h[n]=new g(n,1,!1,e,"http://www.w3.org/XML/1998/namespace",!1,!1)})),["tabIndex","crossOrigin"].forEach((function(e){h[e]=new g(e,1,!1,e.toLowerCase(),null,!1,!1)})),h.xlinkHref=new g("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0,!1),["src","href","action","formAction"].forEach((function(e){h[e]=new g(e,1,!1,e.toLowerCase(),null,!0,!0)}));var S=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,w=Symbol.for("react.element"),x=Symbol.for("react.portal"),k=Symbol.for("react.fragment"),T=Symbol.for("react.strict_mode"),E=Symbol.for("react.profiler"),C=Symbol.for("react.provider"),_=Symbol.for("react.context"),A=Symbol.for("react.forward_ref"),I=Symbol.for("react.suspense"),P=Symbol.for("react.suspense_list"),L=Symbol.for("react.memo"),R=Symbol.for("react.lazy");Symbol.for("react.scope"),Symbol.for("react.debug_trace_mode");var N=Symbol.for("react.offscreen");Symbol.for("react.legacy_hidden"),Symbol.for("react.cache"),Symbol.for("react.tracing_marker");var O=Symbol.iterator;function F(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=O&&e[O]||e["@@iterator"])?e:null}var j,D=Object.assign;function M(e){if(void 0===j)try{throw Error()}catch(t){var n=t.stack.trim().match(/\n( *(at )?)/);j=n&&n[1]||""}return"\n"+j+e}var B=!1;function $(e,n){if(!e||B)return"";B=!0;var t=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{if(n)if(n=function(){throw Error()},Object.defineProperty(n.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(n,[])}catch(c){var r=c}Reflect.construct(e,[],n)}else{try{n.call()}catch(c){r=c}e.call(n.prototype)}else{try{throw Error()}catch(c){r=c}e()}}catch(c){if(c&&r&&"string"==typeof c.stack){for(var o=c.stack.split("\n"),a=r.stack.split("\n"),i=o.length-1,s=a.length-1;1<=i&&0<=s&&o[i]!==a[s];)s--;for(;1<=i&&0<=s;i--,s--)if(o[i]!==a[s]){if(1!==i||1!==s)do{if(i--,0>--s||o[i]!==a[s]){var l="\n"+o[i].replace(" at new "," at ");return e.displayName&&l.includes("<anonymous>")&&(l=l.replace("<anonymous>",e.displayName)),l}}while(1<=i&&0<=s);break}}}finally{B=!1,Error.prepareStackTrace=t}return(e=e?e.displayName||e.name:"")?M(e):""}function U(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=$(e.type,!1);case 11:return e=$(e.type.render,!1);case 1:return e=$(e.type,!0);default:return""}}function V(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 k:return"Fragment";case x:return"Portal";case E:return"Profiler";case T:return"StrictMode";case I:return"Suspense";case P:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case _:return(e.displayName||"Context")+".Consumer";case C:return(e._context.displayName||"Context")+".Provider";case A:var n=e.render;return(e=e.displayName)||(e=""!==(e=n.displayName||n.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case L:return null!==(n=e.displayName||null)?n:V(e.type)||"Memo";case R:n=e._payload,e=e._init;try{return V(e(n))}catch(t){}}return null}function z(e){var n=e.type;switch(e.tag){case 24:return"Cache";case 9:return(n.displayName||"Context")+".Consumer";case 10:return(n._context.displayName||"Context")+".Provider";case 18:return"DehydratedFragment";case 11:return e=(e=n.render).displayName||e.name||"",n.displayName||(""!==e?"ForwardRef("+e+")":"ForwardRef");case 7:return"Fragment";case 5:return n;case 4:return"Portal";case 3:return"Root";case 6:return"Text";case 16:return V(n);case 8:return n===T?"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 n)return n.displayName||n.name||null;if("string"==typeof n)return n}return null}function H(e){switch(typeof e){case"boolean":case"number":case"string":case"undefined":case"object":return e;default:return""}}function W(e){var n=e.type;return(e=e.nodeName)&&"input"===e.toLowerCase()&&("checkbox"===n||"radio"===n)}function G(e){e._valueTracker||(e._valueTracker=function(e){var n=W(e)?"checked":"value",t=Object.getOwnPropertyDescriptor(e.constructor.prototype,n),r=""+e[n];if(!e.hasOwnProperty(n)&&void 0!==t&&"function"==typeof t.get&&"function"==typeof t.set){var o=t.get,a=t.set;return Object.defineProperty(e,n,{configurable:!0,get:function(){return o.call(this)},set:function(e){r=""+e,a.call(this,e)}}),Object.defineProperty(e,n,{enumerable:t.enumerable}),{getValue:function(){return r},setValue:function(e){r=""+e},stopTracking:function(){e._valueTracker=null,delete e[n]}}}}(e))}function q(e){if(!e)return!1;var n=e._valueTracker;if(!n)return!0;var t=n.getValue(),r="";return e&&(r=W(e)?e.checked?"true":"false":e.value),(e=r)!==t&&(n.setValue(e),!0)}function Y(e){if(void 0===(e=e||("undefined"!=typeof document?document:void 0)))return null;try{return e.activeElement||e.body}catch(n){return e.body}}function K(e,n){var t=n.checked;return D({},n,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:null!=t?t:e._wrapperState.initialChecked})}function X(e,n){var t=null==n.defaultValue?"":n.defaultValue,r=null!=n.checked?n.checked:n.defaultChecked;t=H(null!=n.value?n.value:t),e._wrapperState={initialChecked:r,initialValue:t,controlled:"checkbox"===n.type||"radio"===n.type?null!=n.checked:null!=n.value}}function Q(e,n){null!=(n=n.checked)&&v(e,"checked",n,!1)}function Z(e,n){Q(e,n);var t=H(n.value),r=n.type;if(null!=t)"number"===r?(0===t&&""===e.value||e.value!=t)&&(e.value=""+t):e.value!==""+t&&(e.value=""+t);else if("submit"===r||"reset"===r)return void e.removeAttribute("value");n.hasOwnProperty("value")?ee(e,n.type,t):n.hasOwnProperty("defaultValue")&&ee(e,n.type,H(n.defaultValue)),null==n.checked&&null!=n.defaultChecked&&(e.defaultChecked=!!n.defaultChecked)}function J(e,n,t){if(n.hasOwnProperty("value")||n.hasOwnProperty("defaultValue")){var r=n.type;if(!("submit"!==r&&"reset"!==r||void 0!==n.value&&null!==n.value))return;n=""+e._wrapperState.initialValue,t||n===e.value||(e.value=n),e.defaultValue=n}""!==(t=e.name)&&(e.name=""),e.defaultChecked=!!e._wrapperState.initialChecked,""!==t&&(e.name=t)}function ee(e,n,t){"number"===n&&Y(e.ownerDocument)===e||(null==t?e.defaultValue=""+e._wrapperState.initialValue:e.defaultValue!==""+t&&(e.defaultValue=""+t))}var ne=Array.isArray;function te(e,n,t,r){if(e=e.options,n){n={};for(var o=0;o<t.length;o++)n["$"+t[o]]=!0;for(t=0;t<e.length;t++)o=n.hasOwnProperty("$"+e[t].value),e[t].selected!==o&&(e[t].selected=o),o&&r&&(e[t].defaultSelected=!0)}else{for(t=""+H(t),n=null,o=0;o<e.length;o++){if(e[o].value===t)return e[o].selected=!0,void(r&&(e[o].defaultSelected=!0));null!==n||e[o].disabled||(n=e[o])}null!==n&&(n.selected=!0)}}function re(e,n){if(null!=n.dangerouslySetInnerHTML)throw Error(a(91));return D({},n,{value:void 0,defaultValue:void 0,children:""+e._wrapperState.initialValue})}function oe(e,n){var t=n.value;if(null==t){if(t=n.children,n=n.defaultValue,null!=t){if(null!=n)throw Error(a(92));if(ne(t)){if(1<t.length)throw Error(a(93));t=t[0]}n=t}null==n&&(n=""),t=n}e._wrapperState={initialValue:H(t)}}function ae(e,n){var t=H(n.value),r=H(n.defaultValue);null!=t&&((t=""+t)!==e.value&&(e.value=t),null==n.defaultValue&&e.defaultValue!==t&&(e.defaultValue=t)),null!=r&&(e.defaultValue=""+r)}function ie(e){var n=e.textContent;n===e._wrapperState.initialValue&&""!==n&&null!==n&&(e.value=n)}function se(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 le(e,n){return null==e||"http://www.w3.org/1999/xhtml"===e?se(n):"http://www.w3.org/2000/svg"===e&&"foreignObject"===n?"http://www.w3.org/1999/xhtml":e}var ce,ue,de=(ue=function(e,n){if("http://www.w3.org/2000/svg"!==e.namespaceURI||"innerHTML"in e)e.innerHTML=n;else{for((ce=ce||document.createElement("div")).innerHTML="<svg>"+n.valueOf().toString()+"</svg>",n=ce.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;n.firstChild;)e.appendChild(n.firstChild)}},"undefined"!=typeof MSApp&&MSApp.execUnsafeLocalFunction?function(e,n,t,r){MSApp.execUnsafeLocalFunction((function(){return ue(e,n)}))}:ue);function pe(e,n){if(n){var t=e.firstChild;if(t&&t===e.lastChild&&3===t.nodeType)return void(t.nodeValue=n)}e.textContent=n}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 ge(e,n,t){return null==n||"boolean"==typeof n||""===n?"":t||"number"!=typeof n||0===n||fe.hasOwnProperty(e)&&fe[e]?(""+n).trim():n+"px"}function he(e,n){for(var t in e=e.style,n)if(n.hasOwnProperty(t)){var r=0===t.indexOf("--"),o=ge(t,n[t],r);"float"===t&&(t="cssFloat"),r?e.setProperty(t,o):e[t]=o}}Object.keys(fe).forEach((function(e){me.forEach((function(n){n=n+e.charAt(0).toUpperCase()+e.substring(1),fe[n]=fe[e]}))}));var ye=D({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,n){if(n){if(ye[e]&&(null!=n.children||null!=n.dangerouslySetInnerHTML))throw Error(a(137,e));if(null!=n.dangerouslySetInnerHTML){if(null!=n.children)throw Error(a(60));if("object"!=typeof n.dangerouslySetInnerHTML||!("__html"in n.dangerouslySetInnerHTML))throw Error(a(61))}if(null!=n.style&&"object"!=typeof n.style)throw Error(a(62))}}function ve(e,n){if(-1===e.indexOf("-"))return"string"==typeof n.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 Se=null;function we(e){return(e=e.target||e.srcElement||window).correspondingUseElement&&(e=e.correspondingUseElement),3===e.nodeType?e.parentNode:e}var xe=null,ke=null,Te=null;function Ee(e){if(e=So(e)){if("function"!=typeof xe)throw Error(a(280));var n=e.stateNode;n&&(n=xo(n),xe(e.stateNode,e.type,n))}}function Ce(e){ke?Te?Te.push(e):Te=[e]:ke=e}function _e(){if(ke){var e=ke,n=Te;if(Te=ke=null,Ee(e),n)for(e=0;e<n.length;e++)Ee(n[e])}}function Ae(e,n){return e(n)}function Ie(){}var Pe=!1;function Le(e,n,t){if(Pe)return e(n,t);Pe=!0;try{return Ae(e,n,t)}finally{Pe=!1,(null!==ke||null!==Te)&&(Ie(),_e())}}function Re(e,n){var t=e.stateNode;if(null===t)return null;var r=xo(t);if(null===r)return null;t=r[n];e:switch(n){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(t&&"function"!=typeof t)throw Error(a(231,n,typeof t));return t}var Ne=!1;if(u)try{var Oe={};Object.defineProperty(Oe,"passive",{get:function(){Ne=!0}}),window.addEventListener("test",Oe,Oe),window.removeEventListener("test",Oe,Oe)}catch(ue){Ne=!1}function Fe(e,n,t,r,o,a,i,s,l){var c=Array.prototype.slice.call(arguments,3);try{n.apply(t,c)}catch(u){this.onError(u)}}var je=!1,De=null,Me=!1,Be=null,$e={onError:function(e){je=!0,De=e}};function Ue(e,n,t,r,o,a,i,s,l){je=!1,De=null,Fe.apply($e,arguments)}function Ve(e){var n=e,t=e;if(e.alternate)for(;n.return;)n=n.return;else{e=n;do{0!=(4098&(n=e).flags)&&(t=n.return),e=n.return}while(e)}return 3===n.tag?t:null}function ze(e){if(13===e.tag){var n=e.memoizedState;if(null===n&&(null!==(e=e.alternate)&&(n=e.memoizedState)),null!==n)return n.dehydrated}return null}function He(e){if(Ve(e)!==e)throw Error(a(188))}function We(e){return null!==(e=function(e){var n=e.alternate;if(!n){if(null===(n=Ve(e)))throw Error(a(188));return n!==e?null:e}for(var t=e,r=n;;){var o=t.return;if(null===o)break;var i=o.alternate;if(null===i){if(null!==(r=o.return)){t=r;continue}break}if(o.child===i.child){for(i=o.child;i;){if(i===t)return He(o),e;if(i===r)return He(o),n;i=i.sibling}throw Error(a(188))}if(t.return!==r.return)t=o,r=i;else{for(var s=!1,l=o.child;l;){if(l===t){s=!0,t=o,r=i;break}if(l===r){s=!0,r=o,t=i;break}l=l.sibling}if(!s){for(l=i.child;l;){if(l===t){s=!0,t=i,r=o;break}if(l===r){s=!0,r=i,t=o;break}l=l.sibling}if(!s)throw Error(a(189))}}if(t.alternate!==r)throw Error(a(190))}if(3!==t.tag)throw Error(a(188));return t.stateNode.current===t?e:n}(e))?Ge(e):null}function Ge(e){if(5===e.tag||6===e.tag)return e;for(e=e.child;null!==e;){var n=Ge(e);if(null!==n)return n;e=e.sibling}return null}var qe=o.unstable_scheduleCallback,Ye=o.unstable_cancelCallback,Ke=o.unstable_shouldYield,Xe=o.unstable_requestPaint,Qe=o.unstable_now,Ze=o.unstable_getCurrentPriorityLevel,Je=o.unstable_ImmediatePriority,en=o.unstable_UserBlockingPriority,nn=o.unstable_NormalPriority,tn=o.unstable_LowPriority,rn=o.unstable_IdlePriority,on=null,an=null;var sn=Math.clz32?Math.clz32:function(e){return e>>>=0,0===e?32:31-(ln(e)/cn|0)|0},ln=Math.log,cn=Math.LN2;var un=64,dn=4194304;function pn(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 fn(e,n){var t=e.pendingLanes;if(0===t)return 0;var r=0,o=e.suspendedLanes,a=e.pingedLanes,i=268435455&t;if(0!==i){var s=i&~o;0!==s?r=pn(s):0!==(a&=i)&&(r=pn(a))}else 0!==(i=t&~o)?r=pn(i):0!==a&&(r=pn(a));if(0===r)return 0;if(0!==n&&n!==r&&0==(n&o)&&((o=r&-r)>=(a=n&-n)||16===o&&0!=(4194240&a)))return n;if(0!=(4&r)&&(r|=16&t),0!==(n=e.entangledLanes))for(e=e.entanglements,n&=r;0<n;)o=1<<(t=31-sn(n)),r|=e[t],n&=~o;return r}function mn(e,n){switch(e){case 1:case 2:case 4:return n+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 n+5e3;default:return-1}}function gn(e){return 0!==(e=-1073741825&e.pendingLanes)?e:1073741824&e?1073741824:0}function hn(){var e=un;return 0==(4194240&(un<<=1))&&(un=64),e}function yn(e){for(var n=[],t=0;31>t;t++)n.push(e);return n}function bn(e,n,t){e.pendingLanes|=n,536870912!==n&&(e.suspendedLanes=0,e.pingedLanes=0),(e=e.eventTimes)[n=31-sn(n)]=t}function vn(e,n){var t=e.entangledLanes|=n;for(e=e.entanglements;t;){var r=31-sn(t),o=1<<r;o&n|e[r]&n&&(e[r]|=n),t&=~o}}var Sn=0;function wn(e){return 1<(e&=-e)?4<e?0!=(268435455&e)?16:536870912:4:1}var xn,kn,Tn,En,Cn,_n=!1,An=[],In=null,Pn=null,Ln=null,Rn=new Map,Nn=new Map,On=[],Fn="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 jn(e,n){switch(e){case"focusin":case"focusout":In=null;break;case"dragenter":case"dragleave":Pn=null;break;case"mouseover":case"mouseout":Ln=null;break;case"pointerover":case"pointerout":Rn.delete(n.pointerId);break;case"gotpointercapture":case"lostpointercapture":Nn.delete(n.pointerId)}}function Dn(e,n,t,r,o,a){return null===e||e.nativeEvent!==a?(e={blockedOn:n,domEventName:t,eventSystemFlags:r,nativeEvent:a,targetContainers:[o]},null!==n&&(null!==(n=So(n))&&kn(n)),e):(e.eventSystemFlags|=r,n=e.targetContainers,null!==o&&-1===n.indexOf(o)&&n.push(o),e)}function Mn(e){var n=vo(e.target);if(null!==n){var t=Ve(n);if(null!==t)if(13===(n=t.tag)){if(null!==(n=ze(t)))return e.blockedOn=n,void Cn(e.priority,(function(){Tn(t)}))}else if(3===n&&t.stateNode.current.memoizedState.isDehydrated)return void(e.blockedOn=3===t.tag?t.stateNode.containerInfo:null)}e.blockedOn=null}function Bn(e){if(null!==e.blockedOn)return!1;for(var n=e.targetContainers;0<n.length;){var t=Xn(e.domEventName,e.eventSystemFlags,n[0],e.nativeEvent);if(null!==t)return null!==(n=So(t))&&kn(n),e.blockedOn=t,!1;var r=new(t=e.nativeEvent).constructor(t.type,t);Se=r,t.target.dispatchEvent(r),Se=null,n.shift()}return!0}function $n(e,n,t){Bn(e)&&t.delete(n)}function Un(){_n=!1,null!==In&&Bn(In)&&(In=null),null!==Pn&&Bn(Pn)&&(Pn=null),null!==Ln&&Bn(Ln)&&(Ln=null),Rn.forEach($n),Nn.forEach($n)}function Vn(e,n){e.blockedOn===n&&(e.blockedOn=null,_n||(_n=!0,o.unstable_scheduleCallback(o.unstable_NormalPriority,Un)))}function zn(e){function n(n){return Vn(n,e)}if(0<An.length){Vn(An[0],e);for(var t=1;t<An.length;t++){var r=An[t];r.blockedOn===e&&(r.blockedOn=null)}}for(null!==In&&Vn(In,e),null!==Pn&&Vn(Pn,e),null!==Ln&&Vn(Ln,e),Rn.forEach(n),Nn.forEach(n),t=0;t<On.length;t++)(r=On[t]).blockedOn===e&&(r.blockedOn=null);for(;0<On.length&&null===(t=On[0]).blockedOn;)Mn(t),null===t.blockedOn&&On.shift()}var Hn=S.ReactCurrentBatchConfig,Wn=!0;function Gn(e,n,t,r){var o=Sn,a=Hn.transition;Hn.transition=null;try{Sn=1,Yn(e,n,t,r)}finally{Sn=o,Hn.transition=a}}function qn(e,n,t,r){var o=Sn,a=Hn.transition;Hn.transition=null;try{Sn=4,Yn(e,n,t,r)}finally{Sn=o,Hn.transition=a}}function Yn(e,n,t,r){if(Wn){var o=Xn(e,n,t,r);if(null===o)Hr(e,n,r,Kn,t),jn(e,r);else if(function(e,n,t,r,o){switch(n){case"focusin":return In=Dn(In,e,n,t,r,o),!0;case"dragenter":return Pn=Dn(Pn,e,n,t,r,o),!0;case"mouseover":return Ln=Dn(Ln,e,n,t,r,o),!0;case"pointerover":var a=o.pointerId;return Rn.set(a,Dn(Rn.get(a)||null,e,n,t,r,o)),!0;case"gotpointercapture":return a=o.pointerId,Nn.set(a,Dn(Nn.get(a)||null,e,n,t,r,o)),!0}return!1}(o,e,n,t,r))r.stopPropagation();else if(jn(e,r),4&n&&-1<Fn.indexOf(e)){for(;null!==o;){var a=So(o);if(null!==a&&xn(a),null===(a=Xn(e,n,t,r))&&Hr(e,n,r,Kn,t),a===o)break;o=a}null!==o&&r.stopPropagation()}else Hr(e,n,r,null,t)}}var Kn=null;function Xn(e,n,t,r){if(Kn=null,null!==(e=vo(e=we(r))))if(null===(n=Ve(e)))e=null;else if(13===(t=n.tag)){if(null!==(e=ze(n)))return e;e=null}else if(3===t){if(n.stateNode.current.memoizedState.isDehydrated)return 3===n.tag?n.stateNode.containerInfo:null;e=null}else n!==e&&(e=null);return Kn=e,null}function Qn(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(Ze()){case Je:return 1;case en:return 4;case nn:case tn:return 16;case rn:return 536870912;default:return 16}default:return 16}}var Zn=null,Jn=null,et=null;function nt(){if(et)return et;var e,n,t=Jn,r=t.length,o="value"in Zn?Zn.value:Zn.textContent,a=o.length;for(e=0;e<r&&t[e]===o[e];e++);var i=r-e;for(n=1;n<=i&&t[r-n]===o[a-n];n++);return et=o.slice(e,1<n?1-n:void 0)}function tt(e){var n=e.keyCode;return"charCode"in e?0===(e=e.charCode)&&13===n&&(e=13):e=n,10===e&&(e=13),32<=e||13===e?e:0}function rt(){return!0}function ot(){return!1}function at(e){function n(n,t,r,o,a){for(var i in this._reactName=n,this._targetInst=r,this.type=t,this.nativeEvent=o,this.target=a,this.currentTarget=null,e)e.hasOwnProperty(i)&&(n=e[i],this[i]=n?n(o):o[i]);return this.isDefaultPrevented=(null!=o.defaultPrevented?o.defaultPrevented:!1===o.returnValue)?rt:ot,this.isPropagationStopped=ot,this}return D(n.prototype,{preventDefault:function(){this.defaultPrevented=!0;var e=this.nativeEvent;e&&(e.preventDefault?e.preventDefault():"unknown"!=typeof e.returnValue&&(e.returnValue=!1),this.isDefaultPrevented=rt)},stopPropagation:function(){var e=this.nativeEvent;e&&(e.stopPropagation?e.stopPropagation():"unknown"!=typeof e.cancelBubble&&(e.cancelBubble=!0),this.isPropagationStopped=rt)},persist:function(){},isPersistent:rt}),n}var it,st,lt,ct={eventPhase:0,bubbles:0,cancelable:0,timeStamp:function(e){return e.timeStamp||Date.now()},defaultPrevented:0,isTrusted:0},ut=at(ct),dt=D({},ct,{view:0,detail:0}),pt=at(dt),ft=D({},dt,{screenX:0,screenY:0,clientX:0,clientY:0,pageX:0,pageY:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,getModifierState:Et,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!==lt&&(lt&&"mousemove"===e.type?(it=e.screenX-lt.screenX,st=e.screenY-lt.screenY):st=it=0,lt=e),it)},movementY:function(e){return"movementY"in e?e.movementY:st}}),mt=at(ft),gt=at(D({},ft,{dataTransfer:0})),ht=at(D({},dt,{relatedTarget:0})),yt=at(D({},ct,{animationName:0,elapsedTime:0,pseudoElement:0})),bt=D({},ct,{clipboardData:function(e){return"clipboardData"in e?e.clipboardData:window.clipboardData}}),vt=at(bt),St=at(D({},ct,{data:0})),wt={Esc:"Escape",Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",MozPrintableKey:"Unidentified"},xt={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"},kt={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"};function Tt(e){var n=this.nativeEvent;return n.getModifierState?n.getModifierState(e):!!(e=kt[e])&&!!n[e]}function Et(){return Tt}var Ct=D({},dt,{key:function(e){if(e.key){var n=wt[e.key]||e.key;if("Unidentified"!==n)return n}return"keypress"===e.type?13===(e=tt(e))?"Enter":String.fromCharCode(e):"keydown"===e.type||"keyup"===e.type?xt[e.keyCode]||"Unidentified":""},code:0,location:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,repeat:0,locale:0,getModifierState:Et,charCode:function(e){return"keypress"===e.type?tt(e):0},keyCode:function(e){return"keydown"===e.type||"keyup"===e.type?e.keyCode:0},which:function(e){return"keypress"===e.type?tt(e):"keydown"===e.type||"keyup"===e.type?e.keyCode:0}}),_t=at(Ct),At=at(D({},ft,{pointerId:0,width:0,height:0,pressure:0,tangentialPressure:0,tiltX:0,tiltY:0,twist:0,pointerType:0,isPrimary:0})),It=at(D({},dt,{touches:0,targetTouches:0,changedTouches:0,altKey:0,metaKey:0,ctrlKey:0,shiftKey:0,getModifierState:Et})),Pt=at(D({},ct,{propertyName:0,elapsedTime:0,pseudoElement:0})),Lt=D({},ft,{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}),Rt=at(Lt),Nt=[9,13,27,32],Ot=u&&"CompositionEvent"in window,Ft=null;u&&"documentMode"in document&&(Ft=document.documentMode);var jt=u&&"TextEvent"in window&&!Ft,Dt=u&&(!Ot||Ft&&8<Ft&&11>=Ft),Mt=String.fromCharCode(32),Bt=!1;function $t(e,n){switch(e){case"keyup":return-1!==Nt.indexOf(n.keyCode);case"keydown":return 229!==n.keyCode;case"keypress":case"mousedown":case"focusout":return!0;default:return!1}}function Ut(e){return"object"==typeof(e=e.detail)&&"data"in e?e.data:null}var Vt=!1;var zt={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 Ht(e){var n=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===n?!!zt[e.type]:"textarea"===n}function Wt(e,n,t,r){Ce(r),0<(n=Gr(n,"onChange")).length&&(t=new ut("onChange","change",null,t,r),e.push({event:t,listeners:n}))}var Gt=null,qt=null;function Yt(e){Mr(e,0)}function Kt(e){if(q(wo(e)))return e}function Xt(e,n){if("change"===e)return n}var Qt=!1;if(u){var Zt;if(u){var Jt="oninput"in document;if(!Jt){var er=document.createElement("div");er.setAttribute("oninput","return;"),Jt="function"==typeof er.oninput}Zt=Jt}else Zt=!1;Qt=Zt&&(!document.documentMode||9<document.documentMode)}function nr(){Gt&&(Gt.detachEvent("onpropertychange",tr),qt=Gt=null)}function tr(e){if("value"===e.propertyName&&Kt(qt)){var n=[];Wt(n,qt,e,we(e)),Le(Yt,n)}}function rr(e,n,t){"focusin"===e?(nr(),qt=t,(Gt=n).attachEvent("onpropertychange",tr)):"focusout"===e&&nr()}function or(e){if("selectionchange"===e||"keyup"===e||"keydown"===e)return Kt(qt)}function ar(e,n){if("click"===e)return Kt(n)}function ir(e,n){if("input"===e||"change"===e)return Kt(n)}var sr="function"==typeof Object.is?Object.is:function(e,n){return e===n&&(0!==e||1/e==1/n)||e!=e&&n!=n};function lr(e,n){if(sr(e,n))return!0;if("object"!=typeof e||null===e||"object"!=typeof n||null===n)return!1;var t=Object.keys(e),r=Object.keys(n);if(t.length!==r.length)return!1;for(r=0;r<t.length;r++){var o=t[r];if(!d.call(n,o)||!sr(e[o],n[o]))return!1}return!0}function cr(e){for(;e&&e.firstChild;)e=e.firstChild;return e}function ur(e,n){var t,r=cr(e);for(e=0;r;){if(3===r.nodeType){if(t=e+r.textContent.length,e<=n&&t>=n)return{node:r,offset:n-e};e=t}e:{for(;r;){if(r.nextSibling){r=r.nextSibling;break e}r=r.parentNode}r=void 0}r=cr(r)}}function dr(e,n){return!(!e||!n)&&(e===n||(!e||3!==e.nodeType)&&(n&&3===n.nodeType?dr(e,n.parentNode):"contains"in e?e.contains(n):!!e.compareDocumentPosition&&!!(16&e.compareDocumentPosition(n))))}function pr(){for(var e=window,n=Y();n instanceof e.HTMLIFrameElement;){try{var t="string"==typeof n.contentWindow.location.href}catch(r){t=!1}if(!t)break;n=Y((e=n.contentWindow).document)}return n}function fr(e){var n=e&&e.nodeName&&e.nodeName.toLowerCase();return n&&("input"===n&&("text"===e.type||"search"===e.type||"tel"===e.type||"url"===e.type||"password"===e.type)||"textarea"===n||"true"===e.contentEditable)}function mr(e){var n=pr(),t=e.focusedElem,r=e.selectionRange;if(n!==t&&t&&t.ownerDocument&&dr(t.ownerDocument.documentElement,t)){if(null!==r&&fr(t))if(n=r.start,void 0===(e=r.end)&&(e=n),"selectionStart"in t)t.selectionStart=n,t.selectionEnd=Math.min(e,t.value.length);else if((e=(n=t.ownerDocument||document)&&n.defaultView||window).getSelection){e=e.getSelection();var o=t.textContent.length,a=Math.min(r.start,o);r=void 0===r.end?a:Math.min(r.end,o),!e.extend&&a>r&&(o=r,r=a,a=o),o=ur(t,a);var i=ur(t,r);o&&i&&(1!==e.rangeCount||e.anchorNode!==o.node||e.anchorOffset!==o.offset||e.focusNode!==i.node||e.focusOffset!==i.offset)&&((n=n.createRange()).setStart(o.node,o.offset),e.removeAllRanges(),a>r?(e.addRange(n),e.extend(i.node,i.offset)):(n.setEnd(i.node,i.offset),e.addRange(n)))}for(n=[],e=t;e=e.parentNode;)1===e.nodeType&&n.push({element:e,left:e.scrollLeft,top:e.scrollTop});for("function"==typeof t.focus&&t.focus(),t=0;t<n.length;t++)(e=n[t]).element.scrollLeft=e.left,e.element.scrollTop=e.top}}var gr=u&&"documentMode"in document&&11>=document.documentMode,hr=null,yr=null,br=null,vr=!1;function Sr(e,n,t){var r=t.window===t?t.document:9===t.nodeType?t:t.ownerDocument;vr||null==hr||hr!==Y(r)||("selectionStart"in(r=hr)&&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&&lr(br,r)||(br=r,0<(r=Gr(yr,"onSelect")).length&&(n=new ut("onSelect","select",null,n,t),e.push({event:n,listeners:r}),n.target=hr)))}function wr(e,n){var t={};return t[e.toLowerCase()]=n.toLowerCase(),t["Webkit"+e]="webkit"+n,t["Moz"+e]="moz"+n,t}var xr={animationend:wr("Animation","AnimationEnd"),animationiteration:wr("Animation","AnimationIteration"),animationstart:wr("Animation","AnimationStart"),transitionend:wr("Transition","TransitionEnd")},kr={},Tr={};function Er(e){if(kr[e])return kr[e];if(!xr[e])return e;var n,t=xr[e];for(n in t)if(t.hasOwnProperty(n)&&n in Tr)return kr[e]=t[n];return e}u&&(Tr=document.createElement("div").style,"AnimationEvent"in window||(delete xr.animationend.animation,delete xr.animationiteration.animation,delete xr.animationstart.animation),"TransitionEvent"in window||delete xr.transitionend.transition);var Cr=Er("animationend"),_r=Er("animationiteration"),Ar=Er("animationstart"),Ir=Er("transitionend"),Pr=new Map,Lr="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,n){Pr.set(e,n),l(n,[e])}for(var Nr=0;Nr<Lr.length;Nr++){var Or=Lr[Nr];Rr(Or.toLowerCase(),"on"+(Or[0].toUpperCase()+Or.slice(1)))}Rr(Cr,"onAnimationEnd"),Rr(_r,"onAnimationIteration"),Rr(Ar,"onAnimationStart"),Rr("dblclick","onDoubleClick"),Rr("focusin","onFocus"),Rr("focusout","onBlur"),Rr(Ir,"onTransitionEnd"),c("onMouseEnter",["mouseout","mouseover"]),c("onMouseLeave",["mouseout","mouseover"]),c("onPointerEnter",["pointerout","pointerover"]),c("onPointerLeave",["pointerout","pointerover"]),l("onChange","change click focusin focusout input keydown keyup selectionchange".split(" ")),l("onSelect","focusout contextmenu dragend focusin keydown keyup mousedown mouseup selectionchange".split(" ")),l("onBeforeInput",["compositionend","keypress","textInput","paste"]),l("onCompositionEnd","compositionend focusout keydown keypress keyup mousedown".split(" ")),l("onCompositionStart","compositionstart focusout keydown keypress keyup mousedown".split(" ")),l("onCompositionUpdate","compositionupdate focusout keydown keypress keyup mousedown".split(" "));var Fr="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(" "),jr=new Set("cancel close invalid load scroll toggle".split(" ").concat(Fr));function Dr(e,n,t){var r=e.type||"unknown-event";e.currentTarget=t,function(e,n,t,r,o,i,s,l,c){if(Ue.apply(this,arguments),je){if(!je)throw Error(a(198));var u=De;je=!1,De=null,Me||(Me=!0,Be=u)}}(r,n,void 0,e),e.currentTarget=null}function Mr(e,n){n=0!=(4&n);for(var t=0;t<e.length;t++){var r=e[t],o=r.event;r=r.listeners;e:{var a=void 0;if(n)for(var i=r.length-1;0<=i;i--){var s=r[i],l=s.instance,c=s.currentTarget;if(s=s.listener,l!==a&&o.isPropagationStopped())break e;Dr(o,s,c),a=l}else for(i=0;i<r.length;i++){if(l=(s=r[i]).instance,c=s.currentTarget,s=s.listener,l!==a&&o.isPropagationStopped())break e;Dr(o,s,c),a=l}}}if(Me)throw e=Be,Me=!1,Be=null,e}function Br(e,n){var t=n[ho];void 0===t&&(t=n[ho]=new Set);var r=e+"__bubble";t.has(r)||(zr(n,e,2,!1),t.add(r))}function $r(e,n,t){var r=0;n&&(r|=4),zr(t,e,r,n)}var Ur="_reactListening"+Math.random().toString(36).slice(2);function Vr(e){if(!e[Ur]){e[Ur]=!0,i.forEach((function(n){"selectionchange"!==n&&(jr.has(n)||$r(n,!1,e),$r(n,!0,e))}));var n=9===e.nodeType?e:e.ownerDocument;null===n||n[Ur]||(n[Ur]=!0,$r("selectionchange",!1,n))}}function zr(e,n,t,r){switch(Qn(n)){case 1:var o=Gn;break;case 4:o=qn;break;default:o=Yn}t=o.bind(null,n,t,e),o=void 0,!Ne||"touchstart"!==n&&"touchmove"!==n&&"wheel"!==n||(o=!0),r?void 0!==o?e.addEventListener(n,t,{capture:!0,passive:o}):e.addEventListener(n,t,!0):void 0!==o?e.addEventListener(n,t,{passive:o}):e.addEventListener(n,t,!1)}function Hr(e,n,t,r,o){var a=r;if(0==(1&n)&&0==(2&n)&&null!==r)e:for(;;){if(null===r)return;var i=r.tag;if(3===i||4===i){var s=r.stateNode.containerInfo;if(s===o||8===s.nodeType&&s.parentNode===o)break;if(4===i)for(i=r.return;null!==i;){var l=i.tag;if((3===l||4===l)&&((l=i.stateNode.containerInfo)===o||8===l.nodeType&&l.parentNode===o))return;i=i.return}for(;null!==s;){if(null===(i=vo(s)))return;if(5===(l=i.tag)||6===l){r=a=i;continue e}s=s.parentNode}}r=r.return}Le((function(){var r=a,o=we(t),i=[];e:{var s=Pr.get(e);if(void 0!==s){var l=ut,c=e;switch(e){case"keypress":if(0===tt(t))break e;case"keydown":case"keyup":l=_t;break;case"focusin":c="focus",l=ht;break;case"focusout":c="blur",l=ht;break;case"beforeblur":case"afterblur":l=ht;break;case"click":if(2===t.button)break e;case"auxclick":case"dblclick":case"mousedown":case"mousemove":case"mouseup":case"mouseout":case"mouseover":case"contextmenu":l=mt;break;case"drag":case"dragend":case"dragenter":case"dragexit":case"dragleave":case"dragover":case"dragstart":case"drop":l=gt;break;case"touchcancel":case"touchend":case"touchmove":case"touchstart":l=It;break;case Cr:case _r:case Ar:l=yt;break;case Ir:l=Pt;break;case"scroll":l=pt;break;case"wheel":l=Rt;break;case"copy":case"cut":case"paste":l=vt;break;case"gotpointercapture":case"lostpointercapture":case"pointercancel":case"pointerdown":case"pointermove":case"pointerout":case"pointerover":case"pointerup":l=At}var u=0!=(4&n),d=!u&&"scroll"===e,p=u?null!==s?s+"Capture":null:s;u=[];for(var f,m=r;null!==m;){var g=(f=m).stateNode;if(5===f.tag&&null!==g&&(f=g,null!==p&&(null!=(g=Re(m,p))&&u.push(Wr(m,g,f)))),d)break;m=m.return}0<u.length&&(s=new l(s,c,null,t,o),i.push({event:s,listeners:u}))}}if(0==(7&n)){if(l="mouseout"===e||"pointerout"===e,(!(s="mouseover"===e||"pointerover"===e)||t===Se||!(c=t.relatedTarget||t.fromElement)||!vo(c)&&!c[go])&&(l||s)&&(s=o.window===o?o:(s=o.ownerDocument)?s.defaultView||s.parentWindow:window,l?(l=r,null!==(c=(c=t.relatedTarget||t.toElement)?vo(c):null)&&(c!==(d=Ve(c))||5!==c.tag&&6!==c.tag)&&(c=null)):(l=null,c=r),l!==c)){if(u=mt,g="onMouseLeave",p="onMouseEnter",m="mouse","pointerout"!==e&&"pointerover"!==e||(u=At,g="onPointerLeave",p="onPointerEnter",m="pointer"),d=null==l?s:wo(l),f=null==c?s:wo(c),(s=new u(g,m+"leave",l,t,o)).target=d,s.relatedTarget=f,g=null,vo(o)===r&&((u=new u(p,m+"enter",c,t,o)).target=f,u.relatedTarget=d,g=u),d=g,l&&c)e:{for(p=c,m=0,f=u=l;f;f=qr(f))m++;for(f=0,g=p;g;g=qr(g))f++;for(;0<m-f;)u=qr(u),m--;for(;0<f-m;)p=qr(p),f--;for(;m--;){if(u===p||null!==p&&u===p.alternate)break e;u=qr(u),p=qr(p)}u=null}else u=null;null!==l&&Yr(i,s,l,u,!1),null!==c&&null!==d&&Yr(i,d,c,u,!0)}if("select"===(l=(s=r?wo(r):window).nodeName&&s.nodeName.toLowerCase())||"input"===l&&"file"===s.type)var h=Xt;else if(Ht(s))if(Qt)h=ir;else{h=or;var y=rr}else(l=s.nodeName)&&"input"===l.toLowerCase()&&("checkbox"===s.type||"radio"===s.type)&&(h=ar);switch(h&&(h=h(e,r))?Wt(i,h,t,o):(y&&y(e,s,r),"focusout"===e&&(y=s._wrapperState)&&y.controlled&&"number"===s.type&&ee(s,"number",s.value)),y=r?wo(r):window,e){case"focusin":(Ht(y)||"true"===y.contentEditable)&&(hr=y,yr=r,br=null);break;case"focusout":br=yr=hr=null;break;case"mousedown":vr=!0;break;case"contextmenu":case"mouseup":case"dragend":vr=!1,Sr(i,t,o);break;case"selectionchange":if(gr)break;case"keydown":case"keyup":Sr(i,t,o)}var b;if(Ot)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 Vt?$t(e,t)&&(v="onCompositionEnd"):"keydown"===e&&229===t.keyCode&&(v="onCompositionStart");v&&(Dt&&"ko"!==t.locale&&(Vt||"onCompositionStart"!==v?"onCompositionEnd"===v&&Vt&&(b=nt()):(Jn="value"in(Zn=o)?Zn.value:Zn.textContent,Vt=!0)),0<(y=Gr(r,v)).length&&(v=new St(v,e,null,t,o),i.push({event:v,listeners:y}),b?v.data=b:null!==(b=Ut(t))&&(v.data=b))),(b=jt?function(e,n){switch(e){case"compositionend":return Ut(n);case"keypress":return 32!==n.which?null:(Bt=!0,Mt);case"textInput":return(e=n.data)===Mt&&Bt?null:e;default:return null}}(e,t):function(e,n){if(Vt)return"compositionend"===e||!Ot&&$t(e,n)?(e=nt(),et=Jn=Zn=null,Vt=!1,e):null;switch(e){case"paste":default:return null;case"keypress":if(!(n.ctrlKey||n.altKey||n.metaKey)||n.ctrlKey&&n.altKey){if(n.char&&1<n.char.length)return n.char;if(n.which)return String.fromCharCode(n.which)}return null;case"compositionend":return Dt&&"ko"!==n.locale?null:n.data}}(e,t))&&(0<(r=Gr(r,"onBeforeInput")).length&&(o=new St("onBeforeInput","beforeinput",null,t,o),i.push({event:o,listeners:r}),o.data=b))}Mr(i,n)}))}function Wr(e,n,t){return{instance:e,listener:n,currentTarget:t}}function Gr(e,n){for(var t=n+"Capture",r=[];null!==e;){var o=e,a=o.stateNode;5===o.tag&&null!==a&&(o=a,null!=(a=Re(e,t))&&r.unshift(Wr(e,a,o)),null!=(a=Re(e,n))&&r.push(Wr(e,a,o))),e=e.return}return r}function qr(e){if(null===e)return null;do{e=e.return}while(e&&5!==e.tag);return e||null}function Yr(e,n,t,r,o){for(var a=n._reactName,i=[];null!==t&&t!==r;){var s=t,l=s.alternate,c=s.stateNode;if(null!==l&&l===r)break;5===s.tag&&null!==c&&(s=c,o?null!=(l=Re(t,a))&&i.unshift(Wr(t,l,s)):o||null!=(l=Re(t,a))&&i.push(Wr(t,l,s))),t=t.return}0!==i.length&&e.push({event:n,listeners:i})}var Kr=/\r\n?/g,Xr=/\u0000|\uFFFD/g;function Qr(e){return("string"==typeof e?e:""+e).replace(Kr,"\n").replace(Xr,"")}function Zr(e,n,t){if(n=Qr(n),Qr(e)!==n&&t)throw Error(a(425))}function Jr(){}var eo=null,no=null;function to(e,n){return"textarea"===e||"noscript"===e||"string"==typeof n.children||"number"==typeof n.children||"object"==typeof n.dangerouslySetInnerHTML&&null!==n.dangerouslySetInnerHTML&&null!=n.dangerouslySetInnerHTML.__html}var ro="function"==typeof setTimeout?setTimeout:void 0,oo="function"==typeof clearTimeout?clearTimeout:void 0,ao="function"==typeof Promise?Promise:void 0,io="function"==typeof queueMicrotask?queueMicrotask:void 0!==ao?function(e){return ao.resolve(null).then(e).catch(so)}:ro;function so(e){setTimeout((function(){throw e}))}function lo(e,n){var t=n,r=0;do{var o=t.nextSibling;if(e.removeChild(t),o&&8===o.nodeType)if("/$"===(t=o.data)){if(0===r)return e.removeChild(o),void zn(n);r--}else"$"!==t&&"$?"!==t&&"$!"!==t||r++;t=o}while(t);zn(n)}function co(e){for(;null!=e;e=e.nextSibling){var n=e.nodeType;if(1===n||3===n)break;if(8===n){if("$"===(n=e.data)||"$!"===n||"$?"===n)break;if("/$"===n)return null}}return e}function uo(e){e=e.previousSibling;for(var n=0;e;){if(8===e.nodeType){var t=e.data;if("$"===t||"$!"===t||"$?"===t){if(0===n)return e;n--}else"/$"===t&&n++}e=e.previousSibling}return null}var po=Math.random().toString(36).slice(2),fo="__reactFiber$"+po,mo="__reactProps$"+po,go="__reactContainer$"+po,ho="__reactEvents$"+po,yo="__reactListeners$"+po,bo="__reactHandles$"+po;function vo(e){var n=e[fo];if(n)return n;for(var t=e.parentNode;t;){if(n=t[go]||t[fo]){if(t=n.alternate,null!==n.child||null!==t&&null!==t.child)for(e=uo(e);null!==e;){if(t=e[fo])return t;e=uo(e)}return n}t=(e=t).parentNode}return null}function So(e){return!(e=e[fo]||e[go])||5!==e.tag&&6!==e.tag&&13!==e.tag&&3!==e.tag?null:e}function wo(e){if(5===e.tag||6===e.tag)return e.stateNode;throw Error(a(33))}function xo(e){return e[mo]||null}var ko=[],To=-1;function Eo(e){return{current:e}}function Co(e){0>To||(e.current=ko[To],ko[To]=null,To--)}function _o(e,n){To++,ko[To]=e.current,e.current=n}var Ao={},Io=Eo(Ao),Po=Eo(!1),Lo=Ao;function Ro(e,n){var t=e.type.contextTypes;if(!t)return Ao;var r=e.stateNode;if(r&&r.__reactInternalMemoizedUnmaskedChildContext===n)return r.__reactInternalMemoizedMaskedChildContext;var o,a={};for(o in t)a[o]=n[o];return r&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=n,e.__reactInternalMemoizedMaskedChildContext=a),a}function No(e){return null!=(e=e.childContextTypes)}function Oo(){Co(Po),Co(Io)}function Fo(e,n,t){if(Io.current!==Ao)throw Error(a(168));_o(Io,n),_o(Po,t)}function jo(e,n,t){var r=e.stateNode;if(n=n.childContextTypes,"function"!=typeof r.getChildContext)return t;for(var o in r=r.getChildContext())if(!(o in n))throw Error(a(108,z(e)||"Unknown",o));return D({},t,r)}function Do(e){return e=(e=e.stateNode)&&e.__reactInternalMemoizedMergedChildContext||Ao,Lo=Io.current,_o(Io,e),_o(Po,Po.current),!0}function Mo(e,n,t){var r=e.stateNode;if(!r)throw Error(a(169));t?(e=jo(e,n,Lo),r.__reactInternalMemoizedMergedChildContext=e,Co(Po),Co(Io),_o(Io,e)):Co(Po),_o(Po,t)}var Bo=null,$o=!1,Uo=!1;function Vo(e){null===Bo?Bo=[e]:Bo.push(e)}function zo(){if(!Uo&&null!==Bo){Uo=!0;var e=0,n=Sn;try{var t=Bo;for(Sn=1;e<t.length;e++){var r=t[e];do{r=r(!0)}while(null!==r)}Bo=null,$o=!1}catch(o){throw null!==Bo&&(Bo=Bo.slice(e+1)),qe(Je,zo),o}finally{Sn=n,Uo=!1}}return null}var Ho=[],Wo=0,Go=null,qo=0,Yo=[],Ko=0,Xo=null,Qo=1,Zo="";function Jo(e,n){Ho[Wo++]=qo,Ho[Wo++]=Go,Go=e,qo=n}function ea(e,n,t){Yo[Ko++]=Qo,Yo[Ko++]=Zo,Yo[Ko++]=Xo,Xo=e;var r=Qo;e=Zo;var o=32-sn(r)-1;r&=~(1<<o),t+=1;var a=32-sn(n)+o;if(30<a){var i=o-o%5;a=(r&(1<<i)-1).toString(32),r>>=i,o-=i,Qo=1<<32-sn(n)+o|t<<o|r,Zo=a+e}else Qo=1<<a|t<<o|r,Zo=e}function na(e){null!==e.return&&(Jo(e,1),ea(e,1,0))}function ta(e){for(;e===Go;)Go=Ho[--Wo],Ho[Wo]=null,qo=Ho[--Wo],Ho[Wo]=null;for(;e===Xo;)Xo=Yo[--Ko],Yo[Ko]=null,Zo=Yo[--Ko],Yo[Ko]=null,Qo=Yo[--Ko],Yo[Ko]=null}var ra=null,oa=null,aa=!1,ia=null;function sa(e,n){var t=Rc(5,null,null,0);t.elementType="DELETED",t.stateNode=n,t.return=e,null===(n=e.deletions)?(e.deletions=[t],e.flags|=16):n.push(t)}function la(e,n){switch(e.tag){case 5:var t=e.type;return null!==(n=1!==n.nodeType||t.toLowerCase()!==n.nodeName.toLowerCase()?null:n)&&(e.stateNode=n,ra=e,oa=co(n.firstChild),!0);case 6:return null!==(n=""===e.pendingProps||3!==n.nodeType?null:n)&&(e.stateNode=n,ra=e,oa=null,!0);case 13:return null!==(n=8!==n.nodeType?null:n)&&(t=null!==Xo?{id:Qo,overflow:Zo}:null,e.memoizedState={dehydrated:n,treeContext:t,retryLane:1073741824},(t=Rc(18,null,null,0)).stateNode=n,t.return=e,e.child=t,ra=e,oa=null,!0);default:return!1}}function ca(e){return 0!=(1&e.mode)&&0==(128&e.flags)}function ua(e){if(aa){var n=oa;if(n){var t=n;if(!la(e,n)){if(ca(e))throw Error(a(418));n=co(t.nextSibling);var r=ra;n&&la(e,n)?sa(r,t):(e.flags=-4097&e.flags|2,aa=!1,ra=e)}}else{if(ca(e))throw Error(a(418));e.flags=-4097&e.flags|2,aa=!1,ra=e}}}function da(e){for(e=e.return;null!==e&&5!==e.tag&&3!==e.tag&&13!==e.tag;)e=e.return;ra=e}function pa(e){if(e!==ra)return!1;if(!aa)return da(e),aa=!0,!1;var n;if((n=3!==e.tag)&&!(n=5!==e.tag)&&(n="head"!==(n=e.type)&&"body"!==n&&!to(e.type,e.memoizedProps)),n&&(n=oa)){if(ca(e))throw fa(),Error(a(418));for(;n;)sa(e,n),n=co(n.nextSibling)}if(da(e),13===e.tag){if(!(e=null!==(e=e.memoizedState)?e.dehydrated:null))throw Error(a(317));e:{for(e=e.nextSibling,n=0;e;){if(8===e.nodeType){var t=e.data;if("/$"===t){if(0===n){oa=co(e.nextSibling);break e}n--}else"$"!==t&&"$!"!==t&&"$?"!==t||n++}e=e.nextSibling}oa=null}}else oa=ra?co(e.stateNode.nextSibling):null;return!0}function fa(){for(var e=oa;e;)e=co(e.nextSibling)}function ma(){oa=ra=null,aa=!1}function ga(e){null===ia?ia=[e]:ia.push(e)}var ha=S.ReactCurrentBatchConfig;function ya(e,n){if(e&&e.defaultProps){for(var t in n=D({},n),e=e.defaultProps)void 0===n[t]&&(n[t]=e[t]);return n}return n}var ba=Eo(null),va=null,Sa=null,wa=null;function xa(){wa=Sa=va=null}function ka(e){var n=ba.current;Co(ba),e._currentValue=n}function Ta(e,n,t){for(;null!==e;){var r=e.alternate;if((e.childLanes&n)!==n?(e.childLanes|=n,null!==r&&(r.childLanes|=n)):null!==r&&(r.childLanes&n)!==n&&(r.childLanes|=n),e===t)break;e=e.return}}function Ea(e,n){va=e,wa=Sa=null,null!==(e=e.dependencies)&&null!==e.firstContext&&(0!=(e.lanes&n)&&(Ss=!0),e.firstContext=null)}function Ca(e){var n=e._currentValue;if(wa!==e)if(e={context:e,memoizedValue:n,next:null},null===Sa){if(null===va)throw Error(a(308));Sa=e,va.dependencies={lanes:0,firstContext:e}}else Sa=Sa.next=e;return n}var _a=null;function Aa(e){null===_a?_a=[e]:_a.push(e)}function Ia(e,n,t,r){var o=n.interleaved;return null===o?(t.next=t,Aa(n)):(t.next=o.next,o.next=t),n.interleaved=t,Pa(e,r)}function Pa(e,n){e.lanes|=n;var t=e.alternate;for(null!==t&&(t.lanes|=n),t=e,e=e.return;null!==e;)e.childLanes|=n,null!==(t=e.alternate)&&(t.childLanes|=n),t=e,e=e.return;return 3===t.tag?t.stateNode:null}var La=!1;function Ra(e){e.updateQueue={baseState:e.memoizedState,firstBaseUpdate:null,lastBaseUpdate:null,shared:{pending:null,interleaved:null,lanes:0},effects:null}}function Na(e,n){e=e.updateQueue,n.updateQueue===e&&(n.updateQueue={baseState:e.baseState,firstBaseUpdate:e.firstBaseUpdate,lastBaseUpdate:e.lastBaseUpdate,shared:e.shared,effects:e.effects})}function Oa(e,n){return{eventTime:e,lane:n,tag:0,payload:null,callback:null,next:null}}function Fa(e,n,t){var r=e.updateQueue;if(null===r)return null;if(r=r.shared,0!=(2&Il)){var o=r.pending;return null===o?n.next=n:(n.next=o.next,o.next=n),r.pending=n,Pa(e,t)}return null===(o=r.interleaved)?(n.next=n,Aa(r)):(n.next=o.next,o.next=n),r.interleaved=n,Pa(e,t)}function ja(e,n,t){if(null!==(n=n.updateQueue)&&(n=n.shared,0!=(4194240&t))){var r=n.lanes;t|=r&=e.pendingLanes,n.lanes=t,vn(e,t)}}function Da(e,n){var t=e.updateQueue,r=e.alternate;if(null!==r&&t===(r=r.updateQueue)){var o=null,a=null;if(null!==(t=t.firstBaseUpdate)){do{var i={eventTime:t.eventTime,lane:t.lane,tag:t.tag,payload:t.payload,callback:t.callback,next:null};null===a?o=a=i:a=a.next=i,t=t.next}while(null!==t);null===a?o=a=n:a=a.next=n}else o=a=n;return t={baseState:r.baseState,firstBaseUpdate:o,lastBaseUpdate:a,shared:r.shared,effects:r.effects},void(e.updateQueue=t)}null===(e=t.lastBaseUpdate)?t.firstBaseUpdate=n:e.next=n,t.lastBaseUpdate=n}function Ma(e,n,t,r){var o=e.updateQueue;La=!1;var a=o.firstBaseUpdate,i=o.lastBaseUpdate,s=o.shared.pending;if(null!==s){o.shared.pending=null;var l=s,c=l.next;l.next=null,null===i?a=c:i.next=c,i=l;var u=e.alternate;null!==u&&((s=(u=u.updateQueue).lastBaseUpdate)!==i&&(null===s?u.firstBaseUpdate=c:s.next=c,u.lastBaseUpdate=l))}if(null!==a){var d=o.baseState;for(i=0,u=c=l=null,s=a;;){var p=s.lane,f=s.eventTime;if((r&p)===p){null!==u&&(u=u.next={eventTime:f,lane:0,tag:s.tag,payload:s.payload,callback:s.callback,next:null});e:{var m=e,g=s;switch(p=n,f=t,g.tag){case 1:if("function"==typeof(m=g.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=g.payload)?m.call(f,d,p):m))break e;d=D({},d,p);break e;case 2:La=!0}}null!==s.callback&&0!==s.lane&&(e.flags|=64,null===(p=o.effects)?o.effects=[s]:p.push(s))}else f={eventTime:f,lane:p,tag:s.tag,payload:s.payload,callback:s.callback,next:null},null===u?(c=u=f,l=d):u=u.next=f,i|=p;if(null===(s=s.next)){if(null===(s=o.shared.pending))break;s=(p=s).next,p.next=null,o.lastBaseUpdate=p,o.shared.pending=null}}if(null===u&&(l=d),o.baseState=l,o.firstBaseUpdate=c,o.lastBaseUpdate=u,null!==(n=o.shared.interleaved)){o=n;do{i|=o.lane,o=o.next}while(o!==n)}else null===a&&(o.shared.lanes=0);Dl|=i,e.lanes=i,e.memoizedState=d}}function Ba(e,n,t){if(e=n.effects,n.effects=null,null!==e)for(n=0;n<e.length;n++){var r=e[n],o=r.callback;if(null!==o){if(r.callback=null,r=t,"function"!=typeof o)throw Error(a(191,o));o.call(r)}}}var $a=(new r.Component).refs;function Ua(e,n,t,r){t=null==(t=t(r,n=e.memoizedState))?n:D({},n,t),e.memoizedState=t,0===e.lanes&&(e.updateQueue.baseState=t)}var Va={isMounted:function(e){return!!(e=e._reactInternals)&&Ve(e)===e},enqueueSetState:function(e,n,t){e=e._reactInternals;var r=nc(),o=tc(e),a=Oa(r,o);a.payload=n,null!=t&&(a.callback=t),null!==(n=Fa(e,a,o))&&(rc(n,e,o,r),ja(n,e,o))},enqueueReplaceState:function(e,n,t){e=e._reactInternals;var r=nc(),o=tc(e),a=Oa(r,o);a.tag=1,a.payload=n,null!=t&&(a.callback=t),null!==(n=Fa(e,a,o))&&(rc(n,e,o,r),ja(n,e,o))},enqueueForceUpdate:function(e,n){e=e._reactInternals;var t=nc(),r=tc(e),o=Oa(t,r);o.tag=2,null!=n&&(o.callback=n),null!==(n=Fa(e,o,r))&&(rc(n,e,r,t),ja(n,e,r))}};function za(e,n,t,r,o,a,i){return"function"==typeof(e=e.stateNode).shouldComponentUpdate?e.shouldComponentUpdate(r,a,i):!n.prototype||!n.prototype.isPureReactComponent||(!lr(t,r)||!lr(o,a))}function Ha(e,n,t){var r=!1,o=Ao,a=n.contextType;return"object"==typeof a&&null!==a?a=Ca(a):(o=No(n)?Lo:Io.current,a=(r=null!=(r=n.contextTypes))?Ro(e,o):Ao),n=new n(t,a),e.memoizedState=null!==n.state&&void 0!==n.state?n.state:null,n.updater=Va,e.stateNode=n,n._reactInternals=e,r&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=o,e.__reactInternalMemoizedMaskedChildContext=a),n}function Wa(e,n,t,r){e=n.state,"function"==typeof n.componentWillReceiveProps&&n.componentWillReceiveProps(t,r),"function"==typeof n.UNSAFE_componentWillReceiveProps&&n.UNSAFE_componentWillReceiveProps(t,r),n.state!==e&&Va.enqueueReplaceState(n,n.state,null)}function Ga(e,n,t,r){var o=e.stateNode;o.props=t,o.state=e.memoizedState,o.refs=$a,Ra(e);var a=n.contextType;"object"==typeof a&&null!==a?o.context=Ca(a):(a=No(n)?Lo:Io.current,o.context=Ro(e,a)),o.state=e.memoizedState,"function"==typeof(a=n.getDerivedStateFromProps)&&(Ua(e,n,a,t),o.state=e.memoizedState),"function"==typeof n.getDerivedStateFromProps||"function"==typeof o.getSnapshotBeforeUpdate||"function"!=typeof o.UNSAFE_componentWillMount&&"function"!=typeof o.componentWillMount||(n=o.state,"function"==typeof o.componentWillMount&&o.componentWillMount(),"function"==typeof o.UNSAFE_componentWillMount&&o.UNSAFE_componentWillMount(),n!==o.state&&Va.enqueueReplaceState(o,o.state,null),Ma(e,t,o,r),o.state=e.memoizedState),"function"==typeof o.componentDidMount&&(e.flags|=4194308)}function qa(e,n,t){if(null!==(e=t.ref)&&"function"!=typeof e&&"object"!=typeof e){if(t._owner){if(t=t._owner){if(1!==t.tag)throw Error(a(309));var r=t.stateNode}if(!r)throw Error(a(147,e));var o=r,i=""+e;return null!==n&&null!==n.ref&&"function"==typeof n.ref&&n.ref._stringRef===i?n.ref:(n=function(e){var n=o.refs;n===$a&&(n=o.refs={}),null===e?delete n[i]:n[i]=e},n._stringRef=i,n)}if("string"!=typeof e)throw Error(a(284));if(!t._owner)throw Error(a(290,e))}return e}function Ya(e,n){throw e=Object.prototype.toString.call(n),Error(a(31,"[object Object]"===e?"object with keys {"+Object.keys(n).join(", ")+"}":e))}function Ka(e){return(0,e._init)(e._payload)}function Xa(e){function n(n,t){if(e){var r=n.deletions;null===r?(n.deletions=[t],n.flags|=16):r.push(t)}}function t(t,r){if(!e)return null;for(;null!==r;)n(t,r),r=r.sibling;return null}function r(e,n){for(e=new Map;null!==n;)null!==n.key?e.set(n.key,n):e.set(n.index,n),n=n.sibling;return e}function o(e,n){return(e=Oc(e,n)).index=0,e.sibling=null,e}function i(n,t,r){return n.index=r,e?null!==(r=n.alternate)?(r=r.index)<t?(n.flags|=2,t):r:(n.flags|=2,t):(n.flags|=1048576,t)}function s(n){return e&&null===n.alternate&&(n.flags|=2),n}function l(e,n,t,r){return null===n||6!==n.tag?((n=Mc(t,e.mode,r)).return=e,n):((n=o(n,t)).return=e,n)}function c(e,n,t,r){var a=t.type;return a===k?d(e,n,t.props.children,r,t.key):null!==n&&(n.elementType===a||"object"==typeof a&&null!==a&&a.$$typeof===R&&Ka(a)===n.type)?((r=o(n,t.props)).ref=qa(e,n,t),r.return=e,r):((r=Fc(t.type,t.key,t.props,null,e.mode,r)).ref=qa(e,n,t),r.return=e,r)}function u(e,n,t,r){return null===n||4!==n.tag||n.stateNode.containerInfo!==t.containerInfo||n.stateNode.implementation!==t.implementation?((n=Bc(t,e.mode,r)).return=e,n):((n=o(n,t.children||[])).return=e,n)}function d(e,n,t,r,a){return null===n||7!==n.tag?((n=jc(t,e.mode,r,a)).return=e,n):((n=o(n,t)).return=e,n)}function p(e,n,t){if("string"==typeof n&&""!==n||"number"==typeof n)return(n=Mc(""+n,e.mode,t)).return=e,n;if("object"==typeof n&&null!==n){switch(n.$$typeof){case w:return(t=Fc(n.type,n.key,n.props,null,e.mode,t)).ref=qa(e,null,n),t.return=e,t;case x:return(n=Bc(n,e.mode,t)).return=e,n;case R:return p(e,(0,n._init)(n._payload),t)}if(ne(n)||F(n))return(n=jc(n,e.mode,t,null)).return=e,n;Ya(e,n)}return null}function f(e,n,t,r){var o=null!==n?n.key:null;if("string"==typeof t&&""!==t||"number"==typeof t)return null!==o?null:l(e,n,""+t,r);if("object"==typeof t&&null!==t){switch(t.$$typeof){case w:return t.key===o?c(e,n,t,r):null;case x:return t.key===o?u(e,n,t,r):null;case R:return f(e,n,(o=t._init)(t._payload),r)}if(ne(t)||F(t))return null!==o?null:d(e,n,t,r,null);Ya(e,t)}return null}function m(e,n,t,r,o){if("string"==typeof r&&""!==r||"number"==typeof r)return l(n,e=e.get(t)||null,""+r,o);if("object"==typeof r&&null!==r){switch(r.$$typeof){case w:return c(n,e=e.get(null===r.key?t:r.key)||null,r,o);case x:return u(n,e=e.get(null===r.key?t:r.key)||null,r,o);case R:return m(e,n,t,(0,r._init)(r._payload),o)}if(ne(r)||F(r))return d(n,e=e.get(t)||null,r,o,null);Ya(n,r)}return null}function g(o,a,s,l){for(var c=null,u=null,d=a,g=a=0,h=null;null!==d&&g<s.length;g++){d.index>g?(h=d,d=null):h=d.sibling;var y=f(o,d,s[g],l);if(null===y){null===d&&(d=h);break}e&&d&&null===y.alternate&&n(o,d),a=i(y,a,g),null===u?c=y:u.sibling=y,u=y,d=h}if(g===s.length)return t(o,d),aa&&Jo(o,g),c;if(null===d){for(;g<s.length;g++)null!==(d=p(o,s[g],l))&&(a=i(d,a,g),null===u?c=d:u.sibling=d,u=d);return aa&&Jo(o,g),c}for(d=r(o,d);g<s.length;g++)null!==(h=m(d,o,g,s[g],l))&&(e&&null!==h.alternate&&d.delete(null===h.key?g:h.key),a=i(h,a,g),null===u?c=h:u.sibling=h,u=h);return e&&d.forEach((function(e){return n(o,e)})),aa&&Jo(o,g),c}function h(o,s,l,c){var u=F(l);if("function"!=typeof u)throw Error(a(150));if(null==(l=u.call(l)))throw Error(a(151));for(var d=u=null,g=s,h=s=0,y=null,b=l.next();null!==g&&!b.done;h++,b=l.next()){g.index>h?(y=g,g=null):y=g.sibling;var v=f(o,g,b.value,c);if(null===v){null===g&&(g=y);break}e&&g&&null===v.alternate&&n(o,g),s=i(v,s,h),null===d?u=v:d.sibling=v,d=v,g=y}if(b.done)return t(o,g),aa&&Jo(o,h),u;if(null===g){for(;!b.done;h++,b=l.next())null!==(b=p(o,b.value,c))&&(s=i(b,s,h),null===d?u=b:d.sibling=b,d=b);return aa&&Jo(o,h),u}for(g=r(o,g);!b.done;h++,b=l.next())null!==(b=m(g,o,h,b.value,c))&&(e&&null!==b.alternate&&g.delete(null===b.key?h:b.key),s=i(b,s,h),null===d?u=b:d.sibling=b,d=b);return e&&g.forEach((function(e){return n(o,e)})),aa&&Jo(o,h),u}return function e(r,a,i,l){if("object"==typeof i&&null!==i&&i.type===k&&null===i.key&&(i=i.props.children),"object"==typeof i&&null!==i){switch(i.$$typeof){case w:e:{for(var c=i.key,u=a;null!==u;){if(u.key===c){if((c=i.type)===k){if(7===u.tag){t(r,u.sibling),(a=o(u,i.props.children)).return=r,r=a;break e}}else if(u.elementType===c||"object"==typeof c&&null!==c&&c.$$typeof===R&&Ka(c)===u.type){t(r,u.sibling),(a=o(u,i.props)).ref=qa(r,u,i),a.return=r,r=a;break e}t(r,u);break}n(r,u),u=u.sibling}i.type===k?((a=jc(i.props.children,r.mode,l,i.key)).return=r,r=a):((l=Fc(i.type,i.key,i.props,null,r.mode,l)).ref=qa(r,a,i),l.return=r,r=l)}return s(r);case x:e:{for(u=i.key;null!==a;){if(a.key===u){if(4===a.tag&&a.stateNode.containerInfo===i.containerInfo&&a.stateNode.implementation===i.implementation){t(r,a.sibling),(a=o(a,i.children||[])).return=r,r=a;break e}t(r,a);break}n(r,a),a=a.sibling}(a=Bc(i,r.mode,l)).return=r,r=a}return s(r);case R:return e(r,a,(u=i._init)(i._payload),l)}if(ne(i))return g(r,a,i,l);if(F(i))return h(r,a,i,l);Ya(r,i)}return"string"==typeof i&&""!==i||"number"==typeof i?(i=""+i,null!==a&&6===a.tag?(t(r,a.sibling),(a=o(a,i)).return=r,r=a):(t(r,a),(a=Mc(i,r.mode,l)).return=r,r=a),s(r)):t(r,a)}}var Qa=Xa(!0),Za=Xa(!1),Ja={},ei=Eo(Ja),ni=Eo(Ja),ti=Eo(Ja);function ri(e){if(e===Ja)throw Error(a(174));return e}function oi(e,n){switch(_o(ti,n),_o(ni,e),_o(ei,Ja),e=n.nodeType){case 9:case 11:n=(n=n.documentElement)?n.namespaceURI:le(null,"");break;default:n=le(n=(e=8===e?n.parentNode:n).namespaceURI||null,e=e.tagName)}Co(ei),_o(ei,n)}function ai(){Co(ei),Co(ni),Co(ti)}function ii(e){ri(ti.current);var n=ri(ei.current),t=le(n,e.type);n!==t&&(_o(ni,e),_o(ei,t))}function si(e){ni.current===e&&(Co(ei),Co(ni))}var li=Eo(0);function ci(e){for(var n=e;null!==n;){if(13===n.tag){var t=n.memoizedState;if(null!==t&&(null===(t=t.dehydrated)||"$?"===t.data||"$!"===t.data))return n}else if(19===n.tag&&void 0!==n.memoizedProps.revealOrder){if(0!=(128&n.flags))return n}else if(null!==n.child){n.child.return=n,n=n.child;continue}if(n===e)break;for(;null===n.sibling;){if(null===n.return||n.return===e)return null;n=n.return}n.sibling.return=n.return,n=n.sibling}return null}var ui=[];function di(){for(var e=0;e<ui.length;e++)ui[e]._workInProgressVersionPrimary=null;ui.length=0}var pi=S.ReactCurrentDispatcher,fi=S.ReactCurrentBatchConfig,mi=0,gi=null,hi=null,yi=null,bi=!1,vi=!1,Si=0,wi=0;function xi(){throw Error(a(321))}function ki(e,n){if(null===n)return!1;for(var t=0;t<n.length&&t<e.length;t++)if(!sr(e[t],n[t]))return!1;return!0}function Ti(e,n,t,r,o,i){if(mi=i,gi=n,n.memoizedState=null,n.updateQueue=null,n.lanes=0,pi.current=null===e||null===e.memoizedState?ss:ls,e=t(r,o),vi){i=0;do{if(vi=!1,Si=0,25<=i)throw Error(a(301));i+=1,yi=hi=null,n.updateQueue=null,pi.current=cs,e=t(r,o)}while(vi)}if(pi.current=is,n=null!==hi&&null!==hi.next,mi=0,yi=hi=gi=null,bi=!1,n)throw Error(a(300));return e}function Ei(){var e=0!==Si;return Si=0,e}function Ci(){var e={memoizedState:null,baseState:null,baseQueue:null,queue:null,next:null};return null===yi?gi.memoizedState=yi=e:yi=yi.next=e,yi}function _i(){if(null===hi){var e=gi.alternate;e=null!==e?e.memoizedState:null}else e=hi.next;var n=null===yi?gi.memoizedState:yi.next;if(null!==n)yi=n,hi=e;else{if(null===e)throw Error(a(310));e={memoizedState:(hi=e).memoizedState,baseState:hi.baseState,baseQueue:hi.baseQueue,queue:hi.queue,next:null},null===yi?gi.memoizedState=yi=e:yi=yi.next=e}return yi}function Ai(e,n){return"function"==typeof n?n(e):n}function Ii(e){var n=_i(),t=n.queue;if(null===t)throw Error(a(311));t.lastRenderedReducer=e;var r=hi,o=r.baseQueue,i=t.pending;if(null!==i){if(null!==o){var s=o.next;o.next=i.next,i.next=s}r.baseQueue=o=i,t.pending=null}if(null!==o){i=o.next,r=r.baseState;var l=s=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?(l=c=p,s=r):c=c.next=p,gi.lanes|=d,Dl|=d}u=u.next}while(null!==u&&u!==i);null===c?s=r:c.next=l,sr(r,n.memoizedState)||(Ss=!0),n.memoizedState=r,n.baseState=s,n.baseQueue=c,t.lastRenderedState=r}if(null!==(e=t.interleaved)){o=e;do{i=o.lane,gi.lanes|=i,Dl|=i,o=o.next}while(o!==e)}else null===o&&(t.lanes=0);return[n.memoizedState,t.dispatch]}function Pi(e){var n=_i(),t=n.queue;if(null===t)throw Error(a(311));t.lastRenderedReducer=e;var r=t.dispatch,o=t.pending,i=n.memoizedState;if(null!==o){t.pending=null;var s=o=o.next;do{i=e(i,s.action),s=s.next}while(s!==o);sr(i,n.memoizedState)||(Ss=!0),n.memoizedState=i,null===n.baseQueue&&(n.baseState=i),t.lastRenderedState=i}return[i,r]}function Li(){}function Ri(e,n){var t=gi,r=_i(),o=n(),i=!sr(r.memoizedState,o);if(i&&(r.memoizedState=o,Ss=!0),r=r.queue,Hi(Fi.bind(null,t,r,e),[e]),r.getSnapshot!==n||i||null!==yi&&1&yi.memoizedState.tag){if(t.flags|=2048,Bi(9,Oi.bind(null,t,r,o,n),void 0,null),null===Pl)throw Error(a(349));0!=(30&mi)||Ni(t,n,o)}return o}function Ni(e,n,t){e.flags|=16384,e={getSnapshot:n,value:t},null===(n=gi.updateQueue)?(n={lastEffect:null,stores:null},gi.updateQueue=n,n.stores=[e]):null===(t=n.stores)?n.stores=[e]:t.push(e)}function Oi(e,n,t,r){n.value=t,n.getSnapshot=r,ji(n)&&Di(e)}function Fi(e,n,t){return t((function(){ji(n)&&Di(e)}))}function ji(e){var n=e.getSnapshot;e=e.value;try{var t=n();return!sr(e,t)}catch(r){return!0}}function Di(e){var n=Pa(e,1);null!==n&&rc(n,e,1,-1)}function Mi(e){var n=Ci();return"function"==typeof e&&(e=e()),n.memoizedState=n.baseState=e,e={pending:null,interleaved:null,lanes:0,dispatch:null,lastRenderedReducer:Ai,lastRenderedState:e},n.queue=e,e=e.dispatch=ts.bind(null,gi,e),[n.memoizedState,e]}function Bi(e,n,t,r){return e={tag:e,create:n,destroy:t,deps:r,next:null},null===(n=gi.updateQueue)?(n={lastEffect:null,stores:null},gi.updateQueue=n,n.lastEffect=e.next=e):null===(t=n.lastEffect)?n.lastEffect=e.next=e:(r=t.next,t.next=e,e.next=r,n.lastEffect=e),e}function $i(){return _i().memoizedState}function Ui(e,n,t,r){var o=Ci();gi.flags|=e,o.memoizedState=Bi(1|n,t,void 0,void 0===r?null:r)}function Vi(e,n,t,r){var o=_i();r=void 0===r?null:r;var a=void 0;if(null!==hi){var i=hi.memoizedState;if(a=i.destroy,null!==r&&ki(r,i.deps))return void(o.memoizedState=Bi(n,t,a,r))}gi.flags|=e,o.memoizedState=Bi(1|n,t,a,r)}function zi(e,n){return Ui(8390656,8,e,n)}function Hi(e,n){return Vi(2048,8,e,n)}function Wi(e,n){return Vi(4,2,e,n)}function Gi(e,n){return Vi(4,4,e,n)}function qi(e,n){return"function"==typeof n?(e=e(),n(e),function(){n(null)}):null!=n?(e=e(),n.current=e,function(){n.current=null}):void 0}function Yi(e,n,t){return t=null!=t?t.concat([e]):null,Vi(4,4,qi.bind(null,n,e),t)}function Ki(){}function Xi(e,n){var t=_i();n=void 0===n?null:n;var r=t.memoizedState;return null!==r&&null!==n&&ki(n,r[1])?r[0]:(t.memoizedState=[e,n],e)}function Qi(e,n){var t=_i();n=void 0===n?null:n;var r=t.memoizedState;return null!==r&&null!==n&&ki(n,r[1])?r[0]:(e=e(),t.memoizedState=[e,n],e)}function Zi(e,n,t){return 0==(21&mi)?(e.baseState&&(e.baseState=!1,Ss=!0),e.memoizedState=t):(sr(t,n)||(t=hn(),gi.lanes|=t,Dl|=t,e.baseState=!0),n)}function Ji(e,n){var t=Sn;Sn=0!==t&&4>t?t:4,e(!0);var r=fi.transition;fi.transition={};try{e(!1),n()}finally{Sn=t,fi.transition=r}}function es(){return _i().memoizedState}function ns(e,n,t){var r=tc(e);if(t={lane:r,action:t,hasEagerState:!1,eagerState:null,next:null},rs(e))os(n,t);else if(null!==(t=Ia(e,n,t,r))){rc(t,e,r,nc()),as(t,n,r)}}function ts(e,n,t){var r=tc(e),o={lane:r,action:t,hasEagerState:!1,eagerState:null,next:null};if(rs(e))os(n,o);else{var a=e.alternate;if(0===e.lanes&&(null===a||0===a.lanes)&&null!==(a=n.lastRenderedReducer))try{var i=n.lastRenderedState,s=a(i,t);if(o.hasEagerState=!0,o.eagerState=s,sr(s,i)){var l=n.interleaved;return null===l?(o.next=o,Aa(n)):(o.next=l.next,l.next=o),void(n.interleaved=o)}}catch(c){}null!==(t=Ia(e,n,o,r))&&(rc(t,e,r,o=nc()),as(t,n,r))}}function rs(e){var n=e.alternate;return e===gi||null!==n&&n===gi}function os(e,n){vi=bi=!0;var t=e.pending;null===t?n.next=n:(n.next=t.next,t.next=n),e.pending=n}function as(e,n,t){if(0!=(4194240&t)){var r=n.lanes;t|=r&=e.pendingLanes,n.lanes=t,vn(e,t)}}var is={readContext:Ca,useCallback:xi,useContext:xi,useEffect:xi,useImperativeHandle:xi,useInsertionEffect:xi,useLayoutEffect:xi,useMemo:xi,useReducer:xi,useRef:xi,useState:xi,useDebugValue:xi,useDeferredValue:xi,useTransition:xi,useMutableSource:xi,useSyncExternalStore:xi,useId:xi,unstable_isNewReconciler:!1},ss={readContext:Ca,useCallback:function(e,n){return Ci().memoizedState=[e,void 0===n?null:n],e},useContext:Ca,useEffect:zi,useImperativeHandle:function(e,n,t){return t=null!=t?t.concat([e]):null,Ui(4194308,4,qi.bind(null,n,e),t)},useLayoutEffect:function(e,n){return Ui(4194308,4,e,n)},useInsertionEffect:function(e,n){return Ui(4,2,e,n)},useMemo:function(e,n){var t=Ci();return n=void 0===n?null:n,e=e(),t.memoizedState=[e,n],e},useReducer:function(e,n,t){var r=Ci();return n=void 0!==t?t(n):n,r.memoizedState=r.baseState=n,e={pending:null,interleaved:null,lanes:0,dispatch:null,lastRenderedReducer:e,lastRenderedState:n},r.queue=e,e=e.dispatch=ns.bind(null,gi,e),[r.memoizedState,e]},useRef:function(e){return e={current:e},Ci().memoizedState=e},useState:Mi,useDebugValue:Ki,useDeferredValue:function(e){return Ci().memoizedState=e},useTransition:function(){var e=Mi(!1),n=e[0];return e=Ji.bind(null,e[1]),Ci().memoizedState=e,[n,e]},useMutableSource:function(){},useSyncExternalStore:function(e,n,t){var r=gi,o=Ci();if(aa){if(void 0===t)throw Error(a(407));t=t()}else{if(t=n(),null===Pl)throw Error(a(349));0!=(30&mi)||Ni(r,n,t)}o.memoizedState=t;var i={value:t,getSnapshot:n};return o.queue=i,zi(Fi.bind(null,r,i,e),[e]),r.flags|=2048,Bi(9,Oi.bind(null,r,i,t,n),void 0,null),t},useId:function(){var e=Ci(),n=Pl.identifierPrefix;if(aa){var t=Zo;n=":"+n+"R"+(t=(Qo&~(1<<32-sn(Qo)-1)).toString(32)+t),0<(t=Si++)&&(n+="H"+t.toString(32)),n+=":"}else n=":"+n+"r"+(t=wi++).toString(32)+":";return e.memoizedState=n},unstable_isNewReconciler:!1},ls={readContext:Ca,useCallback:Xi,useContext:Ca,useEffect:Hi,useImperativeHandle:Yi,useInsertionEffect:Wi,useLayoutEffect:Gi,useMemo:Qi,useReducer:Ii,useRef:$i,useState:function(){return Ii(Ai)},useDebugValue:Ki,useDeferredValue:function(e){return Zi(_i(),hi.memoizedState,e)},useTransition:function(){return[Ii(Ai)[0],_i().memoizedState]},useMutableSource:Li,useSyncExternalStore:Ri,useId:es,unstable_isNewReconciler:!1},cs={readContext:Ca,useCallback:Xi,useContext:Ca,useEffect:Hi,useImperativeHandle:Yi,useInsertionEffect:Wi,useLayoutEffect:Gi,useMemo:Qi,useReducer:Pi,useRef:$i,useState:function(){return Pi(Ai)},useDebugValue:Ki,useDeferredValue:function(e){var n=_i();return null===hi?n.memoizedState=e:Zi(n,hi.memoizedState,e)},useTransition:function(){return[Pi(Ai)[0],_i().memoizedState]},useMutableSource:Li,useSyncExternalStore:Ri,useId:es,unstable_isNewReconciler:!1};function us(e,n){try{var t="",r=n;do{t+=U(r),r=r.return}while(r);var o=t}catch(a){o="\nError generating stack: "+a.message+"\n"+a.stack}return{value:e,source:n,stack:o,digest:null}}function ds(e,n,t){return{value:e,source:null,stack:null!=t?t:null,digest:null!=n?n:null}}function ps(e,n){try{console.error(n.value)}catch(t){setTimeout((function(){throw t}))}}var fs="function"==typeof WeakMap?WeakMap:Map;function ms(e,n,t){(t=Oa(-1,t)).tag=3,t.payload={element:null};var r=n.value;return t.callback=function(){Wl||(Wl=!0,Gl=r),ps(0,n)},t}function gs(e,n,t){(t=Oa(-1,t)).tag=3;var r=e.type.getDerivedStateFromError;if("function"==typeof r){var o=n.value;t.payload=function(){return r(o)},t.callback=function(){ps(0,n)}}var a=e.stateNode;return null!==a&&"function"==typeof a.componentDidCatch&&(t.callback=function(){ps(0,n),"function"!=typeof r&&(null===ql?ql=new Set([this]):ql.add(this));var e=n.stack;this.componentDidCatch(n.value,{componentStack:null!==e?e:""})}),t}function hs(e,n,t){var r=e.pingCache;if(null===r){r=e.pingCache=new fs;var o=new Set;r.set(n,o)}else void 0===(o=r.get(n))&&(o=new Set,r.set(n,o));o.has(t)||(o.add(t),e=Cc.bind(null,e,n,t),n.then(e,e))}function ys(e){do{var n;if((n=13===e.tag)&&(n=null===(n=e.memoizedState)||null!==n.dehydrated),n)return e;e=e.return}while(null!==e);return null}function bs(e,n,t,r,o){return 0==(1&e.mode)?(e===n?e.flags|=65536:(e.flags|=128,t.flags|=131072,t.flags&=-52805,1===t.tag&&(null===t.alternate?t.tag=17:((n=Oa(-1,1)).tag=2,Fa(t,n,1))),t.lanes|=1),e):(e.flags|=65536,e.lanes=o,e)}var vs=S.ReactCurrentOwner,Ss=!1;function ws(e,n,t,r){n.child=null===e?Za(n,null,t,r):Qa(n,e.child,t,r)}function xs(e,n,t,r,o){t=t.render;var a=n.ref;return Ea(n,o),r=Ti(e,n,t,r,a,o),t=Ei(),null===e||Ss?(aa&&t&&na(n),n.flags|=1,ws(e,n,r,o),n.child):(n.updateQueue=e.updateQueue,n.flags&=-2053,e.lanes&=~o,Ws(e,n,o))}function ks(e,n,t,r,o){if(null===e){var a=t.type;return"function"!=typeof a||Nc(a)||void 0!==a.defaultProps||null!==t.compare||void 0!==t.defaultProps?((e=Fc(t.type,null,r,n,n.mode,o)).ref=n.ref,e.return=n,n.child=e):(n.tag=15,n.type=a,Ts(e,n,a,r,o))}if(a=e.child,0==(e.lanes&o)){var i=a.memoizedProps;if((t=null!==(t=t.compare)?t:lr)(i,r)&&e.ref===n.ref)return Ws(e,n,o)}return n.flags|=1,(e=Oc(a,r)).ref=n.ref,e.return=n,n.child=e}function Ts(e,n,t,r,o){if(null!==e){var a=e.memoizedProps;if(lr(a,r)&&e.ref===n.ref){if(Ss=!1,n.pendingProps=r=a,0==(e.lanes&o))return n.lanes=e.lanes,Ws(e,n,o);0!=(131072&e.flags)&&(Ss=!0)}}return _s(e,n,t,r,o)}function Es(e,n,t){var r=n.pendingProps,o=r.children,a=null!==e?e.memoizedState:null;if("hidden"===r.mode)if(0==(1&n.mode))n.memoizedState={baseLanes:0,cachePool:null,transitions:null},_o(Ol,Nl),Nl|=t;else{if(0==(1073741824&t))return e=null!==a?a.baseLanes|t:t,n.lanes=n.childLanes=1073741824,n.memoizedState={baseLanes:e,cachePool:null,transitions:null},n.updateQueue=null,_o(Ol,Nl),Nl|=e,null;n.memoizedState={baseLanes:0,cachePool:null,transitions:null},r=null!==a?a.baseLanes:t,_o(Ol,Nl),Nl|=r}else null!==a?(r=a.baseLanes|t,n.memoizedState=null):r=t,_o(Ol,Nl),Nl|=r;return ws(e,n,o,t),n.child}function Cs(e,n){var t=n.ref;(null===e&&null!==t||null!==e&&e.ref!==t)&&(n.flags|=512,n.flags|=2097152)}function _s(e,n,t,r,o){var a=No(t)?Lo:Io.current;return a=Ro(n,a),Ea(n,o),t=Ti(e,n,t,r,a,o),r=Ei(),null===e||Ss?(aa&&r&&na(n),n.flags|=1,ws(e,n,t,o),n.child):(n.updateQueue=e.updateQueue,n.flags&=-2053,e.lanes&=~o,Ws(e,n,o))}function As(e,n,t,r,o){if(No(t)){var a=!0;Do(n)}else a=!1;if(Ea(n,o),null===n.stateNode)Hs(e,n),Ha(n,t,r),Ga(n,t,r,o),r=!0;else if(null===e){var i=n.stateNode,s=n.memoizedProps;i.props=s;var l=i.context,c=t.contextType;"object"==typeof c&&null!==c?c=Ca(c):c=Ro(n,c=No(t)?Lo:Io.current);var u=t.getDerivedStateFromProps,d="function"==typeof u||"function"==typeof i.getSnapshotBeforeUpdate;d||"function"!=typeof i.UNSAFE_componentWillReceiveProps&&"function"!=typeof i.componentWillReceiveProps||(s!==r||l!==c)&&Wa(n,i,r,c),La=!1;var p=n.memoizedState;i.state=p,Ma(n,r,i,o),l=n.memoizedState,s!==r||p!==l||Po.current||La?("function"==typeof u&&(Ua(n,t,u,r),l=n.memoizedState),(s=La||za(n,t,s,r,p,l,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&&(n.flags|=4194308)):("function"==typeof i.componentDidMount&&(n.flags|=4194308),n.memoizedProps=r,n.memoizedState=l),i.props=r,i.state=l,i.context=c,r=s):("function"==typeof i.componentDidMount&&(n.flags|=4194308),r=!1)}else{i=n.stateNode,Na(e,n),s=n.memoizedProps,c=n.type===n.elementType?s:ya(n.type,s),i.props=c,d=n.pendingProps,p=i.context,"object"==typeof(l=t.contextType)&&null!==l?l=Ca(l):l=Ro(n,l=No(t)?Lo:Io.current);var f=t.getDerivedStateFromProps;(u="function"==typeof f||"function"==typeof i.getSnapshotBeforeUpdate)||"function"!=typeof i.UNSAFE_componentWillReceiveProps&&"function"!=typeof i.componentWillReceiveProps||(s!==d||p!==l)&&Wa(n,i,r,l),La=!1,p=n.memoizedState,i.state=p,Ma(n,r,i,o);var m=n.memoizedState;s!==d||p!==m||Po.current||La?("function"==typeof f&&(Ua(n,t,f,r),m=n.memoizedState),(c=La||za(n,t,c,r,p,m,l)||!1)?(u||"function"!=typeof i.UNSAFE_componentWillUpdate&&"function"!=typeof i.componentWillUpdate||("function"==typeof i.componentWillUpdate&&i.componentWillUpdate(r,m,l),"function"==typeof i.UNSAFE_componentWillUpdate&&i.UNSAFE_componentWillUpdate(r,m,l)),"function"==typeof i.componentDidUpdate&&(n.flags|=4),"function"==typeof i.getSnapshotBeforeUpdate&&(n.flags|=1024)):("function"!=typeof i.componentDidUpdate||s===e.memoizedProps&&p===e.memoizedState||(n.flags|=4),"function"!=typeof i.getSnapshotBeforeUpdate||s===e.memoizedProps&&p===e.memoizedState||(n.flags|=1024),n.memoizedProps=r,n.memoizedState=m),i.props=r,i.state=m,i.context=l,r=c):("function"!=typeof i.componentDidUpdate||s===e.memoizedProps&&p===e.memoizedState||(n.flags|=4),"function"!=typeof i.getSnapshotBeforeUpdate||s===e.memoizedProps&&p===e.memoizedState||(n.flags|=1024),r=!1)}return Is(e,n,t,r,a,o)}function Is(e,n,t,r,o,a){Cs(e,n);var i=0!=(128&n.flags);if(!r&&!i)return o&&Mo(n,t,!1),Ws(e,n,a);r=n.stateNode,vs.current=n;var s=i&&"function"!=typeof t.getDerivedStateFromError?null:r.render();return n.flags|=1,null!==e&&i?(n.child=Qa(n,e.child,null,a),n.child=Qa(n,null,s,a)):ws(e,n,s,a),n.memoizedState=r.state,o&&Mo(n,t,!0),n.child}function Ps(e){var n=e.stateNode;n.pendingContext?Fo(0,n.pendingContext,n.pendingContext!==n.context):n.context&&Fo(0,n.context,!1),oi(e,n.containerInfo)}function Ls(e,n,t,r,o){return ma(),ga(o),n.flags|=256,ws(e,n,t,r),n.child}var Rs,Ns,Os,Fs,js={dehydrated:null,treeContext:null,retryLane:0};function Ds(e){return{baseLanes:e,cachePool:null,transitions:null}}function Ms(e,n,t){var r,o=n.pendingProps,i=li.current,s=!1,l=0!=(128&n.flags);if((r=l)||(r=(null===e||null!==e.memoizedState)&&0!=(2&i)),r?(s=!0,n.flags&=-129):null!==e&&null===e.memoizedState||(i|=1),_o(li,1&i),null===e)return ua(n),null!==(e=n.memoizedState)&&null!==(e=e.dehydrated)?(0==(1&n.mode)?n.lanes=1:"$!"===e.data?n.lanes=8:n.lanes=1073741824,null):(l=o.children,e=o.fallback,s?(o=n.mode,s=n.child,l={mode:"hidden",children:l},0==(1&o)&&null!==s?(s.childLanes=0,s.pendingProps=l):s=Dc(l,o,0,null),e=jc(e,o,t,null),s.return=n,e.return=n,s.sibling=e,n.child=s,n.child.memoizedState=Ds(t),n.memoizedState=js,e):Bs(n,l));if(null!==(i=e.memoizedState)&&null!==(r=i.dehydrated))return function(e,n,t,r,o,i,s){if(t)return 256&n.flags?(n.flags&=-257,$s(e,n,s,r=ds(Error(a(422))))):null!==n.memoizedState?(n.child=e.child,n.flags|=128,null):(i=r.fallback,o=n.mode,r=Dc({mode:"visible",children:r.children},o,0,null),(i=jc(i,o,s,null)).flags|=2,r.return=n,i.return=n,r.sibling=i,n.child=r,0!=(1&n.mode)&&Qa(n,e.child,null,s),n.child.memoizedState=Ds(s),n.memoizedState=js,i);if(0==(1&n.mode))return $s(e,n,s,null);if("$!"===o.data){if(r=o.nextSibling&&o.nextSibling.dataset)var l=r.dgst;return r=l,$s(e,n,s,r=ds(i=Error(a(419)),r,void 0))}if(l=0!=(s&e.childLanes),Ss||l){if(null!==(r=Pl)){switch(s&-s){case 4:o=2;break;case 16:o=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:o=32;break;case 536870912:o=268435456;break;default:o=0}0!==(o=0!=(o&(r.suspendedLanes|s))?0:o)&&o!==i.retryLane&&(i.retryLane=o,Pa(e,o),rc(r,e,o,-1))}return hc(),$s(e,n,s,r=ds(Error(a(421))))}return"$?"===o.data?(n.flags|=128,n.child=e.child,n=Ac.bind(null,e),o._reactRetry=n,null):(e=i.treeContext,oa=co(o.nextSibling),ra=n,aa=!0,ia=null,null!==e&&(Yo[Ko++]=Qo,Yo[Ko++]=Zo,Yo[Ko++]=Xo,Qo=e.id,Zo=e.overflow,Xo=n),n=Bs(n,r.children),n.flags|=4096,n)}(e,n,l,o,r,i,t);if(s){s=o.fallback,l=n.mode,r=(i=e.child).sibling;var c={mode:"hidden",children:o.children};return 0==(1&l)&&n.child!==i?((o=n.child).childLanes=0,o.pendingProps=c,n.deletions=null):(o=Oc(i,c)).subtreeFlags=14680064&i.subtreeFlags,null!==r?s=Oc(r,s):(s=jc(s,l,t,null)).flags|=2,s.return=n,o.return=n,o.sibling=s,n.child=o,o=s,s=n.child,l=null===(l=e.child.memoizedState)?Ds(t):{baseLanes:l.baseLanes|t,cachePool:null,transitions:l.transitions},s.memoizedState=l,s.childLanes=e.childLanes&~t,n.memoizedState=js,o}return e=(s=e.child).sibling,o=Oc(s,{mode:"visible",children:o.children}),0==(1&n.mode)&&(o.lanes=t),o.return=n,o.sibling=null,null!==e&&(null===(t=n.deletions)?(n.deletions=[e],n.flags|=16):t.push(e)),n.child=o,n.memoizedState=null,o}function Bs(e,n){return(n=Dc({mode:"visible",children:n},e.mode,0,null)).return=e,e.child=n}function $s(e,n,t,r){return null!==r&&ga(r),Qa(n,e.child,null,t),(e=Bs(n,n.pendingProps.children)).flags|=2,n.memoizedState=null,e}function Us(e,n,t){e.lanes|=n;var r=e.alternate;null!==r&&(r.lanes|=n),Ta(e.return,n,t)}function Vs(e,n,t,r,o){var a=e.memoizedState;null===a?e.memoizedState={isBackwards:n,rendering:null,renderingStartTime:0,last:r,tail:t,tailMode:o}:(a.isBackwards=n,a.rendering=null,a.renderingStartTime=0,a.last=r,a.tail=t,a.tailMode=o)}function zs(e,n,t){var r=n.pendingProps,o=r.revealOrder,a=r.tail;if(ws(e,n,r.children,t),0!=(2&(r=li.current)))r=1&r|2,n.flags|=128;else{if(null!==e&&0!=(128&e.flags))e:for(e=n.child;null!==e;){if(13===e.tag)null!==e.memoizedState&&Us(e,t,n);else if(19===e.tag)Us(e,t,n);else if(null!==e.child){e.child.return=e,e=e.child;continue}if(e===n)break e;for(;null===e.sibling;){if(null===e.return||e.return===n)break e;e=e.return}e.sibling.return=e.return,e=e.sibling}r&=1}if(_o(li,r),0==(1&n.mode))n.memoizedState=null;else switch(o){case"forwards":for(t=n.child,o=null;null!==t;)null!==(e=t.alternate)&&null===ci(e)&&(o=t),t=t.sibling;null===(t=o)?(o=n.child,n.child=null):(o=t.sibling,t.sibling=null),Vs(n,!1,o,t,a);break;case"backwards":for(t=null,o=n.child,n.child=null;null!==o;){if(null!==(e=o.alternate)&&null===ci(e)){n.child=o;break}e=o.sibling,o.sibling=t,t=o,o=e}Vs(n,!0,t,null,a);break;case"together":Vs(n,!1,null,null,void 0);break;default:n.memoizedState=null}return n.child}function Hs(e,n){0==(1&n.mode)&&null!==e&&(e.alternate=null,n.alternate=null,n.flags|=2)}function Ws(e,n,t){if(null!==e&&(n.dependencies=e.dependencies),Dl|=n.lanes,0==(t&n.childLanes))return null;if(null!==e&&n.child!==e.child)throw Error(a(153));if(null!==n.child){for(t=Oc(e=n.child,e.pendingProps),n.child=t,t.return=n;null!==e.sibling;)e=e.sibling,(t=t.sibling=Oc(e,e.pendingProps)).return=n;t.sibling=null}return n.child}function Gs(e,n){if(!aa)switch(e.tailMode){case"hidden":n=e.tail;for(var t=null;null!==n;)null!==n.alternate&&(t=n),n=n.sibling;null===t?e.tail=null:t.sibling=null;break;case"collapsed":t=e.tail;for(var r=null;null!==t;)null!==t.alternate&&(r=t),t=t.sibling;null===r?n||null===e.tail?e.tail=null:e.tail.sibling=null:r.sibling=null}}function qs(e){var n=null!==e.alternate&&e.alternate.child===e.child,t=0,r=0;if(n)for(var o=e.child;null!==o;)t|=o.lanes|o.childLanes,r|=14680064&o.subtreeFlags,r|=14680064&o.flags,o.return=e,o=o.sibling;else for(o=e.child;null!==o;)t|=o.lanes|o.childLanes,r|=o.subtreeFlags,r|=o.flags,o.return=e,o=o.sibling;return e.subtreeFlags|=r,e.childLanes=t,n}function Ys(e,n,t){var r=n.pendingProps;switch(ta(n),n.tag){case 2:case 16:case 15:case 0:case 11:case 7:case 8:case 12:case 9:case 14:return qs(n),null;case 1:case 17:return No(n.type)&&Oo(),qs(n),null;case 3:return r=n.stateNode,ai(),Co(Po),Co(Io),di(),r.pendingContext&&(r.context=r.pendingContext,r.pendingContext=null),null!==e&&null!==e.child||(pa(n)?n.flags|=4:null===e||e.memoizedState.isDehydrated&&0==(256&n.flags)||(n.flags|=1024,null!==ia&&(sc(ia),ia=null))),Ns(e,n),qs(n),null;case 5:si(n);var o=ri(ti.current);if(t=n.type,null!==e&&null!=n.stateNode)Os(e,n,t,r,o),e.ref!==n.ref&&(n.flags|=512,n.flags|=2097152);else{if(!r){if(null===n.stateNode)throw Error(a(166));return qs(n),null}if(e=ri(ei.current),pa(n)){r=n.stateNode,t=n.type;var i=n.memoizedProps;switch(r[fo]=n,r[mo]=i,e=0!=(1&n.mode),t){case"dialog":Br("cancel",r),Br("close",r);break;case"iframe":case"object":case"embed":Br("load",r);break;case"video":case"audio":for(o=0;o<Fr.length;o++)Br(Fr[o],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":X(r,i),Br("invalid",r);break;case"select":r._wrapperState={wasMultiple:!!i.multiple},Br("invalid",r);break;case"textarea":oe(r,i),Br("invalid",r)}for(var l in be(t,i),o=null,i)if(i.hasOwnProperty(l)){var c=i[l];"children"===l?"string"==typeof c?r.textContent!==c&&(!0!==i.suppressHydrationWarning&&Zr(r.textContent,c,e),o=["children",c]):"number"==typeof c&&r.textContent!==""+c&&(!0!==i.suppressHydrationWarning&&Zr(r.textContent,c,e),o=["children",""+c]):s.hasOwnProperty(l)&&null!=c&&"onScroll"===l&&Br("scroll",r)}switch(t){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=o,n.updateQueue=r,null!==r&&(n.flags|=4)}else{l=9===o.nodeType?o:o.ownerDocument,"http://www.w3.org/1999/xhtml"===e&&(e=se(t)),"http://www.w3.org/1999/xhtml"===e?"script"===t?((e=l.createElement("div")).innerHTML="<script><\/script>",e=e.removeChild(e.firstChild)):"string"==typeof r.is?e=l.createElement(t,{is:r.is}):(e=l.createElement(t),"select"===t&&(l=e,r.multiple?l.multiple=!0:r.size&&(l.size=r.size))):e=l.createElementNS(e,t),e[fo]=n,e[mo]=r,Rs(e,n,!1,!1),n.stateNode=e;e:{switch(l=ve(t,r),t){case"dialog":Br("cancel",e),Br("close",e),o=r;break;case"iframe":case"object":case"embed":Br("load",e),o=r;break;case"video":case"audio":for(o=0;o<Fr.length;o++)Br(Fr[o],e);o=r;break;case"source":Br("error",e),o=r;break;case"img":case"image":case"link":Br("error",e),Br("load",e),o=r;break;case"details":Br("toggle",e),o=r;break;case"input":X(e,r),o=K(e,r),Br("invalid",e);break;case"option":default:o=r;break;case"select":e._wrapperState={wasMultiple:!!r.multiple},o=D({},r,{value:void 0}),Br("invalid",e);break;case"textarea":oe(e,r),o=re(e,r),Br("invalid",e)}for(i in be(t,o),c=o)if(c.hasOwnProperty(i)){var u=c[i];"style"===i?he(e,u):"dangerouslySetInnerHTML"===i?null!=(u=u?u.__html:void 0)&&de(e,u):"children"===i?"string"==typeof u?("textarea"!==t||""!==u)&&pe(e,u):"number"==typeof u&&pe(e,""+u):"suppressContentEditableWarning"!==i&&"suppressHydrationWarning"!==i&&"autoFocus"!==i&&(s.hasOwnProperty(i)?null!=u&&"onScroll"===i&&Br("scroll",e):null!=u&&v(e,i,u,l))}switch(t){case"input":G(e),J(e,r,!1);break;case"textarea":G(e),ie(e);break;case"option":null!=r.value&&e.setAttribute("value",""+H(r.value));break;case"select":e.multiple=!!r.multiple,null!=(i=r.value)?te(e,!!r.multiple,i,!1):null!=r.defaultValue&&te(e,!!r.multiple,r.defaultValue,!0);break;default:"function"==typeof o.onClick&&(e.onclick=Jr)}switch(t){case"button":case"input":case"select":case"textarea":r=!!r.autoFocus;break e;case"img":r=!0;break e;default:r=!1}}r&&(n.flags|=4)}null!==n.ref&&(n.flags|=512,n.flags|=2097152)}return qs(n),null;case 6:if(e&&null!=n.stateNode)Fs(e,n,e.memoizedProps,r);else{if("string"!=typeof r&&null===n.stateNode)throw Error(a(166));if(t=ri(ti.current),ri(ei.current),pa(n)){if(r=n.stateNode,t=n.memoizedProps,r[fo]=n,(i=r.nodeValue!==t)&&null!==(e=ra))switch(e.tag){case 3:Zr(r.nodeValue,t,0!=(1&e.mode));break;case 5:!0!==e.memoizedProps.suppressHydrationWarning&&Zr(r.nodeValue,t,0!=(1&e.mode))}i&&(n.flags|=4)}else(r=(9===t.nodeType?t:t.ownerDocument).createTextNode(r))[fo]=n,n.stateNode=r}return qs(n),null;case 13:if(Co(li),r=n.memoizedState,null===e||null!==e.memoizedState&&null!==e.memoizedState.dehydrated){if(aa&&null!==oa&&0!=(1&n.mode)&&0==(128&n.flags))fa(),ma(),n.flags|=98560,i=!1;else if(i=pa(n),null!==r&&null!==r.dehydrated){if(null===e){if(!i)throw Error(a(318));if(!(i=null!==(i=n.memoizedState)?i.dehydrated:null))throw Error(a(317));i[fo]=n}else ma(),0==(128&n.flags)&&(n.memoizedState=null),n.flags|=4;qs(n),i=!1}else null!==ia&&(sc(ia),ia=null),i=!0;if(!i)return 65536&n.flags?n:null}return 0!=(128&n.flags)?(n.lanes=t,n):((r=null!==r)!==(null!==e&&null!==e.memoizedState)&&r&&(n.child.flags|=8192,0!=(1&n.mode)&&(null===e||0!=(1&li.current)?0===Fl&&(Fl=3):hc())),null!==n.updateQueue&&(n.flags|=4),qs(n),null);case 4:return ai(),Ns(e,n),null===e&&Vr(n.stateNode.containerInfo),qs(n),null;case 10:return ka(n.type._context),qs(n),null;case 19:if(Co(li),null===(i=n.memoizedState))return qs(n),null;if(r=0!=(128&n.flags),null===(l=i.rendering))if(r)Gs(i,!1);else{if(0!==Fl||null!==e&&0!=(128&e.flags))for(e=n.child;null!==e;){if(null!==(l=ci(e))){for(n.flags|=128,Gs(i,!1),null!==(r=l.updateQueue)&&(n.updateQueue=r,n.flags|=4),n.subtreeFlags=0,r=t,t=n.child;null!==t;)e=r,(i=t).flags&=14680066,null===(l=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=l.childLanes,i.lanes=l.lanes,i.child=l.child,i.subtreeFlags=0,i.deletions=null,i.memoizedProps=l.memoizedProps,i.memoizedState=l.memoizedState,i.updateQueue=l.updateQueue,i.type=l.type,e=l.dependencies,i.dependencies=null===e?null:{lanes:e.lanes,firstContext:e.firstContext}),t=t.sibling;return _o(li,1&li.current|2),n.child}e=e.sibling}null!==i.tail&&Qe()>zl&&(n.flags|=128,r=!0,Gs(i,!1),n.lanes=4194304)}else{if(!r)if(null!==(e=ci(l))){if(n.flags|=128,r=!0,null!==(t=e.updateQueue)&&(n.updateQueue=t,n.flags|=4),Gs(i,!0),null===i.tail&&"hidden"===i.tailMode&&!l.alternate&&!aa)return qs(n),null}else 2*Qe()-i.renderingStartTime>zl&&1073741824!==t&&(n.flags|=128,r=!0,Gs(i,!1),n.lanes=4194304);i.isBackwards?(l.sibling=n.child,n.child=l):(null!==(t=i.last)?t.sibling=l:n.child=l,i.last=l)}return null!==i.tail?(n=i.tail,i.rendering=n,i.tail=n.sibling,i.renderingStartTime=Qe(),n.sibling=null,t=li.current,_o(li,r?1&t|2:1&t),n):(qs(n),null);case 22:case 23:return pc(),r=null!==n.memoizedState,null!==e&&null!==e.memoizedState!==r&&(n.flags|=8192),r&&0!=(1&n.mode)?0!=(1073741824&Nl)&&(qs(n),6&n.subtreeFlags&&(n.flags|=8192)):qs(n),null;case 24:case 25:return null}throw Error(a(156,n.tag))}function Ks(e,n){switch(ta(n),n.tag){case 1:return No(n.type)&&Oo(),65536&(e=n.flags)?(n.flags=-65537&e|128,n):null;case 3:return ai(),Co(Po),Co(Io),di(),0!=(65536&(e=n.flags))&&0==(128&e)?(n.flags=-65537&e|128,n):null;case 5:return si(n),null;case 13:if(Co(li),null!==(e=n.memoizedState)&&null!==e.dehydrated){if(null===n.alternate)throw Error(a(340));ma()}return 65536&(e=n.flags)?(n.flags=-65537&e|128,n):null;case 19:return Co(li),null;case 4:return ai(),null;case 10:return ka(n.type._context),null;case 22:case 23:return pc(),null;default:return null}}Rs=function(e,n){for(var t=n.child;null!==t;){if(5===t.tag||6===t.tag)e.appendChild(t.stateNode);else if(4!==t.tag&&null!==t.child){t.child.return=t,t=t.child;continue}if(t===n)break;for(;null===t.sibling;){if(null===t.return||t.return===n)return;t=t.return}t.sibling.return=t.return,t=t.sibling}},Ns=function(){},Os=function(e,n,t,r){var o=e.memoizedProps;if(o!==r){e=n.stateNode,ri(ei.current);var a,i=null;switch(t){case"input":o=K(e,o),r=K(e,r),i=[];break;case"select":o=D({},o,{value:void 0}),r=D({},r,{value:void 0}),i=[];break;case"textarea":o=re(e,o),r=re(e,r),i=[];break;default:"function"!=typeof o.onClick&&"function"==typeof r.onClick&&(e.onclick=Jr)}for(u in be(t,r),t=null,o)if(!r.hasOwnProperty(u)&&o.hasOwnProperty(u)&&null!=o[u])if("style"===u){var l=o[u];for(a in l)l.hasOwnProperty(a)&&(t||(t={}),t[a]="")}else"dangerouslySetInnerHTML"!==u&&"children"!==u&&"suppressContentEditableWarning"!==u&&"suppressHydrationWarning"!==u&&"autoFocus"!==u&&(s.hasOwnProperty(u)?i||(i=[]):(i=i||[]).push(u,null));for(u in r){var c=r[u];if(l=null!=o?o[u]:void 0,r.hasOwnProperty(u)&&c!==l&&(null!=c||null!=l))if("style"===u)if(l){for(a in l)!l.hasOwnProperty(a)||c&&c.hasOwnProperty(a)||(t||(t={}),t[a]="");for(a in c)c.hasOwnProperty(a)&&l[a]!==c[a]&&(t||(t={}),t[a]=c[a])}else t||(i||(i=[]),i.push(u,t)),t=c;else"dangerouslySetInnerHTML"===u?(c=c?c.__html:void 0,l=l?l.__html:void 0,null!=c&&l!==c&&(i=i||[]).push(u,c)):"children"===u?"string"!=typeof c&&"number"!=typeof c||(i=i||[]).push(u,""+c):"suppressContentEditableWarning"!==u&&"suppressHydrationWarning"!==u&&(s.hasOwnProperty(u)?(null!=c&&"onScroll"===u&&Br("scroll",e),i||l===c||(i=[])):(i=i||[]).push(u,c))}t&&(i=i||[]).push("style",t);var u=i;(n.updateQueue=u)&&(n.flags|=4)}},Fs=function(e,n,t,r){t!==r&&(n.flags|=4)};var Xs=!1,Qs=!1,Zs="function"==typeof WeakSet?WeakSet:Set,Js=null;function el(e,n){var t=e.ref;if(null!==t)if("function"==typeof t)try{t(null)}catch(r){Ec(e,n,r)}else t.current=null}function nl(e,n,t){try{t()}catch(r){Ec(e,n,r)}}var tl=!1;function rl(e,n,t){var r=n.updateQueue;if(null!==(r=null!==r?r.lastEffect:null)){var o=r=r.next;do{if((o.tag&e)===e){var a=o.destroy;o.destroy=void 0,void 0!==a&&nl(n,t,a)}o=o.next}while(o!==r)}}function ol(e,n){if(null!==(n=null!==(n=n.updateQueue)?n.lastEffect:null)){var t=n=n.next;do{if((t.tag&e)===e){var r=t.create;t.destroy=r()}t=t.next}while(t!==n)}}function al(e){var n=e.ref;if(null!==n){var t=e.stateNode;e.tag,e=t,"function"==typeof n?n(e):n.current=e}}function il(e){var n=e.alternate;null!==n&&(e.alternate=null,il(n)),e.child=null,e.deletions=null,e.sibling=null,5===e.tag&&(null!==(n=e.stateNode)&&(delete n[fo],delete n[mo],delete n[ho],delete n[yo],delete n[bo])),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 sl(e){return 5===e.tag||3===e.tag||4===e.tag}function ll(e){e:for(;;){for(;null===e.sibling;){if(null===e.return||sl(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 cl(e,n,t){var r=e.tag;if(5===r||6===r)e=e.stateNode,n?8===t.nodeType?t.parentNode.insertBefore(e,n):t.insertBefore(e,n):(8===t.nodeType?(n=t.parentNode).insertBefore(e,t):(n=t).appendChild(e),null!=(t=t._reactRootContainer)||null!==n.onclick||(n.onclick=Jr));else if(4!==r&&null!==(e=e.child))for(cl(e,n,t),e=e.sibling;null!==e;)cl(e,n,t),e=e.sibling}function ul(e,n,t){var r=e.tag;if(5===r||6===r)e=e.stateNode,n?t.insertBefore(e,n):t.appendChild(e);else if(4!==r&&null!==(e=e.child))for(ul(e,n,t),e=e.sibling;null!==e;)ul(e,n,t),e=e.sibling}var dl=null,pl=!1;function fl(e,n,t){for(t=t.child;null!==t;)ml(e,n,t),t=t.sibling}function ml(e,n,t){if(an&&"function"==typeof an.onCommitFiberUnmount)try{an.onCommitFiberUnmount(on,t)}catch(s){}switch(t.tag){case 5:Qs||el(t,n);case 6:var r=dl,o=pl;dl=null,fl(e,n,t),pl=o,null!==(dl=r)&&(pl?(e=dl,t=t.stateNode,8===e.nodeType?e.parentNode.removeChild(t):e.removeChild(t)):dl.removeChild(t.stateNode));break;case 18:null!==dl&&(pl?(e=dl,t=t.stateNode,8===e.nodeType?lo(e.parentNode,t):1===e.nodeType&&lo(e,t),zn(e)):lo(dl,t.stateNode));break;case 4:r=dl,o=pl,dl=t.stateNode.containerInfo,pl=!0,fl(e,n,t),dl=r,pl=o;break;case 0:case 11:case 14:case 15:if(!Qs&&(null!==(r=t.updateQueue)&&null!==(r=r.lastEffect))){o=r=r.next;do{var a=o,i=a.destroy;a=a.tag,void 0!==i&&(0!=(2&a)||0!=(4&a))&&nl(t,n,i),o=o.next}while(o!==r)}fl(e,n,t);break;case 1:if(!Qs&&(el(t,n),"function"==typeof(r=t.stateNode).componentWillUnmount))try{r.props=t.memoizedProps,r.state=t.memoizedState,r.componentWillUnmount()}catch(s){Ec(t,n,s)}fl(e,n,t);break;case 21:fl(e,n,t);break;case 22:1&t.mode?(Qs=(r=Qs)||null!==t.memoizedState,fl(e,n,t),Qs=r):fl(e,n,t);break;default:fl(e,n,t)}}function gl(e){var n=e.updateQueue;if(null!==n){e.updateQueue=null;var t=e.stateNode;null===t&&(t=e.stateNode=new Zs),n.forEach((function(n){var r=Ic.bind(null,e,n);t.has(n)||(t.add(n),n.then(r,r))}))}}function hl(e,n){var t=n.deletions;if(null!==t)for(var r=0;r<t.length;r++){var o=t[r];try{var i=e,s=n,l=s;e:for(;null!==l;){switch(l.tag){case 5:dl=l.stateNode,pl=!1;break e;case 3:case 4:dl=l.stateNode.containerInfo,pl=!0;break e}l=l.return}if(null===dl)throw Error(a(160));ml(i,s,o),dl=null,pl=!1;var c=o.alternate;null!==c&&(c.return=null),o.return=null}catch(u){Ec(o,n,u)}}if(12854&n.subtreeFlags)for(n=n.child;null!==n;)yl(n,e),n=n.sibling}function yl(e,n){var t=e.alternate,r=e.flags;switch(e.tag){case 0:case 11:case 14:case 15:if(hl(n,e),bl(e),4&r){try{rl(3,e,e.return),ol(3,e)}catch(h){Ec(e,e.return,h)}try{rl(5,e,e.return)}catch(h){Ec(e,e.return,h)}}break;case 1:hl(n,e),bl(e),512&r&&null!==t&&el(t,t.return);break;case 5:if(hl(n,e),bl(e),512&r&&null!==t&&el(t,t.return),32&e.flags){var o=e.stateNode;try{pe(o,"")}catch(h){Ec(e,e.return,h)}}if(4&r&&null!=(o=e.stateNode)){var i=e.memoizedProps,s=null!==t?t.memoizedProps:i,l=e.type,c=e.updateQueue;if(e.updateQueue=null,null!==c)try{"input"===l&&"radio"===i.type&&null!=i.name&&Q(o,i),ve(l,s);var u=ve(l,i);for(s=0;s<c.length;s+=2){var d=c[s],p=c[s+1];"style"===d?he(o,p):"dangerouslySetInnerHTML"===d?de(o,p):"children"===d?pe(o,p):v(o,d,p,u)}switch(l){case"input":Z(o,i);break;case"textarea":ae(o,i);break;case"select":var f=o._wrapperState.wasMultiple;o._wrapperState.wasMultiple=!!i.multiple;var m=i.value;null!=m?te(o,!!i.multiple,m,!1):f!==!!i.multiple&&(null!=i.defaultValue?te(o,!!i.multiple,i.defaultValue,!0):te(o,!!i.multiple,i.multiple?[]:"",!1))}o[mo]=i}catch(h){Ec(e,e.return,h)}}break;case 6:if(hl(n,e),bl(e),4&r){if(null===e.stateNode)throw Error(a(162));o=e.stateNode,i=e.memoizedProps;try{o.nodeValue=i}catch(h){Ec(e,e.return,h)}}break;case 3:if(hl(n,e),bl(e),4&r&&null!==t&&t.memoizedState.isDehydrated)try{zn(n.containerInfo)}catch(h){Ec(e,e.return,h)}break;case 4:default:hl(n,e),bl(e);break;case 13:hl(n,e),bl(e),8192&(o=e.child).flags&&(i=null!==o.memoizedState,o.stateNode.isHidden=i,!i||null!==o.alternate&&null!==o.alternate.memoizedState||(Vl=Qe())),4&r&&gl(e);break;case 22:if(d=null!==t&&null!==t.memoizedState,1&e.mode?(Qs=(u=Qs)||d,hl(n,e),Qs=u):hl(n,e),bl(e),8192&r){if(u=null!==e.memoizedState,(e.stateNode.isHidden=u)&&!d&&0!=(1&e.mode))for(Js=e,d=e.child;null!==d;){for(p=Js=d;null!==Js;){switch(m=(f=Js).child,f.tag){case 0:case 11:case 14:case 15:rl(4,f,f.return);break;case 1:el(f,f.return);var g=f.stateNode;if("function"==typeof g.componentWillUnmount){r=f,t=f.return;try{n=r,g.props=n.memoizedProps,g.state=n.memoizedState,g.componentWillUnmount()}catch(h){Ec(r,t,h)}}break;case 5:el(f,f.return);break;case 22:if(null!==f.memoizedState){xl(p);continue}}null!==m?(m.return=f,Js=m):xl(p)}d=d.sibling}e:for(d=null,p=e;;){if(5===p.tag){if(null===d){d=p;try{o=p.stateNode,u?"function"==typeof(i=o.style).setProperty?i.setProperty("display","none","important"):i.display="none":(l=p.stateNode,s=null!=(c=p.memoizedProps.style)&&c.hasOwnProperty("display")?c.display:null,l.style.display=ge("display",s))}catch(h){Ec(e,e.return,h)}}}else if(6===p.tag){if(null===d)try{p.stateNode.nodeValue=u?"":p.memoizedProps}catch(h){Ec(e,e.return,h)}}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:hl(n,e),bl(e),4&r&&gl(e);case 21:}}function bl(e){var n=e.flags;if(2&n){try{e:{for(var t=e.return;null!==t;){if(sl(t)){var r=t;break e}t=t.return}throw Error(a(160))}switch(r.tag){case 5:var o=r.stateNode;32&r.flags&&(pe(o,""),r.flags&=-33),ul(e,ll(e),o);break;case 3:case 4:var i=r.stateNode.containerInfo;cl(e,ll(e),i);break;default:throw Error(a(161))}}catch(s){Ec(e,e.return,s)}e.flags&=-3}4096&n&&(e.flags&=-4097)}function vl(e,n,t){Js=e,Sl(e,n,t)}function Sl(e,n,t){for(var r=0!=(1&e.mode);null!==Js;){var o=Js,a=o.child;if(22===o.tag&&r){var i=null!==o.memoizedState||Xs;if(!i){var s=o.alternate,l=null!==s&&null!==s.memoizedState||Qs;s=Xs;var c=Qs;if(Xs=i,(Qs=l)&&!c)for(Js=o;null!==Js;)l=(i=Js).child,22===i.tag&&null!==i.memoizedState?kl(o):null!==l?(l.return=i,Js=l):kl(o);for(;null!==a;)Js=a,Sl(a,n,t),a=a.sibling;Js=o,Xs=s,Qs=c}wl(e)}else 0!=(8772&o.subtreeFlags)&&null!==a?(a.return=o,Js=a):wl(e)}}function wl(e){for(;null!==Js;){var n=Js;if(0!=(8772&n.flags)){var t=n.alternate;try{if(0!=(8772&n.flags))switch(n.tag){case 0:case 11:case 15:Qs||ol(5,n);break;case 1:var r=n.stateNode;if(4&n.flags&&!Qs)if(null===t)r.componentDidMount();else{var o=n.elementType===n.type?t.memoizedProps:ya(n.type,t.memoizedProps);r.componentDidUpdate(o,t.memoizedState,r.__reactInternalSnapshotBeforeUpdate)}var i=n.updateQueue;null!==i&&Ba(n,i,r);break;case 3:var s=n.updateQueue;if(null!==s){if(t=null,null!==n.child)switch(n.child.tag){case 5:case 1:t=n.child.stateNode}Ba(n,s,t)}break;case 5:var l=n.stateNode;if(null===t&&4&n.flags){t=l;var c=n.memoizedProps;switch(n.type){case"button":case"input":case"select":case"textarea":c.autoFocus&&t.focus();break;case"img":c.src&&(t.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===n.memoizedState){var u=n.alternate;if(null!==u){var d=u.memoizedState;if(null!==d){var p=d.dehydrated;null!==p&&zn(p)}}}break;default:throw Error(a(163))}Qs||512&n.flags&&al(n)}catch(f){Ec(n,n.return,f)}}if(n===e){Js=null;break}if(null!==(t=n.sibling)){t.return=n.return,Js=t;break}Js=n.return}}function xl(e){for(;null!==Js;){var n=Js;if(n===e){Js=null;break}var t=n.sibling;if(null!==t){t.return=n.return,Js=t;break}Js=n.return}}function kl(e){for(;null!==Js;){var n=Js;try{switch(n.tag){case 0:case 11:case 15:var t=n.return;try{ol(4,n)}catch(l){Ec(n,t,l)}break;case 1:var r=n.stateNode;if("function"==typeof r.componentDidMount){var o=n.return;try{r.componentDidMount()}catch(l){Ec(n,o,l)}}var a=n.return;try{al(n)}catch(l){Ec(n,a,l)}break;case 5:var i=n.return;try{al(n)}catch(l){Ec(n,i,l)}}}catch(l){Ec(n,n.return,l)}if(n===e){Js=null;break}var s=n.sibling;if(null!==s){s.return=n.return,Js=s;break}Js=n.return}}var Tl,El=Math.ceil,Cl=S.ReactCurrentDispatcher,_l=S.ReactCurrentOwner,Al=S.ReactCurrentBatchConfig,Il=0,Pl=null,Ll=null,Rl=0,Nl=0,Ol=Eo(0),Fl=0,jl=null,Dl=0,Ml=0,Bl=0,$l=null,Ul=null,Vl=0,zl=1/0,Hl=null,Wl=!1,Gl=null,ql=null,Yl=!1,Kl=null,Xl=0,Ql=0,Zl=null,Jl=-1,ec=0;function nc(){return 0!=(6&Il)?Qe():-1!==Jl?Jl:Jl=Qe()}function tc(e){return 0==(1&e.mode)?1:0!=(2&Il)&&0!==Rl?Rl&-Rl:null!==ha.transition?(0===ec&&(ec=hn()),ec):0!==(e=Sn)?e:e=void 0===(e=window.event)?16:Qn(e.type)}function rc(e,n,t,r){if(50<Ql)throw Ql=0,Zl=null,Error(a(185));bn(e,t,r),0!=(2&Il)&&e===Pl||(e===Pl&&(0==(2&Il)&&(Ml|=t),4===Fl&&lc(e,Rl)),oc(e,r),1===t&&0===Il&&0==(1&n.mode)&&(zl=Qe()+500,$o&&zo()))}function oc(e,n){var t=e.callbackNode;!function(e,n){for(var t=e.suspendedLanes,r=e.pingedLanes,o=e.expirationTimes,a=e.pendingLanes;0<a;){var i=31-sn(a),s=1<<i,l=o[i];-1===l?0!=(s&t)&&0==(s&r)||(o[i]=mn(s,n)):l<=n&&(e.expiredLanes|=s),a&=~s}}(e,n);var r=fn(e,e===Pl?Rl:0);if(0===r)null!==t&&Ye(t),e.callbackNode=null,e.callbackPriority=0;else if(n=r&-r,e.callbackPriority!==n){if(null!=t&&Ye(t),1===n)0===e.tag?function(e){$o=!0,Vo(e)}(cc.bind(null,e)):Vo(cc.bind(null,e)),io((function(){0==(6&Il)&&zo()})),t=null;else{switch(wn(r)){case 1:t=Je;break;case 4:t=en;break;case 16:default:t=nn;break;case 536870912:t=rn}t=Pc(t,ac.bind(null,e))}e.callbackPriority=n,e.callbackNode=t}}function ac(e,n){if(Jl=-1,ec=0,0!=(6&Il))throw Error(a(327));var t=e.callbackNode;if(kc()&&e.callbackNode!==t)return null;var r=fn(e,e===Pl?Rl:0);if(0===r)return null;if(0!=(30&r)||0!=(r&e.expiredLanes)||n)n=yc(e,r);else{n=r;var o=Il;Il|=2;var i=gc();for(Pl===e&&Rl===n||(Hl=null,zl=Qe()+500,fc(e,n));;)try{vc();break}catch(l){mc(e,l)}xa(),Cl.current=i,Il=o,null!==Ll?n=0:(Pl=null,Rl=0,n=Fl)}if(0!==n){if(2===n&&(0!==(o=gn(e))&&(r=o,n=ic(e,o))),1===n)throw t=jl,fc(e,0),lc(e,r),oc(e,Qe()),t;if(6===n)lc(e,r);else{if(o=e.current.alternate,0==(30&r)&&!function(e){for(var n=e;;){if(16384&n.flags){var t=n.updateQueue;if(null!==t&&null!==(t=t.stores))for(var r=0;r<t.length;r++){var o=t[r],a=o.getSnapshot;o=o.value;try{if(!sr(a(),o))return!1}catch(s){return!1}}}if(t=n.child,16384&n.subtreeFlags&&null!==t)t.return=n,n=t;else{if(n===e)break;for(;null===n.sibling;){if(null===n.return||n.return===e)return!0;n=n.return}n.sibling.return=n.return,n=n.sibling}}return!0}(o)&&(2===(n=yc(e,r))&&(0!==(i=gn(e))&&(r=i,n=ic(e,i))),1===n))throw t=jl,fc(e,0),lc(e,r),oc(e,Qe()),t;switch(e.finishedWork=o,e.finishedLanes=r,n){case 0:case 1:throw Error(a(345));case 2:case 5:xc(e,Ul,Hl);break;case 3:if(lc(e,r),(130023424&r)===r&&10<(n=Vl+500-Qe())){if(0!==fn(e,0))break;if(((o=e.suspendedLanes)&r)!==r){nc(),e.pingedLanes|=e.suspendedLanes&o;break}e.timeoutHandle=ro(xc.bind(null,e,Ul,Hl),n);break}xc(e,Ul,Hl);break;case 4:if(lc(e,r),(4194240&r)===r)break;for(n=e.eventTimes,o=-1;0<r;){var s=31-sn(r);i=1<<s,(s=n[s])>o&&(o=s),r&=~i}if(r=o,10<(r=(120>(r=Qe()-r)?120:480>r?480:1080>r?1080:1920>r?1920:3e3>r?3e3:4320>r?4320:1960*El(r/1960))-r)){e.timeoutHandle=ro(xc.bind(null,e,Ul,Hl),r);break}xc(e,Ul,Hl);break;default:throw Error(a(329))}}}return oc(e,Qe()),e.callbackNode===t?ac.bind(null,e):null}function ic(e,n){var t=$l;return e.current.memoizedState.isDehydrated&&(fc(e,n).flags|=256),2!==(e=yc(e,n))&&(n=Ul,Ul=t,null!==n&&sc(n)),e}function sc(e){null===Ul?Ul=e:Ul.push.apply(Ul,e)}function lc(e,n){for(n&=~Bl,n&=~Ml,e.suspendedLanes|=n,e.pingedLanes&=~n,e=e.expirationTimes;0<n;){var t=31-sn(n),r=1<<t;e[t]=-1,n&=~r}}function cc(e){if(0!=(6&Il))throw Error(a(327));kc();var n=fn(e,0);if(0==(1&n))return oc(e,Qe()),null;var t=yc(e,n);if(0!==e.tag&&2===t){var r=gn(e);0!==r&&(n=r,t=ic(e,r))}if(1===t)throw t=jl,fc(e,0),lc(e,n),oc(e,Qe()),t;if(6===t)throw Error(a(345));return e.finishedWork=e.current.alternate,e.finishedLanes=n,xc(e,Ul,Hl),oc(e,Qe()),null}function uc(e,n){var t=Il;Il|=1;try{return e(n)}finally{0===(Il=t)&&(zl=Qe()+500,$o&&zo())}}function dc(e){null!==Kl&&0===Kl.tag&&0==(6&Il)&&kc();var n=Il;Il|=1;var t=Al.transition,r=Sn;try{if(Al.transition=null,Sn=1,e)return e()}finally{Sn=r,Al.transition=t,0==(6&(Il=n))&&zo()}}function pc(){Nl=Ol.current,Co(Ol)}function fc(e,n){e.finishedWork=null,e.finishedLanes=0;var t=e.timeoutHandle;if(-1!==t&&(e.timeoutHandle=-1,oo(t)),null!==Ll)for(t=Ll.return;null!==t;){var r=t;switch(ta(r),r.tag){case 1:null!=(r=r.type.childContextTypes)&&Oo();break;case 3:ai(),Co(Po),Co(Io),di();break;case 5:si(r);break;case 4:ai();break;case 13:case 19:Co(li);break;case 10:ka(r.type._context);break;case 22:case 23:pc()}t=t.return}if(Pl=e,Ll=e=Oc(e.current,null),Rl=Nl=n,Fl=0,jl=null,Bl=Ml=Dl=0,Ul=$l=null,null!==_a){for(n=0;n<_a.length;n++)if(null!==(r=(t=_a[n]).interleaved)){t.interleaved=null;var o=r.next,a=t.pending;if(null!==a){var i=a.next;a.next=o,r.next=i}t.pending=r}_a=null}return e}function mc(e,n){for(;;){var t=Ll;try{if(xa(),pi.current=is,bi){for(var r=gi.memoizedState;null!==r;){var o=r.queue;null!==o&&(o.pending=null),r=r.next}bi=!1}if(mi=0,yi=hi=gi=null,vi=!1,Si=0,_l.current=null,null===t||null===t.return){Fl=1,jl=n,Ll=null;break}e:{var i=e,s=t.return,l=t,c=n;if(n=Rl,l.flags|=32768,null!==c&&"object"==typeof c&&"function"==typeof c.then){var u=c,d=l,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=ys(s);if(null!==m){m.flags&=-257,bs(m,s,l,0,n),1&m.mode&&hs(i,u,n),c=u;var g=(n=m).updateQueue;if(null===g){var h=new Set;h.add(c),n.updateQueue=h}else g.add(c);break e}if(0==(1&n)){hs(i,u,n),hc();break e}c=Error(a(426))}else if(aa&&1&l.mode){var y=ys(s);if(null!==y){0==(65536&y.flags)&&(y.flags|=256),bs(y,s,l,0,n),ga(us(c,l));break e}}i=c=us(c,l),4!==Fl&&(Fl=2),null===$l?$l=[i]:$l.push(i),i=s;do{switch(i.tag){case 3:i.flags|=65536,n&=-n,i.lanes|=n,Da(i,ms(0,c,n));break e;case 1:l=c;var b=i.type,v=i.stateNode;if(0==(128&i.flags)&&("function"==typeof b.getDerivedStateFromError||null!==v&&"function"==typeof v.componentDidCatch&&(null===ql||!ql.has(v)))){i.flags|=65536,n&=-n,i.lanes|=n,Da(i,gs(i,l,n));break e}}i=i.return}while(null!==i)}wc(t)}catch(S){n=S,Ll===t&&null!==t&&(Ll=t=t.return);continue}break}}function gc(){var e=Cl.current;return Cl.current=is,null===e?is:e}function hc(){0!==Fl&&3!==Fl&&2!==Fl||(Fl=4),null===Pl||0==(268435455&Dl)&&0==(268435455&Ml)||lc(Pl,Rl)}function yc(e,n){var t=Il;Il|=2;var r=gc();for(Pl===e&&Rl===n||(Hl=null,fc(e,n));;)try{bc();break}catch(o){mc(e,o)}if(xa(),Il=t,Cl.current=r,null!==Ll)throw Error(a(261));return Pl=null,Rl=0,Fl}function bc(){for(;null!==Ll;)Sc(Ll)}function vc(){for(;null!==Ll&&!Ke();)Sc(Ll)}function Sc(e){var n=Tl(e.alternate,e,Nl);e.memoizedProps=e.pendingProps,null===n?wc(e):Ll=n,_l.current=null}function wc(e){var n=e;do{var t=n.alternate;if(e=n.return,0==(32768&n.flags)){if(null!==(t=Ys(t,n,Nl)))return void(Ll=t)}else{if(null!==(t=Ks(t,n)))return t.flags&=32767,void(Ll=t);if(null===e)return Fl=6,void(Ll=null);e.flags|=32768,e.subtreeFlags=0,e.deletions=null}if(null!==(n=n.sibling))return void(Ll=n);Ll=n=e}while(null!==n);0===Fl&&(Fl=5)}function xc(e,n,t){var r=Sn,o=Al.transition;try{Al.transition=null,Sn=1,function(e,n,t,r){do{kc()}while(null!==Kl);if(0!=(6&Il))throw Error(a(327));t=e.finishedWork;var o=e.finishedLanes;if(null===t)return null;if(e.finishedWork=null,e.finishedLanes=0,t===e.current)throw Error(a(177));e.callbackNode=null,e.callbackPriority=0;var i=t.lanes|t.childLanes;if(function(e,n){var t=e.pendingLanes&~n;e.pendingLanes=n,e.suspendedLanes=0,e.pingedLanes=0,e.expiredLanes&=n,e.mutableReadLanes&=n,e.entangledLanes&=n,n=e.entanglements;var r=e.eventTimes;for(e=e.expirationTimes;0<t;){var o=31-sn(t),a=1<<o;n[o]=0,r[o]=-1,e[o]=-1,t&=~a}}(e,i),e===Pl&&(Ll=Pl=null,Rl=0),0==(2064&t.subtreeFlags)&&0==(2064&t.flags)||Yl||(Yl=!0,Pc(nn,(function(){return kc(),null}))),i=0!=(15990&t.flags),0!=(15990&t.subtreeFlags)||i){i=Al.transition,Al.transition=null;var s=Sn;Sn=1;var l=Il;Il|=4,_l.current=null,function(e,n){if(eo=Wn,fr(e=pr())){if("selectionStart"in e)var t={start:e.selectionStart,end:e.selectionEnd};else e:{var r=(t=(t=e.ownerDocument)&&t.defaultView||window).getSelection&&t.getSelection();if(r&&0!==r.rangeCount){t=r.anchorNode;var o=r.anchorOffset,i=r.focusNode;r=r.focusOffset;try{t.nodeType,i.nodeType}catch(w){t=null;break e}var s=0,l=-1,c=-1,u=0,d=0,p=e,f=null;n:for(;;){for(var m;p!==t||0!==o&&3!==p.nodeType||(l=s+o),p!==i||0!==r&&3!==p.nodeType||(c=s+r),3===p.nodeType&&(s+=p.nodeValue.length),null!==(m=p.firstChild);)f=p,p=m;for(;;){if(p===e)break n;if(f===t&&++u===o&&(l=s),f===i&&++d===r&&(c=s),null!==(m=p.nextSibling))break;f=(p=f).parentNode}p=m}t=-1===l||-1===c?null:{start:l,end:c}}else t=null}t=t||{start:0,end:0}}else t=null;for(no={focusedElem:e,selectionRange:t},Wn=!1,Js=n;null!==Js;)if(e=(n=Js).child,0!=(1028&n.subtreeFlags)&&null!==e)e.return=n,Js=e;else for(;null!==Js;){n=Js;try{var g=n.alternate;if(0!=(1024&n.flags))switch(n.tag){case 0:case 11:case 15:case 5:case 6:case 4:case 17:break;case 1:if(null!==g){var h=g.memoizedProps,y=g.memoizedState,b=n.stateNode,v=b.getSnapshotBeforeUpdate(n.elementType===n.type?h:ya(n.type,h),y);b.__reactInternalSnapshotBeforeUpdate=v}break;case 3:var S=n.stateNode.containerInfo;1===S.nodeType?S.textContent="":9===S.nodeType&&S.documentElement&&S.removeChild(S.documentElement);break;default:throw Error(a(163))}}catch(w){Ec(n,n.return,w)}if(null!==(e=n.sibling)){e.return=n.return,Js=e;break}Js=n.return}g=tl,tl=!1}(e,t),yl(t,e),mr(no),Wn=!!eo,no=eo=null,e.current=t,vl(t,e,o),Xe(),Il=l,Sn=s,Al.transition=i}else e.current=t;if(Yl&&(Yl=!1,Kl=e,Xl=o),i=e.pendingLanes,0===i&&(ql=null),function(e){if(an&&"function"==typeof an.onCommitFiberRoot)try{an.onCommitFiberRoot(on,e,void 0,128==(128&e.current.flags))}catch(n){}}(t.stateNode),oc(e,Qe()),null!==n)for(r=e.onRecoverableError,t=0;t<n.length;t++)o=n[t],r(o.value,{componentStack:o.stack,digest:o.digest});if(Wl)throw Wl=!1,e=Gl,Gl=null,e;0!=(1&Xl)&&0!==e.tag&&kc(),i=e.pendingLanes,0!=(1&i)?e===Zl?Ql++:(Ql=0,Zl=e):Ql=0,zo()}(e,n,t,r)}finally{Al.transition=o,Sn=r}return null}function kc(){if(null!==Kl){var e=wn(Xl),n=Al.transition,t=Sn;try{if(Al.transition=null,Sn=16>e?16:e,null===Kl)var r=!1;else{if(e=Kl,Kl=null,Xl=0,0!=(6&Il))throw Error(a(331));var o=Il;for(Il|=4,Js=e.current;null!==Js;){var i=Js,s=i.child;if(0!=(16&Js.flags)){var l=i.deletions;if(null!==l){for(var c=0;c<l.length;c++){var u=l[c];for(Js=u;null!==Js;){var d=Js;switch(d.tag){case 0:case 11:case 15:rl(8,d,i)}var p=d.child;if(null!==p)p.return=d,Js=p;else for(;null!==Js;){var f=(d=Js).sibling,m=d.return;if(il(d),d===u){Js=null;break}if(null!==f){f.return=m,Js=f;break}Js=m}}}var g=i.alternate;if(null!==g){var h=g.child;if(null!==h){g.child=null;do{var y=h.sibling;h.sibling=null,h=y}while(null!==h)}}Js=i}}if(0!=(2064&i.subtreeFlags)&&null!==s)s.return=i,Js=s;else e:for(;null!==Js;){if(0!=(2048&(i=Js).flags))switch(i.tag){case 0:case 11:case 15:rl(9,i,i.return)}var b=i.sibling;if(null!==b){b.return=i.return,Js=b;break e}Js=i.return}}var v=e.current;for(Js=v;null!==Js;){var S=(s=Js).child;if(0!=(2064&s.subtreeFlags)&&null!==S)S.return=s,Js=S;else e:for(s=v;null!==Js;){if(0!=(2048&(l=Js).flags))try{switch(l.tag){case 0:case 11:case 15:ol(9,l)}}catch(x){Ec(l,l.return,x)}if(l===s){Js=null;break e}var w=l.sibling;if(null!==w){w.return=l.return,Js=w;break e}Js=l.return}}if(Il=o,zo(),an&&"function"==typeof an.onPostCommitFiberRoot)try{an.onPostCommitFiberRoot(on,e)}catch(x){}r=!0}return r}finally{Sn=t,Al.transition=n}}return!1}function Tc(e,n,t){e=Fa(e,n=ms(0,n=us(t,n),1),1),n=nc(),null!==e&&(bn(e,1,n),oc(e,n))}function Ec(e,n,t){if(3===e.tag)Tc(e,e,t);else for(;null!==n;){if(3===n.tag){Tc(n,e,t);break}if(1===n.tag){var r=n.stateNode;if("function"==typeof n.type.getDerivedStateFromError||"function"==typeof r.componentDidCatch&&(null===ql||!ql.has(r))){n=Fa(n,e=gs(n,e=us(t,e),1),1),e=nc(),null!==n&&(bn(n,1,e),oc(n,e));break}}n=n.return}}function Cc(e,n,t){var r=e.pingCache;null!==r&&r.delete(n),n=nc(),e.pingedLanes|=e.suspendedLanes&t,Pl===e&&(Rl&t)===t&&(4===Fl||3===Fl&&(130023424&Rl)===Rl&&500>Qe()-Vl?fc(e,0):Bl|=t),oc(e,n)}function _c(e,n){0===n&&(0==(1&e.mode)?n=1:(n=dn,0==(130023424&(dn<<=1))&&(dn=4194304)));var t=nc();null!==(e=Pa(e,n))&&(bn(e,n,t),oc(e,t))}function Ac(e){var n=e.memoizedState,t=0;null!==n&&(t=n.retryLane),_c(e,t)}function Ic(e,n){var t=0;switch(e.tag){case 13:var r=e.stateNode,o=e.memoizedState;null!==o&&(t=o.retryLane);break;case 19:r=e.stateNode;break;default:throw Error(a(314))}null!==r&&r.delete(n),_c(e,t)}function Pc(e,n){return qe(e,n)}function Lc(e,n,t,r){this.tag=e,this.key=t,this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null,this.index=0,this.ref=null,this.pendingProps=n,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,n,t,r){return new Lc(e,n,t,r)}function Nc(e){return!(!(e=e.prototype)||!e.isReactComponent)}function Oc(e,n){var t=e.alternate;return null===t?((t=Rc(e.tag,n,e.key,e.mode)).elementType=e.elementType,t.type=e.type,t.stateNode=e.stateNode,t.alternate=e,e.alternate=t):(t.pendingProps=n,t.type=e.type,t.flags=0,t.subtreeFlags=0,t.deletions=null),t.flags=14680064&e.flags,t.childLanes=e.childLanes,t.lanes=e.lanes,t.child=e.child,t.memoizedProps=e.memoizedProps,t.memoizedState=e.memoizedState,t.updateQueue=e.updateQueue,n=e.dependencies,t.dependencies=null===n?null:{lanes:n.lanes,firstContext:n.firstContext},t.sibling=e.sibling,t.index=e.index,t.ref=e.ref,t}function Fc(e,n,t,r,o,i){var s=2;if(r=e,"function"==typeof e)Nc(e)&&(s=1);else if("string"==typeof e)s=5;else e:switch(e){case k:return jc(t.children,o,i,n);case T:s=8,o|=8;break;case E:return(e=Rc(12,t,n,2|o)).elementType=E,e.lanes=i,e;case I:return(e=Rc(13,t,n,o)).elementType=I,e.lanes=i,e;case P:return(e=Rc(19,t,n,o)).elementType=P,e.lanes=i,e;case N:return Dc(t,o,i,n);default:if("object"==typeof e&&null!==e)switch(e.$$typeof){case C:s=10;break e;case _:s=9;break e;case A:s=11;break e;case L:s=14;break e;case R:s=16,r=null;break e}throw Error(a(130,null==e?e:typeof e,""))}return(n=Rc(s,t,n,o)).elementType=e,n.type=r,n.lanes=i,n}function jc(e,n,t,r){return(e=Rc(7,e,r,n)).lanes=t,e}function Dc(e,n,t,r){return(e=Rc(22,e,r,n)).elementType=N,e.lanes=t,e.stateNode={isHidden:!1},e}function Mc(e,n,t){return(e=Rc(6,e,null,n)).lanes=t,e}function Bc(e,n,t){return(n=Rc(4,null!==e.children?e.children:[],e.key,n)).lanes=t,n.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},n}function $c(e,n,t,r,o){this.tag=n,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=yn(0),this.expirationTimes=yn(-1),this.entangledLanes=this.finishedLanes=this.mutableReadLanes=this.expiredLanes=this.pingedLanes=this.suspendedLanes=this.pendingLanes=0,this.entanglements=yn(0),this.identifierPrefix=r,this.onRecoverableError=o,this.mutableSourceEagerHydrationData=null}function Uc(e,n,t,r,o,a,i,s,l){return e=new $c(e,n,t,s,l),1===n?(n=1,!0===a&&(n|=8)):n=0,a=Rc(3,null,null,n),e.current=a,a.stateNode=e,a.memoizedState={element:r,isDehydrated:t,cache:null,transitions:null,pendingSuspenseBoundaries:null},Ra(a),e}function Vc(e){if(!e)return Ao;e:{if(Ve(e=e._reactInternals)!==e||1!==e.tag)throw Error(a(170));var n=e;do{switch(n.tag){case 3:n=n.stateNode.context;break e;case 1:if(No(n.type)){n=n.stateNode.__reactInternalMemoizedMergedChildContext;break e}}n=n.return}while(null!==n);throw Error(a(171))}if(1===e.tag){var t=e.type;if(No(t))return jo(e,t,n)}return n}function zc(e,n,t,r,o,a,i,s,l){return(e=Uc(t,r,!0,e,0,a,0,s,l)).context=Vc(null),t=e.current,(a=Oa(r=nc(),o=tc(t))).callback=null!=n?n:null,Fa(t,a,o),e.current.lanes=o,bn(e,o,r),oc(e,r),e}function Hc(e,n,t,r){var o=n.current,a=nc(),i=tc(o);return t=Vc(t),null===n.context?n.context=t:n.pendingContext=t,(n=Oa(a,i)).payload={element:e},null!==(r=void 0===r?null:r)&&(n.callback=r),null!==(e=Fa(o,n,i))&&(rc(e,o,i,a),ja(e,o,i)),i}function Wc(e){return(e=e.current).child?(e.child.tag,e.child.stateNode):null}function Gc(e,n){if(null!==(e=e.memoizedState)&&null!==e.dehydrated){var t=e.retryLane;e.retryLane=0!==t&&t<n?t:n}}function qc(e,n){Gc(e,n),(e=e.alternate)&&Gc(e,n)}Tl=function(e,n,t){if(null!==e)if(e.memoizedProps!==n.pendingProps||Po.current)Ss=!0;else{if(0==(e.lanes&t)&&0==(128&n.flags))return Ss=!1,function(e,n,t){switch(n.tag){case 3:Ps(n),ma();break;case 5:ii(n);break;case 1:No(n.type)&&Do(n);break;case 4:oi(n,n.stateNode.containerInfo);break;case 10:var r=n.type._context,o=n.memoizedProps.value;_o(ba,r._currentValue),r._currentValue=o;break;case 13:if(null!==(r=n.memoizedState))return null!==r.dehydrated?(_o(li,1&li.current),n.flags|=128,null):0!=(t&n.child.childLanes)?Ms(e,n,t):(_o(li,1&li.current),null!==(e=Ws(e,n,t))?e.sibling:null);_o(li,1&li.current);break;case 19:if(r=0!=(t&n.childLanes),0!=(128&e.flags)){if(r)return zs(e,n,t);n.flags|=128}if(null!==(o=n.memoizedState)&&(o.rendering=null,o.tail=null,o.lastEffect=null),_o(li,li.current),r)break;return null;case 22:case 23:return n.lanes=0,Es(e,n,t)}return Ws(e,n,t)}(e,n,t);Ss=0!=(131072&e.flags)}else Ss=!1,aa&&0!=(1048576&n.flags)&&ea(n,qo,n.index);switch(n.lanes=0,n.tag){case 2:var r=n.type;Hs(e,n),e=n.pendingProps;var o=Ro(n,Io.current);Ea(n,t),o=Ti(null,n,r,e,o,t);var i=Ei();return n.flags|=1,"object"==typeof o&&null!==o&&"function"==typeof o.render&&void 0===o.$$typeof?(n.tag=1,n.memoizedState=null,n.updateQueue=null,No(r)?(i=!0,Do(n)):i=!1,n.memoizedState=null!==o.state&&void 0!==o.state?o.state:null,Ra(n),o.updater=Va,n.stateNode=o,o._reactInternals=n,Ga(n,r,e,t),n=Is(null,n,r,!0,i,t)):(n.tag=0,aa&&i&&na(n),ws(null,n,o,t),n=n.child),n;case 16:r=n.elementType;e:{switch(Hs(e,n),e=n.pendingProps,r=(o=r._init)(r._payload),n.type=r,o=n.tag=function(e){if("function"==typeof e)return Nc(e)?1:0;if(null!=e){if((e=e.$$typeof)===A)return 11;if(e===L)return 14}return 2}(r),e=ya(r,e),o){case 0:n=_s(null,n,r,e,t);break e;case 1:n=As(null,n,r,e,t);break e;case 11:n=xs(null,n,r,e,t);break e;case 14:n=ks(null,n,r,ya(r.type,e),t);break e}throw Error(a(306,r,""))}return n;case 0:return r=n.type,o=n.pendingProps,_s(e,n,r,o=n.elementType===r?o:ya(r,o),t);case 1:return r=n.type,o=n.pendingProps,As(e,n,r,o=n.elementType===r?o:ya(r,o),t);case 3:e:{if(Ps(n),null===e)throw Error(a(387));r=n.pendingProps,o=(i=n.memoizedState).element,Na(e,n),Ma(n,r,null,t);var s=n.memoizedState;if(r=s.element,i.isDehydrated){if(i={element:r,isDehydrated:!1,cache:s.cache,pendingSuspenseBoundaries:s.pendingSuspenseBoundaries,transitions:s.transitions},n.updateQueue.baseState=i,n.memoizedState=i,256&n.flags){n=Ls(e,n,r,t,o=us(Error(a(423)),n));break e}if(r!==o){n=Ls(e,n,r,t,o=us(Error(a(424)),n));break e}for(oa=co(n.stateNode.containerInfo.firstChild),ra=n,aa=!0,ia=null,t=Za(n,null,r,t),n.child=t;t;)t.flags=-3&t.flags|4096,t=t.sibling}else{if(ma(),r===o){n=Ws(e,n,t);break e}ws(e,n,r,t)}n=n.child}return n;case 5:return ii(n),null===e&&ua(n),r=n.type,o=n.pendingProps,i=null!==e?e.memoizedProps:null,s=o.children,to(r,o)?s=null:null!==i&&to(r,i)&&(n.flags|=32),Cs(e,n),ws(e,n,s,t),n.child;case 6:return null===e&&ua(n),null;case 13:return Ms(e,n,t);case 4:return oi(n,n.stateNode.containerInfo),r=n.pendingProps,null===e?n.child=Qa(n,null,r,t):ws(e,n,r,t),n.child;case 11:return r=n.type,o=n.pendingProps,xs(e,n,r,o=n.elementType===r?o:ya(r,o),t);case 7:return ws(e,n,n.pendingProps,t),n.child;case 8:case 12:return ws(e,n,n.pendingProps.children,t),n.child;case 10:e:{if(r=n.type._context,o=n.pendingProps,i=n.memoizedProps,s=o.value,_o(ba,r._currentValue),r._currentValue=s,null!==i)if(sr(i.value,s)){if(i.children===o.children&&!Po.current){n=Ws(e,n,t);break e}}else for(null!==(i=n.child)&&(i.return=n);null!==i;){var l=i.dependencies;if(null!==l){s=i.child;for(var c=l.firstContext;null!==c;){if(c.context===r){if(1===i.tag){(c=Oa(-1,t&-t)).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|=t,null!==(c=i.alternate)&&(c.lanes|=t),Ta(i.return,t,n),l.lanes|=t;break}c=c.next}}else if(10===i.tag)s=i.type===n.type?null:i.child;else if(18===i.tag){if(null===(s=i.return))throw Error(a(341));s.lanes|=t,null!==(l=s.alternate)&&(l.lanes|=t),Ta(s,t,n),s=i.sibling}else s=i.child;if(null!==s)s.return=i;else for(s=i;null!==s;){if(s===n){s=null;break}if(null!==(i=s.sibling)){i.return=s.return,s=i;break}s=s.return}i=s}ws(e,n,o.children,t),n=n.child}return n;case 9:return o=n.type,r=n.pendingProps.children,Ea(n,t),r=r(o=Ca(o)),n.flags|=1,ws(e,n,r,t),n.child;case 14:return o=ya(r=n.type,n.pendingProps),ks(e,n,r,o=ya(r.type,o),t);case 15:return Ts(e,n,n.type,n.pendingProps,t);case 17:return r=n.type,o=n.pendingProps,o=n.elementType===r?o:ya(r,o),Hs(e,n),n.tag=1,No(r)?(e=!0,Do(n)):e=!1,Ea(n,t),Ha(n,r,o),Ga(n,r,o,t),Is(null,n,r,!0,e,t);case 19:return zs(e,n,t);case 22:return Es(e,n,t)}throw Error(a(156,n.tag))};var Yc="function"==typeof reportError?reportError:function(e){console.error(e)};function Kc(e){this._internalRoot=e}function Xc(e){this._internalRoot=e}function Qc(e){return!(!e||1!==e.nodeType&&9!==e.nodeType&&11!==e.nodeType)}function Zc(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,n,t,r,o){var a=t._reactRootContainer;if(a){var i=a;if("function"==typeof o){var s=o;o=function(){var e=Wc(i);s.call(e)}}Hc(n,i,e,o)}else i=function(e,n,t,r,o){if(o){if("function"==typeof r){var a=r;r=function(){var e=Wc(i);a.call(e)}}var i=zc(n,r,e,0,null,!1,0,"",Jc);return e._reactRootContainer=i,e[go]=i.current,Vr(8===e.nodeType?e.parentNode:e),dc(),i}for(;o=e.lastChild;)e.removeChild(o);if("function"==typeof r){var s=r;r=function(){var e=Wc(l);s.call(e)}}var l=Uc(e,0,!1,null,0,!1,0,"",Jc);return e._reactRootContainer=l,e[go]=l.current,Vr(8===e.nodeType?e.parentNode:e),dc((function(){Hc(n,l,t,r)})),l}(t,n,e,o,r);return Wc(i)}Xc.prototype.render=Kc.prototype.render=function(e){var n=this._internalRoot;if(null===n)throw Error(a(409));Hc(e,n,null,null)},Xc.prototype.unmount=Kc.prototype.unmount=function(){var e=this._internalRoot;if(null!==e){this._internalRoot=null;var n=e.containerInfo;dc((function(){Hc(null,e,null,null)})),n[go]=null}},Xc.prototype.unstable_scheduleHydration=function(e){if(e){var n=En();e={blockedOn:null,target:e,priority:n};for(var t=0;t<On.length&&0!==n&&n<On[t].priority;t++);On.splice(t,0,e),0===t&&Mn(e)}},xn=function(e){switch(e.tag){case 3:var n=e.stateNode;if(n.current.memoizedState.isDehydrated){var t=pn(n.pendingLanes);0!==t&&(vn(n,1|t),oc(n,Qe()),0==(6&Il)&&(zl=Qe()+500,zo()))}break;case 13:dc((function(){var n=Pa(e,1);if(null!==n){var t=nc();rc(n,e,1,t)}})),qc(e,1)}},kn=function(e){if(13===e.tag){var n=Pa(e,134217728);if(null!==n)rc(n,e,134217728,nc());qc(e,134217728)}},Tn=function(e){if(13===e.tag){var n=tc(e),t=Pa(e,n);if(null!==t)rc(t,e,n,nc());qc(e,n)}},En=function(){return Sn},Cn=function(e,n){var t=Sn;try{return Sn=e,n()}finally{Sn=t}},xe=function(e,n,t){switch(n){case"input":if(Z(e,t),n=t.name,"radio"===t.type&&null!=n){for(t=e;t.parentNode;)t=t.parentNode;for(t=t.querySelectorAll("input[name="+JSON.stringify(""+n)+'][type="radio"]'),n=0;n<t.length;n++){var r=t[n];if(r!==e&&r.form===e.form){var o=xo(r);if(!o)throw Error(a(90));q(r),Z(r,o)}}}break;case"textarea":ae(e,t);break;case"select":null!=(n=t.value)&&te(e,!!t.multiple,n,!1)}},Ae=uc,Ie=dc;var nu={usingClientEntryPoint:!1,Events:[So,wo,xo,Ce,_e,uc]},tu={findFiberByHostInstance:vo,bundleType:0,version:"18.2.0",rendererPackageName:"react-dom"},ru={bundleType:tu.bundleType,version:tu.version,rendererPackageName:tu.rendererPackageName,rendererConfig:tu.rendererConfig,overrideHookState:null,overrideHookStateDeletePath:null,overrideHookStateRenamePath:null,overrideProps:null,overridePropsDeletePath:null,overridePropsRenamePath:null,setErrorHandler:null,setSuspenseHandler:null,scheduleUpdate:null,currentDispatcherRef:S.ReactCurrentDispatcher,findHostInstanceByFiber:function(e){return null===(e=We(e))?null:e.stateNode},findFiberByHostInstance:tu.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 ou=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!ou.isDisabled&&ou.supportsFiber)try{on=ou.inject(ru),an=ou}catch(ue){}}n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=nu,n.createPortal=function(e,n){var t=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;if(!Qc(n))throw Error(a(200));return function(e,n,t){var r=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null;return{$$typeof:x,key:null==r?null:""+r,children:e,containerInfo:n,implementation:t}}(e,n,null,t)},n.createRoot=function(e,n){if(!Qc(e))throw Error(a(299));var t=!1,r="",o=Yc;return null!=n&&(!0===n.unstable_strictMode&&(t=!0),void 0!==n.identifierPrefix&&(r=n.identifierPrefix),void 0!==n.onRecoverableError&&(o=n.onRecoverableError)),n=Uc(e,1,!1,null,0,t,0,r,o),e[go]=n.current,Vr(8===e.nodeType?e.parentNode:e),new Kc(n)},n.findDOMNode=function(e){if(null==e)return null;if(1===e.nodeType)return e;var n=e._reactInternals;if(void 0===n){if("function"==typeof e.render)throw Error(a(188));throw e=Object.keys(e).join(","),Error(a(268,e))}return e=null===(e=We(n))?null:e.stateNode},n.flushSync=function(e){return dc(e)},n.hydrate=function(e,n,t){if(!Zc(n))throw Error(a(200));return eu(null,e,n,!0,t)},n.hydrateRoot=function(e,n,t){if(!Qc(e))throw Error(a(405));var r=null!=t&&t.hydratedSources||null,o=!1,i="",s=Yc;if(null!=t&&(!0===t.unstable_strictMode&&(o=!0),void 0!==t.identifierPrefix&&(i=t.identifierPrefix),void 0!==t.onRecoverableError&&(s=t.onRecoverableError)),n=zc(n,null,e,1,null!=t?t:null,o,0,i,s),e[go]=n.current,Vr(e),r)for(e=0;e<r.length;e++)o=(o=(t=r[e])._getVersion)(t._source),null==n.mutableSourceEagerHydrationData?n.mutableSourceEagerHydrationData=[t,o]:n.mutableSourceEagerHydrationData.push(t,o);return new Xc(n)},n.render=function(e,n,t){if(!Zc(n))throw Error(a(200));return eu(null,e,n,!1,t)},n.unmountComponentAtNode=function(e){if(!Zc(e))throw Error(a(40));return!!e._reactRootContainer&&(dc((function(){eu(null,null,e,!1,(function(){e._reactRootContainer=null,e[go]=null}))})),!0)},n.unstable_batchedUpdates=uc,n.unstable_renderSubtreeIntoContainer=function(e,n,t,r){if(!Zc(t))throw Error(a(200));if(null==e||void 0===e._reactInternals)throw Error(a(38));return eu(e,n,t,!1,r)},n.version="18.2.0-next-9e3b772b8-20220608"},8352:(e,n,t)=>{"use strict";var r=t(7104);n.createRoot=r.createRoot,n.hydrateRoot=r.hydrateRoot},7104:(e,n,t)=>{"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(n){console.error(n)}}(),e.exports=t(9516)},448:e=>{var n="undefined"!=typeof Element,t="function"==typeof Map,r="function"==typeof Set,o="function"==typeof ArrayBuffer&&!!ArrayBuffer.isView;function a(e,i){if(e===i)return!0;if(e&&i&&"object"==typeof e&&"object"==typeof i){if(e.constructor!==i.constructor)return!1;var s,l,c,u;if(Array.isArray(e)){if((s=e.length)!=i.length)return!1;for(l=s;0!=l--;)if(!a(e[l],i[l]))return!1;return!0}if(t&&e instanceof Map&&i instanceof Map){if(e.size!==i.size)return!1;for(u=e.entries();!(l=u.next()).done;)if(!i.has(l.value[0]))return!1;for(u=e.entries();!(l=u.next()).done;)if(!a(l.value[1],i.get(l.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();!(l=u.next()).done;)if(!i.has(l.value[0]))return!1;return!0}if(o&&ArrayBuffer.isView(e)&&ArrayBuffer.isView(i)){if((s=e.length)!=i.length)return!1;for(l=s;0!=l--;)if(e[l]!==i[l])return!1;return!0}if(e.constructor===RegExp)return e.source===i.source&&e.flags===i.flags;if(e.valueOf!==Object.prototype.valueOf)return e.valueOf()===i.valueOf();if(e.toString!==Object.prototype.toString)return e.toString()===i.toString();if((s=(c=Object.keys(e)).length)!==Object.keys(i).length)return!1;for(l=s;0!=l--;)if(!Object.prototype.hasOwnProperty.call(i,c[l]))return!1;if(n&&e instanceof Element)return!1;for(l=s;0!=l--;)if(("_owner"!==c[l]&&"__v"!==c[l]&&"__o"!==c[l]||!e.$$typeof)&&!a(e[c[l]],i[c[l]]))return!1;return!0}return e!=e&&i!=i}e.exports=function(e,n){try{return a(e,n)}catch(t){if((t.message||"").match(/stack|recursion/i))return console.warn("react-fast-compare cannot handle circular refs"),!1;throw t}}},2160:(e,n,t)=>{"use strict";t.d(n,{EN:()=>W,So:()=>J});var r=t(1504),o=t(3268),a=t.n(o),i=t(448),s=t.n(i),l=t(9328),c=t.n(l),u=t(1072),d=t.n(u);function p(){return p=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},p.apply(this,arguments)}function f(e,n){e.prototype=Object.create(n.prototype),e.prototype.constructor=e,m(e,n)}function m(e,n){return m=Object.setPrototypeOf||function(e,n){return e.__proto__=n,e},m(e,n)}function g(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n.indexOf(t=a[r])>=0||(o[t]=e[t]);return o}var h={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"]},S=Object.keys(h).map((function(e){return h[e]})),w={accesskey:"accessKey",charset:"charSet",class:"className",contenteditable:"contentEditable",contextmenu:"contextMenu","http-equiv":"httpEquiv",itemprop:"itemProp",tabindex:"tabIndex"},x=Object.keys(w).reduce((function(e,n){return e[w[n]]=n,e}),{}),k=function(e,n){for(var t=e.length-1;t>=0;t-=1){var r=e[t];if(Object.prototype.hasOwnProperty.call(r,n))return r[n]}return null},T=function(e){var n=k(e,h.TITLE),t=k(e,"titleTemplate");if(Array.isArray(n)&&(n=n.join("")),t&&n)return t.replace(/%s/g,(function(){return n}));var r=k(e,"defaultTitle");return n||r||void 0},E=function(e){return k(e,"onChangeClientState")||function(){}},C=function(e,n){return n.filter((function(n){return void 0!==n[e]})).map((function(n){return n[e]})).reduce((function(e,n){return p({},e,n)}),{})},_=function(e,n){return n.filter((function(e){return void 0!==e[h.BASE]})).map((function(e){return e[h.BASE]})).reverse().reduce((function(n,t){if(!n.length)for(var r=Object.keys(t),o=0;o<r.length;o+=1){var a=r[o].toLowerCase();if(-1!==e.indexOf(a)&&t[a])return n.concat(t)}return n}),[])},A=function(e,n,t){var r={};return t.filter((function(n){return!!Array.isArray(n[e])||(void 0!==n[e]&&console&&"function"==typeof console.warn&&console.warn("Helmet: "+e+' should be of type "Array". Instead found type "'+typeof n[e]+'"'),!1)})).map((function(n){return n[e]})).reverse().reduce((function(e,t){var o={};t.filter((function(e){for(var t,a=Object.keys(e),i=0;i<a.length;i+=1){var s=a[i],l=s.toLowerCase();-1===n.indexOf(l)||"rel"===t&&"canonical"===e[t].toLowerCase()||"rel"===l&&"stylesheet"===e[l].toLowerCase()||(t=l),-1===n.indexOf(s)||"innerHTML"!==s&&"cssText"!==s&&"itemprop"!==s||(t=s)}if(!t||!e[t])return!1;var c=e[t].toLowerCase();return r[t]||(r[t]={}),o[t]||(o[t]={}),!r[t][c]&&(o[t][c]=!0,!0)})).reverse().forEach((function(n){return e.push(n)}));for(var a=Object.keys(o),i=0;i<a.length;i+=1){var s=a[i],l=p({},r[s],o[s]);r[s]=l}return e}),[]).reverse()},I=function(e,n){if(Array.isArray(e)&&e.length)for(var t=0;t<e.length;t+=1)if(e[t][n])return!0;return!1},P=function(e){return Array.isArray(e)?e.join(""):e},L=function(e,n){return Array.isArray(e)?e.reduce((function(e,t){return function(e,n){for(var t=Object.keys(e),r=0;r<t.length;r+=1)if(n[t[r]]&&n[t[r]].includes(e[t[r]]))return!0;return!1}(t,n)?e.priority.push(t):e.default.push(t),e}),{priority:[],default:[]}):{default:e}},R=function(e,n){var t;return p({},e,((t={})[n]=void 0,t))},N=[h.NOSCRIPT,h.SCRIPT,h.STYLE],O=function(e,n){return void 0===n&&(n=!0),!1===n?String(e):String(e).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;")},F=function(e){return Object.keys(e).reduce((function(n,t){var r=void 0!==e[t]?t+'="'+e[t]+'"':""+t;return n?n+" "+r:r}),"")},j=function(e,n){return void 0===n&&(n={}),Object.keys(e).reduce((function(n,t){return n[w[t]||t]=e[t],n}),n)},D=function(e,n){return n.map((function(n,t){var o,a=((o={key:t})["data-rh"]=!0,o);return Object.keys(n).forEach((function(e){var t=w[e]||e;"innerHTML"===t||"cssText"===t?a.dangerouslySetInnerHTML={__html:n.innerHTML||n.cssText}:a[t]=n[e]})),r.createElement(e,a)}))},M=function(e,n,t){switch(e){case h.TITLE:return{toComponent:function(){return t=n.titleAttributes,(o={key:e=n.title})["data-rh"]=!0,a=j(t,o),[r.createElement(h.TITLE,a,e)];var e,t,o,a},toString:function(){return function(e,n,t,r){var o=F(t),a=P(n);return o?"<"+e+' data-rh="true" '+o+">"+O(a,r)+"</"+e+">":"<"+e+' data-rh="true">'+O(a,r)+"</"+e+">"}(e,n.title,n.titleAttributes,t)}};case"bodyAttributes":case"htmlAttributes":return{toComponent:function(){return j(n)},toString:function(){return F(n)}};default:return{toComponent:function(){return D(e,n)},toString:function(){return function(e,n,t){return n.reduce((function(n,r){var o=Object.keys(r).filter((function(e){return!("innerHTML"===e||"cssText"===e)})).reduce((function(e,n){var o=void 0===r[n]?n:n+'="'+O(r[n],t)+'"';return e?e+" "+o:o}),""),a=r.innerHTML||r.cssText||"",i=-1===N.indexOf(e);return n+"<"+e+' data-rh="true" '+o+(i?"/>":">"+a+"</"+e+">")}),"")}(e,n,t)}}}},B=function(e){var n=e.baseTag,t=e.bodyAttributes,r=e.encode,o=e.htmlAttributes,a=e.noscriptTags,i=e.styleTags,s=e.title,l=void 0===s?"":s,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 n=e.linkTags,t=e.scriptTags,r=e.encode,o=L(e.metaTags,v),a=L(n,y),i=L(t,b);return{priorityMethods:{toComponent:function(){return[].concat(D(h.META,o.priority),D(h.LINK,a.priority),D(h.SCRIPT,i.priority))},toString:function(){return M(h.META,o.priority,r)+" "+M(h.LINK,a.priority,r)+" "+M(h.SCRIPT,i.priority,r)}},metaTags:o.default,linkTags:a.default,scriptTags:i.default}}(e);f=m.priorityMethods,u=m.linkTags,d=m.metaTags,p=m.scriptTags}return{priority:f,base:M(h.BASE,n,r),bodyAttributes:M("bodyAttributes",t,r),htmlAttributes:M("htmlAttributes",o,r),link:M(h.LINK,u,r),meta:M(h.META,d,r),noscript:M(h.NOSCRIPT,a,r),script:M(h.SCRIPT,p,r),style:M(h.STYLE,i,r),title:M(h.TITLE,{title:l,titleAttributes:c},r)}},$=[],U=function(e,n){var t=this;void 0===n&&(n="undefined"!=typeof document),this.instances=[],this.value={setHelmet:function(e){t.context.helmet=e},helmetInstances:{get:function(){return t.canUseDOM?$:t.instances},add:function(e){(t.canUseDOM?$:t.instances).push(e)},remove:function(e){var n=(t.canUseDOM?$:t.instances).indexOf(e);(t.canUseDOM?$:t.instances).splice(n,1)}}},this.context=e,this.canUseDOM=n,n||(e.helmet=B({baseTag:[],bodyAttributes:{},encodeSpecialCharacters:!0,htmlAttributes:{},linkTags:[],metaTags:[],noscriptTags:[],scriptTags:[],styleTags:[],title:"",titleAttributes:{}}))},V=r.createContext({}),z=a().shape({setHelmet:a().func,helmetInstances:a().shape({get:a().func,add:a().func,remove:a().func})}),H="undefined"!=typeof document,W=function(e){function n(t){var r;return(r=e.call(this,t)||this).helmetData=new U(r.props.context,n.canUseDOM),r}return f(n,e),n.prototype.render=function(){return r.createElement(V.Provider,{value:this.helmetData.value},this.props.children)},n}(r.Component);W.canUseDOM=H,W.propTypes={context:a().shape({helmet:a().shape()}),children:a().node.isRequired},W.defaultProps={context:{}},W.displayName="HelmetProvider";var G=function(e,n){var t,r=document.head||document.querySelector(h.HEAD),o=r.querySelectorAll(e+"[data-rh]"),a=[].slice.call(o),i=[];return n&&n.length&&n.forEach((function(n){var r=document.createElement(e);for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&("innerHTML"===o?r.innerHTML=n.innerHTML:"cssText"===o?r.styleSheet?r.styleSheet.cssText=n.cssText:r.appendChild(document.createTextNode(n.cssText)):r.setAttribute(o,void 0===n[o]?"":n[o]));r.setAttribute("data-rh","true"),a.some((function(e,n){return t=n,r.isEqualNode(e)}))?a.splice(t,1):i.push(r)})),a.forEach((function(e){return e.parentNode.removeChild(e)})),i.forEach((function(e){return r.appendChild(e)})),{oldTags:a,newTags:i}},q=function(e,n){var t=document.getElementsByTagName(e)[0];if(t){for(var r=t.getAttribute("data-rh"),o=r?r.split(","):[],a=[].concat(o),i=Object.keys(n),s=0;s<i.length;s+=1){var l=i[s],c=n[l]||"";t.getAttribute(l)!==c&&t.setAttribute(l,c),-1===o.indexOf(l)&&o.push(l);var u=a.indexOf(l);-1!==u&&a.splice(u,1)}for(var d=a.length-1;d>=0;d-=1)t.removeAttribute(a[d]);o.length===a.length?t.removeAttribute("data-rh"):t.getAttribute("data-rh")!==i.join(",")&&t.setAttribute("data-rh",i.join(","))}},Y=function(e,n){var t=e.baseTag,r=e.htmlAttributes,o=e.linkTags,a=e.metaTags,i=e.noscriptTags,s=e.onChangeClientState,l=e.scriptTags,c=e.styleTags,u=e.title,d=e.titleAttributes;q(h.BODY,e.bodyAttributes),q(h.HTML,r),function(e,n){void 0!==e&&document.title!==e&&(document.title=P(e)),q(h.TITLE,n)}(u,d);var p={baseTag:G(h.BASE,t),linkTags:G(h.LINK,o),metaTags:G(h.META,a),noscriptTags:G(h.NOSCRIPT,i),scriptTags:G(h.SCRIPT,l),styleTags:G(h.STYLE,c)},f={},m={};Object.keys(p).forEach((function(e){var n=p[e],t=n.newTags,r=n.oldTags;t.length&&(f[e]=t),r.length&&(m[e]=p[e].oldTags)})),n&&n(),s(e,f,m)},K=null,X=function(e){function n(){for(var n,t=arguments.length,r=new Array(t),o=0;o<t;o++)r[o]=arguments[o];return(n=e.call.apply(e,[this].concat(r))||this).rendered=!1,n}f(n,e);var t=n.prototype;return t.shouldComponentUpdate=function(e){return!d()(e,this.props)},t.componentDidUpdate=function(){this.emitChange()},t.componentWillUnmount=function(){this.props.context.helmetInstances.remove(this),this.emitChange()},t.emitChange=function(){var e,n,t=this.props.context,r=t.setHelmet,o=null,a=(e=t.helmetInstances.get().map((function(e){var n=p({},e.props);return delete n.context,n})),{baseTag:_(["href"],e),bodyAttributes:C("bodyAttributes",e),defer:k(e,"defer"),encode:k(e,"encodeSpecialCharacters"),htmlAttributes:C("htmlAttributes",e),linkTags:A(h.LINK,["rel","href"],e),metaTags:A(h.META,["name","charset","http-equiv","property","itemprop"],e),noscriptTags:A(h.NOSCRIPT,["innerHTML"],e),onChangeClientState:E(e),scriptTags:A(h.SCRIPT,["src","innerHTML"],e),styleTags:A(h.STYLE,["cssText"],e),title:T(e),titleAttributes:C("titleAttributes",e),prioritizeSeoTags:I(e,"prioritizeSeoTags")});W.canUseDOM?(n=a,K&&cancelAnimationFrame(K),n.defer?K=requestAnimationFrame((function(){Y(n,(function(){K=null}))})):(Y(n),K=null)):B&&(o=B(a)),r(o)},t.init=function(){this.rendered||(this.rendered=!0,this.props.context.helmetInstances.add(this),this.emitChange())},t.render=function(){return this.init(),null},n}(r.Component);X.propTypes={context:z.isRequired},X.displayName="HelmetDispatcher";var Q=["children"],Z=["children"],J=function(e){function n(){return e.apply(this,arguments)||this}f(n,e);var t=n.prototype;return t.shouldComponentUpdate=function(e){return!s()(R(this.props,"helmetData"),R(e,"helmetData"))},t.mapNestedChildrenToProps=function(e,n){if(!n)return null;switch(e.type){case h.SCRIPT:case h.NOSCRIPT:return{innerHTML:n};case h.STYLE:return{cssText:n};default:throw new Error("<"+e.type+" /> elements are self-closing and can not contain children. Refer to our API for more information.")}},t.flattenArrayTypeChildren=function(e){var n,t=e.child,r=e.arrayTypeChildren;return p({},r,((n={})[t.type]=[].concat(r[t.type]||[],[p({},e.newChildProps,this.mapNestedChildrenToProps(t,e.nestedChildren))]),n))},t.mapObjectTypeChildren=function(e){var n,t,r=e.child,o=e.newProps,a=e.newChildProps,i=e.nestedChildren;switch(r.type){case h.TITLE:return p({},o,((n={})[r.type]=i,n.titleAttributes=p({},a),n));case h.BODY:return p({},o,{bodyAttributes:p({},a)});case h.HTML:return p({},o,{htmlAttributes:p({},a)});default:return p({},o,((t={})[r.type]=p({},a),t))}},t.mapArrayTypeChildrenToProps=function(e,n){var t=p({},n);return Object.keys(e).forEach((function(n){var r;t=p({},t,((r={})[n]=e[n],r))})),t},t.warnOnInvalidChildren=function(e,n){return c()(S.some((function(n){return e.type===n})),"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 "+S.join(", ")+" are allowed. Helmet does not support rendering <"+e.type+"> elements. Refer to our API for more information."),c()(!n||"string"==typeof n||Array.isArray(n)&&!n.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},t.mapChildrenToProps=function(e,n){var t=this,o={};return r.Children.forEach(e,(function(e){if(e&&e.props){var r=e.props,a=r.children,i=g(r,Q),s=Object.keys(i).reduce((function(e,n){return e[x[n]||n]=i[n],e}),{}),l=e.type;switch("symbol"==typeof l?l=l.toString():t.warnOnInvalidChildren(e,a),l){case h.FRAGMENT:n=t.mapChildrenToProps(a,n);break;case h.LINK:case h.META:case h.NOSCRIPT:case h.SCRIPT:case h.STYLE:o=t.flattenArrayTypeChildren({child:e,arrayTypeChildren:o,newChildProps:s,nestedChildren:a});break;default:n=t.mapObjectTypeChildren({child:e,newProps:n,newChildProps:s,nestedChildren:a})}}})),this.mapArrayTypeChildrenToProps(o,n)},t.render=function(){var e=this.props,n=e.children,t=g(e,Z),o=p({},t),a=t.helmetData;return n&&(o=this.mapChildrenToProps(n,o)),!a||a instanceof U||(a=new U(a.context,a.instances)),a?r.createElement(X,p({},o,{context:a.value,helmetData:void 0})):r.createElement(V.Consumer,null,(function(e){return r.createElement(X,p({},o,{context:e}))}))},n}(r.Component);J.propTypes={base:a().object,bodyAttributes:a().object,children:a().oneOfType([a().arrayOf(a().node),a().node]),defaultTitle:a().string,defer:a().bool,encodeSpecialCharacters:a().bool,htmlAttributes:a().object,link:a().arrayOf(a().object),meta:a().arrayOf(a().object),noscript:a().arrayOf(a().object),onChangeClientState:a().func,script:a().arrayOf(a().object),style:a().arrayOf(a().object),title:a().string,titleAttributes:a().object,titleTemplate:a().string,prioritizeSeoTags:a().bool,helmetData:a().object},J.defaultProps={defer:!0,encodeSpecialCharacters:!0,prioritizeSeoTags:!1},J.displayName="Helmet"},9764:(e,n)=>{"use strict";var t="function"==typeof Symbol&&Symbol.for,r=t?Symbol.for("react.element"):60103,o=t?Symbol.for("react.portal"):60106,a=t?Symbol.for("react.fragment"):60107,i=t?Symbol.for("react.strict_mode"):60108,s=t?Symbol.for("react.profiler"):60114,l=t?Symbol.for("react.provider"):60109,c=t?Symbol.for("react.context"):60110,u=t?Symbol.for("react.async_mode"):60111,d=t?Symbol.for("react.concurrent_mode"):60111,p=t?Symbol.for("react.forward_ref"):60112,f=t?Symbol.for("react.suspense"):60113,m=t?Symbol.for("react.suspense_list"):60120,g=t?Symbol.for("react.memo"):60115,h=t?Symbol.for("react.lazy"):60116,y=t?Symbol.for("react.block"):60121,b=t?Symbol.for("react.fundamental"):60117,v=t?Symbol.for("react.responder"):60118,S=t?Symbol.for("react.scope"):60119;function w(e){if("object"==typeof e&&null!==e){var n=e.$$typeof;switch(n){case r:switch(e=e.type){case u:case d:case a:case s:case i:case f:return e;default:switch(e=e&&e.$$typeof){case c:case p:case h:case g:case l:return e;default:return n}}case o:return n}}}function x(e){return w(e)===d}n.AsyncMode=u,n.ConcurrentMode=d,n.ContextConsumer=c,n.ContextProvider=l,n.Element=r,n.ForwardRef=p,n.Fragment=a,n.Lazy=h,n.Memo=g,n.Portal=o,n.Profiler=s,n.StrictMode=i,n.Suspense=f,n.isAsyncMode=function(e){return x(e)||w(e)===u},n.isConcurrentMode=x,n.isContextConsumer=function(e){return w(e)===c},n.isContextProvider=function(e){return w(e)===l},n.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r},n.isForwardRef=function(e){return w(e)===p},n.isFragment=function(e){return w(e)===a},n.isLazy=function(e){return w(e)===h},n.isMemo=function(e){return w(e)===g},n.isPortal=function(e){return w(e)===o},n.isProfiler=function(e){return w(e)===s},n.isStrictMode=function(e){return w(e)===i},n.isSuspense=function(e){return w(e)===f},n.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===a||e===d||e===s||e===i||e===f||e===m||"object"==typeof e&&null!==e&&(e.$$typeof===h||e.$$typeof===g||e.$$typeof===l||e.$$typeof===c||e.$$typeof===p||e.$$typeof===b||e.$$typeof===v||e.$$typeof===S||e.$$typeof===y)},n.typeOf=w},2168:(e,n,t)=>{"use strict";e.exports=t(9764)},8852:(e,n,t)=>{"use strict";function r(e,n){e.prototype=Object.create(n.prototype),e.prototype.constructor=e,e.__proto__=n}function o(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function i(){return i=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},i.apply(this,arguments)}var s=t(1504),l=t(3268),c=[],u=[];function d(e){var n=e(),t={loading:!0,loaded:null,error:null};return t.promise=n.then((function(e){return t.loading=!1,t.loaded=e,e})).catch((function(e){throw t.loading=!1,t.error=e,e})),t}function p(e){var n={loading:!1,loaded:{},error:null},t=[];try{Object.keys(e).forEach((function(r){var o=d(e[r]);o.loading?n.loading=!0:(n.loaded[r]=o.loaded,n.error=o.error),t.push(o.promise),o.promise.then((function(e){n.loaded[r]=e})).catch((function(e){n.error=e}))}))}catch(r){n.error=r}return n.promise=Promise.all(t).then((function(e){return n.loading=!1,e})).catch((function(e){throw n.loading=!1,e})),n}function f(e,n){return s.createElement((t=e)&&t.__esModule?t.default:t,n);var t}function m(e,n){var d,p;if(!n.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},n),g=null;function h(){return g||(g=e(m.loader)),g.promise}return c.push(h),"function"==typeof m.webpack&&u.push((function(){if((0,m.webpack)().every((function(e){return void 0!==e&&void 0!==t.m[e]})))return h()})),p=d=function(n){function t(t){var r;return a(o(o(r=n.call(this,t)||this)),"retry",(function(){r.setState({error:null,loading:!0,timedOut:!1}),g=e(m.loader),r._loadModule()})),h(),r.state={error:g.error,pastDelay:!1,timedOut:!1,loading:g.loading,loaded:g.loaded},r}r(t,n),t.preload=function(){return h()};var i=t.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(n){e.context.loadable.report(n)})),g.loading){var n=function(n){e._mounted&&e.setState(n)};"number"==typeof m.delay&&(0===m.delay?this.setState({pastDelay:!0}):this._delay=setTimeout((function(){n({pastDelay:!0})}),m.delay)),"number"==typeof m.timeout&&(this._timeout=setTimeout((function(){n({timedOut:!0})}),m.timeout));var t=function(){n({error:g.error,loaded:g.loaded,loading:g.loading}),e._clearTimeouts()};g.promise.then((function(){return t(),null})).catch((function(e){return t(),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?s.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},t}(s.Component),a(d,"contextTypes",{loadable:l.shape({report:l.func.isRequired})}),p}function g(e){return m(d,e)}g.Map=function(e){if("function"!=typeof e.render)throw new Error("LoadableMap requires a `render(loaded, props)` function");return m(p,e)};var h=function(e){function n(){return e.apply(this,arguments)||this}r(n,e);var t=n.prototype;return t.getChildContext=function(){return{loadable:{report:this.props.report}}},t.render=function(){return s.Children.only(this.props.children)},n}(s.Component);function y(e){for(var n=[];e.length;){var t=e.pop();n.push(t())}return Promise.all(n).then((function(){if(e.length)return y(e)}))}a(h,"propTypes",{report:l.func.isRequired}),a(h,"childContextTypes",{loadable:l.shape({report:l.func.isRequired}).isRequired}),g.Capture=h,g.preloadAll=function(){return new Promise((function(e,n){y(c).then(e,n)}))},g.preloadReady=function(){return new Promise((function(e,n){y(u).then(e,e)}))},e.exports=g},5464:(e,n,t)=>{"use strict";t.d(n,{C:()=>i,k:()=>s});var r=t(5592),o=t(6404),a=t(1504);function i(e,n,t){return void 0===t&&(t=[]),e.some((function(e){var o=e.path?(0,r.ot)(n,e):t.length?t[t.length-1].match:r.E5.computeRootMatch(n);return o&&(t.push({route:e,match:o}),e.routes&&i(e.routes,n,t)),o})),t}function s(e,n,t){return void 0===n&&(n={}),void 0===t&&(t={}),e?a.createElement(r.Wk,t,e.map((function(e,t){return a.createElement(r.kX,{key:e.key||t,path:e.path,exact:e.exact,strict:e.strict,render:function(t){return e.render?e.render((0,o.c)({},t,{},n,{route:e})):a.createElement(e.component,(0,o.c)({},t,n,{route:e}))}})}))):null}},440:(e,n,t)=>{"use strict";t.d(n,{Af:()=>v,cH:()=>h,kn:()=>u});var r=t(5592),o=t(9948),a=t(1504),i=t(8064),s=t(6404),l=t(4384),c=t(6136),u=function(e){function n(){for(var n,t=arguments.length,r=new Array(t),o=0;o<t;o++)r[o]=arguments[o];return(n=e.call.apply(e,[this].concat(r))||this).history=(0,i.iU)(n.props),n}return(0,o.c)(n,e),n.prototype.render=function(){return a.createElement(r.E5,{history:this.history,children:this.props.children})},n}(a.Component);a.Component;var d=function(e,n){return"function"==typeof e?e(n):e},p=function(e,n){return"string"==typeof e?(0,i.gh)(e,null,null,n):e},f=function(e){return e},m=a.forwardRef;void 0===m&&(m=f);var g=m((function(e,n){var t=e.innerRef,r=e.navigate,o=e.onClick,i=(0,l.c)(e,["innerRef","navigate","onClick"]),c=i.target,u=(0,s.c)({},i,{onClick:function(e){try{o&&o(e)}catch(n){throw e.preventDefault(),n}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&&n||t,a.createElement("a",u)}));var h=m((function(e,n){var t=e.component,o=void 0===t?g:t,u=e.replace,h=e.to,y=e.innerRef,b=(0,l.c)(e,["component","replace","to","innerRef"]);return a.createElement(r.Os.Consumer,null,(function(e){e||(0,c.c)(!1);var t=e.history,r=p(d(h,e.location),e.location),l=r?t.createHref(r):"",g=(0,s.c)({},b,{href:l,navigate:function(){var n=d(h,e.location),r=(0,i.Ep)(e.location)===(0,i.Ep)(p(n));(u||r?t.replace:t.push)(n)}});return f!==m?g.ref=n||y:g.innerRef=y,a.createElement(o,g)}))})),y=function(e){return e},b=a.forwardRef;void 0===b&&(b=y);var v=b((function(e,n){var t=e["aria-current"],o=void 0===t?"page":t,i=e.activeClassName,u=void 0===i?"active":i,f=e.activeStyle,m=e.className,g=e.exact,v=e.isActive,S=e.location,w=e.sensitive,x=e.strict,k=e.style,T=e.to,E=e.innerRef,C=(0,l.c)(e,["aria-current","activeClassName","activeStyle","className","exact","isActive","location","sensitive","strict","style","to","innerRef"]);return a.createElement(r.Os.Consumer,null,(function(e){e||(0,c.c)(!1);var t=S||e.location,i=p(d(T,t),t),l=i.pathname,_=l&&l.replace(/([.+*?=^!:${}()[\]|/\\])/g,"\\$1"),A=_?(0,r.ot)(t.pathname,{path:_,exact:g,sensitive:w,strict:x}):null,I=!!(v?v(A,t):A),P="function"==typeof m?m(I):m,L="function"==typeof k?k(I):k;I&&(P=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return n.filter((function(e){return e})).join(" ")}(P,u),L=(0,s.c)({},L,f));var R=(0,s.c)({"aria-current":I&&o||null,className:P,style:L,to:i},C);return y!==b?R.ref=n||E:R.innerRef=E,a.createElement(h,R)}))}))},5592:(e,n,t)=>{"use strict";t.d(n,{E5:()=>v,IT:()=>N,Os:()=>b,Uz:()=>R,Wk:()=>P,kX:()=>T,ot:()=>k});var r=t(9948),o=t(1504),a=t(3268),i=t.n(a),s=t(8064),l=t(6136),c=t(6404),u=t(8216),d=t.n(u),p=(t(2168),t(4384)),f=(t(4792),1073741823),m="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:void 0!==t.g?t.g:{};var g=o.createContext||function(e,n){var t,a,s="__create-react-context-"+function(){var e="__global_unique_id__";return m[e]=(m[e]||0)+1}()+"__",l=function(e){function t(){for(var n,t,r,o=arguments.length,a=new Array(o),i=0;i<o;i++)a[i]=arguments[i];return(n=e.call.apply(e,[this].concat(a))||this).emitter=(t=n.props.value,r=[],{on:function(e){r.push(e)},off:function(e){r=r.filter((function(n){return n!==e}))},get:function(){return t},set:function(e,n){t=e,r.forEach((function(e){return e(t,n)}))}}),n}(0,r.c)(t,e);var o=t.prototype;return o.getChildContext=function(){var e;return(e={})[s]=this.emitter,e},o.componentWillReceiveProps=function(e){if(this.props.value!==e.value){var t,r=this.props.value,o=e.value;((a=r)===(i=o)?0!==a||1/a==1/i:a!=a&&i!=i)?t=0:(t="function"==typeof n?n(r,o):f,0!==(t|=0)&&this.emitter.set(e.value,t))}var a,i},o.render=function(){return this.props.children},t}(o.Component);l.childContextTypes=((t={})[s]=i().object.isRequired,t);var c=function(n){function t(){for(var e,t=arguments.length,r=new Array(t),o=0;o<t;o++)r[o]=arguments[o];return(e=n.call.apply(n,[this].concat(r))||this).observedBits=void 0,e.state={value:e.getValue()},e.onUpdate=function(n,t){0!=((0|e.observedBits)&t)&&e.setState({value:e.getValue()})},e}(0,r.c)(t,n);var o=t.prototype;return o.componentWillReceiveProps=function(e){var n=e.observedBits;this.observedBits=null==n?f:n},o.componentDidMount=function(){this.context[s]&&this.context[s].on(this.onUpdate);var e=this.props.observedBits;this.observedBits=null==e?f:e},o.componentWillUnmount=function(){this.context[s]&&this.context[s].off(this.onUpdate)},o.getValue=function(){return this.context[s]?this.context[s].get():e},o.render=function(){return(e=this.props.children,Array.isArray(e)?e[0]:e)(this.state.value);var e},t}(o.Component);return c.contextTypes=((a={})[s]=i().object,a),{Provider:l,Consumer:c}},h=function(e){var n=g();return n.displayName=e,n},y=h("Router-History"),b=h("Router"),v=function(e){function n(n){var t;return(t=e.call(this,n)||this).state={location:n.history.location},t._isMounted=!1,t._pendingLocation=null,n.staticContext||(t.unlisten=n.history.listen((function(e){t._pendingLocation=e}))),t}(0,r.c)(n,e),n.computeRootMatch=function(e){return{path:"/",url:"/",params:{},isExact:"/"===e}};var t=n.prototype;return t.componentDidMount=function(){var e=this;this._isMounted=!0,this.unlisten&&this.unlisten(),this.props.staticContext||(this.unlisten=this.props.history.listen((function(n){e._isMounted&&e.setState({location:n})}))),this._pendingLocation&&this.setState({location:this._pendingLocation})},t.componentWillUnmount=function(){this.unlisten&&(this.unlisten(),this._isMounted=!1,this._pendingLocation=null)},t.render=function(){return o.createElement(b.Provider,{value:{history:this.props.history,location:this.state.location,match:n.computeRootMatch(this.state.location.pathname),staticContext:this.props.staticContext}},o.createElement(y.Provider,{children:this.props.children||null,value:this.props.history}))},n}(o.Component);o.Component;o.Component;var S={},w=1e4,x=0;function k(e,n){void 0===n&&(n={}),("string"==typeof n||Array.isArray(n))&&(n={path:n});var t=n,r=t.path,o=t.exact,a=void 0!==o&&o,i=t.strict,s=void 0!==i&&i,l=t.sensitive,c=void 0!==l&&l;return[].concat(r).reduce((function(n,t){if(!t&&""!==t)return null;if(n)return n;var r=function(e,n){var t=""+n.end+n.strict+n.sensitive,r=S[t]||(S[t]={});if(r[e])return r[e];var o=[],a={regexp:d()(e,o,n),keys:o};return x<w&&(r[e]=a,x++),a}(t,{end:a,strict:s,sensitive:c}),o=r.regexp,i=r.keys,l=o.exec(e);if(!l)return null;var u=l[0],p=l.slice(1),f=e===u;return a&&!f?null:{path:t,url:"/"===t&&""===u?"/":u,isExact:f,params:i.reduce((function(e,n,t){return e[n.name]=p[t],e}),{})}}),null)}var T=function(e){function n(){return e.apply(this,arguments)||this}return(0,r.c)(n,e),n.prototype.render=function(){var e=this;return o.createElement(b.Consumer,null,(function(n){n||(0,l.c)(!1);var t=e.props.location||n.location,r=e.props.computedMatch?e.props.computedMatch:e.props.path?k(t.pathname,e.props):n.match,a=(0,c.c)({},n,{location:t,match:r}),i=e.props,s=i.children,u=i.component,d=i.render;return Array.isArray(s)&&function(e){return 0===o.Children.count(e)}(s)&&(s=null),o.createElement(b.Provider,{value:a},a.match?s?"function"==typeof s?s(a):s:u?o.createElement(u,a):d?d(a):null:"function"==typeof s?s(a):null)}))},n}(o.Component);function E(e){return"/"===e.charAt(0)?e:"/"+e}function C(e,n){if(!e)return n;var t=E(e);return 0!==n.pathname.indexOf(t)?n:(0,c.c)({},n,{pathname:n.pathname.substr(t.length)})}function _(e){return"string"==typeof e?e:(0,s.Ep)(e)}function A(e){return function(){(0,l.c)(!1)}}function I(){}o.Component;var P=function(e){function n(){return e.apply(this,arguments)||this}return(0,r.c)(n,e),n.prototype.render=function(){var e=this;return o.createElement(b.Consumer,null,(function(n){n||(0,l.c)(!1);var t,r,a=e.props.location||n.location;return o.Children.forEach(e.props.children,(function(e){if(null==r&&o.isValidElement(e)){t=e;var i=e.props.path||e.props.from;r=i?k(a.pathname,(0,c.c)({},e.props,{path:i})):n.match}})),r?o.cloneElement(t,{location:a,computedMatch:r}):null}))},n}(o.Component);var L=o.useContext;function R(){return L(y)}function N(){return L(b).location}},8216:(e,n,t)=>{var r=t(9600);e.exports=f,e.exports.parse=a,e.exports.compile=function(e,n){return s(a(e,n),n)},e.exports.tokensToFunction=s,e.exports.tokensToRegExp=p;var o=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function a(e,n){for(var t,r=[],a=0,i=0,s="",u=n&&n.delimiter||"/";null!=(t=o.exec(e));){var d=t[0],p=t[1],f=t.index;if(s+=e.slice(i,f),i=f+d.length,p)s+=p[1];else{var m=e[i],g=t[2],h=t[3],y=t[4],b=t[5],v=t[6],S=t[7];s&&(r.push(s),s="");var w=null!=g&&null!=m&&m!==g,x="+"===v||"*"===v,k="?"===v||"*"===v,T=t[2]||u,E=y||b;r.push({name:h||a++,prefix:g||"",delimiter:T,optional:k,repeat:x,partial:w,asterisk:!!S,pattern:E?c(E):S?".*":"[^"+l(T)+"]+?"})}}return i<e.length&&(s+=e.substr(i)),s&&r.push(s),r}function i(e){return encodeURI(e).replace(/[\/?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()}))}function s(e,n){for(var t=new Array(e.length),o=0;o<e.length;o++)"object"==typeof e[o]&&(t[o]=new RegExp("^(?:"+e[o].pattern+")$",d(n)));return function(n,o){for(var a="",s=n||{},l=(o||{}).pretty?i:encodeURIComponent,c=0;c<e.length;c++){var u=e[c];if("string"!=typeof u){var d,p=s[u.name];if(null==p){if(u.optional){u.partial&&(a+=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=l(p[f]),!t[c].test(d))throw new TypeError('Expected all "'+u.name+'" to match "'+u.pattern+'", but received `'+JSON.stringify(d)+"`");a+=(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()})):l(p),!t[c].test(d))throw new TypeError('Expected "'+u.name+'" to match "'+u.pattern+'", but received "'+d+'"');a+=u.prefix+d}}else a+=u}return a}}function l(e){return e.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function c(e){return e.replace(/([=!:$\/()])/g,"\\$1")}function u(e,n){return e.keys=n,e}function d(e){return e&&e.sensitive?"":"i"}function p(e,n,t){r(n)||(t=n||t,n=[]);for(var o=(t=t||{}).strict,a=!1!==t.end,i="",s=0;s<e.length;s++){var c=e[s];if("string"==typeof c)i+=l(c);else{var p=l(c.prefix),f="(?:"+c.pattern+")";n.push(c),c.repeat&&(f+="(?:"+p+f+")*"),i+=f=c.optional?c.partial?p+"("+f+")?":"(?:"+p+"("+f+"))?":p+"("+f+")"}}var m=l(t.delimiter||"/"),g=i.slice(-m.length)===m;return o||(i=(g?i.slice(0,-m.length):i)+"(?:"+m+"(?=$))?"),i+=a?"$":o&&g?"":"(?="+m+"|$)",u(new RegExp("^"+i,d(t)),n)}function f(e,n,t){return r(n)||(t=n||t,n=[]),t=t||{},e instanceof RegExp?function(e,n){var t=e.source.match(/\((?!\?)/g);if(t)for(var r=0;r<t.length;r++)n.push({name:r,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return u(e,n)}(e,n):r(e)?function(e,n,t){for(var r=[],o=0;o<e.length;o++)r.push(f(e[o],n,t).source);return u(new RegExp("(?:"+r.join("|")+")",d(t)),n)}(e,n,t):function(e,n,t){return p(a(e,t),n,t)}(e,n,t)}},4808:(e,n,t)=>{"use strict";var r=t(1504),o=Symbol.for("react.element"),a=Symbol.for("react.fragment"),i=Object.prototype.hasOwnProperty,s=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,l={key:!0,ref:!0,__self:!0,__source:!0};function c(e,n,t){var r,a={},c=null,u=null;for(r in void 0!==t&&(c=""+t),void 0!==n.key&&(c=""+n.key),void 0!==n.ref&&(u=n.ref),n)i.call(n,r)&&!l.hasOwnProperty(r)&&(a[r]=n[r]);if(e&&e.defaultProps)for(r in n=e.defaultProps)void 0===a[r]&&(a[r]=n[r]);return{$$typeof:o,type:e,key:c,ref:u,props:a,_owner:s.current}}n.Fragment=a,n.jsx=c,n.jsxs=c},3028:(e,n)=>{"use strict";var t=Symbol.for("react.element"),r=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),a=Symbol.for("react.strict_mode"),i=Symbol.for("react.profiler"),s=Symbol.for("react.provider"),l=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(){}},g=Object.assign,h={};function y(e,n,t){this.props=e,this.context=n,this.refs=h,this.updater=t||m}function b(){}function v(e,n,t){this.props=e,this.context=n,this.refs=h,this.updater=t||m}y.prototype.isReactComponent={},y.prototype.setState=function(e,n){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,n,"setState")},y.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},b.prototype=y.prototype;var S=v.prototype=new b;S.constructor=v,g(S,y.prototype),S.isPureReactComponent=!0;var w=Array.isArray,x=Object.prototype.hasOwnProperty,k={current:null},T={key:!0,ref:!0,__self:!0,__source:!0};function E(e,n,r){var o,a={},i=null,s=null;if(null!=n)for(o in void 0!==n.ref&&(s=n.ref),void 0!==n.key&&(i=""+n.key),n)x.call(n,o)&&!T.hasOwnProperty(o)&&(a[o]=n[o]);var l=arguments.length-2;if(1===l)a.children=r;else if(1<l){for(var c=Array(l),u=0;u<l;u++)c[u]=arguments[u+2];a.children=c}if(e&&e.defaultProps)for(o in l=e.defaultProps)void 0===a[o]&&(a[o]=l[o]);return{$$typeof:t,type:e,key:i,ref:s,props:a,_owner:k.current}}function C(e){return"object"==typeof e&&null!==e&&e.$$typeof===t}var _=/\/+/g;function A(e,n){return"object"==typeof e&&null!==e&&null!=e.key?function(e){var n={"=":"=0",":":"=2"};return"$"+e.replace(/[=:]/g,(function(e){return n[e]}))}(""+e.key):n.toString(36)}function I(e,n,o,a,i){var s=typeof e;"undefined"!==s&&"boolean"!==s||(e=null);var l=!1;if(null===e)l=!0;else switch(s){case"string":case"number":l=!0;break;case"object":switch(e.$$typeof){case t:case r:l=!0}}if(l)return i=i(l=e),e=""===a?"."+A(l,0):a,w(i)?(o="",null!=e&&(o=e.replace(_,"$&/")+"/"),I(i,n,o,"",(function(e){return e}))):null!=i&&(C(i)&&(i=function(e,n){return{$$typeof:t,type:e.type,key:n,ref:e.ref,props:e.props,_owner:e._owner}}(i,o+(!i.key||l&&l.key===i.key?"":(""+i.key).replace(_,"$&/")+"/")+e)),n.push(i)),1;if(l=0,a=""===a?".":a+":",w(e))for(var c=0;c<e.length;c++){var u=a+A(s=e[c],c);l+=I(s,n,o,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;!(s=e.next()).done;)l+=I(s=s.value,n,o,u=a+A(s,c++),i);else if("object"===s)throw n=String(e),Error("Objects are not valid as a React child (found: "+("[object Object]"===n?"object with keys {"+Object.keys(e).join(", ")+"}":n)+"). If you meant to render a collection of children, use an array instead.");return l}function P(e,n,t){if(null==e)return e;var r=[],o=0;return I(e,r,"","",(function(e){return n.call(t,e,o++)})),r}function L(e){if(-1===e._status){var n=e._result;(n=n()).then((function(n){0!==e._status&&-1!==e._status||(e._status=1,e._result=n)}),(function(n){0!==e._status&&-1!==e._status||(e._status=2,e._result=n)})),-1===e._status&&(e._status=0,e._result=n)}if(1===e._status)return e._result.default;throw e._result}var R={current:null},N={transition:null},O={ReactCurrentDispatcher:R,ReactCurrentBatchConfig:N,ReactCurrentOwner:k};n.Children={map:P,forEach:function(e,n,t){P(e,(function(){n.apply(this,arguments)}),t)},count:function(e){var n=0;return P(e,(function(){n++})),n},toArray:function(e){return P(e,(function(e){return e}))||[]},only:function(e){if(!C(e))throw Error("React.Children.only expected to receive a single React element child.");return e}},n.Component=y,n.Fragment=o,n.Profiler=i,n.PureComponent=v,n.StrictMode=a,n.Suspense=u,n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=O,n.cloneElement=function(e,n,r){if(null==e)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+e+".");var o=g({},e.props),a=e.key,i=e.ref,s=e._owner;if(null!=n){if(void 0!==n.ref&&(i=n.ref,s=k.current),void 0!==n.key&&(a=""+n.key),e.type&&e.type.defaultProps)var l=e.type.defaultProps;for(c in n)x.call(n,c)&&!T.hasOwnProperty(c)&&(o[c]=void 0===n[c]&&void 0!==l?l[c]:n[c])}var c=arguments.length-2;if(1===c)o.children=r;else if(1<c){l=Array(c);for(var u=0;u<c;u++)l[u]=arguments[u+2];o.children=l}return{$$typeof:t,type:e.type,key:a,ref:i,props:o,_owner:s}},n.createContext=function(e){return(e={$$typeof:l,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null}).Provider={$$typeof:s,_context:e},e.Consumer=e},n.createElement=E,n.createFactory=function(e){var n=E.bind(null,e);return n.type=e,n},n.createRef=function(){return{current:null}},n.forwardRef=function(e){return{$$typeof:c,render:e}},n.isValidElement=C,n.lazy=function(e){return{$$typeof:p,_payload:{_status:-1,_result:e},_init:L}},n.memo=function(e,n){return{$$typeof:d,type:e,compare:void 0===n?null:n}},n.startTransition=function(e){var n=N.transition;N.transition={};try{e()}finally{N.transition=n}},n.unstable_act=function(){throw Error("act(...) is not supported in production builds of React.")},n.useCallback=function(e,n){return R.current.useCallback(e,n)},n.useContext=function(e){return R.current.useContext(e)},n.useDebugValue=function(){},n.useDeferredValue=function(e){return R.current.useDeferredValue(e)},n.useEffect=function(e,n){return R.current.useEffect(e,n)},n.useId=function(){return R.current.useId()},n.useImperativeHandle=function(e,n,t){return R.current.useImperativeHandle(e,n,t)},n.useInsertionEffect=function(e,n){return R.current.useInsertionEffect(e,n)},n.useLayoutEffect=function(e,n){return R.current.useLayoutEffect(e,n)},n.useMemo=function(e,n){return R.current.useMemo(e,n)},n.useReducer=function(e,n,t){return R.current.useReducer(e,n,t)},n.useRef=function(e){return R.current.useRef(e)},n.useState=function(e){return R.current.useState(e)},n.useSyncExternalStore=function(e,n,t){return R.current.useSyncExternalStore(e,n,t)},n.useTransition=function(){return R.current.useTransition()},n.version="18.2.0"},1504:(e,n,t)=>{"use strict";e.exports=t(3028)},7624:(e,n,t)=>{"use strict";e.exports=t(4808)},8328:(e,n)=>{"use strict";function t(e,n){var t=e.length;e.push(n);e:for(;0<t;){var r=t-1>>>1,o=e[r];if(!(0<a(o,n)))break e;e[r]=n,e[t]=o,t=r}}function r(e){return 0===e.length?null:e[0]}function o(e){if(0===e.length)return null;var n=e[0],t=e.pop();if(t!==n){e[0]=t;e:for(var r=0,o=e.length,i=o>>>1;r<i;){var s=2*(r+1)-1,l=e[s],c=s+1,u=e[c];if(0>a(l,t))c<o&&0>a(u,l)?(e[r]=u,e[c]=t,r=c):(e[r]=l,e[s]=t,r=s);else{if(!(c<o&&0>a(u,t)))break e;e[r]=u,e[c]=t,r=c}}}return n}function a(e,n){var t=e.sortIndex-n.sortIndex;return 0!==t?t:e.id-n.id}if("object"==typeof performance&&"function"==typeof performance.now){var i=performance;n.unstable_now=function(){return i.now()}}else{var s=Date,l=s.now();n.unstable_now=function(){return s.now()-l}}var c=[],u=[],d=1,p=null,f=3,m=!1,g=!1,h=!1,y="function"==typeof setTimeout?setTimeout:null,b="function"==typeof clearTimeout?clearTimeout:null,v="undefined"!=typeof setImmediate?setImmediate:null;function S(e){for(var n=r(u);null!==n;){if(null===n.callback)o(u);else{if(!(n.startTime<=e))break;o(u),n.sortIndex=n.expirationTime,t(c,n)}n=r(u)}}function w(e){if(h=!1,S(e),!g)if(null!==r(c))g=!0,N(x);else{var n=r(u);null!==n&&O(w,n.startTime-e)}}function x(e,t){g=!1,h&&(h=!1,b(C),C=-1),m=!0;var a=f;try{for(S(t),p=r(c);null!==p&&(!(p.expirationTime>t)||e&&!I());){var i=p.callback;if("function"==typeof i){p.callback=null,f=p.priorityLevel;var s=i(p.expirationTime<=t);t=n.unstable_now(),"function"==typeof s?p.callback=s:p===r(c)&&o(c),S(t)}else o(c);p=r(c)}if(null!==p)var l=!0;else{var d=r(u);null!==d&&O(w,d.startTime-t),l=!1}return l}finally{p=null,f=a,m=!1}}"undefined"!=typeof navigator&&void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);var k,T=!1,E=null,C=-1,_=5,A=-1;function I(){return!(n.unstable_now()-A<_)}function P(){if(null!==E){var e=n.unstable_now();A=e;var t=!0;try{t=E(!0,e)}finally{t?k():(T=!1,E=null)}}else T=!1}if("function"==typeof v)k=function(){v(P)};else if("undefined"!=typeof MessageChannel){var L=new MessageChannel,R=L.port2;L.port1.onmessage=P,k=function(){R.postMessage(null)}}else k=function(){y(P,0)};function N(e){E=e,T||(T=!0,k())}function O(e,t){C=y((function(){e(n.unstable_now())}),t)}n.unstable_IdlePriority=5,n.unstable_ImmediatePriority=1,n.unstable_LowPriority=4,n.unstable_NormalPriority=3,n.unstable_Profiling=null,n.unstable_UserBlockingPriority=2,n.unstable_cancelCallback=function(e){e.callback=null},n.unstable_continueExecution=function(){g||m||(g=!0,N(x))},n.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},n.unstable_getCurrentPriorityLevel=function(){return f},n.unstable_getFirstCallbackNode=function(){return r(c)},n.unstable_next=function(e){switch(f){case 1:case 2:case 3:var n=3;break;default:n=f}var t=f;f=n;try{return e()}finally{f=t}},n.unstable_pauseExecution=function(){},n.unstable_requestPaint=function(){},n.unstable_runWithPriority=function(e,n){switch(e){case 1:case 2:case 3:case 4:case 5:break;default:e=3}var t=f;f=e;try{return n()}finally{f=t}},n.unstable_scheduleCallback=function(e,o,a){var i=n.unstable_now();switch("object"==typeof a&&null!==a?a="number"==typeof(a=a.delay)&&0<a?i+a:i:a=i,e){case 1:var s=-1;break;case 2:s=250;break;case 5:s=1073741823;break;case 4:s=1e4;break;default:s=5e3}return e={id:d++,callback:o,priorityLevel:e,startTime:a,expirationTime:s=a+s,sortIndex:-1},a>i?(e.sortIndex=a,t(u,e),null===r(c)&&e===r(u)&&(h?(b(C),C=-1):h=!0,O(w,a-i))):(e.sortIndex=s,t(c,e),g||m||(g=!0,N(x))),e},n.unstable_shouldYield=I,n.unstable_wrapCallback=function(e){var n=f;return function(){var t=f;f=n;try{return e.apply(this,arguments)}finally{f=t}}}},4712:(e,n,t)=>{"use strict";e.exports=t(8328)},1072:e=>{e.exports=function(e,n,t,r){var o=t?t.call(r,e,n):void 0;if(void 0!==o)return!!o;if(e===n)return!0;if("object"!=typeof e||!e||"object"!=typeof n||!n)return!1;var a=Object.keys(e),i=Object.keys(n);if(a.length!==i.length)return!1;for(var s=Object.prototype.hasOwnProperty.bind(n),l=0;l<a.length;l++){var c=a[l];if(!s(c))return!1;var u=e[c],d=n[c];if(!1===(o=t?t.call(r,u,d,c):void 0)||void 0===o&&u!==d)return!1}return!0}},6136:(e,n,t)=>{"use strict";t.d(n,{c:()=>a});var r=!0,o="Invariant failed";function a(e,n){if(!e){if(r)throw new Error(o);var t="function"==typeof n?n():n;throw new Error(t?o+": "+t:o)}}},7768:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>r});const r={title:"Ignite Cookbook for React Native",tagline:"Cooking up some cool recipes in Ignite for React Native!",url:"https://infinitered.github.io",baseUrl:"/",onBrokenLinks:"throw",onBrokenMarkdownLinks:"warn",favicon:"img/favicon.ico",organizationName:"infinitered",projectName:"ignite-cookbook",i18n:{defaultLocale:"en",locales:["en"],path:"i18n",localeConfigs:{}},plugins:[null],presets:[["classic",{docs:{path:"docs",showLastUpdateAuthor:!0,showLastUpdateTime:!0,sidebarPath:"/home/runner/work/ignite-cookbook/ignite-cookbook/sidebars.js"},blog:!1,theme:{customCss:"/home/runner/work/ignite-cookbook/ignite-cookbook/src/css/custom.css"},gtag:{trackingID:"G-1NP64B0XVM",anonymizeIP:!0}}]],themeConfig:{colorMode:{defaultMode:"light",disableSwitch:!0,respectPrefersColorScheme:!1},navbar:{hideOnScroll:!0,logo:{alt:"React Native Cookbook Logo",src:"img/logo.svg"},items:[{type:"search",position:"right"},{type:"doc",docId:"intro",position:"right",html:'<div class="hover-underline">Recipes</div>'},{position:"right",html:'<div class="hover-underline">Ignite Boilerplate</div>',to:"https://github.com/infinitered/ignite"},{position:"right",html:'<div class="hover-underline">Infinite Red</div>',to:"https://infinite.red"},{style:{marginRight:"0px"},type:"dropdown",html:' <div class="hover-underline">\n                      Community\n                      <img src="/img/caret-down.svg" alt="dropdown" class="icon" />\n                    </div>\n                  ',position:"right",items:[{html:' <div>\n                          <div class="dropdown-item  hover-underline">\n                            Slack community\n                            <img src="/img/arrow.svg" alt="dropdown" class="icon" />\n                          </div>\n                          <div class="dropdown-item-description">\n                            <p>Join a growing React Native community with 2,000 developers and counting.<p>\n                          </div>\n                        </div>\n                      ',to:"https://join.slack.com/t/infiniteredcommunity/shared_invite/zt-1e1gob8vn-pcFjKM~n1c~aXFsTnvHpdg"},{html:' <div>\n                          <div class="dropdown-item  hover-underline">\n                            Submit an idea\n                            <img src="/img/arrow.svg" alt="dropdown" class="icon" />\n                          </div>\n                          <div class="dropdown-item-description">\n                            <p>Have an recipe idea for the cookbook? Contribute your ideas on GitHub!<p>\n                          </div>\n                        </div>\n                      ',to:"https://github.com/infinitered/ignite-cookbook/issues/new?assignees=&labels=new+recipe&template=recipe_idea.yml"}]}]},footer:{copyright:'From the team at <a href="https://infinite.red/" target="_blank" rel="noopener noreferrer" class="ir-footer-link">Infinite Red</a> <img width="32" height="32" src="/img/ir-mark.svg" alt="dropdown" class="ir-mark" />',style:"dark",links:[{title:"Community",items:[{html:'<a href="https://join.slack.com/t/infiniteredcommunity/shared_invite/zt-1e1gob8vn-pcFjKM~n1c~aXFsTnvHpdg" target="_blank" rel="noopener noreferrer" class="footer__link-item">Slack Community<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a>'},{html:'<a href="https://reactnativeradio.com/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React Native Radio<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a>'},{html:'<a href="https://reactnative.cc/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React Native Newsletter<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a>'}]},{title:"Resources",items:[{html:'<a href="https://github.com/infinitered/ignite-cookbook/issues" target="_blank" rel="noopener noreferrer" class="footer__link-item">Submit a Recipe<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a>'},{html:'<a href="https://github.com/infinitered/ignite-cookbook" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub - Ignite Cookbook<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a>'},{html:'<a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub - Ignite Boilerplate<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a>'},{html:'<a href="https://shift.infinite.red/" target="_blank" rel="noopener noreferrer" class="footer__link-item">RedShift Blog <div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a>'},{html:'<a href="https://infinite.red/privacy-policy" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy Policy<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a>'}]},{title:"Infinite Red",items:[{html:'<a href="https://infinite.red/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Website<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a>'},{html:'<a href="https://docs.infinite.red/" target="_blank" rel="noopener noreferrer" class="footer__link-item">IR Docs<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a>'},{html:'<a href="https://chainreactconf.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Chain React Conf<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a>'}]}]},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:["bash","ruby","json","ejs","diff","markup-templating"],magicComments:[{className:"theme-code-block-highlighted-line",line:"highlight-next-line",block:{start:"highlight-start",end:"highlight-end"}},{className:"code-block-error-line",line:"error-line",block:{start:"error-line-start",end:"error-line-end"}},{className:"code-block-success-line",line:"success-line",block:{start:"success-line-start",end:"success-line-end"}}]},algolia:{appId:"MFHD60DIB5",apiKey:"4e924e740d603ec90f106067754ccf50",indexName:"ignite-cookbook",searchParameters:{},searchPagePath:"search",contextualSearch:!0},docs:{versionPersistence:"localStorage",sidebar:{hideable:!1,autoCollapseCategories:!1}},metadata:[],tableOfContents:{minHeadingLevel:2,maxHeadingLevel:3}},baseUrlIssueBanner:!0,onBrokenAnchors:"warn",onDuplicateRoutes:"warn",staticDirectories:["static"],customFields:{},themes:[],scripts:[],headTags:[],stylesheets:[],clientModules:[],titleDelimiter:"|",noIndex:!1,markdown:{format:"mdx",mermaid:!1,mdx1Compat:{comments:!0,admonitions:!0,headingIds:!0}}}},6404:(e,n,t)=>{"use strict";function r(){return r=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},r.apply(this,arguments)}t.d(n,{c:()=>r})},9948:(e,n,t)=>{"use strict";function r(e,n){return r=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,n){return e.__proto__=n,e},r(e,n)}function o(e,n){e.prototype=Object.create(n.prototype),e.prototype.constructor=e,r(e,n)}t.d(n,{c:()=>o})},4384:(e,n,t)=>{"use strict";function r(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}t.d(n,{c:()=>r})},5456:(e,n,t)=>{"use strict";function r(e){var n,t,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e)){var a=e.length;for(n=0;n<a;n++)e[n]&&(t=r(e[n]))&&(o&&(o+=" "),o+=t)}else for(t in e)e[t]&&(o&&(o+=" "),o+=t);return o}t.d(n,{c:()=>o});const o=function(){for(var e,n,t=0,o="",a=arguments.length;t<a;t++)(e=arguments[t])&&(n=r(e))&&(o&&(o+=" "),o+=n);return o}},5720:(e,n,t)=>{"use strict";t.d(n,{gl:()=>ee,sp:()=>_});var r,o,a,i,s,l,c,u=t(1504),d=t(5456),p=Object.create,f=Object.defineProperty,m=Object.defineProperties,g=Object.getOwnPropertyDescriptor,h=Object.getOwnPropertyDescriptors,y=Object.getOwnPropertyNames,b=Object.getOwnPropertySymbols,v=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable,x=(e,n,t)=>n in e?f(e,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[n]=t,k=(e,n)=>{for(var t in n||(n={}))S.call(n,t)&&x(e,t,n[t]);if(b)for(var t of b(n))w.call(n,t)&&x(e,t,n[t]);return e},T=(e,n)=>m(e,h(n)),E=(e,n)=>{var t={};for(var r in e)S.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&b)for(var r of b(e))n.indexOf(r)<0&&w.call(e,r)&&(t[r]=e[r]);return t},C=(r={"../../node_modules/.pnpm/prismjs@1.29.0_patch_hash=vrxx3pzkik6jpmgpayxfjunetu/node_modules/prismjs/prism.js"(e,n){var t=function(){var e=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,n=0,t={},r={util:{encode:function e(n){return n instanceof o?new o(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.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:++n}),e.__id},clone:function e(n,t){var o,a;switch(t=t||{},r.util.type(n)){case"Object":if(a=r.util.objId(n),t[a])return t[a];for(var i in o={},t[a]=o,n)n.hasOwnProperty(i)&&(o[i]=e(n[i],t));return o;case"Array":return a=r.util.objId(n),t[a]?t[a]:(o=[],t[a]=o,n.forEach((function(n,r){o[r]=e(n,t)})),o);default:return n}},getLanguage:function(n){for(;n;){var t=e.exec(n.className);if(t)return t[1].toLowerCase();n=n.parentElement}return"none"},setLanguage:function(n,t){n.className=n.className.replace(RegExp(e,"gi"),""),n.classList.add("language-"+t)},isActive:function(e,n,t){for(var r="no-"+n;e;){var o=e.classList;if(o.contains(n))return!0;if(o.contains(r))return!1;e=e.parentElement}return!!t}},languages:{plain:t,plaintext:t,text:t,txt:t,extend:function(e,n){var t=r.util.clone(r.languages[e]);for(var o in n)t[o]=n[o];return t},insertBefore:function(e,n,t,o){var a=(o=o||r.languages)[e],i={};for(var s in a)if(a.hasOwnProperty(s)){if(s==n)for(var l in t)t.hasOwnProperty(l)&&(i[l]=t[l]);t.hasOwnProperty(s)||(i[s]=a[s])}var c=o[e];return o[e]=i,r.languages.DFS(r.languages,(function(n,t){t===c&&n!=e&&(this[n]=i)})),i},DFS:function e(n,t,o,a){a=a||{};var i=r.util.objId;for(var s in n)if(n.hasOwnProperty(s)){t.call(n,s,n[s],o||s);var l=n[s],c=r.util.type(l);"Object"!==c||a[i(l)]?"Array"!==c||a[i(l)]||(a[i(l)]=!0,e(l,t,s,a)):(a[i(l)]=!0,e(l,t,null,a))}}},plugins:{},highlight:function(e,n,t){var a={code:e,grammar:n,language:t};if(r.hooks.run("before-tokenize",a),!a.grammar)throw new Error('The language "'+a.language+'" has no grammar.');return a.tokens=r.tokenize(a.code,a.grammar),r.hooks.run("after-tokenize",a),o.stringify(r.util.encode(a.tokens),a.language)},tokenize:function(e,n){var t=n.rest;if(t){for(var r in t)n[r]=t[r];delete n.rest}var o=new s;return l(o,o.head,e),i(e,o,n,o.head,0),function(e){for(var n=[],t=e.head.next;t!==e.tail;)n.push(t.value),t=t.next;return n}(o)},hooks:{all:{},add:function(e,n){var t=r.hooks.all;t[e]=t[e]||[],t[e].push(n)},run:function(e,n){var t=r.hooks.all[e];if(t&&t.length)for(var o,a=0;o=t[a++];)o(n)}},Token:o};function o(e,n,t,r){this.type=e,this.content=n,this.alias=t,this.length=0|(r||"").length}function a(e,n,t,r){e.lastIndex=n;var o=e.exec(t);if(o&&r&&o[1]){var a=o[1].length;o.index+=a,o[0]=o[0].slice(a)}return o}function i(e,n,t,s,u,d){for(var p in t)if(t.hasOwnProperty(p)&&t[p]){var f=t[p];f=Array.isArray(f)?f:[f];for(var m=0;m<f.length;++m){if(d&&d.cause==p+","+m)return;var g=f[m],h=g.inside,y=!!g.lookbehind,b=!!g.greedy,v=g.alias;if(b&&!g.pattern.global){var S=g.pattern.toString().match(/[imsuy]*$/)[0];g.pattern=RegExp(g.pattern.source,S+"g")}for(var w=g.pattern||g,x=s.next,k=u;x!==n.tail&&!(d&&k>=d.reach);k+=x.value.length,x=x.next){var T=x.value;if(n.length>e.length)return;if(!(T instanceof o)){var E,C=1;if(b){if(!(E=a(w,k,e,y))||E.index>=e.length)break;var _=E.index,A=E.index+E[0].length,I=k;for(I+=x.value.length;_>=I;)I+=(x=x.next).value.length;if(k=I-=x.value.length,x.value instanceof o)continue;for(var P=x;P!==n.tail&&(I<A||"string"==typeof P.value);P=P.next)C++,I+=P.value.length;C--,T=e.slice(k,I),E.index-=k}else if(!(E=a(w,0,T,y)))continue;_=E.index;var L=E[0],R=T.slice(0,_),N=T.slice(_+L.length),O=k+T.length;d&&O>d.reach&&(d.reach=O);var F=x.prev;if(R&&(F=l(n,F,R),k+=R.length),c(n,F,C),x=l(n,F,new o(p,h?r.tokenize(L,h):L,v,L)),N&&l(n,x,N),C>1){var j={cause:p+","+m,reach:O};i(e,n,t,x.prev,k,j),d&&j.reach>d.reach&&(d.reach=j.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function l(e,n,t){var r=n.next,o={value:t,prev:n,next:r};return n.next=o,r.prev=o,e.length++,o}function c(e,n,t){for(var r=n.next,o=0;o<t&&r!==e.tail;o++)r=r.next;n.next=r,r.prev=n,e.length-=o}return o.stringify=function e(n,t){if("string"==typeof n)return n;if(Array.isArray(n)){var o="";return n.forEach((function(n){o+=e(n,t)})),o}var a={type:n.type,content:e(n.content,t),tag:"span",classes:["token",n.type],attributes:{},language:t},i=n.alias;i&&(Array.isArray(i)?Array.prototype.push.apply(a.classes,i):a.classes.push(i)),r.hooks.run("wrap",a);var s="";for(var l in a.attributes)s+=" "+l+'="'+(a.attributes[l]||"").replace(/"/g,"&quot;")+'"';return"<"+a.tag+' class="'+a.classes.join(" ")+'"'+s+">"+a.content+"</"+a.tag+">"},r}();n.exports=t,t.default=t}},function(){return o||(0,r[y(r)[0]])((o={exports:{}}).exports,o),o.exports}),_=((e,n,t)=>(t=null!=e?p(v(e)):{},((e,n,t,r)=>{if(n&&"object"==typeof n||"function"==typeof n)for(let o of y(n))S.call(e,o)||o===t||f(e,o,{get:()=>n[o],enumerable:!(r=g(n,o))||r.enumerable});return e})(!n&&e&&e.__esModule?t:f(t,"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]},_.languages.markup.tag.inside["attr-value"].inside.entity=_.languages.markup.entity,_.languages.markup.doctype.inside["internal-subset"].inside=_.languages.markup,_.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&amp;/,"&"))})),Object.defineProperty(_.languages.markup.tag,"addInlined",{value:function(e,n){var t;(n=((t=((t={})["language-"+n]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:_.languages[n]},t.cdata=/^<!\[CDATA\[|\]\]>$/i,{"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:t}}))["language-"+n]={pattern:/[\s\S]+/,inside:_.languages[n]},{}))[e]={pattern:RegExp(/(<__[^>]*>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:t},_.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(_.languages.markup.tag,"addAttribute",{value:function(e,n){_.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:[n,"language-"+n],inside:_.languages[n]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),_.languages.html=_.languages.markup,_.languages.mathml=_.languages.markup,_.languages.svg=_.languages.markup,_.languages.xml=_.languages.extend("markup",{}),_.languages.ssml=_.languages.xml,_.languages.atom=_.languages.xml,_.languages.rss=_.languages.xml,a=_,i={pattern:/\\[\\(){}[\]^$+*?|.]/,alias:"escape"},l="(?:[^\\\\-]|"+(s=/\\(?: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+")",l=RegExp(l+"-"+l),c={pattern:/(<|')[^<>']+(?=[>']$)/,lookbehind:!0,alias:"variable"},a.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:l,inside:{escape:s,"range-punctuation":{pattern:/-/,alias:"operator"}}},"special-escape":i,"char-set":{pattern:/\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},escape:s}},"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:s,group:[{pattern:/\((?:\?(?:<[^<>']+>|'[^<>']+'|[>:]|<?[=!]|[idmnsuxU]+(?:-[idmnsuxU]+)?:?))?/,alias:"punctuation",inside:{"group-name":c}},{pattern:/\)/,alias:"punctuation"}],quantifier:{pattern:/(?:[+*?]|\{\d+(?:,\d*)?\})[?+]?/,alias:"number"},alternation:{pattern:/\|/,alias:"keyword"}},_.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:/[{}[\];(),.:]/},_.languages.javascript=_.languages.extend("clike",{"class-name":[_.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}|\?\?=?|\?\.?|[~:]/}),_.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,_.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:_.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:_.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:_.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:_.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:_.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),_.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:_.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"}}),_.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),_.languages.markup&&(_.languages.markup.tag.addInlined("script","javascript"),_.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")),_.languages.js=_.languages.javascript,_.languages.actionscript=_.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:/\+\+|--|(?:[+\-*\/%^]|&&?|\|\|?|<<?|>>?>?|[!=]=?)=?|[~?@]/}),_.languages.actionscript["class-name"].alias="function",delete _.languages.actionscript.parameter,delete _.languages.actionscript["literal-property"],_.languages.markup&&_.languages.insertBefore("actionscript","string",{xml:{pattern:/(^|[^.])<\/?\w+(?:\s+[^\s>\/=]+=("|')(?:\\[\s\S]|(?!\2)[^\\])*\2)*\s*\/?>/,lookbehind:!0,inside:_.languages.markup}}),function(e){var n=/#(?!\{).+/,t={pattern:/#\{[^}]+\}/,alias:"variable"};e.languages.coffeescript=e.languages.extend("javascript",{comment:n,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:t}}],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:n,interpolation:t}}}),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:t}}]}),e.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete e.languages.coffeescript["template-string"],e.languages.coffee=e.languages.coffeescript}(_),function(e){var n=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(n,"addSupport",{value:function(n,t){(n="string"==typeof n?[n]:n).forEach((function(n){var r=function(e){e.inside||(e.inside={}),e.inside.rest=t},o="doc-comment";if(a=e.languages[n]){var a,i=a[o];if((i=i||(a=e.languages.insertBefore(n,"comment",{"doc-comment":{pattern:/(^|[^\\])\/\*\*[^/][\s\S]*?(?:\*\/|$)/,lookbehind:!0,alias:"comment"}}))[o])instanceof RegExp&&(i=a[o]={pattern:i}),Array.isArray(i))for(var s=0,l=i.length;s<l;s++)i[s]instanceof RegExp&&(i[s]={pattern:i[s]}),r(i[s]);else r(i)}}))}}),n.addSupport(["java","javascript","php"],n)}(_),function(e){var n=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;(n=(e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:RegExp("@[\\w-](?:"+/[^;{\s"']|\s+(?!\s)/.source+"|"+n.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\\((?:"+n.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+n.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+n.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:n,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))&&(n.tag.addInlined("style","css"),n.tag.addAttribute("style","css"))}(_),function(e){var n=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,t=(n=(e.languages.css.selector={pattern:e.languages.css.selector.pattern,lookbehind:!0,inside:n={"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,"pseudo-class":/:[-\w]+/,class:/\.[-\w]+/,id:/#[-\w]+/,attribute:{pattern:RegExp("\\[(?:[^[\\]\"']|"+n.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":[n,{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=n,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:n,number:t,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:n,number:t})}(_),function(e){var n=/[*&][^\s[\]{},]+/,t=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,r="(?:"+t.source+"(?:[ \t]+"+n.source+")?|"+n.source+"(?:[ \t]+"+t.source+")?)",o=/(?:[^\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})),a=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;function i(e,n){n=(n||"").replace(/m/g,"")+"m";var t=/([:\-,[{]\s*(?:\s<<prop>>[ \t]+)?)(?:<<value>>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<<prop>>/g,(function(){return r})).replace(/<<value>>/g,(function(){return e}));return RegExp(t,n)}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"(?:"+o+"|"+a+")"}))),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(a),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:t,important:n,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(_),function(e){var n=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function t(e){return e=e.replace(/<inner>/g,(function(){return n})),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var r=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,o=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,(function(){return r})),a=/\|?[ \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("^"+o+a+"(?:"+o+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+o+a+")(?:"+o+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(r),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+o+")"+a+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+o+"$"),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:t(/\b__(?:(?!_)<inner>|_(?:(?!_)<inner>)+_)+__\b|\*\*(?:(?!\*)<inner>|\*(?:(?!\*)<inner>)+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:t(/\b_(?:(?!_)<inner>|__(?:(?!_)<inner>)+__)+_\b|\*(?:(?!\*)<inner>|\*\*(?:(?!\*)<inner>)+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:t(/(~~?)(?:(?!~)<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:t(/!?\[(?:(?!\])<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(n){["url","bold","italic","strike","code-snippet"].forEach((function(t){n!==t&&(e.languages.markdown[n].inside.content.inside[t]=e.languages.markdown[t])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(n){if(n&&"string"!=typeof n)for(var t=0,r=n.length;t<r;t++){var o,a=n[t];"code"!==a.type?e(a.content):(o=a.content[1],a=a.content[3],o&&a&&"code-language"===o.type&&"code-block"===a.type&&"string"==typeof o.content&&(o=o.content.replace(/\b#/g,"sharp").replace(/\b\+\+/g,"pp"),o="language-"+(o=(/[a-z][\w-]*/i.exec(o)||[""])[0].toLowerCase()),a.alias?"string"==typeof a.alias?a.alias=[a.alias,o]:a.alias.push(o):a.alias=[o]))}}(e.tokens)})),e.hooks.add("wrap",(function(n){if("code-block"===n.type){for(var t="",r=0,o=n.classes.length;r<o;r++){var a=n.classes[r];if(a=/language-(.+)/.exec(a)){t=a[1];break}}var c,u=e.languages[t];u?n.content=e.highlight(n.content.replace(i,"").replace(/&(\w{1,8}|#x?[\da-f]{1,8});/gi,(function(e,n){var t;return"#"===(n=n.toLowerCase())[0]?(t="x"===n[1]?parseInt(n.slice(2),16):Number(n.slice(1)),l(t)):s[n]||e})),u,t):t&&"none"!==t&&e.plugins.autoloader&&(c="md-"+(new Date).valueOf()+"-"+Math.floor(1e16*Math.random()),n.attributes.id=c,e.plugins.autoloader.loadLanguages(t,(function(){var n=document.getElementById(c);n&&(n.innerHTML=e.highlight(n.textContent,e.languages[t],t))})))}})),RegExp(e.languages.markup.tag.pattern.source,"gi")),s={amp:"&",lt:"<",gt:">",quot:'"'},l=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(_),_.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:_.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+/},_.hooks.add("after-tokenize",(function(e){if("graphql"===e.language)for(var n=e.tokens.filter((function(e){return"string"!=typeof e&&"comment"!==e.type&&"scalar"!==e.type})),t=0;t<n.length;){var r=n[t++];if("keyword"===r.type&&"mutation"===r.content){var o=[];if(d(["definition-mutation","punctuation"])&&"("===u(1).content){t+=2;var a=p(/^\($/,/^\)$/);if(-1===a)continue;for(;t<a;t++){var i=u(0);"variable"===i.type&&(f(i,"variable-input"),o.push(i.content))}t=a+1}if(d(["punctuation","property-query"])&&"{"===u(0).content&&(t++,f(u(0),"property-mutation"),0<o.length)){var s=p(/^\{$/,/^\}$/);if(-1!==s)for(var l=t;l<s;l++){var c=n[l];"variable"===c.type&&0<=o.indexOf(c.content)&&f(c,"variable-input")}}}}function u(e){return n[t+e]}function d(e,n){n=n||0;for(var t=0;t<e.length;t++){var r=u(t+n);if(!r||r.type!==e[t])return}return 1}function p(e,r){for(var o=1,a=t;a<n.length;a++){var i=n[a],s=i.content;if("punctuation"===i.type&&"string"==typeof s)if(e.test(s))o++;else if(r.test(s)&&0==--o)return a}return-1}function f(e,n){var t=e.alias;t?Array.isArray(t)||(e.alias=t=[t]):e.alias=t=[],t.push(n)}})),_.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 n=e.languages.javascript["template-string"],t=n.pattern.source,r=n.inside.interpolation,o=r.inside["interpolation-punctuation"],a=r.pattern.source;function i(n,r){if(e.languages[n])return{pattern:RegExp("((?:"+r+")\\s*)"+t),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:n}}}}function s(n,t,r){return n={code:n,grammar:t,language:r},e.hooks.run("before-tokenize",n),n.tokens=e.tokenize(n.code,n.grammar),e.hooks.run("after-tokenize",n),n.tokens}function l(n,t,i){var l=e.tokenize(n,{interpolation:{pattern:RegExp(a),lookbehind:!0}}),c=0,u={},d=(l=s(l.map((function(e){if("string"==typeof e)return e;var t,r;for(e=e.content;-1!==n.indexOf((r=c++,t="___"+i.toUpperCase()+"_"+r+"___")););return u[t]=e,t})).join(""),t,i),Object.keys(u));return c=0,function n(t){for(var a=0;a<t.length;a++){if(c>=d.length)return;var i,l,p,f,m,g,h,y=t[a];"string"==typeof y||"string"==typeof y.content?(i=d[c],-1!==(h=(g="string"==typeof y?y:y.content).indexOf(i))&&(++c,l=g.substring(0,h),m=u[i],p=void 0,(f={})["interpolation-punctuation"]=o,3===(f=e.tokenize(m,f)).length&&((p=[1,1]).push.apply(p,s(f[1],e.languages.javascript,"javascript")),f.splice.apply(f,p)),p=new e.Token("interpolation",f,r.alias,m),f=g.substring(h+i.length),m=[],l&&m.push(l),m.push(p),f&&(n(g=[f]),m.push.apply(m,g)),"string"==typeof y?(t.splice.apply(t,[a,1].concat(m)),a+=m.length-1):y.content=m)):(h=y.content,Array.isArray(h)?n(h):n([h]))}}(l),new e.Token(i,l,"language-"+i,n)}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),n].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(n){n.language in c&&function n(t){for(var r=0,o=t.length;r<o;r++){var a,i,s,c=t[r];"string"!=typeof c&&(a=c.content,Array.isArray(a)?"template-string"===c.type?(c=a[1],3===a.length&&"string"!=typeof c&&"embedded-code"===c.type&&(i=u(c),c=c.alias,c=Array.isArray(c)?c[0]:c,s=e.languages[c])&&(a[1]=l(i,s,c))):n(a):"string"!=typeof a&&n([a]))}}(n.tokens)}))}(_),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 n=e.languages.extend("typescript",{});delete n["class-name"],e.languages.typescript["class-name"].inside=n,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:n}}}}),e.languages.ts=e.languages.typescript}(_),function(e){var n=e.languages.javascript,t=/\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})+\}/.source,r="(@(?:arg|argument|param|property)\\s+(?:"+t+"\\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:n,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 t}))),lookbehind:!0,inside:{punctuation:/\./}},{pattern:RegExp("(@[a-z]+\\s+)"+t),lookbehind:!0,inside:{string:n.string,number:n.number,boolean:n.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:n,alias:"language-javascript"}}}}),e.languages.javadoclike.addSupport("javascript",e.languages.jsdoc)}(_),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})}(_),_.languages.n4js=_.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/}),_.languages.insertBefore("n4js","constant",{annotation:{pattern:/@+\w+/,alias:"operator"}}),_.languages.n4jsd=_.languages.n4js,function(e){function n(e,n){return RegExp(e.replace(/<ID>/g,(function(){return/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/.source})),n)}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:n(/(\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:n(/(\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:n(/(\.\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 t=["function","function-variable","method","method-variable","property-access"],r=0;r<t.length;r++){var o=t[r],a=e.languages.javascript[o];o=(a="RegExp"===e.util.type(a)?e.languages.javascript[o]={pattern:a}:a).inside||{};(a.inside=o)["maybe-class-name"]=/^[A-Z][\s\S]*/}}(_),function(e){var n=e.util.clone(e.languages.javascript),t=/(?:\s|\/\/.*(?!.)|\/\*(?:[^*]|\*(?!\/))\*\/)/.source,r=/(?:\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])*\})/.source,o=/(?:\{<S>*\.{3}(?:[^{}]|<BRACES>)*\})/.source;function a(e,n){return e=e.replace(/<S>/g,(function(){return t})).replace(/<BRACES>/g,(function(){return r})).replace(/<SPREAD>/g,(function(){return o})),RegExp(e,n)}function i(n){for(var t=[],r=0;r<n.length;r++){var o=n[r],a=!1;"string"!=typeof o&&("tag"===o.type&&o.content[0]&&"tag"===o.content[0].type?"</"===o.content[0].content[0].content?0<t.length&&t[t.length-1].tagName===s(o.content[0].content[1])&&t.pop():"/>"!==o.content[o.content.length-1].content&&t.push({tagName:s(o.content[0].content[1]),openedBraces:0}):0<t.length&&"punctuation"===o.type&&"{"===o.content?t[t.length-1].openedBraces++:0<t.length&&0<t[t.length-1].openedBraces&&"punctuation"===o.type&&"}"===o.content?t[t.length-1].openedBraces--:a=!0),(a||"string"==typeof o)&&0<t.length&&0===t[t.length-1].openedBraces&&(a=s(o),r<n.length-1&&("string"==typeof n[r+1]||"plain-text"===n[r+1].type)&&(a+=s(n[r+1]),n.splice(r+1,1)),0<r&&("string"==typeof n[r-1]||"plain-text"===n[r-1].type)&&(a=s(n[r-1])+a,n.splice(r-1,1),r--),n[r]=new e.Token("plain-text",a,null,a)),o.content&&"string"!=typeof o.content&&i(o.content)}}o=a(o).source,e.languages.jsx=e.languages.extend("markup",n),e.languages.jsx.tag.pattern=a(/<\/?(?:[\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=n.comment,e.languages.insertBefore("inside","attr-name",{spread:{pattern:a(/<SPREAD>/.source),inside:e.languages.jsx}},e.languages.jsx.tag),e.languages.insertBefore("inside","special-attr",{script:{pattern:a(/=<BRACES>/.source),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:e.languages.jsx}}},e.languages.jsx.tag);var s=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(s).join(""):""};e.hooks.add("after-tokenize",(function(e){"jsx"!==e.language&&"tsx"!==e.language||i(e.tokens)}))}(_),function(e){var n=e.util.clone(e.languages.typescript);(n=(e.languages.tsx=e.languages.extend("jsx",n),delete e.languages.tsx.parameter,delete e.languages.tsx["literal-property"],e.languages.tsx.tag)).pattern=RegExp(/(^|[^\w$]|(?=<\/))/.source+"(?:"+n.pattern.source+")",n.pattern.flags),n.lookbehind=!0}(_),_.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:/[{}[\]();,.:\\]/},_.languages.swift["string-literal"].forEach((function(e){e.inside.interpolation.inside=_.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 n={"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:n},string:/[\s\S]+/}},{pattern:/"(?:[^"\\\r\n$]|\\.|\$(?:(?!\{)|\{[^{}]*\}))*"/,alias:"singleline",inside:{interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$(?:[a-z_]\w*|\{[^{}]*\})/i,lookbehind:!0,inside:n},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}(_),_.languages.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|[?:~]|[-+*/%&|^!=<>]=?/}),_.languages.insertBefore("c","string",{char:{pattern:/'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,greedy:!0}}),_.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},_.languages.c.string],char:_.languages.c.char,comment:_.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:_.languages.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 _.languages.c.boolean,_.languages.objectivec=_.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 _.languages.objectivec["class-name"],_.languages.objc=_.languages.objectivec,_.languages.reason=_.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/}),_.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 _.languages.reason.function,function(e){for(var n=/\/\*(?:[^*/]|\*(?!\/)|\/(?!\*)|<self>)*\*\//.source,t=0;t<2;t++)n=n.replace(/<self>/g,(function(){return n}));n=n.replace(/<self>/g,(function(){return/[^\s\S]/.source})),e.languages.rust={comment:[{pattern:RegExp(/(^|[^\\])/.source+n),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}(_),_.languages.go=_.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/}),_.languages.insertBefore("go","string",{char:{pattern:/'(?:\\.|[^'\\\r\n]){0,10}'/,greedy:!0}}),delete _.languages.go["class-name"],function(e){var n=/\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/,t=/\b(?!<keyword>)\w+(?:\s*\.\s*\w+)*\b/.source.replace(/<keyword>/g,(function(){return n.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 n.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:n,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 t}))+")"),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"])}(_),_.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:/[{}[\];(),.:]/},_.languages.python["string-interpolation"].inside.interpolation.inside.rest=_.languages.python,_.languages.py=_.languages.python;((e,n)=>{for(var t in n)f(e,t,{get:n[t],enumerable:!0})})({},{dracula:()=>A,duotoneDark:()=>I,duotoneLight:()=>P,github:()=>L,jettwaveDark:()=>H,jettwaveLight:()=>W,nightOwl:()=>R,nightOwlLight:()=>N,oceanicNext:()=>j,okaidia:()=>D,oneDark:()=>G,oneLight:()=>q,palenight:()=>M,shadesOfPurple:()=>B,synthwave84:()=>$,ultramin:()=>U,vsDark:()=>V,vsLight:()=>z});var A={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)"}}]},I={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"}}]},P={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"}}]},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)"}}]},N={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)"}}]},O="#c5a5c5",F="#8dc891",j={plain:{backgroundColor:"#282c34",color:"#ffffff"},styles:[{types:["attr-name"],style:{color:O}},{types:["attr-value"],style:{color:F}},{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:F}},{types:["punctuation"],style:{color:F}},{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:O}},{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}}]},D={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)"}}]},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)"}}]},$={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"}}]},U={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)"}}]},V={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)"}}]},z={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)"}}]},H={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"}}]},W={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%)"}}]},q={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%)"}}]},Y=(e,n)=>{const{plain:t}=e,r=e.styles.reduce(((e,t)=>{const{languages:r,style:o}=t;return r&&!r.includes(n)||t.types.forEach((n=>{const t=k(k({},e[n]),o);e[n]=t})),e}),{});return r.root=t,r.plain=T(k({},t),{backgroundColor:void 0}),r},K=/\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)},Q=(e,n)=>{const t=e.length;return t>0&&e[t-1]===n?e:e.concat(n)},Z=e=>{const n=[[]],t=[e],r=[0],o=[e.length];let a=0,i=0,s=[];const l=[s];for(;i>-1;){for(;(a=r[i]++)<o[i];){let e,c=n[i];const u=t[i][a];if("string"==typeof u?(c=i>0?c:["plain"],e=u):(c=Q(c,u.type),u.alias&&(c=Q(c,u.alias)),e=u.content),"string"!=typeof e){i++,n.push(c),t.push(e),r.push(0),o.push(e.length);continue}const d=e.split(K),p=d.length;s.push({types:c,content:d[0]});for(let n=1;n<p;n++)X(s),l.push(s=[]),s.push({types:c,content:d[n]})}i--,n.pop(),t.pop(),r.pop(),o.pop()}return X(s),l},J=({children:e,language:n,code:t,theme:r,prism:o})=>{const a=n.toLowerCase(),i=((e,n)=>{const[t,r]=(0,u.useState)(Y(n,e)),o=(0,u.useRef)(),a=(0,u.useRef)();return(0,u.useEffect)((()=>{n===o.current&&e===a.current||(o.current=n,a.current=e,r(Y(n,e)))}),[e,n]),t})(a,r),s=(e=>(0,u.useCallback)((n=>{var t=n,{className:r,style:o,line:a}=t,i=E(t,["className","style","line"]);const s=T(k({},i),{className:(0,d.c)("token-line",r)});return"object"==typeof e&&"plain"in e&&(s.style=e.plain),"object"==typeof o&&(s.style=k(k({},s.style||{}),o)),s}),[e]))(i),l=(e=>{const n=(0,u.useCallback)((({types:n,empty:t})=>{if(null!=e)return 1===n.length&&"plain"===n[0]?null!=t?{display:"inline-block"}:void 0:1===n.length&&null!=t?e[n[0]]:Object.assign(null!=t?{display:"inline-block"}:{},...n.map((n=>e[n])))}),[e]);return(0,u.useCallback)((e=>{var t=e,{token:r,className:o,style:a}=t,i=E(t,["token","className","style"]);const s=T(k({},i),{className:(0,d.c)("token",...r.types,o),children:r.content,style:n(r)});return null!=a&&(s.style=k(k({},s.style||{}),a)),s}),[n])})(i),c=(({prism:e,code:n,grammar:t,language:r})=>{const o=(0,u.useRef)(e);return(0,u.useMemo)((()=>{if(null==t)return Z([n]);const e={code:n,grammar:t,language:r,tokens:[]};return o.current.hooks.run("before-tokenize",e),e.tokens=o.current.tokenize(n,t),o.current.hooks.run("after-tokenize",e),Z(e.tokens)}),[n,t,r])})({prism:o,language:a,code:t,grammar:o.languages[a]});return e({tokens:c,className:`prism-code language-${a}`,style:null!=i?i.root:{},getLineProps:s,getTokenProps:l})},ee=e=>(0,u.createElement)(J,T(k({},e),{prism:e.prism||_,theme:e.theme||V,code:e.code,language:e.language}))},144:e=>{"use strict";e.exports={}},4504:e=>{"use strict";e.exports=JSON.parse('{"/search-437":{"__comp":"1a4e3797","__context":{"plugin":"abaad534"}},"/docs-384":{"__comp":"5e95c892","__context":{"plugin":"e7928ab4"}},"/docs-086":{"__comp":"a7bd4aaa","version":"935f2afb"},"/docs/tags-0cc":{"__comp":"3720c009","tags":"55960ee5"},"/docs/tags/accessibility-8aa":{"__comp":"df203c0f","tag":"4a4fb967"},"/docs/tags/android-e3a":{"__comp":"df203c0f","tag":"6728e797"},"/docs/tags/apisauce-143":{"__comp":"df203c0f","tag":"1ab29606"},"/docs/tags/archive-51b":{"__comp":"df203c0f","tag":"985027d8"},"/docs/tags/async-storage-afc":{"__comp":"df203c0f","tag":"d01c4de2"},"/docs/tags/authentication-587":{"__comp":"df203c0f","tag":"ecce3b64"},"/docs/tags/babel-e90":{"__comp":"df203c0f","tag":"b3d1732c"},"/docs/tags/backend-908":{"__comp":"df203c0f","tag":"0825c398"},"/docs/tags/ci-cd-56c":{"__comp":"df203c0f","tag":"a951c726"},"/docs/tags/cng-581":{"__comp":"df203c0f","tag":"31ac2bc7"},"/docs/tags/data-synchronization-453":{"__comp":"df203c0f","tag":"3663082a"},"/docs/tags/database-7e4":{"__comp":"df203c0f","tag":"abfb2977"},"/docs/tags/debug-888":{"__comp":"df203c0f","tag":"e1b6b0a8"},"/docs/tags/dependencies-c34":{"__comp":"df203c0f","tag":"8b0d950b"},"/docs/tags/eas-17a":{"__comp":"df203c0f","tag":"99d16955"},"/docs/tags/eas-update-632":{"__comp":"df203c0f","tag":"33f24359"},"/docs/tags/environment-variables-0f3":{"__comp":"df203c0f","tag":"fd1937a7"},"/docs/tags/expo-a41":{"__comp":"df203c0f","tag":"ce17b301"},"/docs/tags/expo-dev-client-0df":{"__comp":"df203c0f","tag":"a0d6a633"},"/docs/tags/expo-router-257":{"__comp":"df203c0f","tag":"c5ca3bf3"},"/docs/tags/expo-updates-807":{"__comp":"df203c0f","tag":"08a54ed9"},"/docs/tags/flat-list-5a7":{"__comp":"df203c0f","tag":"e0854532"},"/docs/tags/generator-80e":{"__comp":"df203c0f","tag":"24a07a83"},"/docs/tags/guide-cea":{"__comp":"df203c0f","tag":"b8c37621"},"/docs/tags/hardware-303":{"__comp":"df203c0f","tag":"569bff92"},"/docs/tags/i-os-96e":{"__comp":"df203c0f","tag":"3bb7a4af"},"/docs/tags/imports-887":{"__comp":"df203c0f","tag":"b832b2ff"},"/docs/tags/intro-b42":{"__comp":"df203c0f","tag":"51658ad1"},"/docs/tags/maestro-034":{"__comp":"df203c0f","tag":"dec1aed8"},"/docs/tags/mmkv-f7e":{"__comp":"df203c0f","tag":"a8646ade"},"/docs/tags/mob-x-a01":{"__comp":"df203c0f","tag":"51ea30c5"},"/docs/tags/offline-support-6ec":{"__comp":"df203c0f","tag":"199ff765"},"/docs/tags/power-sync-dca":{"__comp":"df203c0f","tag":"7f8cce85"},"/docs/tags/prebuild-83d":{"__comp":"df203c0f","tag":"f50f3884"},"/docs/tags/prettier-db7":{"__comp":"df203c0f","tag":"69dd30cd"},"/docs/tags/react-native-873":{"__comp":"df203c0f","tag":"cf59a740"},"/docs/tags/react-native-vision-camera-ea0":{"__comp":"df203c0f","tag":"82139467"},"/docs/tags/react-navigation-0ad":{"__comp":"df203c0f","tag":"94ee064e"},"/docs/tags/redux-c5e":{"__comp":"df203c0f","tag":"e2041b9b"},"/docs/tags/scroll-to-f32":{"__comp":"df203c0f","tag":"a8f9d519"},"/docs/tags/section-list-8de":{"__comp":"df203c0f","tag":"9dc0f37b"},"/docs/tags/select-field-5f4":{"__comp":"df203c0f","tag":"dce6faa4"},"/docs/tags/state-management-181":{"__comp":"df203c0f","tag":"18d888f3"},"/docs/tags/testing-b53":{"__comp":"df203c0f","tag":"47a03c7f"},"/docs/tags/text-field-782":{"__comp":"df203c0f","tag":"72dfd944"},"/docs/tags/type-script-825":{"__comp":"df203c0f","tag":"ff2c7cca"},"/docs/tags/ui-020":{"__comp":"df203c0f","tag":"19d620af"},"/docs/tags/ui-required-device-capabilities-73a":{"__comp":"df203c0f","tag":"ccf3150e"},"/docs/tags/uses-feature-f1a":{"__comp":"df203c0f","tag":"d699663a"},"/docs/tags/vision-camera-e9b":{"__comp":"df203c0f","tag":"c5abe9fe"},"/docs/tags/yarn-e4e":{"__comp":"df203c0f","tag":"7acb6f50"},"/docs/tags/zustand-24d":{"__comp":"df203c0f","tag":"954f316d"},"/docs-058":{"__comp":"a94703ab"},"/docs/archive/-ab8":{"__comp":"17896441","content":"dd3340a6"},"/docs/archive/PristineExpoProject-afa":{"__comp":"17896441","content":"b33180cb"},"/docs/intro-194":{"__comp":"17896441","content":"0e384e19"},"/docs/recipes/AccessibilityFontSizes-872":{"__comp":"17896441","content":"145425bc"},"/docs/recipes/CircleCIRNSetup-ce2":{"__comp":"17896441","content":"fe9b09bf"},"/docs/recipes/CreatingGreateExperienceForScreenReaders-752":{"__comp":"17896441","content":"f523b160"},"/docs/recipes/DetoxIntro-700":{"__comp":"17896441","content":"03224537"},"/docs/recipes/DistributingAuthTokenToAPI-298":{"__comp":"17896441","content":"24c3776a"},"/docs/recipes/EASUpdate-938":{"__comp":"17896441","content":"9fc76e3d"},"/docs/recipes/EnforcingImportOrder-713":{"__comp":"17896441","content":"d7af48b9"},"/docs/recipes/EnvironmentVariables-92b":{"__comp":"17896441","content":"d6ab422f"},"/docs/recipes/ExpoRouter-0b5":{"__comp":"17896441","content":"c47fa949"},"/docs/recipes/GeneratorComponentTests-e55":{"__comp":"17896441","content":"7b45617e"},"/docs/recipes/LocalFirstDataWithPowerSync-9a4":{"__comp":"17896441","content":"5fd7ef2e"},"/docs/recipes/MaestroSetup-237":{"__comp":"17896441","content":"51e76fb5"},"/docs/recipes/MigratingToMMKV-9d0":{"__comp":"17896441","content":"657027a7"},"/docs/recipes/PatchingBuildingAndroid-ac8":{"__comp":"17896441","content":"d0e08e4a"},"/docs/recipes/PrepForEASBuild-64a":{"__comp":"17896441","content":"54a9c7e8"},"/docs/recipes/ReactNativeVisionCamera-e2e":{"__comp":"17896441","content":"cc1d3934"},"/docs/recipes/Redux-0f8":{"__comp":"17896441","content":"a2f5d017"},"/docs/recipes/RemoveMobxStateTree-50f":{"__comp":"17896441","content":"c75b21fd"},"/docs/recipes/RequiringHardwareFeaturesWithExpo-2fd":{"__comp":"17896441","content":"cecd52bc"},"/docs/recipes/SampleYAMLCircleCI-30a":{"__comp":"17896441","content":"4e09609f"},"/docs/recipes/SelectFieldWithBottomSheet-ca3":{"__comp":"17896441","content":"d63d2b89"},"/docs/recipes/SwitchBetweenExpoGoCNG-695":{"__comp":"17896441","content":"78a0b2f7"},"/docs/recipes/TypeScriptBaseURL-986":{"__comp":"17896441","content":"1c9ea255"},"/docs/recipes/UnrenderedItemInScrollView-c15":{"__comp":"17896441","content":"c3e2f4d4"},"/docs/recipes/UpdatingDependencies-21c":{"__comp":"17896441","content":"da9277bc"},"/docs/recipes/UpdatingIgnite-f0c":{"__comp":"17896441","content":"6fd287af"},"/docs/recipes/UsingScreenReaders-324":{"__comp":"17896441","content":"63181745"},"/docs/recipes/Zustand-0e1":{"__comp":"17896441","content":"e33e793e"},"/-703":{"__comp":"1df93b7f","__context":{"plugin":"3192f89a"},"config":"5e9f5e1a"}}')}},e=>{e.O(0,[2176],(()=>{return n=8808,e(e.s=n);var n}));e.O()}]);
\ No newline at end of file
diff --git a/assets/js/runtime~main.38f783f9.js b/assets/js/runtime~main.a014a881.js
similarity index 99%
rename from assets/js/runtime~main.38f783f9.js
rename to assets/js/runtime~main.a014a881.js
index 75b26485..6479fc88 100644
--- a/assets/js/runtime~main.38f783f9.js
+++ b/assets/js/runtime~main.a014a881.js
@@ -1 +1 @@
-(()=>{"use strict";var e,a,f,d,c,b={},t={};function r(e){var a=t[e];if(void 0!==a)return a.exports;var f=t[e]={id:e,loaded:!1,exports:{}};return b[e].call(f.exports,f,f.exports,r),f.loaded=!0,f.exports}r.m=b,e=[],r.O=(a,f,d,c)=>{if(!f){var b=1/0;for(i=0;i<e.length;i++){f=e[i][0],d=e[i][1],c=e[i][2];for(var t=!0,o=0;o<f.length;o++)(!1&c||b>=c)&&Object.keys(r.O).every((e=>r.O[e](f[o])))?f.splice(o--,1):(t=!1,c<b&&(b=c));if(t){e.splice(i--,1);var n=d();void 0!==n&&(a=n)}}return a}c=c||0;for(var i=e.length;i>0&&e[i-1][2]>c;i--)e[i]=e[i-1];e[i]=[f,d,c]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},f=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,d){if(1&d&&(e=this(e)),8&d)return e;if("object"==typeof e&&e){if(4&d&&e.__esModule)return e;if(16&d&&"function"==typeof e.then)return e}var c=Object.create(null);r.r(c);var b={};a=a||[null,f({}),f([]),f(f)];for(var t=2&d&&e;"object"==typeof t&&!~a.indexOf(t);t=f(t))Object.getOwnPropertyNames(t).forEach((a=>b[a]=()=>e[a]));return b.default=()=>e,r.d(c,b),c},r.d=(e,a)=>{for(var f in a)r.o(a,f)&&!r.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:a[f]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((a,f)=>(r.f[f](e,a),a)),[])),r.u=e=>"assets/js/"+({8:"cecd52bc",16:"145425bc",40:"72dfd944",56:"7acb6f50",95:"b3d1732c",140:"fe9b09bf",222:"33f24359",328:"e1b6b0a8",622:"99d16955",656:"5fd7ef2e",900:"9fc76e3d",916:"a2f5d017",1236:"f50f3884",1264:"c3e2f4d4",1388:"ce17b301",1412:"c75b21fd",1528:"b33180cb",1784:"d699663a",2008:"3bb7a4af",2044:"abfb2977",2160:"985027d8",2288:"e0854532",2324:"51ea30c5",2372:"b8c37621",2464:"abaad534",2596:"dce6faa4",3008:"a8646ade",3128:"4e09609f",3180:"657027a7",3324:"ecce3b64",3336:"47a03c7f",3400:"df203c0f",3504:"f523b160",3960:"8b0d950b",3966:"19d620af",4e3:"69dd30cd",4116:"fd1937a7",4212:"7f8cce85",4224:"78a0b2f7",4264:"6fd287af",4296:"55960ee5",4304:"5e95c892",4424:"24a07a83",4492:"3720c009",4666:"a94703ab",4822:"b832b2ff",4992:"3192f89a",5032:"c47fa949",5064:"51e76fb5",5156:"08a54ed9",5276:"d63d2b89",5284:"03224537",5320:"569bff92",5524:"0825c398",5548:"63181745",5592:"3663082a",5640:"18d888f3",5696:"935f2afb",5708:"e33e793e",5856:"da9277bc",6044:"954f316d",6216:"a8f9d519",6252:"ff2c7cca",6264:"d7af48b9",6328:"0e384e19",6460:"e7928ab4",6500:"a7bd4aaa",6704:"9dc0f37b",6752:"17896441",6756:"4a4fb967",6928:"1ab29606",7164:"e2041b9b",7224:"d01c4de2",7300:"94ee064e",7572:"dd3340a6",7600:"ccf3150e",7732:"a0d6a633",7820:"82139467",8200:"a951c726",8368:"199ff765",8436:"7b45617e",8500:"cc1d3934",8552:"1df93b7f",8576:"54a9c7e8",8616:"6728e797",8636:"1c9ea255",8762:"d6ab422f",8780:"cf59a740",8872:"c5ca3bf3",9016:"d0e08e4a",9144:"dec1aed8",9576:"51658ad1",9607:"c5abe9fe",9632:"31ac2bc7",9648:"1a4e3797",9828:"24c3776a"}[e]||e)+"."+{8:"5cac4503",16:"e78ce3c0",40:"5ad7245c",56:"35f2b92d",95:"e48871b5",140:"7b3890df",222:"1a82a5fc",328:"c1ce8154",622:"7e304c24",656:"e238d7b4",900:"ed59a072",916:"abc86510",1236:"56663aa0",1264:"884b0eeb",1388:"a57543a4",1412:"e50e8147",1528:"9800c449",1676:"c9d2671a",1784:"f014bef9",2008:"bf7e6f78",2044:"8a00de12",2096:"4d27602e",2160:"ffa3d60d",2288:"85981248",2324:"045bca0d",2372:"53ba3f4c",2464:"a38ab67c",2528:"8598cbba",2596:"bb991aa5",3008:"b82994a5",3128:"2523db88",3180:"7167c819",3324:"a27cf30f",3336:"b037daf5",3400:"ccf22ee4",3504:"480a17f2",3960:"1e5c3e49",3966:"19ce1467",4e3:"b3334896",4116:"f9d1089f",4212:"75a81484",4224:"82a6ac47",4264:"aaf028f5",4296:"d6f1a6f9",4304:"a1a3902d",4424:"0255ff7d",4492:"90b28f7c",4552:"5546624d",4666:"fd03de0d",4822:"485a5f70",4912:"72b4592a",4992:"0e2472bc",5032:"bac5887e",5064:"e5ca951d",5156:"ae90e2d7",5276:"7a85eddc",5284:"90b6a6e9",5320:"6fa65900",5524:"9b659c34",5548:"e4cd1fce",5592:"f553a0ef",5640:"bc56ec6a",5696:"a3a52f9d",5708:"1e124d6c",5856:"4a7d8a34",6044:"e5bd89ea",6216:"09bf796b",6252:"d4c7d7de",6264:"d7bd4e35",6328:"6913847e",6432:"3595069d",6460:"2d1d024b",6500:"863e31a6",6704:"c3f6a1bf",6752:"e949f11e",6756:"29a9d42c",6928:"0f3e92f7",7164:"77142519",7224:"84e66c4d",7300:"02247c6e",7572:"2d78727e",7600:"4086fd43",7732:"7be17bd4",7820:"f947d4d2",8200:"e5dd733a",8368:"efe7b80f",8436:"332de9f2",8500:"bc103179",8552:"4362f2d4",8576:"242f3b45",8616:"2129b1ff",8636:"c1fc54dc",8762:"29142d83",8780:"c57f377b",8872:"0df131ce",8879:"af5ac17e",9016:"3e83bec9",9144:"ebff3da0",9576:"bac109c3",9607:"8b6bdf3b",9632:"aec33520",9648:"e6d0374d",9828:"fc65ee23"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),d={},c="ignite-cookbook:",r.l=(e,a,f,b)=>{if(d[e])d[e].push(a);else{var t,o;if(void 0!==f)for(var n=document.getElementsByTagName("script"),i=0;i<n.length;i++){var l=n[i];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==c+f){t=l;break}}t||(o=!0,(t=document.createElement("script")).charset="utf-8",t.timeout=120,r.nc&&t.setAttribute("nonce",r.nc),t.setAttribute("data-webpack",c+f),t.src=e),d[e]=[a];var u=(a,f)=>{t.onerror=t.onload=null,clearTimeout(s);var c=d[e];if(delete d[e],t.parentNode&&t.parentNode.removeChild(t),c&&c.forEach((e=>e(f))),a)return a(f)},s=setTimeout(u.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=u.bind(null,t.onerror),t.onload=u.bind(null,t.onload),o&&document.head.appendChild(t)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),r.p="/",r.gca=function(e){return e={17896441:"6752",63181745:"5548",82139467:"7820",cecd52bc:"8","145425bc":"16","72dfd944":"40","7acb6f50":"56",b3d1732c:"95",fe9b09bf:"140","33f24359":"222",e1b6b0a8:"328","99d16955":"622","5fd7ef2e":"656","9fc76e3d":"900",a2f5d017:"916",f50f3884:"1236",c3e2f4d4:"1264",ce17b301:"1388",c75b21fd:"1412",b33180cb:"1528",d699663a:"1784","3bb7a4af":"2008",abfb2977:"2044","985027d8":"2160",e0854532:"2288","51ea30c5":"2324",b8c37621:"2372",abaad534:"2464",dce6faa4:"2596",a8646ade:"3008","4e09609f":"3128","657027a7":"3180",ecce3b64:"3324","47a03c7f":"3336",df203c0f:"3400",f523b160:"3504","8b0d950b":"3960","19d620af":"3966","69dd30cd":"4000",fd1937a7:"4116","7f8cce85":"4212","78a0b2f7":"4224","6fd287af":"4264","55960ee5":"4296","5e95c892":"4304","24a07a83":"4424","3720c009":"4492",a94703ab:"4666",b832b2ff:"4822","3192f89a":"4992",c47fa949:"5032","51e76fb5":"5064","08a54ed9":"5156",d63d2b89:"5276","03224537":"5284","569bff92":"5320","0825c398":"5524","3663082a":"5592","18d888f3":"5640","935f2afb":"5696",e33e793e:"5708",da9277bc:"5856","954f316d":"6044",a8f9d519:"6216",ff2c7cca:"6252",d7af48b9:"6264","0e384e19":"6328",e7928ab4:"6460",a7bd4aaa:"6500","9dc0f37b":"6704","4a4fb967":"6756","1ab29606":"6928",e2041b9b:"7164",d01c4de2:"7224","94ee064e":"7300",dd3340a6:"7572",ccf3150e:"7600",a0d6a633:"7732",a951c726:"8200","199ff765":"8368","7b45617e":"8436",cc1d3934:"8500","1df93b7f":"8552","54a9c7e8":"8576","6728e797":"8616","1c9ea255":"8636",d6ab422f:"8762",cf59a740:"8780",c5ca3bf3:"8872",d0e08e4a:"9016",dec1aed8:"9144","51658ad1":"9576",c5abe9fe:"9607","31ac2bc7":"9632","1a4e3797":"9648","24c3776a":"9828"}[e]||e,r.p+r.u(e)},(()=>{var e={296:0,2176:0};r.f.j=(a,f)=>{var d=r.o(e,a)?e[a]:void 0;if(0!==d)if(d)f.push(d[2]);else if(/^2(17|9)6$/.test(a))e[a]=0;else{var c=new Promise(((f,c)=>d=e[a]=[f,c]));f.push(d[2]=c);var b=r.p+r.u(a),t=new Error;r.l(b,(f=>{if(r.o(e,a)&&(0!==(d=e[a])&&(e[a]=void 0),d)){var c=f&&("load"===f.type?"missing":f.type),b=f&&f.target&&f.target.src;t.message="Loading chunk "+a+" failed.\n("+c+": "+b+")",t.name="ChunkLoadError",t.type=c,t.request=b,d[1](t)}}),"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,f)=>{var d,c,b=f[0],t=f[1],o=f[2],n=0;if(b.some((a=>0!==e[a]))){for(d in t)r.o(t,d)&&(r.m[d]=t[d]);if(o)var i=o(r)}for(a&&a(f);n<b.length;n++)c=b[n],r.o(e,c)&&e[c]&&e[c][0](),e[c]=0;return r.O(i)},f=self.webpackChunkignite_cookbook=self.webpackChunkignite_cookbook||[];f.forEach(a.bind(null,0)),f.push=a.bind(null,f.push.bind(f))})()})();
\ No newline at end of file
+(()=>{"use strict";var e,a,f,d,c,b={},t={};function r(e){var a=t[e];if(void 0!==a)return a.exports;var f=t[e]={id:e,loaded:!1,exports:{}};return b[e].call(f.exports,f,f.exports,r),f.loaded=!0,f.exports}r.m=b,e=[],r.O=(a,f,d,c)=>{if(!f){var b=1/0;for(i=0;i<e.length;i++){f=e[i][0],d=e[i][1],c=e[i][2];for(var t=!0,o=0;o<f.length;o++)(!1&c||b>=c)&&Object.keys(r.O).every((e=>r.O[e](f[o])))?f.splice(o--,1):(t=!1,c<b&&(b=c));if(t){e.splice(i--,1);var n=d();void 0!==n&&(a=n)}}return a}c=c||0;for(var i=e.length;i>0&&e[i-1][2]>c;i--)e[i]=e[i-1];e[i]=[f,d,c]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},f=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,d){if(1&d&&(e=this(e)),8&d)return e;if("object"==typeof e&&e){if(4&d&&e.__esModule)return e;if(16&d&&"function"==typeof e.then)return e}var c=Object.create(null);r.r(c);var b={};a=a||[null,f({}),f([]),f(f)];for(var t=2&d&&e;"object"==typeof t&&!~a.indexOf(t);t=f(t))Object.getOwnPropertyNames(t).forEach((a=>b[a]=()=>e[a]));return b.default=()=>e,r.d(c,b),c},r.d=(e,a)=>{for(var f in a)r.o(a,f)&&!r.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:a[f]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((a,f)=>(r.f[f](e,a),a)),[])),r.u=e=>"assets/js/"+({8:"cecd52bc",16:"145425bc",40:"72dfd944",56:"7acb6f50",95:"b3d1732c",140:"fe9b09bf",222:"33f24359",328:"e1b6b0a8",622:"99d16955",656:"5fd7ef2e",900:"9fc76e3d",916:"a2f5d017",1236:"f50f3884",1264:"c3e2f4d4",1388:"ce17b301",1412:"c75b21fd",1528:"b33180cb",1784:"d699663a",2008:"3bb7a4af",2044:"abfb2977",2160:"985027d8",2288:"e0854532",2324:"51ea30c5",2372:"b8c37621",2464:"abaad534",2596:"dce6faa4",3008:"a8646ade",3128:"4e09609f",3180:"657027a7",3324:"ecce3b64",3336:"47a03c7f",3400:"df203c0f",3504:"f523b160",3960:"8b0d950b",3966:"19d620af",4e3:"69dd30cd",4116:"fd1937a7",4212:"7f8cce85",4224:"78a0b2f7",4264:"6fd287af",4296:"55960ee5",4304:"5e95c892",4424:"24a07a83",4492:"3720c009",4666:"a94703ab",4822:"b832b2ff",4992:"3192f89a",5032:"c47fa949",5064:"51e76fb5",5156:"08a54ed9",5276:"d63d2b89",5284:"03224537",5320:"569bff92",5524:"0825c398",5548:"63181745",5592:"3663082a",5640:"18d888f3",5696:"935f2afb",5708:"e33e793e",5856:"da9277bc",6044:"954f316d",6216:"a8f9d519",6252:"ff2c7cca",6264:"d7af48b9",6328:"0e384e19",6460:"e7928ab4",6500:"a7bd4aaa",6704:"9dc0f37b",6752:"17896441",6756:"4a4fb967",6928:"1ab29606",7164:"e2041b9b",7224:"d01c4de2",7300:"94ee064e",7572:"dd3340a6",7600:"ccf3150e",7732:"a0d6a633",7820:"82139467",8200:"a951c726",8368:"199ff765",8436:"7b45617e",8500:"cc1d3934",8552:"1df93b7f",8576:"54a9c7e8",8616:"6728e797",8636:"1c9ea255",8762:"d6ab422f",8780:"cf59a740",8872:"c5ca3bf3",9016:"d0e08e4a",9144:"dec1aed8",9576:"51658ad1",9607:"c5abe9fe",9632:"31ac2bc7",9648:"1a4e3797",9828:"24c3776a"}[e]||e)+"."+{8:"5cac4503",16:"e78ce3c0",40:"5ad7245c",56:"35f2b92d",95:"e48871b5",140:"7b3890df",222:"1a82a5fc",328:"c1ce8154",622:"7e304c24",656:"5a7769e9",900:"ed59a072",916:"abc86510",1236:"56663aa0",1264:"884b0eeb",1388:"a57543a4",1412:"e50e8147",1528:"9800c449",1676:"c9d2671a",1784:"f014bef9",2008:"bf7e6f78",2044:"8a00de12",2096:"4d27602e",2160:"ffa3d60d",2288:"85981248",2324:"045bca0d",2372:"53ba3f4c",2464:"a38ab67c",2528:"8598cbba",2596:"bb991aa5",3008:"b82994a5",3128:"2523db88",3180:"7167c819",3324:"a27cf30f",3336:"b037daf5",3400:"ccf22ee4",3504:"480a17f2",3960:"1e5c3e49",3966:"19ce1467",4e3:"b3334896",4116:"f9d1089f",4212:"75a81484",4224:"82a6ac47",4264:"aaf028f5",4296:"d6f1a6f9",4304:"a1a3902d",4424:"0255ff7d",4492:"90b28f7c",4552:"5546624d",4666:"fd03de0d",4822:"485a5f70",4912:"72b4592a",4992:"0e2472bc",5032:"bac5887e",5064:"e5ca951d",5156:"ae90e2d7",5276:"7a85eddc",5284:"90b6a6e9",5320:"6fa65900",5524:"9b659c34",5548:"e4cd1fce",5592:"f553a0ef",5640:"bc56ec6a",5696:"a3a52f9d",5708:"1e124d6c",5856:"4a7d8a34",6044:"e5bd89ea",6216:"09bf796b",6252:"d4c7d7de",6264:"d7bd4e35",6328:"6913847e",6432:"3595069d",6460:"2d1d024b",6500:"863e31a6",6704:"c3f6a1bf",6752:"e949f11e",6756:"29a9d42c",6928:"0f3e92f7",7164:"77142519",7224:"84e66c4d",7300:"02247c6e",7572:"2d78727e",7600:"4086fd43",7732:"7be17bd4",7820:"f947d4d2",8200:"e5dd733a",8368:"efe7b80f",8436:"332de9f2",8500:"bc103179",8552:"4362f2d4",8576:"242f3b45",8616:"2129b1ff",8636:"c1fc54dc",8762:"29142d83",8780:"c57f377b",8872:"0df131ce",8879:"af5ac17e",9016:"3e83bec9",9144:"ebff3da0",9576:"bac109c3",9607:"8b6bdf3b",9632:"aec33520",9648:"e6d0374d",9828:"fc65ee23"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),d={},c="ignite-cookbook:",r.l=(e,a,f,b)=>{if(d[e])d[e].push(a);else{var t,o;if(void 0!==f)for(var n=document.getElementsByTagName("script"),i=0;i<n.length;i++){var l=n[i];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==c+f){t=l;break}}t||(o=!0,(t=document.createElement("script")).charset="utf-8",t.timeout=120,r.nc&&t.setAttribute("nonce",r.nc),t.setAttribute("data-webpack",c+f),t.src=e),d[e]=[a];var u=(a,f)=>{t.onerror=t.onload=null,clearTimeout(s);var c=d[e];if(delete d[e],t.parentNode&&t.parentNode.removeChild(t),c&&c.forEach((e=>e(f))),a)return a(f)},s=setTimeout(u.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=u.bind(null,t.onerror),t.onload=u.bind(null,t.onload),o&&document.head.appendChild(t)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),r.p="/",r.gca=function(e){return e={17896441:"6752",63181745:"5548",82139467:"7820",cecd52bc:"8","145425bc":"16","72dfd944":"40","7acb6f50":"56",b3d1732c:"95",fe9b09bf:"140","33f24359":"222",e1b6b0a8:"328","99d16955":"622","5fd7ef2e":"656","9fc76e3d":"900",a2f5d017:"916",f50f3884:"1236",c3e2f4d4:"1264",ce17b301:"1388",c75b21fd:"1412",b33180cb:"1528",d699663a:"1784","3bb7a4af":"2008",abfb2977:"2044","985027d8":"2160",e0854532:"2288","51ea30c5":"2324",b8c37621:"2372",abaad534:"2464",dce6faa4:"2596",a8646ade:"3008","4e09609f":"3128","657027a7":"3180",ecce3b64:"3324","47a03c7f":"3336",df203c0f:"3400",f523b160:"3504","8b0d950b":"3960","19d620af":"3966","69dd30cd":"4000",fd1937a7:"4116","7f8cce85":"4212","78a0b2f7":"4224","6fd287af":"4264","55960ee5":"4296","5e95c892":"4304","24a07a83":"4424","3720c009":"4492",a94703ab:"4666",b832b2ff:"4822","3192f89a":"4992",c47fa949:"5032","51e76fb5":"5064","08a54ed9":"5156",d63d2b89:"5276","03224537":"5284","569bff92":"5320","0825c398":"5524","3663082a":"5592","18d888f3":"5640","935f2afb":"5696",e33e793e:"5708",da9277bc:"5856","954f316d":"6044",a8f9d519:"6216",ff2c7cca:"6252",d7af48b9:"6264","0e384e19":"6328",e7928ab4:"6460",a7bd4aaa:"6500","9dc0f37b":"6704","4a4fb967":"6756","1ab29606":"6928",e2041b9b:"7164",d01c4de2:"7224","94ee064e":"7300",dd3340a6:"7572",ccf3150e:"7600",a0d6a633:"7732",a951c726:"8200","199ff765":"8368","7b45617e":"8436",cc1d3934:"8500","1df93b7f":"8552","54a9c7e8":"8576","6728e797":"8616","1c9ea255":"8636",d6ab422f:"8762",cf59a740:"8780",c5ca3bf3:"8872",d0e08e4a:"9016",dec1aed8:"9144","51658ad1":"9576",c5abe9fe:"9607","31ac2bc7":"9632","1a4e3797":"9648","24c3776a":"9828"}[e]||e,r.p+r.u(e)},(()=>{var e={296:0,2176:0};r.f.j=(a,f)=>{var d=r.o(e,a)?e[a]:void 0;if(0!==d)if(d)f.push(d[2]);else if(/^2(17|9)6$/.test(a))e[a]=0;else{var c=new Promise(((f,c)=>d=e[a]=[f,c]));f.push(d[2]=c);var b=r.p+r.u(a),t=new Error;r.l(b,(f=>{if(r.o(e,a)&&(0!==(d=e[a])&&(e[a]=void 0),d)){var c=f&&("load"===f.type?"missing":f.type),b=f&&f.target&&f.target.src;t.message="Loading chunk "+a+" failed.\n("+c+": "+b+")",t.name="ChunkLoadError",t.type=c,t.request=b,d[1](t)}}),"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,f)=>{var d,c,b=f[0],t=f[1],o=f[2],n=0;if(b.some((a=>0!==e[a]))){for(d in t)r.o(t,d)&&(r.m[d]=t[d]);if(o)var i=o(r)}for(a&&a(f);n<b.length;n++)c=b[n],r.o(e,c)&&e[c]&&e[c][0](),e[c]=0;return r.O(i)},f=self.webpackChunkignite_cookbook=self.webpackChunkignite_cookbook||[];f.forEach(a.bind(null,0)),f.push=a.bind(null,f.push.bind(f))})()})();
\ No newline at end of file
diff --git a/docs/archive/PristineExpoProject/index.html b/docs/archive/PristineExpoProject/index.html
index c77fbb52..25788ef8 100644
--- a/docs/archive/PristineExpoProject/index.html
+++ b/docs/archive/PristineExpoProject/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/archive/index.html b/docs/archive/index.html
index 016cce6f..52265986 100644
--- a/docs/archive/index.html
+++ b/docs/archive/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/intro/index.html b/docs/intro/index.html
index 1feecb2d..59d5f982 100644
--- a/docs/intro/index.html
+++ b/docs/intro/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/AccessibilityFontSizes/index.html b/docs/recipes/AccessibilityFontSizes/index.html
index b2e5d1e7..00cf6545 100644
--- a/docs/recipes/AccessibilityFontSizes/index.html
+++ b/docs/recipes/AccessibilityFontSizes/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/CircleCIRNSetup/index.html b/docs/recipes/CircleCIRNSetup/index.html
index a719ab9e..0d36c585 100644
--- a/docs/recipes/CircleCIRNSetup/index.html
+++ b/docs/recipes/CircleCIRNSetup/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/CreatingGreateExperienceForScreenReaders/index.html b/docs/recipes/CreatingGreateExperienceForScreenReaders/index.html
index 51acde85..d6d41066 100644
--- a/docs/recipes/CreatingGreateExperienceForScreenReaders/index.html
+++ b/docs/recipes/CreatingGreateExperienceForScreenReaders/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/DetoxIntro/index.html b/docs/recipes/DetoxIntro/index.html
index f081e06e..60261ffb 100644
--- a/docs/recipes/DetoxIntro/index.html
+++ b/docs/recipes/DetoxIntro/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/DistributingAuthTokenToAPI/index.html b/docs/recipes/DistributingAuthTokenToAPI/index.html
index 87e15d0a..8ca72c3f 100644
--- a/docs/recipes/DistributingAuthTokenToAPI/index.html
+++ b/docs/recipes/DistributingAuthTokenToAPI/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/EASUpdate/index.html b/docs/recipes/EASUpdate/index.html
index 3dce072a..661b050b 100644
--- a/docs/recipes/EASUpdate/index.html
+++ b/docs/recipes/EASUpdate/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/EnforcingImportOrder/index.html b/docs/recipes/EnforcingImportOrder/index.html
index a7b0baf5..4c445da3 100644
--- a/docs/recipes/EnforcingImportOrder/index.html
+++ b/docs/recipes/EnforcingImportOrder/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/EnvironmentVariables/index.html b/docs/recipes/EnvironmentVariables/index.html
index 1f6bd9af..5f4a011a 100644
--- a/docs/recipes/EnvironmentVariables/index.html
+++ b/docs/recipes/EnvironmentVariables/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/ExpoRouter/index.html b/docs/recipes/ExpoRouter/index.html
index faddcad9..ffe3c19b 100644
--- a/docs/recipes/ExpoRouter/index.html
+++ b/docs/recipes/ExpoRouter/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/GeneratorComponentTests/index.html b/docs/recipes/GeneratorComponentTests/index.html
index 7a23342d..86cc6128 100644
--- a/docs/recipes/GeneratorComponentTests/index.html
+++ b/docs/recipes/GeneratorComponentTests/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/LocalFirstDataWithPowerSync/index.html b/docs/recipes/LocalFirstDataWithPowerSync/index.html
index 14535ee7..fc79683b 100644
--- a/docs/recipes/LocalFirstDataWithPowerSync/index.html
+++ b/docs/recipes/LocalFirstDataWithPowerSync/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
@@ -93,8 +93,8 @@ <h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="prerequisites">Prerequi
 <h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="installing-sdk-and-dependencies">Installing SDK and Dependencies<a href="#installing-sdk-and-dependencies" class="hash-link" aria-label="Direct link to Installing SDK and Dependencies" title="Direct link to Installing SDK and Dependencies">​</a></h2>
 <h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="install-necessary-dependencies-for-powersync">Install necessary dependencies for PowerSync.<a href="#install-necessary-dependencies-for-powersync" class="hash-link" aria-label="Direct link to Install necessary dependencies for PowerSync." title="Direct link to Install necessary dependencies for PowerSync.">​</a></h3>
 <p>First install the PowerSync SDK and its dependencies.</p>
-<div class="language-shell codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-shell codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">npx expo </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  @journeyapps/powersync-sdk-react-native </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  @journeyapps/react-native-quick-sqlite </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>
-<p>PowerSync <a href="https://github.com/powersync-ja/powersync-js/blob/main/packages/powersync-sdk-react-native/README.md#install-polyfills" target="_blank" rel="noopener noreferrer">requires polyfills</a>
+<div class="language-shell codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-shell codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">npx expo </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  @powersync/react-native </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  @journeyapps/react-native-quick-sqlite </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>
+<p>PowerSync <a href="https://github.com/powersync-ja/powersync-js/blob/main/packages/react-native/README.md#install-polyfills" target="_blank" rel="noopener noreferrer">requires polyfills</a>
 to replace browser-specific APIs with their React Native equivalents. These are listed as peer-dependencies so we need
 to install them ourselves.</p>
 <div class="language-shell codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-shell codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">npx expo </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  react-native-fetch-api </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  react-native-polyfill-globals </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  react-native-url-polyfill </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  text-encoding </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  web-streams-polyfill@^3.2.1 </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  base-64 </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  @azure/core-asynciterator-polyfill </span><span class="token punctuation" style="color:#393A34">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  react-native-get-random-values</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>
@@ -213,7 +213,7 @@ <h4 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="typescript-types">Types
 <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>PowerSync supports <a href="https://kysely.dev/" target="_blank" rel="noopener noreferrer">Kysely</a>, which enables automatically generation of typescript types for your database. See <a href="https://releases.powersync.com/announcements/kysely-orm-integration-for-react-native-and-js-web-beta-release" target="_blank" rel="noopener noreferrer">this announcement</a> for more information on how to set that up for your project.</p></div></div>
 <h4 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="the-schema-for-our-todo-app">The Schema for our Todo App<a href="#the-schema-for-our-todo-app" class="hash-link" aria-label="Direct link to The Schema for our Todo App" title="Direct link to The Schema for our Todo App">​</a></h4>
 <p>Here is the schema we&#x27;ll be using for our todo app:</p>
-<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// app/services/database/schema.ts</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  Column</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  ColumnType</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  Index</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  IndexedColumn</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  Schema</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  Table</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@journeyapps/powersync-sdk-react-native&#x27;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">TODO_TABLE</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;todos&#x27;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">LIST_TABLE</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;lists&#x27;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">interface</span><span class="token plain"> </span><span class="token class-name">ListRecord</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  created_at</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  owner_id</span><span class="token operator" style="color:#393A34">?</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">interface</span><span class="token plain"> </span><span class="token class-name">TodoRecord</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  created_at</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  completed</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">boolean</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  description</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  completed_at</span><span class="token operator" style="color:#393A34">?</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  created_by</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  completed_by</span><span class="token operator" style="color:#393A34">?</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  list_id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  photo_id</span><span class="token operator" style="color:#393A34">?</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> AppSchema </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Schema</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Table</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;todos&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    columns</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Column</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;list_id&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> ColumnType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">TEXT</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Column</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;created_at&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> ColumnType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">TEXT</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Column</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;completed_at&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> ColumnType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">TEXT</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Column</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;description&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> ColumnType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">TEXT</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Column</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;completed&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> ColumnType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">INTEGER</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Column</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;created_by&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> ColumnType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">TEXT</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Column</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;completed_by&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> ColumnType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">TEXT</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    indexes</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Index</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;list&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        columns</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">IndexedColumn</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;list_id&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Table</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;lists&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    columns</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Column</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;created_at&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> ColumnType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">TEXT</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Column</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;name&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> ColumnType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">TEXT</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Column</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;owner_id&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> ColumnType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">TEXT</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></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 class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// app/services/database/schema.ts</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  Column</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  ColumnType</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  Index</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  IndexedColumn</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  Schema</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  Table</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@powersync/react-native&#x27;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">TODO_TABLE</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;todos&#x27;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">LIST_TABLE</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;lists&#x27;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">interface</span><span class="token plain"> </span><span class="token class-name">ListRecord</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  created_at</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  owner_id</span><span class="token operator" style="color:#393A34">?</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">interface</span><span class="token plain"> </span><span class="token class-name">TodoRecord</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  created_at</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  completed</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">boolean</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  description</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  completed_at</span><span class="token operator" style="color:#393A34">?</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  created_by</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  completed_by</span><span class="token operator" style="color:#393A34">?</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  list_id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  photo_id</span><span class="token operator" style="color:#393A34">?</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> AppSchema </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Schema</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Table</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;todos&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    columns</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Column</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;list_id&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> ColumnType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">TEXT</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Column</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;created_at&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> ColumnType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">TEXT</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Column</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;completed_at&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> ColumnType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">TEXT</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Column</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;description&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> ColumnType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">TEXT</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Column</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;completed&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> ColumnType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">INTEGER</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Column</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;created_by&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> ColumnType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">TEXT</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Column</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;completed_by&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> ColumnType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">TEXT</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    indexes</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Index</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;list&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        columns</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">IndexedColumn</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;list_id&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Table</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;lists&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    columns</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Column</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;created_at&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> ColumnType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">TEXT</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Column</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;name&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> ColumnType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">TEXT</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Column</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;owner_id&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> ColumnType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">TEXT</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></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 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>Automated Schema Generation</div><div class="admonitionContent_BuS1"><p>PowerSync can generate a Javascript version of your schema for you.</p><ol>
 <li>Right-click on your instance in the PowerSync dashboard</li>
 <li>Select &quot;Generate Client-Side Schema&quot;.</li>
@@ -221,19 +221,19 @@ <h4 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="the-schema-for-our-todo
 <h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="implement-the-supabaseconnector">Implement the SupabaseConnector<a href="#implement-the-supabaseconnector" class="hash-link" aria-label="Direct link to Implement the SupabaseConnector" title="Direct link to Implement the SupabaseConnector">​</a></h3>
 <p>To tell PowerSync how to connect to the database we&#x27;ll create a <code>SupabaseConnector</code>, which implements the <code>PowerSyncBackendConnector</code> interface with methods for fetching credentials and uploading data.</p>
 <h4 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="powersyncbackendconnector-interface">PowerSyncBackendConnector Interface<a href="#powersyncbackendconnector-interface" class="hash-link" aria-label="Direct link to PowerSyncBackendConnector Interface" title="Direct link to PowerSyncBackendConnector Interface">​</a></h4>
-<p>The Supabase Connector needs to implement the <code>PowerSyncBackendConnector</code> interface (<a href="https://github.com/powersync-ja/powersync-js/blob/main/packages/powersync-sdk-common/src/client/connection/PowerSyncBackendConnector.ts" target="_blank" rel="noopener noreferrer">declared here</a>), ensuring it can seamlessly
+<p>The Supabase Connector needs to implement the <code>PowerSyncBackendConnector</code> interface (<a href="https://github.com/powersync-ja/powersync-js/blob/main/packages/common/src/client/connection/PowerSyncBackendConnector.ts" target="_blank" rel="noopener noreferrer">declared here</a>), ensuring it can seamlessly
 communicate with PowerSync for data synchronization.</p>
 <p>The interface is straightforward and only requires two methods:</p>
 <div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// from @journeyapps/powersync-sdk-common </span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">interface</span><span class="token plain"> </span><span class="token class-name">PowerSyncBackendConnector</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token doc-comment comment" style="color:#999988;font-style:italic">/** Allows the PowerSync client to retrieve an authentication token from your backend</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">   * which is used to authenticate against the PowerSync service.</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">   *</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">   * This should always fetch a fresh set of credentials - don&#x27;t use cached</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">   * values.</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">   *</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">   * Return null if the user is not signed in. Throw an error if credentials</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">   * cannot be fetched due to a network error or other temporary error.</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">   *</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">   * This token is kept for the duration of a sync connection.</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">   */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token function-variable function" style="color:#d73a49">fetchCredentials</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token builtin">Promise</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">PowerSyncCredentials </span><span class="token operator" style="color:#393A34">|</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token doc-comment comment" style="color:#999988;font-style:italic">/** Upload local changes to the app backend.</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">   *</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">   * Use </span><span class="token doc-comment comment punctuation" style="color:#393A34;font-style:italic">{</span><span class="token doc-comment comment keyword" style="color:#00009f;font-style:italic">@link</span><span class="token doc-comment comment" style="color:#999988;font-style:italic"> AbstractPowerSyncDatabase.getCrudBatch</span><span class="token doc-comment comment punctuation" style="color:#393A34;font-style:italic">}</span><span class="token doc-comment comment" style="color:#999988;font-style:italic"> to get a batch of changes to upload.</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">   *</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">   * Any thrown errors will result in a retry after the configured wait period (default: 5 seconds).</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">   */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token function-variable function" style="color:#d73a49">uploadData</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">database</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> AbstractPowerSyncDatabase</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token builtin">Promise</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token keyword" style="color:#00009f">void</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</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 anchorWithHideOnScrollNavbar_WYt5" id="implement-supabaseconnector">Implement SupabaseConnector<a href="#implement-supabaseconnector" class="hash-link" aria-label="Direct link to Implement SupabaseConnector" title="Direct link to Implement SupabaseConnector">​</a></h4>
 <p>In <code>app/services/database/supabase.ts</code>, we&#x27;ll add the two methods, and then export an object that implements the <code>PowerSyncBackendConnector</code> interface.</p>
-<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// app/services/database/supabase.ts</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  AbstractPowerSyncDatabase</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  CrudEntry</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> PowerSyncBackendConnector</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  UpdateType</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> PowerSyncCredentials</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;@journeyapps/powersync-sdk-react-native&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> AsyncStorage </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@react-native-async-storage/async-storage&#x27;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> createClient </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;@supabase/supabase-js&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> Config </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;../../config&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> supabase </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">createClient</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">Config</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">supabaseUrl</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> Config</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">supabaseAnonKey</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  auth</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    persistSession</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> storage</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> AsyncStorage</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// This function fetches the session token from Supabase, it should return null if the user is not signed in, and the session token if they are.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">fetchCredentials</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">Promise</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">PowerSyncCredentials </span><span class="token operator" style="color:#393A34">|</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> data</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> session </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> error </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> supabase</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">auth</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getSession</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">error</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">throw</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">Could not fetch Supabase credentials: </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> error </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token operator" style="color:#393A34">!</span><span class="token plain">session</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    endpoint</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> Config</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">powersyncUrl</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    token</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> session</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">access_token </span><span class="token operator" style="color:#393A34">??</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    expiresAt</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> session</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">expires_at</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">               </span><span class="token operator" style="color:#393A34">?</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Date</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">session</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">expires_at </span><span class="token operator" style="color:#393A34">*</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">1000</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">               </span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">undefined</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Regexes for response codes indicating unrecoverable errors.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">FATAL_RESPONSE_CODES</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token regex regex-source language-regex anchor function" style="color:#d73a49">^</span><span class="token regex regex-source language-regex" style="color:#36acaa">22</span><span class="token regex regex-source language-regex char-set class-name" style="color:#36acaa">.</span><span class="token regex regex-source language-regex char-set class-name" style="color:#36acaa">.</span><span class="token regex regex-source language-regex char-set class-name" style="color:#36acaa">.</span><span class="token regex regex-source language-regex anchor function" style="color:#d73a49">$</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Data Exception</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">^</span><span class="token number" style="color:#36acaa">23.</span><span class="token punctuation" style="color:#393A34">.</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">$</span><span class="token operator" style="color:#393A34">/</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Integrity Constraint Violation</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">^</span><span class="token plain">42501$</span><span class="token operator" style="color:#393A34">/</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// INSUFFICIENT PRIVILEGE</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// PowerSync will call this function to upload data to the backend</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">uploadData</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">database</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> AbstractPowerSyncDatabase</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token builtin">Promise</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token keyword" style="color:#00009f">void</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">database</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> transaction </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> database</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getNextCrudTransaction</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token operator" style="color:#393A34">!</span><span class="token plain">transaction</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">let</span><span class="token plain"> lastOp</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> CrudEntry </span><span class="token operator" style="color:#393A34">|</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">try</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token comment" style="color:#999988;font-style:italic">// Note: If transactional consistency is important, use database functions</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token comment" style="color:#999988;font-style:italic">// or edge functions to process the entire transaction in a single call.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">for</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> op </span><span class="token keyword" style="color:#00009f">of</span><span class="token plain"> transaction</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">crud</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      lastOp </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> op</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> table </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> supabase</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">from</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">op</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">table</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">let</span><span class="token plain"> result</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">any</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">switch</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">op</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">op</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token keyword" style="color:#00009f">case</span><span class="token plain"> UpdateType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">PUT</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token comment" style="color:#999988;font-style:italic">// eslint-disable-next-line no-case-declarations</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> record </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">...</span><span class="token plain">op</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">opData</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> op</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">id </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          result </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> table</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">upsert</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">record</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token keyword" style="color:#00009f">break</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token keyword" style="color:#00009f">case</span><span class="token plain"> UpdateType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">PATCH</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          result </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> table</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">update</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">op</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">opData</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">eq</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;id&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> op</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token keyword" style="color:#00009f">break</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token keyword" style="color:#00009f">case</span><span class="token plain"> UpdateType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">DELETE</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          result </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> table</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">delete</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">eq</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;id&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> op</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token keyword" style="color:#00009f">break</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">result</span><span class="token operator" style="color:#393A34">?.</span><span class="token plain">error</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token keyword" style="color:#00009f">throw</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">Could not </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> op</span><span class="token template-string interpolation punctuation" style="color:#393A34">.</span><span class="token template-string interpolation">op </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c"> data to Supabase error: </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">JSON</span><span class="token template-string interpolation punctuation" style="color:#393A34">.</span><span class="token template-string interpolation function" style="color:#d73a49">stringify</span><span class="token template-string interpolation punctuation" style="color:#393A34">(</span><span class="token template-string interpolation">result</span><span class="token template-string interpolation punctuation" style="color:#393A34">)</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> transaction</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">complete</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">ex</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">any</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token builtin">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">debug</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">ex</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">typeof</span><span class="token plain"> ex</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">code </span><span class="token operator" style="color:#393A34">===</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;string&#x27;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&amp;&amp;</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">FATAL_RESPONSE_CODES</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">some</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">regex</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> regex</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">test</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">ex</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">code</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token doc-comment comment" style="color:#999988;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">       * Instead of blocking the queue with these errors,</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">       * discard the (rest of the) transaction.</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">       *</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">       * Note that these errors typically indicate a bug in the application.</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">       * If protecting against data loss is important, save the failing records</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">       * elsewhere instead of discarding, and/or notify the user.</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">       */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token builtin">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">Data upload error - discarding </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> lastOp </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> ex</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> transaction</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">complete</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">else</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token comment" style="color:#999988;font-style:italic">// Error may be retryable - e.g. network error or temporary server error.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token comment" style="color:#999988;font-style:italic">// Throwing an error here causes this call to be retried after a delay.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">throw</span><span class="token plain"> ex</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> supabaseConnector</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> PowerSyncBackendConnector </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  fetchCredentials</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> uploadData</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</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 class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// app/services/database/supabase.ts</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  AbstractPowerSyncDatabase</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  CrudEntry</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> PowerSyncBackendConnector</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  UpdateType</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> PowerSyncCredentials</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;@powersync/react-native&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> AsyncStorage </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;@react-native-async-storage/async-storage&#x27;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> createClient </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;@supabase/supabase-js&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> Config </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;../../config&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> supabase </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">createClient</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">Config</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">supabaseUrl</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> Config</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">supabaseAnonKey</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  auth</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    persistSession</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> storage</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> AsyncStorage</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// This function fetches the session token from Supabase, it should return null if the user is not signed in, and the session token if they are.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">fetchCredentials</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">Promise</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">PowerSyncCredentials </span><span class="token operator" style="color:#393A34">|</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> data</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> session </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> error </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> supabase</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">auth</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getSession</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">error</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">throw</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">Could not fetch Supabase credentials: </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> error </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token operator" style="color:#393A34">!</span><span class="token plain">session</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    endpoint</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> Config</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">powersyncUrl</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    token</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> session</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">access_token </span><span class="token operator" style="color:#393A34">??</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    expiresAt</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> session</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">expires_at</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">               </span><span class="token operator" style="color:#393A34">?</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Date</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">session</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">expires_at </span><span class="token operator" style="color:#393A34">*</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">1000</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">               </span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">undefined</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Regexes for response codes indicating unrecoverable errors.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">FATAL_RESPONSE_CODES</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token regex regex-source language-regex anchor function" style="color:#d73a49">^</span><span class="token regex regex-source language-regex" style="color:#36acaa">22</span><span class="token regex regex-source language-regex char-set class-name" style="color:#36acaa">.</span><span class="token regex regex-source language-regex char-set class-name" style="color:#36acaa">.</span><span class="token regex regex-source language-regex char-set class-name" style="color:#36acaa">.</span><span class="token regex regex-source language-regex anchor function" style="color:#d73a49">$</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Data Exception</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">^</span><span class="token number" style="color:#36acaa">23.</span><span class="token punctuation" style="color:#393A34">.</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">$</span><span class="token operator" style="color:#393A34">/</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Integrity Constraint Violation</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">^</span><span class="token plain">42501$</span><span class="token operator" style="color:#393A34">/</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// INSUFFICIENT PRIVILEGE</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// PowerSync will call this function to upload data to the backend</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">uploadData</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">database</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> AbstractPowerSyncDatabase</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token builtin">Promise</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token keyword" style="color:#00009f">void</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">database</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> transaction </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> database</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getNextCrudTransaction</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token operator" style="color:#393A34">!</span><span class="token plain">transaction</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">let</span><span class="token plain"> lastOp</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> CrudEntry </span><span class="token operator" style="color:#393A34">|</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">try</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token comment" style="color:#999988;font-style:italic">// Note: If transactional consistency is important, use database functions</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token comment" style="color:#999988;font-style:italic">// or edge functions to process the entire transaction in a single call.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">for</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> op </span><span class="token keyword" style="color:#00009f">of</span><span class="token plain"> transaction</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">crud</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      lastOp </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> op</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> table </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> supabase</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">from</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">op</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">table</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">let</span><span class="token plain"> result</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">any</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">switch</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">op</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">op</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token keyword" style="color:#00009f">case</span><span class="token plain"> UpdateType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">PUT</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token comment" style="color:#999988;font-style:italic">// eslint-disable-next-line no-case-declarations</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> record </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">...</span><span class="token plain">op</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">opData</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> op</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">id </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          result </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> table</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">upsert</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">record</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token keyword" style="color:#00009f">break</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token keyword" style="color:#00009f">case</span><span class="token plain"> UpdateType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">PATCH</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          result </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> table</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">update</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">op</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">opData</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">eq</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;id&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> op</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token keyword" style="color:#00009f">break</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token keyword" style="color:#00009f">case</span><span class="token plain"> UpdateType</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#36acaa">DELETE</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          result </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> table</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">delete</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">eq</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;id&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> op</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">          </span><span class="token keyword" style="color:#00009f">break</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">result</span><span class="token operator" style="color:#393A34">?.</span><span class="token plain">error</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token keyword" style="color:#00009f">throw</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">Could not </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> op</span><span class="token template-string interpolation punctuation" style="color:#393A34">.</span><span class="token template-string interpolation">op </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c"> data to Supabase error: </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">JSON</span><span class="token template-string interpolation punctuation" style="color:#393A34">.</span><span class="token template-string interpolation function" style="color:#d73a49">stringify</span><span class="token template-string interpolation punctuation" style="color:#393A34">(</span><span class="token template-string interpolation">result</span><span class="token template-string interpolation punctuation" style="color:#393A34">)</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> transaction</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">complete</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">ex</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">any</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token builtin">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">debug</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">ex</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">typeof</span><span class="token plain"> ex</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">code </span><span class="token operator" style="color:#393A34">===</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;string&#x27;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&amp;&amp;</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">FATAL_RESPONSE_CODES</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">some</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">regex</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> regex</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">test</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">ex</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">code</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token doc-comment comment" style="color:#999988;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">       * Instead of blocking the queue with these errors,</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">       * discard the (rest of the) transaction.</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">       *</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">       * Note that these errors typically indicate a bug in the application.</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">       * If protecting against data loss is important, save the failing records</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">       * elsewhere instead of discarding, and/or notify the user.</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic">       */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token builtin">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">Data upload error - discarding </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> lastOp </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> ex</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> transaction</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">complete</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">else</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token comment" style="color:#999988;font-style:italic">// Error may be retryable - e.g. network error or temporary server error.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token comment" style="color:#999988;font-style:italic">// Throwing an error here causes this call to be retried after a delay.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">throw</span><span class="token plain"> ex</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> supabaseConnector</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> PowerSyncBackendConnector </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  fetchCredentials</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> uploadData</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</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 anchorWithHideOnScrollNavbar_WYt5" id="create-the-databasecontext">Create the DatabaseContext<a href="#create-the-databasecontext" class="hash-link" aria-label="Direct link to Create the DatabaseContext" title="Direct link to Create the DatabaseContext">​</a></h3>
 <p>We need a single point of connection to the PowerSync instance that we can interact with throughout the app.</p>
 <p>To achieve this we create a <code>Database</code> singleton and provide a stable reference to that instance through our <code>DatabaseContext</code>.</p>
 <p>We&#x27;ll check if the user is signed in or not before we initialize the database, as we need a valid session token to connect to the backend.</p>
 <div class="theme-admonition theme-admonition-note admonition_xJq3 alert alert--secondary"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>note</div><div class="admonitionContent_BuS1"><p>The <code>DatabaseProvider</code> component wraps its children in both the <code>DatabaseContext.Provider</code>, and also the <code>PowerSyncContext.Provider</code> provided by the PowerSync SDK.</p><p>This is necessary because the hooks from the PowerSync SDK require the <code>PowerSyncContext</code> to be present in the component tree, but we&#x27;ll still need the DatabaseContext to get access to the powersync instance directly.</p></div></div>
-<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// app/services/database/database.tsx</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">SupabaseClient</span><span class="token imports"> </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;@supabase/supabase-js&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> useAuth </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;./use-auth&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token imports punctuation" style="color:#393A34">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">PropsWithChildren</span><span class="token imports punctuation" style="color:#393A34">,</span><span class="token imports"> useEffect </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;react&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"></span><br></span><span class="token-line" style="color:#393A34"><span class="token imports">  </span><span class="token imports maybe-class-name">AbstractPowerSyncDatabase</span><span class="token imports punctuation" style="color:#393A34">,</span><span class="token imports"></span><br></span><span class="token-line" style="color:#393A34"><span class="token imports">  </span><span class="token imports maybe-class-name">PowerSyncContext</span><span class="token imports punctuation" style="color:#393A34">,</span><span class="token imports"></span><br></span><span class="token-line" style="color:#393A34"><span class="token imports">  </span><span class="token imports maybe-class-name">RNQSPowerSyncDatabaseOpenFactory</span><span class="token imports punctuation" style="color:#393A34">,</span><span class="token imports"></span><br></span><span class="token-line" style="color:#393A34"><span class="token imports"></span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;@journeyapps/powersync-sdk-react-native&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> supabase</span><span class="token imports punctuation" style="color:#393A34">,</span><span class="token imports"> supabaseConnector </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;./supabase&quot;</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Adjust the path as needed</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">AppSchema</span><span class="token imports"> </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;./schema&quot;</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Adjust the path as needed</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">class</span><span class="token plain"> </span><span class="token class-name">Database</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// We expose the PowerSync and Supabase instances for easy access elsewhere in the app</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  powersync</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token maybe-class-name">AbstractPowerSyncDatabase</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  supabase</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token maybe-class-name">SupabaseClient</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> supabase</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">   * Initialize the Database class with a new PowerSync instance</span><br></span><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">   */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token function" style="color:#d73a49">constructor</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> factory </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">RNQSPowerSyncDatabaseOpenFactory</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      schema</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token maybe-class-name">AppSchema</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      dbFilename</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;sqlite.db&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">this</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">powersync</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> factory</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">getInstance</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">   * Initialize the PowerSync instance and connect it to the Supabase backend.</span><br></span><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">   * This will call `fetchCredentials` on the Supabase connector to get the session token.</span><br></span><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">   * So if your database requires authentication, the user will need to be signed in before this is</span><br></span><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">   * called.</span><br></span><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">   */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">init</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">this</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">powersync</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">init</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">this</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">powersync</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">connect</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">supabaseConnector</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">disconnect</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">this</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">powersync</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">disconnectAndClear</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> database </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Database</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// A context to provide our singleton to the rest of the app</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token maybe-class-name">DatabaseContext</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token maybe-class-name">React</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">createContext</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token maybe-class-name">Database</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">|</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">null</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">useDatabase</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> context</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token maybe-class-name">Database</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">|</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token maybe-class-name">React</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">useContext</span><span class="token punctuation" style="color:#393A34">(</span><span class="token maybe-class-name">DatabaseContext</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token operator" style="color:#393A34">!</span><span class="token plain">context</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">throw</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&quot;useDatabase must be used within a DatabaseProvider&quot;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> context</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Finally, we create a provider component that initializes the database and provides it to the app</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token maybe-class-name">DatabaseProvider</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token constant" style="color:#36acaa">T</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> children </span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token maybe-class-name">PropsWithChildren</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token constant" style="color:#36acaa">T</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> user </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useAuth</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token function" style="color:#d73a49">useEffect</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">user</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      database</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">init</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">catch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">error</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">database</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> user</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">DatabaseContext.Provider</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f"> database </span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PowerSyncContext.Provider</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f"> database</span><span class="token tag script language-javascript punctuation" style="color:#393A34">.</span><span class="token tag script language-javascript property-access" style="color:#00009f">powersync</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text">        </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> children </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag class-name" style="color:#00009f">PowerSyncContext.Provider</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag class-name" style="color:#00009f">DatabaseContext.Provider</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</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 class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// app/services/database/database.tsx</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">SupabaseClient</span><span class="token imports"> </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;@supabase/supabase-js&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> useAuth </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;./use-auth&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token imports punctuation" style="color:#393A34">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">PropsWithChildren</span><span class="token imports punctuation" style="color:#393A34">,</span><span class="token imports"> useEffect </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;react&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"></span><br></span><span class="token-line" style="color:#393A34"><span class="token imports">  </span><span class="token imports maybe-class-name">AbstractPowerSyncDatabase</span><span class="token imports punctuation" style="color:#393A34">,</span><span class="token imports"></span><br></span><span class="token-line" style="color:#393A34"><span class="token imports">  </span><span class="token imports maybe-class-name">PowerSyncContext</span><span class="token imports punctuation" style="color:#393A34">,</span><span class="token imports"></span><br></span><span class="token-line" style="color:#393A34"><span class="token imports">  </span><span class="token imports maybe-class-name">RNQSPowerSyncDatabaseOpenFactory</span><span class="token imports punctuation" style="color:#393A34">,</span><span class="token imports"></span><br></span><span class="token-line" style="color:#393A34"><span class="token imports"></span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;@powersync/react-native&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> supabase</span><span class="token imports punctuation" style="color:#393A34">,</span><span class="token imports"> supabaseConnector </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;./supabase&quot;</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Adjust the path as needed</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">AppSchema</span><span class="token imports"> </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;./schema&quot;</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Adjust the path as needed</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">class</span><span class="token plain"> </span><span class="token class-name">Database</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// We expose the PowerSync and Supabase instances for easy access elsewhere in the app</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  powersync</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token maybe-class-name">AbstractPowerSyncDatabase</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  supabase</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token maybe-class-name">SupabaseClient</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> supabase</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">   * Initialize the Database class with a new PowerSync instance</span><br></span><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">   */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token function" style="color:#d73a49">constructor</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> factory </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">RNQSPowerSyncDatabaseOpenFactory</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      schema</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token maybe-class-name">AppSchema</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      dbFilename</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;sqlite.db&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">this</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">powersync</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> factory</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">getInstance</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">   * Initialize the PowerSync instance and connect it to the Supabase backend.</span><br></span><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">   * This will call `fetchCredentials` on the Supabase connector to get the session token.</span><br></span><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">   * So if your database requires authentication, the user will need to be signed in before this is</span><br></span><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">   * called.</span><br></span><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">   */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">init</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">this</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">powersync</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">init</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">this</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">powersync</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">connect</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">supabaseConnector</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">disconnect</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">this</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">powersync</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">disconnectAndClear</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> database </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Database</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// A context to provide our singleton to the rest of the app</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token maybe-class-name">DatabaseContext</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token maybe-class-name">React</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">createContext</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token maybe-class-name">Database</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">|</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">null</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">useDatabase</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> context</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token maybe-class-name">Database</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">|</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token maybe-class-name">React</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">useContext</span><span class="token punctuation" style="color:#393A34">(</span><span class="token maybe-class-name">DatabaseContext</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token operator" style="color:#393A34">!</span><span class="token plain">context</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">throw</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&quot;useDatabase must be used within a DatabaseProvider&quot;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> context</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Finally, we create a provider component that initializes the database and provides it to the app</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token maybe-class-name">DatabaseProvider</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token constant" style="color:#36acaa">T</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> children </span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token maybe-class-name">PropsWithChildren</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token constant" style="color:#36acaa">T</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> user </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useAuth</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token function" style="color:#d73a49">useEffect</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">user</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      database</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">init</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">catch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">error</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">database</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> user</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">DatabaseContext.Provider</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f"> database </span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">PowerSyncContext.Provider</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f"> database</span><span class="token tag script language-javascript punctuation" style="color:#393A34">.</span><span class="token tag script language-javascript property-access" style="color:#00009f">powersync</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text">        </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> children </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag class-name" style="color:#00009f">PowerSyncContext.Provider</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag class-name" style="color:#00009f">DatabaseContext.Provider</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</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 anchorWithHideOnScrollNavbar_WYt5" id="wrap-the-app-in-the-databaseprovider">Wrap the app in the DatabaseProvider<a href="#wrap-the-app-in-the-databaseprovider" class="hash-link" aria-label="Direct link to Wrap the app in the DatabaseProvider" title="Direct link to Wrap the app in the DatabaseProvider">​</a></h3>
 <p>Now that we have our <code>DatabaseProvider</code> set up, we can wrap our app in it to provide the database instance to the rest of the app.</p>
 <p>Remember that the DatabaseProvider needs access to the users authentication state, so it should be wrapped in the <code>AuthProvider</code> we created earlier.</p>
@@ -284,7 +284,7 @@ <h4 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="install-expo-crypto-to-
 <div class="theme-admonition theme-admonition-note admonition_xJq3 alert alert--secondary"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>note</div><div class="admonitionContent_BuS1"><p><code>expo-crypto</code> contains native modules, so you&#x27;ll need to rebuild your app after installing it</p></div></div>
 <h4 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="implementing-the-uselists-hook">Implementing the <code>useLists</code> Hook<a href="#implementing-the-uselists-hook" class="hash-link" aria-label="Direct link to implementing-the-uselists-hook" title="Direct link to implementing-the-uselists-hook">​</a></h4>
 <p>Now that we can generate random IDs, we can implement the <code>useLists</code> hook:</p>
-<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// app/services/database/use-lists.ts</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> usePowerSyncWatchedQuery </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;@journeyapps/powersync-sdk-react-native&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> useAuth </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;app/services/database/use-auth&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> useCallback </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;react&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> useDatabase </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;app/services/database/database&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">LIST_TABLE</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> ListRecord</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">TODO_TABLE</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;app/services/database/schema&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> randomUUID </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;expo-crypto&#x27;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Extend the base type with the calculated fields from our query  </span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">type</span><span class="token plain"> </span><span class="token class-name">ListItemRecord</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> ListRecord </span><span class="token operator" style="color:#393A34">&amp;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> total_tasks</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">number</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> completed_tasks</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">number</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">useLists</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// Get the current user from the auth context </span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> user </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useAuth</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// Get the database instance from the context</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> powersync </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useDatabase</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// List fetching logic here. You can modify it as per your needs.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> lists </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token generic-function function" style="color:#d73a49">usePowerSyncWatchedQuery</span><span class="token generic-function generic class-name operator" style="color:#393A34">&lt;</span><span class="token generic-function generic class-name">ListItemRecord</span><span class="token generic-function generic class-name operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">(</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">      SELECT </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">LIST_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c">.*,</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">             COUNT(</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">TODO_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c">.id) AS total_tasks,</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">             SUM(CASE WHEN </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">TODO_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c">.completed = true THEN 1 ELSE 0 END) as completed_tasks</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">      FROM </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">LIST_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">               LEFT JOIN </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">TODO_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c"> ON </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">LIST_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c">.id = </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">TODO_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c">.list_id</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">      GROUP BY </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">LIST_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c">.id</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">  </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> createList </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useCallback</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token operator" style="color:#393A34">!</span><span class="token plain">user</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">throw</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&quot;Can&#x27;t add list -- user is undefined&quot;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> powersync</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">execute</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">          INSERT INTO </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">LIST_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">              (id, name, created_at, owner_id)</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">          VALUES (?, ?, ?, ?)</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token punctuation" style="color:#393A34">[</span><span class="token function" style="color:#d73a49">randomUUID</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> name</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Date</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">toISOString</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> user</span><span class="token operator" style="color:#393A34">?.</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">user</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> powersync</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> deleteList </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useCallback</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token builtin">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;Deleting list&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> id</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> powersync</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">execute</span><span class="token punctuation" style="color:#393A34">(</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">DELETE</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">                             FROM </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">LIST_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">                             WHERE id = ?</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">powersync</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> lists</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> createList</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> deleteList </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></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 class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// app/services/database/use-lists.ts</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> usePowerSyncWatchedQuery </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;@powersync/react-native&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> useAuth </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;app/services/database/use-auth&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> useCallback </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;react&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> useDatabase </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;app/services/database/database&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">LIST_TABLE</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> ListRecord</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">TODO_TABLE</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;app/services/database/schema&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> randomUUID </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;expo-crypto&#x27;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Extend the base type with the calculated fields from our query  </span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">type</span><span class="token plain"> </span><span class="token class-name">ListItemRecord</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> ListRecord </span><span class="token operator" style="color:#393A34">&amp;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> total_tasks</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">number</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> completed_tasks</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">number</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">useLists</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// Get the current user from the auth context </span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> user </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useAuth</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// Get the database instance from the context</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> powersync </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useDatabase</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// List fetching logic here. You can modify it as per your needs.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> lists </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token generic-function function" style="color:#d73a49">usePowerSyncWatchedQuery</span><span class="token generic-function generic class-name operator" style="color:#393A34">&lt;</span><span class="token generic-function generic class-name">ListItemRecord</span><span class="token generic-function generic class-name operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">(</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">      SELECT </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">LIST_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c">.*,</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">             COUNT(</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">TODO_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c">.id) AS total_tasks,</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">             SUM(CASE WHEN </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">TODO_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c">.completed = true THEN 1 ELSE 0 END) as completed_tasks</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">      FROM </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">LIST_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">               LEFT JOIN </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">TODO_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c"> ON </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">LIST_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c">.id = </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">TODO_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c">.list_id</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">      GROUP BY </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">LIST_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c">.id</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">  </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> createList </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useCallback</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token operator" style="color:#393A34">!</span><span class="token plain">user</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token keyword" style="color:#00009f">throw</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&quot;Can&#x27;t add list -- user is undefined&quot;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> powersync</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">execute</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">          INSERT INTO </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">LIST_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">              (id, name, created_at, owner_id)</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">          VALUES (?, ?, ?, ?)</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token punctuation" style="color:#393A34">[</span><span class="token function" style="color:#d73a49">randomUUID</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> name</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Date</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">toISOString</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> user</span><span class="token operator" style="color:#393A34">?.</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">user</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> powersync</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> deleteList </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useCallback</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token builtin">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;Deleting list&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> id</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> powersync</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">execute</span><span class="token punctuation" style="color:#393A34">(</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">DELETE</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">                             FROM </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">LIST_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">                             WHERE id = ?</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">powersync</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> lists</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> createList</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> deleteList </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></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 anchorWithHideOnScrollNavbar_WYt5" id="create-the-lists-and-addlists-components">Create the Lists and AddLists Components<a href="#create-the-lists-and-addlists-components" class="hash-link" aria-label="Direct link to Create the Lists and AddLists Components" title="Direct link to Create the Lists and AddLists Components">​</a></h3>
 <p>We&#x27;re going to need several components to view and manage our todo lists:</p>
 <ul>
@@ -343,7 +343,7 @@ <h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="implement-a-uselist-hoo
 <p>Once again we&#x27;ll create a hook to gather together the methods we&#x27;ll likely use together.</p>
 <p>The hook will take a <code>listId</code> as a parameter, and return the list, the todos for that list, and functions to add and remove todos.</p>
 <div class="theme-admonition theme-admonition-note admonition_xJq3 alert alert--secondary"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>note</div><div class="admonitionContent_BuS1"><p>We are using <code>usePowerSyncQuery</code> to fetch the list and <code>usePowerSyncWatchedQuery</code> to fetch the todos, because the list itself won&#x27;t change often, so we only need to watch the todos for changes.</p></div></div>
-<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// app/services/database/use-list.ts</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> usePowerSyncQuery</span><span class="token imports punctuation" style="color:#393A34">,</span><span class="token imports"> usePowerSyncWatchedQuery </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;@journeyapps/powersync-sdk-react-native&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> useDatabase </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;app/services/database/database&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">LIST_TABLE</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token maybe-class-name">ListRecord</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">TODO_TABLE</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token maybe-class-name">TodoRecord</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;app/services/database/schema&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> useAuth </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;app/services/database/use-auth&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> useCallback </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;react&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> randomUUID </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;expo-crypto&#x27;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useList</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">listId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> user </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useAuth</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> powersync </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useDatabase</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> listRecords </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token generic-function function" style="color:#d73a49">usePowerSyncQuery</span><span class="token generic-function generic class-name operator" style="color:#393A34">&lt;</span><span class="token generic-function generic class-name">ListRecord</span><span class="token generic-function generic class-name operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">(</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">      SELECT *</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">      FROM </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">LIST_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">      WHERE id = ?</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">  </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">listId</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// we only expect one list record</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> list </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> listRecords</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> todos </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token generic-function function" style="color:#d73a49">usePowerSyncWatchedQuery</span><span class="token generic-function generic class-name operator" style="color:#393A34">&lt;</span><span class="token generic-function generic class-name">TodoRecord</span><span class="token generic-function generic class-name operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">(</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">      SELECT *</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">      FROM </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">TODO_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">      WHERE list_id = ?</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">  </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">listId</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> addTodo </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useCallback</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">description</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">)</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token known-class-name class-name">Promise</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">|</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token operator" style="color:#393A34">!</span><span class="token plain">user</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">throw</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&quot;Can&#x27;t add todo -- user is undefined&quot;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">try</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> powersync</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">execute</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">INSERT INTO </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">TODO_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">             (id, description, created_at, list_id, created_by, completed)</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">         VALUES (?, ?, ?, ?, ?, ?)</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">[</span><span class="token function" style="color:#d73a49">randomUUID</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> description</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Date</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">toISOString</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> listId</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> user</span><span class="token operator" style="color:#393A34">?.</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">any</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">Error adding todo: </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> error</span><span class="token template-string interpolation operator" style="color:#393A34">?.</span><span class="token template-string interpolation">message </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">user</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> powersync</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> listId</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> removeTodo </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useCallback</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">)</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token known-class-name class-name">Promise</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">|</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">try</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> powersync</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">execute</span><span class="token punctuation" style="color:#393A34">(</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">DELETE</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">                                FROM </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">TODO_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">                                WHERE id = ?</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">any</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&quot;Error removing todo&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> error</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">Error removing todo: </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> error</span><span class="token template-string interpolation operator" style="color:#393A34">?.</span><span class="token template-string interpolation">message </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    powersync</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> setTodoCompleted </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useCallback</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> completed</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">boolean</span><span class="token punctuation" style="color:#393A34">)</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token known-class-name class-name">Promise</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">|</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> completedAt </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> completed </span><span class="token operator" style="color:#393A34">?</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Date</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">toISOString</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> completedBy </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> completed </span><span class="token operator" style="color:#393A34">?</span><span class="token plain"> user</span><span class="token operator" style="color:#393A34">?.</span><span class="token plain">id </span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">try</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> powersync</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">execute</span><span class="token punctuation" style="color:#393A34">(</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">            UPDATE </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">TODO_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">            SET completed = ?, completed_at = ?, completed_by = ?</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">            WHERE id = ?</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">        </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">completed</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> completedAt</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> completedBy</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> id</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">any</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;Error toggling todo&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> error</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">Error toggling todo: </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> error</span><span class="token template-string interpolation operator" style="color:#393A34">?.</span><span class="token template-string interpolation">message </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">powersync</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> list</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> todos</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> addTodo</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> removeTodo</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> setTodoCompleted </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></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 class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// app/services/database/use-list.ts</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> usePowerSyncQuery</span><span class="token imports punctuation" style="color:#393A34">,</span><span class="token imports"> usePowerSyncWatchedQuery </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;@powersync/react-native&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> useDatabase </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;app/services/database/database&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">LIST_TABLE</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token maybe-class-name">ListRecord</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">TODO_TABLE</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token maybe-class-name">TodoRecord</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;app/services/database/schema&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> useAuth </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;app/services/database/use-auth&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> useCallback </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;react&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> randomUUID </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;expo-crypto&#x27;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useList</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">listId</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> user </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useAuth</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> powersync </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useDatabase</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> listRecords </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token generic-function function" style="color:#d73a49">usePowerSyncQuery</span><span class="token generic-function generic class-name operator" style="color:#393A34">&lt;</span><span class="token generic-function generic class-name">ListRecord</span><span class="token generic-function generic class-name operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">(</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">      SELECT *</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">      FROM </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">LIST_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">      WHERE id = ?</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">  </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">listId</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// we only expect one list record</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> list </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> listRecords</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> todos </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token generic-function function" style="color:#d73a49">usePowerSyncWatchedQuery</span><span class="token generic-function generic class-name operator" style="color:#393A34">&lt;</span><span class="token generic-function generic class-name">TodoRecord</span><span class="token generic-function generic class-name operator" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">(</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">      SELECT *</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">      FROM </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">TODO_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">      WHERE list_id = ?</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">  </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">listId</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> addTodo </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useCallback</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">description</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">)</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token known-class-name class-name">Promise</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">|</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token operator" style="color:#393A34">!</span><span class="token plain">user</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">throw</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&quot;Can&#x27;t add todo -- user is undefined&quot;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">try</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> powersync</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">execute</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">INSERT INTO </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">TODO_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">             (id, description, created_at, list_id, created_by, completed)</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">         VALUES (?, ?, ?, ?, ?, ?)</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">        </span><span class="token punctuation" style="color:#393A34">[</span><span class="token function" style="color:#d73a49">randomUUID</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> description</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Date</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">toISOString</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> listId</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> user</span><span class="token operator" style="color:#393A34">?.</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">any</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">Error adding todo: </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> error</span><span class="token template-string interpolation operator" style="color:#393A34">?.</span><span class="token template-string interpolation">message </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">user</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> powersync</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> listId</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> removeTodo </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useCallback</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">)</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token known-class-name class-name">Promise</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">|</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">try</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> powersync</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">execute</span><span class="token punctuation" style="color:#393A34">(</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">DELETE</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">                                FROM </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">TODO_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">                                WHERE id = ?</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">any</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&quot;Error removing todo&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> error</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">Error removing todo: </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> error</span><span class="token template-string interpolation operator" style="color:#393A34">?.</span><span class="token template-string interpolation">message </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    powersync</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> setTodoCompleted </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useCallback</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> completed</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">boolean</span><span class="token punctuation" style="color:#393A34">)</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token known-class-name class-name">Promise</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">|</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> completedAt </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> completed </span><span class="token operator" style="color:#393A34">?</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Date</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">toISOString</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> completedBy </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> completed </span><span class="token operator" style="color:#393A34">?</span><span class="token plain"> user</span><span class="token operator" style="color:#393A34">?.</span><span class="token plain">id </span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">try</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> powersync</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">execute</span><span class="token punctuation" style="color:#393A34">(</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">            UPDATE </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation constant" style="color:#36acaa">TODO_TABLE</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">            SET completed = ?, completed_at = ?, completed_by = ?</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">            WHERE id = ?</span><br></span><span class="token-line" style="color:#393A34"><span class="token template-string string" style="color:#e3116c">        </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">completed</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> completedAt</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> completedBy</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> id</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">null</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">any</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;Error toggling todo&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> error</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> error</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">Error toggling todo: </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation"> error</span><span class="token template-string interpolation operator" style="color:#393A34">?.</span><span class="token template-string interpolation">message </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">powersync</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> list</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> todos</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> addTodo</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> removeTodo</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> setTodoCompleted </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></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 anchorWithHideOnScrollNavbar_WYt5" id="implement-todolistscreen-to-display-and-edit-todos-in-a-list">Implement <code>TodoListScreen</code> to Display and Edit Todos in a List<a href="#implement-todolistscreen-to-display-and-edit-todos-in-a-list" class="hash-link" aria-label="Direct link to implement-todolistscreen-to-display-and-edit-todos-in-a-list" title="Direct link to implement-todolistscreen-to-display-and-edit-todos-in-a-list">​</a></h3>
 <p>Now in our <code>TodoList</code> screen we can use the <code>useList</code> hook to fetch the todos for a list:</p>
 <p>A lot of this should be familiar by now, we&#x27;re using the <code>useList</code> hook to fetch the list and todos, and then rendering them in a FlatList.</p>
@@ -357,6 +357,6 @@ <h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="checking-in-2">Checking
 <li>Toggle todos completed status by tapping them</li>
 </ul>
 <h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="congratulations">Congratulations!<a href="#congratulations" class="hash-link" aria-label="Direct link to Congratulations!" title="Direct link to Congratulations!">​</a></h2>
-<p>Now you have all the tools you need use PowerSync and Supabase to build a local-first app with real-time sync!</p></div><div class="root_lrOk"><h3>Is this page still up to date? Did it work for you?</h3><div class="grid_uXr7"><button class="reactionButton_NJtd" aria-label="Yes"><svg xmlns="http://www.w3.org/2000/svg" class="reactionIcon_kBHw" viewBox="0 0 512 512"><path fill="#349636" d="m456 192-156-12 23-89.4c6-26.6-.78-41.87-22.47-48.6l-34.69-9.85a4 4 0 0 0-4.4 1.72l-129 202.34a8 8 0 0 1-6.81 3.81H16V448h117.61a48 48 0 0 1 15.18 2.46l76.3 25.43a80 80 0 0 0 25.3 4.11h177.93c19 0 31.5-13.52 35.23-32.16L496 305.58V232c0-22.06-18-38-40-40z"></path></svg><div class="reactionText_KjFJ">Yes</div></button><button class="reactionButton_NJtd" aria-label="No"><svg xmlns="http://www.w3.org/2000/svg" class="reactionIcon_kBHw" viewBox="0 0 512 512"><path fill="#DC1818" d="m56 320 156.05 12-23 89.4c-6.08 26.6.7 41.87 22.39 48.62l34.69 9.85a4 4 0 0 0 4.4-1.72l129-202.34a8 8 0 0 1 6.81-3.81H496V64H378.39a48 48 0 0 1-15.18-2.46l-76.3-25.43a80 80 0 0 0-25.3-4.11H83.68c-19 0-31.5 13.52-35.23 32.16L16 206.42V280c0 22.06 18 38 40 40z"></path><path d="M378.45 273.93A15.84 15.84 0 0 1 386 272a15.93 15.93 0 0 0-7.51 1.91zm-40.59 69.29-.13.22a2.53 2.53 0 0 1 .13-.22c20.5-35.51 30.36-55 33.82-62-3.47 7.06-13.34 26.51-33.82 62z" fill="none"></path><path d="m372.66 279.16-1 2a16.29 16.29 0 0 1 6.77-7.26 16.48 16.48 0 0 0-5.77 5.26z"></path></svg><div class="reactionText_KjFJ">No</div></button></div></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-tags-row row margin-bottom--sm"><div class="col"><b>Tags:</b><ul class="tags_jXut padding--none margin-left--sm"><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/docs/tags/power-sync">PowerSync</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/docs/tags/react-native">React Native</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/docs/tags/backend">Backend</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/docs/tags/state-management">State management</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/docs/tags/database">Database</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/docs/tags/data-synchronization">Data Synchronization</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/docs/tags/offline-support">Offline Support</a></li></ul></div></div><div class="theme-doc-footer-edit-meta-row row"><div class="col"></div><div class="col lastUpdated_VsjB"><span class="theme-last-updated">Last updated<!-- --> on <b><time datetime="2024-04-12T22:33:22.000Z">Apr 12, 2024</time></b> by <b>Trevor Coleman</b></span></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/docs/recipes/GeneratorComponentTests"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Generator for Component Tests</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/docs/recipes/MaestroSetup"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Maestro Setup</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="#introduction" class="table-of-contents__link toc-highlight">Introduction</a><ul><li><a href="#what-is-powersync" class="table-of-contents__link toc-highlight">What is PowerSync?</a></li><li><a href="#benefits-of-using-powersync" class="table-of-contents__link toc-highlight">Benefits of Using PowerSync</a></li><li><a href="#using-other-backends" class="table-of-contents__link toc-highlight">Using Other Backends</a></li></ul></li><li><a href="#prerequisites" class="table-of-contents__link toc-highlight">Prerequisites</a></li><li><a href="#installing-sdk-and-dependencies" class="table-of-contents__link toc-highlight">Installing SDK and Dependencies</a><ul><li><a href="#install-necessary-dependencies-for-powersync" class="table-of-contents__link toc-highlight">Install necessary dependencies for PowerSync.</a></li><li><a href="#install-necessary-dependencies-for-supabase" class="table-of-contents__link toc-highlight">Install necessary dependencies for Supabase</a></li><li><a href="#configure-babel-and-polyfills" class="table-of-contents__link toc-highlight">Configure Babel and Polyfills</a></li><li><a href="#tell-expo-to-disable-the-expo-dev-client-network-inspector" class="table-of-contents__link toc-highlight">Tell Expo to Disable the Expo Dev Client Network Inspector</a></li></ul></li><li><a href="#authenticating-with-supabase" class="table-of-contents__link toc-highlight">Authenticating with Supabase</a><ul><li><a href="#add-supabase-config-variables-to-baseconfig" class="table-of-contents__link toc-highlight">Add Supabase Config Variables to <code>BaseConfig</code></a></li><li><a href="#initialize-the-supabase-client" class="table-of-contents__link toc-highlight">Initialize the Supabase Client</a></li><li><a href="#create-useauth-hook-and-authcontext" class="table-of-contents__link toc-highlight">Create <code>useAuth</code> Hook and <code>AuthContext</code></a></li><li><a href="#provide-auth-state-to-your-application" class="table-of-contents__link toc-highlight">Provide Auth State to Your Application</a></li><li><a href="#create-authscreen-for-signing-in---registering" class="table-of-contents__link toc-highlight">Create <code>AuthScreen</code> for signing in /  registering</a></li><li><a href="#create-the-signoutbutton-component" class="table-of-contents__link toc-highlight">Create the <code>SignOutButton</code> component</a></li><li><a href="#add-signoutbutton-to-welcomescreen" class="table-of-contents__link toc-highlight">Add <code>SignOutButton</code> to <code>WelcomeScreen</code></a></li><li><a href="#update-the-appnavigator" class="table-of-contents__link toc-highlight">Update the <code>AppNavigator</code></a></li><li><a href="#checking-in" class="table-of-contents__link toc-highlight">Checking In</a></li></ul></li><li><a href="#connecting-powersync-to-supabase" class="table-of-contents__link toc-highlight">Connecting PowerSync to Supabase</a><ul><li><a href="#add-your-powersync-url-to-your-app-config" class="table-of-contents__link toc-highlight">Add your PowerSync URL to your app config</a></li><li><a href="#define-your-schema" class="table-of-contents__link toc-highlight">Define Your Schema</a></li><li><a href="#implement-the-supabaseconnector" class="table-of-contents__link toc-highlight">Implement the SupabaseConnector</a></li><li><a href="#create-the-databasecontext" class="table-of-contents__link toc-highlight">Create the DatabaseContext</a></li><li><a href="#wrap-the-app-in-the-databaseprovider" class="table-of-contents__link toc-highlight">Wrap the app in the DatabaseProvider</a></li></ul></li><li><a href="#managing-lists-of-todos" class="table-of-contents__link toc-highlight">Managing Lists of Todos</a><ul><li><a href="#the-uselists-hook" class="table-of-contents__link toc-highlight">The <code>useLists</code> Hook</a></li><li><a href="#create-the-lists-and-addlists-components" class="table-of-contents__link toc-highlight">Create the Lists and AddLists Components</a></li><li><a href="#add-lists-to-the-welcome-screen" class="table-of-contents__link toc-highlight">Add Lists to the Welcome Screen</a></li><li><a href="#display-todo-lists-in-lists" class="table-of-contents__link toc-highlight">Display Todo Lists in <code>Lists</code></a></li><li><a href="#create-todo-lists-with-addlist" class="table-of-contents__link toc-highlight">Create Todo Lists with <code>AddList</code></a></li><li><a href="#checking-in-1" class="table-of-contents__link toc-highlight">Checking In</a></li></ul></li><li><a href="#viewing-and-editing-individual-todolists" class="table-of-contents__link toc-highlight">Viewing and Editing Individual TodoLists</a><ul><li><a href="#create-the-todolist-screen" class="table-of-contents__link toc-highlight">Create the TodoList Screen</a></li><li><a href="#update-the-appnavigator-to-include-the-todolist-screen" class="table-of-contents__link toc-highlight">Update the AppNavigator to include the <code>TodoList</code> screen</a></li><li><a href="#update-lists-so-touching-a-list-navigated-to-todolistscreen-and-passes-the-listid-param" class="table-of-contents__link toc-highlight">Update <code>Lists</code> so touching a list navigated to <code>TodoListScreen</code> and passes the <code>listId</code> param</a></li><li><a href="#implement-a-uselist-hook-to-view-and-manage-todos-for-a-list" class="table-of-contents__link toc-highlight">Implement a <code>useList</code> hook to view and manage Todos for a List</a></li><li><a href="#implement-todolistscreen-to-display-and-edit-todos-in-a-list" class="table-of-contents__link toc-highlight">Implement <code>TodoListScreen</code> to Display and Edit Todos in a List</a></li><li><a href="#checking-in-2" class="table-of-contents__link toc-highlight">Checking In</a></li></ul></li><li><a href="#congratulations" class="table-of-contents__link toc-highlight">Congratulations!</a></li></ul></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://join.slack.com/t/infiniteredcommunity/shared_invite/zt-1e1gob8vn-pcFjKM~n1c~aXFsTnvHpdg" target="_blank" rel="noopener noreferrer" class="footer__link-item">Slack Community<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://reactnativeradio.com/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React Native Radio<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://reactnative.cc/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React Native Newsletter<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li></ul></div><div class="col footer__col"><div class="footer__title">Resources</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/infinitered/ignite-cookbook/issues" target="_blank" rel="noopener noreferrer" class="footer__link-item">Submit a Recipe<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://github.com/infinitered/ignite-cookbook" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub - Ignite Cookbook<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub - Ignite Boilerplate<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://shift.infinite.red/" target="_blank" rel="noopener noreferrer" class="footer__link-item">RedShift Blog <div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://infinite.red/privacy-policy" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy Policy<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li></ul></div><div class="col footer__col"><div class="footer__title">Infinite Red</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://infinite.red/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Website<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://docs.infinite.red/" target="_blank" rel="noopener noreferrer" class="footer__link-item">IR Docs<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://chainreactconf.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Chain React Conf<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">From the team at <a href="https://infinite.red/" target="_blank" rel="noopener noreferrer" class="ir-footer-link">Infinite Red</a> <img width="32" height="32" src="/img/ir-mark.svg" alt="dropdown" class="ir-mark"></div></div></div></footer></div>
+<p>Now you have all the tools you need use PowerSync and Supabase to build a local-first app with real-time sync!</p></div><div class="root_lrOk"><h3>Is this page still up to date? Did it work for you?</h3><div class="grid_uXr7"><button class="reactionButton_NJtd" aria-label="Yes"><svg xmlns="http://www.w3.org/2000/svg" class="reactionIcon_kBHw" viewBox="0 0 512 512"><path fill="#349636" d="m456 192-156-12 23-89.4c6-26.6-.78-41.87-22.47-48.6l-34.69-9.85a4 4 0 0 0-4.4 1.72l-129 202.34a8 8 0 0 1-6.81 3.81H16V448h117.61a48 48 0 0 1 15.18 2.46l76.3 25.43a80 80 0 0 0 25.3 4.11h177.93c19 0 31.5-13.52 35.23-32.16L496 305.58V232c0-22.06-18-38-40-40z"></path></svg><div class="reactionText_KjFJ">Yes</div></button><button class="reactionButton_NJtd" aria-label="No"><svg xmlns="http://www.w3.org/2000/svg" class="reactionIcon_kBHw" viewBox="0 0 512 512"><path fill="#DC1818" d="m56 320 156.05 12-23 89.4c-6.08 26.6.7 41.87 22.39 48.62l34.69 9.85a4 4 0 0 0 4.4-1.72l129-202.34a8 8 0 0 1 6.81-3.81H496V64H378.39a48 48 0 0 1-15.18-2.46l-76.3-25.43a80 80 0 0 0-25.3-4.11H83.68c-19 0-31.5 13.52-35.23 32.16L16 206.42V280c0 22.06 18 38 40 40z"></path><path d="M378.45 273.93A15.84 15.84 0 0 1 386 272a15.93 15.93 0 0 0-7.51 1.91zm-40.59 69.29-.13.22a2.53 2.53 0 0 1 .13-.22c20.5-35.51 30.36-55 33.82-62-3.47 7.06-13.34 26.51-33.82 62z" fill="none"></path><path d="m372.66 279.16-1 2a16.29 16.29 0 0 1 6.77-7.26 16.48 16.48 0 0 0-5.77 5.26z"></path></svg><div class="reactionText_KjFJ">No</div></button></div></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-tags-row row margin-bottom--sm"><div class="col"><b>Tags:</b><ul class="tags_jXut padding--none margin-left--sm"><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/docs/tags/power-sync">PowerSync</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/docs/tags/react-native">React Native</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/docs/tags/backend">Backend</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/docs/tags/state-management">State management</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/docs/tags/database">Database</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/docs/tags/data-synchronization">Data Synchronization</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/docs/tags/offline-support">Offline Support</a></li></ul></div></div><div class="theme-doc-footer-edit-meta-row row"><div class="col"></div><div class="col lastUpdated_VsjB"><span class="theme-last-updated">Last updated<!-- --> on <b><time datetime="2024-04-25T14:54:58.000Z">Apr 25, 2024</time></b> by <b>Trevor Coleman</b></span></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/docs/recipes/GeneratorComponentTests"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Generator for Component Tests</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/docs/recipes/MaestroSetup"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Maestro Setup</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="#introduction" class="table-of-contents__link toc-highlight">Introduction</a><ul><li><a href="#what-is-powersync" class="table-of-contents__link toc-highlight">What is PowerSync?</a></li><li><a href="#benefits-of-using-powersync" class="table-of-contents__link toc-highlight">Benefits of Using PowerSync</a></li><li><a href="#using-other-backends" class="table-of-contents__link toc-highlight">Using Other Backends</a></li></ul></li><li><a href="#prerequisites" class="table-of-contents__link toc-highlight">Prerequisites</a></li><li><a href="#installing-sdk-and-dependencies" class="table-of-contents__link toc-highlight">Installing SDK and Dependencies</a><ul><li><a href="#install-necessary-dependencies-for-powersync" class="table-of-contents__link toc-highlight">Install necessary dependencies for PowerSync.</a></li><li><a href="#install-necessary-dependencies-for-supabase" class="table-of-contents__link toc-highlight">Install necessary dependencies for Supabase</a></li><li><a href="#configure-babel-and-polyfills" class="table-of-contents__link toc-highlight">Configure Babel and Polyfills</a></li><li><a href="#tell-expo-to-disable-the-expo-dev-client-network-inspector" class="table-of-contents__link toc-highlight">Tell Expo to Disable the Expo Dev Client Network Inspector</a></li></ul></li><li><a href="#authenticating-with-supabase" class="table-of-contents__link toc-highlight">Authenticating with Supabase</a><ul><li><a href="#add-supabase-config-variables-to-baseconfig" class="table-of-contents__link toc-highlight">Add Supabase Config Variables to <code>BaseConfig</code></a></li><li><a href="#initialize-the-supabase-client" class="table-of-contents__link toc-highlight">Initialize the Supabase Client</a></li><li><a href="#create-useauth-hook-and-authcontext" class="table-of-contents__link toc-highlight">Create <code>useAuth</code> Hook and <code>AuthContext</code></a></li><li><a href="#provide-auth-state-to-your-application" class="table-of-contents__link toc-highlight">Provide Auth State to Your Application</a></li><li><a href="#create-authscreen-for-signing-in---registering" class="table-of-contents__link toc-highlight">Create <code>AuthScreen</code> for signing in /  registering</a></li><li><a href="#create-the-signoutbutton-component" class="table-of-contents__link toc-highlight">Create the <code>SignOutButton</code> component</a></li><li><a href="#add-signoutbutton-to-welcomescreen" class="table-of-contents__link toc-highlight">Add <code>SignOutButton</code> to <code>WelcomeScreen</code></a></li><li><a href="#update-the-appnavigator" class="table-of-contents__link toc-highlight">Update the <code>AppNavigator</code></a></li><li><a href="#checking-in" class="table-of-contents__link toc-highlight">Checking In</a></li></ul></li><li><a href="#connecting-powersync-to-supabase" class="table-of-contents__link toc-highlight">Connecting PowerSync to Supabase</a><ul><li><a href="#add-your-powersync-url-to-your-app-config" class="table-of-contents__link toc-highlight">Add your PowerSync URL to your app config</a></li><li><a href="#define-your-schema" class="table-of-contents__link toc-highlight">Define Your Schema</a></li><li><a href="#implement-the-supabaseconnector" class="table-of-contents__link toc-highlight">Implement the SupabaseConnector</a></li><li><a href="#create-the-databasecontext" class="table-of-contents__link toc-highlight">Create the DatabaseContext</a></li><li><a href="#wrap-the-app-in-the-databaseprovider" class="table-of-contents__link toc-highlight">Wrap the app in the DatabaseProvider</a></li></ul></li><li><a href="#managing-lists-of-todos" class="table-of-contents__link toc-highlight">Managing Lists of Todos</a><ul><li><a href="#the-uselists-hook" class="table-of-contents__link toc-highlight">The <code>useLists</code> Hook</a></li><li><a href="#create-the-lists-and-addlists-components" class="table-of-contents__link toc-highlight">Create the Lists and AddLists Components</a></li><li><a href="#add-lists-to-the-welcome-screen" class="table-of-contents__link toc-highlight">Add Lists to the Welcome Screen</a></li><li><a href="#display-todo-lists-in-lists" class="table-of-contents__link toc-highlight">Display Todo Lists in <code>Lists</code></a></li><li><a href="#create-todo-lists-with-addlist" class="table-of-contents__link toc-highlight">Create Todo Lists with <code>AddList</code></a></li><li><a href="#checking-in-1" class="table-of-contents__link toc-highlight">Checking In</a></li></ul></li><li><a href="#viewing-and-editing-individual-todolists" class="table-of-contents__link toc-highlight">Viewing and Editing Individual TodoLists</a><ul><li><a href="#create-the-todolist-screen" class="table-of-contents__link toc-highlight">Create the TodoList Screen</a></li><li><a href="#update-the-appnavigator-to-include-the-todolist-screen" class="table-of-contents__link toc-highlight">Update the AppNavigator to include the <code>TodoList</code> screen</a></li><li><a href="#update-lists-so-touching-a-list-navigated-to-todolistscreen-and-passes-the-listid-param" class="table-of-contents__link toc-highlight">Update <code>Lists</code> so touching a list navigated to <code>TodoListScreen</code> and passes the <code>listId</code> param</a></li><li><a href="#implement-a-uselist-hook-to-view-and-manage-todos-for-a-list" class="table-of-contents__link toc-highlight">Implement a <code>useList</code> hook to view and manage Todos for a List</a></li><li><a href="#implement-todolistscreen-to-display-and-edit-todos-in-a-list" class="table-of-contents__link toc-highlight">Implement <code>TodoListScreen</code> to Display and Edit Todos in a List</a></li><li><a href="#checking-in-2" class="table-of-contents__link toc-highlight">Checking In</a></li></ul></li><li><a href="#congratulations" class="table-of-contents__link toc-highlight">Congratulations!</a></li></ul></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://join.slack.com/t/infiniteredcommunity/shared_invite/zt-1e1gob8vn-pcFjKM~n1c~aXFsTnvHpdg" target="_blank" rel="noopener noreferrer" class="footer__link-item">Slack Community<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://reactnativeradio.com/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React Native Radio<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://reactnative.cc/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React Native Newsletter<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li></ul></div><div class="col footer__col"><div class="footer__title">Resources</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/infinitered/ignite-cookbook/issues" target="_blank" rel="noopener noreferrer" class="footer__link-item">Submit a Recipe<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://github.com/infinitered/ignite-cookbook" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub - Ignite Cookbook<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub - Ignite Boilerplate<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://shift.infinite.red/" target="_blank" rel="noopener noreferrer" class="footer__link-item">RedShift Blog <div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://infinite.red/privacy-policy" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy Policy<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li></ul></div><div class="col footer__col"><div class="footer__title">Infinite Red</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://infinite.red/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Website<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://docs.infinite.red/" target="_blank" rel="noopener noreferrer" class="footer__link-item">IR Docs<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://chainreactconf.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Chain React Conf<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">From the team at <a href="https://infinite.red/" target="_blank" rel="noopener noreferrer" class="ir-footer-link">Infinite Red</a> <img width="32" height="32" src="/img/ir-mark.svg" alt="dropdown" class="ir-mark"></div></div></div></footer></div>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/recipes/MaestroSetup/index.html b/docs/recipes/MaestroSetup/index.html
index 431210ca..81b97d9a 100644
--- a/docs/recipes/MaestroSetup/index.html
+++ b/docs/recipes/MaestroSetup/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/MigratingToMMKV/index.html b/docs/recipes/MigratingToMMKV/index.html
index 4e48bcb3..7d98c79c 100644
--- a/docs/recipes/MigratingToMMKV/index.html
+++ b/docs/recipes/MigratingToMMKV/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/PatchingBuildingAndroid/index.html b/docs/recipes/PatchingBuildingAndroid/index.html
index 4cc32923..543ccc04 100644
--- a/docs/recipes/PatchingBuildingAndroid/index.html
+++ b/docs/recipes/PatchingBuildingAndroid/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/PrepForEASBuild/index.html b/docs/recipes/PrepForEASBuild/index.html
index 1777b63f..29391d06 100644
--- a/docs/recipes/PrepForEASBuild/index.html
+++ b/docs/recipes/PrepForEASBuild/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/ReactNativeVisionCamera/index.html b/docs/recipes/ReactNativeVisionCamera/index.html
index d1f69e35..fc7712ae 100644
--- a/docs/recipes/ReactNativeVisionCamera/index.html
+++ b/docs/recipes/ReactNativeVisionCamera/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/Redux/index.html b/docs/recipes/Redux/index.html
index efdfccff..1e88e661 100644
--- a/docs/recipes/Redux/index.html
+++ b/docs/recipes/Redux/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/RemoveMobxStateTree/index.html b/docs/recipes/RemoveMobxStateTree/index.html
index 0857bdda..c7472891 100644
--- a/docs/recipes/RemoveMobxStateTree/index.html
+++ b/docs/recipes/RemoveMobxStateTree/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/RequiringHardwareFeaturesWithExpo/index.html b/docs/recipes/RequiringHardwareFeaturesWithExpo/index.html
index 9b306f58..e8fce56f 100644
--- a/docs/recipes/RequiringHardwareFeaturesWithExpo/index.html
+++ b/docs/recipes/RequiringHardwareFeaturesWithExpo/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/SampleYAMLCircleCI/index.html b/docs/recipes/SampleYAMLCircleCI/index.html
index ee217d8b..67c8db5b 100644
--- a/docs/recipes/SampleYAMLCircleCI/index.html
+++ b/docs/recipes/SampleYAMLCircleCI/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/SelectFieldWithBottomSheet/index.html b/docs/recipes/SelectFieldWithBottomSheet/index.html
index 0d581934..a2cbdb92 100644
--- a/docs/recipes/SelectFieldWithBottomSheet/index.html
+++ b/docs/recipes/SelectFieldWithBottomSheet/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/SwitchBetweenExpoGoCNG/index.html b/docs/recipes/SwitchBetweenExpoGoCNG/index.html
index 4b6bc2bb..eabcd66f 100644
--- a/docs/recipes/SwitchBetweenExpoGoCNG/index.html
+++ b/docs/recipes/SwitchBetweenExpoGoCNG/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/TypeScriptBaseURL/index.html b/docs/recipes/TypeScriptBaseURL/index.html
index 5e68bc8e..9fdd7385 100644
--- a/docs/recipes/TypeScriptBaseURL/index.html
+++ b/docs/recipes/TypeScriptBaseURL/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/UnrenderedItemInScrollView/index.html b/docs/recipes/UnrenderedItemInScrollView/index.html
index eca2bc60..e592ed55 100644
--- a/docs/recipes/UnrenderedItemInScrollView/index.html
+++ b/docs/recipes/UnrenderedItemInScrollView/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/UpdatingDependencies/index.html b/docs/recipes/UpdatingDependencies/index.html
index 57d29823..bb10b56a 100644
--- a/docs/recipes/UpdatingDependencies/index.html
+++ b/docs/recipes/UpdatingDependencies/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/UpdatingIgnite/index.html b/docs/recipes/UpdatingIgnite/index.html
index 7925a293..79cbb6f2 100644
--- a/docs/recipes/UpdatingIgnite/index.html
+++ b/docs/recipes/UpdatingIgnite/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/UsingScreenReaders/index.html b/docs/recipes/UsingScreenReaders/index.html
index 9ad6e5b1..b1352da9 100644
--- a/docs/recipes/UsingScreenReaders/index.html
+++ b/docs/recipes/UsingScreenReaders/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/recipes/Zustand/index.html b/docs/recipes/Zustand/index.html
index 8fa5be85..ecf9112c 100644
--- a/docs/recipes/Zustand/index.html
+++ b/docs/recipes/Zustand/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/accessibility/index.html b/docs/tags/accessibility/index.html
index 0dccd2b0..f6bd2367 100644
--- a/docs/tags/accessibility/index.html
+++ b/docs/tags/accessibility/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/android/index.html b/docs/tags/android/index.html
index 8c48e8dc..72c27427 100644
--- a/docs/tags/android/index.html
+++ b/docs/tags/android/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/apisauce/index.html b/docs/tags/apisauce/index.html
index d189add1..0191d7d8 100644
--- a/docs/tags/apisauce/index.html
+++ b/docs/tags/apisauce/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/archive/index.html b/docs/tags/archive/index.html
index d5131dec..69f15057 100644
--- a/docs/tags/archive/index.html
+++ b/docs/tags/archive/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/async-storage/index.html b/docs/tags/async-storage/index.html
index e080b4ca..573c0d3c 100644
--- a/docs/tags/async-storage/index.html
+++ b/docs/tags/async-storage/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/authentication/index.html b/docs/tags/authentication/index.html
index b318b1b6..f81f4888 100644
--- a/docs/tags/authentication/index.html
+++ b/docs/tags/authentication/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/babel/index.html b/docs/tags/babel/index.html
index 73fbeced..d8d11fa2 100644
--- a/docs/tags/babel/index.html
+++ b/docs/tags/babel/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/backend/index.html b/docs/tags/backend/index.html
index 82cad907..76d0caec 100644
--- a/docs/tags/backend/index.html
+++ b/docs/tags/backend/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/ci-cd/index.html b/docs/tags/ci-cd/index.html
index 5d62bd75..9828286b 100644
--- a/docs/tags/ci-cd/index.html
+++ b/docs/tags/ci-cd/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/cng/index.html b/docs/tags/cng/index.html
index 7823ce53..7aee4232 100644
--- a/docs/tags/cng/index.html
+++ b/docs/tags/cng/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/data-synchronization/index.html b/docs/tags/data-synchronization/index.html
index f4a4ca53..e3c1ff62 100644
--- a/docs/tags/data-synchronization/index.html
+++ b/docs/tags/data-synchronization/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/database/index.html b/docs/tags/database/index.html
index 1c178b6a..0dc81c8c 100644
--- a/docs/tags/database/index.html
+++ b/docs/tags/database/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/debug/index.html b/docs/tags/debug/index.html
index befcce2a..7fcb4332 100644
--- a/docs/tags/debug/index.html
+++ b/docs/tags/debug/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/dependencies/index.html b/docs/tags/dependencies/index.html
index cd08d2ea..9fce89a4 100644
--- a/docs/tags/dependencies/index.html
+++ b/docs/tags/dependencies/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/eas-update/index.html b/docs/tags/eas-update/index.html
index 386ac937..f298cca4 100644
--- a/docs/tags/eas-update/index.html
+++ b/docs/tags/eas-update/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/eas/index.html b/docs/tags/eas/index.html
index 9ad5cb0b..b3a701ab 100644
--- a/docs/tags/eas/index.html
+++ b/docs/tags/eas/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/environment-variables/index.html b/docs/tags/environment-variables/index.html
index 1d6af3b2..44187d88 100644
--- a/docs/tags/environment-variables/index.html
+++ b/docs/tags/environment-variables/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/expo-dev-client/index.html b/docs/tags/expo-dev-client/index.html
index f578c113..0549e5b5 100644
--- a/docs/tags/expo-dev-client/index.html
+++ b/docs/tags/expo-dev-client/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/expo-router/index.html b/docs/tags/expo-router/index.html
index db66497b..007daa34 100644
--- a/docs/tags/expo-router/index.html
+++ b/docs/tags/expo-router/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/expo-updates/index.html b/docs/tags/expo-updates/index.html
index 5042a6c4..84774c88 100644
--- a/docs/tags/expo-updates/index.html
+++ b/docs/tags/expo-updates/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/expo/index.html b/docs/tags/expo/index.html
index 6f6ea1da..f4d2829c 100644
--- a/docs/tags/expo/index.html
+++ b/docs/tags/expo/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/flat-list/index.html b/docs/tags/flat-list/index.html
index ce77a026..27ccb489 100644
--- a/docs/tags/flat-list/index.html
+++ b/docs/tags/flat-list/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/generator/index.html b/docs/tags/generator/index.html
index 94b62e3e..22575d07 100644
--- a/docs/tags/generator/index.html
+++ b/docs/tags/generator/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/guide/index.html b/docs/tags/guide/index.html
index e4022b36..d7963e73 100644
--- a/docs/tags/guide/index.html
+++ b/docs/tags/guide/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/hardware/index.html b/docs/tags/hardware/index.html
index 4f90cc96..38a95ed9 100644
--- a/docs/tags/hardware/index.html
+++ b/docs/tags/hardware/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/i-os/index.html b/docs/tags/i-os/index.html
index b85ead3a..642eb033 100644
--- a/docs/tags/i-os/index.html
+++ b/docs/tags/i-os/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/imports/index.html b/docs/tags/imports/index.html
index d9201407..bc7a5142 100644
--- a/docs/tags/imports/index.html
+++ b/docs/tags/imports/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/index.html b/docs/tags/index.html
index 03e6ca59..4f294e4a 100644
--- a/docs/tags/index.html
+++ b/docs/tags/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/intro/index.html b/docs/tags/intro/index.html
index 6ce2ebf9..3cf3bbd5 100644
--- a/docs/tags/intro/index.html
+++ b/docs/tags/intro/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/maestro/index.html b/docs/tags/maestro/index.html
index 12a44921..50b2d6d8 100644
--- a/docs/tags/maestro/index.html
+++ b/docs/tags/maestro/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/mmkv/index.html b/docs/tags/mmkv/index.html
index 3572ed10..0e0591cb 100644
--- a/docs/tags/mmkv/index.html
+++ b/docs/tags/mmkv/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/mob-x/index.html b/docs/tags/mob-x/index.html
index 95d0ea0a..0f2513ba 100644
--- a/docs/tags/mob-x/index.html
+++ b/docs/tags/mob-x/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/offline-support/index.html b/docs/tags/offline-support/index.html
index e5acad4e..b14a2f9c 100644
--- a/docs/tags/offline-support/index.html
+++ b/docs/tags/offline-support/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/power-sync/index.html b/docs/tags/power-sync/index.html
index be62984f..9c170268 100644
--- a/docs/tags/power-sync/index.html
+++ b/docs/tags/power-sync/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/prebuild/index.html b/docs/tags/prebuild/index.html
index f30a0a20..da3fed98 100644
--- a/docs/tags/prebuild/index.html
+++ b/docs/tags/prebuild/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/prettier/index.html b/docs/tags/prettier/index.html
index eddafbda..a4164830 100644
--- a/docs/tags/prettier/index.html
+++ b/docs/tags/prettier/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/react-native-vision-camera/index.html b/docs/tags/react-native-vision-camera/index.html
index 9fbe1af8..7bad76aa 100644
--- a/docs/tags/react-native-vision-camera/index.html
+++ b/docs/tags/react-native-vision-camera/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/react-native/index.html b/docs/tags/react-native/index.html
index b0157bca..c0f7e1ba 100644
--- a/docs/tags/react-native/index.html
+++ b/docs/tags/react-native/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/react-navigation/index.html b/docs/tags/react-navigation/index.html
index 39e5b7ce..4f030044 100644
--- a/docs/tags/react-navigation/index.html
+++ b/docs/tags/react-navigation/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/redux/index.html b/docs/tags/redux/index.html
index a55e9a3c..ab8691ab 100644
--- a/docs/tags/redux/index.html
+++ b/docs/tags/redux/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/scroll-to/index.html b/docs/tags/scroll-to/index.html
index 7491f02b..599dc35b 100644
--- a/docs/tags/scroll-to/index.html
+++ b/docs/tags/scroll-to/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/section-list/index.html b/docs/tags/section-list/index.html
index a8b7e730..9f2ba73e 100644
--- a/docs/tags/section-list/index.html
+++ b/docs/tags/section-list/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/select-field/index.html b/docs/tags/select-field/index.html
index 3e4d2b51..265581b7 100644
--- a/docs/tags/select-field/index.html
+++ b/docs/tags/select-field/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/state-management/index.html b/docs/tags/state-management/index.html
index 222edcd8..97f5e8a5 100644
--- a/docs/tags/state-management/index.html
+++ b/docs/tags/state-management/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/testing/index.html b/docs/tags/testing/index.html
index 2c9d27c8..b4e4f603 100644
--- a/docs/tags/testing/index.html
+++ b/docs/tags/testing/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/text-field/index.html b/docs/tags/text-field/index.html
index c8f3c04b..ccc38956 100644
--- a/docs/tags/text-field/index.html
+++ b/docs/tags/text-field/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/type-script/index.html b/docs/tags/type-script/index.html
index 14167c4e..bd63e0c5 100644
--- a/docs/tags/type-script/index.html
+++ b/docs/tags/type-script/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/ui-required-device-capabilities/index.html b/docs/tags/ui-required-device-capabilities/index.html
index 0cf548b9..950e6ddc 100644
--- a/docs/tags/ui-required-device-capabilities/index.html
+++ b/docs/tags/ui-required-device-capabilities/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/ui/index.html b/docs/tags/ui/index.html
index 2521e6ef..4fe71800 100644
--- a/docs/tags/ui/index.html
+++ b/docs/tags/ui/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/uses-feature/index.html b/docs/tags/uses-feature/index.html
index d59feafe..d2329222 100644
--- a/docs/tags/uses-feature/index.html
+++ b/docs/tags/uses-feature/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/vision-camera/index.html b/docs/tags/vision-camera/index.html
index c059b2ad..1ffe2a16 100644
--- a/docs/tags/vision-camera/index.html
+++ b/docs/tags/vision-camera/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/yarn/index.html b/docs/tags/yarn/index.html
index ace27087..a1897551 100644
--- a/docs/tags/yarn/index.html
+++ b/docs/tags/yarn/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/docs/tags/zustand/index.html b/docs/tags/zustand/index.html
index 353f60dc..d2dcaba8 100644
--- a/docs/tags/zustand/index.html
+++ b/docs/tags/zustand/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
diff --git a/index.html b/index.html
index 70225932..f923dcff 100644
--- a/index.html
+++ b/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">
@@ -39,7 +39,7 @@
                       </a></li></ul></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="newSection_JEbd"><div class="notificationSection_znCG"><div class="notificationTag_z1u1"><p class="notificationTagText_W2CJ">New Recipe</p></div><h3 class="notificationTitle_cMRt"><a class="notificationTitleLink_Ra8p" href="/docs/recipes/LocalFirstDataWithPowerSync">PowerSync and Supabase for Local-First Data Management</a></h3><p class="notificationDate_xVgk">Published on <b>March 22nd, 2024</b> by <b>Trevor Coleman</b></p><a class="notificationLink_ZhBC" href="/docs/recipes/LocalFirstDataWithPowerSync"><b class="notificationLinkText_L84a">View recipe</b><svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m7.978 16.226 8.037-8.037M16.256 15.991l-.24-7.802-7.804-.24" stroke="#191015" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></a></div><div class="notificationSection_znCG"><p class="notificationTagText_W2CJ">Latest Ignite Release</p><a href="https://github.com/infinitered/ignite/releases/latest" target="_blank" rel="noopener noreferrer" class="notificationLink_ZhBC"><b class="notificationLinkText_L84a">View on Github</b><svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m7.978 16.226 8.037-8.037M16.256 15.991l-.24-7.802-7.804-.24" stroke="#191015" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></a></div></div><header class="heroBanner_qdFl"><div class="heroImage_xZN7"><svg width="295" height="446" viewBox="0 0 295 446" fill="none" xmlns="http://www.w3.org/2000/svg" class="heroImage_Fu0C" role="img"><rect width="105.202" height="29.963" rx="8" transform="matrix(0 1 1 0 37.952 226.995)" fill="#BCC0D6"></rect><rect width="105.202" height="29.963" rx="8" transform="matrix(0 1 1 0 151.144 113.802)" fill="#BCC0D6"></rect><rect width="105.202" height="29.963" rx="8" transform="matrix(0 1 1 0 113.192 226.995)" fill="#9196B9"></rect><rect width="105.202" height="29.963" rx="8" transform="matrix(0 1 1 0 226.385 113.802)" fill="#9196B9"></rect><rect width="105.202" height="29.963" rx="8" transform="matrix(0 1 1 0 0 .61)" fill="#41476E"></rect><rect width="105.202" height="29.963" rx="8" transform="matrix(0 1 1 0 264.338 340.188)" fill="#41476E"></rect><rect width="29.72" height="29.87" rx="8" transform="matrix(0 1 1 0 .248 189.285)" fill="#41476E"></rect><rect width="29.72" height="29.87" rx="8" transform="matrix(0 1 1 0 .248 151.505)" fill="#41476E"></rect><rect width="29.72" height="29.87" rx="8" transform="matrix(0 1 1 0 .248 113.725)" fill="#41476E"></rect><rect width="29.72" height="29.87" rx="8" transform="matrix(0 1 1 0 264.184 302.555)" fill="#41476E"></rect><rect width="29.72" height="29.87" rx="8" transform="matrix(0 1 1 0 264.184 264.775)" fill="#41476E"></rect><rect width="29.72" height="29.87" rx="8" transform="matrix(0 1 1 0 264.184 226.995)" fill="#41476E"></rect><rect width="105.202" height="29.297" rx="8" transform="matrix(0 1 1 0 75.906 226.995)" fill="#626894"></rect><rect width="105.202" height="29.297" rx="8" transform="matrix(0 1 1 0 189.098 113.802)" fill="#626894"></rect><rect width="105.28" height="29.87" rx="8" transform="matrix(1 0 0 -1 37.952 219.083)" fill="#9196B9"></rect><rect width="105.28" height="29.87" rx="8" transform="matrix(1 0 0 -1 37.952 143.673)" fill="#BCC0D6"></rect><rect width="105.28" height="29.87" rx="8" transform="matrix(1 0 0 -1 37.952 181.378)" fill="#626894"></rect><rect width="105.28" height="29.87" rx="8" transform="matrix(1 0 0 -1 151.067 332.197)" fill="#9196B9"></rect><rect width="105.28" height="29.87" rx="8" transform="matrix(1 0 0 -1 151.067 256.788)" fill="#BCC0D6"></rect><rect width="105.28" height="29.87" rx="8" transform="matrix(1 0 0 -1 151.067 294.493)" fill="#626894"></rect></svg></div><div class="headerRight___WB"><div class="titleContainer"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAToAAADuCAMAAACeRDvjAAABF1BMVEUAAAAgFhURDgwRDgwRDgwQDgwRDQwRDgwZFhQXDw4RDgwWExERDgwVERARDQwRDgwUEBAUDxEQDgwRDgsRDQwZEBURDgsRDgwRDgwRDgwZEBURDgwTDw4TDg0SDg4RDgwSDg0RDgwRDgwRDgwSDg4SDw0RDgwTDg4RDgwTDg0TDg0SDg0TDg4TDw8RDgwRDg0TDg8RDgwUDxATDw4RDgwRDgwTDw8RDgwZEBUSDg0RDgwTDg4TDg4ZEBURDgwZEBURDg0VDxETDg4SDw4ZEBUZEBUSDg0SDg0TDg4TDw4UDg8SDg0SDg0TDg4ZDxUSDw0SDg0RDQwZEBUZEBUZEBUZEBUZEBUZEBUZEBUZEBUZEBUZEBURDgyZra8tAAAAXHRSTlMABPr88u339AgG6gzwEOf+FxPc4tX69tnfyfbEMigi5Du/u6gsHoY30pFVUEccsZpMz6QvzJ57tO+Ut41s86zMdnBAGf7gc1olioJofmTqXUNg5tvSw73XoLex7PI0FyIAABIRSURBVHja7Nhda9swFAZg687GBOyLc3NwSqBZQ75oSMAoJEJ1JrVpsnpBlr+S//8/xhiDUba1qXcx0Hl+wovOKx15hBBCCCGEEEIIIYQQQgghhPw3Ap9F8efepziK4tBnHnkb88NPp90k2zTPTXlblumhbe4evw7CHuX3VywZLLZtVcsC1hoB0ZSCG66NfsieBpFHfs8PF83aFgVXCgGk4QCYVwJAAQhTGFluTlHokVdYtBo3NVjgpeKAgmNrtNV1wy+oLsALAFCieElHgUd+4Q+nzzpHXigUvEg322yxSuL53p/3p0/Z4VyeZY75UoFo7XgWU+39FKy2lQSlFOZV9Xgahoy9vjuGu8P5XvOcK8C2eZlTeN+Fqy/jHwWnl4sk+sM8siDePSwNR16gtvc3IYXHejPJSwWA9eHNSYwmYyvQAOQy67t+YfSm61JoEPKcxf47gg76k7LJDW9ls3X6rcJ6d1YooXR1fHf1B0mjEWuActN3d2j95FErpfjd7Krm8k/NGYGXmO59z037zEpQINNe4F1nfrR1rqRtk7nnov6y5tqU5cz3rhYsNrquMU+zG885bFTVIrdmkLCPBb+x3IhcHnqeY9hCXrTAehR+uCi3SyWQ10fHHilsa1Bhvuzyk8TCyggQyyz2HOI/FQUqvh6ybjMvEazM9p472IuUAvK06yYa7M6iqiaJ54xgWnIJOuteUmw/O/d7Dv1CjTYowaSh1x1jNy59vPeXaLA9uroIdBBNLhb0ws01oJOwsVbZ28ihMftH2KFCU9w6uD51lnBAaFd05q4WtwLafEHJXS38xs65bacJRGE4M8wwgEgVTwgqgnjWeEg84TGxGk08NLVNW9P3f462uepF21UIXmTkewDWYq9/r9n7n71nvVjEntZn1nV6wt3hU6w/tC58nDKf9tXp1E9X54D9Yvf5+eGM+ibPCD+NVbVs+aJzznahjhcjP3LOyQw+Lcbts/PDPQDMFurzbu+LzjlXn9TY56/5Cx/HLFV196Xii845weN7NXbvt/0uaE5jscWj72+6YPNx9/7p1s9XNw7nITZun9WNqVc0f92BbX3ROQcMxurTNH3h4xjusHv+NvIPCRcUD2p/57evbljvnsZnUw+Dn3j3se4iFptS3oQBnguGVnnrqpi6siwrlVmFA6+PYXHaj/WHtJomgA/MrWxz1J11cjlDS0blay3R6RmXg+H2rmmFX7WTmhp/fD/uXlAICISumtu1rZUSOsaYCDp8gSWCxGJFkGWjt9la7hdkbtRY/wt1s1x8IF3cFzqXho4gC4kICdYlARNEiIgFXWRYhnkXj0McuezehniXXZh6eD7SdRHGBzOVTaMXEVnMMhBCUYokWlqu0Rg2cp1yuTGZJGUFswixzHcmrtvbD65GsoLaeHo8UlQQg0CoWehJSCaEeUnOlj142Fdr1pznOB7wPOB4LnNbnQ3sBILwp/igaM7SLoQXPo6nu3taShM+XNyWNQmxEEoooWi57l2xHuYA+EOVwoesfVsTWAYijO1H50NK3FHdPXep6CUA9zNPDSkehwyLcG8wq63m/yxBABcqzpKCCCHE2ijjWHXtb4c1DVUdCBUr7ZaCGBiXovbwbpX/Lz0EPmxMiWBBMB6cJi13s/9affuGE1+vlm1ZhAyMR3rDmoOVXBCwZqWWzOjDQh44PCfSb38UkZtXujJmGIx0s1xz/D+haouwkLH3bz8SzgDB2/uJgiAkSnJ9m+dcbSpoCAqGsT+vOa9g6mEiiZAQabIthoHbPZuSkIgahXPakAmmlhMZEYSuB5X5K+qE8DKKxFJrSUWp8T9w9RszwkKo2IUXwbkH5Aco0ot0zmR4n89sJ5hlYEnb1F7t/IBqS8GKVjuHgwKEarmEjSOycZPyIs3qA1nUkxta3bff4LIdhWUkyazNOW80XJEl6fqe+gduwGpkYhaxkULWM5kUo7Z8vZ7THToQbE4kRIjc8PIJqbwtR4023aHjViMDiySZG3naewc6yNTaVA8tBa8eoySum828twKpNyQhatPghPwFkO5eRgW9Vch6Xb1m9hqRhvTueQVqbVmMC+Zj3vNfrOckXMqlKA0dCFZNzEpK+RTPM4YMhJNlSt/xAvmHFoFIm53iGATZkohLHTq9E5At6xCT3oeT5BR3ExFwYkllvvK1nghZpbw6zd/NL9sCnlA52xrMmjJLjOWJvA2QbpRQgopbmh/snVlT8kgUhs3pLXQ6CSSpLMVOFAI4QZSlWIpSrBIRLPWe//87xtmXL0FgPsdphufGsvRCXk/3OX2W7r+Tnc6Mcrm6+KxtXF05ltN9OL7Tv5J96/q8Nqh82ujkfYdwa3yE6/V+7TBhTW4+TbnMW9x3o9bxGZ2+5Ag5q0/ciIqdwIqf2sc2D6z8sPIpK9c/sVqceQssiNdHl17PLR2KvMEPyud1ud7EhPrB67EZXe7ZBuBPubSuzR8q7UqlUNS0w+XTnmxcHh7d/Zj6NC9QtE4OhHOVh0ns+Y4VxIOn10OL98plRJjfaRyZe820HQp4kpgo0QpPPQymaW5M99rxe81X7bCYsUkYrs2PrAar3OQpYmHiPvdYd8TmJ2AD3DCoMKpv54e0GE79iPDl/dlRoZzH2CWdpPxj5jUUYG5+gm6QsDEAY/50/wyofhtRzmcVJdnqZbXFixEDGsyTlGvEbPMHJiAEJuZBXNjT7pRWxICN28k+4vGlUpJyC1RXHgV/qicloGrM3PwVE3EMZLnfnqUUZwSz7qCoJBr9qBfeSpn9rMwMZtVLSdnwvos238BsF/P9Hh24CHsc+2FySUKvewzHMrb33zcjn4ySwhK9iU1z8y3guxTX9d1trtQZVqNa3FCTdR3aLuQllE6Zlinzk86VmasyQpsETACEo3Zm54x90wq5E6fde/BDgKk7lrBIVqoy4YyyiRkiMDeJIADsPdzvHJZ4mDizlZ5m9kOCxezmTDbUiQBj/Jh4v37ZNNO0c5kV7ziiqq8cxtz4RU+VNsZC5OWbAjsPAOxB0trTQrpBaJMM2G73Vt8pIXPrYUDBZboHzQ4ZwvJJl5kGlCZ7t0KEkLlJwaQuDneIxTI3fUGZ4b1siWW0CQVWq8i21xWG3LUftKQPfUfMTSqmyON8K/PxI0DXBsN4PFW3zuMAouPGmVwo7YD7/UTnptWBok0q4JedD8szmdcaYZzE7a2/mK1hBDXZghOt2eXd5Jc+SoGJtpidIMxr5z6yuSpDVPSvtO2B5ZhLGNedjwUJkneZOTHNLVZn+UCaP2yfilo4hALplz5Y1/o1UBJKFtcpqy53Bsm+71KYJkvXzqSY9x+3N2B0AahV/1CT7JgKMZQsBaoMnNC705JLMPhdn006lFrhzZZuqcKEMAz+7cdJ5YsOYTiQrG8sF3KeT/536x262YbJwOilSpd5XPTyPsHVux3apXJ1ArQ3P5OK82qZDpNTINoSkLnZAgUSPqaFwS9hQMFqdnYaUsl1OEBXspC40sVieJFsNw8uMilsUmGGPUt2E2qh7mAEJFjn1J1Oak8ERE8y6W564F6nSLewEYItLhZ1jWYuyeRy7ZqNEMKzt9KOPbJDBnwoWUjc6FIWpZyAGjbaumJd7N+pCSZ32cQMTJPEDX3X9uLAwMb1q1RuQrnDCGoLLdnvBe/KmdtC4uBV+XZMfdBjCBAJnnavmmVrFvBIrjv9lScK1L7V006Wm/SY2BSG3y9+kw2+jTmYCNnNub5HgTYugwjk2uvUIZiAJ3qanzA3qUvWpMTuZP82/dluGmCaSNSSgrl0cn1BXcnchHJnI8RHpeQfzi0wEUvRDsosWmT+ejfALBKmiahdP9f2iy5nlOKaZCGxFgJitXkm2SYHBExIyxIDCS/+vMldjizHQyaI+FLbNzDvMG7nW2dSUawSAUZaCfSmizYo2eYExcFC/X2pXrSaAXYFNsR1u7h/Y8BIGCSQbDJbGxkUcFr/jd6BFBcLDKxn/fdD1+WDwykC6o1XpcwBf0WLYMNayCXd2bxKwY3SkhuFHjITw2ITsfj815VabPe7eYJMEOPWYYkjZY1d5gwku3xIG5SBRtGtmpJD9oAC/0Y7hGn0czSo3jemoYcJACe95cGXAzRmPHLeZBt+KnRInnnLlLBYa1c9Rv9ajTU31GXBSn83uNKiY2GAvMB83Do/+KMrLV/YfelG7pRGXzDPqC2Se4iVx34+wu4fNUVUxhRw+Krp54tlteoiBMCrzcuLzNnhVMaOY73JJt2ZeulwIkjtqaImFwPr1wTABQQYU2YyzIDHV8XW4NrCAICA5ycJ13Du1ym7rNpe50IyP/HTbFOPCwBj+HyjJilQeqgRhgBACFsAAuKEd8uqxShBiJa9eF3Q/3HD0NCy7JF80p1l72ocEDjdzqKiJ4inVdbXjkGwKzxDCMPJB54PFAHFfq3evtD++SdWroUoz4rySXemFjqCG2xIrOpyXtIzyje/ULpaL0Of2FXf8wQTCLsApBu2it/JK44JdqtS9nUq93dd3jMAEe53b5+u5sX77L2maTlNy2ZL58Via3V3O8obvo8tFwMYZS/oT4vf7/nyydBnsh1if0O9eZhxeIdww+vlu53r/mBS79Qno1Et7AV+2bANBoLZjiXs7uit8pj7njM3b92y50jXdPLHjjap2dxwIm5wBtywCRZMuFxwGyhQRKkgxPeuw9Fd5T7znT9ls0zLgbxTd4peeFmPazXP4FxwRgTFQCihgjDqli1iB8vO+rl4o6vf3zrqnsudK2mle0fJXBRu6rNmrZc3eqFhGMQWxJs5Tn7Ufmg1cpr6SWtq0qO8J/8VnoqiZSulyuXlfPXcWlxdnV8WSrqW+dSN6MVj1JLuEJuI8hOZd96/vH9z9tm8eIQFU8lSJ/8N5h4C//hGjP8NKgG41lq68/9/gUoghDi9xHkIpRkPuuMjeo7j3+N1HHrVgYzn/y+n1C9HJJasJfa/QaNzHXnL06P+B5Ad5S3SlDLr9NWodc7tmtSH2K9CfeIYohdZLwD4SjJPAoHXOkm3P8qbAeAsTtLtT+bNB2avTtLtjzohFBz5E3ZfQObOAFT+/7wb8x1RWhaAMT1Z3UHBCSD74STd/qjrMgCpH9vNdv8G6jrGQI7wzt3PR51WMZDJKU18SEhsMyI6p+LEAbQsAXb9ZHUHMHcoFf1jvJr907n0GbJHpwz7AbQdBuVZ5ezE3rz2XDCO9sWdT6WYpwjHp+LEARSqnHIpu4m/nEaeI3d4WrAHlf8xuDNpW2K/ktIQA66eatgHUAoxwrJd6/TfoDjDiFZPC/YAzvsESXjn5H+BH4YUWPX1VJzYH72PASJ5Jye+ELXJENjPJ6vbH/WWnKQ7DKXuc7Db6s6zCSeH8hvKkjCIFtpuJnpxNT/14v2GsrJB5HcqxCrZVd8JmsXT4v4F5aVLUXmXaqLWuO0ZLo+P7WWofyBdFPr8+UOrU88HPcIARHgasvixnbvtTRQIAgCcndld6rKCqKlHOEuxFV/wPaCxZy5cTNS71rT+/z9z58WY1krV+3DJXebhCyR8mjA7zAZmh730i/4waJy4q9u+swABhNemtW6HrUcBD9IPt06YE92VJSIqL72ndN1rDGslnewnBmbOnbUBymGDvut5xVkrqeLs/p+txh4H2wbrYXBFyfpaIVRSx1mjTnM360kRflG1cZUa3bfmXw3Qkw47PpWgM90G7lrG4yrl6iEn4WAEbXZ0kUtdgbbUw1EnT7n6jtP3DV15fB8ZszrrWQYCWLV1lwJ3xHzU5CrZ5A4Xueoi0IggrV70D47L+iucac391Dz4c8LsPgaWREQjbn2mupoh13H9oReab8pq+6ligG3zZn9QoMBlYcuiUt63q/01qy+TStFABDWJHApcNhZZyrDC/P4N+KVXukYbuBo916nr+tBtSSqRFHZbctGkpzmibU03VFZPYAPBK7plbk/N6EvM9e/eIaXe4SS21FroML+d5v4jFtcAoB5mKwrcabk1lyC+O7n6rCzRRuDumHaWzkzYkgTevx+ERUA0xCRcUbd6Hta2UPo1rywQUcZP1OafjTVcLZXggCD98JZS9ZKErQBuD/STDe2PXJawPiDYyN1FncrqhaFTBkewWgP6s/NSDVcI5aXU5l+u8JwmixsqD3+Amfm5SY8cIYQQQgghhBBCCCGEEPJ/+QmLwAdztE9BTgAAAABJRU5ErkJggg==" class="faceWinking_DPeo"><h1 class="heroTitle_qg2I">Proven Recipes for your React Native apps</h1><p class="heroSubtitle_jFu1">Starting from scratch doesn’t always make sense. That’s why we made the Ignite Cookbook for React Native – an easy way for developers to browse and share code snippets (or “recipes”) that actually work. </p></div><div class="buttons_AeoN"><a class="heroButton_GTT_" style="display:flex;flex-direction:row" href="/docs/intro"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJZSURBVHgB3VXrcdNAEN49KQweSCxVgNKBUwF2B6GCJBVAKsAdABWgVBA6sDuwO4io4PQKYpBuj109xjaRNdjwB76ZG43u+253bx8SwL8O/HUjT9NrflyBtYFF8NBChEp9UW51Nxr5kWis1d633H1riS5ZE7AmBkTh7l6enYW9DopCB6Z0PvPxKfQjIqBbRDcGS/d80Nunc05o1gWjuohMqRa1cY6YDdyy6PyFId8izTiOJcsCBeoeLS0a47gUTjSg6AKAbuqzrBNbWutNAHmWfcjTxOZJ8lBoHfSFlSV6XmvqlS76NHJWbIgmS5L5xkGaaNncZ7zPSSZnkmSV53qyo8n0tNVouYXKsmwKcmUL65Hf5G0fTsf+3DF0Lto6TQgTJAh2NKf+kvfXYvOE0+Vaaz2ptAX4Cr+BNogLy9F9fw5eV8xtWIsRgp2gww6UMhGQknZ6BQcAfT/mR9zLtR1GCLEqy7rysVxXWhX+EI2NptWrqk4lQJokoUIZLlgT4ic4HrFC+57tcOEx5KG7qR1ItU+UWvEtAvgb4HlwiIeN67WZZG5Ro3jYaie4ZCKCA8DNMpE0bxt/IpJUtYN0DQdCBuvJgEH7qRhCURTBJkrtyerj9mHQgdzElD8eeGLfyftjplaytrnHNL0csuEOkZzXALEewi7qoOPI2qna5Y5wgMR9zEOIFDUbm8J3TYBg4oMdKKXGbX7XVVXNXPdZJO/GmDfCt1zI3NLpuKoa82d+2AEXRD5SV0TmI8hqIgXO9c4hQwb2cYMOSqLQdZzXKD19DPi36ZIJ4b/CT4NmgxFOnt88AAAAAElFTkSuQmCC" alt="Chef&#x27;s Hat"><p class="buttonTitle_Je02">Let&#x27;s get cooking</p></a></div></div></header><main class="mainContainer_mA9m"><section class="features_t9lD"><div><div class="rowContainer_brmT"><div class="col col--6 padding--top--md"><div class="text--left"><p class="featureTitle_L1YZ">Spin Up Your App In Record Time</p><p class="featureDescription_sP1D">Stop reinventing the wheel on every project. Use the<!-- --> <a href="https://docs.infinite.red/ignite-cli">Ignite CLI</a> to get your app started. Then, hop over to the Ignite Cookbook for React Native to browse for things like libraries in “cookie cutter” templates that work for almost any project. It’s the fastest way to get a React Native app off the ground.</p></div></div><div class="col col--6"><div class="featureComponentContainer_HpZw"><div class="imageOneContainer_Mp6_"><img alt="Animation Image" src="/assets/images/card-buttons-dee3c5918f4503bc7d7f1ece21547d3a.png" class="cardButtonsInitial_qamQ"><img alt="Animation Image" src="/assets/images/card-controls-007dfe08e844b5026f0bec54a9fc4886.png" class="cardControlsInitial_LoMr"><img alt="Animation Image" src="/assets/images/card-text-styles-9d5d6f53953ac158b065438e4916827d.png" class="cardTextStylesInitial_npHl"><img alt="Animation Image" src="/assets/images/screen-components-408a18296a6b8f4bf449c5c9261b63df.png" class="screenComponentsInitial_Q7jn"><img alt="Animation Image" src="/assets/images/screen-menu-9504d2fa4a8ee368703df0c7015ab36f.png" class="screenMenuInitial_x0nA"><img alt="Animation Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAABqCAYAAABu3bmhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAACGpSURBVHgB7V0JnFxFmf+qXt939xw9RwgBAwECIRBOAZHlWhAQCJccogFFDvFAEETWCLLgLovGqJDlVKMGYgQkKiDRIDchMYjhSiCTTDJX9/R993tV+6+eCZtrZnomPZNOpv+/35vueV3vqvrqu+t7RDXUUEMNNdRQQw27HhjtHmAzZswwda/udpu54c6THpBEbiaZTUipkclY7yJqP+TEE9MLFy4UaC+phhFhVyYYNtE70Zen9CEa106RUh6JfRPxQFYpyYYn80uSBiNmwn4D/3eDTNaAUt5mGnuDCdMLzXs3dy5fvrxINZSNXY5gJk+ebM2FU0cbTFxAUswg4pPBMHx4EAPE0IUmb2DjxFiSkUxKAnkQeaXiKpImY98UyciM7xm0W4XdT5pM9Hh7ONxJNc4zJHYZgoHIMXd+2P4ZyeRVGNbjwFEsjLEInuAtxvhCKhovCqcp0traGgPX0Gk7g38+na+93PKyX6b144nEiSCqc9HMj/OEpGQPExUe6ozF1lENA2JXIBjW7Grej5n0GyRjnyEp68E13sGdzzMZ8i+TE1PXLqWlOg0fbEr9FFfcCF/KiF/MJB0JCluLz/+qtzUv+Gf3P9NUwzbYGQTDJ02aZMnlwu5ikeoNQ9g0YTKDY5gw0w1pEinGrDEhRMpisehaXlwALfXr0EXeBjf4JGTNI2ZyzG2LtcWoQphKZIl4A2cybvox7iOAXSuKJnllOBx+n2rYAmNCMLNBJHNdrikGp5mc0fFQSifhwm5wDAcGKIt9buzT0BTqBUUw0y0gEN3ELQIE0sikNAR0jaIozjE7HG91d3cr/aPi+karu7VOmAo3gMtcLZVOxNhtXdGeefhJUA0ljDbB8IDLtb/gchYG/lIMgpq9EB9sI8Z7BcTLGoiDD4nLFAgGDIZ0EJCZkXa4hZsvB/m4SVGO1AsCh6GJQUK+LTl7R2Pyz26f6a9tbbEEVXZAedBff4Em2A+gJRc5Z7+XdvOdHR0dGaph9AjmfCJtidc1E0RyDy5SD4LI4nKLpZAP+VKpN9qI8rQdLtESaNkD43QPfjgd/6a4pNOSIp82MXGwFHQI7hiWER0J4rLi6Ha0+wv2P+5KpZZtIHWNyqDR3zjNJOVCsLw9cP83dURDP6OaFTVqBMPqfO7LhZA347sHxPIyafLOWCz9TxqEG0z0ev06s9yLUfkUuE9YGqZZXamuVVs10zwez96MyU9pJC/EuY9mijeRfBXH/d5io0Xd3akQVWBwJ3gaJkOM/gmn2hNOwM93xEOPUQ2VRyDgmur3uP7u97rSPo/7XjhKrGUcxlr8DT/D1tHsr3+vtaFhejnH1LvdU/xe90243gpseb/b9Z7f67zL5/NNIuWP2UEEPcEjW3yN3c2++kirJ3gU1VBxcBDKz/0ed5vf4/xDMBh0lnNQk6/++CZ/4yvN/sbOYKDhQho+7AGIQFx3MQgnBCJ6G/dxa319fQvtGOGwVl/DF5p9DUkQzeuw8Gw0jqFRhdHk8+0ppPENqLBm0tiN4XDkw6GOaQ0EJpDkc6HfqsFd2BUN/ZiGL1L0bL7wbi5fWOiyW16DwtyIsT5bGsUzrRZbwOlyrctms0kaAZK5zCq3zbkP6O5EI1f0pHLpZ2mcYodZ9tYoCtEIvQKWjvyoJZpcVsYhXBjatfiEMitXNlib/oN2zOophmOppZFE8kpYZp+DF3gD53QL6cVn/R7PJSPkEEVmmG/A50boVtc0eRpOp3GKihMMLF/4V3geM7wT2mphqObN3npYPvKk0qGc3V9BD6vRm0i8EYgnL+GGnMVIfASCnJOIhH/ohXJNw0RHsiOM2NXdMBMMRKcupt0n0j8sVJxghIrxEDXAh5Eoo7kycL4CX8xB6P6XHAHP36nCWAPzvTeV+n2RtMtBmMoCO0Mj43cBr/cUGubza3HbfNznCxCWx0A5P4bGISpPMMzcjUEpwH9xIP61DNY26PVOQrsD0P4tmK3z1qxZk6dRQiKRiETjqf+EqLwGfhsQtHgs4PF8TUW/yz3HBtqQhQG/EOfw4UGvoXGIihOMU4j1nGSIYVBg8u5Fg17ceirc8HthAKwOrv+VRh8ykkg/y8wWBDHFS5KJO3t7uh4KBAKeck+QNgpPgsgxKcT0CRMm2GmcoeIE05FMRiFoXgPr9iIQdOxA7aZOnWpBSOBsdL4HbResiUTKEWEVQSQSabfY0xdBIs6BSDyMjOKjAWWplYF4PB4F3f0Vz7inSOfOoXGGyiu9UDY1XczH53roMWe0ut1122uUbusJgLsgUAyDWspXaYzR3U3paDz5XSnZN6B3TZVG4Wm3271fOccipvU0PpJS8ONpnGE0CIZC6fQ7mL0fgSCOyjLx+e21yViNvWB+WxErerNo1d6kyoGff/75yr9UzrMZ0UTiGWnIa2DV+UxczkPYYZ+hDhKFzApwxX9An5k83sTSqBAMUACx3AeC6JHEr0fEeurWDUxCOwxXz0MkdXV3d++oKa2i4gcEfO4bAh73w88/9+e/wOP7lM/jus3vd06jwU1gGU+nlwgmvgzWMRVBzp/5/f6Jg12sJ50OwR8TUjnD3ny+4s7PasaoPWy2UOiw2SxBeG+PYZz2cro9z2QymU1+GeayO+Cs44fBRfenVD4zYoW3oaHBZTVr14Mk7sOAK3+O8hYfhG1fUMm/gXOc77BaWvx19W8mk8kBUxTy+eJ6p9WSloxdBsazh9dbeDadpoESxCU8vxBH7OBcUTyTLGTDNE4wWhxGQRiSzcXn6ypVQRTy36d+AoVL1wQO5MMs7dU0vp5GCMSJ3Houe48U8kb8q3QlN7ZW6nuuTVylHtf/ajaVfKixsTE4yOn03kRqHu7p17i3c4tZz800WP+ULCU5QZq1PWkcYTQJhjCje+Ge/wFm/nvo3OMRFLxq0zWhOKqB9UJsddDIwEU++yXi7FKm4lZ9Ph9O238m7JNnFPPZOyYRDRYaKJis9jugCP8N7Wf6/e5PDtQQRJXCs+lcGnvTOMKoEoyCcs/D5/G90j+MblER5eV931UaphUu+xHFjaCcfgLi42pwBItaZlLGIRz+nkuTXuexgzUKhUJdEEk/BYE7mZDfH8jKw02ncF1NQH2icYRRJxhARpOZxYYuvtL3H80Bp/kSPg0MiklyPhLvLjeTuBC+EDVYZethaoEbBlgFOgeNA0UTmWfAQn6Lr0dniWZur41JMOg3zAFOM2b+o2rAWBBMCYlMZhkTTOW5xDHQP5BSTASHKQpDDHvlIawYt8rKY1IqYhvWM+CYTyL4OBRHAuvgDwtJ7XAuXjh58rYJYEWSflh4RTxDxVYv7AoYM4JRiCSTrwguL8KgdUkmvYrDgLkPW2k0FQp28IgmEI15mIeqJJt6ZhhDZvOFk8kP0TnP4Ou+PT2ebcxsTaP9EGl9R5AcVwvfxpRgFGKxtAo0ngtiUbm6Gmbx9Sqlczj3olss9VBMlcPMTcODSspiXGOfKKMtRKZ4Bsp5zszp6K1+g3OaGuEu2EdwPmQKRz/YbBynVnC2tLQ4lDtAbSqOpZx/Kgg6e/bsza27qoSJdgJ6k8n3mvx18JuwH2EMDyaDPeF3Ox+qCzb/uJyItabrRYOkA107EoJXRFOOkoyYheVdJnQrFNwDNt+vFuLlYykfiDYpzXLtIKdgTU1N9blcan9usMN+wuREufr9vVScDcc6GZM23I0pkyimMvFYYs6993QFPK4wuFYbJ+1dqWnvgLi6Vq1aVaQqWbGwUwhGAf30EmOiDWM+ESZHHfSaO6I93cf6/a5botHUKhqkg0xSRgwuuzEeKso8HLFU4jCIpK8pq7GUGuv74t18v57W98BprBj4tRaLZXtKL/P5fHuSKJ6dz6QuB1Xvh8i46FvcQHEQywZlC+C8Br7jPCILTqbM/cPwuxN6UQD7lAEZ6mhvC8Fj/SJMvFcEM70xffr0DUuXjmhpcEWw0wjG7rWvzscz6ziivmYy35FnxYMQBLwU3OZ4n8f9ABfyoUgq9R5tJ12zK5WKwvWvKi/sNczLot8pr3P+VlmNpZzSR5RS6Tx8070IvXg4FN5PYMfcDRs2bLEWSomcDz9472Jm6N8Cae5LpcV59BzO85wUbKXJZvsQSncUnHSTsl8iYjgztW6Px50xmxxM11sNaewHP89khFamcZKn4xyXMakX3lqx/HVw45c5017wNza+NZo5RNvDTiOYtra2fJO//i2IpeMYMzXF4pFr6nyuP8Jrexd+/rrkdDHY8wPMbJ3X29urnHubcxwMgliCGXt6//5y5H4f4TH2rwnx+MZ4GQdglk/E2aErydBm14DOLs5VFp7OafnmzdUa7Y/WvD8L93W7ukfoar9Bu/vhi1r28fWTSeXr2fpKcrn6PZGI4LvawIHo9U0/Iopep0l5ENPYqeBK/45nOBn6VTIS6noRMbQFHpNpSVssNibW2k4NnHkdthQM2AvAqYMN9uCvOmLdK71my2MQN72Y0Ieg40+Sun6Z3W41ebzmNel0Uc3mEuF4fJZOofPDMYzKY1yuWILaIL63vlAcMjoO090LkXAbzq/M/4XZfOFvav8ET8M+2Id4E8XtXucPME6bxAPXva4rMaA34759kstvRBOp/8zm8+20g/pHoVDI5gqFtly+sATbL2xmy1I8SgoUfBz43qy8lKdZrRar1WYP5/P5OI2ivrNTCaYuGAzrueLhePCjdFZ8N5lLv50qFDK5fPFll2ZaKDT4WomOUAFModNMBBEbbA5LuKmpJbFxYyjusJl7oANd0P8cgynAypLBZdgbFkf6pkGCipvA7CbTF3GE8htJZrLcmM1mS1zG4XBehOE4FET+2/aujlc2HQAxozIHb5FqqQxjD8TiqXtJVb6qPHQQzzpsfw1YrAvgCNqI29ofRPo5iNAzbRary7EDS2qGwk4lGDU7PXa7poKT2IKpXPqXm37LFItJzKalIJz5SvNAh0zCAJ6N4ftiPpve32a1OKEEruRC/wAhgqOYihFJyhPbgtsoMWDgN3As9pRd0he6IoVBpZHKpelobz+TgUPgqm7Inx9G4gmVMCWD3uBe0CceJLXe2mD/nSyk2zcdh5D5ZSCWU0BIvU7Jv5zI50d98X5ScZ584U1sv7E7rCvx/Ptg2lwmhTET9xO2Od2KcCqq4+z0XA7MhzZNMsVFpnsdzpeT2fSGzX6WinAgDl5wuk2LYWesA+E0YfCPAxGcgxn9WVCSCjq+zlS0mlEAA5ZnfXqAsjpAMDB9iX5iTqRu6y4UBpPzHGJoj49Wr74DcutWtQoXFsziaDI1G78VlY9kxevLvovrHY9BWdAZLy3OL6FURi2dUgSzD679WHci+QyNLYxcrvABCOd3FqvtL5xJKNv8Ohhhn7baLO35fEH1aUUqXFSFk6jVW3eiwfiTuJmVgVjjiato1WDOMFudxzNNMHkOZv9ZeIJJMH+xm+egjqYxywql2jNEz2Nw3zJJ9sTEfRJty5d/LB4+VpIx0OZYrCMgCqZpUCLPAqc6GRzEjnCohWvybofLf/8mK0gt5YUSuwgEGRO6dlZXquudTTekFsclIr334z4Og6J8I2JRf6adiECAPEJ3qhIrV+GZ6hDvms8t1nvC4fBIMwM+RrV4FXmLv/4uKfnX4CSZ2xEN30TlKW5m6A4TNDKOADf4DAa9GRxofxypCMZgfedQUeUwiCfRT0wcXuYCRJsTpnEz67MUVbt6HNsjhXiQTJYF0Wj0Y2V1cmCyJyPiT6LzVaXOb3b2FRn6GMpjq+ez88FhDsTZZ8ViqYqvrxoJVL6QUcwi6MuvBTdeLXX5i733Sz+GyTPiyqFV44ZucjU1kMl4FTc0Cbd1fmes5wkaHlgwGHQU0+lJTKMg/PrHcglrhUnlDAM9UQvrU4wVEXT3xbEUEUHMcfkmk7zNLuWyjclkhDYjVuW2N9KFB9D+YMzU1wKtjdfC87o1B7TCL/S/+DyDc/ml3ljq91Q94HUe+2GSaXfieQ/Dg93n9dfdDrdGjnZ1tAaCR7X4GjY0+xoSTb6mSmTkfxy7UWay8me4XK5GVYdGEUL/OusBJ82nP/1pU0ug8Vu4p1izt+FZzNgpAzRl8BndgSv0YPtvqsJ4kFoe7Pe45mJLgLifDgTse9DugAn+4MXN/oZ0i68x1FTXdDjtPLAWb8O3cS/vtvgb3sHncYM19rvdx2Ig1mD708QRrN0eI5hVojxCDd0Br2tJf9B3WKi6jPcEfDEum7NTpUhimp7mtNvXpHOZ1TSGUFyJZ4tfA/u+AnqLF510bUc0tGSwY+xOJ8x1QxH45IKkD+An+YCqDwIewNdsZr6MMfivBF1oc1jfgoU14rzqagGDR/U0zOpOcJp8q7fxK6ooM40BWtwt9RBBjyqx2OJvfGUPT+OpZR7KvF7XTIim9/1el9K/xjx1ZDjwOhwzcJ8bsK3zeh2Hlntc1a6pSeQza7w25xJYzKdhpl+w3r7uUPz/HrzBFalftzWUwy6yses8WDn349+TYT4vEcz4WkcsXPaqTPjmu+HDAZdhJ8B9vxpc5l0aXXDoJpPcdvN0m816ApyZRzltdp/Vbhe5XE5F0Qfsp3yx2Gm1mV6AYXA2vOWfc1ptryKMsZF2dWC2X4/ZLrEJVWeuyRecq4oVUoVmsHLITairOxJ6yoImX0MR14m3eBtvnEEzhp3NpwCleioU37VQLpcHAoFRUyx9AK7zHXCIdnC1VbheDpuBTWAL17mdPyxnvTiMgWl+t6sd28pSSsYQqPqiOMqaEZn8RbrB2hEhuAX+BFWYUC34f0EafL4tYPvbCExEhvP6YS6fTkJ+Dib3/jCZmxmnP+iCfacn3rNFmTWl06xdvXqG1LR34Z8ZKtCtBTzOr+L+7sT0fqNOs3y20oUGlMXDpfFTXOMsOAxs4IaF0htc+sZz05jisdjreK4vqoS1wc4X8DpPgQ9MJb2/7NdMl300yDNW/TLPRCKhJ7OZlel8+qO9va5FWTJeIsm96JXzwP4vMrKFi11292Sv1eHxOazMFQiIiRMn6qFQqOTRhajh3kTC5rQ0280mOthld53ssTu/IwsG/BIILpZCCfJ9dO+NcPffjetEt74HxPHg5ZWL0G5vhCkW0+AiUZqt9g/gnj8Sg3VQxtCduULxRapQIFK5B7jUH8ajndafcagIRXHDzYmF+r+3Ig53mNvrW5wGBjpnNl9c67BbVN3jc3OkhxD8/QcN8IxVzWFa/MGfSCnUOqKvd8ZCm3tPTa2+xqkID5zB1KAjhoOZpoKYmFQUxkB1YXqpYCTCBaoANHPi+T340QEHnOrknHoRBVznT6jX33TEQitpECKoczpPkib+BGZxe0siOb2cUmw+n/NgEuwezH54kPniSCyhVn7uaKYcg0l8HTjt3f2l9ssphqQi/nNjiZSq0Tcg0apqo6KY/wP6u0EadFYsnd5uklk1EwxTpU7x6cSA/7Yz3nPxQO1U5U7GTMegEyejLUL9ZEYnTWN9GXaqk3rQay+BUmKSiw0kLS9eFbuqfTbNLisg53c7ziSuzQchvh9JJFWpsrJc6/VexwxB/FH1LjCS4j8iifR9VAaxDYQJHk8gJcVCBq6BCVJuESQ1ESJFQcelUqnBlHDm87nOYYI9iO9/jCaSs2g7z7nTMu7KgJLBl+LjSiGNHw3WrisWa8Nn21b7Sy+76P++DWHMVq/MKBcMvEJKC2JF2y13PxDC8cxyBEqvECQeAZe5E8roFM1i+zaCgCPKVckQHcE57auk3jDMRMUU/GYmz8TnYAQjzebUc8W8603E1I5tcDgODGUy/9i6UbX6ChgGlHfEepS4OKMr0VtO+datoTiLoAqE9UG46m1viltZaJhcWS0VNhH/LLifytibJQq5BxqdziANn7uDwQlYh8yGqPhwn0mCK51MQ2QmhkKUwtyYg+Ym3cy3W1q2KgmmOVD//Xm+n6+B0+5sqgKodzmRqjjFZNkFFDdHKJFYQ5rpUhDNr0B45+gaWwRn2Yz+dUjlAgTD9gKtOEorFoYJHDt5WjBoGaqdm5lfwYXeUW+9UzG4rX+vTg4j+LT+FQHXURWAca4sEReVloeMDMocjyVT1yHUMBey1s4l/9Wce++5psXtri/zFEqhV+upSsk/NDxoaqnM+ny+YaiG6+PxBO5xLa41FYZV89a/VyXBMCN7JW76Wm6WV1MVQAqm/DxKf9nRoGJ++iHJmyFP7upPtbg3Q/J3PpfrUzS0i0PgmB70jkr9HI44U+IL1plMOJ1GObqTap8ovauKit6tf6w6ginl1CaT4a5oz883hEJjGnQcCBoT6q20BdZnku8Qli4lPR5PLRKGvECtVYJidCQchk8i2n1XMBhspIGJQaLt67Lv9+GY5+qewWFY28aNyXIciFZc4BO4nJ2LUjWvbU5WNdjDHzzwpedf+Gezv/HPU2nqkPJ2rGBoPIHBckIPqNRL0qXyc9QlkjMxkKr8SC80lG8Ws5mXAl73FQO9AaYo2L9IebmHp8iXfC+cpFrhMKQ7YKLXq9ZhwRLDPGHbrkGvKoLRhZwCWXuAWqwV8YU+Q9UCQ3jhx0mo8h5UQaiy9pFk8hFZ0FVtvnmqIgWe/fZCNv18wOs6X6V+0mYcB17vtTDPl8DPJEC25XMZKbtZyR80NFJSToFyXodZES1Kvk1uclURDJxzi+DuvwTz+KudMKmpSoBBasJss8B6WEeVX2skY7ncumgidZ0u2aHQ3ebjigdg0ObrhdwfVSXQ/peFKR3H0MyW28HplpWpxRjU9z6HB8PJ5JD5OaqSBDzhiuPVgTD+EUwmtyllUjWxJJWe6bU5AxujoeeT+cwbVD1gdov5aMy4A9GJL25aATkayOfzEbW60e6wPI3LpqFtHwPTCDEp43KHzXKg3WILCcY6wPFWYaqrd1+qcmrbtZpATznWF6SdB2IcMiyhlspkk7Evg3tdLJWIlOyGjkLho+2cd+dDJS1JrdiFr0wTNGVDIlRWdYUxAvN7nT9kkp2Jzv+fSDz5II0NOBx8DQWNXQBquFYtnlM74RN6X+Xq4H7WgRt9AYO7L3baVcS67/dSfMkAV+nkUtwaTqQfp8F1F4Y4UpNRyN2G72oVaUESvzmWSPyKtqOvVUVooGAt5C0GW4SHPUJ3aPGqqxoneRP0l1ZYSaOy/HQAiJ50uhufc71e73wuxLEgCijJ8iSIJJU+qnopriQaZn0aOlYSnz60eRXE9Soz6NfhZHqgtAYGp5w9l0jsBd50HojlFOzaD4p3Bv6hW+Gd/jXtItFqdT+jtpB8hNCggC6Q0C+gw1wKJXXM34uwGXggYG+FJnOUgKiC5XNKf/naJAjJid7LQpT8C3pgAsGDD0HgvaJkgWkwyUVOlS5B5zaiLRxy7FB0tSqTr4KYyrfzW02yOUPpOjudwzT7Gr+JB50FFntrR6z7Kao+mDAoKj3CTWbupZ0LEYlk1QI7tS0MqMF2uw9SYglm/3R8Hoz7hJXD1BtiTofI0pl6cTwTKvVDrc7KlnRgiCj804tPVYF9Ndo/G00mX6My/DtVIJLk2arGP9jhl/BP1RFMUNVglNKFbrYyXS3qrx5ElFhKJl/G15f7d/FgkOyG4W4tZsUeJs5dCLO7heAWEE0W4iYHIsInfZSTMpZKDf/93tsQzGxcdHbfScZENHBuuVgahVMFaUuoCqG53UqhdEDZLAquhai6IdRrfSChlFgZlWUuW+gwKuvKrDOVgqgzZj6vI9ox2utVqlFn2QIqkVrqhYX46jXbHCf09PR00zjGFva7qcBULbdDsB0uRPFIGkU0+RvubvY1rGj2NQ+Zqb4zAbHPSxXLiTpEKlXVa43GAlt0QFci9Cxn7Gp00LfqLDSqJStgcSin0zSN6cNerjmWkNLKWek93KxoWK2jXiSohgGgFro39bm8qxoBt/tov8cV8Xvcypyu5pTWMcEWHaDEgyTj85IVn+iORv9FFUYpgyuj3wTL7oOlS5f+hrbNw606wCBFDImpBCS1VqciVZx2ZWwpk7l+JZw9t2tkuotGASxtICYjvyel+OVOrsxQNmAdmVWOK2M0opWQuxu24DBFLu8zk9Zu0ex/IKq8Bcnc5lcolXtSrWhw+V3vV5dXY/tggjuYUntliWBUsHbcc5lRxyTfJF+Tr/Hzk4fxQvFqgdflmun3ujLYVBBv3HOZbczE1vr6fWHuLmwMNB5NFUKepb8NUfeLtDA9SrsY4OF14S9c6Uxxl51W479asA3BSIOuwMd5JiErpmNAD3gWHwkw9l2unAQCeSpdUut/mVdVOxnHAtuYiUUT+5Em5TOd4fCIE4VU7bhCPP0oCOTpzmj4112x8FKij5dI7EoAY5RuuKNV8K6s1xPs7tiGw6iXZHb1E0uTr+GLEE9/b/U1HkzDQC6SPgFK4oUItT9K/5/VtyvOTsmIFxGwUyVcd/2qkxXAYI4oNdDfxbY38VIW+aCvjFFl1U1MXCKZ+ZeIQT3b7Gu8V5IYtArSLgBIIsPOJFd9UeMwNDjBGBrXbjYMfZLZ43p6EjPvlxfFeyUX3+vq7V02wd84TSdxCVlN93R1dYU0Lu8Qki6BEqRc/t/ojPXcQLsBGMLpUukwo/OiiV0Og7q6N0a6Fpa+xMPU4m84CbziNBL8T9izTEhxO+Irn5U5UmmAjzAhnwT/PlqQWEu7D5gg5lKKjKjyWjrVCNbsr79k4sSJpeWiwUDDhS2+hjXBQPCoTQ1mV3nlyBFAQxxpPraCz+eeRTXsMKqRQLgqWNy/lmdH78+E4OMjIJhYnc99OdWwwx1adW7yOru9WRbpf5nUn/K63Vfsrd6stgPiBBaSA6I4Ixir9my7McFulxDUm812Mo0/DrXDz5n8adQoLvZ7nBcFRhCWmODxeFTxKcZZuxBsTF/GWa3YHTPIRCSWmKNLfgpTy04Zmw7l/GEyCotUcUMaxmrPjMmkS/XO6r4ChLuTMj9i7LYph8lk8r1IPHk1rLaZgtErGPRjhYk/5ve55jQ2lkqGDQkhhJ/1pR23WCx6LduOdmOC6UchHk8/x7XUOeA012PgN8BOvqKQ43+HInttS8vg1Z+4rrvgfPTAXaCbc3zcBx4Vqr6wcyWQzVI+my+scLlNTwmDqTVGqvbvGUaRzrCbLb0ur3ddJpPZphyq1eGYQFL8G5Osq8C1Bfl8ftyHB8ZVFnw4nOmMJlLXS6Z9CoaTSnLfW3I2z8jn/hbwui7cupAPRJIZxNUIqWSKx+MpqmF8EUw/RCwWWxlNJGdKwU5ljFYgqn4QgqU/K+Yyj/t8pXpzpUQpEzN8cPFa+63yWmiAau5uBe7zOadxyW4F0ah3I2nolWWCtG8R6X5OfBFM9DXgTEdQLYGqRjCbQavzOk9A7Og7yqJSL0eXxNahh/aHsrwiGk8pk3zcc5lxv5JvMxi98fTzJov9LOgt10JMwVGn3kgrlad33K9H2oRxYSUNB8paUhaVxWpfjNkUgOOuBb6YNbl8YQHVUjRrGAImv9M5bTTfrFZDDTXUUEMNNdRQQw01VBn+DyYKysJkQ9yBAAAAAElFTkSuQmCC" class="monocleInitial__PQ1"></div></div></div></div><div class="rowContainer_brmT"><div class="col col--6 padding--top--md"><div class="text--left"><p class="featureTitle_L1YZ">Find Quality Code When You Need It</p><p class="featureDescription_sP1D">The popular forum sites are great for finding code until you realize it’s based on an old version of React Native. Ignite Cookbook is a place for recipes that work as of the time they’re published – meaning, it worked when it was posted. And if it ever goes out of date, we’ll make sure the community knows on what version it was last working.</p></div></div><div class="col col--6"><div class="featureComponentContainer_HpZw"><div class="imageTwoContainer_jCzF"><div class="codeSnippet_HC3N"><div class="scrollBar_fOVW"></div><pre style="opacity:0;transform:translateY(50px)">   npx ignite-cli@latest new PowerSyncIgnite --remove-demo --workflow=cng --yes
 
 npx expo install \
-  @journeyapps/powersync-sdk-react-native \
+  @powersync/react-native \
   @journeyapps/react-native-quick-sqlite 
 
 npx expo install \
@@ -522,7 +522,7 @@
   IndexedColumn,
   Schema,
   Table
-} from &#x27;@journeyapps/powersync-sdk-react-native&#x27;
+} from &#x27;@powersync/react-native&#x27;
 
 export const TODO_TABLE = &#x27;todos&#x27;
 export const LIST_TABLE = &#x27;lists&#x27;
@@ -605,7 +605,7 @@
   AbstractPowerSyncDatabase,
   CrudEntry, PowerSyncBackendConnector,
   UpdateType, PowerSyncCredentials
-} from &quot;@journeyapps/powersync-sdk-react-native&quot;
+} from &quot;@powersync/react-native&quot;
 import AsyncStorage from &#x27;@react-native-async-storage/async-storage&#x27;
 import { createClient } from &quot;@supabase/supabase-js&quot;
 import Config from &quot;../../config&quot;
@@ -716,7 +716,7 @@
   AbstractPowerSyncDatabase,
   PowerSyncContext,
   RNQSPowerSyncDatabaseOpenFactory,
-} from &quot;@journeyapps/powersync-sdk-react-native&quot;
+} from &quot;@powersync/react-native&quot;
 import { supabase, supabaseConnector } from &quot;./supabase&quot; // Adjust the path as needed
 import { AppSchema } from &quot;./schema&quot; // Adjust the path as needed
 
@@ -863,7 +863,7 @@
 npx expo add expo-crypto
 
 // app/services/database/use-lists.ts
-import { usePowerSyncWatchedQuery } from &quot;@journeyapps/powersync-sdk-react-native&quot;
+import { usePowerSyncWatchedQuery } from &quot;@powersync/react-native&quot;
 import { useAuth } from &quot;app/services/database/use-auth&quot;
 import { useCallback } from &quot;react&quot;
 import { useDatabase } from &quot;app/services/database/database&quot;
@@ -1245,7 +1245,7 @@
 
 // app/services/database/use-list.ts
 
-import { usePowerSyncQuery, usePowerSyncWatchedQuery } from &quot;@journeyapps/powersync-sdk-react-native&quot;
+import { usePowerSyncQuery, usePowerSyncWatchedQuery } from &quot;@powersync/react-native&quot;
 import { useDatabase } from &quot;app/services/database/database&quot;
 import { LIST_TABLE, ListRecord, TODO_TABLE, TodoRecord } from &quot;app/services/database/schema&quot;
 import { useAuth } from &quot;app/services/database/use-auth&quot;
@@ -1505,6 +1505,6 @@
 }
 
 
-</pre></div><div class="timeStamp_Nl4O"><div class="timeStampText_VmFw">updated<span> <!-- -->7 days ago</span><span></span></div></div><img alt="Animation Image" class="faceLookingDown_tKzt" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARIAAADyCAMAAAC22ronAAABLFBMVEUAAAAZEBUZEBQZEBUdFhcZEBUZEBUZEBUbExYZEBUZEBUZExYZEBYaFhYRDgwRDgwXEREZExUZEBUZEBUZEBURDgwZEBUZEBUXDxIRDgwXEBMYEBUZEBUYEBUZEBURDgwYEBMYEBQZEBUZEBUZEBUZEBUWDxIYEBMYEBQYEBQaERgZEBUXEBMZEBUXDxMXEBMXDxMWEBIRDgwZEBUYEBQXEBMWDxIZEBUVDxEYEBQXDxMRDgwZEBURDgwXEBIZEBUXEBMZDxURDgwZEBUXDxIWDxIXEBMXEBMRDgwWDxIZEBUXDxMZEBUXDxMXDxQWEBIYDxMRDgwRDgwRDgwRDgwRDgwWDxIRDgwRDgwRDQwRDgwRDgwRDgwRDgwRDgsRDgwRDgwRDgwQDgwZEBVxw16zAAAAY3RSTlMA/Pr0Bu/r8Q739gj5Cv37GRPk6MXxuNtA+Dw14d7Y9mMdvK7m1TAmFlIQzSPARCBtS+qzj1dOqX5yXuGV5kjRmfjuyYpbZzn0LaGGpZx7dyrDyPXbzIK2oNa90pOq0N3YrqWk2s0IAAAUt0lEQVR42uycaW/iRhjH/cwwM7ZjVLBdG4Htgo3DYUxA3JRyFEIaIId6pFKrSpXm+3+Hhu62TbZh12yQgrP5KbLygst/P/eMLbzxxhtvvPHGG2+88cYbb7zxRpxJiOVsp5S7rZfTYkL4okmWa6XuebPbzQ91dR5MRqvWKF85S3+ZsiRK9Xy3HRpXMh0xWeKIA8D2IGv6ppFLCl8U4m2msx4FDHF5hTiYjkkZRlwCDjIHjGZ0RbxKTvhCOEkXmuvQL8ozDYNEixNT76zW683KoUVJcyUECIAA0fx2pix8CTQ384CCBXMkO94036xVkwkhca/UWWZ8fh9U1nqoYIwwBOZEG2VPhNdNarzomRg4Dmy9ta6knw4x6dzC8CRF4YAkmk8JrxfxdBhaGHNgc/28fit+VLtc3sOUgiL7g1cbUcTT6ZWOgEPLb5TKEVJseujJ6oxIXu9MeI0k8z7mXEJ+OIpecZQHjqZgol+nhVdG4mS89ChFqGgMc2eJfSwrr0tySzHyryzGioW8Z7gaC9uV9N5q5rWQAulfCq+IamZJAjyXnGzm5HMcbsAkmRQXovBaqGbbBtEJNvrlz+1ZpjJg4r2WCJs4HZnMkJCXPxU+my4DoPorScS1G3dGZDVoPu8StzBh88Vr6AHFjKtiS/YHJeF5jCgG2o6/JOJtw7Mloo6ywnO5oESiXuz7v1RjgpU53mSF53MZEAdaNSHWnOTaGpKdSf4gVWfBJYh48S5gy/lARthcF4SDkN7IxO7F2nEKGw0h5DcOVYSXfIlavRjXaifNHiFQvEsdbJycs03m3sV3Op24s2cSKzYOmDM7JkLqWogryYypgGo0hQOysBANMkJMOXUd6tj5w5ZVAUKsFdceJzeXMTOaJ4eVmc0scxPT4jWvF2eKlznwuKc/A+oOhTiSGLdIz2qVIi8BV8uFCIu/OUsBux1Lv0meWw6e30Sru8VUfX039bz2oFMSP57T+zKx7WEcU3Bi7CCE29VIr02vdct0OAeMtbBR+tj5FkJZVuYlIX4kBsSg6lSM1BIOLOD/gPGkuCzv/tzeHBR5GcNptNjVYKaOItnIWUvlDzAxqNfZXYZSUXGLuXEs5isTALwqR2rieog/ABwOkjYXd0htyBgHdSF+ZC0ZpGi5proB/gGIyzTMPanIEGugrqpC7EjdMaT0LiM1hXeUfwhwCZHGU4IOVYLk4EKIHemRqynOZTQPI/wJAMB5YpZQCPBMoo34Fa6Ja+qheTPa5KDHd+D3Uv+rdDwFKfoghm6T04GYw4h9vvS3ozwBVfsfWIN4jQHN2jGcuYptTZMijgHFHn8gyaP/gLZLjw3quqgB6mWF2FFtYOZ5qYhNrbrLSDgg9zbx0B2HFALqnArxI+eoTI3agnTJu6T7BADBMvlAkY5KEZpn4tjbXFFEelFzQvuBu8DjPMxBHxQe2IjJZ8qkE0dFsoatmpGHgOEDLTB6LAmC1n95fEkxyH4lfun3noZP6TIdNe7M+T0g8y0Kfi/Ne4kU69+hiFhRFUBhPpaKFPKyZGWiL8g89BYF8S3Sv54zv31f+i2ogop6N5bre8lGkTC3HFkS52EQAXinzPYgb4Nu+C69iH1VBhjF02uEs2AS9k6j25TxYb93D4PtEXMO78YmFy2YcbQ5F+LJ2Olp04IQmf7DkMr4FsDwj+mMCoKQyHgYZnhTEWLKQFWsOyE6xow/QEPvNNkeADgflYVyI5AQwfHdmZYcWDAaC9Gp0Md+8wgpL2SvNZCV4iCWgfV95arxVm6vBW/+NIAkpnXzOkOMxTTVvCNjKoq+j40nn5gNINgeZGDGRpM4WK2LGM6e/6Wi2WRU2KvYVTkHvhXhcSZWZ4gWJc7AH8XYRO7JWFgy9oqE6bbGHpkIgr/dRuUAgJDUr8dxGP8olhSxu19yKDtF9M5OgN8zQ1tF3unC1eAqtpnmH7JFhvU9Jxr1iacgwLL7twqyjAA4J1tdsB7LxvcxdQcr9ljYC7FiY4JkvBUEF4uGgwG24VWeL2NvIvdc2hiHZ/smiJFfpJoEwAFQ4DO+RWaj0zgnmv/wkO709w2I6Wa4dR38PgFvwWHl6MJqQizVL0qpy1Jyr5/WUQlz6ntHgLTnM/RfS0zdzhHd5JmuVS86p5XMuHHtTFxvs55O88NaKqout65KTb0m7Iu4vJlYEtraCbP0wbFYSDlb6d60nIE58+YyAvR3MgRAQAJvmi1E8+y6gZnVLu/fHeXa2ygCxHbTyWPIM4Vabthf6ZTN5gGAJpkywQgQAvj7D0NvElYuo1y71IYWNWPPy5xIZhcBgxnH9mj88ptpTqrl3GA1NyVZNgFhy7Emjfai3Z7q2JYl3UEgc2BcoZrbuYxw+S5Cn4ycTiG6HuXc3cJmDBCye8MjyDLpRtjyEcUTjk3HaN/UC+mT7c9KpMbnjcGgc+MaDBFAwEMPu80I/UbDwrJujS6j6ZGqD6ZqkctIsp2rzIuPEsXccuqpCkK+qbtXg2yqmvj/a9KpXKO3ITIiEsLWIvtJQxHPdcdUWKvzyft/U8nKyFVl4ADYnzZuX1yQQnZkagwALHNzcfHRPf9iqdmzkAkgsfb4k6adHBo9pKP5ZnSW2vHiRCJ9m7nuG5aJmKJI1F9kXz7JFIbtloo4twM3V6pGWHGptAkyFcltdSOknZVFVE2yfbd/Xkt/qO/Zabqx3LhERqaEkTIxpp3ai4eQRGZFgQMq6l4zETkOj1sYY5ivLiJ8Qa5nIwAucUmzR15/uezmK8PKsnPdX+hzTbrWOHCqEC3YrGtHcKuReL6wiYJQMK2finvdjOYSeeLMR6koNVs9tAnM6BxhglWTqKZmWfaEUgb3MMYkFoSr9ekRVKkJsbIO3cAx2/3Lva21NA8JglY9GUn55jJsGRwwB8QR3x4JQzIAx1rRDwfjTPXF3WXL6dhVbVslN/XPMtfMBMkS3VxE/rrO3ZXRCn3iE4wnGtVs3Wst8udp4RgK1HtOSvlp6NtasOp+7qPbKgxJOGhGf3fiJHWZKnUvKpVOrpnJ3NZSx/R4tPRSx5Y5mzS65c9X1QfAxZsjOqtnUM31TMYIu3teBVChBNv6EQTF53N2PaeMsE2n+syBs0mATV6BJNXSaq4SaXKAx2/5BORi/B+UkZ0SqaiZN4coinq2hYvnMQ8mZxUTy6o9KhykrVpQhuNuJaU25VgJ8wfqq4ZF7uCXH/M8AzFvYy7Tq5pwIK4QpWYc9+P+Q2pQVCU0P2DrbTjqZBPDbezvSWQ9ipjmlg7XTBRaACSI7WJ+oraSELVuDnkCOYeRYl+IKeLSIxOq16rCAanIEkziurmwsMAMzP6BBzQGQsY8hvd/bDlbW5qkDg4cCG9NmLmjI5iDfQblttPD+iBqXBXFdCH96RenVgQpraYQRy57FtX1aOOvhFjr9Bf93qrRvRU/da8rClgvlk2feEVAcU4jdSLJ7DTQfA6ACdVHuY+qeC3LCHcSuz/rxZdidpENLd/ULyKZSN3F73cxACDsWL3a7tNqOpaitAq7v/dufKSPYb31uEL9aB6fD4D/B8ZI8TK7vKcaKivkd3eqW/nj9z/WR9n+lFfbBaNIiiSHhD9k6z+a2tlxykuGmXxT3Rm/rv785odfj/GpTeUVA+7noxVeEvDHACjYuRGf3hPAZPkjj1kd//btN1/9foSSiHkXIasRKbLmXP4/QJJQK/PE21Mu4RK53v3B9W9/+OabH7PHN12qGJYk34iRRvY68CcAIKv/R4STGwqYGgVhJ5mfv//p6z9yRyfJpeFydSpEosl3gI2K8CFdCRTa+1jwLP3y03df/zIWjoy/2LvWtrRhKLwkJqWlUiy0XAaWQWFTboqKCJabIEwFBUVBFN36///DgI0Bc5utl5E9j++H6OMHL8fkPcnJ+55Y90kUGdxLJSeO1AdArgfNVL1RHfCFtb9NgVrvXKAvJEvZXR6QHYNSZvDLepmhWLlqnWcdmdMhn/7roTrSEWwKdSGpOcGBbFR4Xvyjt12HaHPuaBcLQf2INK1/P3p/UTz16zRdXLK0X3KRE7vBux0ZTOTIDwBdoY+zBLWFWZZ57B2JSE+weVqUJWFvGLKrCaNEvPrnWQLQYX4m/TZYwPPF2GM/vVcWPB26ailLJ04Hc2y0HpBGU3LlWfBLCwR1amaPBPkSEBuPft9IX1KEHl19ij7IDmLcbBhgxsEA+tSurEM0MRvu5i0/eYQBEFceP7t8HHg8qVuqnn1aT8uI3bYbtnygmRwM+fEHlp98jQlMZG0yB1RyaiDStXulfN7K0xSSmpNBxHjFa5udRGSagiH8MQCy9+MNCpHoMJz9YCSpf5WUej9BU8Zp+uVCwHg5/pTMM+po4LnROBqcY5q07IVLJd3fMCT/jnTLgtKjyXu2UpT5rYAJ2Vp0Nuty4w8ITLLQ6uZwiiQP8chht71iLIW1yzbPBU2F2Q9OjIMmyqKb8952x7TTzGgRDR16S7UiBzGIVg2yQ7JRtkkXNO1ea0EYblpMXBfPVwa4+X5E8Zg9GyxByIYMa/3dnXNBa21StHBCDuww1RnnCOi/BQCAwKJ7myAg+raNFw7dF1pd67opyjgyw7KHppQiUH8A/rvdv6QeB3kI+OjGyjsTIUkJ5f4GRSER/awzbUposQsndn8w2yyDYRByQcDoDjlhSmbcvrflejQtnDhhSdXcc2+rBDxoCaFDhHQIIYCjtmZmEGnVPco9TRlnV2XEgMmdDMEj5pgQKzPt6AVANGq2HdNZR1LOBzQd+4IM6zC5kFf2Q4ADPJK/8wg33rwidrS/Vyt20/r8geCR2jSJHZ0Yliomuc275cBMiYPjGjQpRPH4FMxCXyNhXqcTua5rWnuPIno9wRwyLVtMhImfQXBs93cV/N8phSlU15+yV7yStHpvjaJZkhfjzK5pQap7HwGAuZKuA14fA/i3z552oriUlFzucvEmvZ9IBgkOn5r+99qP444Zu3/Jte9+opLLeluuS3fHFHXYWK5gvyhmn2BtrxypmB2XSxDbiDzjVu0q1b87pUmiFKuUkEP2PoEEqrI44hB/dMey/Iw6ZyYn5W66Z+/owfJpFBOSMUkn1lhWViEEQA0ePrNIuNHp5e6bFC2cUU/yuCofmImJdSW/FyqoAALWV6k9N1dUM7273i1Ns2RYEA4iLK7KaxaDPq6d4wMR6RiqauglWv7ttFr3qS5l+npvEfsJG71ceSwoy+uxw6MwYXUAOMbZSDzvTb3pdZ+mXdHW8Pr9ycji6SpW3MnlP5DgO+snb765L/sQo/MA+7f2zqwvNElbkiRd0XWRM0Rywy9iF3CsOo+yiU/Wpflw2D8PySOz5UcsVjEPSfwkU3s5Pbm92zlXLnYo2tFP/uwjFwFDQORzXlaaVXdi7XM+4c1XA3uVrQPXiZODgEEM8sflQORFTbv2biundCiUIb379L6y6kA859QRi0WHKOKw6vAXfAyGAOo84Rim4AoVNz++tEh1vXohdfqnFO3oZ5DYkJ0yCyDU4WgYjiwGiB9+QogYbuztxF7j905elZXzQZbWh0nWPyaaxVB8K+zzqRwWfS5C4nKwcRlIxOyWV5ra9kxb0QZNmv1L1uXP9siQSqrZdDrhdieTH153mdtvNEG6H5Yn3zDB+mHu3JPLvIVkti+/llL6GSol44tCPmcTtAZNBemFI30heLQbus59C0aiLdVTXcoEfItFpF3u5a5o0g4sHJu31/0v3f/VMvsqcHe+DKQb2qoDC0Xkpt+5a73Nkhl4ryuDVIbGo/DCsHyc0+4GNAn4Fg5LV0qV2xmaz33/GtbjsiJoN28hmb1wVGyClqG1YLIQBMqCR9v+Lw34r4Slw5SgpLpvIZnCUpQ8ilZ5C8kcvXpsqS5N2oGFY0cTbNLt2yz5xt699KYNBAEA7oEDEupMeliJSQ5LLjwqxGNFLcrKEVo1yaKINH6AjW1e/v8/oglqa6q8OLSya/s7chx5X7PDbOLjWHAQcRmSRDVShMz7f7uu/X3V8YqTsy/Taonqnc+IrTPa1iUVtYGpNbPLfPSRhtBMWJkrp0hTRzJSQcbqkNJVl5wzu/eh9JshNKqgk7mimxQZO03KGmS2u1oKrkJOzMrC61CZ0QwJnUz9ezp1FwvBxSpL/2VL3fnCRMpgTWOKZgEjCifl9Jq4DDiRe1OGJNEKBLGwvAE90rI4oCz3JUeasQKSjTIkiZbHQMuM1keno29x5HJQ3oAmqmtNqEZlSBIfYw3k+GUxcKKyFIjOvLzbOjKVEvmoLB044guH1PLs9LL7bu8i58Ps6xa1jFqnjrPm/XoTLNN/OvdfmrgEjnfiRU77dhSa3Fz3cr2P+W4HLo8+n/YMeLRxOZKM83072POkdFdG7f3lujmwFAIgW2Spx9Y/0Bh7zPbe7SxT6TdilwCISb+T8yV74gYrNZ9V32vD6m8ZAKDyGpd5T9T251Iw0au9GZDmcqMRgNjippv/Q/On6x0J9VYx8MeH74FJBKjl1CjCnq49Mh22feNZvO615yogxK3f6Od9zBxcrjnibnD22sJ7HtkEwB1u3RSlVulzpDjJb92XA3I7thkCaOWNm4X4Qp60p4Ix4fdfitbDYC8ZImoZGzlfeI+d+SvBgrvnX0ntcVYVCMhpE9ULVfLYnlqWa0YPz3tQWaYDj4T9tVuYMXNQqVvCXuzrf84hXeNuxxCAzMWyXrQsZMWwBLP92fFP3Zv9YuUAAK3Gs1wfel9U+WJKxuPbZGfWney3DgJyvZoaOc8WvewiJMbs619zyOVkfjjwgvD84VmxJpFfmlvu6sXw58bNmG6l0IgovGHR5pDfrkzusuD2EJDzkS0JCdgu7hRsmTn2RSjNgvOnHFFkCwIAMuNJMU4zrzBMQAyGtfbQY/CIm+uvuU+JvO1qS4T25D6yEQDMcN4peEAe66M3iGpjS0kAoIL7Vv5zRO+5sJSjFXcAuHYHs3xnmk9TtxAOKLwbll/Ik+EOAQFQeNcF3Zk9MzQ5Q8BwWbbsSAr4hGDuvlO8492r2j/aqWMaAEAYAIIWwAQrEw5IGBmZ8G+jay00uZPww9/9/houkrR+piAAAAAAQFkBmYYuTD1q/c0AAAAASUVORK5CYII="></div></div></div></div><div class="rowContainer_brmT"><div class="col col--6 padding--top--md"><div class="text--left"><p class="featureTitle_L1YZ">Backed By A Community of React Native Experts</p><p class="featureDescription_sP1D">The Ignite Cookbook isn’t just a random group of code snippets. It’s a curated collection of usable code samples that the Infinite Red team’s used in their own React Native projects. Having worked with some of the biggest clients in the tech industry, we know a thing or two about keeping our code to a high standard. You can code confidently!</p></div></div><div class="col col--6"><div class="featureComponentContainer_HpZw"><div class="imageThreeContainer_uPl6"><img alt="Animation Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGwAAABsCAYAAACPZlfNAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABVxSURBVHgB7V0JWFTlGn7PGUA2FVxQTIVhcV8wS0tLUcuszKWy5d68ate6ldcFtcVHDbyVW6nYtVtZKVZq5m6WaaZoprnjngIO4sbiMoACAnPO/b4fKSQGhuHMMOi8PiPD4Zwzc/73fPv3/0dCNYPBcDEw36QLlyQ1UAYCVMBHAgILf0o+KlSf4vvTNiNtM9I+RlWSjJKqJinAGUlFnKKTkprp/eJQjSDBgWEwGHwK4B0mK2p/VUIYDXJYSUI0gSTFMoGqqm7T6bJj9Xq9EQ4KhyOMSVIU76GqpPaHqoajKkAEQsEinc5E5PknwYHgEIQ5BEnmcJO8kBC/GDgAqpQwQRS8R0NRx9hE1WkIGqgkFVKsTjZNqUqpqxLC2HEwKbpIQB2KagkppqqIsythLFEmxWtO9SWqJOxPnF0Iq06qzwoYJVmODtbXnwI7wOaExRvSw2VFWUhxUiBuY7CNU2R5WKi+fixsCJsRVihVXpEqSRXuIKiQo0OD60fARrAJYexUKIq89XaXKnNgaZNlpYctbJsMjWEwpA1RFN3BO5UsBl+7SZEPxiemaK5dNCUsMTE10qSoMbehY2ENOLc5J9GQHgkNoYlKvP3cda3B7v/1CC1ylJUmrDCt5Mn2KgxOmAUNdJwsZ/eoLGmVIsxJVsWgBWlWE+YkyzpUljSrCHOSVTlUhjSrvER2MJxkWQ8eu0InreKoMGHsuju9QS2gDrXG5a+QSqSgeDTFWdFwQjPoZGmoXu+3yNL9LSasMN3EGQxnUKwxjDpZ6WBpGstilViYG3SSZQP48NiyI2fJzhYRlmhIm3Mn5wZtDR7bAsXbIntWrkrkepakKFvhhM2hynKP8upp5UoYFx/hhF3AY12eaiyTMHbhnarQfihUjZ5llmTMqkSnV1hlIK8xW28uC2JWwrgNzUlWlcCnrCxIqRJW2DcoG+BElYFiM31psVmpElbY5OlEVcIcB3+RMKd0OQ7IlvmWtGV/kTCndDkOSvMY/0KYBAebPXIHg9Tf6JJx2S2EJSSkDXXGXQ4FnwLFY2jxDSUlbAiccChIktz/lt+L3jidDcdFcefjDwkzmXThcMIhUVwtFleJTnXooCiuFoVKNBiuUjok7yqccFgUqUUhYSZTXjiccGjw8hf8s1AlSo4Re6lwwhwkk2kA/3QRv6lyeyIN9kCBqQBZGRkwGq8gLS0V165l4fy5ZBQUFECWZfr9Gnx8fIWyrlmzNvT6INSo4Y46derBw9MTnp5ekGg/h14RxhaQiSMUEWZjCcvJzUb8yZPYtTMW+/fuRlp6KoxXr0BRTGRQKbeiqvBr4A/fOnVwLjkZimpCfn4+6W0dXN3ckJ+Xx4aXCKyFAL0erVq1Q1BQKIJDm6MBHVeD9mESb2uoqlCJksFwLsykuB6EDXCVSNm+bTOWLVmElJQLcHd3R716fmjQsBHatGuPJo0D0ahxE3iR1Hh514ROpxOSxgTl5eehgEi7lpWF5LNJtD0fB/bvxumEBOQX5CHl4gXUql1LENahw724r0s3hIS2QC0i9XYlj0suUkJC6gDSL6uhIVhiftv1CxZ/9QVOHD9CA+uD7t17oUvXcLRs3RZeXt5C/Vlz3jwiMzMzA2eSTuPokYNCYg1JCbhOqtTPryE63tMZ3cIfRtt2YfCkz7mtVKcqDZPiE1Oj6KI0y9Dn3biBb5d9ie/WrYJMaqz/wEEI79GbJKGhTe58RVGQTrbwwL7d2LFjK44fO4L09BQ0uqsp+vV/Cj17PUrqtiFcXFxQ3UFexhTpVEJqjCxpEzTz3f/tN4uw4IuPyc60RcTYiWRnmsFeYAlkVRkb+xO20+vYscNwJ4flsb4D8djjA4TKlKuxupRkKYZUYtpWrZyOWe//B8uXfY2AwCB8MOcTNGkSiKoCOy0HD+zFmtXfYO+eXUI19us/iCT+WTRuGlAtVSXdkGtdJEn10cKhP5t8Bnt27xRqcMCTz1YpWQxXV1d06twF93a6H8eOHsLSxQuwauVSbPzxOzze7yk8+/wQ+HL4UI1AYxugGzX69bfofaW7o35YvwZbt2xEi1ZtMGr0myJ2qgj4prmRm4OLpNLSUi+Sh3kVbm41xMCz628t+Fi2YWxHW5HDc+aMAT9v3oCD+/ciMCgYfvUbVOr8dkauy81lV1EZ8NGFwW8+eYMPwZtca4uPJbuTTIO4asUS8ix3CPc/n1x6FxdX1Pfzw0MPPUoS+zwa+jeq1MByyND5vgfQrn1H/LhhLRZ+8T9MfHM0/vbCi0IjuLt7oBrAhyRs/HRUEjyMu3Ztx6X0NHSmeKhlyzYWHWeimGvlisWYOGEMDhzYI7IfTBZ7fkx+RoYRBw/uw45ftqAlOTEcv1VWFlhi+fvd26krzp9Pxrq134obpn1YR3h4eMLB4a6Jy8RSkp2dTRmNHNT09rbomExKT82cEYX3Z/wH169fo3MUnqck2Ku7ePE8IieNw+8U02mFEPJeJ0dNx8CnnhcqctKECFKXp+Ho0IQwVlVsHzh4jY8/WerAFwdL0IzpkVi9apkgpHB/1ey+ojWI/v9o3ixBrlZgiRox8nUibgYMp+Mx7d1JSEg4CUeGZkFJu/Z3U66vJvaRC32Dguey8OuOWPxCKSsWK5PJhPLA6jGVbNsJiqvOJidBS/DN1rv343jt3+MRf+okpr83CRcunIOjQuZ13aEBAgOCcG/nrki/lIbDh/ab3Y8J+uKzecjNzYVMjoClMJGk8bE7d2yD1uAMTN/+T+OVERH4/cQxIm2ySH85IIwyL8IPDcBZ9U5MWFoKPvv0Q+SQTSsNSYYEUj8J4j07HZaCnQ0dpZfSL6WWq3KtAZ9/wMBn0Iu80gP792DunGki+HYwGGV+YgI0Qp9Hn0DvPn2Fk/DduhWlWqUkStrmknNiTYqI47SrV67YhDCGq6sbxoydIEKIzZu+p0zJHjgSWBuShCEJGoEv+JVXI9C4cVMsWbxQqK+Sg3s68ZRwJAqdiYqBJUwkkWE7+FKh9OlBL1CJJx/frV1hkY21F1SJJExRoamybuh/F14cPoJqNzJmv/8O9uzZeYuk1ffzF0FqRYNgrqW5UQzVlpwbW9e7evd5XNTpuESUnOw4rZo0ZEky/weNwbZs3BuThQ34gOKsXynwLbpTA6nkX6dO3YqcjtJcNURtqy4VP9u0tf2KSb6+ddGlS3eqPtygKvl2OAoURT0jq6qUBBvgfrrgSZFToSomvBP1lrAJN27kkkprBBfXitWmWH3m0bH9+g1CfSLN1mDp57IQS/KVy5c0t5lFUSefV/yj6xPv1bKThPxAHxdXnSnWpGivYviiWdLemDAFsz94F9Movtm37ze88lqEyOldvLDsjy9ZFjgHyOmk0GYt8WjfAcKO2QOsgnkgMyk9xm0L/B2sBR9/7VomEuJP3UxsXxE50wJKw+l0rsjMMooqh7uHB2pQwjs4pDlq0OfXru0rbHa9+n7wIDMiy25JLjwtMzExzWir+cxM2qw588nVn4ttWzfjyOGDePqZF6APCsWF82eFx1hgxr3nC3AjRyYgMBijxkwgVVUH9sLlS5dEn4mJNIQ1Hi2bgJO/H8O+vbvw888bkXLhvNAwfK3uHu5EgKc4v4+vL+1bgKzMTMriXIeLzgUbN64X5+DqvQvdKJ6UkWnWvBVWrVkZJ25XusnjyPUKh41wFxnwiHETqUamJ3d/OeZ/HI3m9AU4e8H9HfxFWUkUEcfeJv/u5loDHe/phOH/GoVQqhbbC6yCkymjwqmrpk2DKkQYJ6+3b/sZK5cvEf0sLJn+jRqjW/eeCCLJad2mnbCR3kQW22b+O38eayQmmV+ib4Uk+9LldFw4d5YS4HtJKi/H8vmFq5aQmBJNb0fDxuAvxoXO6NnvUoyzn8jyFCqOE8FsL7hLSlUVUZ5htRDe42E8TuV97kW0J7hmNuHNkSiggZsYOQ3tqSRTHli1cz/J4q8+FwPMLXoPdOuBnhSIc7sEX4O17Ql8bpNSMLdFs8ZjCiVMUddIsu0J4y8cEKjH9JkfYefObVi98hucO3cGbnSnFZY8ulAWvTnqk85u3CRAbJfsXMznks7Czz+iLIwJne9/ECF041gCDgGiZ0+loqsbJRD64cmnn8dddzWha7Y8/WYOLH0usmuseM//VdVkiKysTGzcsA4b6JVkSISrS2FZv+uDPfDggz2Frtfigi0F29T/zp0pJKRly7YY/+ZkGvSmZR7DLtOuX7dj5vS3hQaZ9PY0UuP3CWdJSxRNhvjj9tWyGaeiYJ29Y/sWkR3hTAg7ItzZG3b3vej6QHe0bXe38JJs5SHm5uQICfnqy89wmvKcoSHNMIpSVK1bty83wD986AAiRr0kVPnrb0Xh0cf6Q3NIUmxIkF8Pfuvy5zZlrQopHFUAViM9H+qDB7v1xOEjB7F39078+MNaUplLRZ+Il6c31dvakV1rJppqfCnwZsPNx1kDlgp2qc+ePSMSvfx5J08eE651ePhDGDzkZeiDQ8pVx+z1rV2zXMwP4O/VrXsv2ASK6Y8VS4tNmXWsOWLZ2ddFCHD0SBw2/LCObMsV4fqyV8lk+ZCL36JFK5EKa9I0QHT9NmjoT56dl3B7WRq5jsZ2k1UVe6Lcd3ImKZGqBYlIJElmNcyD7UVVch7w7uEPk0p+gBwEy1oFWKUPevIRkZSeOuNDShZ0Q0XAcV4uue5cwbh65bK4kTgLxGFM8e9QfFWcW26hqlSL5sAeEt/JnOXn4igXMI8ejSN7c05sN5kUqqvJIndZq5aPaNzhWhs38dzIyxVJXHads6i+VbdefSE1KSnnaUC8RUDas9cjovjKTaZ8M1QEJ44fxWuvDKZwJQDR/11Ag21ZnMjEXDifTFrkO/ywfjUuUQ2RzQCrX3b1G5GzMmTIv/AASax3zZp/qEPGLUahKtWiOfBFcLK4RYvW4lXUX5+RcVXYOyaOi41HjxyCQnakNpFmMMSTdJnEcX71Gghp8ydJDG3Wgkitjbp166EFeaVNqejKatXabiyOF1kS+HweHpa39W3bsgnRVG+7SJXtktke7o1JiD+JqMjX8TBVwl8eMe6WBZxvIUyWa8QoSr5Dr+JWdBeyCuRXEfiiefoSgwll5VHoqamiwYeJ4X20nFvGGQpxA1H8yPavPPDcuPXrVmLmtEiRJCgvLbdly49JS5ctiSm+7ZZP0et9jXTRc1ENwUTqKK3DL85QeHBai0jiZlQmmP8uazwRkG0mf8Y5cl44P1getv78I5Wc3hXZjPKkmveha4ktuf0vt4WLi7tzXXoLwTNFW7dpL5yOQ2X0sTC4o+zLhfNFycbSAm52bt6Uktv+QpiQMhUWL3x/p4MnWNQku8k9+zk52Wb345aJU6dOWFyqIecoxmg0JpXcXqriddUpUXDCInDrtzeFBezBbtu6ySwh+/b+ZlE5qQiKrJtS2vZSCWOf/06WMo73OE7jsKE8sK0cEzFBxE/Lln1Vat9kTs51kRGx1Bs1J10Ms66Nq85tjFY9i9UJ7DxMmzoJYyndxIG7JWjf4R4Mf3kk0lNT8en/osleZd3y94yMTLJducJuWSBhRnPSxTBLWHX2GK0FD+bn8z8UnckcY/n4WF4w7dmrj+hp5CrEvHkfIMP4Z9KoVq1aYjK+JdN2SQbnmpMuRpkp5bFjJ8VBNT0HDeaPOTr47ufZo0u+XiBCgYmTp6J92N0WH8+NtHd37IQrlGLasnkDJZHjRfKYMhWi4sDSytmaolixdEhJVzOvDSzrc8qM9gqlTBmGOwA7f43FAqqDsZ0Z/tJIdL6vKyoKnsT46oix6DfgGVFyiZw8XrR+F9YBg8BBfFl2TJXVcse63PA8NNQ/lnTFba0aucL8+fx5wsl4+pm/U/HxOaurw1z6f3H4a/j74H+KFNOEN/8tXPpwSizzaj7mCCtUhddiyzu/RW4LZ/IVJe+2fPo5J165HeAY5SJZqiZHzaxw32Rp4Ew8L0Mx/5O5QhV2omp6U6q2r165jP8ocoZ/OiCsCrP0lpz3jn7gG5dwZs18Bz9t+h7NmrfEO+/NFg0zWiLh1O+IifkUu6lAynU8sdIP1eJ4tqqoKNzINSqSrkNZjkZxWCz3HJupqikCtwn47uaVejZtWi/KLP8kt1xrshghVCGIjJqB8W9Fihzn5cvpYjuvDsS9hx6e3lMsJYtR4VxofPzFKMp4a7ZyTlWBW9DGjBwuvLsRI8fhkT79bL7oSobxCpZ/u1jMN/j9xFH41Kk35fjx41EVOYdVyWstV8+pCnCVeeo7E0WTJ7cmjHt98s1eSNuDJZsnw3/2yYeLFi/9eigqCCsfvE1OiJq3lT67Wj7Leenihfh+/SrUJrU0YdJ7YnqUPWH3B29zfCZLbj3IQ41DNcPxY4exauUS0ePxzHNDRO+gPVEZshhWK+3qSFpaWoqYs5aTkyPa0bp07W7XVXAqSxajUla2OpHGtuPjebNEkMw9jxwcV2ZGSkWhBVmMSrtFRaQ5cjmGw1Pub9z80waxjvDQF1+lZGwD2As8NlqQxdCklZZJox9DyeVPckSX/9iROKxcvliU9Ac9OxhhVA6xF3hRymYhDaKgETQNPCjvGCXBFOFIdTQu23P//sULF9CJUk99nxhol0UuxRioyrDQYO3IYmj+zYODG0XLsqmDBO3nTlcUrAq5XPL9+tVo3KQJhgx7BTVr1YatwdfOYxAS4h8DjWGTW43TWMHBDfRVneXnZWQ5/cQOR98nnhIdujYHXTPZqw6lPXBUC9hUN4SENBxDWeseVSFth+L24+OP5oiVDJ4a9Df0evgxm7rwfI18rXzNWjgX5mBzZc71NJY2upgp9rJtl6lksmjhJ0g+c1rMNxv8j5c0n69VBL4mvjaWKlE7tDHstsQ0OySs123t/nMJ/rNP54k8Ic9s4eX1attsbV8pRpav6/nabClVxWHXNcFZr5OLO5Snz9iCOLZV69auwPr1K+HlVVOQFRQcCu0hxfA1hAT7DbMXUUWokkXcSxKnlY3jR30sWvCxmBD+WN8B6NGzN7RCkerjqauFRNnGqSj/ezgIEhIuDgV0Q6ydn8arvEWMGi5WFOXZ++PfiKRsRn1UGpIUK6nKWlnOibG3NJX6deBgEA9PNfGaIZaTdyM3F29PGodfftmCgKZ6zP7wc/j7N4LVcDCSisPhCCsOfui0yeQZDvEwcPGMs/DS9lu5YglmURaeV8p5b2q0mMxuKYSq4+S1ohwiG7jGxSU3ztFIKg6HfoLMzYFbc/MlYDCkhZlMaiANchgZ4IADB/YGLlm80IcyrD4vDB7u0z6s4y1NQoIQqEYKwYzkkyTxgp4KcIYXReN1tqrKFlmL/wNy7M4otyihFwAAAABJRU5ErkJggg==" class="circleFaceOneInitial_lr7i"><img alt="Animation Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD8AAAA/CAYAAABXXxDfAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAApLSURBVHgB5VsLVFTXFd3vDTDAiILlI8TgjKLWL2BMNW1WAzZNTIwVtTXGuirGxC6jrVq1mE+D1MTPMquIsXElTQQ/qE2aiFZrDCpEs9T6JbD88cmMUUT5yADyZ97LuRfBQWaGNwPGAfZaMO/Ne+/O3eeec+45590r4AEjR18UIUoIA6RQWRC0kGWtAMFbhuzddA+dG+ncCEEwCDIy6JurkoiMgTq/dDxACOhg6PV6b0nqES0L8iQiEmZO0l7cFUo6ZGGPSlWZotPpjOhAdBj5xhGWJ9FhdHsI24aQpBJNcTpdoAEdgHaTZ6QFWY4ldY7AjwVBSFcJptntFYLD5Jl6myRNPCBH46FBSKooz48LDw83wAGIcAB6feEsSdLoHy5xoMFUH708ZnlafPymaDgAu8iz0c7TF8abJDnpwdm1chzYl4LyMqP21888l5iTVxTP+mfP84rJ6/UFWknyTJMleRGcALW1tfj0022YPec1uLt7kP1Ki6h/51k/lbahiHwjcTFNBpuvnQN7Uz6Dm6saT/z8l83fUf94P5UKoE3yZsS1cBJUVVZix/ZPsHjJm/Dw8GxxzR4B2CTvjMQZvjq4D8OGh9LfSIvXlQrAKvnGSM35iNfV1WH357sw4/cv03Rvfaa+K4DdtpygVfISNLHORpzhUOp+aHpoMGTYiDbvZT6qQeoRa+26RfK5uYXRzuLVzVFfX4/k7Zvxl6V/sznq5mCzAItLLF1rRZ7ZiSDIVqX1MHHi+DEE+PfBgJBBdj1Hccl6S+ovtr5R5ZTqXl1VhcRPNmLCxCmKR90Md0PxlnAxP2GjTlKKhgKQgFBDHSq4mY/r166iuKgIJSVFPPhgVzUaL3j7+MDPLwB9H+2HoMBH4KZWw1Ec/HIvqbCIceOehWOQoykJ22JeI2ghQrL1NAi2s7Oammqkp6Xi9P+PIy/nCrx69UJwsJZUcTC/7qZ2g0rlSvZZi+rqatzIv4ac7MvIp88+gUEY/dhYRD49nquu0vErKryJua/MwLur12PosJFwGJQNhvT3j2w+bTpoHHVRb+05Rvrggb3YtWsrhg4ZQeo3GaFhoyGKYptqWFxchH17/4Ov0w/hGmmJm6srAvoE4ZlnX8DkqdN5eGoNTMM+/CAeBQX5iFv5HtoLWRQjm0a/We2ZrTf+VGtUVJRj9TtvoWcvb8Qn/At9qONKcfbMSayMex03qfMmk4kLS03qP46ClNqaGsybOxNRU17Eb6KmWdSE4qJbSDtyEP+g3+0ICCZTFH2k82P2T68vJYdQV2rpZlNDA2LfXsoJz1+wFIKoPBEsKrxF6jod169fI7m2FKyvrz+2Jqfw6Wvblo9QWXkHMW+uhMZT0+I+WZbIl5TQ/X7oIBhVYpWOlcT4yJtM9VHWDDAj4ywq79zBnFcW2EWc4SCFobduFrQizsCc47FjRzBl6ktYtnwFdu3cguVL52PVmg3w6tmz+T5BEK0Sl6nd8rIyMiUDsq9cRHl5Gf+9ajJRWZK4pnp6ekKnC0Evbx880vdR9O3bj4qnHtH0+PpGtRd47c0iDIY8bp8enp6wF5cuZKKBNMcaamtq+SczhekvzUJpSTG2khbM/9NS2EIFkUxN/R/OnzuF7/JyiFQ/DKOIzz8gEI8G68iHuMPFxYWHwlVVlSi9XYJzZ0/h6tXvUFZmhI9P70nN5KlKGiFbsXfWMdaII2gwNXBnKFsYedbuULMQlZ1PIwH8dck88g83+MxwP5iJ7P/v59j9xb/J2T6G3/5uJkaMDOfPtoXi4kLs3J6IkyeOITv7Mk/NXXJyCiJsVWVCQ0dh+9aPUWY0kurYV7wZOXIUvjl6pJXwmECGjwjHUHJ65vD18yM11fARup/8bbL7jRvWwtXVDe+uSSD1DYZS5GRfQsyyBci//j0kMgeCt693jwgSmmCzQNF/wCA8FfE01q2J5d7aHjAvHhb+OFQu92IpRnzQoCFYtTYBri4tYiweILFZgRE0B9OcpMRN3G5j3vi7XcRraEZ54/WFuPa9oYk4hyTJYaKSUHbe/CVokEw0ZS0n1VNuAhpND7yzKh6v0fNh4aPxszG/4G198NF2+FOMfj/OnDrOo8LBPx3W4vu83GxkZZ7Hq39cqEjFzfHN0cMouJFv4YoY6kKzfig5PJsNuFJQsnrtBuxMTsSrL0/HnxfGYNToMVACn94/wR+i5/I/NoLWAqJLF7OQvG0z3np7DQmt5XTHPHlQUF/uue1FVmYGGshX3A96o6R1IeJaBW3wKWfGzDmI/NV4sr11SE7ezKepMWOf5J5VWRutiZeWluCLz3YiM/MclsXEQtc/pNU9vpQfGI23bQrPGlQuKq4trUxWFrRCXl5hqSNl6HwKXFJ278LpUyf4qIx94kkMJ8/L7NHVTW01bpfIfEpLb+MU5QYXsjKQk3MJ40igL0ycSkUKL4vPVN6pwJzZ0xAbtw5Dhg6HPThz+iQWLphtyekahdy8WzLaAeZELtJ8npt7BZnfniOvXMzndqaiXl69eGDEJF9LgQcjzUYvuJ+OzbVUeX0KgwYP4WbVFlhesYPMLmFjIrztmHVY//75/nu84GkecwT306Ld5O8HI8fm44qKMsrqqlBfV8/Je3n1hJqCDzaVOZCPcyRt3oRj5MBYFBhgR37BVP4oJVWpX+0nAdRj9ONjMSnqxY4n/6Bx4vhRfPzh+3iessoJEybD3cPD4bYctvmHCZZe76Ba3uFDX2L8cxMx/vkoKpr4w05wm2c5vBadEEwIh1MPYB+FvCyYGUtvb0LJ6Q4YOBi9e/tCVKlaOV5mlqwkZiwvNQhKqjedAczRXr50AVlZ5yjZyeVZI3OkaiqUsLihurKKR5osRa6vb0BgUGC6kJ17K0kUMAtdDMzLs3C5rq6WHzPSLGxWq925UEgjElxUgpxBoUOXI89mGA9yhh5WHCL5OYNIAX4GuiNEVQb3B53R47cTxpABAT48RZL52rfuA/L4X7NPTl4QpD3oRqDaUgr75ORFUZ3EFvyhm0ClqrlHXqfzMcqQtqBbQEhqWsnZXBahV9Ip6AZgKzibjpvJDxwYyNa4pqMrg97Vma/abFEQk+V7UumKYEtWzc9bkGejL8noorbPbL3lWt1WpVBXlduirub5KZIzmNt6E1qR555fNi1GFwIlNRaXqVssgoeEBCbREwnoCiAenI8FWH0DoFKpV1CprVOHvVzdVdUrrF23Sp6pvyhIk1kD6IRg/RZFKdLW1pQ2y6jOugTVFu4Rt70TQ1ENuTMJQClxBkVv/VhDrEFnNwHqX4ZS4gyKX3k2CsAt3GlnAeqXKFZF2rPpyKFXJ7m5BdH04tIpVmryvXcUl1ibzmw/6yCYH6g3iSsebuWX7bOrXOzoZsN276vjixdNqsQftfZP2ZlsMsXxTLQ9zaCD8KA1oVG9pS1Uf0tpL+l7bXYw+GZDk3sUvZuedHeVV/v20lKUKcjSHlGsTtI5615aa2CrvdiiJ6oQa9k6GLYSxOoualkwCIJsINf9LXuf0FEjbA0/ABhunhSujvRhAAAAAElFTkSuQmCC" class="circleFaceTwoInitial_vFlQ"><img alt="Animation Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAABFCAYAAAAcjSspAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAsYSURBVHgB5Zx7cFxVHce/59ybZLN5dFvStMFKs9MkgIBNUcBaoIkooHWgTnUcUIbGYUAcMTx8DMrYdhCcUdEWH6OgQ5iRP2CG4TGCDmXMoi1QBtsUpFSaslsoDUnbZNM8m917jr/fudm8t8nuvXmVz0z2Pnfvvd/7e51zz43ADBGNRkOOE6wRQpYDaiWtqtZASECENHQotR8tx2k5DiFi0JrmsRdSRmx0N4XD4ThmAIFp5ED0aI0E1kKp9XRx1fAInWwTfUaUFM9UhhdHME34LgpbhEJhvVZqIy2WY5qgE49pLbZYlhMJh8ti8BHfREmJAaVvH+kOM4NosKSzxS9xPIsyu2KMRki5WaJ7m9fY40kUEzOUekRPo5tkSsqtKipKG5AlWYniWkfBJk3WgTmKhtxqy+4t2VhNxqJEoy3lSsnGuWQd6WCrkVLVZhprZCY7R6Nt1UpZe+aDIAyfJ9/Ad95py6gcmLIoJMiNSqFxtoNpprAw0tJ7+Pyn+p0puQ//oKN0A+Y5lhQbw+HSRyfbb1JR2GVIkD04PYgrR9RWVZU2nWqnU7qPG1T1Uzh9CJErNfJ1nWqntKKYtDtPskyGmOvi60u3Q1pRTB1y+gli4OtKqsJN6bZPGFOam9s2QuhHcJqjpaydqLU9ThTXbYLzphbxglvc9a4aW/WOcx8SpP6jIAjjulFwXFNllKVwVHaUjOKjRdySveGR1jLKUhxlbcJHj9BYaxmylLlkJY7j4GhbKzqOH6NuGqC4uBilS5YiLxDANDHKWuzhE7FqKONgNvng8Pv429NPomn36xgYGEDZmR9DXl4A/b29OHGiE7mBPFz5xXW4bO0VCBYUwEdS1rKZF4Ys5eDB1uhsBdhkIoG/NvwFjdv/gavWXYPPXXm1sQwph707Qfu8/dab2P735/C//fuw4evX4wtXrxu1j0diFSuWhHnGiHLgQEsNdeU1YhZIJAbwq/vvRU93F+p/8GMsLi2d9DuH3z+EhocfokyZRP3378aCkD8N91TdYmQWUqzHLKC0wgM//xlyc3Ox6b5fTEkQZtnHl+Pun25B5dnnYNPdd6Htwxb4glI1PHFFgViLWeD5Z57G8WNH8Z36u5BDwmSCZdu47oY6fP6qL+G+zfego/04vCIhrjXTaLQj5MeDqkw5drQNTz7xGL79vTuRHwwiW768fgMuvbwWv/v1L0HPmuAF6kCr5oreTib7q8WYYKW15g93gbZNx2PEl/65HZ9ceSFWVFTCK1+97htoaTkCP+BHuzZddA0vsBBHPvgAL/87grfe2IsTXZ2mDi4oCGJ5eAVWX3o5KqrONinSDxpffAHfveOH8AMhBM6k9O0HWuhym6xgZUd7Ox7+w4OmYLp49Rrc8K2bUFK6BLZloaenB+82HzD1Q2tLCzZc9018lgTiE8mWWPRddHbEEV5RgbkGpfiVNuX+0B9/uxWXrq3FnT/6CeycnFE7FRQWmZrhM2suw+H3DlE98We89vIO3HTrbSiiSjMbmt/Zj3PPv4CsLg9zDoVqqyV6aPMtt90euoIKJkmWcSqKF4Swes3laG39EI8/9iguIqvK5sLaqXxfdtZynLW8HHOQfvHE4892XPjpSzKufp579ins2rkD99x7P9UZc/COZ09crrrwoqzKwXXXfIUCbxUe+v2DbrYaQ29vD7a/8BxF8yTmGSEpPLQduHgKBgvQS8F4LPuonfLoI3/CNI8LmhZseICr0Lqbb50wE+17ay+WLCmDNUmcmotIHmMGD6RLzYcPv4dzP3E+5iFxaQbd+QzHmH373kRl1TmYh8TJUuC7KN09XabXbMWKKsw7hIhJR2MvfKa764QpAvPzs2/ozRbUqOyUltBN8Jmuri7TR1JUvAB+wtHLgoNcfRK56KcskaB13lrG4w8immytRczvrMltpEWLSpAzpsnghRwMoIjCXwG6SZgkBPVoO8KitXno47ViAcnlQ6bjgcyWlRtx1AD85PjxNpSUlHpqNKYQ1FR3xehCjh6AJRyzjm+ksRqcRL7oQ57uQ7soJbm83Qge2S3D4YVxdySzf3R0tGPZsrPgB8VoR45IGAGkUNSF6VqDGrQKXs8FdRC9KNGtntyJyhMz1N2Us0qpZ+Aj71NrOrToDHglgB6ygJOwtSuKY2pNzXYy+CdJAmmezLAY+SRMoe5GtmitXuJpqsaPwEf27/+v504fE1SpYztBDmKTU3C8YOvQQnJPEF0A3VdSg11JC2HEYYtZiDaac5AN2rKe5qkRpbKyLEKTGHyAH1W0Uu962ZnL4AXOLMVUQnHMcJubLJM2FsEimKXBdqgw692tPJ9L380UHoGQGpYx1Bqk/DzpALmp0Ea9d5yOS85YDC/w9SZJmlQwZZEs7bA9GLdJZcyUCzFSuttEFpZCrrMlNT8kim0HtnptBzFHjhymzqiFWLhwEbzh3vXhJbp04Rg34j+WQg26FAvEAiol3Ckyb/lTuzWSmh/6NmchpZxt7kpl0uAZFM1L9REs1h8aU+ZaYTL4efBy6lETHh9nOqYasY0sXIu483LIRRR98nrONQ5lJONYwjIpmeNQZoiGkaOyR3UdsLUUqdb6gO4JBXSvSYEMHzCfonqIpj0oonqgxDXhCYjFDlI8+Ti8wsfsF0EkdS5dJlewA8aFHONSSSOAkY0enQ6IPLNN0WeXCA2l66nCr8WMXB51ZWwt+aprG5/EaNPVxmh5WogTVA+0GWuaCH427FffKyVYnBQBKuiDI9xCG2vQgxkoKXLdDESfJ0mcfkrMmUBXOe49oXG3O2h3b7WEinEJzQdVJsHZ5qDS3IOkEaZId054kEOxKJYsLcOpUI6Dt6lrYfd/dmEy2EXc1IvBwkyQTeSY0p7FMqmY/tiCO7B4MA9NDc44tuzdOnb9uJ43Ea6N9x14pY76FBohkm4055Oi/Md+bg2WTcV0CnwnEyPK6mQyabZNlHmoQMQBerTx4vbnsXNnBMVFC7Dha9djMvgiu+loCbKIPB2ATeeU0DmmdqETo9sTMpbD4mUiiPltyjgTvfoyYXdkfuXqSH/zqxR0Rb2xECqieGpKamOs0lhMge5CXAxnmePH2hCNHjSPQpjOzjje2Lsbu17dgd2v70Lp0qVYs6YGD/zmISwla8qkbXSS6lt2JUaMGFyUqRDDX9TbKirKGibalLaPNs/q26xUzrVam1dmzTplUqFjbGXYnIfh8j4QCOCVnf/Czh2NeI+WzzvvAlx8yRrcuPFmLC5dCj/IWohBzFBRur5029OKYtwo+kptjkru0UqE1GAVmSqolCZflqNPrr39GLlQwmSgG+tuwXnnV1NG89Q37jvDL0alf2NsUsl1tLF6QOU3JrUdYs9144pDc7kmuHEKHNqX4g7HFT/7UfzGkmJVOOzhLQ6GLKYp4eTcYZMM2hTQlokqnJH6ROHofcma5rIg1Japm0wQZkplZ2HVpxpIiDoOsLnaFadHFBlXmg+Y5gsJki6wjt8/A7qjr1ULJZ/q08HyuPDeXzITsCDU4qidioUMfydDWqJvl/eqhY1kLeWY48zI26ZMWfhcOlDeKs7zmMvQ+blvaGT+qr+nhN/c3LJRCDmnXpZi66DquW6w4yzb3/AGj65MJvtvp66CWX3ZgWMHd33Ydv/W8Gz+r4OR8AsPCUdupnpuyu//+oGfYgz/ps+Yt0Ec1MyAW8W4C9VPMVJM64gaM+ZfiPVCirVU7Hr/TzsCTcoxj2MiXmLGpMfBDMEjmZPJQDWP2+VhqtQlTx15ujzd/2QiAajg4od0ei8/2rWs3ojfFpGO/wO2g6GnLv6fggAAAABJRU5ErkJggg==" class="circleFaceThreeInitial_zltZ"><img alt="Animation Image" src="/assets/images/community-screen-1-33ab17b75b0f43b5fcaf319cb32afd4b.png" class="communityScreenOneInitial_wz3L"><img alt="Animation Image" src="/assets/images/community-screen-2-6eaaa75893ccbacb1e0b82f2c532473c.png" class="communityScreenTwoInitial_wpxG"><img alt="Animation Image" src="/assets/images/community-screen-3-edd7a1bb416a534602e97218474f2339.png" class="communityScreenThreeInitial_fbtv"><img alt="Animation Image" src="/assets/images/community-screen-4-c9cdc7d8c7eb8ea742a60ea3db400ac2.png" class="communityScreenFourInitial_c4XK"><img alt="Animation Image" src="/assets/images/community-screen-5-71c3c3261dcc6b73c9738878c71ca64f.png" class="communityScreenFiveInitial_ytOJ"><img alt="Animation Image" src="/assets/images/community-screen-6-4c08a6554a188eb84379ec02d3698bb8.png" class="communityScreenSixInitial_qx4R"><img alt="Animation Image" src="/assets/images/community-screen-7-6190149118b08cae945a1a7194e1c7b2.png" class="communityScreenSevenInitial_LKjV"><img alt="Animation Image" src="/assets/images/community-screen-8-e34ab29c5bbd20ff1e03b988d7468c3b.png" class="communityScreenEightInitial_ZQ56"></div></div></div></div></div></section><div class="freshSection_d7li"><p class="freshSectionHeader_arLG">Freshly added to the cookbook</p><a class="recipeWrapper_q1ux" href="/docs/recipes/LocalFirstDataWithPowerSync"><div class="freshSectionTag_awu9"><p class="freshSectionTagText_yEok">New</p></div><h3 class="freshSectionTitle__ViY">PowerSync and Supabase for Local-First Data Management</h3><p class="freshSectionDate_dzBI">Published on <b>March 22nd, 2024</b> by <b>Trevor Coleman</b></p></a><a class="recipeWrapper_q1ux" href="/docs/recipes/EnforcingImportOrder"><h3 class="freshSectionTitle__ViY">Enforcing JS/TS Import Order</h3><p class="freshSectionDate_dzBI">Published on <b>February 29th, 2024</b> by <b>Mark Rickert</b></p></a><a class="recipeWrapper_q1ux" href="/docs/recipes/RequiringHardwareFeaturesWithExpo"><h3 class="freshSectionTitle__ViY">Requiring Hardware Features with Expo</h3><p class="freshSectionDate_dzBI">Published on <b>February 28th, 2024</b> by <b>Mark Rickert</b></p></a><a class="recipeWrapper_q1ux" href="/docs/recipes/RemoveMobxStateTree"><h3 class="freshSectionTitle__ViY">Remove MobX-State-Tree</h3><p class="freshSectionDate_dzBI">Published on <b>February 5th, 2024</b> by <b>Justin Poliachik</b></p></a><a class="viewAllRecipes_hd6L" href="/docs/intro">View all recipes</a></div></main></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://join.slack.com/t/infiniteredcommunity/shared_invite/zt-1e1gob8vn-pcFjKM~n1c~aXFsTnvHpdg" target="_blank" rel="noopener noreferrer" class="footer__link-item">Slack Community<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://reactnativeradio.com/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React Native Radio<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://reactnative.cc/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React Native Newsletter<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li></ul></div><div class="col footer__col"><div class="footer__title">Resources</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/infinitered/ignite-cookbook/issues" target="_blank" rel="noopener noreferrer" class="footer__link-item">Submit a Recipe<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://github.com/infinitered/ignite-cookbook" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub - Ignite Cookbook<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub - Ignite Boilerplate<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://shift.infinite.red/" target="_blank" rel="noopener noreferrer" class="footer__link-item">RedShift Blog <div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://infinite.red/privacy-policy" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy Policy<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li></ul></div><div class="col footer__col"><div class="footer__title">Infinite Red</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://infinite.red/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Website<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://docs.infinite.red/" target="_blank" rel="noopener noreferrer" class="footer__link-item">IR Docs<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://chainreactconf.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Chain React Conf<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">From the team at <a href="https://infinite.red/" target="_blank" rel="noopener noreferrer" class="ir-footer-link">Infinite Red</a> <img width="32" height="32" src="/img/ir-mark.svg" alt="dropdown" class="ir-mark"></div></div></div></footer></div>
+</pre></div><div class="timeStamp_Nl4O"><div class="timeStampText_VmFw">updated<span> <!-- -->29 seconds ago</span><span></span></div></div><img alt="Animation Image" class="faceLookingDown_tKzt" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARIAAADyCAMAAAC22ronAAABLFBMVEUAAAAZEBUZEBQZEBUdFhcZEBUZEBUZEBUbExYZEBUZEBUZExYZEBYaFhYRDgwRDgwXEREZExUZEBUZEBUZEBURDgwZEBUZEBUXDxIRDgwXEBMYEBUZEBUYEBUZEBURDgwYEBMYEBQZEBUZEBUZEBUZEBUWDxIYEBMYEBQYEBQaERgZEBUXEBMZEBUXDxMXEBMXDxMWEBIRDgwZEBUYEBQXEBMWDxIZEBUVDxEYEBQXDxMRDgwZEBURDgwXEBIZEBUXEBMZDxURDgwZEBUXDxIWDxIXEBMXEBMRDgwWDxIZEBUXDxMZEBUXDxMXDxQWEBIYDxMRDgwRDgwRDgwRDgwRDgwWDxIRDgwRDgwRDQwRDgwRDgwRDgwRDgwRDgsRDgwRDgwRDgwQDgwZEBVxw16zAAAAY3RSTlMA/Pr0Bu/r8Q739gj5Cv37GRPk6MXxuNtA+Dw14d7Y9mMdvK7m1TAmFlIQzSPARCBtS+qzj1dOqX5yXuGV5kjRmfjuyYpbZzn0LaGGpZx7dyrDyPXbzIK2oNa90pOq0N3YrqWk2s0IAAAUt0lEQVR42uycaW/iRhjH/cwwM7ZjVLBdG4Htgo3DYUxA3JRyFEIaIId6pFKrSpXm+3+Hhu62TbZh12yQgrP5KbLygst/P/eMLbzxxhtvvPHGG2+88cYbb7zxRpxJiOVsp5S7rZfTYkL4okmWa6XuebPbzQ91dR5MRqvWKF85S3+ZsiRK9Xy3HRpXMh0xWeKIA8D2IGv6ppFLCl8U4m2msx4FDHF5hTiYjkkZRlwCDjIHjGZ0RbxKTvhCOEkXmuvQL8ozDYNEixNT76zW683KoUVJcyUECIAA0fx2pix8CTQ384CCBXMkO94036xVkwkhca/UWWZ8fh9U1nqoYIwwBOZEG2VPhNdNarzomRg4Dmy9ta6knw4x6dzC8CRF4YAkmk8JrxfxdBhaGHNgc/28fit+VLtc3sOUgiL7g1cbUcTT6ZWOgEPLb5TKEVJseujJ6oxIXu9MeI0k8z7mXEJ+OIpecZQHjqZgol+nhVdG4mS89ChFqGgMc2eJfSwrr0tySzHyryzGioW8Z7gaC9uV9N5q5rWQAulfCq+IamZJAjyXnGzm5HMcbsAkmRQXovBaqGbbBtEJNvrlz+1ZpjJg4r2WCJs4HZnMkJCXPxU+my4DoPorScS1G3dGZDVoPu8StzBh88Vr6AHFjKtiS/YHJeF5jCgG2o6/JOJtw7Mloo6ywnO5oESiXuz7v1RjgpU53mSF53MZEAdaNSHWnOTaGpKdSf4gVWfBJYh48S5gy/lARthcF4SDkN7IxO7F2nEKGw0h5DcOVYSXfIlavRjXaifNHiFQvEsdbJycs03m3sV3Op24s2cSKzYOmDM7JkLqWogryYypgGo0hQOysBANMkJMOXUd6tj5w5ZVAUKsFdceJzeXMTOaJ4eVmc0scxPT4jWvF2eKlznwuKc/A+oOhTiSGLdIz2qVIi8BV8uFCIu/OUsBux1Lv0meWw6e30Sru8VUfX039bz2oFMSP57T+zKx7WEcU3Bi7CCE29VIr02vdct0OAeMtbBR+tj5FkJZVuYlIX4kBsSg6lSM1BIOLOD/gPGkuCzv/tzeHBR5GcNptNjVYKaOItnIWUvlDzAxqNfZXYZSUXGLuXEs5isTALwqR2rieog/ABwOkjYXd0htyBgHdSF+ZC0ZpGi5proB/gGIyzTMPanIEGugrqpC7EjdMaT0LiM1hXeUfwhwCZHGU4IOVYLk4EKIHemRqynOZTQPI/wJAMB5YpZQCPBMoo34Fa6Ja+qheTPa5KDHd+D3Uv+rdDwFKfoghm6T04GYw4h9vvS3ozwBVfsfWIN4jQHN2jGcuYptTZMijgHFHn8gyaP/gLZLjw3quqgB6mWF2FFtYOZ5qYhNrbrLSDgg9zbx0B2HFALqnArxI+eoTI3agnTJu6T7BADBMvlAkY5KEZpn4tjbXFFEelFzQvuBu8DjPMxBHxQe2IjJZ8qkE0dFsoatmpGHgOEDLTB6LAmC1n95fEkxyH4lfun3noZP6TIdNe7M+T0g8y0Kfi/Ne4kU69+hiFhRFUBhPpaKFPKyZGWiL8g89BYF8S3Sv54zv31f+i2ogop6N5bre8lGkTC3HFkS52EQAXinzPYgb4Nu+C69iH1VBhjF02uEs2AS9k6j25TxYb93D4PtEXMO78YmFy2YcbQ5F+LJ2Olp04IQmf7DkMr4FsDwj+mMCoKQyHgYZnhTEWLKQFWsOyE6xow/QEPvNNkeADgflYVyI5AQwfHdmZYcWDAaC9Gp0Md+8wgpL2SvNZCV4iCWgfV95arxVm6vBW/+NIAkpnXzOkOMxTTVvCNjKoq+j40nn5gNINgeZGDGRpM4WK2LGM6e/6Wi2WRU2KvYVTkHvhXhcSZWZ4gWJc7AH8XYRO7JWFgy9oqE6bbGHpkIgr/dRuUAgJDUr8dxGP8olhSxu19yKDtF9M5OgN8zQ1tF3unC1eAqtpnmH7JFhvU9Jxr1iacgwLL7twqyjAA4J1tdsB7LxvcxdQcr9ljYC7FiY4JkvBUEF4uGgwG24VWeL2NvIvdc2hiHZ/smiJFfpJoEwAFQ4DO+RWaj0zgnmv/wkO709w2I6Wa4dR38PgFvwWHl6MJqQizVL0qpy1Jyr5/WUQlz6ntHgLTnM/RfS0zdzhHd5JmuVS86p5XMuHHtTFxvs55O88NaKqout65KTb0m7Iu4vJlYEtraCbP0wbFYSDlb6d60nIE58+YyAvR3MgRAQAJvmi1E8+y6gZnVLu/fHeXa2ygCxHbTyWPIM4Vabthf6ZTN5gGAJpkywQgQAvj7D0NvElYuo1y71IYWNWPPy5xIZhcBgxnH9mj88ptpTqrl3GA1NyVZNgFhy7Emjfai3Z7q2JYl3UEgc2BcoZrbuYxw+S5Cn4ycTiG6HuXc3cJmDBCye8MjyDLpRtjyEcUTjk3HaN/UC+mT7c9KpMbnjcGgc+MaDBFAwEMPu80I/UbDwrJujS6j6ZGqD6ZqkctIsp2rzIuPEsXccuqpCkK+qbtXg2yqmvj/a9KpXKO3ITIiEsLWIvtJQxHPdcdUWKvzyft/U8nKyFVl4ADYnzZuX1yQQnZkagwALHNzcfHRPf9iqdmzkAkgsfb4k6adHBo9pKP5ZnSW2vHiRCJ9m7nuG5aJmKJI1F9kXz7JFIbtloo4twM3V6pGWHGptAkyFcltdSOknZVFVE2yfbd/Xkt/qO/Zabqx3LhERqaEkTIxpp3ai4eQRGZFgQMq6l4zETkOj1sYY5ivLiJ8Qa5nIwAucUmzR15/uezmK8PKsnPdX+hzTbrWOHCqEC3YrGtHcKuReL6wiYJQMK2finvdjOYSeeLMR6koNVs9tAnM6BxhglWTqKZmWfaEUgb3MMYkFoSr9ekRVKkJsbIO3cAx2/3Lva21NA8JglY9GUn55jJsGRwwB8QR3x4JQzIAx1rRDwfjTPXF3WXL6dhVbVslN/XPMtfMBMkS3VxE/rrO3ZXRCn3iE4wnGtVs3Wst8udp4RgK1HtOSvlp6NtasOp+7qPbKgxJOGhGf3fiJHWZKnUvKpVOrpnJ3NZSx/R4tPRSx5Y5mzS65c9X1QfAxZsjOqtnUM31TMYIu3teBVChBNv6EQTF53N2PaeMsE2n+syBs0mATV6BJNXSaq4SaXKAx2/5BORi/B+UkZ0SqaiZN4coinq2hYvnMQ8mZxUTy6o9KhykrVpQhuNuJaU25VgJ8wfqq4ZF7uCXH/M8AzFvYy7Tq5pwIK4QpWYc9+P+Q2pQVCU0P2DrbTjqZBPDbezvSWQ9ipjmlg7XTBRaACSI7WJ+oraSELVuDnkCOYeRYl+IKeLSIxOq16rCAanIEkziurmwsMAMzP6BBzQGQsY8hvd/bDlbW5qkDg4cCG9NmLmjI5iDfQblttPD+iBqXBXFdCH96RenVgQpraYQRy57FtX1aOOvhFjr9Bf93qrRvRU/da8rClgvlk2feEVAcU4jdSLJ7DTQfA6ACdVHuY+qeC3LCHcSuz/rxZdidpENLd/ULyKZSN3F73cxACDsWL3a7tNqOpaitAq7v/dufKSPYb31uEL9aB6fD4D/B8ZI8TK7vKcaKivkd3eqW/nj9z/WR9n+lFfbBaNIiiSHhD9k6z+a2tlxykuGmXxT3Rm/rv785odfj/GpTeUVA+7noxVeEvDHACjYuRGf3hPAZPkjj1kd//btN1/9foSSiHkXIasRKbLmXP4/QJJQK/PE21Mu4RK53v3B9W9/+OabH7PHN12qGJYk34iRRvY68CcAIKv/R4STGwqYGgVhJ5mfv//p6z9yRyfJpeFydSpEosl3gI2K8CFdCRTa+1jwLP3y03df/zIWjoy/2LvWtrRhKLwkJqWlUiy0XAaWQWFTboqKCJabIEwFBUVBFN36///DgI0Bc5utl5E9j++H6OMHL8fkPcnJ+55Y90kUGdxLJSeO1AdArgfNVL1RHfCFtb9NgVrvXKAvJEvZXR6QHYNSZvDLepmhWLlqnWcdmdMhn/7roTrSEWwKdSGpOcGBbFR4Xvyjt12HaHPuaBcLQf2INK1/P3p/UTz16zRdXLK0X3KRE7vBux0ZTOTIDwBdoY+zBLWFWZZ57B2JSE+weVqUJWFvGLKrCaNEvPrnWQLQYX4m/TZYwPPF2GM/vVcWPB26ailLJ04Hc2y0HpBGU3LlWfBLCwR1amaPBPkSEBuPft9IX1KEHl19ij7IDmLcbBhgxsEA+tSurEM0MRvu5i0/eYQBEFceP7t8HHg8qVuqnn1aT8uI3bYbtnygmRwM+fEHlp98jQlMZG0yB1RyaiDStXulfN7K0xSSmpNBxHjFa5udRGSagiH8MQCy9+MNCpHoMJz9YCSpf5WUej9BU8Zp+uVCwHg5/pTMM+po4LnROBqcY5q07IVLJd3fMCT/jnTLgtKjyXu2UpT5rYAJ2Vp0Nuty4w8ITLLQ6uZwiiQP8chht71iLIW1yzbPBU2F2Q9OjIMmyqKb8952x7TTzGgRDR16S7UiBzGIVg2yQ7JRtkkXNO1ea0EYblpMXBfPVwa4+X5E8Zg9GyxByIYMa/3dnXNBa21StHBCDuww1RnnCOi/BQCAwKJ7myAg+raNFw7dF1pd67opyjgyw7KHppQiUH8A/rvdv6QeB3kI+OjGyjsTIUkJ5f4GRSER/awzbUposQsndn8w2yyDYRByQcDoDjlhSmbcvrflejQtnDhhSdXcc2+rBDxoCaFDhHQIIYCjtmZmEGnVPco9TRlnV2XEgMmdDMEj5pgQKzPt6AVANGq2HdNZR1LOBzQd+4IM6zC5kFf2Q4ADPJK/8wg33rwidrS/Vyt20/r8geCR2jSJHZ0Yliomuc275cBMiYPjGjQpRPH4FMxCXyNhXqcTua5rWnuPIno9wRwyLVtMhImfQXBs93cV/N8phSlU15+yV7yStHpvjaJZkhfjzK5pQap7HwGAuZKuA14fA/i3z552oriUlFzucvEmvZ9IBgkOn5r+99qP444Zu3/Jte9+opLLeluuS3fHFHXYWK5gvyhmn2BtrxypmB2XSxDbiDzjVu0q1b87pUmiFKuUkEP2PoEEqrI44hB/dMey/Iw6ZyYn5W66Z+/owfJpFBOSMUkn1lhWViEEQA0ePrNIuNHp5e6bFC2cUU/yuCofmImJdSW/FyqoAALWV6k9N1dUM7273i1Ns2RYEA4iLK7KaxaDPq6d4wMR6RiqauglWv7ttFr3qS5l+npvEfsJG71ceSwoy+uxw6MwYXUAOMbZSDzvTb3pdZ+mXdHW8Pr9ycji6SpW3MnlP5DgO+snb765L/sQo/MA+7f2zqwvNElbkiRd0XWRM0Rywy9iF3CsOo+yiU/Wpflw2D8PySOz5UcsVjEPSfwkU3s5Pbm92zlXLnYo2tFP/uwjFwFDQORzXlaaVXdi7XM+4c1XA3uVrQPXiZODgEEM8sflQORFTbv2biundCiUIb379L6y6kA859QRi0WHKOKw6vAXfAyGAOo84Rim4AoVNz++tEh1vXohdfqnFO3oZ5DYkJ0yCyDU4WgYjiwGiB9+QogYbuztxF7j905elZXzQZbWh0nWPyaaxVB8K+zzqRwWfS5C4nKwcRlIxOyWV5ra9kxb0QZNmv1L1uXP9siQSqrZdDrhdieTH153mdtvNEG6H5Yn3zDB+mHu3JPLvIVkti+/llL6GSol44tCPmcTtAZNBemFI30heLQbus59C0aiLdVTXcoEfItFpF3u5a5o0g4sHJu31/0v3f/VMvsqcHe+DKQb2qoDC0Xkpt+5a73Nkhl4ryuDVIbGo/DCsHyc0+4GNAn4Fg5LV0qV2xmaz33/GtbjsiJoN28hmb1wVGyClqG1YLIQBMqCR9v+Lw34r4Slw5SgpLpvIZnCUpQ8ilZ5C8kcvXpsqS5N2oGFY0cTbNLt2yz5xt699KYNBAEA7oEDEupMeliJSQ5LLjwqxGNFLcrKEVo1yaKINH6AjW1e/v8/oglqa6q8OLSya/s7chx5X7PDbOLjWHAQcRmSRDVShMz7f7uu/X3V8YqTsy/Taonqnc+IrTPa1iUVtYGpNbPLfPSRhtBMWJkrp0hTRzJSQcbqkNJVl5wzu/eh9JshNKqgk7mimxQZO03KGmS2u1oKrkJOzMrC61CZ0QwJnUz9ezp1FwvBxSpL/2VL3fnCRMpgTWOKZgEjCifl9Jq4DDiRe1OGJNEKBLGwvAE90rI4oCz3JUeasQKSjTIkiZbHQMuM1keno29x5HJQ3oAmqmtNqEZlSBIfYw3k+GUxcKKyFIjOvLzbOjKVEvmoLB044guH1PLs9LL7bu8i58Ps6xa1jFqnjrPm/XoTLNN/OvdfmrgEjnfiRU77dhSa3Fz3cr2P+W4HLo8+n/YMeLRxOZKM83072POkdFdG7f3lujmwFAIgW2Spx9Y/0Bh7zPbe7SxT6TdilwCISb+T8yV74gYrNZ9V32vD6m8ZAKDyGpd5T9T251Iw0au9GZDmcqMRgNjippv/Q/On6x0J9VYx8MeH74FJBKjl1CjCnq49Mh22feNZvO615yogxK3f6Od9zBxcrjnibnD22sJ7HtkEwB1u3RSlVulzpDjJb92XA3I7thkCaOWNm4X4Qp60p4Ix4fdfitbDYC8ZImoZGzlfeI+d+SvBgrvnX0ntcVYVCMhpE9ULVfLYnlqWa0YPz3tQWaYDj4T9tVuYMXNQqVvCXuzrf84hXeNuxxCAzMWyXrQsZMWwBLP92fFP3Zv9YuUAAK3Gs1wfel9U+WJKxuPbZGfWney3DgJyvZoaOc8WvewiJMbs619zyOVkfjjwgvD84VmxJpFfmlvu6sXw58bNmG6l0IgovGHR5pDfrkzusuD2EJDzkS0JCdgu7hRsmTn2RSjNgvOnHFFkCwIAMuNJMU4zrzBMQAyGtfbQY/CIm+uvuU+JvO1qS4T25D6yEQDMcN4peEAe66M3iGpjS0kAoIL7Vv5zRO+5sJSjFXcAuHYHs3xnmk9TtxAOKLwbll/Ik+EOAQFQeNcF3Zk9MzQ5Q8BwWbbsSAr4hGDuvlO8492r2j/aqWMaAEAYAIIWwAQrEw5IGBmZ8G+jay00uZPww9/9/houkrR+piAAAAAAQFkBmYYuTD1q/c0AAAAASUVORK5CYII="></div></div></div></div><div class="rowContainer_brmT"><div class="col col--6 padding--top--md"><div class="text--left"><p class="featureTitle_L1YZ">Backed By A Community of React Native Experts</p><p class="featureDescription_sP1D">The Ignite Cookbook isn’t just a random group of code snippets. It’s a curated collection of usable code samples that the Infinite Red team’s used in their own React Native projects. Having worked with some of the biggest clients in the tech industry, we know a thing or two about keeping our code to a high standard. You can code confidently!</p></div></div><div class="col col--6"><div class="featureComponentContainer_HpZw"><div class="imageThreeContainer_uPl6"><img alt="Animation Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGwAAABsCAYAAACPZlfNAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABVxSURBVHgB7V0JWFTlGn7PGUA2FVxQTIVhcV8wS0tLUcuszKWy5d68ate6ldcFtcVHDbyVW6nYtVtZKVZq5m6WaaZoprnjngIO4sbiMoACAnPO/b4fKSQGhuHMMOi8PiPD4Zwzc/73fPv3/0dCNYPBcDEw36QLlyQ1UAYCVMBHAgILf0o+KlSf4vvTNiNtM9I+RlWSjJKqJinAGUlFnKKTkprp/eJQjSDBgWEwGHwK4B0mK2p/VUIYDXJYSUI0gSTFMoGqqm7T6bJj9Xq9EQ4KhyOMSVIU76GqpPaHqoajKkAEQsEinc5E5PknwYHgEIQ5BEnmcJO8kBC/GDgAqpQwQRS8R0NRx9hE1WkIGqgkFVKsTjZNqUqpqxLC2HEwKbpIQB2KagkppqqIsythLFEmxWtO9SWqJOxPnF0Iq06qzwoYJVmODtbXnwI7wOaExRvSw2VFWUhxUiBuY7CNU2R5WKi+fixsCJsRVihVXpEqSRXuIKiQo0OD60fARrAJYexUKIq89XaXKnNgaZNlpYctbJsMjWEwpA1RFN3BO5UsBl+7SZEPxiemaK5dNCUsMTE10qSoMbehY2ENOLc5J9GQHgkNoYlKvP3cda3B7v/1CC1ylJUmrDCt5Mn2KgxOmAUNdJwsZ/eoLGmVIsxJVsWgBWlWE+YkyzpUljSrCHOSVTlUhjSrvER2MJxkWQ8eu0InreKoMGHsuju9QS2gDrXG5a+QSqSgeDTFWdFwQjPoZGmoXu+3yNL9LSasMN3EGQxnUKwxjDpZ6WBpGstilViYG3SSZQP48NiyI2fJzhYRlmhIm3Mn5wZtDR7bAsXbIntWrkrkepakKFvhhM2hynKP8upp5UoYFx/hhF3AY12eaiyTMHbhnarQfihUjZ5llmTMqkSnV1hlIK8xW28uC2JWwrgNzUlWlcCnrCxIqRJW2DcoG+BElYFiM31psVmpElbY5OlEVcIcB3+RMKd0OQ7IlvmWtGV/kTCndDkOSvMY/0KYBAebPXIHg9Tf6JJx2S2EJSSkDXXGXQ4FnwLFY2jxDSUlbAiccChIktz/lt+L3jidDcdFcefjDwkzmXThcMIhUVwtFleJTnXooCiuFoVKNBiuUjok7yqccFgUqUUhYSZTXjiccGjw8hf8s1AlSo4Re6lwwhwkk2kA/3QRv6lyeyIN9kCBqQBZGRkwGq8gLS0V165l4fy5ZBQUFECWZfr9Gnx8fIWyrlmzNvT6INSo4Y46derBw9MTnp5ekGg/h14RxhaQiSMUEWZjCcvJzUb8yZPYtTMW+/fuRlp6KoxXr0BRTGRQKbeiqvBr4A/fOnVwLjkZimpCfn4+6W0dXN3ckJ+Xx4aXCKyFAL0erVq1Q1BQKIJDm6MBHVeD9mESb2uoqlCJksFwLsykuB6EDXCVSNm+bTOWLVmElJQLcHd3R716fmjQsBHatGuPJo0D0ahxE3iR1Hh514ROpxOSxgTl5eehgEi7lpWF5LNJtD0fB/bvxumEBOQX5CHl4gXUql1LENahw724r0s3hIS2QC0i9XYlj0suUkJC6gDSL6uhIVhiftv1CxZ/9QVOHD9CA+uD7t17oUvXcLRs3RZeXt5C/Vlz3jwiMzMzA2eSTuPokYNCYg1JCbhOqtTPryE63tMZ3cIfRtt2YfCkz7mtVKcqDZPiE1Oj6KI0y9Dn3biBb5d9ie/WrYJMaqz/wEEI79GbJKGhTe58RVGQTrbwwL7d2LFjK44fO4L09BQ0uqsp+vV/Cj17PUrqtiFcXFxQ3UFexhTpVEJqjCxpEzTz3f/tN4uw4IuPyc60RcTYiWRnmsFeYAlkVRkb+xO20+vYscNwJ4flsb4D8djjA4TKlKuxupRkKYZUYtpWrZyOWe//B8uXfY2AwCB8MOcTNGkSiKoCOy0HD+zFmtXfYO+eXUI19us/iCT+WTRuGlAtVSXdkGtdJEn10cKhP5t8Bnt27xRqcMCTz1YpWQxXV1d06twF93a6H8eOHsLSxQuwauVSbPzxOzze7yk8+/wQ+HL4UI1AYxugGzX69bfofaW7o35YvwZbt2xEi1ZtMGr0myJ2qgj4prmRm4OLpNLSUi+Sh3kVbm41xMCz628t+Fi2YWxHW5HDc+aMAT9v3oCD+/ciMCgYfvUbVOr8dkauy81lV1EZ8NGFwW8+eYMPwZtca4uPJbuTTIO4asUS8ix3CPc/n1x6FxdX1Pfzw0MPPUoS+zwa+jeq1MByyND5vgfQrn1H/LhhLRZ+8T9MfHM0/vbCi0IjuLt7oBrAhyRs/HRUEjyMu3Ztx6X0NHSmeKhlyzYWHWeimGvlisWYOGEMDhzYI7IfTBZ7fkx+RoYRBw/uw45ftqAlOTEcv1VWFlhi+fvd26krzp9Pxrq134obpn1YR3h4eMLB4a6Jy8RSkp2dTRmNHNT09rbomExKT82cEYX3Z/wH169fo3MUnqck2Ku7ePE8IieNw+8U02mFEPJeJ0dNx8CnnhcqctKECFKXp+Ho0IQwVlVsHzh4jY8/WerAFwdL0IzpkVi9apkgpHB/1ey+ojWI/v9o3ixBrlZgiRox8nUibgYMp+Mx7d1JSEg4CUeGZkFJu/Z3U66vJvaRC32Dguey8OuOWPxCKSsWK5PJhPLA6jGVbNsJiqvOJidBS/DN1rv343jt3+MRf+okpr83CRcunIOjQuZ13aEBAgOCcG/nrki/lIbDh/ab3Y8J+uKzecjNzYVMjoClMJGk8bE7d2yD1uAMTN/+T+OVERH4/cQxIm2ySH85IIwyL8IPDcBZ9U5MWFoKPvv0Q+SQTSsNSYYEUj8J4j07HZaCnQ0dpZfSL6WWq3KtAZ9/wMBn0Iu80gP792DunGki+HYwGGV+YgI0Qp9Hn0DvPn2Fk/DduhWlWqUkStrmknNiTYqI47SrV67YhDCGq6sbxoydIEKIzZu+p0zJHjgSWBuShCEJGoEv+JVXI9C4cVMsWbxQqK+Sg3s68ZRwJAqdiYqBJUwkkWE7+FKh9OlBL1CJJx/frV1hkY21F1SJJExRoamybuh/F14cPoJqNzJmv/8O9uzZeYuk1ffzF0FqRYNgrqW5UQzVlpwbW9e7evd5XNTpuESUnOw4rZo0ZEky/weNwbZs3BuThQ34gOKsXynwLbpTA6nkX6dO3YqcjtJcNURtqy4VP9u0tf2KSb6+ddGlS3eqPtygKvl2OAoURT0jq6qUBBvgfrrgSZFToSomvBP1lrAJN27kkkprBBfXitWmWH3m0bH9+g1CfSLN1mDp57IQS/KVy5c0t5lFUSefV/yj6xPv1bKThPxAHxdXnSnWpGivYviiWdLemDAFsz94F9Movtm37ze88lqEyOldvLDsjy9ZFjgHyOmk0GYt8WjfAcKO2QOsgnkgMyk9xm0L/B2sBR9/7VomEuJP3UxsXxE50wJKw+l0rsjMMooqh7uHB2pQwjs4pDlq0OfXru0rbHa9+n7wIDMiy25JLjwtMzExzWir+cxM2qw588nVn4ttWzfjyOGDePqZF6APCsWF82eFx1hgxr3nC3AjRyYgMBijxkwgVVUH9sLlS5dEn4mJNIQ1Hi2bgJO/H8O+vbvw888bkXLhvNAwfK3uHu5EgKc4v4+vL+1bgKzMTMriXIeLzgUbN64X5+DqvQvdKJ6UkWnWvBVWrVkZJ25XusnjyPUKh41wFxnwiHETqUamJ3d/OeZ/HI3m9AU4e8H9HfxFWUkUEcfeJv/u5loDHe/phOH/GoVQqhbbC6yCkymjwqmrpk2DKkQYJ6+3b/sZK5cvEf0sLJn+jRqjW/eeCCLJad2mnbCR3kQW22b+O38eayQmmV+ib4Uk+9LldFw4d5YS4HtJKi/H8vmFq5aQmBJNb0fDxuAvxoXO6NnvUoyzn8jyFCqOE8FsL7hLSlUVUZ5htRDe42E8TuV97kW0J7hmNuHNkSiggZsYOQ3tqSRTHli1cz/J4q8+FwPMLXoPdOuBnhSIc7sEX4O17Ql8bpNSMLdFs8ZjCiVMUddIsu0J4y8cEKjH9JkfYefObVi98hucO3cGbnSnFZY8ulAWvTnqk85u3CRAbJfsXMznks7Czz+iLIwJne9/ECF041gCDgGiZ0+loqsbJRD64cmnn8dddzWha7Y8/WYOLH0usmuseM//VdVkiKysTGzcsA4b6JVkSISrS2FZv+uDPfDggz2Frtfigi0F29T/zp0pJKRly7YY/+ZkGvSmZR7DLtOuX7dj5vS3hQaZ9PY0UuP3CWdJSxRNhvjj9tWyGaeiYJ29Y/sWkR3hTAg7ItzZG3b3vej6QHe0bXe38JJs5SHm5uQICfnqy89wmvKcoSHNMIpSVK1bty83wD986AAiRr0kVPnrb0Xh0cf6Q3NIUmxIkF8Pfuvy5zZlrQopHFUAViM9H+qDB7v1xOEjB7F39078+MNaUplLRZ+Il6c31dvakV1rJppqfCnwZsPNx1kDlgp2qc+ePSMSvfx5J08eE651ePhDGDzkZeiDQ8pVx+z1rV2zXMwP4O/VrXsv2ASK6Y8VS4tNmXWsOWLZ2ddFCHD0SBw2/LCObMsV4fqyV8lk+ZCL36JFK5EKa9I0QHT9NmjoT56dl3B7WRq5jsZ2k1UVe6Lcd3ImKZGqBYlIJElmNcyD7UVVch7w7uEPk0p+gBwEy1oFWKUPevIRkZSeOuNDShZ0Q0XAcV4uue5cwbh65bK4kTgLxGFM8e9QfFWcW26hqlSL5sAeEt/JnOXn4igXMI8ejSN7c05sN5kUqqvJIndZq5aPaNzhWhs38dzIyxVJXHads6i+VbdefSE1KSnnaUC8RUDas9cjovjKTaZ8M1QEJ44fxWuvDKZwJQDR/11Ag21ZnMjEXDifTFrkO/ywfjUuUQ2RzQCrX3b1G5GzMmTIv/AASax3zZp/qEPGLUahKtWiOfBFcLK4RYvW4lXUX5+RcVXYOyaOi41HjxyCQnakNpFmMMSTdJnEcX71Gghp8ydJDG3Wgkitjbp166EFeaVNqejKatXabiyOF1kS+HweHpa39W3bsgnRVG+7SJXtktke7o1JiD+JqMjX8TBVwl8eMe6WBZxvIUyWa8QoSr5Dr+JWdBeyCuRXEfiiefoSgwll5VHoqamiwYeJ4X20nFvGGQpxA1H8yPavPPDcuPXrVmLmtEiRJCgvLbdly49JS5ctiSm+7ZZP0et9jXTRc1ENwUTqKK3DL85QeHBai0jiZlQmmP8uazwRkG0mf8Y5cl44P1getv78I5Wc3hXZjPKkmveha4ktuf0vt4WLi7tzXXoLwTNFW7dpL5yOQ2X0sTC4o+zLhfNFycbSAm52bt6Uktv+QpiQMhUWL3x/p4MnWNQku8k9+zk52Wb345aJU6dOWFyqIecoxmg0JpXcXqriddUpUXDCInDrtzeFBezBbtu6ySwh+/b+ZlE5qQiKrJtS2vZSCWOf/06WMo73OE7jsKE8sK0cEzFBxE/Lln1Vat9kTs51kRGx1Bs1J10Ms66Nq85tjFY9i9UJ7DxMmzoJYyndxIG7JWjf4R4Mf3kk0lNT8en/osleZd3y94yMTLJducJuWSBhRnPSxTBLWHX2GK0FD+bn8z8UnckcY/n4WF4w7dmrj+hp5CrEvHkfIMP4Z9KoVq1aYjK+JdN2SQbnmpMuRpkp5bFjJ8VBNT0HDeaPOTr47ufZo0u+XiBCgYmTp6J92N0WH8+NtHd37IQrlGLasnkDJZHjRfKYMhWi4sDSytmaolixdEhJVzOvDSzrc8qM9gqlTBmGOwA7f43FAqqDsZ0Z/tJIdL6vKyoKnsT46oix6DfgGVFyiZw8XrR+F9YBg8BBfFl2TJXVcse63PA8NNQ/lnTFba0aucL8+fx5wsl4+pm/U/HxOaurw1z6f3H4a/j74H+KFNOEN/8tXPpwSizzaj7mCCtUhddiyzu/RW4LZ/IVJe+2fPo5J165HeAY5SJZqiZHzaxw32Rp4Ew8L0Mx/5O5QhV2omp6U6q2r165jP8ocoZ/OiCsCrP0lpz3jn7gG5dwZs18Bz9t+h7NmrfEO+/NFg0zWiLh1O+IifkUu6lAynU8sdIP1eJ4tqqoKNzINSqSrkNZjkZxWCz3HJupqikCtwn47uaVejZtWi/KLP8kt1xrshghVCGIjJqB8W9Fihzn5cvpYjuvDsS9hx6e3lMsJYtR4VxofPzFKMp4a7ZyTlWBW9DGjBwuvLsRI8fhkT79bL7oSobxCpZ/u1jMN/j9xFH41Kk35fjx41EVOYdVyWstV8+pCnCVeeo7E0WTJ7cmjHt98s1eSNuDJZsnw3/2yYeLFi/9eigqCCsfvE1OiJq3lT67Wj7Leenihfh+/SrUJrU0YdJ7YnqUPWH3B29zfCZLbj3IQ41DNcPxY4exauUS0ePxzHNDRO+gPVEZshhWK+3qSFpaWoqYs5aTkyPa0bp07W7XVXAqSxajUla2OpHGtuPjebNEkMw9jxwcV2ZGSkWhBVmMSrtFRaQ5cjmGw1Pub9z80waxjvDQF1+lZGwD2As8NlqQxdCklZZJox9DyeVPckSX/9iROKxcvliU9Ac9OxhhVA6xF3hRymYhDaKgETQNPCjvGCXBFOFIdTQu23P//sULF9CJUk99nxhol0UuxRioyrDQYO3IYmj+zYODG0XLsqmDBO3nTlcUrAq5XPL9+tVo3KQJhgx7BTVr1YatwdfOYxAS4h8DjWGTW43TWMHBDfRVneXnZWQ5/cQOR98nnhIdujYHXTPZqw6lPXBUC9hUN4SENBxDWeseVSFth+L24+OP5oiVDJ4a9Df0evgxm7rwfI18rXzNWjgX5mBzZc71NJY2upgp9rJtl6lksmjhJ0g+c1rMNxv8j5c0n69VBL4mvjaWKlE7tDHstsQ0OySs123t/nMJ/rNP54k8Ic9s4eX1attsbV8pRpav6/nabClVxWHXNcFZr5OLO5Snz9iCOLZV69auwPr1K+HlVVOQFRQcCu0hxfA1hAT7DbMXUUWokkXcSxKnlY3jR30sWvCxmBD+WN8B6NGzN7RCkerjqauFRNnGqSj/ezgIEhIuDgV0Q6ydn8arvEWMGi5WFOXZ++PfiKRsRn1UGpIUK6nKWlnOibG3NJX6deBgEA9PNfGaIZaTdyM3F29PGodfftmCgKZ6zP7wc/j7N4LVcDCSisPhCCsOfui0yeQZDvEwcPGMs/DS9lu5YglmURaeV8p5b2q0mMxuKYSq4+S1ohwiG7jGxSU3ztFIKg6HfoLMzYFbc/MlYDCkhZlMaiANchgZ4IADB/YGLlm80IcyrD4vDB7u0z6s4y1NQoIQqEYKwYzkkyTxgp4KcIYXReN1tqrKFlmL/wNy7M4otyihFwAAAABJRU5ErkJggg==" class="circleFaceOneInitial_lr7i"><img alt="Animation Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD8AAAA/CAYAAABXXxDfAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAApLSURBVHgB5VsLVFTXFd3vDTDAiILlI8TgjKLWL2BMNW1WAzZNTIwVtTXGuirGxC6jrVq1mE+D1MTPMquIsXElTQQ/qE2aiFZrDCpEs9T6JbD88cmMUUT5yADyZ97LuRfBQWaGNwPGAfZaMO/Ne+/O3eeec+45590r4AEjR18UIUoIA6RQWRC0kGWtAMFbhuzddA+dG+ncCEEwCDIy6JurkoiMgTq/dDxACOhg6PV6b0nqES0L8iQiEmZO0l7cFUo6ZGGPSlWZotPpjOhAdBj5xhGWJ9FhdHsI24aQpBJNcTpdoAEdgHaTZ6QFWY4ldY7AjwVBSFcJptntFYLD5Jl6myRNPCBH46FBSKooz48LDw83wAGIcAB6feEsSdLoHy5xoMFUH708ZnlafPymaDgAu8iz0c7TF8abJDnpwdm1chzYl4LyMqP21888l5iTVxTP+mfP84rJ6/UFWknyTJMleRGcALW1tfj0022YPec1uLt7kP1Ki6h/51k/lbahiHwjcTFNBpuvnQN7Uz6Dm6saT/z8l83fUf94P5UKoE3yZsS1cBJUVVZix/ZPsHjJm/Dw8GxxzR4B2CTvjMQZvjq4D8OGh9LfSIvXlQrAKvnGSM35iNfV1WH357sw4/cv03Rvfaa+K4DdtpygVfISNLHORpzhUOp+aHpoMGTYiDbvZT6qQeoRa+26RfK5uYXRzuLVzVFfX4/k7Zvxl6V/sznq5mCzAItLLF1rRZ7ZiSDIVqX1MHHi+DEE+PfBgJBBdj1Hccl6S+ovtr5R5ZTqXl1VhcRPNmLCxCmKR90Md0PxlnAxP2GjTlKKhgKQgFBDHSq4mY/r166iuKgIJSVFPPhgVzUaL3j7+MDPLwB9H+2HoMBH4KZWw1Ec/HIvqbCIceOehWOQoykJ22JeI2ghQrL1NAi2s7Oammqkp6Xi9P+PIy/nCrx69UJwsJZUcTC/7qZ2g0rlSvZZi+rqatzIv4ac7MvIp88+gUEY/dhYRD49nquu0vErKryJua/MwLur12PosJFwGJQNhvT3j2w+bTpoHHVRb+05Rvrggb3YtWsrhg4ZQeo3GaFhoyGKYptqWFxchH17/4Ov0w/hGmmJm6srAvoE4ZlnX8DkqdN5eGoNTMM+/CAeBQX5iFv5HtoLWRQjm0a/We2ZrTf+VGtUVJRj9TtvoWcvb8Qn/At9qONKcfbMSayMex03qfMmk4kLS03qP46ClNqaGsybOxNRU17Eb6KmWdSE4qJbSDtyEP+g3+0ICCZTFH2k82P2T68vJYdQV2rpZlNDA2LfXsoJz1+wFIKoPBEsKrxF6jod169fI7m2FKyvrz+2Jqfw6Wvblo9QWXkHMW+uhMZT0+I+WZbIl5TQ/X7oIBhVYpWOlcT4yJtM9VHWDDAj4ywq79zBnFcW2EWc4SCFobduFrQizsCc47FjRzBl6ktYtnwFdu3cguVL52PVmg3w6tmz+T5BEK0Sl6nd8rIyMiUDsq9cRHl5Gf+9ajJRWZK4pnp6ekKnC0Evbx880vdR9O3bj4qnHtH0+PpGtRd47c0iDIY8bp8enp6wF5cuZKKBNMcaamtq+SczhekvzUJpSTG2khbM/9NS2EIFkUxN/R/OnzuF7/JyiFQ/DKOIzz8gEI8G68iHuMPFxYWHwlVVlSi9XYJzZ0/h6tXvUFZmhI9P70nN5KlKGiFbsXfWMdaII2gwNXBnKFsYedbuULMQlZ1PIwH8dck88g83+MxwP5iJ7P/v59j9xb/J2T6G3/5uJkaMDOfPtoXi4kLs3J6IkyeOITv7Mk/NXXJyCiJsVWVCQ0dh+9aPUWY0kurYV7wZOXIUvjl6pJXwmECGjwjHUHJ65vD18yM11fARup/8bbL7jRvWwtXVDe+uSSD1DYZS5GRfQsyyBci//j0kMgeCt693jwgSmmCzQNF/wCA8FfE01q2J5d7aHjAvHhb+OFQu92IpRnzQoCFYtTYBri4tYiweILFZgRE0B9OcpMRN3G5j3vi7XcRraEZ54/WFuPa9oYk4hyTJYaKSUHbe/CVokEw0ZS0n1VNuAhpND7yzKh6v0fNh4aPxszG/4G198NF2+FOMfj/OnDrOo8LBPx3W4vu83GxkZZ7Hq39cqEjFzfHN0cMouJFv4YoY6kKzfig5PJsNuFJQsnrtBuxMTsSrL0/HnxfGYNToMVACn94/wR+i5/I/NoLWAqJLF7OQvG0z3np7DQmt5XTHPHlQUF/uue1FVmYGGshX3A96o6R1IeJaBW3wKWfGzDmI/NV4sr11SE7ezKepMWOf5J5VWRutiZeWluCLz3YiM/MclsXEQtc/pNU9vpQfGI23bQrPGlQuKq4trUxWFrRCXl5hqSNl6HwKXFJ278LpUyf4qIx94kkMJ8/L7NHVTW01bpfIfEpLb+MU5QYXsjKQk3MJ40igL0ycSkUKL4vPVN6pwJzZ0xAbtw5Dhg6HPThz+iQWLphtyekahdy8WzLaAeZELtJ8npt7BZnfniOvXMzndqaiXl69eGDEJF9LgQcjzUYvuJ+OzbVUeX0KgwYP4WbVFlhesYPMLmFjIrztmHVY//75/nu84GkecwT306Ld5O8HI8fm44qKMsrqqlBfV8/Je3n1hJqCDzaVOZCPcyRt3oRj5MBYFBhgR37BVP4oJVWpX+0nAdRj9ONjMSnqxY4n/6Bx4vhRfPzh+3iessoJEybD3cPD4bYctvmHCZZe76Ba3uFDX2L8cxMx/vkoKpr4w05wm2c5vBadEEwIh1MPYB+FvCyYGUtvb0LJ6Q4YOBi9e/tCVKlaOV5mlqwkZiwvNQhKqjedAczRXr50AVlZ5yjZyeVZI3OkaiqUsLihurKKR5osRa6vb0BgUGC6kJ17K0kUMAtdDMzLs3C5rq6WHzPSLGxWq925UEgjElxUgpxBoUOXI89mGA9yhh5WHCL5OYNIAX4GuiNEVQb3B53R47cTxpABAT48RZL52rfuA/L4X7NPTl4QpD3oRqDaUgr75ORFUZ3EFvyhm0ClqrlHXqfzMcqQtqBbQEhqWsnZXBahV9Ip6AZgKzibjpvJDxwYyNa4pqMrg97Vma/abFEQk+V7UumKYEtWzc9bkGejL8noorbPbL3lWt1WpVBXlduirub5KZIzmNt6E1qR555fNi1GFwIlNRaXqVssgoeEBCbREwnoCiAenI8FWH0DoFKpV1CprVOHvVzdVdUrrF23Sp6pvyhIk1kD6IRg/RZFKdLW1pQ2y6jOugTVFu4Rt70TQ1ENuTMJQClxBkVv/VhDrEFnNwHqX4ZS4gyKX3k2CsAt3GlnAeqXKFZF2rPpyKFXJ7m5BdH04tIpVmryvXcUl1ibzmw/6yCYH6g3iSsebuWX7bOrXOzoZsN276vjixdNqsQftfZP2ZlsMsXxTLQ9zaCD8KA1oVG9pS1Uf0tpL+l7bXYw+GZDk3sUvZuedHeVV/v20lKUKcjSHlGsTtI5615aa2CrvdiiJ6oQa9k6GLYSxOoualkwCIJsINf9LXuf0FEjbA0/ABhunhSujvRhAAAAAElFTkSuQmCC" class="circleFaceTwoInitial_vFlQ"><img alt="Animation Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAABFCAYAAAAcjSspAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAsYSURBVHgB5Zx7cFxVHce/59ybZLN5dFvStMFKs9MkgIBNUcBaoIkooHWgTnUcUIbGYUAcMTx8DMrYdhCcUdEWH6OgQ5iRP2CG4TGCDmXMoi1QBtsUpFSaslsoDUnbZNM8m917jr/fudm8t8nuvXmVz0z2Pnfvvd/7e51zz43ADBGNRkOOE6wRQpYDaiWtqtZASECENHQotR8tx2k5DiFi0JrmsRdSRmx0N4XD4ThmAIFp5ED0aI0E1kKp9XRx1fAInWwTfUaUFM9UhhdHME34LgpbhEJhvVZqIy2WY5qgE49pLbZYlhMJh8ti8BHfREmJAaVvH+kOM4NosKSzxS9xPIsyu2KMRki5WaJ7m9fY40kUEzOUekRPo5tkSsqtKipKG5AlWYniWkfBJk3WgTmKhtxqy+4t2VhNxqJEoy3lSsnGuWQd6WCrkVLVZhprZCY7R6Nt1UpZe+aDIAyfJ9/Ad95py6gcmLIoJMiNSqFxtoNpprAw0tJ7+Pyn+p0puQ//oKN0A+Y5lhQbw+HSRyfbb1JR2GVIkD04PYgrR9RWVZU2nWqnU7qPG1T1Uzh9CJErNfJ1nWqntKKYtDtPskyGmOvi60u3Q1pRTB1y+gli4OtKqsJN6bZPGFOam9s2QuhHcJqjpaydqLU9ThTXbYLzphbxglvc9a4aW/WOcx8SpP6jIAjjulFwXFNllKVwVHaUjOKjRdySveGR1jLKUhxlbcJHj9BYaxmylLlkJY7j4GhbKzqOH6NuGqC4uBilS5YiLxDANDHKWuzhE7FqKONgNvng8Pv429NPomn36xgYGEDZmR9DXl4A/b29OHGiE7mBPFz5xXW4bO0VCBYUwEdS1rKZF4Ys5eDB1uhsBdhkIoG/NvwFjdv/gavWXYPPXXm1sQwph707Qfu8/dab2P735/C//fuw4evX4wtXrxu1j0diFSuWhHnGiHLgQEsNdeU1YhZIJAbwq/vvRU93F+p/8GMsLi2d9DuH3z+EhocfokyZRP3378aCkD8N91TdYmQWUqzHLKC0wgM//xlyc3Ox6b5fTEkQZtnHl+Pun25B5dnnYNPdd6Htwxb4glI1PHFFgViLWeD5Z57G8WNH8Z36u5BDwmSCZdu47oY6fP6qL+G+zfego/04vCIhrjXTaLQj5MeDqkw5drQNTz7xGL79vTuRHwwiW768fgMuvbwWv/v1L0HPmuAF6kCr5oreTib7q8WYYKW15g93gbZNx2PEl/65HZ9ceSFWVFTCK1+97htoaTkCP+BHuzZddA0vsBBHPvgAL/87grfe2IsTXZ2mDi4oCGJ5eAVWX3o5KqrONinSDxpffAHfveOH8AMhBM6k9O0HWuhym6xgZUd7Ox7+w4OmYLp49Rrc8K2bUFK6BLZloaenB+82HzD1Q2tLCzZc9018lgTiE8mWWPRddHbEEV5RgbkGpfiVNuX+0B9/uxWXrq3FnT/6CeycnFE7FRQWmZrhM2suw+H3DlE98We89vIO3HTrbSiiSjMbmt/Zj3PPv4CsLg9zDoVqqyV6aPMtt90euoIKJkmWcSqKF4Swes3laG39EI8/9iguIqvK5sLaqXxfdtZynLW8HHOQfvHE4892XPjpSzKufp579ins2rkD99x7P9UZc/COZ09crrrwoqzKwXXXfIUCbxUe+v2DbrYaQ29vD7a/8BxF8yTmGSEpPLQduHgKBgvQS8F4LPuonfLoI3/CNI8LmhZseICr0Lqbb50wE+17ay+WLCmDNUmcmotIHmMGD6RLzYcPv4dzP3E+5iFxaQbd+QzHmH373kRl1TmYh8TJUuC7KN09XabXbMWKKsw7hIhJR2MvfKa764QpAvPzs2/ozRbUqOyUltBN8Jmuri7TR1JUvAB+wtHLgoNcfRK56KcskaB13lrG4w8immytRczvrMltpEWLSpAzpsnghRwMoIjCXwG6SZgkBPVoO8KitXno47ViAcnlQ6bjgcyWlRtx1AD85PjxNpSUlHpqNKYQ1FR3xehCjh6AJRyzjm+ksRqcRL7oQ57uQ7soJbm83Qge2S3D4YVxdySzf3R0tGPZsrPgB8VoR45IGAGkUNSF6VqDGrQKXs8FdRC9KNGtntyJyhMz1N2Us0qpZ+Aj71NrOrToDHglgB6ygJOwtSuKY2pNzXYy+CdJAmmezLAY+SRMoe5GtmitXuJpqsaPwEf27/+v504fE1SpYztBDmKTU3C8YOvQQnJPEF0A3VdSg11JC2HEYYtZiDaac5AN2rKe5qkRpbKyLEKTGHyAH1W0Uu962ZnL4AXOLMVUQnHMcJubLJM2FsEimKXBdqgw692tPJ9L380UHoGQGpYx1Bqk/DzpALmp0Ea9d5yOS85YDC/w9SZJmlQwZZEs7bA9GLdJZcyUCzFSuttEFpZCrrMlNT8kim0HtnptBzFHjhymzqiFWLhwEbzh3vXhJbp04Rg34j+WQg26FAvEAiol3Ckyb/lTuzWSmh/6NmchpZxt7kpl0uAZFM1L9REs1h8aU+ZaYTL4efBy6lETHh9nOqYasY0sXIu483LIRRR98nrONQ5lJONYwjIpmeNQZoiGkaOyR3UdsLUUqdb6gO4JBXSvSYEMHzCfonqIpj0oonqgxDXhCYjFDlI8+Ti8wsfsF0EkdS5dJlewA8aFHONSSSOAkY0enQ6IPLNN0WeXCA2l66nCr8WMXB51ZWwt+aprG5/EaNPVxmh5WogTVA+0GWuaCH427FffKyVYnBQBKuiDI9xCG2vQgxkoKXLdDESfJ0mcfkrMmUBXOe49oXG3O2h3b7WEinEJzQdVJsHZ5qDS3IOkEaZId054kEOxKJYsLcOpUI6Dt6lrYfd/dmEy2EXc1IvBwkyQTeSY0p7FMqmY/tiCO7B4MA9NDc44tuzdOnb9uJ43Ea6N9x14pY76FBohkm4055Oi/Md+bg2WTcV0CnwnEyPK6mQyabZNlHmoQMQBerTx4vbnsXNnBMVFC7Dha9djMvgiu+loCbKIPB2ATeeU0DmmdqETo9sTMpbD4mUiiPltyjgTvfoyYXdkfuXqSH/zqxR0Rb2xECqieGpKamOs0lhMge5CXAxnmePH2hCNHjSPQpjOzjje2Lsbu17dgd2v70Lp0qVYs6YGD/zmISwla8qkbXSS6lt2JUaMGFyUqRDDX9TbKirKGibalLaPNs/q26xUzrVam1dmzTplUqFjbGXYnIfh8j4QCOCVnf/Czh2NeI+WzzvvAlx8yRrcuPFmLC5dCj/IWohBzFBRur5029OKYtwo+kptjkru0UqE1GAVmSqolCZflqNPrr39GLlQwmSgG+tuwXnnV1NG89Q37jvDL0alf2NsUsl1tLF6QOU3JrUdYs9144pDc7kmuHEKHNqX4g7HFT/7UfzGkmJVOOzhLQ6GLKYp4eTcYZMM2hTQlokqnJH6ROHofcma5rIg1Japm0wQZkplZ2HVpxpIiDoOsLnaFadHFBlXmg+Y5gsJki6wjt8/A7qjr1ULJZ/q08HyuPDeXzITsCDU4qidioUMfydDWqJvl/eqhY1kLeWY48zI26ZMWfhcOlDeKs7zmMvQ+blvaGT+qr+nhN/c3LJRCDmnXpZi66DquW6w4yzb3/AGj65MJvtvp66CWX3ZgWMHd33Ydv/W8Gz+r4OR8AsPCUdupnpuyu//+oGfYgz/ps+Yt0Ec1MyAW8W4C9VPMVJM64gaM+ZfiPVCirVU7Hr/TzsCTcoxj2MiXmLGpMfBDMEjmZPJQDWP2+VhqtQlTx15ujzd/2QiAajg4od0ei8/2rWs3ojfFpGO/wO2g6GnLv6fggAAAABJRU5ErkJggg==" class="circleFaceThreeInitial_zltZ"><img alt="Animation Image" src="/assets/images/community-screen-1-33ab17b75b0f43b5fcaf319cb32afd4b.png" class="communityScreenOneInitial_wz3L"><img alt="Animation Image" src="/assets/images/community-screen-2-6eaaa75893ccbacb1e0b82f2c532473c.png" class="communityScreenTwoInitial_wpxG"><img alt="Animation Image" src="/assets/images/community-screen-3-edd7a1bb416a534602e97218474f2339.png" class="communityScreenThreeInitial_fbtv"><img alt="Animation Image" src="/assets/images/community-screen-4-c9cdc7d8c7eb8ea742a60ea3db400ac2.png" class="communityScreenFourInitial_c4XK"><img alt="Animation Image" src="/assets/images/community-screen-5-71c3c3261dcc6b73c9738878c71ca64f.png" class="communityScreenFiveInitial_ytOJ"><img alt="Animation Image" src="/assets/images/community-screen-6-4c08a6554a188eb84379ec02d3698bb8.png" class="communityScreenSixInitial_qx4R"><img alt="Animation Image" src="/assets/images/community-screen-7-6190149118b08cae945a1a7194e1c7b2.png" class="communityScreenSevenInitial_LKjV"><img alt="Animation Image" src="/assets/images/community-screen-8-e34ab29c5bbd20ff1e03b988d7468c3b.png" class="communityScreenEightInitial_ZQ56"></div></div></div></div></div></section><div class="freshSection_d7li"><p class="freshSectionHeader_arLG">Freshly added to the cookbook</p><a class="recipeWrapper_q1ux" href="/docs/recipes/LocalFirstDataWithPowerSync"><h3 class="freshSectionTitle__ViY">PowerSync and Supabase for Local-First Data Management</h3><p class="freshSectionDate_dzBI">Published on <b>March 22nd, 2024</b> by <b>Trevor Coleman</b></p></a><a class="recipeWrapper_q1ux" href="/docs/recipes/EnforcingImportOrder"><h3 class="freshSectionTitle__ViY">Enforcing JS/TS Import Order</h3><p class="freshSectionDate_dzBI">Published on <b>February 29th, 2024</b> by <b>Mark Rickert</b></p></a><a class="recipeWrapper_q1ux" href="/docs/recipes/RequiringHardwareFeaturesWithExpo"><h3 class="freshSectionTitle__ViY">Requiring Hardware Features with Expo</h3><p class="freshSectionDate_dzBI">Published on <b>February 28th, 2024</b> by <b>Mark Rickert</b></p></a><a class="recipeWrapper_q1ux" href="/docs/recipes/RemoveMobxStateTree"><h3 class="freshSectionTitle__ViY">Remove MobX-State-Tree</h3><p class="freshSectionDate_dzBI">Published on <b>February 5th, 2024</b> by <b>Justin Poliachik</b></p></a><a class="viewAllRecipes_hd6L" href="/docs/intro">View all recipes</a></div></main></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://join.slack.com/t/infiniteredcommunity/shared_invite/zt-1e1gob8vn-pcFjKM~n1c~aXFsTnvHpdg" target="_blank" rel="noopener noreferrer" class="footer__link-item">Slack Community<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://reactnativeradio.com/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React Native Radio<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://reactnative.cc/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React Native Newsletter<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li></ul></div><div class="col footer__col"><div class="footer__title">Resources</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/infinitered/ignite-cookbook/issues" target="_blank" rel="noopener noreferrer" class="footer__link-item">Submit a Recipe<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://github.com/infinitered/ignite-cookbook" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub - Ignite Cookbook<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub - Ignite Boilerplate<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://shift.infinite.red/" target="_blank" rel="noopener noreferrer" class="footer__link-item">RedShift Blog <div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://infinite.red/privacy-policy" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy Policy<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li></ul></div><div class="col footer__col"><div class="footer__title">Infinite Red</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://infinite.red/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Website<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://docs.infinite.red/" target="_blank" rel="noopener noreferrer" class="footer__link-item">IR Docs<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li><li class="footer__item"><a href="https://chainreactconf.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Chain React Conf<div class="footer__links__custom"><svg width="18" height="18" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" role="img"><g clip-path="url(#a)" stroke="#F4F2F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.312 18.781 19.245 6.85M19.245 17.986V6.849H8.108"></path></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(45 6.534 16.072)" d="M0 0h18v18H0z"></path></clipPath></defs></svg></div></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">From the team at <a href="https://infinite.red/" target="_blank" rel="noopener noreferrer" class="ir-footer-link">Infinite Red</a> <img width="32" height="32" src="/img/ir-mark.svg" alt="dropdown" class="ir-mark"></div></div></div></footer></div>
 </body>
 </html>
\ No newline at end of file
diff --git a/search/index.html b/search/index.html
index fc345788..e8334c2e 100644
--- a/search/index.html
+++ b/search/index.html
@@ -10,8 +10,8 @@
 
 
 <link rel="search" type="application/opensearchdescription+xml" title="Ignite Cookbook for React Native" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ca6704e7.css">
-<script src="/assets/js/runtime~main.38f783f9.js" defer="defer"></script>
-<script src="/assets/js/main.d1a308a0.js" defer="defer"></script>
+<script src="/assets/js/runtime~main.a014a881.js" defer="defer"></script>
+<script src="/assets/js/main.98d21fb0.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:"light")}(),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 navbarHideable_m1mJ"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="React Native Cookbook Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a class="navbar__item navbar__link" href="/docs/intro"><div class="hover-underline">Recipes</div></a><a href="https://github.com/infinitered/ignite" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Ignite Boilerplate</div></a><a href="https://infinite.red" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><div class="hover-underline">Infinite Red</div></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link" style="margin-right:0px"> <div class="hover-underline">