@utilitywarehouse/hearth-react-native 0.20.0 → 0.22.0

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

@@ -1,76 +1,6 @@
 import type { ViewProps } from 'react-native';
-import { SpaceValue, SpacingValues } from '../../types';
-interface ContainerProps extends ViewProps {
-    /**
-     * The padding of the container.
-     */
-    padding?: SpaceValue;
-    /**
-     * The horizontal padding of the container.
-     */
-    paddingHorizontal?: SpaceValue;
-    /**
-     * The vertical padding of the container.
-     */
-    paddingVertical?: SpaceValue;
-    /**
-     * The top padding of the container.
-     */
-    paddingTop?: SpaceValue;
-    /**
-     * The bottom padding of the container.
-     */
-    paddingBottom?: SpaceValue;
-    /**
-     * The left padding of the container.
-     */
-    paddingLeft?: SpaceValue;
-    /**
-     * The right padding of the container.
-     */
-    paddingRight?: SpaceValue;
-    /**
-     * The margin of the container.
-     */
-    margin?: SpaceValue;
-    /**
-     * The horizontal margin of the container.
-     */
-    marginHorizontal?: SpaceValue;
-    /**
-     * The vertical margin of the container.
-     */
-    marginVertical?: SpaceValue;
-    /**
-     * The top margin of the container.
-     */
-    marginTop?: SpaceValue;
-    /**
-     * The bottom margin of the container.
-     */
-    marginBottom?: SpaceValue;
-    /**
-     * The left margin of the container.
-     */
-    marginLeft?: SpaceValue;
-    /**
-     * The right margin of the container.
-     */
-    marginRight?: SpaceValue;
-    p?: SpaceValue;
-    px?: SpaceValue;
-    py?: SpaceValue;
-    pt?: SpaceValue;
-    pb?: SpaceValue;
-    pl?: SpaceValue;
-    pr?: SpaceValue;
-    m?: SpaceValue;
-    mx?: SpaceValue;
-    my?: SpaceValue;
-    mt?: SpaceValue;
-    mb?: SpaceValue;
-    ml?: SpaceValue;
-    mr?: SpaceValue;
+import type { BackgroundColorProps, GapProps, MarginProps, PaddingProps, SpacingValues } from '../../types';
+interface ContainerProps extends ViewProps, MarginProps, PaddingProps, GapProps, BackgroundColorProps {
     /**
      * The spacing between child elements (gap).
      */
@@ -80,11 +10,5 @@ interface ContainerProps extends ViewProps {
      * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release.
      */
     space?: SpacingValues;
-    /**
-     * The space between child elements.
-     */
-    gap?: SpaceValue;
-    backgroundColor?: 'backgroundBrand' | 'backgroundPrimary' | 'backgroundSecondary' | 'transparent';
-    bg?: 'backgroundBrand' | 'backgroundPrimary' | 'backgroundSecondary' | 'transparent';
 }
 export default ContainerProps;

package/build/components/DateInput/DateInput.d.ts

@@ -1,6 +1,6 @@
 import type { DateInputProps } from './DateInput.props';
 declare const DateInput: {
-    ({ label, helperText, helperIcon, validationStatus, validText, invalidText, disabled, readonly, required, hideDay, hideMonth, hideYear, dayPlaceholder, monthPlaceholder, yearPlaceholder, dayValue, monthValue, yearValue, onDayChange, onMonthChange, onYearChange, onDayFocus, onMonthFocus, onYearFocus, onDayBlur, onMonthBlur, onYearBlur, inputLabelStyle, inputContainerStyle, inputStyle, ...props }: DateInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, helperText, helperIcon, validationStatus, validText, invalidText, disabled, readonly, required, hideDay, hideMonth, hideYear, dayPlaceholder, monthPlaceholder, yearPlaceholder, dayValue, monthValue, yearValue, dayRef, monthRef, yearRef, onDayChange, onMonthChange, onYearChange, onDayFocus, onMonthFocus, onYearFocus, onDayBlur, onMonthBlur, onYearBlur, inputLabelStyle, inputContainerStyle, inputStyle, ...props }: DateInputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default DateInput;

package/build/components/DateInput/DateInput.js

@@ -3,8 +3,8 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { FormField } from '../FormField';
 import DateInputSegment from './DateInputSegment';
-const DateInput = ({ label, helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled, readonly, required, hideDay = false, hideMonth = false, hideYear = false, dayPlaceholder = 'DD', monthPlaceholder = 'MM', yearPlaceholder = 'YYYY', dayValue, monthValue, yearValue, onDayChange, onMonthChange, onYearChange, onDayFocus, onMonthFocus, onYearFocus, onDayBlur, onMonthBlur, onYearBlur, inputLabelStyle, inputContainerStyle, inputStyle, ...props }) => {
-    return (_jsx(FormField, { label: label, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, required: required, style: styles.wrap, ...props, children: _jsxs(View, { style: styles.container, children: [!hideDay && (_jsx(DateInputSegment, { label: "Day", placeholder: dayPlaceholder, value: dayValue, onChange: onDayChange, onFocus: onDayFocus, onBlur: onDayBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-day", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle })), !hideMonth && (_jsx(DateInputSegment, { label: "Month", placeholder: monthPlaceholder, value: monthValue, onChange: onMonthChange, onFocus: onMonthFocus, onBlur: onMonthBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-month", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle })), !hideYear && (_jsx(DateInputSegment, { label: "Year", placeholder: yearPlaceholder, value: yearValue, onChange: onYearChange, onFocus: onYearFocus, onBlur: onYearBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 4, testID: "date-input-year", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle }))] }) }));
+const DateInput = ({ label, helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled, readonly, required, hideDay = false, hideMonth = false, hideYear = false, dayPlaceholder = 'DD', monthPlaceholder = 'MM', yearPlaceholder = 'YYYY', dayValue, monthValue, yearValue, dayRef, monthRef, yearRef, onDayChange, onMonthChange, onYearChange, onDayFocus, onMonthFocus, onYearFocus, onDayBlur, onMonthBlur, onYearBlur, inputLabelStyle, inputContainerStyle, inputStyle, ...props }) => {
+    return (_jsx(FormField, { label: label, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, required: required, style: styles.wrap, ...props, children: _jsxs(View, { style: styles.container, children: [!hideDay && (_jsx(DateInputSegment, { label: "Day", placeholder: dayPlaceholder, value: dayValue, inputRef: dayRef, onChange: onDayChange, onFocus: onDayFocus, onBlur: onDayBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-day", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle })), !hideMonth && (_jsx(DateInputSegment, { label: "Month", placeholder: monthPlaceholder, value: monthValue, inputRef: monthRef, onChange: onMonthChange, onFocus: onMonthFocus, onBlur: onMonthBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-month", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle })), !hideYear && (_jsx(DateInputSegment, { label: "Year", placeholder: yearPlaceholder, value: yearValue, inputRef: yearRef, onChange: onYearChange, onFocus: onYearFocus, onBlur: onYearBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 4, testID: "date-input-year", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle }))] }) }));
 };
 DateInput.displayName = 'DateInput';
 const styles = StyleSheet.create(theme => ({

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

@@ -1,4 +1,5 @@
-import type { TextInputProps, ViewProps } from 'react-native';
+import type { Ref } from 'react';
+import type { TextInput, TextInputProps, ViewProps } from 'react-native';
 import type { FormFieldBaseProps } from '../FormField/FormField.props';
 import LabelProps from '../Label/Label.props';
 export interface DateInputProps extends FormFieldBaseProps {
@@ -41,6 +42,18 @@ export interface DateInputProps extends FormFieldBaseProps {
      * The controlled value for the year segment. Must be used with an `onYearChange` handler.
      */
     yearValue?: string;
+    /**
+     * Ref for the day segment input.
+     */
+    dayRef?: Ref<TextInput>;
+    /**
+     * Ref for the month segment input.
+     */
+    monthRef?: Ref<TextInput>;
+    /**
+     * Ref for the year segment input.
+     */
+    yearRef?: Ref<TextInput>;
     /**
      * Callback fired when the day value changes.
      */
@@ -85,6 +98,7 @@ export interface DateInputSegmentProps {
     label: string;
     placeholder?: string;
     value?: string;
+    inputRef?: Ref<TextInput>;
     onChange?: (text: string) => void;
     onFocus?: DateInputProps['onDayFocus'];
     onBlur?: DateInputProps['onDayBlur'];

package/build/components/DateInput/DateInputSegment.d.ts

@@ -1,6 +1,6 @@
 import type { DateInputSegmentProps } from './DateInput.props';
 declare const DateInputSegment: {
-    ({ label, placeholder, value, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, inputContainerStyle, inputStyle, inputLabelStyle, }: DateInputSegmentProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, placeholder, value, inputRef, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, inputContainerStyle, inputStyle, inputLabelStyle, }: DateInputSegmentProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default DateInputSegment;

package/build/components/DateInput/DateInputSegment.js

@@ -3,9 +3,9 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { Input } from '../Input';
-const DateInputSegment = ({ label, placeholder, value, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, inputContainerStyle, inputStyle, inputLabelStyle, }) => {
+const DateInputSegment = ({ label, placeholder, value, inputRef, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, inputContainerStyle, inputStyle, inputLabelStyle, }) => {
     styles.useVariants({ disabled });
-    return (_jsxs(View, { style: [styles.container, inputContainerStyle], children: [_jsx(BodyText, { size: "md", style: [styles.label, inputLabelStyle], children: label }), _jsx(Input, { value: value, onChangeText: onChange, onFocus: onFocus, onBlur: onBlur, placeholder: disabled ? undefined : placeholder, keyboardType: "number-pad", maxLength: maxLength, testID: testID, accessibilityLabel: label, disabled: disabled, validationStatus: validationStatus, readonly: readonly, style: inputStyle })] }));
+    return (_jsxs(View, { style: [styles.container, inputContainerStyle], children: [_jsx(BodyText, { size: "md", style: [styles.label, inputLabelStyle], children: label }), _jsx(Input, { ref: inputRef, value: value, onChangeText: onChange, onFocus: onFocus, onBlur: onBlur, placeholder: disabled ? undefined : placeholder, keyboardType: "number-pad", maxLength: maxLength, testID: testID, accessibilityLabel: label, disabled: disabled, validationStatus: validationStatus, readonly: readonly, style: inputStyle })] }));
 };
 DateInputSegment.displayName = 'DateInputSegment';
 const styles = StyleSheet.create(theme => ({

package/build/components/DetailText/DetailText.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
 import { Text } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useTheme } from '../../hooks';
-import { getFlattenedColorValue } from '../../utils';
+import { useStyleProps } from '../../hooks';
+import { getFlattenedColorValue, resolveThemeValueWithFallback } from '../../utils';
 const DetailText = ({ children, color, size = 'md', truncated, underline, strikeThrough, italic, textTransform, textAlign, textAlignVertical, textDecorationColor, textDecorationLine, textDecorationStyle, userSelect, inverted, ...props }) => {
-    const { color: themeColor, colorMode } = useTheme();
+    const { computedStyles: utilityStyles, remainingProps } = useStyleProps(props);
     styles.useVariants({
         size,
         underline,
@@ -13,29 +12,23 @@ const DetailText = ({ children, color, size = 'md', truncated, underline, strike
         italic,
         inverted,
     });
-    const colorValue = useMemo(() => getFlattenedColorValue(color, themeColor), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [color, colorMode]);
-    const decorationColor = useMemo(() => getFlattenedColorValue(textDecorationColor, themeColor), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [textDecorationColor, colorMode]);
-    return (_jsx(Text, { ...props, ...(truncated
+    return (_jsx(Text, { ...remainingProps, ...(truncated
             ? {
                 numberOfLines: 1,
                 ellipsizeMode: 'tail',
             }
             : {}), style: [
             styles.text,
+            utilityStyles,
             {
-                ...(colorValue && { color: colorValue }),
                 ...(textTransform && { textTransform }),
                 ...(textAlign && { textAlign }),
-                ...(decorationColor && { textDecorationColor: decorationColor }),
                 ...(textDecorationLine && { textDecorationLine }),
                 ...(textDecorationStyle && { textDecorationStyle }),
                 ...(userSelect && { userSelect }),
                 ...(textAlignVertical && { textAlignVertical }),
             },
+            styles.getColours(color, textDecorationColor),
             props.style,
         ], children: children }));
 };
@@ -111,5 +104,13 @@ const styles = StyleSheet.create(theme => ({
             },
         },
     },
+    getColours: (color, textDecorationColor) => ({
+        ...(color
+            ? { color: resolveThemeValueWithFallback(color, theme.helpers.semanticColor.text, theme.color) }
+            : {}),
+        ...(textDecorationColor
+            ? { textDecorationColor: getFlattenedColorValue(textDecorationColor, theme.color) }
+            : {}),
+    }),
 }));
 export default DetailText;

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

@@ -1,19 +1,6 @@
-import type { TextProps as RNTextProps, TextStyle } from 'react-native';
-import type { ColorValue } from '../../types';
-interface TextProps extends RNTextProps {
+import type { CommonTextProps } from '../../types';
+interface DetailTextProps extends CommonTextProps {
+    /** Text size variant. */
     size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
-    strikeThrough?: boolean;
-    underline?: boolean;
-    truncated?: boolean;
-    italic?: boolean;
-    color?: ColorValue;
-    textTransform?: TextStyle['textTransform'];
-    textAlign?: TextStyle['textAlign'];
-    textAlignVertical?: TextStyle['textAlignVertical'];
-    textDecorationLine?: TextStyle['textDecorationLine'];
-    textDecorationStyle?: TextStyle['textDecorationStyle'];
-    textDecorationColor?: ColorValue;
-    userSelect?: TextStyle['userSelect'];
-    inverted?: boolean;
 }
-export default TextProps;
+export default DetailTextProps;

package/build/components/Flex/Flex.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { useStyleProps } from '../../hooks';
 const Flex = ({ style, children, direction = 'column', align = 'flex-start', justify = 'flex-start', wrap = 'nowrap', spacing = 'md', space, ...rest }) => {
     const propStyle = {
         flexDirection: direction,
@@ -8,8 +9,9 @@ const Flex = ({ style, children, direction = 'column', align = 'flex-start', jus
         justifyContent: justify,
         flexWrap: wrap,
     };
+    const { computedStyles, remainingProps } = useStyleProps(rest);
     styles.useVariants({ spacing: space ?? spacing });
-    return (_jsx(View, { style: [propStyle, styles.flex, style], ...rest, children: children }));
+    return (_jsx(View, { style: [propStyle, styles.flex, computedStyles, style], ...remainingProps, children: children }));
 };
 Flex.displayName = 'Flex';
 const styles = StyleSheet.create(theme => ({

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

@@ -1,6 +1,6 @@
 import type { FlexAlignType, ViewProps, ViewStyle } from 'react-native';
-import { SpacingValues } from '../../types';
-interface FlexProps extends ViewProps {
+import { FlexLayoutProps, GapProps, SpacingValues } from '../../types';
+interface FlexProps extends ViewProps, FlexLayoutProps, GapProps {
     direction?: ViewStyle['flexDirection'];
     align?: FlexAlignType;
     justify?: ViewStyle['justifyContent'];

package/build/components/Heading/Heading.js

@@ -1,40 +1,34 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
 import { Text } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useTheme } from '../../hooks';
-import { getFlattenedColorValue } from '../../utils';
+import { useStyleProps } from '../../hooks';
+import { getFlattenedColorValue, resolveThemeValueWithFallback } from '../../utils';
 const Heading = ({ children, color, size = 'lg', truncated, underline, strikeThrough, textTransform, textAlign, textAlignVertical, textDecorationColor, textDecorationLine, textDecorationStyle, userSelect, inverted, ...props }) => {
+    // Extract margin utility props from remaining props
+    const { computedStyles: utilityStyles, remainingProps } = useStyleProps(props);
     styles.useVariants({
         size,
         underline,
         strikeThrough,
         inverted,
     });
-    const { color: themeColor, colorMode } = useTheme();
-    const colorValue = useMemo(() => getFlattenedColorValue(color, themeColor), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [color, colorMode]);
-    const decorationColor = useMemo(() => getFlattenedColorValue(textDecorationColor, themeColor), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [textDecorationColor, colorMode]);
-    return (_jsx(Text, { ...props, ...(truncated
+    return (_jsx(Text, { ...remainingProps, ...(truncated
             ? {
                 numberOfLines: 1,
                 ellipsizeMode: 'tail',
             }
             : {}), style: [
             styles.text,
+            utilityStyles,
             {
-                ...(colorValue ? { color: colorValue } : {}),
                 ...(textTransform ? { textTransform } : {}),
                 ...(textAlign ? { textAlign } : {}),
                 ...(textAlignVertical ? { textAlignVertical } : {}),
-                ...(decorationColor && { textDecorationColor: decorationColor }),
                 ...(textDecorationLine && { textDecorationLine }),
                 ...(textDecorationStyle && { textDecorationStyle }),
                 ...(userSelect && { userSelect }),
             },
+            styles.getColours(color, textDecorationColor),
             props.style,
         ], children: children }));
 };
@@ -115,6 +109,23 @@ const styles = StyleSheet.create(theme => ({
                         lg: theme.typography.desktop.heading.xl.lineHeight,
                     },
                 },
+                '2xl': {
+                    fontSize: {
+                        base: theme.typography.mobile.heading['2xl'].fontSize,
+                        md: theme.typography.tablet.heading['2xl'].fontSize,
+                        lg: theme.typography.desktop.heading['2xl'].fontSize,
+                    },
+                    fontWeight: {
+                        base: theme.typography.mobile.heading['2xl'].fontWeight,
+                        md: theme.typography.tablet.heading['2xl'].fontWeight,
+                        lg: theme.typography.desktop.heading['2xl'].fontWeight,
+                    },
+                    lineHeight: {
+                        base: theme.typography.mobile.heading['2xl'].lineHeight,
+                        md: theme.typography.tablet.heading['2xl'].lineHeight,
+                        lg: theme.typography.desktop.heading['2xl'].lineHeight,
+                    },
+                },
             },
             underline: {
                 true: {
@@ -133,5 +144,15 @@ const styles = StyleSheet.create(theme => ({
             },
         },
     },
+    getColours: (color, textDecorationColor) => ({
+        ...(color
+            ? {
+                color: resolveThemeValueWithFallback(color, theme.helpers.semanticColor.text, theme.color),
+            }
+            : {}),
+        ...(textDecorationColor
+            ? { textDecorationColor: getFlattenedColorValue(textDecorationColor, theme.color) }
+            : {}),
+    }),
 }));
 export default Heading;

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

@@ -1,20 +1,6 @@
-import type { Ref } from 'react';
-import type { Text, TextProps, TextStyle } from 'react-native';
-import type { ColorValue } from '../../types';
-interface HeadingProps extends TextProps {
-    size?: 'sm' | 'md' | 'lg' | 'xl';
-    strikeThrough?: boolean;
-    underline?: boolean;
-    truncated?: boolean;
-    color?: ColorValue;
-    textTransform?: TextStyle['textTransform'];
-    textAlign?: TextStyle['textAlign'];
-    textAlignVertical?: TextStyle['textAlignVertical'];
-    textDecorationLine?: TextStyle['textDecorationLine'];
-    textDecorationStyle?: TextStyle['textDecorationStyle'];
-    textDecorationColor?: ColorValue;
-    userSelect?: TextStyle['userSelect'];
-    inverted?: boolean;
-    ref?: Ref<Text>;
+import type { CommonTextProps } from '../../types';
+interface HeadingProps extends CommonTextProps {
+    /** Heading size variant. */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 }
 export default HeadingProps;

package/build/components/Modal/Modal.js

@@ -107,7 +107,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         showHandle: props.showHandle,
     });
     const footer = (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_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, !stickyFooter && !noButtons ? footer : 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, (!stickyFooter || inNavModal) && !noButtons ? footer : null] })) }));
     const renderFooter = useCallback((props) => (_jsx(BottomSheetFooter, { ...props, children: _jsx(View, { style: styles.footerWrap, children: footer }) })), [
         onPressPrimaryButton,
         primaryButtonText,

package/build/components/Radio/Radio.d.ts

@@ -10,7 +10,7 @@ declare const RadioIcon: import("react").ForwardRefExoticComponent<import("react
 }>;
 declare const RadioLabel: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("../Label/Label.props").default> & Omit<import("../Label/Label.props").default, "ref">>;
 declare const Radio: {
-    ({ children, label, disabled, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type, image, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, label, disabled, helperIcon, helperText, badge, invalidText, validText, validationStatus: validation, showValidationIcon, type, image, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 declare const RadioTile: {

package/build/components/Radio/Radio.js

@@ -25,12 +25,12 @@ RadioGroup.displayName = 'RadioGroup';
 RadioIndicator.displayName = 'RadioIndicator';
 RadioIcon.displayName = 'RadioIcon';
 RadioLabel.displayName = 'RadioLabel';
-const Radio = ({ children, label, disabled, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type = 'default', image, ...props }) => {
+const Radio = ({ children, label, disabled, helperIcon, helperText, badge, invalidText, validText, validationStatus: validation, showValidationIcon, type = 'default', image, ...props }) => {
     const { validationStatus: fieldValidationStatus } = useFormFieldContext();
     const { validationStatus: groupValidationStatus, type: groupType } = useRadioGroupContext();
     const validationStatus = fieldValidationStatus ?? groupValidationStatus ?? validation ?? 'initial';
     const radioType = groupType ?? type;
-    const radioChildren = children ? (children) : (_jsxs(_Fragment, { children: [_jsx(RadioIndicator, { children: _jsx(RadioIcon, {}) }), image ? image : null, _jsxs(RadioTextContent, { children: [!!label && _jsx(RadioLabel, { 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 }))] })] }));
+    const radioChildren = children ? (children) : (_jsxs(_Fragment, { children: [_jsx(RadioIndicator, { children: _jsx(RadioIcon, {}) }), image ? image : null, _jsxs(RadioTextContent, { children: [!!label && _jsx(RadioLabel, { children: label }), !!helperText && _jsx(Helper, { disabled: disabled, icon: helperIcon, text: helperText }), badge ? badge : null, 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 }))] })] }));
     return (_jsx(RadioComponent, { ...props, isDisabled: disabled, children: radioType === 'tile' ? _jsx(RadioTileRoot, { children: radioChildren }) : radioChildren }));
 };
 const RadioTile = ({ type = 'tile', ...props }) => _jsx(Radio, { ...props, type: type });

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

@@ -12,6 +12,7 @@ interface RadioWithChildrenProps extends RadioBaseProps {
     label?: never;
     helperText?: never;
     helperIcon?: never;
+    badge?: never;
     invalidText?: never;
     validText?: never;
     showValidationIcon?: never;
@@ -22,6 +23,7 @@ interface RadioWithoutChildrenProps extends RadioBaseProps {
     label?: string;
     helperText?: string;
     helperIcon?: ComponentType;
+    badge?: ReactNode;
     invalidText?: string;
     validText?: string;
     showValidationIcon?: boolean;