@utilitywarehouse/hearth-react-native 0.8.0 → 0.8.2

package/.storybook/preview.tsx

@@ -72,6 +72,7 @@ const preview = {
           'Theme Tokens',
           'Hooks',
           'Layout Components',
+          'Guides',
           'All Components',
           'Primitives',
           'Typography',

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.8.0 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.8.2 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.8.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.8.2 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint --max-warnings 0
 
 Rule | Time (ms) | Relative

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.8.2
+
+### Patch Changes
+
+- [#652](https://github.com/utilitywarehouse/hearth/pull/652) [`5119703`](https://github.com/utilitywarehouse/hearth/commit/5119703a31f663cc8c0a8bb2c6ba5b10f9bf72d6) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes `RadioCard` label wrapping issue
+
+- [#648](https://github.com/utilitywarehouse/hearth/pull/648) [`c90ea5c`](https://github.com/utilitywarehouse/hearth/commit/c90ea5ce165f27ccfc9774ec58ac642d02b349d1) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes `ListAction` icon size
+
+- [#648](https://github.com/utilitywarehouse/hearth/pull/648) [`c90ea5c`](https://github.com/utilitywarehouse/hearth/commit/c90ea5ce165f27ccfc9774ec58ac642d02b349d1) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes `Banner` text gap size
+
+- [#651](https://github.com/utilitywarehouse/hearth/pull/651) [`4ee77b7`](https://github.com/utilitywarehouse/hearth/commit/4ee77b75e58ac4abbeba375ecb367d8899c7f1a0) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes `Banner` image and height issue
+
+- [#649](https://github.com/utilitywarehouse/hearth/pull/649) [`7374535`](https://github.com/utilitywarehouse/hearth/commit/737453598ad5e885b35b5fcd2e4c4ccff4910c43) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes `List` to only show `Card` container if it has children
+
+- [#648](https://github.com/utilitywarehouse/hearth/pull/648) [`c90ea5c`](https://github.com/utilitywarehouse/hearth/commit/c90ea5ce165f27ccfc9774ec58ac642d02b349d1) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `shadowColor` prop to `Card` and exposes helpers in theme
+
+## 0.8.1
+
+### Patch Changes
+
+- [#641](https://github.com/utilitywarehouse/hearth/pull/641) [`251242e`](https://github.com/utilitywarehouse/hearth/commit/251242e218c0b24589c3fb6fb6963b53bda8a367) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes `HighlightBanner` when no image is provided
+
 ## 0.8.0
 
 ### Minor Changes

package/build/components/Banner/Banner.js

@@ -16,10 +16,10 @@ const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md
             return (_jsx(IconContainer, { icon: icon, variant: iconContainerVariant, size: iconContainerSize, color: iconContainerColor, style: styles.media }));
         }
         if (illustration) {
-            return (_jsx(ThemedImage, { light: illustration.light, dark: illustration.dark, style: styles.image, accessible: true, accessibilityLabel: heading }));
+            return (_jsx(ThemedImage, { ...illustration, resizeMode: "cover", style: [styles.media, styles.imageWrapper, illustration.style] }));
         }
         if (image) {
-            return (_jsx(View, { style: [styles.media, styles.imageWrapper], children: _jsx(ThemedImage, { light: image.light, dark: image.dark, style: styles.image, accessible: true, accessibilityLabel: heading }) }));
+            return (_jsx(View, { style: [styles.media, styles.imageWrapper], children: _jsx(ThemedImage, { ...image, style: [styles.image, image.style] }) }));
         }
         return null;
     };
@@ -32,7 +32,7 @@ const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md
         }
         return null;
     };
-    const content = (_jsxs(View, { style: styles.container, children: [renderIconOrImage(), _jsxs(View, { style: styles.contentContainer, children: [_jsxs(View, { style: styles.textContainer, children: [_jsx(Heading, { size: "sm", style: styles.heading, textAlign: hasIllustration && direction === 'vertical' ? 'center' : 'left', children: heading }), _jsx(BodyText, { size: "md", style: styles.description, textAlign: hasIllustration && direction === 'vertical' ? 'center' : 'left', children: description }), renderAction()] }), onPress && (_jsx(UnstyledIconButton, { icon: ChevronRightSmallIcon, size: "sm", onPress: onPress, style: styles.chevron })), onClose && (_jsx(UnstyledIconButton, { icon: CloseSmallIcon, size: "sm", onPress: onClose, style: styles.closeButton, accessibilityLabel: "Close banner" }))] })] }));
+    const content = (_jsxs(View, { style: styles.container, children: [renderIconOrImage(), _jsxs(View, { style: styles.contentContainer, children: [_jsxs(View, { style: styles.contentTextContainer, children: [_jsxs(View, { style: styles.textContainer, children: [_jsx(Heading, { size: "sm", style: styles.heading, textAlign: hasIllustration && direction === 'vertical' ? 'center' : 'left', children: heading }), _jsx(BodyText, { size: "md", style: styles.description, textAlign: hasIllustration && direction === 'vertical' ? 'center' : 'left', children: description })] }), renderAction()] }), onPress && (_jsx(UnstyledIconButton, { icon: ChevronRightSmallIcon, size: "sm", onPress: onPress, style: styles.chevron })), onClose && (_jsx(UnstyledIconButton, { icon: CloseSmallIcon, size: "sm", onPress: onClose, style: styles.closeButton, accessibilityLabel: "Close banner" }))] })] }));
     if (onPress) {
         return (_jsx(Card, { variant: variant, style: [styles.card, style], ...props, children: _jsx(Pressable, { onPress: onPress, accessibilityRole: "button", style: styles.pressable, children: content }) }));
     }
@@ -92,6 +92,7 @@ const styles = StyleSheet.create(theme => ({
         },
     },
     imageWrapper: {
+        flexDirection: 'row',
         variants: {
             direction: {
                 horizontal: {},
@@ -103,8 +104,8 @@ const styles = StyleSheet.create(theme => ({
     },
     image: {
         borderRadius: theme.borderRadius.md,
-        borderWidth: theme.borderWidth[1],
         borderColor: theme.color.border.strong,
+        borderWidth: theme.borderWidth[1],
         variants: {
             direction: {
                 horizontal: { width: 160, height: 95 },
@@ -116,15 +117,34 @@ const styles = StyleSheet.create(theme => ({
         },
     },
     contentContainer: {
-        flex: 1,
-        flexDirection: 'row',
         alignItems: 'flex-start',
         justifyContent: 'space-between',
         gap: theme.space.lg,
+        variants: {
+            direction: {
+                horizontal: {
+                    flex: 1,
+                    flexDirection: 'row',
+                },
+                vertical: {
+                    flexDirection: 'column',
+                },
+            },
+        },
     },
     textContainer: {
-        flex: 1,
+        gap: theme.space.sm,
+    },
+    contentTextContainer: {
         gap: theme.space.lg,
+        variants: {
+            direction: {
+                horizontal: {
+                    flex: 1,
+                },
+                vertical: {},
+            },
+        },
     },
     heading: {
         compoundVariants: [

package/build/components/Banner/Banner.props.d.ts

@@ -1,6 +1,7 @@
 import type { ComponentType, ReactElement } from 'react';
-import type { ImageSourcePropType } from 'react-native';
+import { ImageProps } from 'react-native';
 import type CardProps from '../Card/Card.props';
+import { ThemedImageProps } from '../ThemedImage';
 export type BannerDirection = 'horizontal' | 'vertical';
 export interface BannerProps extends Omit<CardProps, 'noPadding' | 'variant' | 'colorScheme' | 'space' | 'gap' | 'rowGap' | 'columnGap' | 'flexDirection' | 'flexWrap' | 'alignItems' | 'justifyContent'> {
     /**
@@ -27,18 +28,12 @@ export interface BannerProps extends Omit<CardProps, 'noPadding' | 'variant' | '
      * Illustration to display in the banner
      * Mutually exclusive with icon and image
      */
-    illustration?: {
-        light: ImageSourcePropType | ReactElement | ComponentType;
-        dark: ImageSourcePropType | ReactElement | ComponentType;
-    };
+    illustration?: ThemedImageProps & ImageProps;
     /**
      * Image to display in the banner
      * Mutually exclusive with icon and illustration
      */
-    image?: {
-        light: ImageSourcePropType | ReactElement | ComponentType;
-        dark: ImageSourcePropType | ReactElement | ComponentType;
-    };
+    image?: ThemedImageProps & ImageProps;
     /**
      * Heading text
      */

package/build/components/Card/Card.props.d.ts

@@ -3,6 +3,7 @@ import { SpaceValue, SpacingValues } from '../../types';
 interface CardProps extends PressableProps {
     variant?: 'emphasis' | 'subtle';
     colorScheme?: 'neutralStrong' | 'neutralSubtle' | 'brand' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'pig';
+    shadowColor?: 'functional' | 'brand' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'pig';
     noPadding?: boolean;
     disabled?: boolean;
     space?: SpacingValues;

package/build/components/Card/CardRoot.d.ts

@@ -1,6 +1,6 @@
 import CardProps from './Card.props';
 declare const Card: {
-    ({ children, variant, colorScheme, noPadding, style, states, space, disabled, onPress, ...rest }: CardProps & {
+    ({ children, variant, colorScheme, shadowColor, noPadding, style, states, space, disabled, onPress, ...rest }: CardProps & {
         states?: {
             active?: boolean;
             disabled?: boolean;

package/build/components/Card/CardRoot.js

@@ -83,7 +83,7 @@ const collectChildActionHandlers = (children) => React.Children.toArray(children
     }
     return handlers;
 }, []);
-const Card = ({ children, variant = 'subtle', colorScheme = 'neutralStrong', noPadding = false, style, states, space, disabled = false, onPress, ...rest }) => {
+const Card = ({ children, variant = 'subtle', colorScheme = 'neutralStrong', shadowColor, noPadding = false, style, states, space, disabled = false, onPress, ...rest }) => {
     const { active } = states || { active: false };
     const childActionHandlers = collectChildActionHandlers(children);
     const hasActions = checkForComponentType(children, 'CardAction');
@@ -123,6 +123,7 @@ const Card = ({ children, variant = 'subtle', colorScheme = 'neutralStrong', noP
         showPressed,
         disabled,
         space: hasActions || hasContent ? 'none' : space,
+        shadowColor,
     });
     const renderChildren = () => {
         // Default: render children as-is
@@ -190,6 +191,32 @@ const styles = StyleSheet.create(theme => ({
                     borderWidth: theme.components.card.brand.borderWidth,
                 },
             },
+            shadowColor: {
+                functional: {
+                    boxShadow: theme.helpers.shadow.functional,
+                },
+                brand: {
+                    boxShadow: theme.helpers.shadow.brand,
+                },
+                energy: {
+                    boxShadow: theme.helpers.shadow.energy,
+                },
+                broadband: {
+                    boxShadow: theme.helpers.shadow.broadband,
+                },
+                mobile: {
+                    boxShadow: theme.helpers.shadow.mobile,
+                },
+                insurance: {
+                    boxShadow: theme.helpers.shadow.insurance,
+                },
+                cashback: {
+                    boxShadow: theme.helpers.shadow.cashback,
+                },
+                pig: {
+                    boxShadow: theme.helpers.shadow.pig,
+                },
+            },
             noPadding: {
                 true: {
                     padding: theme.components.card.mobile.paddingNone,

package/build/components/HighlightBanner/HighlightBanner.js

@@ -4,8 +4,8 @@ import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { Card } from '../Card';
 const HighlightBanner = ({ heading, headingColor, image, imageContainerHeight, description, link, button, variant = 'emphasis', style, ...props }) => {
-    styles.useVariants({ headingColor, variant });
-    return (_jsx(Card, { variant: variant, noPadding: true, style: style, ...props, children: _jsxs(View, { style: [styles.container], children: [_jsx(View, { style: [styles.header], children: _jsx(BodyText, { size: "md", textAlign: "center", weight: "semibold", children: heading }) }), _jsx(View, { style: styles.imageContainer(imageContainerHeight), children: _jsx(Image, { resizeMode: "cover", ...image, style: [styles.image, image?.style] }) }), _jsxs(View, { style: styles.footer, children: [_jsx(BodyText, { size: "md", textAlign: "center", children: description }), link && _jsx(View, { style: styles.linkContainer, children: link }), button && _jsx(View, { style: styles.buttonContainer, children: button })] })] }) }));
+    styles.useVariants({ headingColor, variant, hasImage: Boolean(image) });
+    return (_jsx(Card, { variant: variant, noPadding: true, style: style, ...props, children: _jsxs(View, { style: [styles.container], children: [_jsx(View, { style: [styles.header], children: _jsx(BodyText, { size: "md", textAlign: "center", weight: "semibold", children: heading }) }), !!image && (_jsx(View, { style: styles.imageContainer(imageContainerHeight), children: _jsx(Image, { resizeMode: "cover", ...image, style: [styles.image, image?.style] }) })), _jsxs(View, { style: styles.footer, children: [_jsx(BodyText, { size: "md", textAlign: "center", children: description }), link && _jsx(View, { style: styles.linkContainer, children: link }), button && _jsx(View, { style: styles.buttonContainer, children: button })] })] }) }));
 };
 HighlightBanner.displayName = 'HighlightBanner';
 const styles = StyleSheet.create(theme => ({
@@ -51,6 +51,11 @@ const styles = StyleSheet.create(theme => ({
                     borderColor: theme.color.border.subtle,
                 },
             },
+            hasImage: {
+                false: {
+                    borderBottomWidth: 0,
+                },
+            },
         },
     },
     imageContainer: (height = 200) => ({
@@ -74,6 +79,11 @@ const styles = StyleSheet.create(theme => ({
                     borderColor: theme.color.border.subtle,
                 },
             },
+            hasImage: {
+                true: {
+                    flex: 1,
+                },
+            },
         },
     },
     linkContainer: {

package/build/components/HighlightBanner/HighlightBanner.props.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { ImageProps } from 'react-native';
 import CardProps from '../Card/Card.props';
-interface HighlightBannerProps extends Omit<CardProps, 'noPadding' | 'variant' | 'space' | 'gap' | 'rowGap' | 'columnGap' | 'flexDirection' | 'flexWrap' | 'alignItems' | 'justifyContent'> {
+interface HighlightBannerProps extends Omit<CardProps, 'noPadding' | 'variant' | 'space' | 'gap' | 'rowGap' | 'columnGap' | 'flexDirection' | 'flexWrap' | 'alignItems' | 'justifyContent' | 'colorScheme'> {
     heading?: string;
     headingColor?: 'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight';
     variant?: 'emphasis' | 'subtle';

package/build/components/List/List.js

@@ -44,7 +44,7 @@ const List = ({ children, heading, helperText, headerTrailingContent, ...props }
     const updatedChildren = markFirstListItem(children);
     const value = useMemo(() => ({ loading, disabled, container }), [loading, disabled, container]);
     styles.useVariants({ disabled });
-    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...props, style: [styles.container, props.style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent })) : null, container === 'none' ? (_jsx(View, { children: updatedChildren })) : (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, children: _jsx(_Fragment, { children: updatedChildren }) }))] }) }));
+    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...props, style: [styles.container, props.style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent })) : null, container === 'none' ? (_jsx(View, { children: updatedChildren })) : (React.Children.count(updatedChildren) > 0 && (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, children: _jsx(_Fragment, { children: updatedChildren }) })))] }) }));
 };
 List.displayName = 'List';
 const styles = StyleSheet.create(theme => ({

package/build/components/List/ListAction/ListActionTrailingIcon.js

@@ -12,8 +12,8 @@ ListActionTrailingIcon.displayName = 'ListActionTrailingIcon';
 const styles = StyleSheet.create(theme => ({
     icon: {
         color: theme.color.icon.primary,
-        width: 24,
-        height: 24,
+        minWidth: 20,
+        minHeight: 20,
     },
 }));
 export default ListActionTrailingIcon;

package/build/components/RadioCard/RadioCardGroup.context.d.ts

@@ -0,0 +1,12 @@
+export declare const RadioCardGroupContext: import("react").Context<{
+    flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
+    flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
+    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
+    alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+}>;
+export declare const useRadioCardGroupContext: () => {
+    flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
+    flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
+    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
+    alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+};

package/build/components/RadioCard/RadioCardGroup.context.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from 'react';
+export const RadioCardGroupContext = createContext({});
+export const useRadioCardGroupContext = () => useContext(RadioCardGroupContext);

package/build/components/RadioCard/RadioCardGroup.js

@@ -1,18 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Grid } from '../Grid';
+import { RadioCardGroupContext } from './RadioCardGroup.context';
 const RadioCardGroup = ({ children, gap = '200', style, flexDirection = 'row', flexWrap, justifyContent, alignItems, columns, ...props }) => {
-    return columns ? (_jsx(Grid, { ...props, gap: gap, columns: columns, style: style, children: children })) : (_jsx(View, { ...props, style: [
-            styles.containerGap(gap),
-            {
-                flexDirection,
-                flexWrap,
-                justifyContent,
-                alignItems,
-            },
-            style,
-        ], children: children }));
+    const context = useMemo(() => {
+        return { flexDirection, flexWrap, justifyContent, alignItems };
+    }, [flexDirection, flexWrap, justifyContent, alignItems]);
+    return columns ? (_jsx(RadioCardGroupContext.Provider, { value: context, children: _jsx(Grid, { ...props, gap: gap, columns: columns, style: style, children: children }) })) : (_jsx(RadioCardGroupContext.Provider, { value: context, children: _jsx(View, { ...props, style: [
+                styles.containerGap(gap),
+                {
+                    flexDirection,
+                    flexWrap,
+                    justifyContent,
+                    alignItems,
+                },
+                style,
+            ], children: children }) }));
 };
 const styles = StyleSheet.create(theme => ({
     containerGap: (gap) => ({

package/build/components/RadioCard/RadioCardLabel.d.ts

@@ -1,6 +1,6 @@
 import LabelProps from '../Label/Label.props';
 declare const RadioCardLabel: {
-    ({ children, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, style, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default RadioCardLabel;

package/build/components/RadioCard/RadioCardLabel.js

@@ -1,5 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native-unistyles';
 import { Label } from '../Label';
-const RadioCardLabel = ({ children, ...props }) => _jsx(Label, { ...props, children: children });
+const RadioCardLabel = ({ children, style, ...props }) => (_jsx(Label, { ...props, style: [styles.label, style], children: children }));
+const styles = StyleSheet.create({
+    label: {
+        flexShrink: 1,
+    },
+});
 RadioCardLabel.displayName = 'RadioCardLabel';
 export default RadioCardLabel;

package/build/components/RadioCard/RadioCardRoot.js

@@ -3,14 +3,17 @@ import { useMemo } from 'react';
 import { StyleSheet } from 'react-native-unistyles';
 import { Pressable } from 'react-native';
 import { RadioCardContext } from './RadioCard.context';
+import { useRadioCardGroupContext } from './RadioCardGroup.context';
 const RadioCardRoot = ({ children, style, states, ...props }) => {
     const { checked, active } = states ?? {};
+    const { flexDirection } = useRadioCardGroupContext() ?? {};
     const value = useMemo(() => ({
         checked,
         active,
     }), [checked, active]);
     styles.useVariants({
         selected: checked,
+        flexDirection,
     });
     return (_jsx(RadioCardContext.Provider, { value: value, children: _jsx(Pressable, { ...props, style: [styles.container, style], children: children }) }));
 };
@@ -37,6 +40,16 @@ const styles = StyleSheet.create(theme => ({
                     margin: -theme.components.card.selectable.borderWidthSelected / 2,
                 },
             },
+            flexDirection: {
+                row: {},
+                column: {
+                    width: '100%',
+                },
+                'row-reverse': {},
+                'column-reverse': {
+                    width: '100%',
+                },
+            },
         },
         _web: {
             '_focus-visible': {

package/build/core/themes.d.ts

@@ -2,6 +2,16 @@ import { DimensionValue } from 'react-native';
 import { components } from '../tokens';
 export declare const lightTheme: {
     readonly helpers: {
+        shadow: {
+            functional: string;
+            brand: string;
+            energy: string;
+            broadband: string;
+            mobile: string;
+            insurance: string;
+            cashback: string;
+            pig: string;
+        };
         focusVisible: {
             outlineStyle: string;
             outlineWidth: number;
@@ -1352,6 +1362,16 @@ export declare const lightTheme: {
 };
 export declare const darkTheme: {
     readonly helpers: {
+        shadow: {
+            functional: string;
+            brand: string;
+            energy: string;
+            broadband: string;
+            mobile: string;
+            insurance: string;
+            cashback: string;
+            pig: string;
+        };
         focusVisible: {
             outlineStyle: string;
             outlineWidth: number;
@@ -2714,6 +2734,16 @@ export declare const darkTheme: {
 export declare const themes: {
     readonly light: {
         readonly helpers: {
+            shadow: {
+                functional: string;
+                brand: string;
+                energy: string;
+                broadband: string;
+                mobile: string;
+                insurance: string;
+                cashback: string;
+                pig: string;
+            };
             focusVisible: {
                 outlineStyle: string;
                 outlineWidth: number;
@@ -4064,6 +4094,16 @@ export declare const themes: {
     };
     readonly dark: {
         readonly helpers: {
+            shadow: {
+                functional: string;
+                brand: string;
+                energy: string;
+                broadband: string;
+                mobile: string;
+                insurance: string;
+                cashback: string;
+                pig: string;
+            };
             focusVisible: {
                 outlineStyle: string;
                 outlineWidth: number;

package/build/core/themes.js

@@ -254,6 +254,16 @@ const shared = {
 };
 const lightHelpers = {
     ...shared.helpers,
+    shadow: {
+        functional: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.default}`,
+        brand: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.brand}`,
+        energy: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.energy}`,
+        broadband: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.broadband}`,
+        mobile: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.mobile}`,
+        insurance: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.insurance}`,
+        cashback: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.cashback}`,
+        pig: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.pig}`,
+    },
     focusVisible: {
         outlineStyle: 'solid',
         outlineWidth: 2,
@@ -286,6 +296,16 @@ export const lightTheme = {
 };
 const darkHelpers = {
     ...shared.helpers,
+    shadow: {
+        functional: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.default}`,
+        brand: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.brand}`,
+        energy: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.energy}`,
+        broadband: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.broadband}`,
+        mobile: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.mobile}`,
+        insurance: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.insurance}`,
+        cashback: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.cashback}`,
+        pig: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.pig}`,
+    },
     focusVisible: {
         outlineStyle: 'solid',
         outlineWidth: 2,

package/docs/adding-shadows.mdx

@@ -0,0 +1,43 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { BackToTopButton, NextPrevPage } from './components';
+
+<Meta title="Guides / Adding Shadows" />
+<BackToTopButton />
+
+# Adding Shadows
+
+You can add shadows to your components in Hearth React Native using the Unistyles styling system. Shadows help create depth and visual hierarchy in your UI.
+
+- [Using Predefined Shadows](#using-predefined-shadows)
+- [Components with Shadow Props](#components-with-shadow-props)
+
+## Using Predefined Shadows
+
+Hearth provides a set of predefined shadow styles that you can easily apply to your components. These shadows are defined in the theme and can be accessed via the `theme.helpers.shadow` object.
+
+```tsx
+import { View } from 'react-native';
+import { StyleSheet, Input } from '@utilitywarehouse/hearth-react-native';
+
+const styles = StyleSheet.create(theme => ({
+  input: {
+    boxShadow: theme.helpers.shadow.functional, // Apply a predefined shadow
+  },
+}));
+
+const MyComponent = () => (
+  <View>
+    <Input placeholder="Input with shadow" style={styles.input} />
+  </View>
+);
+```
+
+## Components with Shadow Props
+
+Some Hearth components, like `Card`, allow you to specify shadow colors directly via props. You can use the `shadowColor` prop to set the shadow color based on the theme.
+
+```tsx
+import { Card } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => <Card shadowColor="brand">{/* Card content */}</Card>;
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -57,8 +57,8 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-icons": "^0.7.2",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.7.2",
+    "@utilitywarehouse/hearth-react-icons": "^0.7.3",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.7.3",
     "@utilitywarehouse/hearth-svg-assets": "^0.2.0",
     "@utilitywarehouse/hearth-tokens": "^0.1.3"
   },

package/src/components/Banner/Banner.docs.mdx

@@ -24,7 +24,7 @@ The `Banner` component is a versatile card-based component for displaying inform
   - [With Link](#with-link)
   - [Pressable](#pressable)
   - [With Close Button](#with-close-button)
-  - [Vertical Layout](#vertical-layout)
+  - [Vertical Layout](#vertical-layout-1)
   - [Color Schemes](#color-schemes)
   - [Complex Examples](#complex-examples)
 

package/src/components/Banner/Banner.props.ts

@@ -1,6 +1,7 @@
 import type { ComponentType, ReactElement } from 'react';
-import type { ImageSourcePropType } from 'react-native';
+import { ImageProps } from 'react-native';
 import type CardProps from '../Card/Card.props';
+import { ThemedImageProps } from '../ThemedImage';
 
 export type BannerDirection = 'horizontal' | 'vertical';
 
@@ -50,18 +51,12 @@ export interface BannerProps
    * Illustration to display in the banner
    * Mutually exclusive with icon and image
    */
-  illustration?: {
-    light: ImageSourcePropType | ReactElement | ComponentType;
-    dark: ImageSourcePropType | ReactElement | ComponentType;
-  };
+  illustration?: ThemedImageProps & ImageProps;
   /**
    * Image to display in the banner
    * Mutually exclusive with icon and illustration
    */
-  image?: {
-    light: ImageSourcePropType | ReactElement | ComponentType;
-    dark: ImageSourcePropType | ReactElement | ComponentType;
-  };
+  image?: ThemedImageProps & ImageProps;
   /**
    * Heading text
    */