diff --git a/docs/recipes/Redux.md b/docs/recipes/Redux.md
index 355c7d83..e91606a6 100644
--- a/docs/recipes/Redux.md
+++ b/docs/recipes/Redux.md
@@ -131,7 +131,8 @@ import React, { FC } from "react";
 import { View, ViewStyle } from "react-native";
 import { Button, Text } from "app/components";
 import { AppStackScreenProps } from "../navigators";
-import { colors } from "../theme";
+import type { ThemedStyle } from "app/theme";
+import { useAppTheme } from "app/utils/useAppTheme";
 import { useSafeAreaInsetsStyle } from "../utils/useSafeAreaInsetsStyle";
 import { useAppDispatch, useAppSelector } from "app/store/store";
 import { decrement, increment } from "app/store/counterSlice";
@@ -139,11 +140,12 @@ import { decrement, increment } from "app/store/counterSlice";
 interface WelcomeScreenProps extends AppStackScreenProps<"Welcome"> {}
 
 export const WelcomeScreen: FC<WelcomeScreenProps> = () => {
+  const { themed } = useAppTheme();
   const $containerInsets = useSafeAreaInsetsStyle(["top", "bottom"]);
   const count = useAppSelector((state) => state.counter.value);
   const dispatch = useAppDispatch();
   return (
-    <View style={[$containerInsets, $container]}>
+    <View style={themed([$containerInsets, $container])}>
       <Button text="Increment" onPress={() => dispatch(increment())} />
       <Button text="Decrement" onPress={() => dispatch(decrement())} />
       <Text text={`Count: ${count}`} />
@@ -151,10 +153,10 @@ export const WelcomeScreen: FC<WelcomeScreenProps> = () => {
   );
 };
 
-const $container: ViewStyle = {
+const $container: ThemedStyle<ViewStyle> = ({ colors }) => ({
   flex: 1,
   backgroundColor: colors.background,
-};
+});
 ```
 
 You're now using Redux!
diff --git a/docs/recipes/SelectFieldWithBottomSheet.mdx b/docs/recipes/SelectFieldWithBottomSheet.mdx
index 5a94532b..92e89342 100644
--- a/docs/recipes/SelectFieldWithBottomSheet.mdx
+++ b/docs/recipes/SelectFieldWithBottomSheet.mdx
@@ -60,10 +60,7 @@ import { View, TouchableOpacity } from "react-native";
 import { TextField, TextFieldProps } from "./TextField";
 
 export interface SelectFieldProps
-  extends Omit<
-    TextFieldProps,
-    "ref" | "onValueChange" | "onChange" | "value"
-  > {}
+  extends Omit<TextFieldProps, "ref" | "onValueChange" | "onChange" | "value"> {}
 export interface SelectFieldRef {}
 
 export const SelectField = forwardRef(function SelectField(
@@ -72,8 +69,7 @@ export const SelectField = forwardRef(function SelectField(
 ) {
   const { ...TextFieldProps } = props;
 
-  const disabled =
-    TextFieldProps.editable === false || TextFieldProps.status === "disabled";
+  const disabled = TextFieldProps.editable === false || TextFieldProps.status === "disabled";
 
   useImperativeHandle(ref, () => ({}));
 
@@ -121,9 +117,7 @@ Let's add an accessory to the input to make it look like a `SelectField`.
 ```tsx
 <TextField
   {...TextFieldProps}
-  RightAccessory={(props) => (
-    <Icon icon="caretRight" containerStyle={props.style} />
-  )}
+  RightAccessory={(props) => <Icon icon="caretRight" containerStyle={props.style} />}
 />
 ```
 
@@ -210,8 +204,7 @@ export const SelectField = forwardRef(function SelectField(
     ...TextFieldProps
   } = props;
 
-  const disabled =
-    TextFieldProps.editable === false || TextFieldProps.status === "disabled";
+  const disabled = TextFieldProps.editable === false || TextFieldProps.status === "disabled";
 
   useImperativeHandle(ref, () => ({}));
 
@@ -232,9 +225,7 @@ export const SelectField = forwardRef(function SelectField(
             {...TextFieldProps}
             // success-line-start
             value={valueString}
-            RightAccessory={(props) => (
-              <Icon icon="caretRight" containerStyle={props.style} />
-            )}
+            RightAccessory={(props) => <Icon icon="caretRight" containerStyle={props.style} />}
             // success-line-end
           />
         </View>
@@ -348,6 +339,8 @@ import {
 // success-line-end
 import React, { forwardRef, Ref, useImperativeHandle, useRef } from "react";
 import { TouchableOpacity, View, ViewStyle } from "react-native";
+import type { ThemedStyle } from "app/theme";
+import { useAppTheme } from "app/utils/useAppTheme";
 // success-line
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 // success-line
@@ -391,8 +384,9 @@ export const SelectField = forwardRef(function SelectField(
   const { bottom } = useSafeAreaInsets();
   // success-line-end
 
-  const disabled =
-    TextFieldProps.editable === false || TextFieldProps.status === "disabled";
+  const { themed } = useAppTheme();
+
+  const disabled = TextFieldProps.editable === false || TextFieldProps.status === "disabled";
 
   // success-line
   useImperativeHandle(ref, () => ({ presentOptions, dismissOptions }));
@@ -426,9 +420,7 @@ export const SelectField = forwardRef(function SelectField(
           <TextField
             {...TextFieldProps}
             value={valueString}
-            RightAccessory={(props) => (
-              <Icon icon="caretRight" containerStyle={props.style} />
-            )}
+            RightAccessory={(props) => <Icon icon="caretRight" containerStyle={props.style} />}
           />
         </View>
       </TouchableOpacity>
@@ -440,11 +432,7 @@ export const SelectField = forwardRef(function SelectField(
         stackBehavior="replace"
         enableDismissOnClose
         backdropComponent={(props) => (
-          <BottomSheetBackdrop
-            {...props}
-            appearsOnIndex={0}
-            disappearsOnIndex={-1}
-          />
+          <BottomSheetBackdrop {...props} appearsOnIndex={0} disappearsOnIndex={-1} />
         )}
         footerComponent={
           !multiple
@@ -452,14 +440,10 @@ export const SelectField = forwardRef(function SelectField(
             : (props) => (
                 <BottomSheetFooter
                   {...props}
-                  style={$bottomSheetFooter}
+                  style={themed($bottomSheetFooter)}
                   bottomInset={bottom}
                 >
-                  <Button
-                    text="Dismiss"
-                    preset="reversed"
-                    onPress={dismissOptions}
-                  />
+                  <Button text="Dismiss" preset="reversed" onPress={dismissOptions} />
                 </BottomSheetFooter>
               )
         }
@@ -469,11 +453,7 @@ export const SelectField = forwardRef(function SelectField(
           data={options}
           keyExtractor={(o) => o.value}
           renderItem={({ item, index }) => (
-            <ListItem
-              text={item.label}
-              topSeparator={index !== 0}
-              style={$listItem}
-            />
+            <ListItem text={item.label} topSeparator={index !== 0} style={themed($listItem)} />
           )}
         />
       </BottomSheetModal>
@@ -483,14 +463,14 @@ export const SelectField = forwardRef(function SelectField(
 });
 
 // success-line-start
-const $bottomSheetFooter: ViewStyle = {
+const $bottomSheetFooter: ThemedStyle<ViewStyle> = ({ spacing }) => ({
   paddingHorizontal: spacing.lg,
   paddingBottom: spacing.xs,
-};
+});
 
-const $listItem: ViewStyle = {
+const $listItem: ThemedStyle<ViewStyle> = ({ spacing }) => ({
   paddingHorizontal: spacing.lg,
-};
+});
 // success-line-end
 ```
 
@@ -515,8 +495,8 @@ import {
 import React, { forwardRef, Ref, useImperativeHandle, useRef } from "react";
 import { TouchableOpacity, View, ViewStyle } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-// success-line
-import { colors, spacing } from "../theme";
+import type { ThemedStyle } from "app/theme";
+import { useAppTheme } from "app/utils/useAppTheme";
 import { Button } from "./Button";
 import { Icon } from "./Icon";
 import { ListItem } from "./ListItem";
@@ -555,9 +535,14 @@ export const SelectField = forwardRef(function SelectField(
   } = props;
   const sheet = useRef<BottomSheetModal>(null);
   const { bottom } = useSafeAreaInsets();
+  const {
+    themed,
+    // success-line-start
+    theme: { colors },
+    // success-line-end
+  } = useAppTheme();
 
-  const disabled =
-    TextFieldProps.editable === false || TextFieldProps.status === "disabled";
+  const disabled = TextFieldProps.editable === false || TextFieldProps.status === "disabled";
 
   useImperativeHandle(ref, () => ({ presentOptions, dismissOptions }));
 
@@ -596,9 +581,7 @@ export const SelectField = forwardRef(function SelectField(
           <TextField
             {...TextFieldProps}
             value={valueString}
-            RightAccessory={(props) => (
-              <Icon icon="caretRight" containerStyle={props.style} />
-            )}
+            RightAccessory={(props) => <Icon icon="caretRight" containerStyle={props.style} />}
           />
         </View>
       </TouchableOpacity>
@@ -609,11 +592,7 @@ export const SelectField = forwardRef(function SelectField(
         stackBehavior="replace"
         enableDismissOnClose
         backdropComponent={(props) => (
-          <BottomSheetBackdrop
-            {...props}
-            appearsOnIndex={0}
-            disappearsOnIndex={-1}
-          />
+          <BottomSheetBackdrop {...props} appearsOnIndex={0} disappearsOnIndex={-1} />
         )}
         footerComponent={
           !multiple
@@ -621,14 +600,10 @@ export const SelectField = forwardRef(function SelectField(
             : (props) => (
                 <BottomSheetFooter
                   {...props}
-                  style={$bottomSheetFooter}
+                  style={themed($bottomSheetFooter)}
                   bottomInset={bottom}
                 >
-                  <Button
-                    text="Dismiss"
-                    preset="reversed"
-                    onPress={dismissOptions}
-                  />
+                  <Button text="Dismiss" preset="reversed" onPress={dismissOptions} />
                 </BottomSheetFooter>
               )
         }
@@ -641,7 +616,7 @@ export const SelectField = forwardRef(function SelectField(
             <ListItem
               text={item.label}
               topSeparator={index !== 0}
-              style={$listItem}
+              style={themed($listItem)}
               // success-line-start
               rightIcon={value.includes(item.value) ? "check" : undefined}
               rightIconColor={colors.palette.angry500}
@@ -655,14 +630,14 @@ export const SelectField = forwardRef(function SelectField(
   );
 });
 
-const $bottomSheetFooter: ViewStyle = {
+const $bottomSheetFooter: ThemedStyle<ViewStyle> = ({ spacing }) => ({
   paddingHorizontal: spacing.lg,
   paddingBottom: spacing.xs,
-};
+});
 
-const $listItem: ViewStyle = {
+const $listItem: ThemedStyle<ViewStyle> = ({ spacing }) => ({
   paddingHorizontal: spacing.lg,
-};
+});
 ```
 
 And we're done!
diff --git a/docs/recipes/Theming-Emotion.mdx b/docs/recipes/Theming-Emotion.mdx
new file mode 100644
index 00000000..df5eabbc
--- /dev/null
+++ b/docs/recipes/Theming-Emotion.mdx
@@ -0,0 +1,123 @@
+---
+title: Theming Ignite with Emotion.js
+description: Learn how to use different styling libraries to theme your Ignited app!
+tags:
+  - Theming
+  - iOS
+  - Android
+  - colors
+  - darkmode
+  - emotion.js
+last_update:
+  author: Mark Rickert
+publish_date: 2024-12-02
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme/CodeBlock";
+
+# Theming Ignite
+
+When it comes to styling we acknowledge the popularity and effectiveness of libraries like `styled-components`, `emotion.js` and `unistyles`. Our boilerplate is designed to work seamlessly with these styling solutions, offering you the flexibility to choose the one that aligns with your preferences and project requirements.
+
+The theming system in Ignite Boilerplate is crafted to be adaptable and easy to customize. By simply replacing colors and fonts through the designated theme files, you can tailor the look and feel of your application.
+
+## Using `Emotion`
+
+### 1. Add `Emotion` to your app:
+
+<Tabs groupId="operating-systems">
+  <TabItem value="yarn" label="Yarn">
+    <CodeBlock language="bash">yarn add @emotion/react @emotion/native</CodeBlock>
+  </TabItem>
+  <TabItem value="npm" label="npm">
+    <CodeBlock language="bash">npm install @emotion/react @emotion/native</CodeBlock>
+  </TabItem>
+  <TabItem value="pnpm" label="pnpm">
+    <CodeBlock language="bash">pnpm install @emotion/react @emotion/native</CodeBlock>
+  </TabItem>
+</Tabs>
+
+### 2. Add the Emotion `ThemeProvider`
+
+Find and open the `AppNavigator.tsx` file in your project and add the import:
+
+```ts
+import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
+```
+
+Add the following functional component:
+
+```tsx
+const EmotionJSThemeProvider = (props: React.PropsWithChildren) => {
+  const { theme } = useAppTheme();
+  return <EmotionThemeProvider theme={theme}>{props.children}</EmotionThemeProvider>;
+};
+```
+
+Add the new `EmotionJSThemeProvider` component just inside the `<ThemeProvider>` component in the `AppNavigator`.
+
+```diff
+return (
+  <ThemeProvider value={{ themeScheme, setThemeContextOverride }}>
++    <EmotionJSThemeProvider>
+      <NavigationContainer ref={navigationRef} theme={navigationTheme} {...props}>
+        <AppStack />
+      </NavigationContainer>
++    </EmotionJSThemeProvider>
+  </ThemeProvider>
+);
+```
+
+### 3. Create and use your first `Emotion` component using the new theme:
+
+```tsx
+import styled from "@emotion/native";
+
+const MyTextComponent = styled.Text`
+  margin: 10px;
+  color: ${({ theme }) => theme.colors.text};
+  background-color: ${({ theme }) => theme.colors.background};
+`;
+
+export const MyScreen = (props) => {
+  return (
+    <MyTextComponent>
+      This text color and background will change when changing themes.
+    </MyTextComponent>
+  );
+};
+```
+
+### 4. Tell Emotion.js about the shape of your theme:
+
+Create a new file in you Ignited app's `types` folder called `emotion.d.ts` with the following content:
+
+```tsx
+// Override Theme to get accurate typings for your project.
+import type { Theme as AppTheme } from "app/theme";
+import "@emotion/react";
+
+declare module "@emotion/react" {
+  export interface Theme extends AppTheme {}
+}
+```
+
+## Complete!
+
+You can now use `Emotion` integrated into the Ignite theme engine. To swap themes provide the user a switch or toggle button:
+
+```tsx
+const { setThemeContextOverride, themeContext } = useAppTheme();
+
+return (
+  <Button
+    onPress={() => {
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); // Animate the transition
+      setThemeContextOverride(themeContext === "dark" ? "light" : "dark");
+    }}
+    text={`Switch Theme: ${themeContext}`}
+  />
+);
+```
diff --git a/docs/recipes/Theming-StyledComponents.mdx b/docs/recipes/Theming-StyledComponents.mdx
new file mode 100644
index 00000000..b5ca3a04
--- /dev/null
+++ b/docs/recipes/Theming-StyledComponents.mdx
@@ -0,0 +1,128 @@
+---
+title: Theming Ignite with styled-components
+description: Learn how to use different styling libraries to theme your Ignited app!
+tags:
+  - Theming
+  - iOS
+  - Android
+  - colors
+  - darkmode
+  - styled-components
+last_update:
+  author: Mark Rickert
+publish_date: 2024-12-02
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme/CodeBlock";
+
+# Theming Ignite
+
+When it comes to styling we acknowledge the popularity and effectiveness of libraries like `styled-components`, `emotion.js` and `unistyles`. Our boilerplate is designed to work seamlessly with these styling solutions, offering you the flexibility to choose the one that aligns with your preferences and project requirements.
+
+The theming system in Ignite Boilerplate is crafted to be adaptable and easy to customize. By simply replacing colors and fonts through the designated theme files, you can tailor the look and feel of your application.
+
+## Using `styled-components`
+
+### 1. Add `styled-components` to your app:
+
+<Tabs groupId="operating-systems">
+  <TabItem value="yarn" label="Yarn">
+    <CodeBlock language="bash">yarn add styled-components</CodeBlock>
+  </TabItem>
+  <TabItem value="npm" label="npm">
+    <CodeBlock language="bash">npm install styled-components</CodeBlock>
+  </TabItem>
+  <TabItem value="pnpm" label="pnpm">
+    <CodeBlock language="bash">pnpm install styled-components</CodeBlock>
+  </TabItem>
+</Tabs>
+
+### 2. Add the `ThemeProvider` to your app:
+
+Find and open the `AppNavigator.tsx` file in your project and add the import:
+
+```ts
+import { ThemeProvider as StyledThemeProvider } from "styled-components";
+```
+
+Add the following functional component:
+
+```tsx
+const StyledComponentsThemeProvider = (props: React.PropsWithChildren) => {
+  const { theme } = useAppTheme();
+  return <StyledThemeProvider theme={theme} {...props} />;
+};
+```
+
+Add the new `StyledComponentsThemeProvider` component just inside the `<ThemeProvider>` component in the `AppNavigator`.
+
+```diff
+return (
+  <ThemeProvider value={{ themeScheme, setThemeContextOverride }}>
++    <StyledComponentsThemeProvider>
+      <NavigationContainer ref={navigationRef} theme={navigationTheme} {...props}>
+        <AppStack />
+      </NavigationContainer>
++    </StyledComponentsThemeProvider>
+  </ThemeProvider>
+);
+```
+
+### 3. Create and use your first styled-component using the new theme:
+
+```tsx
+import styled from "styled-components/native";
+
+const MyTextComponent = styled.Text`
+  margin: 10px;
+  color: ${({ theme }) => theme.colors.text};
+  background-color: ${({ theme }) => theme.colors.background};
+`;
+
+export const MyScreen = (props) => {
+  return (
+    <MyTextComponent>
+      This text color and background will change when changing themes.
+    </MyTextComponent>
+  );
+};
+```
+
+### 4. Tell `styled-components` about the shape of your theme:
+
+Create a new file in you Ignited app's `types` folder called `styled-components.d.ts` with the following content:
+
+```tsx
+// Override DefaultTheme to get accurate typings for your project.
+import type { Theme } from "app/theme";
+import "styled-components";
+import "styled-components/native";
+
+declare module "styled-components" {
+  export interface DefaultTheme extends Theme {}
+}
+
+declare module "styled-components/native" {
+  export interface DefaultTheme extends Theme {}
+}
+```
+
+## Complete!
+
+You can now use `styled-components` integrated into the Ignite theme engine. To swap themes provide the user a switch or toggle button:
+
+```tsx
+const { setThemeContextOverride, themeContext } = useAppTheme();
+
+return (
+  <Button
+    onPress={() => {
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); // Animate the transition
+      setThemeContextOverride(themeContext === "dark" ? "light" : "dark");
+    }}
+    text={`Switch Theme: ${themeContext}`}
+  />
+);
+```
diff --git a/docs/recipes/Theming-Unistyles.mdx b/docs/recipes/Theming-Unistyles.mdx
new file mode 100644
index 00000000..23dfe19d
--- /dev/null
+++ b/docs/recipes/Theming-Unistyles.mdx
@@ -0,0 +1,142 @@
+---
+title: Theming Ignite with Unistyles
+description: Learn how to use different styling libraries to theme your Ignited app!
+tags:
+  - Theming
+  - iOS
+  - Android
+  - colors
+  - darkmode
+  - unistyles
+last_update:
+  author: Mark Rickert
+publish_date: 2024-12-02
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme/CodeBlock";
+
+# Theming Ignite
+
+When it comes to styling we acknowledge the popularity and effectiveness of libraries like `styled-components`, `emotion.js` and `unistyles`. Our boilerplate is designed to work seamlessly with these styling solutions, offering you the flexibility to choose the one that aligns with your preferences and project requirements.
+
+The theming system in Ignite Boilerplate is crafted to be adaptable and easy to customize. By simply replacing colors and fonts through the designated theme files, you can tailor the look and feel of your application.
+
+## Using `Unistyles`
+
+:::warning
+
+Unistyles includes custom native code, which means it does not support Expo Go. You'll need to use expo CNG to build your app.
+
+To do this with an newly ignited app, run `yarn prebuild:clean` and then `yarn start`.
+
+:::
+
+### 1. Add `react-native-unistyles` to your app:
+
+<Tabs groupId="operating-systems">
+  <TabItem value="yarn" label="Yarn">
+    <CodeBlock language="bash">yarn add react-native-unistyles</CodeBlock>
+  </TabItem>
+  <TabItem value="npm" label="npm">
+    <CodeBlock language="bash">npm install react-native-unistyles</CodeBlock>
+  </TabItem>
+  <TabItem value="pnpm" label="pnpm">
+    <CodeBlock language="bash">pnpm install react-native-unistyles</CodeBlock>
+  </TabItem>
+</Tabs>
+
+### 2. Add define Unistyles theme types:
+
+Create a new file in you Ignited app's `types` folder called `react-native-unistyles.d.ts` with the following content:
+
+```tsx
+// Override UnistylesThemes to get accurate typings for your project.
+import type { Theme } from "app/theme";
+import "react-native-unistyles";
+
+type AppThemes = {
+  light: Theme;
+  dark: Theme;
+};
+
+declare module "react-native-unistyles" {
+  export interface UnistylesThemes extends AppThemes {}
+}
+```
+
+### 3. Configure unistyles to use the app's Theme:
+
+Add the following to your app's `app/App.tsx`:
+
+```diff
++import { UnistylesRegistry } from "react-native-unistyles"
++import { darkTheme, lightTheme } from "app/theme"
+
+SplashScreen.preventAutoHideAsync()
+
++UnistylesRegistry.addThemes({
++  light: lightTheme,
++  dark: darkTheme,
++}).addConfig({
++  // adaptiveThemes: true,
++  initialTheme: "light",
++})
++
+
+function IgniteApp() {
+  return <App hideSplashScreen={SplashScreen.hideAsync} />
+}
+```
+
+### 4. Ensure that Unistyles knows when we want to change the theme:
+
+Open the `app/utils/useAppTheme.ts` and make the following changes:
+
+```diff
+  const setThemeContextOverride = useCallback((newTheme: ThemeContexts) => {
+    setTheme(newTheme)
++    UnistylesRuntime.setTheme(newTheme || "light")
+  }, [])
+```
+
+### 5. Create and use your first Unistyles component using the new theme:
+
+```tsx
+import { createStyleSheet, useStyles } from "react-native-unistyles";
+
+export const MyScreen = (props) => {
+  const { styles } = useStyles($uniStyles);
+  return (
+    <Text style={styles.text}>
+      This text color and background will change when changing themes.
+    </Text>
+  );
+};
+
+const $uniStyles = createStyleSheet((theme) => ({
+  text: {
+    color: theme.colors.text,
+    backgroundColor: theme.colors.background,
+  },
+}));
+```
+
+## Complete!
+
+You can now use Unistyles integrated into the Ignite theme engine. To swap themes provide the user a switch or toggle button:
+
+```tsx
+const { setThemeContextOverride, themeContext } = useAppTheme();
+
+return (
+  <Button
+    onPress={() => {
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); // Animate the transition
+      setThemeContextOverride(themeContext === "dark" ? "light" : "dark");
+    }}
+    text={`Switch Theme: ${themeContext}`}
+  />
+);
+```
diff --git a/yarn.lock b/yarn.lock
index 3e2b43ee..5c384fdb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1722,7 +1722,7 @@
     "@docusaurus/theme-search-algolia" "3.1.1"
     "@docusaurus/types" "3.1.1"
 
-"@docusaurus/react-loadable@5.5.2", "react-loadable@npm:@docusaurus/react-loadable@5.5.2":
+"@docusaurus/react-loadable@5.5.2":
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
   integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
@@ -3165,15 +3165,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001370:
-  version "1.0.30001374"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001374.tgz#3dab138e3f5485ba2e74bd13eca7fe1037ce6f57"
-  integrity sha512-mWvzatRx3w+j5wx/mpFN5v5twlPrabG8NqX2c6e45LCpymdoGqNvRkRutFUqpRTXKFQFNQJasvK0YT7suW6/Hw==
-
-caniuse-lite@^1.0.30001578, caniuse-lite@^1.0.30001587:
-  version "1.0.30001587"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz#a0bce920155fa56a1885a69c74e1163fc34b4881"
-  integrity sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001578, caniuse-lite@^1.0.30001587:
+  version "1.0.30001668"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001668.tgz"
+  integrity sha512-nWLrdxqCdblixUO+27JtGJJE/txpJlyUy5YN1u53wLZkP0emYCo5zgS6QYft7VUYR42LGgi/S5hdLZTrnyIddw==
 
 ccount@^2.0.0:
   version "2.0.1"
@@ -7353,6 +7348,14 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
   dependencies:
     "@babel/runtime" "^7.10.3"
 
+"react-loadable@npm:@docusaurus/react-loadable@5.5.2":
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
+  integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
+  dependencies:
+    "@types/react" "*"
+    prop-types "^15.6.2"
+
 react-player@^2.11.2:
   version "2.11.2"
   resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.11.2.tgz#19a0070e08d5ca0db8329a0584babce636372540"