chore: update docs image

[skip-native]

apps/native-ui-storybook/docs/components/DynamicImage.tsx

@@ -0,0 +1,15 @@
+import { useColorMode } from '@utilitywarehouse/native-ui';
+import React, { FC } from 'react';
+
+interface DynamicImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  lightSrc: React.ImgHTMLAttributes<HTMLImageElement>['src'];
+  darkSrc: React.ImgHTMLAttributes<HTMLImageElement>['src'];
+}
+
+const DynamicImage: FC<DynamicImageProps> = ({ lightSrc, darkSrc, ...props }) => {
+  const colorMode = useColorMode();
+
+  return <img src={colorMode === 'light' ? lightSrc : darkSrc} {...props} />;
+};
+
+export default DynamicImage;

apps/native-ui-storybook/docs/components/index.ts

@@ -4,3 +4,4 @@ export { default as ScrollWrap } from './ScrollWrap';
 export { default as VariantTitle } from './VariantTitle';
 export { default as AllComponents } from './AllComponents';
 export { default as DocComponentWrap } from './DocComponentWrap';
+export { default as DynamicImage } from './DynamicImage';

apps/native-ui-storybook/docs/native-ui/introduction.mdx

@@ -1,14 +1,27 @@
 import { Meta } from '@storybook/blocks';
 import { version } from '../../../../packages/native-ui/package.json';
-import img from './gardening.png';
+import img from './phone-light.png';
+import imgDark from './phone-dark.png';
+import { DynamicImage } from '../components';
+import { Box } from '@utilitywarehouse/native-ui/lab';
 
 <Meta title="Native UI / Introduction" />
 
-<img src={img} alt="UW Design Systems Gardeners" title="UW Design Systems Gardeners" width="600" />
+<Box alignItems='center'>
+<DynamicImage
+  width={500}
+  height="auto"
+  alt="UW Design Systems - Native UI"
+  title="UW - Native UI"
+  darkSrc={imgDark}
+  lightSrc={img}
+/>
 
 # UW - Native UI
 
-React component library for building Native UIs at UW.
+React Native component library for building UIs at UW.
+
+</Box>
 
 Current version: v{version}