@utilitywarehouse/hearth-react-native 0.8.1 → 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.1 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.1 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,21 @@
 # @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

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.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.1",
+  "version": "0.8.2",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -56,10 +56,10 @@
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
+    "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-react-icons": "^0.7.3",
     "@utilitywarehouse/hearth-react-native-icons": "^0.7.3",
     "@utilitywarehouse/hearth-svg-assets": "^0.2.0",
-    "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-tokens": "^0.1.3"
   },
   "peerDependencies": {

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
    */

package/src/components/Banner/Banner.stories.tsx

@@ -54,6 +54,20 @@ const meta = {
       description: 'Icon container size',
       options: ['sm', 'md', 'lg'],
     },
+    shadowColor: {
+      control: 'select',
+      description: 'The shadow color of the banner',
+      options: [
+        'functional',
+        'brand',
+        'energy',
+        'broadband',
+        'mobile',
+        'insurance',
+        'cashback',
+        'pig',
+      ],
+    },
   },
   args: {
     heading: 'Welcome to Banner',
@@ -310,6 +324,7 @@ export const VerticalLayout: Story = {
             direction="vertical"
           />
           <Banner
+            variant="emphasis"
             image={{
               light: {
                 uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
@@ -320,6 +335,7 @@ export const VerticalLayout: Story = {
             }}
             heading="Featured Content"
             description="Discover amazing content curated just for you."
+            shadowColor="brand"
             direction="vertical"
             button={
               <Button size="sm" onPress={() => console.log('Learn More pressed')}>

package/src/components/Banner/Banner.tsx

@@ -46,24 +46,16 @@ const Banner = ({
     if (illustration) {
       return (
         <ThemedImage
-          light={illustration.light}
-          dark={illustration.dark}
-          style={styles.image}
-          accessible
-          accessibilityLabel={heading}
+          {...illustration}
+          resizeMode="cover"
+          style={[styles.media, styles.imageWrapper, illustration.style]}
         />
       );
     }
     if (image) {
       return (
         <View style={[styles.media, styles.imageWrapper]}>
-          <ThemedImage
-            light={image.light}
-            dark={image.dark}
-            style={styles.image}
-            accessible
-            accessibilityLabel={heading}
-          />
+          <ThemedImage {...image} style={[styles.image, image.style]} />
         </View>
       );
     }
@@ -84,21 +76,24 @@ const Banner = ({
     <View style={styles.container}>
       {renderIconOrImage()}
       <View style={styles.contentContainer}>
-        <View style={styles.textContainer}>
-          <Heading
-            size="sm"
-            style={styles.heading}
-            textAlign={hasIllustration && direction === 'vertical' ? 'center' : 'left'}
-          >
-            {heading}
-          </Heading>
-          <BodyText
-            size="md"
-            style={styles.description}
-            textAlign={hasIllustration && direction === 'vertical' ? 'center' : 'left'}
-          >
-            {description}
-          </BodyText>
+        <View style={styles.contentTextContainer}>
+          <View style={styles.textContainer}>
+            <Heading
+              size="sm"
+              style={styles.heading}
+              textAlign={hasIllustration && direction === 'vertical' ? 'center' : 'left'}
+            >
+              {heading}
+            </Heading>
+            <BodyText
+              size="md"
+              style={styles.description}
+              textAlign={hasIllustration && direction === 'vertical' ? 'center' : 'left'}
+            >
+              {description}
+            </BodyText>
+          </View>
+
           {renderAction()}
         </View>
         {onPress && (
@@ -194,6 +189,7 @@ const styles = StyleSheet.create(theme => ({
     },
   },
   imageWrapper: {
+    flexDirection: 'row',
     variants: {
       direction: {
         horizontal: {},
@@ -205,8 +201,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 },
@@ -218,15 +214,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/src/components/Card/Card.docs.mdx

@@ -22,6 +22,7 @@ A Card component serves as a visual container that groups related content and ac
 - [Variants](#variants)
 - [Examples](#examples)
   - [Interactive](#interactive)
+  - [With Shadow](#with-shadow)
   - [With `CardAction`](#with-cardaction)
     - [`CardAction` Playground](#cardaction-playground)
     - [`CardAction` With Badge](#cardaction-with-badge)
@@ -64,7 +65,8 @@ const MyComponent = () => (
 | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ----------------- |
 | variant        | `'subtle' \| 'emphasis' `                                                                                                                    | The variant of the card.                   | `'subtle'`        |
 | colorScheme    | `'neutralStrong' \| 'neutralSubtle' \| 'purple' \| 'energy'` <br /> `'broadband' \| 'mobile' \| 'insurance' \| 'cashback' \|` <br /> `'pig'` | The color scheme of the card.              | `'neutralStrong'` |
-| noPadding      | `boolean`                                                                                                                                    | Wether or not the card has padding.        | `false`           |
+| shadowColor    | `'functional' \| 'brand' \| 'energy' \| 'broadband' \| 'mobile' `<br /> `'insurance' \| 'cashback' \| 'pig'`                                 | The shadow color of the card.              | `-`               |
+| noPadding      | `boolean`                                                                                                                                    | Whether or not the card has padding.       | `false`           |
 | selected       | `boolean`                                                                                                                                    | Whether the card is selected.              | `false`           |
 | onPress        | `() => void`                                                                                                                                 | Callback function to be called.            | `-`               |
 | disabled       | `boolean`                                                                                                                                    | Whether the card is disabled.              | `false`           |
@@ -146,6 +148,23 @@ const MyComponent = () => (
 );
 ```
 
+### With Shadow
+
+You can add shadow to the `Card` component by using the `shadowColor` prop. This prop accepts various semantic color options to match your design needs.
+
+<Canvas of={Stories.WithShadow} />
+
+```jsx
+import { Card, BodyText, Heading } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <Card shadowColor="functional" variant="emphasis">
+    <Heading size="lg">Card with Shadow</Heading>
+    <BodyText>This card has a shadow applied using the shadowColor prop.</BodyText>
+  </Card>
+);
+```
+
 ### With `CardAction`
 
 You can use the `CardAction` component within a `Card` to create actionable items with consistent styling.

package/src/components/Card/Card.props.ts

@@ -13,6 +13,15 @@ interface CardProps extends PressableProps {
     | 'insurance'
     | 'cashback'
     | 'pig';
+  shadowColor?:
+    | 'functional'
+    | 'brand'
+    | 'energy'
+    | 'broadband'
+    | 'mobile'
+    | 'insurance'
+    | 'cashback'
+    | 'pig';
   noPadding?: boolean;
   disabled?: boolean;
   space?: SpacingValues;

package/src/components/Card/Card.stories.tsx

@@ -38,6 +38,20 @@ const meta = {
       ],
       description: 'Use this value to set the Card color scheme.',
     },
+    shadowColor: {
+      control: 'select',
+      options: [
+        'functional',
+        'brand',
+        'energy',
+        'broadband',
+        'mobile',
+        'insurance',
+        'cashback',
+        'pig',
+      ],
+      description: 'Use this value to set the Card shadow color.',
+    },
   },
   args: {
     children: 'This is a card',
@@ -208,6 +222,31 @@ export const Variants: Story = {
   },
 };
 
+export const WithShadow: Story = {
+  args: {
+    shadowColor: 'functional',
+  },
+  parameters: {
+    controls: { exclude: ['variant'] },
+  },
+  render: ({ children, ...props }) => {
+    return (
+      <Flex space="lg">
+        <VariantTitle title="Subtle - White - Shadow">
+          <Card {...props} variant="subtle">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Emphasis - White - Shadow">
+          <Card {...props} variant="emphasis">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+      </Flex>
+    );
+  },
+};
+
 export const Interactive: Story = {
   parameters: {
     controls: { exclude: ['variant', 'colorScheme'] },

package/src/components/Card/CardRoot.tsx

@@ -104,12 +104,14 @@ const Card = ({
   children,
   variant = 'subtle',
   colorScheme = 'neutralStrong',
+  shadowColor,
   noPadding = false,
   style,
   states,
   space,
   disabled = false,
   onPress,
+
   ...rest
 }: CardProps & { states?: { active?: boolean; disabled?: boolean } }) => {
   const { active } = states || { active: false };
@@ -165,6 +167,7 @@ const Card = ({
     showPressed,
     disabled,
     space: hasActions || hasContent ? 'none' : space,
+    shadowColor,
   });
 
   const renderChildren = () => {
@@ -257,6 +260,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/src/components/Checkbox/CheckboxGroup.stories.tsx

@@ -1,5 +1,5 @@
-import { Checkbox, CheckboxGroup } from '.';
 import { Meta, StoryObj } from '@storybook/react-vite';
+import { Checkbox, CheckboxGroup } from '.';
 
 const meta = {
   title: 'Stories / CheckboxGroup',
@@ -80,3 +80,21 @@ export const Playground: Story = {
     </CheckboxGroup>
   ),
 };
+
+export const LongContent: Story = {
+  args: {
+    type: 'tile',
+  },
+  render: args => (
+    <CheckboxGroup {...args}>
+      <Checkbox aria-label="Label 1" label="Option 1" value="Option 1" nativeID="Checkbox-1" />
+      <Checkbox
+        aria-label="Label 2"
+        label="Option 2 with a very long content that should wrap into multiple lines to test the layout of the checkbox component in such scenarios."
+        value="Option 2"
+        nativeID="Checkbox-2"
+      />
+      <Checkbox aria-label="Label 3" label="Option 3" value="Option 3" nativeID="Checkbox-3" />
+    </CheckboxGroup>
+  ),
+};

package/src/components/HighlightBanner/HighlightBanner.docs.mdx

@@ -79,7 +79,7 @@ const MyComponent = () => (
 | button               | `ReactElement`                                                                                     | Optional Button component displayed below description         | `-`          |
 | variant              | `'emphasis' \| 'subtle'`                                                                           | Visual style variant with strong or subtle borders            | `'emphasis'` |
 
-The component also accepts all standard Card props except `noPadding`, `space`, `gap`, `rowGap`, `columnGap`, `flexDirection`, `flexWrap`, `alignItems`, and `justifyContent`.
+The component also accepts all standard Card props except `noPadding`, `colorScheme`, `space`, `gap`, `rowGap`, `columnGap`, `flexDirection`, `flexWrap`, `alignItems`, and `justifyContent`.
 
 ## Variants
 

package/src/components/HighlightBanner/HighlightBanner.props.ts

@@ -15,6 +15,7 @@ interface HighlightBannerProps
     | 'flexWrap'
     | 'alignItems'
     | 'justifyContent'
+    | 'colorScheme'
   > {
   heading?: string;
   headingColor?: 'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight';

package/src/components/HighlightBanner/HighlightBanner.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
+import { Meta, StoryObj } from '@storybook/react-native';
 import { View } from 'react-native';
 import { Button } from '../Button';
 import { Flex } from '../Flex';
@@ -30,6 +30,20 @@ const meta = {
       description: 'The variant style of the HighlightBanner',
       options: ['emphasis', 'subtle'],
     },
+    shadowColor: {
+      control: 'select',
+      description: 'The shadow color of the card',
+      options: [
+        'functional',
+        'brand',
+        'energy',
+        'broadband',
+        'mobile',
+        'insurance',
+        'cashback',
+        'pig',
+      ],
+    },
   },
   args: {
     heading: 'Featured Content',

package/src/components/List/List.tsx

@@ -69,9 +69,11 @@ const List = ({ children, heading, helperText, headerTrailingContent, ...props }
         {container === 'none' ? (
           <View>{updatedChildren}</View>
         ) : (
-          <Card {...containerToCard} noPadding style={styles.card}>
-            <>{updatedChildren}</>
-          </Card>
+          React.Children.count(updatedChildren) > 0 && (
+            <Card {...containerToCard} noPadding style={styles.card}>
+              <>{updatedChildren}</>
+            </Card>
+          )
         )}
       </View>
     </ListContext.Provider>

package/src/components/List/ListAction/ListActionTrailingIcon.tsx

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

package/src/components/Radio/RadioGroup.stories.tsx

@@ -105,3 +105,21 @@ export const WithGrid: Story = {
     </RadioGroup>
   ),
 };
+
+export const LongContent: Story = {
+  args: {
+    type: 'tile',
+  },
+  render: args => (
+    <RadioGroup {...args}>
+      <Radio aria-label="Label 1" label="Option 1" value="Option 1" nativeID="Radio-1" />
+      <Radio
+        aria-label="Label 2"
+        label="Option 2 with a very long content that spans multiple lines to test text wrapping"
+        value="Option 2"
+        nativeID="Radio-2"
+      />
+      <Radio aria-label="Label 3" label="Option 3" value="Option 3" nativeID="Radio-3" />
+    </RadioGroup>
+  ),
+};

package/src/components/RadioCard/RadioCardGroup.context.ts

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react';
+
+export const RadioCardGroupContext = createContext<{
+  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 const useRadioCardGroupContext = () => useContext(RadioCardGroupContext);

package/src/components/RadioCard/RadioCardGroup.stories.tsx

@@ -68,3 +68,27 @@ export const Playground: Story = {
     </RadioCardGroup>
   ),
 };
+
+export const LongContent: Story = {
+  args: {
+    flexDirection: 'column',
+  },
+  render: args => (
+    <RadioCardGroup {...args}>
+      <RadioCard aria-label="Label 1" label="Option 1" value="Option 1" nativeID="RadioCard-1">
+        <BodyText>Additional content</BodyText>
+      </RadioCard>
+      <RadioCard
+        aria-label="Label 2"
+        label="Option 2 with a very long content that should wrap into multiple lines to test the layout of the RadioCard component in such scenarios."
+        value="Option 2"
+        nativeID="RadioCard-2"
+      >
+        <BodyText>Additional content</BodyText>
+      </RadioCard>
+      <RadioCard aria-label="Label 3" label="Option 3" value="Option 3" nativeID="RadioCard-3">
+        <BodyText>Additional content</BodyText>
+      </RadioCard>
+    </RadioCardGroup>
+  ),
+};

package/src/components/RadioCard/RadioCardGroup.tsx

@@ -1,7 +1,9 @@
-import RadioCardGroupProps from './RadioCardGroup.props';
+import { useMemo } from 'react';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Grid } from '../Grid';
+import { RadioCardGroupContext } from './RadioCardGroup.context';
+import RadioCardGroupProps from './RadioCardGroup.props';
 
 const RadioCardGroup = ({
   children,
@@ -14,26 +16,33 @@ const RadioCardGroup = ({
   columns,
   ...props
 }: RadioCardGroupProps) => {
+  const context = useMemo(() => {
+    return { flexDirection, flexWrap, justifyContent, alignItems };
+  }, [flexDirection, flexWrap, justifyContent, alignItems]);
   return columns ? (
-    <Grid {...props} gap={gap} columns={columns} style={style}>
-      {children as any}
-    </Grid>
+    <RadioCardGroupContext.Provider value={context}>
+      <Grid {...props} gap={gap} columns={columns} style={style}>
+        {children as any}
+      </Grid>
+    </RadioCardGroupContext.Provider>
   ) : (
-    <View
-      {...props}
-      style={[
-        styles.containerGap(gap),
-        {
-          flexDirection,
-          flexWrap,
-          justifyContent,
-          alignItems,
-        },
-        style,
-      ]}
-    >
-      {children}
-    </View>
+    <RadioCardGroupContext.Provider value={context}>
+      <View
+        {...props}
+        style={[
+          styles.containerGap(gap),
+          {
+            flexDirection,
+            flexWrap,
+            justifyContent,
+            alignItems,
+          },
+          style,
+        ]}
+      >
+        {children}
+      </View>
+    </RadioCardGroupContext.Provider>
   );
 };
 

package/src/components/RadioCard/RadioCardLabel.tsx

@@ -1,7 +1,18 @@
+import { StyleSheet } from 'react-native-unistyles';
 import { Label } from '../Label';
 import LabelProps from '../Label/Label.props';
 
-const RadioCardLabel = ({ children, ...props }: LabelProps) => <Label {...props}>{children}</Label>;
+const RadioCardLabel = ({ children, style, ...props }: LabelProps) => (
+  <Label {...props} style={[styles.label, style]}>
+    {children}
+  </Label>
+);
+
+const styles = StyleSheet.create({
+  label: {
+    flexShrink: 1,
+  },
+});
 
 RadioCardLabel.displayName = 'RadioCardLabel';
 

package/src/components/RadioCard/RadioCardRoot.tsx

@@ -4,6 +4,7 @@ import { StyleSheet } from 'react-native-unistyles';
 import { Pressable, ViewStyle } from 'react-native';
 import { RadioCardContext } from './RadioCard.context';
 import type RadioCardProps from './RadioCard.props';
+import { useRadioCardGroupContext } from './RadioCardGroup.context';
 
 const RadioCardRoot = ({
   children,
@@ -13,6 +14,8 @@ const RadioCardRoot = ({
 }: RadioCardProps & { states?: { disabled?: boolean; checked?: boolean; active?: boolean } }) => {
   const { checked, active } = states ?? {};
 
+  const { flexDirection } = useRadioCardGroupContext() ?? {};
+
   const value = useMemo(
     () => ({
       checked,
@@ -23,6 +26,7 @@ const RadioCardRoot = ({
 
   styles.useVariants({
     selected: checked,
+    flexDirection,
   });
 
   return (
@@ -39,6 +43,7 @@ RadioCardRoot.displayName = 'RadioCardRoot';
 const styles = StyleSheet.create(theme => ({
   container: {
     flexDirection: 'column',
+
     gap: theme.components.card.selectable.gap,
     borderRadius: theme.components.card.borderRadius,
     backgroundColor: theme.color.surface.neutral.strong,
@@ -58,6 +63,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/src/core/themes.ts

@@ -269,6 +269,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,
@@ -303,6 +313,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,