@utilitywarehouse/hearth-react-native 0.34.4 → 0.35.0

package/build/components/Carousel/CarouselControls.js

@@ -66,8 +66,8 @@ const styles = StyleSheet.create(theme => ({
         gap: theme.components.carouselControl.gap,
     },
     button: {
-        width: 24,
-        height: 24,
+        width: theme.components.icon.md.width,
+        height: theme.components.icon.md.height,
     },
 }));
 CarouselControls.displayName = 'CarouselControls';

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

@@ -1,6 +1,6 @@
 import CheckboxGroupProps from './CheckboxGroup.props';
 declare const CheckboxGroup: {
-    ({ children, disabled, readonly, validationStatus, label, labelVariant, helperText, invalidText, validText, showValidationIcon, helperIcon, type, direction, gap, ...props }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, disabled, readonly, onChange, onValueChange, 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, labelVariant = 'body', helperText, invalidText, validText, showValidationIcon = true, helperIcon, type, direction = 'column', gap, ...props }) => {
+const CheckboxGroup = ({ children, disabled, readonly, onChange, onValueChange, 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,10 @@ 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, 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 })] }) }));
+    return (_jsx(CheckboxGroupContext.Provider, { value: value, children: _jsxs(CheckboxGroupComponent, { ...props, value: props.value, onChange: (groupValue) => {
+                onChange?.(groupValue);
+                onValueChange?.(groupValue);
+            }, 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

@@ -4,6 +4,10 @@ import { space } from '../../tokens';
 interface CheckboxGroupProps extends ViewProps {
     disabled?: boolean;
     value?: Array<string>;
+    onValueChange?: (value: Array<string>) => void;
+    /**
+     * @deprecated Use `onValueChange` instead.
+     */
     onChange?: (value: Array<string>) => void;
     readonly?: boolean;
     validationStatus?: 'valid' | 'invalid' | 'initial';

package/build/components/Combobox/Combobox.js

@@ -15,6 +15,7 @@ import { Input } from '../Input';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
 import { ComboboxContext } from './Combobox.context';
+import { defaultFilterOption } from './Combobox.utils';
 import ComboboxOption from './ComboboxOption';
 const DEFAULT_SNAP_POINTS = ['25%', '40%', '80%'];
 const Combobox = ({ options = [], value, onValueChange, inputValue, onInputValueChange, label, labelVariant = 'body', placeholder = 'Search', searchPlaceholder = 'Search', disabled = false, validationStatus = 'initial', helperText, helperIcon, invalidText, validText, required = true, children, bottomSheetProps, menuHeading, noOptionsFoundText = 'No options found', listProps, loading = false, readonly = false, getValueLabel, filterOption, ...rest }) => {
@@ -136,18 +137,10 @@ const Combobox = ({ options = [], value, onValueChange, inputValue, onInputValue
         event.stopPropagation();
         handleClear();
     }, [handleClear]);
-    const defaultFilterOption = useCallback((option, query) => {
-        const normalizedQuery = query.trim().toLowerCase();
-        if (!normalizedQuery) {
-            return true;
-        }
-        const haystack = [option.label, ...(option.keywords ?? [])].map(term => term.toLowerCase());
-        return haystack.some(term => term.includes(normalizedQuery));
-    }, []);
     const filteredOptions = useMemo(() => {
         const optionFilter = filterOption ?? defaultFilterOption;
         return options.filter(option => optionFilter(option, search));
-    }, [defaultFilterOption, filterOption, options, search]);
+    }, [filterOption, options, search]);
     const renderSelectOption = useCallback(({ item }) => (_jsx(ComboboxOption, { label: item.label, value: item.value, disabled: item.disabled, leadingIcon: item.leadingIcon, trailingIcon: item.trailingIcon })), []);
     const renderEmptyComponent = useCallback(() => (_jsx(BottomSheetView, { style: styles.emptyContainer, children: _jsx(DetailText, { children: noOptionsFoundText }) })), [noOptionsFoundText]);
     const renderContentProps = useMemo(() => ({

package/build/components/Combobox/Combobox.utils.d.ts

@@ -0,0 +1,2 @@
+import type { ComboboxOptionItemProps } from './Combobox.props';
+export declare const defaultFilterOption: (option: ComboboxOptionItemProps, query: string) => boolean;

package/build/components/Combobox/Combobox.utils.js

@@ -0,0 +1,8 @@
+export const defaultFilterOption = (option, query) => {
+    const normalizedQuery = query.trim().toLowerCase();
+    if (!normalizedQuery) {
+        return true;
+    }
+    const haystack = [option.label, ...(option.keywords ?? [])].map(term => term.toLowerCase());
+    return haystack.some(term => term.includes(normalizedQuery));
+};

package/build/components/Combobox/Combobox.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/components/Combobox/Combobox.utils.test.js

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest';
+import { defaultFilterOption } from './Combobox.utils';
+const option = { label: 'United Kingdom', value: 'uk', keywords: ['Britain', 'England'] };
+describe('defaultFilterOption', () => {
+    it('matches every option for an empty or whitespace query', () => {
+        expect(defaultFilterOption(option, '')).toBe(true);
+        expect(defaultFilterOption(option, '   ')).toBe(true);
+    });
+    it('matches on a case-insensitive label substring', () => {
+        expect(defaultFilterOption(option, 'united')).toBe(true);
+        expect(defaultFilterOption(option, 'KINGDOM')).toBe(true);
+    });
+    it('matches on keywords', () => {
+        expect(defaultFilterOption(option, 'britain')).toBe(true);
+        expect(defaultFilterOption(option, 'engl')).toBe(true);
+    });
+    it('rejects non-matching queries', () => {
+        expect(defaultFilterOption(option, 'france')).toBe(false);
+    });
+    it('trims the query before matching', () => {
+        expect(defaultFilterOption(option, '  united  ')).toBe(true);
+    });
+    it('works for options without keywords', () => {
+        expect(defaultFilterOption({ label: 'France', value: 'fr' }, 'fra')).toBe(true);
+        expect(defaultFilterOption({ label: 'France', value: 'fr' }, 'uk')).toBe(false);
+    });
+});

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

@@ -24,8 +24,8 @@ const NextButton = () => {
 };
 const styles = StyleSheet.create(theme => ({
     icon: {
-        width: 20,
-        height: 20,
+        width: theme.components.icon.sm.width,
+        height: theme.components.icon.sm.height,
         color: theme.color.icon.primary,
     },
 }));

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

@@ -24,8 +24,8 @@ const PrevButton = () => {
 };
 const styles = StyleSheet.create(theme => ({
     icon: {
-        width: 20,
-        height: 20,
+        width: theme.components.icon.sm.width,
+        height: theme.components.icon.sm.height,
         color: theme.color.icon.primary,
     },
 }));

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

@@ -46,8 +46,8 @@ const styles = StyleSheet.create(theme => ({
     },
     icon: {
         color: theme.color.icon.primary,
-        width: 20,
-        height: 20,
+        width: theme.components.icon.sm.width,
+        height: theme.components.icon.sm.height,
     },
     monthYearWrap: {
         display: 'flex',

package/build/components/DatePicker/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/components/DatePicker/utils.test.js

@@ -0,0 +1,191 @@
+import dayjs from 'dayjs';
+import localeData from 'dayjs/plugin/localeData';
+import { describe, expect, it } from 'vitest';
+import { areDatesOnSameDay, formatNumber, getDaysInMonth, getFirstDayOfMonth, getMonthsArray, getParsedDate, getWeekdays, getYearRange, isDateBetween, isDateDisabled, isMonthDisabled, isYearDisabled, YEAR_PAGE_SIZE, } from './utils';
+dayjs.extend(localeData);
+describe('areDatesOnSameDay', () => {
+    it('returns true for two times on the same day', () => {
+        expect(areDatesOnSameDay('2025-03-15 09:00', '2025-03-15 23:59')).toBe(true);
+    });
+    it('returns false for different days', () => {
+        expect(areDatesOnSameDay('2025-03-15', '2025-03-16')).toBe(false);
+    });
+    it('returns false when either date is missing', () => {
+        expect(areDatesOnSameDay(undefined, '2025-03-15')).toBe(false);
+        expect(areDatesOnSameDay('2025-03-15', undefined)).toBe(false);
+    });
+});
+describe('isDateBetween', () => {
+    const startDate = dayjs('2025-03-10');
+    const endDate = dayjs('2025-03-20');
+    it('returns true for a date inside the range', () => {
+        expect(isDateBetween(dayjs('2025-03-15'), { startDate, endDate })).toBe(true);
+    });
+    it('includes the range boundaries', () => {
+        expect(isDateBetween(dayjs('2025-03-10'), { startDate, endDate })).toBe(true);
+        expect(isDateBetween(dayjs('2025-03-20'), { startDate, endDate })).toBe(true);
+    });
+    it('returns false for a date outside the range', () => {
+        expect(isDateBetween(dayjs('2025-03-09'), { startDate, endDate })).toBe(false);
+        expect(isDateBetween(dayjs('2025-03-21'), { startDate, endDate })).toBe(false);
+    });
+    it('returns false when either bound is missing', () => {
+        expect(isDateBetween(dayjs('2025-03-15'), { startDate })).toBe(false);
+        expect(isDateBetween(dayjs('2025-03-15'), { endDate })).toBe(false);
+    });
+});
+describe('isDateDisabled', () => {
+    it('disables dates before minDate', () => {
+        expect(isDateDisabled(dayjs('2025-03-09'), { minDate: '2025-03-10' })).toBe(true);
+        expect(isDateDisabled(dayjs('2025-03-10'), { minDate: '2025-03-10' })).toBe(false);
+    });
+    it('disables dates after maxDate', () => {
+        expect(isDateDisabled(dayjs('2025-03-21'), { maxDate: '2025-03-20' })).toBe(true);
+        expect(isDateDisabled(dayjs('2025-03-20'), { maxDate: '2025-03-20' })).toBe(false);
+    });
+    it('disables dates not in an enabledDates array', () => {
+        const enabledDates = ['2025-03-15'];
+        expect(isDateDisabled(dayjs('2025-03-15'), { enabledDates })).toBe(false);
+        expect(isDateDisabled(dayjs('2025-03-16'), { enabledDates })).toBe(true);
+    });
+    it('supports an enabledDates predicate', () => {
+        const enabledDates = (date) => dayjs(date).day() === 1;
+        expect(isDateDisabled(dayjs('2025-03-17'), { enabledDates })).toBe(false); // Monday
+        expect(isDateDisabled(dayjs('2025-03-18'), { enabledDates })).toBe(true);
+    });
+    it('disables dates in a disabledDates array', () => {
+        const disabledDates = ['2025-03-15'];
+        expect(isDateDisabled(dayjs('2025-03-15'), { disabledDates })).toBe(true);
+        expect(isDateDisabled(dayjs('2025-03-16'), { disabledDates })).toBe(false);
+    });
+    it('supports a disabledDates predicate', () => {
+        const disabledDates = (date) => dayjs(date).day() === 0;
+        expect(isDateDisabled(dayjs('2025-03-16'), { disabledDates })).toBe(true); // Sunday
+        expect(isDateDisabled(dayjs('2025-03-17'), { disabledDates })).toBe(false);
+    });
+    it('gives enabledDates precedence over disabledDates', () => {
+        expect(isDateDisabled(dayjs('2025-03-15'), {
+            enabledDates: ['2025-03-15'],
+            disabledDates: ['2025-03-15'],
+        })).toBe(false);
+    });
+    it('returns false when no constraints are provided', () => {
+        expect(isDateDisabled(dayjs('2025-03-15'), {})).toBe(false);
+    });
+});
+describe('isYearDisabled', () => {
+    it('disables years outside the min/max range', () => {
+        expect(isYearDisabled(2019, { minDate: '2020-01-01' })).toBe(true);
+        expect(isYearDisabled(2026, { maxDate: '2025-12-31' })).toBe(true);
+    });
+    it('allows years inside the range', () => {
+        expect(isYearDisabled(2022, { minDate: '2020-01-01', maxDate: '2025-12-31' })).toBe(false);
+    });
+});
+describe('isMonthDisabled', () => {
+    it('disables months before minDate within the same year', () => {
+        expect(isMonthDisabled(1, '2025-06-01', { minDate: '2025-03-10' })).toBe(true);
+    });
+    it('allows earlier months in a later year', () => {
+        expect(isMonthDisabled(1, '2026-06-01', { minDate: '2025-03-10' })).toBe(false);
+    });
+    it('disables months after maxDate within the same year', () => {
+        expect(isMonthDisabled(11, '2025-06-01', { maxDate: '2025-10-10' })).toBe(true);
+    });
+    it('allows months inside the range', () => {
+        expect(isMonthDisabled(5, '2025-06-01', { minDate: '2025-03-10', maxDate: '2025-10-10' })).toBe(false);
+    });
+});
+describe('getYearRange', () => {
+    it('returns a full page of years containing the given year', () => {
+        const range = getYearRange(2024);
+        expect(range).toHaveLength(YEAR_PAGE_SIZE);
+        expect(range[0]).toBe(2016);
+        expect(range[range.length - 1]).toBe(2027);
+        expect(range).toContain(2024);
+    });
+    it('starts a new page on a page boundary year', () => {
+        const range = getYearRange(2028);
+        expect(range[0]).toBe(2028);
+        expect(range[range.length - 1]).toBe(2039);
+    });
+});
+describe('getDaysInMonth', () => {
+    it('calculates offsets for a month spilling into a sixth week', () => {
+        // March 2025 starts on a Saturday: 6 leading cells + 31 days > 35 → 42-cell grid
+        expect(getDaysInMonth('2025-03-15', true, 0)).toEqual({
+            prevMonthDays: 28,
+            prevMonthOffset: 6,
+            daysInCurrentMonth: 31,
+            daysInNextMonth: 5,
+            fullDaysInMonth: 42,
+        });
+    });
+    it('calculates offsets for a month fitting in five weeks', () => {
+        // February 2021 starts on a Monday: 1 leading cell + 28 days ≤ 35 → 35-cell grid
+        expect(getDaysInMonth('2021-02-10', true, 0)).toEqual({
+            prevMonthDays: 31,
+            prevMonthOffset: 1,
+            daysInCurrentMonth: 28,
+            daysInNextMonth: 6,
+            fullDaysInMonth: 35,
+        });
+    });
+    it('omits outside days when showOutsideDays is false', () => {
+        const result = getDaysInMonth('2025-03-15', false, 0);
+        expect(result.daysInNextMonth).toBe(0);
+        expect(result.fullDaysInMonth).toBe(31);
+    });
+    it('shifts the offset for a Monday-first week', () => {
+        // With Monday as first day, March 2025 (starting Saturday) has 5 leading cells
+        expect(getDaysInMonth('2025-03-15', true, 1).prevMonthOffset).toBe(5);
+    });
+});
+describe('getFirstDayOfMonth', () => {
+    it('returns the weekday index of the first of the month', () => {
+        expect(getFirstDayOfMonth('2025-03-15', 0)).toBe(6); // 1 March 2025 is a Saturday
+        expect(getFirstDayOfMonth('2025-06-15', 0)).toBe(0); // 1 June 2025 is a Sunday
+    });
+});
+describe('getParsedDate', () => {
+    it('parses a date into its display parts', () => {
+        expect(getParsedDate('2025-03-15 14:30')).toEqual({
+            year: 2025,
+            month: 2,
+            hour: 14,
+            hour12: 2,
+            minute: 30,
+            period: 'PM',
+        });
+    });
+});
+describe('getWeekdays', () => {
+    it('returns seven weekdays starting from Sunday by default', () => {
+        const weekdays = getWeekdays(0);
+        expect(weekdays).toHaveLength(7);
+        expect(weekdays[0].name.full).toBe('Sunday');
+        expect(weekdays[0].name.min).toBe('S');
+    });
+    it('rotates the week to the given first day', () => {
+        const weekdays = getWeekdays(1);
+        expect(weekdays[0].name.full).toBe('Monday');
+        expect(weekdays[6].name.full).toBe('Sunday');
+    });
+});
+describe('getMonthsArray', () => {
+    it('returns all twelve months with full and short names', () => {
+        const months = getMonthsArray();
+        expect(months).toHaveLength(12);
+        expect(months[0]).toEqual({
+            index: 0,
+            name: { full: 'January', short: 'Jan' },
+            isSelected: false,
+        });
+    });
+});
+describe('formatNumber', () => {
+    it('formats numbers with latin numerals', () => {
+        expect(formatNumber(7, 'latn')).toBe('7');
+        expect(formatNumber(2025, 'latn')).toBe('2025');
+    });
+});

package/build/components/DatePickerInput/DatePickerInput.js

@@ -9,16 +9,9 @@ import { DatePicker } from '../DatePicker';
 import { useFormFieldContext } from '../FormField';
 import { Input, InputField, InputSlot } from '../Input';
 import { UnstyledIconButton } from '../UnstyledIconButton';
+import { DEFAULT_FORMAT, maskDefaultFormat } from './DatePickerInput.utils';
 import DatePickerInputDoneButton from './DatePickerInputDoneButton';
 dayjs.extend(customParseFormat);
-const DEFAULT_FORMAT = 'DD/MM/YYYY';
-const maskDefaultFormat = (value) => {
-    const digitsOnly = value.replace(/\D/g, '').slice(0, 8);
-    const day = digitsOnly.slice(0, 2);
-    const month = digitsOnly.slice(2, 4);
-    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, label, labelVariant, helperText, helperIcon, validText, invalidText, required = true, onChange, onChangeText, onBlur, onFocus, value, datePickerProps, onClear, ...rest }) => {
     const formFieldContext = useFormFieldContext();
     const isDisabled = formFieldContext?.disabled ?? disabled;

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

@@ -0,0 +1,2 @@
+export declare const DEFAULT_FORMAT = "DD/MM/YYYY";
+export declare const maskDefaultFormat: (value: string) => string;

package/build/components/DatePickerInput/DatePickerInput.utils.js

@@ -0,0 +1,8 @@
+export const DEFAULT_FORMAT = 'DD/MM/YYYY';
+export const maskDefaultFormat = (value) => {
+    const digitsOnly = value.replace(/\D/g, '').slice(0, 8);
+    const day = digitsOnly.slice(0, 2);
+    const month = digitsOnly.slice(2, 4);
+    const year = digitsOnly.slice(4, 8);
+    return [day, month, year].filter(Boolean).join('/');
+};

package/build/components/DatePickerInput/DatePickerInput.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/components/DatePickerInput/DatePickerInput.utils.test.js

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest';
+import { maskDefaultFormat } from './DatePickerInput.utils';
+describe('maskDefaultFormat', () => {
+    it('returns an empty string for empty input', () => {
+        expect(maskDefaultFormat('')).toBe('');
+    });
+    it('masks progressively while typing', () => {
+        expect(maskDefaultFormat('1')).toBe('1');
+        expect(maskDefaultFormat('12')).toBe('12');
+        expect(maskDefaultFormat('123')).toBe('12/3');
+        expect(maskDefaultFormat('1203')).toBe('12/03');
+        expect(maskDefaultFormat('12032')).toBe('12/03/2');
+        expect(maskDefaultFormat('12032025')).toBe('12/03/2025');
+    });
+    it('strips non-digit characters before masking', () => {
+        expect(maskDefaultFormat('12/03/2025')).toBe('12/03/2025');
+        expect(maskDefaultFormat('12a03b2025')).toBe('12/03/2025');
+    });
+    it('truncates input beyond eight digits', () => {
+        expect(maskDefaultFormat('120320251234')).toBe('12/03/2025');
+    });
+});

package/build/components/ExpandableCard/ExpandableCardIcon.js

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

package/build/components/Helper/HelperIcon.js

@@ -14,8 +14,8 @@ const HelperIcon = (props) => {
 HelperIcon.displayName = 'HelperIcon';
 const styles = StyleSheet.create(theme => ({
     icon: {
-        width: 20,
-        height: 20,
+        width: theme.components.icon.sm.width,
+        height: theme.components.icon.sm.height,
         variants: {
             validationStatus: {
                 valid: {

package/build/components/IconButton/IconButtonIcon.js

@@ -41,12 +41,12 @@ const styles = StyleSheet.create(theme => ({
             },
             size: {
                 sm: {
-                    width: 20,
-                    height: 20,
+                    width: theme.components.icon.sm.width,
+                    height: theme.components.icon.sm.height,
                 },
                 md: {
-                    width: 24,
-                    height: 24,
+                    width: theme.components.icon.md.width,
+                    height: theme.components.icon.md.height,
                 },
             },
         },

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

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

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

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

package/build/components/Modal/Modal.js

@@ -70,6 +70,8 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
     const hasSecondaryButton = !!(onPressSecondaryButton && secondaryButtonText);
     const hasFooter = !!footer || hasPrimaryButton || hasSecondaryButton;
     const shouldShowFooter = !loading && hasFooter;
+    const descriptionIsText = typeof description === 'string' || typeof description === 'number';
+    const hasDescription = description !== undefined && description !== null;
     styles.useVariants({
         loading,
         noButtons: !shouldShowFooter,
@@ -88,7 +90,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         secondaryButtonProps,
         secondaryButtonText,
     ]);
-    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? (loadingHeading ?? 'Loading') : undefined, accessibilityHint: Platform.OS === 'android' && loadingDescription ? loadingDescription : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading }), loadingDescription ? _jsx(BodyText, { textAlign: "center", children: loadingDescription }) : null] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, children, !stickyFooter && shouldShowFooter ? (_jsx(View, { style: footerStyle, children: footerContent })) : null] })) }));
+    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? (loadingHeading ?? 'Loading') : undefined, accessibilityHint: Platform.OS === 'android' && loadingDescription ? loadingDescription : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading }), loadingDescription ? _jsx(BodyText, { textAlign: "center", children: loadingDescription }) : null] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, hasDescription && !image ? (descriptionIsText ? (_jsx(BodyText, { accessible: true, children: description })) : (description)) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, hasDescription ? (descriptionIsText ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : (description)) : null] })] })) : null, children, !stickyFooter && shouldShowFooter ? (_jsx(View, { style: footerStyle, children: footerContent })) : null] })) }));
     const renderFooter = useCallback((bottomSheetFooterProps) => (_jsx(BottomSheetFooter, { ...bottomSheetFooterProps, children: _jsx(View, { onLayout: handleStickyFooterLayout, style: [styles.footerWrap, footerStyle], children: footerContent }) })), [footerContent, footerStyle, handleStickyFooterLayout]);
     return (_jsxs(_Fragment, { children: [stickyFooter && shouldShowFooter && stickyFooterHeight === 0 ? (_jsx(View, { accessible: false, importantForAccessibility: "no-hide-descendants", pointerEvents: "none", style: styles.footerMeasurementContainer, children: _jsx(View, { onLayout: handleStickyFooterLayout, style: [styles.footerWrap, footerStyle], children: footerContent }) })) : null, _jsxs(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, style: styles.modal, footerComponent: stickyFooter && shouldShowFooter ? renderFooter : undefined, ...props, onChange: handleChange, children: [loading ? _jsx(View, { style: styles.loadingTop }) : null, _jsx(BottomSheetScrollView, { contentContainerStyle: [
                             styles.scrollView,

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

@@ -9,7 +9,7 @@ export interface ModalCommonBaseProps {
     heading?: string;
     loadingHeading?: string;
     loadingDescription?: string;
-    description?: string;
+    description?: ReactNode;
     stickyFooter?: boolean;
     children?: ViewProps['children'];
     onPressCloseButton?: () => void;

package/build/components/Modal/Modal.web.js

@@ -59,8 +59,10 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
     const hasPrimaryButton = !!(onPressPrimaryButton && primaryButtonText);
     const hasSecondaryButton = !!(onPressSecondaryButton && secondaryButtonText);
     const hasFooter = !!footer || hasPrimaryButton || hasSecondaryButton;
+    const descriptionIsText = typeof description === 'string' || typeof description === 'number';
+    const hasDescription = description !== undefined && description !== null;
     const footerContent = footer ?? (_jsxs(View, { style: styles.footer, children: [hasPrimaryButton ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, hasSecondaryButton ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] }));
-    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, children, hasFooter ? _jsx(View, { style: footerStyle, children: footerContent }) : null] })) }));
+    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, hasDescription && !image ? (descriptionIsText ? (_jsx(BodyText, { accessible: true, children: description })) : (description)) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, hasDescription ? (descriptionIsText ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : (description)) : null] })] })) : null, children, hasFooter ? _jsx(View, { style: footerStyle, children: footerContent }) : null] })) }));
     return (_jsx(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, ...props, onChange: handleChange, children: _jsx(BottomSheetScrollView, { contentContainerStyle: styles.container, ref: scrollViewRef, children: content }) }));
 };
 const styles = StyleSheet.create(theme => ({

package/build/components/NavModal/NavModal.js

@@ -63,6 +63,8 @@ const NavModal = ({ ref, children, heading, description, showCloseButton = true,
     const hasPrimaryButton = !!(onPressPrimaryButton && primaryButtonText);
     const hasSecondaryButton = !!(onPressSecondaryButton && secondaryButtonText);
     const hasFooter = !!footer || hasPrimaryButton || hasSecondaryButton;
+    const descriptionIsText = typeof description === 'string' || typeof description === 'number';
+    const hasDescription = description !== undefined && description !== null;
     styles.useVariants({
         loading,
         background: isBrandBackground ? 'brand' : 'primary',
@@ -83,7 +85,7 @@ const NavModal = ({ ref, children, heading, description, showCloseButton = true,
         secondaryButtonProps,
         secondaryButtonText,
     ]);
-    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? (loadingHeading ?? 'Loading') : undefined, accessibilityHint: Platform.OS === 'android' && loadingDescription ? loadingDescription : undefined, screenReaderFocusable: true, children: [_jsx(Spinner, { size: "lg", color: isBrandBackground ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground, children: loadingHeading }), loadingDescription ? (_jsx(BodyText, { size: "md", textAlign: "center", inverted: isBrandBackground, children: loadingDescription })) : null] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, inverted: isBrandBackground, children: heading })) : null, description && !image ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground, children: description })) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground, ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, inverted: isBrandBackground, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground, children: description })) : null] })] })) : null, scrollable ? (_jsxs(ScrollView, { style: {
+    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? (loadingHeading ?? 'Loading') : undefined, accessibilityHint: Platform.OS === 'android' && loadingDescription ? loadingDescription : undefined, screenReaderFocusable: true, children: [_jsx(Spinner, { size: "lg", color: isBrandBackground ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground, children: loadingHeading }), loadingDescription ? (_jsx(BodyText, { size: "md", textAlign: "center", inverted: isBrandBackground, children: loadingDescription })) : null] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, inverted: isBrandBackground, children: heading })) : null, hasDescription && !image ? (descriptionIsText ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground, children: description })) : (description)) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground, ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, inverted: isBrandBackground, children: heading })) : null, hasDescription ? (descriptionIsText ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground, children: description })) : (description)) : null] })] })) : null, scrollable ? (_jsxs(ScrollView, { style: {
                         flex: stickyFooter ? 1 : 0,
                         marginHorizontal: -4,
                     }, contentContainerStyle: { paddingHorizontal: 4 }, ...scrollViewProps, children: [children, !stickyFooter && hasFooter ? (_jsx(View, { style: [styles.inNavModalFooterContainer, footerStyle], children: footerContent })) : null] })) : (_jsxs(View, { style: {

package/build/components/PillGroup/PillGroup.d.ts

@@ -1,5 +1,5 @@
 import type { PillGroupProps } from './PillGroup.props';
 export declare const PillGroup: {
-    ({ children, value, multiple, wrap, onChange, style, ...props }: PillGroupProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, value, multiple, wrap, onChange, onValueChange, style, ...props }: PillGroupProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/build/components/PillGroup/PillGroup.js

@@ -4,7 +4,7 @@ import { ScrollView } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Box } from '../Box';
 import { PillGroupContext } from './PillGroup.context';
-export const PillGroup = ({ children, value, multiple = false, wrap = true, onChange, style, ...props }) => {
+export const PillGroup = ({ children, value, multiple = false, wrap = true, onChange, onValueChange, style, ...props }) => {
     const normalizedValue = Array.isArray(value) ? value : [value];
     const contextValue = useMemo(() => ({
         value: normalizedValue,
@@ -14,12 +14,14 @@ export const PillGroup = ({ children, value, multiple = false, wrap = true, onCh
                     ? normalizedValue.filter(v => v !== pillValue)
                     : [...normalizedValue, pillValue];
                 onChange?.(newValue);
+                onValueChange?.(newValue);
             }
             else {
                 onChange?.(pillValue);
+                onValueChange?.(pillValue);
             }
         },
-    }), [normalizedValue, multiple, onChange]);
+    }), [normalizedValue, multiple, onChange, onValueChange]);
     return (_jsx(PillGroupContext.Provider, { value: contextValue, children: wrap ? (_jsx(Box, { style: [styles.group, styles.wrap, style], ...props, children: children })) : (_jsx(ScrollView, { horizontal: true, style: styles.scrollView, contentContainerStyle: [styles.group, style], showsHorizontalScrollIndicator: false, ...props, children: children })) }));
 };
 PillGroup.displayName = 'PillGroup';