chore: update storybook docs with videos

[skip-native]

apps/native-ui-storybook/.storybook/preview.tsx

@@ -118,7 +118,6 @@ const preview: Preview = {
     },
     layout: 'fullscreen',
     darkMode: {
-      current: 'light',
       stylePreview: true,
       dark: {
         ...themeDark,

apps/native-ui-storybook/components/Text/Text.tsx

@@ -15,7 +15,6 @@ const TextBasic: StoryFn<{
   color: ColorValue;
 }> = ({ ...props }) => {
   return (
-    // @ts-expect-error - TS doesn't like the dynamic key here
     <Text {...props} color={`$${props.color?.replace('$', '')}` as ColorValue}>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
       labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

apps/native-ui-storybook/docs/native-ui/guides/using-storybook.mdx

@@ -1,28 +1,38 @@
 import { Meta } from '@storybook/blocks';
-import playground from './assets/playground.gif';
-import darkMode from './assets/dark-mode.gif';
-import deviceMode from './assets/device-mode.gif';
+import playground from './assets/playgrounds.mp4';
+import darkMode from './assets/darkmode.mp4';
+import deviceMode from './assets/devices.mp4';
 
 <Meta title="Native UI / Guides / Using Storybook" />
 
 # Using Storybook
 
 This Storybook is for the Native UI library. It is a tool for developing UI components in isolation for React Native which we use to share and document our components.
 
+- [Playgrounds](#playgrounds)
+- [Dark mode](#dark-mode)
+- [Device Selection](#device-selection)
+
 ## Playgrounds
 
 Most components have a playground where you can interact with the component and see how it behaves with different props. You can change the props in the controls on the right side of the screen and see the component update in real time.
 
-<img src={playground} />
+<video width="100%" height="auto" autoplay="autoplay" loop controls>
+  <source src={playground} type="video/mp4" />
+</video>
 
 ## Dark mode
 
 Storybook has a dark mode. You can enable it by clicking the moon icon in the top right corner of the screen. If the styles of the component don't change you can refresh the page and try again.
 
-<img src={darkMode} />
+<video width="100%" height="auto" autoplay="autoplay" loop controls>
+  <source src={darkMode} type="video/mp4" />
+</video>
 
 ## Device Selection
 
 You can change the device you are viewing the component on by clicking the device icon in the top right corner of the screen. This will allow you to see how the component looks on different devices such as Web, iOS or Android. You can then update the component with the controls and change the device colour mode.
 
-<img src={deviceMode} />
+<video width="100%" height="auto" autoplay="autoplay" loop controls>
+  <source src={deviceMode} type="video/mp4" />
+</video>