@utilitywarehouse/hearth-react-native 0.5.0 → 0.7.0

package/src/components/ProgressStepper/ProgressStepper.stories.tsx

@@ -22,26 +22,26 @@ export const Playground: Story = {
     children: (
       <Flex space="xl" direction="column" align="center" style={{ flex: 1, minWidth: 200 }}>
         <ProgressStepper>
-          <ProgressStep id={'1'} state="complete" />
-          <ProgressStep id={'2'} state="complete" />
-          <ProgressStep id={'3'} state="active" />
-          <ProgressStep id={'4'} state="incomplete" />
+          <ProgressStep id={'1'} status="complete" />
+          <ProgressStep id={'2'} status="complete" />
+          <ProgressStep id={'3'} status="active" />
+          <ProgressStep id={'4'} status="incomplete" />
         </ProgressStepper>
         <Flex direction="row" space="lg" style={{ width: '100%' }}>
-          <ProgressStep id={'1'} state="complete" />
+          <ProgressStep id={'1'} status="complete" />
         </Flex>
         <Flex direction="row" space="lg" style={{ width: '100%' }}>
-          <ProgressStep id={'3'} state="active" />
+          <ProgressStep id={'3'} status="active" />
         </Flex>
         <Flex direction="row" space="lg" style={{ width: '100%' }}>
-          <ProgressStep id={'5'} state="incomplete" />
+          <ProgressStep id={'5'} status="incomplete" />
         </Flex>
       </Flex>
     ),
   },
 };
 
-export const StepStates: Story = {
+export const StepStatuses: Story = {
   args: {
     children: <></>,
   },
@@ -53,31 +53,31 @@ export const StepStates: Story = {
       <Flex space="xl" direction="column" align="center">
         <VariantTitle title="All Uncompleted Steps">
           <ProgressStepper {...props}>
-            <ProgressStep id={'1'} state="incomplete" />
-            <ProgressStep id={'2'} state="incomplete" />
-            <ProgressStep id={'3'} state="incomplete" />
+            <ProgressStep id={'1'} status="incomplete" />
+            <ProgressStep id={'2'} status="incomplete" />
+            <ProgressStep id={'3'} status="incomplete" />
           </ProgressStepper>
         </VariantTitle>
         <VariantTitle title="One Active Step">
           <ProgressStepper {...props}>
-            <ProgressStep id={'1'} state="active" />
-            <ProgressStep id={'2'} state="incomplete" />
-            <ProgressStep id={'3'} state="incomplete" />
+            <ProgressStep id={'1'} status="active" />
+            <ProgressStep id={'2'} status="incomplete" />
+            <ProgressStep id={'3'} status="incomplete" />
           </ProgressStepper>
         </VariantTitle>
-        <VariantTitle title="Mixed States">
+        <VariantTitle title="Mixed Statuses">
           <ProgressStepper {...props}>
-            <ProgressStep id={'1'} state="complete" />
-            <ProgressStep id={'2'} state="complete" />
-            <ProgressStep id={'3'} state="active" />
-            <ProgressStep id={'4'} state="incomplete" />
+            <ProgressStep id={'1'} status="complete" />
+            <ProgressStep id={'2'} status="complete" />
+            <ProgressStep id={'3'} status="active" />
+            <ProgressStep id={'4'} status="incomplete" />
           </ProgressStepper>
         </VariantTitle>
         <VariantTitle title="All Completed">
           <ProgressStepper {...props}>
-            <ProgressStep id={'1'} state="complete" />
-            <ProgressStep id={'2'} state="complete" />
-            <ProgressStep id={'3'} state="complete" />
+            <ProgressStep id={'1'} status="complete" />
+            <ProgressStep id={'2'} status="complete" />
+            <ProgressStep id={'3'} status="complete" />
           </ProgressStepper>
         </VariantTitle>
       </Flex>
@@ -95,11 +95,11 @@ export const BasicExample: Story = {
         <Heading size="md">Progress Stepper</Heading>
         <BodyText>Shows progress through multi-step processes</BodyText>
         <ProgressStepper {...props}>
-          <ProgressStep id="services-data" state="complete" />
-          <ProgressStep id="customer-data" state="complete" />
-          <ProgressStep id="shipping-data" state="active" />
-          <ProgressStep id="payment-data" state="incomplete" />
-          <ProgressStep id="summary" state="incomplete" />
+          <ProgressStep id="services-data" status="complete" />
+          <ProgressStep id="customer-data" status="complete" />
+          <ProgressStep id="shipping-data" status="active" />
+          <ProgressStep id="payment-data" status="incomplete" />
+          <ProgressStep id="summary" status="incomplete" />
         </ProgressStepper>
         <BodyText>Step 3 of 5</BodyText>
       </Flex>

package/src/components/ProgressStepper/index.ts

@@ -1,3 +1,3 @@
 export { default as ProgressStepper } from './ProgressStepper';
 export { default as ProgressStep } from './ProgressStep';
-export type { ProgressStepperProps, ProgressStepProps, StepState } from './ProgressStepper.props';
+export type { ProgressStepperProps, ProgressStepProps, StepStatus } from './ProgressStepper.props';

package/src/components/Radio/RadioIcon.tsx

@@ -1,8 +1,8 @@
+import { Platform, StyleProp, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
-import { CircleIcon } from '../Icons';
 import IconProps from '../Icon/Icon.props';
-import { Platform } from 'react-native';
+import { CircleIcon } from '../Icons';
 
 const RadioIcon = ({ style, ...props }: IconProps) => {
   return (
@@ -11,7 +11,12 @@ const RadioIcon = ({ style, ...props }: IconProps) => {
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.container, style)
+          ? {
+              // @ts-expect-error - style prop type issue
+              ...(styles.container as StyleProp<ViewStyle>),
+              // @ts-expect-error - style prop type issue
+              ...(props.style as StyleProp<ViewStyle>),
+            }
           : ([styles.container, style] as any)
       }
     />

package/src/components/RadioCard/RadioCardIcon.tsx

@@ -1,8 +1,8 @@
+import { Platform, StyleProp, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
-import { CircleIcon } from '../Icons';
 import IconProps from '../Icon/Icon.props';
-import { Platform } from 'react-native';
+import { CircleIcon } from '../Icons';
 
 const RadioCardIcon = ({ style, ...props }: IconProps) => {
   return (
@@ -11,7 +11,8 @@ const RadioCardIcon = ({ style, ...props }: IconProps) => {
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.container, style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.container as StyleProp<ViewStyle>), ...props.style }
           : ([styles.container, style] as any)
       }
     />

package/src/components/Spinner/Spinner.tsx

@@ -18,7 +18,9 @@ import { ColorValue } from '../../types';
 import { getFlattenedColorValue } from '../../utils';
 import type SpinnerProps from './Spinner.props';
 
+// @ts-expect-error - Animated.View type issue
 const AnimatedSvg = Animated.createAnimatedComponent(Svg as React.ComponentType<any>);
+// @ts-expect-error - Animated.View type issue
 const AnimatedCircle = Animated.createAnimatedComponent(Circle as React.ComponentType<any>);
 
 const SpinnerRoot = ({ size = 'md', color, ...props }: SpinnerProps) => {

package/src/components/Spinner/Spinner.web.tsx

@@ -18,7 +18,9 @@ import { ColorValue } from '../../types';
 import { getFlattenedColorValue } from '../../utils';
 import type SpinnerProps from './Spinner.props';
 
+// @ts-expect-error - Animated.View type issue
 const AnimatedSvg = Animated.createAnimatedComponent(Svg as React.ComponentType<any>);
+// @ts-expect-error - Animated.View type issue
 const AnimatedCircle = Animated.createAnimatedComponent(Circle as React.ComponentType<any>);
 
 const SpinnerRoot = ({ size = 'md', color, ...props }: SpinnerProps) => {

package/src/components/Switch/Switch.tsx

@@ -11,6 +11,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
+import { useAnimatedTheme } from 'react-native-unistyles/reanimated';
 import { useTheme } from '../../hooks';
 import { Icon } from '../Icon';
 import SwitchProps from './Switch.props';
@@ -23,6 +24,7 @@ const CustomSwitch = ({
   ...accessibilityProps
 }: SwitchProps) => {
   const { components, color } = useTheme();
+  const theme = useAnimatedTheme();
   const SWITCH_WIDTH = size === 'medium' ? components.switch.md.width : components.switch.sm.width;
   const THUMB_SIZE =
     size === 'medium' ? components.switch.md.circle.size : components.switch.sm.circle.size;
@@ -34,17 +36,20 @@ const CustomSwitch = ({
   const offset = useSharedValue(value ? SWITCH_WIDTH - THUMB_SIZE - PADDING * 2 : 0);
   const progress = useSharedValue(value ? 1 : 0);
 
-  const animatedThumbStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: offset.value }],
-  }));
+  const animatedThumbStyle = useAnimatedStyle(
+    () => ({
+      transform: [{ translateX: offset.value }],
+    }),
+    [offset]
+  );
 
   const animatedSwitchBackgroundStyle = useAnimatedStyle(() => {
     const backgroundColor = interpolateColor(
       progress.value,
       [0, 1],
       [
-        color.interactive.functional.surface.strong.default,
-        color.interactive.brand.surface.strong.default,
+        theme.value.color.interactive.functional.surface.strong.default,
+        theme.value.color.interactive.brand.surface.strong.default,
       ]
     );
     return { backgroundColor };

package/src/components/Switch/Switch.web.tsx

@@ -15,6 +15,7 @@ import { useTheme } from '../../hooks';
 import { Icon } from '../Icon';
 import SwitchProps from './Switch.props';
 
+// @ts-expect-error - Animated.View type issue
 const AnimatedView = Animated.createAnimatedComponent(View);
 
 const CustomSwitch = ({
@@ -114,14 +115,18 @@ const CustomSwitch = ({
       accessibilityHint={accessibilityProps.accessibilityHint}
       {...accessibilityProps}
     >
+      {/* @ts-expect-error - Animated.View type issue */}
       <AnimatedView style={[styles.switch, animatedSwitchBackgroundStyle, animatedSwitchStyle]}>
+        {/* @ts-expect-error - Animated.View type issue */}
         <AnimatedView style={[styles.thumb, animatedThumbStyle]}>
+          {/* @ts-expect-error - Animated.View type issue */}
           <AnimatedView style={[styles.iconWrap, animatedTickStyle]}>
             {(() => {
               const IconAny = Icon as any;
               return <IconAny as={TickSmallIcon} style={styles.icon as any} />;
             })()}
           </AnimatedView>
+          {/* @ts-expect-error - Animated.View type issue */}
           <AnimatedView style={[styles.iconWrap, animatedCrossStyle]}>
             {(() => {
               const IconAny = Icon as any;

package/src/components/Tabs/TabsList.tsx

@@ -15,6 +15,7 @@ import { UnstyledIconButton } from '../UnstyledIconButton';
 import { useTabsContext } from './Tabs.context';
 import type TabsListProps from './TabsList.props';
 
+// @ts-expect-error - Animated.View type issue
 const Indicator = Animated.createAnimatedComponent(View);
 
 const SCROLL_STEP_RATIO = 0.6;
@@ -112,6 +113,7 @@ const TabsList = ({ children, style, ...rest }: TabsListProps) => {
         <View style={styles.container}>
           {children}
           <Indicator
+            // @ts-expect-error - Animated.View type issue
             accessibilityElementsHidden
             importantForAccessibility="no-hide-descendants"
             style={[styles.indicator, indicatorStyle]}

package/src/components/Textarea/TextareaField.tsx

@@ -33,7 +33,7 @@ const styles = StyleSheet.create(theme => ({
     color: theme.color.text.primary,
     fontSize: theme.typography.mobile.bodyText.md.fontSize,
     fontFamily: theme.typography.mobile.bodyText.fontFamily,
-    fontWeight: theme.typography.mobile.bodyText.fontWeight,
+    fontWeight: `${theme.typography.mobile.bodyText.fontWeight}`,
     borderWidth: 0,
     outlineWidth: 0,
     _web: {

package/src/components/ThemedImage/ThemedImage.docs.mdx

@@ -0,0 +1,208 @@
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import * as ThemedImageStories from './ThemedImage.stories';
+
+<Meta title="Utility Components / Themed Image" />
+
+# Themed Image
+
+The `ThemedImage` component automatically switches between light and dark mode images or SVG components based on the current theme. It's perfect for illustrations, logos, or any visual assets that need different appearances for light and dark modes.
+
+- [Features](#features)
+- [Basic Usage](#basic-usage)
+- [Props](#props)
+- [Examples](#examples)
+
+## Features
+
+- **Automatic theme switching** - Responds to color mode changes
+- **Flexible sources** - Accepts both regular image sources and React components (like SVGs)
+- **Accessible** - Supports all standard Image accessibility props
+- **Works with svg-assets** - Seamlessly integrates with the `@utilitywarehouse/hearth-svg-assets` package
+
+## Basic Usage
+
+<Canvas of={ThemedImageStories.Playground} />
+
+## Props
+
+| Prop    | Type                                  | Required | Description                                        |
+| ------- | ------------------------------------- | -------- | -------------------------------------------------- |
+| `light` | `ImageSourcePropType \| ReactElement` | Yes      | Image source or component to display in light mode |
+| `dark`  | `ImageSourcePropType \| ReactElement` | Yes      | Image source or component to display in dark mode  |
+| ...rest | `ImageProps`                          | No       | All other standard React Native Image props        |
+
+### Additional Props
+
+`ThemedImage` extends React Native's `Image` component, so it accepts all standard `ImageProps` including:
+
+- `style` - Custom styling for the image container
+- `resizeMode` - How to resize the image when the frame doesn't match the raw image dimensions
+- `accessible` - Whether the element is an accessibility element
+- `accessibilityLabel` - Text to be announced by screen readers
+- `testID` - Used to locate this view in end-to-end tests
+
+## Examples
+
+### With SVG Assets
+
+The most common use case is with SVG components from the `@utilitywarehouse/hearth-svg-assets` package:
+
+```tsx
+import { View } from 'react-native';
+import { ThemedImage } from '@utilitywarehouse/hearth-react-native';
+import SpotBillingDark from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-dark.svg';
+import SpotBillingLight from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-light.svg';
+
+function MyComponent() {
+  return <ThemedImage light={SpotBillingLight} dark={SpotBillingDark} width={200} height={200} />;
+}
+```
+
+<Canvas of={ThemedImageStories.WithSpotIllustrations} />
+
+### With Regular Images
+
+You can also use regular image sources (not just SVG components):
+
+```tsx
+import { ThemedImage } from '@utilitywarehouse/hearth-react-native';
+import logoLight from './assets/logo-light.png';
+import logoDark from './assets/logo-dark.png';
+
+function MyComponent() {
+  return <ThemedImage light={logoLight} dark={logoDark} />;
+}
+```
+
+<Canvas of={ThemedImageStories.WithRegularImages} />
+
+### With Custom Sizes
+
+When using SVG components, control the size by passing a `style` prop with `width` and `height` to the component:
+
+<Canvas of={ThemedImageStories.WithCustomSize} />
+
+### With Accessibility
+
+Support screen readers and assistive technologies:
+
+```tsx
+import { View } from 'react-native';
+import { ThemedImage } from '@utilitywarehouse/hearth-react-native';
+import MascotEnergyDark from '@utilitywarehouse/hearth-svg-assets/lib/mascot-energy-dark.svg';
+import MascotEnergyLight from '@utilitywarehouse/hearth-svg-assets/lib/mascot-energy-light.svg';
+
+function MyComponent() {
+  return (
+    <ThemedImage
+      light={MascotEnergyLight}
+      dark={MascotEnergyDark}
+      width={150}
+      height={150}
+      accessible={true}
+      accessibilityLabel="Energy service mascot illustration"
+    />
+  );
+}
+```
+
+<Canvas of={ThemedImageStories.WithAccessibility} />
+
+## Usage with svg-assets Package
+
+The `@utilitywarehouse/hearth-svg-assets` package provides themed illustrations in three categories:
+
+### Spot Illustrations
+
+Small, focused illustrations for specific concepts:
+
+- `spot-billing` - Billing and payments
+- `spot-celebratory` - Success and celebration
+- `spot-error` - Error states
+- `spot-help` - Help and support
+- `spot-innovation` - New features
+- `spot-savings` - Cost savings
+- And more...
+
+### Mascots
+
+Service-specific character illustrations:
+
+- `mascot-energy` - Energy service
+- `mascot-broadband` - Broadband service
+- `mascot-mobile` - Mobile service
+- `mascot-insurance` - Insurance service
+- `mascot-cashback` - Cashback rewards
+
+### Scene Illustrations
+
+Large, detailed illustrations for landing pages:
+
+- `scene-energy` - Energy service scenes
+- `scene-broadband` - Broadband service scenes
+- `scene-mobile` - Mobile service scenes
+- `scene-insurance` - Insurance service scenes
+- `scene-bundle` - Service bundle scenes
+
+All assets come in both `-light.svg` and `-dark.svg` variants.
+
+## Integration with react-native-svg-transformer
+
+To use SVG files as React components in React Native, you'll need `react-native-svg-transformer`:
+
+```bash
+# Install dependencies
+npm install react-native-svg react-native-svg-transformer --save-dev
+```
+
+Configure your `metro.config.js`:
+
+```js
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+
+const config = {
+  transformer: {
+    babelTransformerPath: require.resolve('react-native-svg-transformer'),
+  },
+  resolver: {
+    assetExts: getDefaultConfig(__dirname).resolver.assetExts.filter(ext => ext !== 'svg'),
+    sourceExts: [...getDefaultConfig(__dirname).resolver.sourceExts, 'svg'],
+  },
+};
+
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+```
+
+Add TypeScript declarations (optional):
+
+```typescript
+// svg.d.ts
+declare module '*.svg' {
+  import React from 'react';
+  import { SvgProps } from 'react-native-svg';
+  const content: React.FC<SvgProps>;
+  export default content;
+}
+```
+
+## Best Practices
+
+1. **Always provide both variants** - Ensure you have both light and dark versions of your assets
+2. **Use appropriate sizes** - Match illustration sizes to your design specifications
+3. **Add accessibility labels** - Make your images accessible to screen readers
+4. **Consider performance** - Large SVG files may impact performance on older devices
+5. **Test in both modes** - Always test your themed images in both light and dark modes
+
+## Troubleshooting
+
+### SVG not displaying
+
+Make sure you have configured `react-native-svg-transformer` correctly and that your SVG files are valid.
+
+### Theme not switching
+
+The component uses `useColorMode` hook which relies on the Unistyles theme system. Ensure your app is properly configured with Unistyles.
+
+### TypeScript errors with SVG imports
+
+Add the TypeScript declaration file for `.svg` modules as shown in the integration section above.

package/src/components/ThemedImage/ThemedImage.props.ts

@@ -0,0 +1,15 @@
+import type { ComponentType, ReactElement } from 'react';
+import type { ImageProps, ImageSourcePropType } from 'react-native';
+
+interface ThemedImageProps extends Omit<ImageProps, 'source'> {
+  /**
+   * Image source or component to display in light mode
+   */
+  light: ImageSourcePropType | ReactElement | ComponentType<any>;
+  /**
+   * Image source or component to display in dark mode
+   */
+  dark: ImageSourcePropType | ReactElement | ComponentType<any>;
+}
+
+export default ThemedImageProps;

package/src/components/ThemedImage/ThemedImage.stories.tsx

@@ -0,0 +1,175 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MascotEnergyDark from '@utilitywarehouse/hearth-svg-assets/lib/mascot-energy-dark.svg';
+import MascotEnergyLight from '@utilitywarehouse/hearth-svg-assets/lib/mascot-energy-light.svg';
+import SceneBroadbandDark from '@utilitywarehouse/hearth-svg-assets/lib/scene-broadband-dark.svg';
+import SceneBroadbandLight from '@utilitywarehouse/hearth-svg-assets/lib/scene-broadband-light.svg';
+import SpotBillingDark from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-dark.svg';
+import SpotBillingLight from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-light.svg';
+import { SvgProps } from 'react-native-svg';
+import pig from '../../../docs/assets/pigs.png';
+import { Box } from '../Box';
+import { ThemedImage } from './';
+
+const meta: Meta<typeof ThemedImage> = {
+  title: 'Stories / ThemedImage',
+  component: ThemedImage,
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'ThemedImage component that automatically switches between light and dark mode images or SVG components based on the current theme.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ThemedImage>;
+
+export const Playground: Story = {
+  args: {},
+  render: () => (
+    <Box gap="200">
+      <ThemedImage
+        // @ts-ignore
+        light={<SpotBillingLight width={200} height={200} />}
+        // @ts-ignore
+        dark={<SpotBillingDark width={200} height={200} />}
+      />
+    </Box>
+  ),
+};
+
+export const WithSpotIllustrations: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <Box flexDirection="row" flexWrap="wrap" gap="200">
+      <ThemedImage
+        // @ts-ignore
+        light={<SpotBillingLight width={120} height={120} />}
+        // @ts-ignore
+        dark={<SpotBillingDark width={120} height={120} />}
+      />
+    </Box>
+  ),
+};
+
+export const WithMascots: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <Box flexDirection="row" flexWrap="wrap" gap="200" alignItems="center">
+      <ThemedImage
+        light={MascotEnergyLight as unknown as React.FC<SvgProps>}
+        dark={MascotEnergyDark as unknown as React.FC<SvgProps>}
+        width={120}
+        height={120}
+      />
+    </Box>
+  ),
+};
+
+export const WithSceneIllustrations: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <Box gap="200">
+      <ThemedImage
+        //  @ts-ignore
+        light={<SceneBroadbandLight width={300} height={200} />}
+        //  @ts-ignore
+        dark={<SceneBroadbandDark width={300} height={200} />}
+      />
+    </Box>
+  ),
+};
+
+export const WithRegularImages: Story = {
+  parameters: {
+    controls: { include: [] },
+    docs: {
+      description: {
+        story:
+          'ThemedImage also works with regular image sources (using `require` or `uri`), not just SVG components.',
+      },
+    },
+  },
+  render: () => (
+    <Box gap="200">
+      <ThemedImage
+        light={{
+          uri: pig,
+        }}
+        dark={{
+          uri: pig,
+        }}
+        width={200}
+        height={200}
+        style={{ width: 200, height: 200, borderRadius: 8 }}
+      />
+    </Box>
+  ),
+};
+
+export const WithCustomSize: Story = {
+  parameters: {
+    controls: { include: [] },
+    docs: {
+      description: {
+        story: 'When using SVG components, control their size with width and height props.',
+      },
+    },
+  },
+  render: () => (
+    <Box flexDirection="row" flexWrap="wrap" gap="200" alignItems="center">
+      <ThemedImage
+        // @ts-ignore
+        light={<SpotBillingLight width={80} height={80} />}
+        // @ts-ignore
+        dark={<SpotBillingDark width={80} height={80} />}
+      />
+      <ThemedImage
+        // @ts-ignore
+        light={<SpotBillingLight width={120} height={120} />}
+        // @ts-ignore
+        dark={<SpotBillingDark width={120} height={120} />}
+      />
+      <ThemedImage
+        // @ts-ignore
+        light={<SpotBillingLight width={160} height={160} />}
+        // @ts-ignore
+        dark={<SpotBillingDark width={160} height={160} />}
+      />
+    </Box>
+  ),
+};
+
+export const WithAccessibility: Story = {
+  parameters: {
+    controls: { include: [] },
+    docs: {
+      description: {
+        story:
+          'ThemedImage supports all standard Image accessibility props like `accessibilityLabel` and `accessible`.',
+      },
+    },
+  },
+  render: () => (
+    <Box gap="200">
+      <ThemedImage
+        // @ts-ignore
+        light={<MascotEnergyLight width={150} height={150} />}
+        // @ts-ignore
+        dark={<MascotEnergyDark width={150} height={150} />}
+        accessible={true}
+        accessibilityLabel="Energy service mascot illustration"
+      />
+    </Box>
+  ),
+};