@utilitywarehouse/hearth-react-native 0.15.3 → 0.16.1

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.15.3 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,8 +1,69 @@
 
-> @utilitywarehouse/hearth-react-native@0.15.3 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
-:----|----------:|--------:
-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,78 @@
 # @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
+
+- [#810](https://github.com/utilitywarehouse/hearth/pull/810) [`eae4c24`](https://github.com/utilitywarehouse/hearth/commit/eae4c24a421415247c720f88bb8341133340cc7b) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: All `Input` components accessibility improvements and you can now pass a label, helper text and validation to the `Input` component directly.
+
+  ### Input accessibility improvements and FormField integration
+
+  The `Input` component has been updated to internally use `FormField`. This allows you to pass props like `label`, `helperText`, and validation status directly to the `Input` component, streamlining its usage.
+
+  We have also greatly improved accessibility behavior. The `Input` component now intelligently constructs `aria-label` and `accessibilityHint` based on the provided label, helper text, and validation state. To support this, `FormField` now has a mechanism to hide its own accessibility elements when a child component is handling them, preventing duplicate announcements.
+
+  #### Affected components
+  - `Input`
+  - `CurrencyInput`
+  - `DatePickerInput`
+  - `Textarea`
+  - `FormField`
+
+  #### Developer changes
+
+  You can now use `Input`, `CurrencyInput`, `DatePickerInput`, and `Textarea` without explicitly wrapping them in `FormField` for standard layouts:
+
+  ```tsx
+  // Before
+  <FormField label="Email" helperText="Enter email">
+    <Input />
+  </FormField>
+
+  // After
+  <Input label="Email" helperText="Enter email" />
+  ```
+
+  No breaking changes. The `Input` component continues to support being wrapped externally by `FormField`.
+
+  #### References
+  - UWDS-4179
+
+- [#803](https://github.com/utilitywarehouse/hearth/pull/803) [`8e96af6`](https://github.com/utilitywarehouse/hearth/commit/8e96af69f3a3498f264f2a6dc2416cdb6a298275) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Adds `labelVariant` prop to components with a label
+
+  ### Adds `labelVariant` prop to components with a label
+
+  Added a `labelVariant` prop to allow consumers to choose between a body or heading style for component labels. Defaults to `body`.
+
+  #### Affected components
+  - `CheckboxGroup`
+  - `FormField`
+  - `Label`
+  - `RadioGroup`
+  - `RadioCard`
+  - `Select`
+  - `VerificationInput`
+  - `Input`
+  - `CurrencyInput`
+  - `DatePickerInput`
+  - `Textarea`
+
+  #### Developer changes
+
+  You can now pass `labelVariant="heading"` to these components to render the label as a heading instead of body text.
+
+  ```tsx
+  <FormField label="My Label" labelVariant="heading">
+    <Input />
+  </FormField>
+  ```
+
 ## 0.15.3
 
 ### Patch Changes
@@ -31,7 +104,6 @@
   Added new props to `UL`, `OL`, and `ListItem` components to support custom list markers, including icons, images, and colors. This brings the functionality closer to CSS-like list styling. We also fixed a layout issue where list item text could overflow the container.
 
   **Components affected**:
-
   - `UL` (UnorderedList)
   - `OL` (OrderedList)
   - `ListItem`
@@ -51,7 +123,6 @@
   ```
 
   Supported props:
-
   - `listStyleImage`: React Element (e.g. `<Image />`)
   - `listStyleIcon`: Icon component
   - `listStyleWidth` / `listStyleHeight`: Dimensions for the marker (default: 20)
@@ -188,7 +259,6 @@
 - [#567](https://github.com/utilitywarehouse/hearth/pull/567) [`b6869cf`](https://github.com/utilitywarehouse/hearth/commit/b6869cfaca7b3a5aacb27c06733f0243b6faa02a) Thanks [@MichalCiesliczka](https://github.com/MichalCiesliczka)! - Adds `ProgressStepper` component
 
 - [#596](https://github.com/utilitywarehouse/hearth/pull/596) [`61f1073`](https://github.com/utilitywarehouse/hearth/commit/61f10735a42445b6e4eb90282a2b340317f1ec08) Thanks [@jordmccord](https://github.com/jordmccord)! - `List` component updates:
-
   - [BREAKING] The `text` prop in `ListItem` is now `heading`.
   - Added `ListAction` component.
   - Added `badge` prop to `ListItem`.
@@ -196,7 +266,6 @@
   - Removes `divider` prop from `List` and `ListItem`; dividers are now handled automatically.
 
 - [#585](https://github.com/utilitywarehouse/hearth/pull/585) [`4894c34`](https://github.com/utilitywarehouse/hearth/commit/4894c34acaadcbbaba78fd64be2f8ae862200e1f) Thanks [@dorota-uw](https://github.com/dorota-uw)! - [BREAKING] `DescriptionListItem` updates:
-
   - Removed `Link` props: `linkText`, `linkHref`, `linkIcon`, `linkIconPosition`, `linkOnPress`, `linkTarget`, `linkShowIcon`.
   - Added `trailingContent` prop to allow custom trailing content (e.g. Link, Button).
   - Added validation text support to `DescriptionListItem` via `invalidText` prop.
@@ -204,7 +273,6 @@
 - [#572](https://github.com/utilitywarehouse/hearth/pull/572) [`9fa6499`](https://github.com/utilitywarehouse/hearth/commit/9fa6499b6eb1534c2ce7dc4352b1f848b94786ec) Thanks [@MichalCiesliczka](https://github.com/MichalCiesliczka)! - Adds `IndicatorIconButton` component
 
 - [#596](https://github.com/utilitywarehouse/hearth/pull/596) [`61f1073`](https://github.com/utilitywarehouse/hearth/commit/61f10735a42445b6e4eb90282a2b340317f1ec08) Thanks [@jordmccord](https://github.com/jordmccord)! - [BREAKING] `SectionHeader` updates:
-
   - Removed `Link` props: `linkText`, `linkOnPress`, `linkAccessibilityLabel`.
   - Added `trailingContent` prop to allow custom trailing content (e.g. Link, Button).
   - Added `badge` prop to display a `Badge` next to the heading.
@@ -256,7 +324,6 @@
 - [#472](https://github.com/utilitywarehouse/hearth/pull/472) [`009fe4b`](https://github.com/utilitywarehouse/hearth/commit/009fe4bff4fc54e424f22629040f715d3d4714ea) Thanks [@jordmccord](https://github.com/jordmccord)! - Add `image` prop to `Checkbox` and `Radio` components
 
 - [#500](https://github.com/utilitywarehouse/hearth/pull/500) [`cc49e74`](https://github.com/utilitywarehouse/hearth/commit/cc49e74e3736b9647e8c5576ce45020add258625) Thanks [@jordmccord](https://github.com/jordmccord)! - - Updated dependencies [[`8dac8c1`](https://github.com/utilitywarehouse/hearth/commit/8dac8c1def9083d8e4efa1385e0ee7be23428c46)]:
-
   - @utilitywarehouse/hearth-react-native-icons@0.4.0
 
 - [#499](https://github.com/utilitywarehouse/hearth/pull/499) [`7b6781c`](https://github.com/utilitywarehouse/hearth/commit/7b6781cc054cf9f1ed4969a2c663abceb526c249) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes dark mode styles for several components

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/Checkbox/CheckboxGroup.d.ts

@@ -1,6 +1,6 @@
 import CheckboxGroupProps from './CheckboxGroup.props';
 declare const CheckboxGroup: {
-    ({ children, disabled, readonly, validationStatus, label, helperText, invalidText, validText, showValidationIcon, helperIcon, type, direction, gap, ...props }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, disabled, readonly, validationStatus, label, labelVariant, helperText, invalidText, validText, showValidationIcon, helperIcon, type, direction, gap, ...props }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default CheckboxGroup;

package/build/components/Checkbox/CheckboxGroup.js

@@ -7,7 +7,7 @@ import { Label } from '../Label';
 import { CheckboxGroup as CheckboxGroupComponent } from './Checkbox';
 import { CheckboxGroupContext } from './CheckboxGroup.context';
 import CheckboxGroupTextContent from './CheckboxGroupTextContent';
-const CheckboxGroup = ({ children, disabled, readonly, validationStatus, label, helperText, invalidText, validText, showValidationIcon = true, helperIcon, type, direction = 'column', gap, ...props }) => {
+const CheckboxGroup = ({ children, disabled, readonly, validationStatus, label, labelVariant = 'body', helperText, invalidText, validText, showValidationIcon = true, helperIcon, type, direction = 'column', gap, ...props }) => {
     const value = useMemo(() => ({ disabled, validationStatus, type, direction }), [disabled, validationStatus, type, direction]);
     const showHeader = !!label || !!helperText || !!invalidText || !!validText;
     const childrenArray = React.Children.toArray(children);
@@ -16,7 +16,7 @@ const CheckboxGroup = ({ children, disabled, readonly, validationStatus, label,
             // @ts-expect-error - child.type is not typed
             (child.props.type === 'tile' || child.type.displayName === 'CheckboxTile'));
     styles.useVariants({ type: childIsCard ? 'tile' : 'checkbox', direction });
-    return (_jsx(CheckboxGroupContext.Provider, { value: value, children: _jsxs(CheckboxGroupComponent, { ...props, value: props.value, isDisabled: disabled, isReadOnly: readonly, isCard: childIsCard, children: [showHeader && (_jsxs(CheckboxGroupTextContent, { children: [!!label && _jsx(Label, { disabled: disabled, children: label }), !!helperText && _jsx(Helper, { disabled: disabled, icon: helperIcon, text: helperText }), validationStatus === 'invalid' && !!invalidText && (_jsx(Helper, { showIcon: showValidationIcon, disabled: disabled, validationStatus: "invalid", text: invalidText })), validationStatus === 'valid' && !!validText && (_jsx(Helper, { disabled: disabled, showIcon: showValidationIcon, validationStatus: "valid", text: validText }))] })), _jsx(View, { style: [styles.container, styles.containerGap(gap)], children: children })] }) }));
+    return (_jsx(CheckboxGroupContext.Provider, { value: value, children: _jsxs(CheckboxGroupComponent, { ...props, value: props.value, isDisabled: disabled, isReadOnly: readonly, isCard: childIsCard, children: [showHeader && (_jsxs(CheckboxGroupTextContent, { children: [!!label && (_jsx(Label, { disabled: disabled, variant: labelVariant, children: label })), !!helperText && _jsx(Helper, { disabled: disabled, icon: helperIcon, text: helperText }), validationStatus === 'invalid' && !!invalidText && (_jsx(Helper, { showIcon: showValidationIcon, disabled: disabled, validationStatus: "invalid", text: invalidText })), validationStatus === 'valid' && !!validText && (_jsx(Helper, { disabled: disabled, showIcon: showValidationIcon, validationStatus: "valid", text: validText }))] })), _jsx(View, { style: [styles.container, styles.containerGap(gap)], children: children })] }) }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {

package/build/components/Checkbox/CheckboxGroup.props.d.ts

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react';
-import { space } from '../../tokens';
 import { ViewProps } from 'react-native';
+import { space } from '../../tokens';
 interface CheckboxGroupProps extends ViewProps {
     disabled?: boolean;
     value?: Array<string>;
@@ -8,6 +8,7 @@ interface CheckboxGroupProps extends ViewProps {
     readonly?: boolean;
     validationStatus?: 'valid' | 'invalid' | 'initial';
     label?: string;
+    labelVariant?: 'heading' | 'body';
     helperText?: string;
     showValidationIcon?: boolean;
     invalidText?: string;

package/build/components/CurrencyInput/CurrencyInput.d.ts

@@ -1,6 +1,6 @@
 import type CurrencyInputProps from './CurrencyInput.props';
 declare const CurrencyInput: {
-    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, required, disableGroupSeparator, value, onChangeText, ref, ...rest }: CurrencyInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, required, disableGroupSeparator, value, onChangeText, label, labelVariant, helperText, helperIcon, validText, invalidText, ref, ...rest }: CurrencyInputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default CurrencyInput;

package/build/components/CurrencyInput/CurrencyInput.js

@@ -3,12 +3,8 @@ import { Platform } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { formatThousands } from '../../utils';
 import { DetailText } from '../DetailText';
-import { useFormFieldContext } from '../FormField';
 import { Input, InputField, InputSlot } from '../Input';
-const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, required, disableGroupSeparator = false, value, onChangeText, ref, ...rest }) => {
-    const formFieldContext = useFormFieldContext();
-    const { disabled: formFieldDisabled } = formFieldContext;
-    const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
+const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, required = true, disableGroupSeparator = false, value, onChangeText, label, labelVariant = 'body', helperText, helperIcon, validText, invalidText, ref, ...rest }) => {
     const defaultFormat = '0.00';
     const getPlaceholder = placeholder ?? defaultFormat;
     const handleChangeText = (text) => {
@@ -21,7 +17,7 @@ const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readon
         }
     };
     const displayValue = !disableGroupSeparator && typeof value === 'string' ? formatThousands(value) : value;
-    return (_jsxs(Input, { validationStatus: validationStatusFromContext, disabled: formFieldDisabled ?? disabled, readonly: readonly, focused: focused, style: styles.wrap, children: [_jsx(InputSlot, { children: _jsx(DetailText, { size: "4xl", style: styles.text, accessible: false, children: "\u00A3" }) }), _jsx(InputField, { ref: ref, inputMode: "decimal", inBottomSheet: inBottomSheet, accessibilityHint: 'Enter the amount in pounds and pence, for example "10.99"', ...rest, placeholder: getPlaceholder, keyboardType: "decimal-pad", style: styles.input, value: displayValue, onChangeText: handleChangeText })] }));
+    return (_jsxs(Input, { validationStatus: validationStatus, disabled: disabled, readonly: readonly, focused: focused, required: required, style: styles.wrap, label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, children: [_jsx(InputSlot, { children: _jsx(DetailText, { size: "4xl", style: styles.text, accessible: false, children: "\u00A3" }) }), _jsx(InputField, { ref: ref, inputMode: "decimal", inBottomSheet: inBottomSheet, accessibilityHint: 'Enter the amount in pounds and pence, for example "10.99"', ...rest, placeholder: getPlaceholder, keyboardType: "decimal-pad", style: styles.input, value: displayValue, onChangeText: handleChangeText })] }));
 };
 CurrencyInput.displayName = 'CurrencyInput';
 const styles = StyleSheet.create(theme => ({

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

@@ -11,6 +11,12 @@ export interface CurrencyInputBaseProps {
     required?: boolean;
     /** When not specifically disabled, the numeric value is automatically formatted with thousand separators (e.g. 1234 -> 1,234). */
     disableGroupSeparator?: boolean;
+    label?: string;
+    labelVariant?: 'heading' | 'body';
+    helperText?: string;
+    helperIcon?: React.ComponentType;
+    validText?: string;
+    invalidText?: string;
 }
 export type CurrencyInputProps = CurrencyInputBaseProps & Omit<TextInputProps, 'children'> & ViewProps;
 export default CurrencyInputProps;

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,8 +24,7 @@ const styles = StyleSheet.create(theme => ({
         },
     },
     input: {
-        flex: 1,
-        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.d.ts

@@ -1,6 +1,6 @@
 import type DatePickerInputProps from './DatePickerInput.props';
 declare const DatePickerInput: {
-    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, format, openButtonLabel, autoCloseOnSelect, onChange, onChangeText, onBlur, onFocus, value, datePickerProps, onClear, ...rest }: DatePickerInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, format, openButtonLabel, autoCloseOnSelect, label, labelVariant, helperText, helperIcon, validText, invalidText, required, onChange, onChangeText, onBlur, onFocus, value, datePickerProps, onClear, ...rest }: DatePickerInputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default DatePickerInput;

package/build/components/DatePickerInput/DatePickerInput.js

@@ -19,9 +19,8 @@ const maskDefaultFormat = (value) => {
     const year = digitsOnly.slice(4, 8);
     return [day, month, year].filter(Boolean).join('/');
 };
-const DatePickerInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, format = DEFAULT_FORMAT, openButtonLabel = 'Open date picker', autoCloseOnSelect = true, onChange, onChangeText, onBlur, onFocus, value, datePickerProps, onClear, ...rest }) => {
+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`;
@@ -109,7 +108,7 @@ const DatePickerInput = ({ validationStatus = 'initial', disabled, focused, read
         pickerRef.current?.close?.();
     }, [pickerOnCancel]);
     const placeholderValue = placeholder ?? format;
-    return (_jsxs(_Fragment, { children: [_jsxs(Input, { validationStatus: validationStatusFromContext, disabled: isDisabled, readonly: isReadonly, focused: focused, style: styles.wrap, accessible: false, children: [_jsx(InputField, { editable: !isReadonly && !isDisabled, value: inputValue, placeholder: placeholderValue, onChangeText: handleTextChange, onBlur: handleBlur, onFocus: handleFocus, inBottomSheet: inBottomSheet, keyboardType: resolvedKeyboardType, inputMode: resolvedInputMode, accessibilityHint: resolvedAccessibilityHint, "aria-label": "Date input", accessibilityLabel: resolvedAccessibilityLabel, accessible: resolvedAccessible, accessibilityState: {
+    return (_jsxs(_Fragment, { children: [_jsxs(Input, { validationStatus: validationStatus, disabled: disabled, readonly: readonly, focused: focused, label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, required: required, style: styles.wrap, accessible: false, children: [_jsx(InputField, { editable: !isReadonly && !isDisabled, value: inputValue, placeholder: placeholderValue, onChangeText: handleTextChange, onBlur: handleBlur, onFocus: handleFocus, inBottomSheet: inBottomSheet, keyboardType: resolvedKeyboardType, inputMode: resolvedInputMode, accessibilityHint: resolvedAccessibilityHint, "aria-label": "Date input", accessibilityLabel: resolvedAccessibilityLabel, accessible: resolvedAccessible, accessibilityState: {
                             disabled: isDisabled || isReadonly,
                         }, importantForAccessibility: resolvedImportantForAccessibility, inputAccessoryViewID: Platform.OS === 'ios' ? accessoryViewID : undefined, ...textInputProps, style: [styles.input, inputStyle] }), !!inputValue && onClear && !isReadonly && !isDisabled && (_jsx(InputSlot, { accessibilityElementsHidden: false, children: _jsx(UnstyledIconButton, { accessibilityLabel: "Clear date", accessibilityHint: "Removes the current date", icon: CloseSmallIcon, onPress: handleClear }) })), _jsx(InputSlot, { accessibilityElementsHidden: false, children: _jsx(UnstyledIconButton, { accessibilityLabel: openButtonLabel, accessibilityHint: "Opens the date picker calendar", icon: CalendarSmallIcon, onPress: openPicker, disabled: isDisabled || isReadonly }) })] }), _jsx(DatePicker, { ref: pickerRef, mode: "single", date: selectedDate, onChange: handlePickerChange, onCancel: handleCancel, ...restDatePickerProps }), Platform.OS === 'ios' && accessoryViewID && (_jsx(DatePickerInputDoneButton, { accessoryViewID: accessoryViewID, closeKeyboard: closeKeyboard }))] }));
 };

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

@@ -6,6 +6,12 @@ export interface DatePickerInputBaseProps {
     validationStatus?: 'initial' | 'valid' | 'invalid';
     readonly?: boolean;
     focused?: boolean;
+    label?: string;
+    labelVariant?: 'heading' | 'body';
+    helperText?: string;
+    helperIcon?: React.ComponentType;
+    validText?: string;
+    invalidText?: string;
     placeholder?: string;
     inBottomSheet?: boolean;
     required?: boolean;

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 => ({