@utilitywarehouse/hearth-react-native 0.29.1 → 0.30.0

package/.turbo/turbo-build.log

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

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.29.1 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.30.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -51,15 +51,15 @@
 
 ✖ 22 problems (0 errors, 22 warnings)
 
-Rule                                              | Time (ms) | Relative
-:-------------------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars                 |  1543.146 |    60.0%
-react-hooks/exhaustive-deps                       |   137.989 |     5.4%
-no-global-assign                                  |    91.047 |     3.5%
-react-hooks/rules-of-hooks                        |    90.077 |     3.5%
-@typescript-eslint/no-unnecessary-type-constraint |    40.362 |     1.6%
-no-loss-of-precision                              |    40.140 |     1.6%
-no-unexpected-multiline                           |    37.188 |     1.4%
-no-regex-spaces                                   |    35.566 |     1.4%
-@typescript-eslint/ban-ts-comment                 |    34.241 |     1.3%
-no-fallthrough                                    |    31.788 |     1.2%
+Rule                              | Time (ms) | Relative
+:---------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars |  1641.469 |    60.9%
+no-global-assign                  |    98.820 |     3.7%
+react-hooks/exhaustive-deps       |    93.179 |     3.5%
+no-unexpected-multiline           |    70.646 |     2.6%
+react-hooks/rules-of-hooks        |    65.259 |     2.4%
+@typescript-eslint/ban-ts-comment |    45.783 |     1.7%
+no-misleading-character-class     |    45.630 |     1.7%
+no-loss-of-precision              |    43.137 |     1.6%
+@typescript-eslint/no-this-alias  |    38.127 |     1.4%
+no-control-regex                  |    32.544 |     1.2%

package/CHANGELOG.md

@@ -1,5 +1,87 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.30.0
+
+### Minor Changes
+
+- [#1072](https://github.com/utilitywarehouse/hearth/pull/1072) [`55f0095`](https://github.com/utilitywarehouse/hearth/commit/55f009576ba55081de358bccc21691861ddd7c33) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `loadingDescription` support to `Modal` and `NavModal`
+
+  `Modal` and `NavModal` now accept a `loadingDescription` prop to render supporting text beneath the spinner while `loading` is true. This makes it easier to give users more context during loading states without building custom loading content.
+
+  **Components affected**:
+  - `Modal`
+  - `NavModal`
+
+  **Developer changes**:
+
+  No changes are required for existing usage. To show supporting text in a loading state, pass `loadingDescription` alongside `loading` and, if needed, `loadingHeading`.
+
+### Patch Changes
+
+- [#1070](https://github.com/utilitywarehouse/hearth/pull/1070) [`93c042c`](https://github.com/utilitywarehouse/hearth/commit/93c042c7772ab298e2ea4888a9777e8176453098) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Standardise numeric value typography across list-based components.
+
+  Numeric values in `DescriptionListItem`, `ExpandableCard`, and `ListItem` now render with semibold `BodyText` instead of `DetailText`, aligning them with the updated content hierarchy used elsewhere in the library.
+
+  **Components affected**:
+  - `DescriptionListItem`
+  - `ExpandableCard`
+  - `ListItem`
+
+  **Developer changes**:
+
+  No changes are required.
+
+- [#1073](https://github.com/utilitywarehouse/hearth/pull/1073) [`9759622`](https://github.com/utilitywarehouse/hearth/commit/975962229137dd196e5f72a04037a8f181907818) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Announce `Heading` as a header for assistive technologies.
+
+  `Heading` now sets `accessibilityRole="header"` automatically so VoiceOver and TalkBack can identify headings as part of the screen structure.
+
+  **Components affected**:
+  - `Heading`
+
+  **Developer changes**:
+
+  No changes are required.
+
+- [#1074](https://github.com/utilitywarehouse/hearth/pull/1074) [`95fe19e`](https://github.com/utilitywarehouse/hearth/commit/95fe19e6328bf652ff3ac1b2c723e1389fc59936) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Improve accessibility roles for `List`, `ListItem`, and `ListAction`
+
+  `List` now defaults to `accessibilityRole="list"`, `ListAction` now defaults to `accessibilityRole="button"`, and `ListItem` respects an explicitly provided `accessibilityRole` instead of always forcing button semantics when `onPress` is set.
+
+  **Components affected**:
+  - `List`
+  - `ListItem`
+  - `ListAction`
+
+  **Developer changes**:
+
+  No changes are required unless you want a tappable `ListItem` to be announced as something other than a button. In that case, pass `accessibilityRole` explicitly.
+
+## 0.29.2
+
+### Patch Changes
+
+- [#1067](https://github.com/utilitywarehouse/hearth/pull/1067) [`893cbfd`](https://github.com/utilitywarehouse/hearth/commit/893cbfd1bf090b8b75df6f58f2babaf8ba1e0033) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add a `useSafeAreaInsets` prop to `BottomSheetModalProvider` to control Hearth's bottom-sheet safe-area spacing.
+
+  Bottom-sheet wrappers such as `BottomSheetView`, `BottomSheetScrollView`, `BottomSheetFlatList`, and components that render `SafeAreaView` inside a bottom sheet now respect `BottomSheetModalProvider` configuration.
+
+  **Components affected**:
+  - `BottomSheetModalProvider`
+  - `BottomSheetView`
+  - `BottomSheetScrollView`
+  - `BottomSheetFlatList`
+  - `Modal`
+  - `Select`
+  - `Combobox`
+
+  **Developer changes**:
+
+  No changes are required if you want the current behaviour. If your app already applies its own safe-area padding around bottom-sheet content, opt out like this:
+
+  ```tsx
+  <BottomSheetModalProvider useSafeAreaInsets={false}>
+    {/* Your app content */}
+  </BottomSheetModalProvider>
+  ```
+
 ## 0.29.1
 
 ### Patch Changes

package/build/components/BottomSheet/BottomSheet.context.d.ts

@@ -1,5 +1,6 @@
 interface BottomSheetContextProps {
     handle?: boolean;
+    useSafeAreaInsets: boolean;
 }
 export declare const BottomSheetContext: import("react").Context<BottomSheetContextProps>;
 export declare const useBottomSheetContext: () => BottomSheetContextProps;

package/build/components/BottomSheet/BottomSheet.context.js

@@ -1,5 +1,7 @@
 import { createContext, useContext } from 'react';
-export const BottomSheetContext = createContext({});
+export const BottomSheetContext = createContext({
+    useSafeAreaInsets: true,
+});
 export const useBottomSheetContext = () => {
     const context = useContext(BottomSheetContext);
     return context;

package/build/components/BottomSheet/BottomSheet.js

@@ -7,6 +7,7 @@ import useBottomSheetLogic from './useBottomSheetLogic';
 const StyledBottomSheetCore = withUnistyles(BottomSheetCore);
 const BottomSheet = ({ children, containerStyle, handleStyle, backdrop = true, showHandle = true, ref, ...rest }) => {
     const bottomSheetRef = React.useRef(null);
+    const parentContext = React.useContext(BottomSheetContext);
     const { renderBackdrop, renderHandle } = useBottomSheetLogic({
         ref,
         bottomSheetRef,
@@ -14,7 +15,10 @@ const BottomSheet = ({ children, containerStyle, handleStyle, backdrop = true, s
         showHandle,
         handleStyle,
     });
-    const value = useMemo(() => ({ handle: showHandle }), [showHandle]);
+    const value = useMemo(() => ({
+        ...parentContext,
+        handle: showHandle,
+    }), [parentContext, showHandle]);
     return (_jsx(StyledBottomSheetCore, { ref: bottomSheetRef, index: -1, backdropComponent: renderBackdrop, handleComponent: renderHandle, style: [styles.container, containerStyle], backgroundStyle: styles.background, ...rest, children: _jsx(BottomSheetContext.Provider, { value: value, children: children }) }));
 };
 const styles = StyleSheet.create(theme => ({

package/build/components/BottomSheet/BottomSheetFlatList.js

@@ -4,10 +4,11 @@ import { StyleSheet, withUnistyles } from 'react-native-unistyles';
 import { useBottomSheetContext } from './BottomSheet.context';
 const StyledBottomSheetFlatList = withUnistyles(FlatList);
 const BottomSheetFlatList = ({ style, contentContainerStyle, isModal = true, ...props }) => {
-    const { handle } = useBottomSheetContext();
+    const { handle, useSafeAreaInsets } = useBottomSheetContext();
     styles.useVariants({
         isModal,
         handle,
+        useSafeAreaInsets,
     });
     return (_jsx(StyledBottomSheetFlatList, { style: [styles.container, style], contentContainerStyle: [styles.contentContainer, contentContainerStyle], ...props }));
 };
@@ -19,7 +20,7 @@ const styles = StyleSheet.create((theme, rt) => ({
         variants: {
             isModal: {
                 true: {
-                    paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+                    paddingBottom: theme.components.bottomSheet.padding,
                 },
             },
             handle: {
@@ -27,7 +28,20 @@ const styles = StyleSheet.create((theme, rt) => ({
                     paddingTop: theme.components.bottomSheet.padding,
                 },
             },
+            useSafeAreaInsets: {
+                true: {},
+                false: {},
+            },
         },
+        compoundVariants: [
+            {
+                isModal: true,
+                useSafeAreaInsets: true,
+                styles: {
+                    paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+                },
+            },
+        ],
     },
 }));
 BottomSheetFlatList.displayName = 'BottomSheetFlatList';

package/build/components/BottomSheet/BottomSheetModal.js

@@ -7,6 +7,7 @@ import useBottomSheetLogic from './useBottomSheetLogic';
 const StyledBottomSheetModalCore = withUnistyles(BottomSheetModalCore);
 const BottomSheetModal = ({ children, containerStyle, handleStyle, backdrop = true, showHandle = true, ref, ...rest }) => {
     const bottomSheetRef = React.useRef(null);
+    const parentContext = React.useContext(BottomSheetContext);
     const { renderBackdrop, renderHandle } = useBottomSheetLogic({
         // @ts-expect-error - ref
         ref,
@@ -15,7 +16,10 @@ const BottomSheetModal = ({ children, containerStyle, handleStyle, backdrop = tr
         showHandle,
         handleStyle,
     });
-    const value = useMemo(() => ({ handle: showHandle }), [showHandle]);
+    const value = useMemo(() => ({
+        ...parentContext,
+        handle: showHandle,
+    }), [parentContext, showHandle]);
     return (_jsx(StyledBottomSheetModalCore, { ref: bottomSheetRef, backdropComponent: renderBackdrop, handleComponent: renderHandle, style: [styles.container, containerStyle], backgroundStyle: styles.background, ...rest, children: _jsx(BottomSheetContext.Provider, { value: value, children: children }) }));
 };
 const styles = StyleSheet.create(theme => ({

package/build/components/BottomSheet/BottomSheetModalProvider.d.ts

@@ -0,0 +1,9 @@
+import type { BottomSheetModalProviderProps as GorhomBottomSheetModalProviderProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetModalProvider/types';
+export interface BottomSheetModalProviderProps extends GorhomBottomSheetModalProviderProps {
+    useSafeAreaInsets?: boolean;
+}
+declare const BottomSheetModalProvider: {
+    ({ children, useSafeAreaInsets, ...props }: BottomSheetModalProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default BottomSheetModalProvider;

package/build/components/BottomSheet/BottomSheetModalProvider.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BottomSheetModalProvider as GorhomBottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { useMemo } from 'react';
+import { BottomSheetContext, useBottomSheetContext } from './BottomSheet.context';
+const BottomSheetModalProvider = ({ children, useSafeAreaInsets = true, ...props }) => {
+    const parentContext = useBottomSheetContext();
+    const value = useMemo(() => ({
+        ...parentContext,
+        useSafeAreaInsets,
+    }), [parentContext, useSafeAreaInsets]);
+    return (_jsx(GorhomBottomSheetModalProvider, { ...props, children: _jsx(BottomSheetContext.Provider, { value: value, children: children }) }));
+};
+BottomSheetModalProvider.displayName = 'BottomSheetModalProvider';
+export default BottomSheetModalProvider;

package/build/components/BottomSheet/BottomSheetScrollView.js

@@ -4,10 +4,11 @@ import { StyleSheet, withUnistyles } from 'react-native-unistyles';
 import { useBottomSheetContext } from './BottomSheet.context';
 const StyledBottomSheetScrollView = withUnistyles(ScrollView);
 const BottomSheetScrollView = ({ children, style, contentContainerStyle, isModal = true, ...props }) => {
-    const { handle } = useBottomSheetContext();
+    const { handle, useSafeAreaInsets } = useBottomSheetContext();
     styles.useVariants({
         isModal,
         handle,
+        useSafeAreaInsets,
     });
     return (_jsx(StyledBottomSheetScrollView, { style: [styles.container, style], contentContainerStyle: [styles.contentContainer, contentContainerStyle], ...props, children: children }));
 };
@@ -23,7 +24,7 @@ const styles = StyleSheet.create((theme, rt) => ({
         variants: {
             isModal: {
                 true: {
-                    paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+                    paddingBottom: theme.components.bottomSheet.padding,
                 },
             },
             handle: {
@@ -31,7 +32,20 @@ const styles = StyleSheet.create((theme, rt) => ({
                     paddingTop: theme.components.bottomSheet.padding,
                 },
             },
+            useSafeAreaInsets: {
+                true: {},
+                false: {},
+            },
         },
+        compoundVariants: [
+            {
+                isModal: true,
+                useSafeAreaInsets: true,
+                styles: {
+                    paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+                },
+            },
+        ],
     },
 }));
 BottomSheetScrollView.displayName = 'BottomSheetScrollView';

package/build/components/BottomSheet/BottomSheetView.js

@@ -4,10 +4,11 @@ import { StyleSheet, withUnistyles } from 'react-native-unistyles';
 import { useBottomSheetContext } from './BottomSheet.context';
 const StyledBottomSheetView = withUnistyles(View);
 const BottomSheetView = ({ children, style, isModal = true, ...props }) => {
-    const { handle } = useBottomSheetContext();
+    const { handle, useSafeAreaInsets } = useBottomSheetContext();
     styles.useVariants({
         isModal,
         handle,
+        useSafeAreaInsets,
     });
     return (_jsx(StyledBottomSheetView, { style: [styles.contentContainer, style], ...props, children: children }));
 };
@@ -21,7 +22,7 @@ const styles = StyleSheet.create((theme, rt) => ({
         variants: {
             isModal: {
                 true: {
-                    paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+                    paddingBottom: theme.components.bottomSheet.padding,
                 },
             },
             handle: {
@@ -29,7 +30,20 @@ const styles = StyleSheet.create((theme, rt) => ({
                     paddingTop: theme.components.bottomSheet.padding,
                 },
             },
+            useSafeAreaInsets: {
+                true: {},
+                false: {},
+            },
         },
+        compoundVariants: [
+            {
+                isModal: true,
+                useSafeAreaInsets: true,
+                styles: {
+                    paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+                },
+            },
+        ],
     },
 }));
 BottomSheetView.displayName = 'BottomSheetView';

package/build/components/BottomSheet/index.d.ts

@@ -1,7 +1,9 @@
-export { BottomSheetFlashList, BottomSheetFooter, BottomSheetModalProvider, BottomSheetSectionList, BottomSheetVirtualizedList, useBottomSheet, useBottomSheetModal, type BottomSheetBackdropProps, type BottomSheetBackgroundProps, type BottomSheetHandleProps, type BottomSheetModalProps, } from '@gorhom/bottom-sheet';
+export { BottomSheetFlashList, BottomSheetFooter, BottomSheetSectionList, BottomSheetVirtualizedList, useBottomSheet, useBottomSheetModal, type BottomSheetBackdropProps, type BottomSheetBackgroundProps, type BottomSheetHandleProps, type BottomSheetModalProps, } from '@gorhom/bottom-sheet';
 export { default as BottomSheet } from './BottomSheet';
 export type { default as BottomSheetProps } from './BottomSheet.props';
 export { default as BottomSheetFlatList } from './BottomSheetFlatList';
 export { default as BottomSheetModal } from './BottomSheetModal';
+export { default as BottomSheetModalProvider } from './BottomSheetModalProvider';
+export type { BottomSheetModalProviderProps } from './BottomSheetModalProvider';
 export { default as BottomSheetScrollView } from './BottomSheetScrollView';
 export { default as BottomSheetView } from './BottomSheetView';

package/build/components/BottomSheet/index.js

@@ -1,6 +1,7 @@
-export { BottomSheetFlashList, BottomSheetFooter, BottomSheetModalProvider, BottomSheetSectionList, BottomSheetVirtualizedList, useBottomSheet, useBottomSheetModal, } from '@gorhom/bottom-sheet';
+export { BottomSheetFlashList, BottomSheetFooter, BottomSheetSectionList, BottomSheetVirtualizedList, useBottomSheet, useBottomSheetModal, } from '@gorhom/bottom-sheet';
 export { default as BottomSheet } from './BottomSheet';
 export { default as BottomSheetFlatList } from './BottomSheetFlatList';
 export { default as BottomSheetModal } from './BottomSheetModal';
+export { default as BottomSheetModalProvider } from './BottomSheetModalProvider';
 export { default as BottomSheetScrollView } from './BottomSheetScrollView';
 export { default as BottomSheetView } from './BottomSheetView';

package/build/components/Combobox/Combobox.js

@@ -7,6 +7,7 @@ import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { BodyText } from '../BodyText';
 import { BottomSheetFlatList, BottomSheetModal, BottomSheetView } from '../BottomSheet';
+import { useBottomSheetContext } from '../BottomSheet/BottomSheet.context';
 import { DetailText } from '../DetailText';
 import { FormField, useFormFieldContext } from '../FormField';
 import { Icon } from '../Icon';
@@ -23,6 +24,7 @@ const Combobox = ({ options = [], value, onValueChange, inputValue, onInputValue
     const isDisabled = formFieldContext?.disabled ?? disabled;
     const isReadonly = formFieldContext?.readonly ?? readonly;
     const { color } = useTheme();
+    const { useSafeAreaInsets } = useBottomSheetContext();
     const bottomSheetModalRef = useRef(null);
     const searchInputRef = useRef(null);
     const focusTimeoutRef = useRef(null);
@@ -162,7 +164,7 @@ const Combobox = ({ options = [], value, onValueChange, inputValue, onInputValue
                         selectedValue: value,
                         selectOption,
                         setSearch,
-                    }, children: [_jsxs(SafeAreaView, { edges: ['top'], children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), _jsx(View, { style: styles.searchContainer, children: _jsx(Input, { ref: searchInputRef, placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search", clearable: true, onClear: handleClear, loading: loading }) })] }), customContent || (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, ...listProps }))] }) })] }));
+                    }, children: [_jsxs(SafeAreaView, { edges: useSafeAreaInsets ? ['top'] : [], children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), _jsx(View, { style: styles.searchContainer, children: _jsx(Input, { ref: searchInputRef, placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search", clearable: true, onClear: handleClear, loading: loading }) })] }), customContent || (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, ...listProps }))] }) })] }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {

package/build/components/DescriptionList/DescriptionListItem.js

@@ -4,7 +4,6 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { BodyText } from '../BodyText';
-import { DetailText } from '../DetailText';
 import Helper from '../Helper/Helper';
 import { useDescriptionListContext } from './DescriptionList.context';
 const DescriptionListItem = ({ heading, description, headingWidth, trailingContent, invalidText, numericValue, style, ...props }) => {
@@ -15,7 +14,7 @@ const DescriptionListItem = ({ heading, description, headingWidth, trailingConte
     const descIsText = typeof description === 'string' || typeof description === 'number';
     const combinedLabel = headingIsText && descIsText ? `${heading}: ${description}` : undefined;
     const hideDescendants = !!combinedLabel;
-    return (_jsxs(View, { accessibilityRole: "text", accessible: !!combinedLabel, accessibilityLabel: combinedLabel, ...props, style: [styles.item, style], children: [_jsxs(View, { style: styles.textWrap, importantForAccessibility: hideDescendants ? 'no-hide-descendants' : undefined, accessibilityElementsHidden: hideDescendants || undefined, children: [_jsx(View, { style: [direction === 'row' && { width: headingWidth || itemHeadingWidth }], children: headingIsText ? _jsx(BodyText, { style: styles.headingText, children: heading }) : heading }), _jsxs(View, { style: styles.descriptionWrapper, children: [descIsText ? _jsx(BodyText, { children: description }) : description, !!invalidText && (_jsx(Helper, { validationStatus: "invalid", showIcon: true, icon: ErrorCircleSmallIcon, text: invalidText || '' }))] }), numericValue ? (_jsx(View, { style: styles.descriptionWrapper, children: _jsx(DetailText, { size: "lg", children: numericValue }) })) : null] }), trailingContent ? trailingContent : null] }));
+    return (_jsxs(View, { accessibilityRole: "text", accessible: !!combinedLabel, accessibilityLabel: combinedLabel, ...props, style: [styles.item, style], children: [_jsxs(View, { style: styles.textWrap, importantForAccessibility: hideDescendants ? 'no-hide-descendants' : undefined, accessibilityElementsHidden: hideDescendants || undefined, children: [_jsx(View, { style: [direction === 'row' && { width: headingWidth || itemHeadingWidth }], children: headingIsText ? _jsx(BodyText, { style: styles.headingText, children: heading }) : heading }), _jsxs(View, { style: styles.descriptionWrapper, children: [descIsText ? _jsx(BodyText, { children: description }) : description, !!invalidText && (_jsx(Helper, { validationStatus: "invalid", showIcon: true, icon: ErrorCircleSmallIcon, text: invalidText || '' }))] }), numericValue ? (_jsx(View, { style: styles.descriptionWrapper, children: _jsx(BodyText, { weight: "semibold", children: numericValue }) })) : null] }), trailingContent ? trailingContent : null] }));
 };
 DescriptionListItem.displayName = 'DescriptionListItem';
 const styles = StyleSheet.create(theme => ({

package/build/components/ExpandableCard/ExpandableCardTriggerRoot.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ChevronDownSmallIcon, ChevronUpSmallIcon, } from '@utilitywarehouse/hearth-react-native-icons';
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { DetailText } from '../DetailText';
+import { BodyText } from '../BodyText';
 import ExpandableCardContent from './ExpandableCardContent';
 import ExpandableCardHelperText from './ExpandableCardHelperText';
 import ExpandableCardIcon from './ExpandableCardIcon';
@@ -26,7 +26,7 @@ const ExpandableCardTriggerRoot = ({ heading, helperText, leadingIcon, leadingCo
         }
         return null;
     };
-    const renderDefaultContent = () => (_jsxs(_Fragment, { children: [renderLeadingContent(), _jsxs(ExpandableCardContent, { children: [badgePosition === 'top' ? badge : null, _jsx(ExpandableCardText, { children: heading }), helperText && _jsx(ExpandableCardHelperText, { children: helperText }), badgePosition === 'bottom' ? badge : null] }), numericValue && (_jsx(DetailText, { size: "lg", style: styles.numericValue, children: numericValue })), _jsx(ExpandableCardTrailingContent, { style: styles.chevron, children: _jsx(ExpandableCardTrailingIcon, { as: isExpanded ? ChevronUpSmallIcon : ChevronDownSmallIcon }) })] }));
+    const renderDefaultContent = () => (_jsxs(_Fragment, { children: [renderLeadingContent(), _jsxs(ExpandableCardContent, { children: [badgePosition === 'top' ? badge : null, _jsx(ExpandableCardText, { children: heading }), helperText && _jsx(ExpandableCardHelperText, { children: helperText }), badgePosition === 'bottom' ? badge : null] }), !!numericValue && (_jsx(BodyText, { weight: "semibold", style: styles.numericValue, children: numericValue })), _jsx(ExpandableCardTrailingContent, { style: styles.chevron, children: _jsx(ExpandableCardTrailingIcon, { as: isExpanded ? ChevronUpSmallIcon : ChevronDownSmallIcon }) })] }));
     return (_jsx(Pressable, { ...props, testID: testID, style: [styles.container, props.style], disabled: disabled, accessibilityRole: "button", accessibilityState: { expanded: isExpanded, disabled }, accessibilityLabel: `${heading}${helperText ? `, ${helperText}` : ''}`, children: children || renderDefaultContent() }));
 };
 ExpandableCardTriggerRoot.displayName = 'ExpandableCardTriggerRoot';

package/build/components/Heading/Heading.js

@@ -12,7 +12,7 @@ const Heading = ({ children, color, size = 'lg', truncated, underline, strikeThr
         strikeThrough,
         inverted,
     });
-    return (_jsx(Text, { ...remainingProps, ...(truncated
+    return (_jsx(Text, { accessibilityRole: "header", ...remainingProps, ...(truncated
             ? {
                 numberOfLines: 1,
                 ellipsizeMode: 'tail',

package/build/components/List/List.js

@@ -6,7 +6,7 @@ import { Card } from '../Card';
 import { SectionHeader } from '../SectionHeader';
 import { ListContext } from './List.context';
 const List = ({ children, heading, helperText, headerTrailingContent, invalidText, ...props }) => {
-    const { loading, disabled, container = 'none', testID, style, ...rest } = props;
+    const { loading, disabled, container = 'none', testID, style, accessibilityRole, ...rest } = props;
     const orderRef = useRef([]);
     const [firstItemId, setFirstItemId] = useState(undefined);
     const containerToCard = {
@@ -35,7 +35,7 @@ const List = ({ children, heading, helperText, headerTrailingContent, invalidTex
         registerItem,
     };
     styles.useVariants({ disabled });
-    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...rest, style: [styles.container, style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent, invalidText: invalidText })) : null, container === 'none' ? (_jsx(View, { testID: testID, children: children })) : (React.Children.count(children) > 0 && (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, testID: testID, children: _jsx(_Fragment, { children: children }) })))] }) }));
+    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...rest, accessibilityRole: accessibilityRole ?? 'list', style: [styles.container, style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent, invalidText: invalidText })) : null, container === 'none' ? (_jsx(View, { testID: testID, children: children })) : (React.Children.count(children) > 0 && (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, testID: testID, children: _jsx(_Fragment, { children: children }) })))] }) }));
 };
 List.displayName = 'List';
 const styles = StyleSheet.create(theme => ({

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

@@ -43,7 +43,7 @@ const ListActionRoot = ({ heading, disabled, variant = 'subtle', loading, ...pro
         isFirstChild,
         container: listContext?.container,
     });
-    return (_jsx(Pressable, { ...props, testID: testID, style: [styles.container, props.style], disabled: isDisabled || !onPress, children: loading ? (_jsxs(View, { style: styles.loadingWrap, children: [_jsx(Skeleton, { style: { flex: 1, maxWidth: 166 }, width: "auto", height: 24, borderRadius: "sm" }), _jsx(Skeleton, { width: 24, height: 24, borderRadius: "sm" })] })) : (_jsxs(_Fragment, { children: [_jsx(ListActionContent, { children: _jsx(ListActionText, { children: heading }) }), _jsx(ListActionTrailingContent, { style: styles.centeredTrailingIcon, children: _jsx(ListActionTrailingIcon, { as: ChevronRightSmallIcon }) })] })) }));
+    return (_jsx(Pressable, { ...props, accessibilityRole: props.accessibilityRole ?? 'button', testID: testID, style: [styles.container, props.style], disabled: isDisabled || !onPress, children: loading ? (_jsxs(View, { style: styles.loadingWrap, children: [_jsx(Skeleton, { style: { flex: 1, maxWidth: 166 }, width: "auto", height: 24, borderRadius: "sm" }), _jsx(Skeleton, { width: 24, height: 24, borderRadius: "sm" })] })) : (_jsxs(_Fragment, { children: [_jsx(ListActionContent, { children: _jsx(ListActionText, { children: heading }) }), _jsx(ListActionTrailingContent, { style: styles.centeredTrailingIcon, children: _jsx(ListActionTrailingIcon, { as: ChevronRightSmallIcon }) })] })) }));
 };
 const ListAction = createPressable({
     Root: ListActionRoot,

package/build/components/List/ListItem/ListItemRoot.js

@@ -3,7 +3,7 @@ import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-ico
 import { useId, useLayoutEffect, useMemo } from 'react';
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { DetailText } from '../../DetailText';
+import { BodyText } from '../../BodyText';
 import { Skeleton } from '../../Skeleton';
 import { useListContext } from '../List.context';
 import { ListItemContext } from './ListItem.context';
@@ -61,7 +61,7 @@ const ListItemRoot = ({ heading, helperText, leadingContent, trailingContent, di
     if (loading || listContext?.loading) {
         return (_jsxs(Pressable, { ...props, testID: loadingTestID, style: [styles.container, props.style], disabled: isDisabled, children: [leadingContent ? _jsx(Skeleton, { width: 24, height: 24 }) : null, _jsxs(ListItemContent, { children: [_jsx(Skeleton, { width: "80%", height: 20 }), _jsx(Skeleton, { width: "100%", height: 16 })] }), onPress || trailingContent ? _jsx(Skeleton, { width: 24, height: 24 }) : null] }));
     }
-    return (_jsx(ListItemContext.Provider, { value: value, children: _jsx(Pressable, { ...props, testID: testID, style: [styles.container, props.style], disabled: isDisabled, accessibilityRole: onPress ? 'button' : undefined, children: children ? (children) : (_jsxs(_Fragment, { children: [leadingContent ? (_jsx(ListItemLeadingContent, { children: leadingContent })) : null, _jsxs(ListItemContent, { children: [badgePosition === 'top' && badge ? badge : null, _jsx(ListItemHeading, { truncated: truncateHeading, children: heading }), helperText ? (_jsx(ListItemHelperText, { truncated: truncateHelperText, children: helperText })) : null, badgePosition === 'bottom' && badge ? badge : null] }), !!numericValue && _jsx(DetailText, { size: "lg", children: numericValue }), trailingContent ? (_jsx(ListItemTrailingContent, { children: trailingContent })) : onPress ? (_jsx(ListItemTrailingContent, { style: styles.centeredTrailingIcon, children: _jsx(ListItemTrailingIcon, { as: ChevronRightSmallIcon }) })) : null] })) }) }));
+    return (_jsx(ListItemContext.Provider, { value: value, children: _jsx(Pressable, { ...props, testID: testID, style: [styles.container, props.style], disabled: isDisabled, accessibilityRole: props.accessibilityRole ?? (onPress ? 'button' : undefined), children: children ? (children) : (_jsxs(_Fragment, { children: [leadingContent ? (_jsx(ListItemLeadingContent, { children: leadingContent })) : null, _jsxs(ListItemContent, { children: [badgePosition === 'top' && badge ? badge : null, _jsx(ListItemHeading, { truncated: truncateHeading, children: heading }), helperText ? (_jsx(ListItemHelperText, { truncated: truncateHelperText, children: helperText })) : null, badgePosition === 'bottom' && badge ? badge : null] }), !!numericValue && _jsx(BodyText, { weight: "semibold", children: numericValue }), trailingContent ? (_jsx(ListItemTrailingContent, { children: trailingContent })) : onPress ? (_jsx(ListItemTrailingContent, { style: styles.centeredTrailingIcon, children: _jsx(ListItemTrailingIcon, { as: ChevronRightSmallIcon }) })) : null] })) }) }));
 };
 ListItemRoot.displayName = 'ListItemRoot';
 const styles = StyleSheet.create(theme => ({

package/build/components/Modal/Modal.d.ts

@@ -3,5 +3,5 @@ import ModalProps from './Modal.props';
 type Modal<T = any> = BottomSheetModalMethods<T> & {
     triggerCloseAnimation?: () => void;
 };
-declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, fullscreen, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, loadingDescription, fullscreen, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;