@utilitywarehouse/hearth-react-native 0.16.0 → 0.16.1

package/.turbo/turbo-build.log

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

package/.turbo/turbo-lint.log

@@ -1,6 +1,69 @@
 
-> @utilitywarehouse/hearth-react-native@0.16.0 lint /home/runner/work/hearth/hearth/packages/react-native
-> TIMING=1 eslint --max-warnings 0
+> @utilitywarehouse/hearth-react-native@0.16.1 lint /home/runner/work/hearth/hearth/packages/react-native
+> TIMING=1 eslint .
 
-Rule | Time (ms) | Relative
-:----|----------:|--------:
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.context.tsx
+  6:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.tsx
+  146:6  warning  React Hook useMemo has a missing dependency: 'hasCarouselControlsInTree'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePicker.tsx
+  109:6  warning  React Hook useCallback has an unnecessary dependency: 'modalRef.current'. Either exclude it or remove the dependency array. Mutable values like 'modalRef.current' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+  259:6  warning  React Hook useEffect has a missing dependency: 'initialState'. Either include it or remove the dependency array                                                                                                                                     react-hooks/exhaustive-deps
+  346:6  warning  React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array                                                                                                                                         react-hooks/exhaustive-deps
+  468:5  warning  React Hook useCallback has a missing dependency: 'onChange'. Either include it or remove the dependency array                                                                                                                                       react-hooks/exhaustive-deps
+  536:6  warning  React Hook useEffect has a missing dependency: 'onSelectMonth'. Either include it or remove the dependency array                                                                                                                                    react-hooks/exhaustive-deps
+  542:6  warning  React Hook useEffect has a missing dependency: 'onSelectYear'. Either include it or remove the dependency array                                                                                                                                     react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDay.tsx
+  76:6  warning  React Hook useMemo has an unnecessary dependency: 'styles.rangeRoot'. Either exclude it or remove the dependency array. Outer scope values like 'styles.rangeRoot' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+  84:6  warning  React Hook useMemo has a missing dependency: 'isSelected'. Either include it or remove the dependency array                                                                                                                                         react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDays.tsx
+  179:6  warning  React Hook useMemo has unnecessary dependencies: 'month' and 'year'. Either exclude them or remove the dependency array  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerYears.tsx
+  52:6  warning  React Hook useCallback has a missing dependency: 'containerHeight'. Either include it or remove the dependency array. Outer scope values like 'styles' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Input/Input.tsx
+  75:8  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.tsx
+   72:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+  268:5  warning  React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array                                                                                                                                   react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.web.tsx
+  65:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/PillGroup/PillGroup.tsx
+  17:9  warning  The 'normalizedValue' conditional could make the dependencies of useMemo Hook (at line 33) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'normalizedValue' in its own useMemo() Hook  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Tabs/Tabs.tsx
+   53:6   warning  React Hook useEffect has a missing dependency: 'tabValues'. Either include it or remove the dependency array                              react-hooks/exhaustive-deps
+   53:7   warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
+  104:5   warning  React Hook useMemo has an unnecessary dependency: 'tabValues'. Either exclude it or remove the dependency array                           react-hooks/exhaustive-deps
+  127:62  warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Textarea/Textarea.tsx
+  45:6  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Toast/Toast.context.tsx
+   9:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
+  94:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
+
+✖ 24 problems (0 errors, 24 warnings)
+
+Rule                                      | Time (ms) | Relative
+:-----------------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars         |  1453.557 |    63.1%
+react-hooks/exhaustive-deps               |   117.512 |     5.1%
+no-global-assign                          |   117.462 |     5.1%
+react-hooks/rules-of-hooks                |    75.475 |     3.3%
+no-unexpected-multiline                   |    45.705 |     2.0%
+@typescript-eslint/ban-ts-comment         |    35.030 |     1.5%
+@typescript-eslint/triple-slash-reference |    30.235 |     1.3%
+no-misleading-character-class             |    27.369 |     1.2%
+no-loss-of-precision                      |    26.374 |     1.1%
+no-useless-escape                         |    25.969 |     1.1%

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.16.1
+
+### Patch Changes
+
+- [#817](https://github.com/utilitywarehouse/hearth/pull/817) [`fb4f4d0`](https://github.com/utilitywarehouse/hearth/commit/fb4f4d034e5b67b0c75dc093f7fdd8d3ab26edde) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: `DateInput` height issue
+
 ## 0.16.0
 
 ### Minor Changes

package/build/components/Avatar/Avatar.js

@@ -3,13 +3,11 @@ import { UserMediumIcon, UserSmallIcon } from '@utilitywarehouse/hearth-react-na
 import { useEffect, useState } from 'react';
 import { Image, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useTheme } from '../../hooks';
 import { getInitials } from '../../utils';
 import BodyText from '../BodyText/BodyText';
 const Avatar = ({ src, name, size = 'md', delayMs = 0, onLoadingStatusChange, style, ...props }) => {
     const [status, setStatus] = useState('idle');
     const [isDelayed, setIsDelayed] = useState(delayMs > 0);
-    const { components } = useTheme();
     useEffect(() => {
         if (!src) {
             setStatus('idle');

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

@@ -1,6 +1,6 @@
 import type BannerProps from './Banner.props';
 declare const Banner: {
-    ({ icon, iconContainerVariant, iconContainerSize, iconContainerColor, illustration, image, heading, description, direction, link, button, onPress, onClose, variant, colorScheme, style, ...props }: BannerProps): import("react/jsx-runtime").JSX.Element;
+    ({ icon, iconContainerVariant, iconContainerSize, iconContainerColor, illustration, image, heading, description, direction, link, button, onPress, onClose, variant, colorScheme: _, style, ...props }: BannerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Banner;

package/build/components/Banner/Banner.js

@@ -9,7 +9,9 @@ import { Heading } from '../Heading';
 import { IconContainer } from '../IconContainer';
 import { UnstyledIconButton } from '../UnstyledIconButton';
 import BannerContext from './Banner.context';
-const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md', iconContainerColor = 'pig', illustration, image, heading, description, direction = 'horizontal', link, button, onPress, onClose, variant = 'subtle', colorScheme = 'pig', style, ...props }) => {
+const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md', iconContainerColor = 'pig', illustration, image, heading, description, direction = 'horizontal', link, button, onPress, onClose, variant = 'subtle', 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+colorScheme: _, style, ...props }) => {
     const hasIllustration = Boolean(illustration);
     styles.useVariants({ direction, hasIllustration });
     const context = useMemo(() => ({

package/build/components/Carousel/Carousel.js

@@ -7,7 +7,7 @@ import { CarouselControls } from './CarouselControls';
 import { CarouselItem } from './CarouselItem';
 const Carousel = ({ centered = false, children, disabled = false, inactiveItemOpacity = 1, itemWidth, onSnapToItem, showOverflow = false, style, width, itemsStyle, activeIndex: initialActiveIndex = 0, showControls = true, showNavigation = false, controlsStyle, controlsItemStyle, controlsActiveItemStyle, controlsAccessibilityHidden = true, inverted = false, ref, ...props }) => {
     const [activeIndex, setActiveIndex] = useState(initialActiveIndex);
-    const [numItems, setNumItems] = useState(0);
+    const [, setNumItems] = useState(0);
     const scrollViewRef = useRef(null);
     const flatListRef = useRef(null);
     const isWeb = Platform.OS === 'web';

package/build/components/DateInput/DateInput.js

@@ -14,6 +14,7 @@ const styles = StyleSheet.create(theme => ({
     container: {
         flexDirection: 'row',
         gap: theme.components.input.date.gap,
+        // alignItems: 'stretch',
     },
 }));
 export default DateInput;

package/build/components/DateInput/DateInputSegment.js

@@ -12,7 +12,7 @@ const styles = StyleSheet.create(theme => ({
     container: {
         flex: 1,
         gap: theme.components.input.gap,
-        maxWidth: 96,
+        // maxWidth: 96,
     },
     label: {
         variants: {
@@ -24,7 +24,7 @@ const styles = StyleSheet.create(theme => ({
         },
     },
     input: {
-        maxWidth: 96,
+    // maxWidth: 96,
     },
 }));
 export default DateInputSegment;

package/build/components/DatePicker/DatePicker.js

@@ -21,6 +21,7 @@ dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(duration);
 const DateTimePicker = (props) => {
+    // eslint-disable-next-line @typescript-eslint/prefer-as-const
     const numerals = 'latn';
     const { mode = 'single', timeZone, showOutsideDays = true, timePicker = false, firstDayOfWeek = 1, 
     // startYear,
@@ -119,26 +120,29 @@ const DateTimePicker = (props) => {
                     ...prevState,
                     currentYear: action.payload,
                 };
-            case CalendarActionKind.CHANGE_SELECTED_DATE:
+            case CalendarActionKind.CHANGE_SELECTED_DATE: {
                 const { date: selectedDate } = action.payload;
                 return {
                     ...prevState,
                     date: selectedDate,
                     currentDate: selectedDate,
                 };
-            case CalendarActionKind.CHANGE_SELECTED_RANGE:
+            }
+            case CalendarActionKind.CHANGE_SELECTED_RANGE: {
                 const { startDate: start, endDate: end } = action.payload;
                 return {
                     ...prevState,
                     startDate: start,
                     endDate: end,
                 };
-            case CalendarActionKind.CHANGE_SELECTED_MULTIPLE:
+            }
+            case CalendarActionKind.CHANGE_SELECTED_MULTIPLE: {
                 const { dates: selectedDates } = action.payload;
                 return {
                     ...prevState,
                     dates: selectedDates,
                 };
+            }
             case CalendarActionKind.RESET_STATE:
                 return action.payload;
             default:
@@ -245,7 +249,7 @@ const DateTimePicker = (props) => {
             }
             else if (mode === 'range') {
                 // set time to 00:00:00
-                let start = removeTime(stateRef.current.startDate, timeZone);
+                const start = removeTime(stateRef.current.startDate, timeZone);
                 let end = removeTime(stateRef.current.endDate, timeZone);
                 const selected = removeTime(selectedDate, timeZone);
                 let isStart = true;

package/build/components/DatePicker/DatePickerHeader/DatePickerHeader.props.d.ts

@@ -5,4 +5,3 @@ export type HeaderProps = {
     NextIcon?: React.ReactNode;
     navigationPosition?: NavigationPosition;
 };
-export type NavigationProps = {};

package/build/components/DatePicker/DatePickerHeader/index.js

@@ -5,7 +5,7 @@ import { StyleSheet } from 'react-native-unistyles';
 import NextButton from './DatePickerNextButton';
 import PrevButton from './DatePickerPrevButton';
 import Selectors from './DatePickerSelectors';
-const NavigationButtons = ({}) => (_jsxs(View, { style: styles.navigation, children: [_jsx(PrevButton, {}), _jsx(NextButton, {})] }));
+const NavigationButtons = () => (_jsxs(View, { style: styles.navigation, children: [_jsx(PrevButton, {}), _jsx(NextButton, {})] }));
 const Header = ({ navigationPosition = 'around' }) => (_jsx(View, { style: [styles.headerContainer], children: _jsx(View, { style: styles.container, children: navigationPosition === 'left' ? (_jsxs(_Fragment, { children: [_jsx(NavigationButtons, {}), _jsx(Selectors, { position: "left" })] })) : navigationPosition === 'right' ? (_jsxs(_Fragment, { children: [_jsx(Selectors, { position: "right" }), _jsx(NavigationButtons, {})] })) : (_jsxs(_Fragment, { children: [_jsx(PrevButton, {}), _jsx(Selectors, { position: "around" }), _jsx(NextButton, {})] })) }) }));
 const styles = StyleSheet.create(theme => ({
     headerContainer: {

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

@@ -1,4 +1,5 @@
 import 'dayjs/locale/en';
 import './polyfill';
+export type { BottomSheetMethods as DatePickerMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 export type { CalendarDay, CalendarMode, CalendarMonth, CalendarWeek, CalendarYear, DateType, } from './DatePicker.props';
 export { default as DatePicker } from './DatePicker';

package/build/components/DatePicker/polyfill.js

@@ -1,7 +1,7 @@
 "use strict";
-// @ts-ignore
+// @ts-expect-error - Polyfill for Date.toLocaleString to support timeZone option in React Native environment.
 Date.prototype._toLocaleString = Date.prototype.toLocaleString;
-// @ts-ignore
+// @ts-expect-error - Polyfill for Date.toLocaleString to support timeZone option in React Native environment.
 Date.prototype.toLocaleString = function (a, b) {
     if (b && Object.keys(b).length === 1 && 'timeZone' in b && a === 'en-US') {
         return Intl.DateTimeFormat('en-us', {
@@ -17,6 +17,6 @@ Date.prototype.toLocaleString = function (a, b) {
             .format(this)
             .replace(/(\d{2})\/(\d{2})\/(\d{4}),/g, '$3-$1-$2');
     }
-    // @ts-ignore
+    // @ts-expect-error - Polyfill for Date.toLocaleString to support timeZone option in React Native environment.
     return this._toLocaleString(a, b);
 };

package/build/components/DatePicker/time-picker/wheel-web.js

@@ -98,9 +98,7 @@ const WheelWeb = ({ value, setValue = () => { }, items }) => {
                     },
                 ] }), displayValues?.map((displayValue, index) => {
                 const animatedAngle = animatedAngles[index];
-                return (_jsx(Animated.View, { 
-                    // eslint-disable-next-line react-native/no-inline-styles
-                    style: {
+                return (_jsx(Animated.View, { style: {
                         position: 'absolute',
                         height: ITEM_HEIGHT - 10,
                         transform: animatedAngle

package/build/components/DatePickerInput/DatePickerInput.js

@@ -21,7 +21,6 @@ const maskDefaultFormat = (value) => {
 };
 const DatePickerInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, format = DEFAULT_FORMAT, openButtonLabel = 'Open date picker', autoCloseOnSelect = true, label, labelVariant, helperText, helperIcon, validText, invalidText, required = true, onChange, onChangeText, onBlur, onFocus, value, datePickerProps, onClear, ...rest }) => {
     const formFieldContext = useFormFieldContext();
-    const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
     const isDisabled = formFieldContext?.disabled ?? disabled;
     const isReadonly = formFieldContext?.readonly ?? readonly;
     const pickerRef = useRef(null);
@@ -97,7 +96,7 @@ const DatePickerInput = ({ validationStatus = 'initial', disabled, focused, read
         onFocus?.(event);
     }, [onFocus]);
     const { onCancel: pickerOnCancel, ...restDatePickerProps } = datePickerProps ?? {};
-    const { style: inputStyle, keyboardType: keyboardTypeProp, inputMode: inputModeProp, accessibilityHint: accessibilityHintProp, accessibilityLabel: accessibilityLabelProp, accessible: accessibleProp, accessibilityRole: accessibilityRoleProp, importantForAccessibility: importantForAccessibilityProp, ...textInputProps } = rest;
+    const { style: inputStyle, keyboardType: keyboardTypeProp, inputMode: inputModeProp, accessibilityHint: accessibilityHintProp, accessibilityLabel: accessibilityLabelProp, accessible: accessibleProp, importantForAccessibility: importantForAccessibilityProp, ...textInputProps } = rest;
     const resolvedKeyboardType = keyboardTypeProp ?? (isDefaultFormat ? 'number-pad' : undefined);
     const resolvedInputMode = inputModeProp ?? (isDefaultFormat ? 'numeric' : undefined);
     const resolvedAccessibilityHint = accessibilityHintProp ?? `Enter the date in ${format} format`;

package/build/components/DescriptionList/DescriptionList.d.ts

@@ -1,6 +1,6 @@
 import type DescriptionListProps from './DescriptionList.props';
 declare const DescriptionList: {
-    ({ direction, itemHeadingWidth, heading, helperText, headerTrailingContent, children, style, ...props }: DescriptionListProps): import("react/jsx-runtime").JSX.Element;
+    ({ direction, itemHeadingWidth, heading, helperText, headerTrailingContent, children, style, invalidText, ...props }: DescriptionListProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default DescriptionList;

package/build/components/DescriptionList/DescriptionList.js

@@ -4,10 +4,10 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { SectionHeader } from '../SectionHeader';
 import { DescriptionListContext } from './DescriptionList.context';
-const DescriptionList = ({ direction = 'column', itemHeadingWidth, heading, helperText, headerTrailingContent, children, style, ...props }) => {
+const DescriptionList = ({ direction = 'column', itemHeadingWidth, heading, helperText, headerTrailingContent, children, style, invalidText, ...props }) => {
     styles.useVariants({ direction });
     const value = useMemo(() => ({ direction, itemHeadingWidth }), [direction, itemHeadingWidth]);
-    return (_jsx(DescriptionListContext.Provider, { value: value, children: _jsxs(View, { accessibilityRole: "list", ...props, style: [styles.container, style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent })) : null, children] }) }));
+    return (_jsx(DescriptionListContext.Provider, { value: value, children: _jsxs(View, { accessibilityRole: "list", ...props, style: [styles.container, style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent, invalidText: invalidText })) : null, children] }) }));
 };
 DescriptionList.displayName = 'DescriptionList';
 const styles = StyleSheet.create(theme => ({

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

@@ -7,5 +7,6 @@ export interface DescriptionListProps extends ViewProps {
     heading?: string;
     helperText?: string;
     headerTrailingContent?: React.ReactNode;
+    invalidText?: string;
 }
 export default DescriptionListProps;

package/build/components/DescriptionList/DescriptionListItem.d.ts

@@ -1,6 +1,6 @@
 import type DescriptionListItemProps from './DescriptionListItem.props';
 declare const DescriptionListItem: {
-    ({ heading, description, headingWidth, trailingContent, invalidText, style, ...props }: DescriptionListItemProps): import("react/jsx-runtime").JSX.Element;
+    ({ heading, description, headingWidth, trailingContent, invalidText, numericValue, style, ...props }: DescriptionListItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default DescriptionListItem;

package/build/components/DescriptionList/DescriptionListItem.js

@@ -4,9 +4,10 @@ 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, style, ...props }) => {
+const DescriptionListItem = ({ heading, description, headingWidth, trailingContent, invalidText, numericValue, style, ...props }) => {
     const { components } = useTheme();
     const { direction, itemHeadingWidth = components.descriptionList.item.row.headingWidth } = useDescriptionListContext();
     styles.useVariants({ direction });
@@ -14,7 +15,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 || '' }))] })] }), 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(DetailText, { size: "lg", children: numericValue }) })) : null] }), trailingContent ? trailingContent : null] }));
 };
 DescriptionListItem.displayName = 'DescriptionListItem';
 const styles = StyleSheet.create(theme => ({

package/build/components/DescriptionList/DescriptionListItem.props.d.ts

@@ -8,5 +8,6 @@ export interface DescriptionListItemProps extends ViewProps {
     headingWidth?: number;
     trailingContent?: ReactNode;
     invalidText?: string;
+    numericValue?: string;
 }
 export default DescriptionListItemProps;

package/build/components/Input/Input.js

@@ -19,7 +19,7 @@ export const InputComponent = createInput({
 export const InputSlot = InputComponent.Slot;
 export const InputField = InputComponent.Input;
 export const InputIcon = InputComponent.Icon;
-const Input = forwardRef(({ validationStatus = 'initial', children, disabled, focused, readonly, leadingIcon, trailingIcon, type, showPasswordToggle = true, onClear, format, loading, clearable = false, required = true, inBottomSheet = false, style, label, labelVariant, helperText, helperIcon, validText, invalidText, ...props }, ref) => {
+const Input = forwardRef(({ validationStatus = 'initial', children, disabled, focused, readonly, leadingIcon, trailingIcon, type, showPasswordToggle = true, onClear, loading, clearable = false, required = true, inBottomSheet = false, style, label, labelVariant, helperText, helperIcon, validText, invalidText, ...props }, ref) => {
     const formFieldContext = useFormFieldContext();
     const inputLabel = label ?? formFieldContext?.label;
     const inputHelperText = helperText ?? formFieldContext?.helperText;

package/build/components/Switch/Switch.js

@@ -8,7 +8,7 @@ import { useAnimatedTheme } from 'react-native-unistyles/reanimated';
 import { useTheme } from '../../hooks';
 import { Icon } from '../Icon';
 const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = 'medium', ...accessibilityProps }) => {
-    const { components, color } = useTheme();
+    const { components } = useTheme();
     const theme = useAnimatedTheme();
     const SWITCH_WIDTH = size === 'medium' ? components.switch.md.width : components.switch.sm.width;
     const THUMB_SIZE = size === 'medium' ? components.switch.md.circle.size : components.switch.sm.circle.size;

package/build/components/Tabs/Tabs.d.ts

@@ -1,6 +1,6 @@
 import type TabsProps from './Tabs.props';
 declare const Tabs: {
-    ({ value: controlledValue, defaultValue, onValueChange, size, disabled, children, withPanels, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+    ({ value: controlledValue, defaultValue, onValueChange, size, disabled, children, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Tabs;

package/build/components/Tabs/Tabs.js

@@ -3,7 +3,7 @@ import { Children, isValidElement, useCallback, useEffect, useMemo, useRef, useS
 import { View } from 'react-native';
 import { Easing, useSharedValue, withTiming } from 'react-native-reanimated';
 import { TabsContext } from './Tabs.context';
-const Tabs = ({ value: controlledValue, defaultValue, onValueChange, size = 'md', disabled, children, withPanels, ...props }) => {
+const Tabs = ({ value: controlledValue, defaultValue, onValueChange, size = 'md', disabled, children, ...props }) => {
     // Collect child tab values
     const tabValues = useMemo(() => {
         const vals = [];

package/build/components/Textarea/Textarea.js

@@ -36,6 +36,9 @@ const Textarea = ({ validationStatus = 'initial', children, disabled, focused, r
     };
     const getAccessibilityHint = () => {
         let accessibilityHint = '';
+        if (textareaHelperText) {
+            accessibilityHint = accessibilityHint + textareaHelperText;
+        }
         if (textareaValidationStatus !== 'initial') {
             if (accessibilityHint.length > 0) {
                 accessibilityHint = accessibilityHint + ', ';

package/build/components/Toast/ToastItem.js

@@ -26,7 +26,7 @@ const ToastItem = forwardRef(({ toast, onClose }, ref) => {
             AccessibilityInfo.announceForAccessibility(announcement);
         }, 100);
         return () => clearTimeout(timer);
-    }, [toast.text, toast.actionText]);
+    }, [toast.text, toast.actionText, translateY, opacity]);
     const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ translateY: translateY.value + gestureTranslateY.value }],
         opacity: opacity.value,

package/build/components/ToggleButton/ToggleButtonIcon.js

@@ -7,7 +7,7 @@ const ButtonIcon = ({ children, toggled, as = TickSmallIcon, ...props }) => {
     styles.useVariants({ toggled });
     const IconAny = Icon;
     return (_jsx(IconAny, { as: as, ...props, style: Platform.OS === 'web'
-            ? // @ts-ignore
+            ? // @ts-expect-error - Spread types may only be created from object types.
                 { ...styles.icon, ...props.style }
             : [styles.icon, props.style], children: children }));
 };

package/build/components/ToggleButton/ToggleButtonRoot.js

@@ -1,10 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useCardPressHandlerContext } from '../Card';
 const ButtonRoot = ({ children, onToggle, toggled, states, onPress, ...props }) => {
     const { active } = states || {};
-    const { pressed } = useCardPressHandlerContext();
     styles.useVariants({
         toggled,
         active,

package/build/components/UnstyledIconButton/UnstyledIconButtonIcon.js

@@ -7,7 +7,7 @@ const UnstyledIconButtonIcon = ({ children, ...props }) => {
     const { active, inverted, size } = useUnstyledIconButtonContext();
     styles.useVariants({ active, inverted, size });
     return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
-            ? // @ts-ignore
+            ? // @ts-expect-error - Spread types may only be created from object types.
                 { ...styles.icon, ...props.style }
             : [styles.icon, props.style], children: children }));
 };

package/build/utils/coloursAsArray.js

@@ -1,5 +1,5 @@
 import { color } from '../tokens';
-const { light, dark, ...restOfColors } = color;
+const { light, ...restOfColors } = color;
 /**
  * Recursively flatten nested color objects into camelCase keys
  */

package/docs/components/AllComponents.web.tsx

@@ -13,9 +13,9 @@ import {
   ShareSmallIcon,
   TrashSmallIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
-// @ts-ignore
+// @ts-expect-error - Module missing type declarations
 import SpotBillingDark from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-dark.svg';
-// @ts-ignore
+// @ts-expect-error - Module missing type declarations
 import SpotBillingLight from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-light.svg';
 import { Pressable, ScrollView, View, ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
@@ -176,6 +176,7 @@ const AllComponents: React.FC = () => {
   const handleMenuOpenPress = useCallback(() => {
     menuRef.current?.present();
   }, []);
+  const [pillValue, setPillValue] = React.useState<string[]>(['energy', 'mobile']);
 
   const [colorMode] = useColorMode();
   const isDark = colorMode === 'dark';
@@ -648,22 +649,19 @@ const AllComponents: React.FC = () => {
           </ComponentWrapper>
           <ComponentWrapper name="Pill Group" link="/?path=/docs/components-pill-group--docs">
             <Center flex={1} p="200">
-              {(() => {
-                const [pillValue, setPillValue] = React.useState<string[]>(['energy', 'mobile']);
-                return (
-                  <PillGroup
-                    value={pillValue}
-                    onChange={v => setPillValue(v as string[])}
-                    wrap={false}
-                    multiple
-                  >
-                    <Pill value="all" label="All" />
-                    <Pill value="energy" label="Energy" icon={ElectricityMediumIcon} />
-                    <Pill value="broadband" label="Broadband" icon={BroadbandMediumIcon} />
-                    <Pill value="mobile" label="Mobile" icon={MobileMediumIcon} />
-                  </PillGroup>
-                );
-              })()}
+              (
+              <PillGroup
+                value={pillValue}
+                onChange={v => setPillValue(v as string[])}
+                wrap={false}
+                multiple
+              >
+                <Pill value="all" label="All" />
+                <Pill value="energy" label="Energy" icon={ElectricityMediumIcon} />
+                <Pill value="broadband" label="Broadband" icon={BroadbandMediumIcon} />
+                <Pill value="mobile" label="Mobile" icon={MobileMediumIcon} />
+              </PillGroup>
+              );
             </Center>
           </ComponentWrapper>
           <ComponentWrapper

package/docs/components/UsageWrap.tsx

@@ -1,24 +1,21 @@
 import { FC, PropsWithChildren } from 'react';
-import { BottomSheetModalProvider, Box, useColorMode } from '../../src';
+import { BottomSheetModalProvider, Box } from '../../src';
 
-const UsageWrap: FC<PropsWithChildren> = ({ children }) => {
-  const [colorMode] = useColorMode();
-  return (
-    <div className="sb-unstyled">
-      <Box
-        mt="300"
-        p="200"
-        bg="backgroundPrimary"
-        borderRadius="md"
-        borderWidth="1"
-        borderColor="borderSubtle"
-        width="100%"
-        position="relative"
-      >
-        <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
-      </Box>
-    </div>
-  );
-};
+const UsageWrap: FC<PropsWithChildren> = ({ children }) => (
+  <div className="sb-unstyled">
+    <Box
+      mt="300"
+      p="200"
+      bg="backgroundPrimary"
+      borderRadius="md"
+      borderWidth="1"
+      borderColor="borderSubtle"
+      width="100%"
+      position="relative"
+    >
+      <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
+    </Box>
+  </div>
+);
 
 export default UsageWrap;

package/eslint.config.js

@@ -8,13 +8,17 @@ import globals from 'globals';
 import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
-  { ignores: ['build', 'dist', 'storybook-static'] },
+  { ignores: ['build', 'dist', 'storybook-static', '**/*.figma.tsx'] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
     files: ['**/*.{ts,tsx}'],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
+      parserOptions: {
+        project: './tsconfig.eslint.json',
+        tsconfigRootDir: import.meta.dirname,
+      },
     },
     plugins: {
       'react-hooks': reactHooks,