@utilitywarehouse/hearth-react-native 0.21.0 → 0.22.0

package/.turbo/turbo-build.log

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

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.21.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.22.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -58,15 +58,15 @@
 
 ✖ 25 problems (0 errors, 25 warnings)
 
-Rule                              | Time (ms) | Relative
-:---------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars |  1327.577 |    60.2%
-react-hooks/exhaustive-deps       |    77.842 |     3.5%
-no-global-assign                  |    77.325 |     3.5%
-react-hooks/rules-of-hooks        |    64.813 |     2.9%
-no-misleading-character-class     |    44.059 |     2.0%
-no-loss-of-precision              |    40.431 |     1.8%
-no-unexpected-multiline           |    40.191 |     1.8%
-@typescript-eslint/ban-ts-comment |    32.434 |     1.5%
-no-useless-escape                 |    27.764 |     1.3%
-no-fallthrough                    |    27.614 |     1.3%
+Rule                                              | Time (ms) | Relative
+:-------------------------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars                 |  1687.263 |    65.5%
+react-hooks/rules-of-hooks                        |    78.867 |     3.1%
+react-hooks/exhaustive-deps                       |    78.504 |     3.0%
+no-global-assign                                  |    75.145 |     2.9%
+no-unexpected-multiline                           |    55.153 |     2.1%
+no-loss-of-precision                              |    46.457 |     1.8%
+@typescript-eslint/ban-ts-comment                 |    45.439 |     1.8%
+no-misleading-character-class                     |    37.162 |     1.4%
+@typescript-eslint/triple-slash-reference         |    28.294 |     1.1%
+@typescript-eslint/no-unnecessary-type-constraint |    20.347 |     0.8%

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.22.0
+
+### Minor Changes
+
+- [#968](https://github.com/utilitywarehouse/hearth/pull/968) [`cee5811`](https://github.com/utilitywarehouse/hearth/commit/cee5811020af02fe754d8311ec8313c1793f108a) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `badge` support to Radio and Checkbox (including tiles).
+
+  **Components affected**:
+  - `Radio`
+  - `RadioTile`
+  - `Checkbox`
+  - `CheckboxTile`
+
+  **Developer changes**:
+  You can now pass a `badge` React node to render beneath helper text. No changes required unless you want to use the new prop.
+
+### Patch Changes
+
+- [#966](https://github.com/utilitywarehouse/hearth/pull/966) [`4e9f3f0`](https://github.com/utilitywarehouse/hearth/commit/4e9f3f0284e50da5ba4e49e132dac745a1a8a68d) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Allow Card layout props and remove forced alignment
+
+  Card now accepts flex layout and display props, and it no longer forces `alignItems: flex-start` on the root, so custom alignment works as expected.
+
+- [#969](https://github.com/utilitywarehouse/hearth/pull/969) [`c5c988b`](https://github.com/utilitywarehouse/hearth/commit/c5c988b65f1133b85b822037b086a524bc1255e3) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Render the Modal footer in navigation modals
+
 ## 0.21.0
 
 ### Minor Changes

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

@@ -1,17 +1,13 @@
-import { PressableProps, ViewStyle } from 'react-native';
-import { GapProps, MarginProps, SpacingValues } from '../../types';
-interface CardProps extends PressableProps, MarginProps, GapProps {
+import { PressableProps } from 'react-native';
+import { DisplayProps, FlexLayoutProps, GapProps, MarginProps, SpacingValues } from '../../types';
+interface CardProps extends PressableProps, MarginProps, GapProps, FlexLayoutProps, Omit<DisplayProps, 'direction'> {
     variant?: 'emphasis' | 'subtle';
     colorScheme?: 'neutralStrong' | 'neutralSubtle' | 'brand' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'pig';
     shadowColor?: 'functional' | 'brand' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'pig';
     noPadding?: boolean;
     disabled?: boolean;
     spacing?: SpacingValues;
-    /** @deprecated Use `spacing` instead. The `gap` prop will be removed in a future release. */
+    /** @deprecated Use `spacing` instead. The `space` prop will be removed in a future release. */
     space?: SpacingValues;
-    alignItems?: ViewStyle['alignItems'];
-    justifyContent?: ViewStyle['justifyContent'];
-    flexDirection?: ViewStyle['flexDirection'];
-    flexWrap?: ViewStyle['flexWrap'];
 }
 export default CardProps;

package/build/components/Card/CardRoot.js

@@ -70,7 +70,6 @@ Card.displayName = 'Card';
 const styles = StyleSheet.create(theme => ({
     card: {
         overflow: 'hidden',
-        alignItems: 'flex-start',
         borderRadius: theme.components.card.borderRadius,
         variants: {
             spacing: theme.globalStyle.variants.spacing,

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

@@ -10,7 +10,7 @@ declare const CheckboxIcon: import("react").ForwardRefExoticComponent<import("re
 }>;
 declare const CheckboxLabel: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("../Label/Label.props").default> & Omit<import("../Label/Label.props").default, "ref">>;
 declare const Checkbox: {
-    ({ children, label, disabled, checked, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type, image, value, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, label, disabled, checked, helperIcon, helperText, badge, invalidText, validText, validationStatus: validation, showValidationIcon, type, image, value, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 declare const CheckboxTile: {

package/build/components/Checkbox/Checkbox.js

@@ -25,12 +25,12 @@ CheckboxGroup.displayName = 'CheckboxGroup';
 CheckboxIndicator.displayName = 'CheckboxIndicator';
 CheckboxIcon.displayName = 'CheckboxIcon';
 CheckboxLabel.displayName = 'CheckboxLabel';
-const Checkbox = ({ children, label, disabled, checked, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type = 'default', image, value, ...props }) => {
+const Checkbox = ({ children, label, disabled, checked, helperIcon, helperText, badge, invalidText, validText, validationStatus: validation, showValidationIcon, type = 'default', image, value, ...props }) => {
     const { validationStatus: fieldValidationStatus } = useFormFieldContext();
     const { validationStatus: groupValidationStatus, type: groupType } = useCheckboxGroupContext();
     const validationStatus = fieldValidationStatus ?? groupValidationStatus ?? validation ?? 'initial';
     const checkboxType = groupType ?? type;
-    const checkboxChildren = children ? (children) : (_jsxs(_Fragment, { children: [_jsx(CheckboxIndicator, { children: _jsx(CheckboxIcon, {}) }), image ? image : null, _jsxs(CheckboxTextContent, { children: [!!label && _jsx(CheckboxLabel, { 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 checkboxChildren = children ? (children) : (_jsxs(_Fragment, { children: [_jsx(CheckboxIndicator, { children: _jsx(CheckboxIcon, {}) }), image ? image : null, _jsxs(CheckboxTextContent, { children: [!!label && _jsx(CheckboxLabel, { 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(CheckboxComponent, { ...props, value: (value ?? '').toString(), isDisabled: disabled, isChecked: checked, children: checkboxType === 'tile' ? (_jsx(CheckboxTileRoot, { children: checkboxChildren })) : (checkboxChildren) }));
 };
 const CheckboxTile = ({ type = 'tile', ...props }) => {

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

@@ -17,6 +17,7 @@ type CheckboxWithChildrenProps = {
     label?: never;
     helperText?: never;
     helperIcon?: never;
+    badge?: never;
     invalidText?: never;
     validText?: never;
     showValidationIcon?: never;
@@ -27,6 +28,7 @@ type CheckboxWithoutChildrenProps = {
     label?: string;
     helperText?: string;
     helperIcon?: ComponentType;
+    badge?: ReactNode;
     invalidText?: string;
     validText?: string;
     showValidationIcon?: boolean;

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;

package/docs/components/NextPrevPage.tsx

@@ -32,7 +32,7 @@ const NextPrevPage: React.FC<NextPrevPageProps> = ({
     <div className="sb-unstyled">
       <View style={styles.container}>
         {!!prevLink && (
-          <Card gap="100">
+          <Card gap="100" alignItems="flex-start">
             {!!prevTitle && <Heading size="sm">{prevTitle}</Heading>}
             <CardPressHandler>
               <Link
@@ -47,7 +47,7 @@ const NextPrevPage: React.FC<NextPrevPageProps> = ({
         )}
         <div />
         {!!nextLink && (
-          <Card gap="100">
+          <Card gap="100" alignItems="flex-start">
             {!!nextTitle && <Heading size="sm">{nextTitle}</Heading>}
             <CardPressHandler>
               <Link onPress={() => openLink(nextLink)}>Next Page</Link>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -42,13 +42,13 @@
     "react": "^19.1.0",
     "react-native": "0.80.0",
     "react-native-edge-to-edge": "1.6.1",
-    "react-native-gesture-handler": "2.26.0",
+    "react-native-gesture-handler": "2.28.0",
     "react-native-nitro-modules": "^0.31.4",
     "react-native-reanimated": "4.1.3",
     "react-native-svg": "^15.12.1",
     "react-native-unistyles": "3.0.17",
     "react-native-web": "^0.20.0",
-    "react-native-worklets": "^0.6.1",
+    "react-native-worklets": "^0.5.1",
     "remark-gfm": "^4.0.1",
     "storybook": "^10.2.1",
     "typescript": "^5.7.3",
@@ -66,7 +66,7 @@
     "@utilitywarehouse/hearth-react-native-icons": "0.8.0",
     "react": ">=17 || ^18.0.0 || ^19.0.0",
     "react-native": ">=0.77",
-    "react-native-gesture-handler": "^2.22.0",
+    "react-native-gesture-handler": ">=2.0.0",
     "react-native-reanimated": "3.x || ^4.x",
     "react-native-svg": ">=13.4.0",
     "react-native-unistyles": ">=3.0.0",

package/src/components/Card/Card.props.ts

@@ -1,7 +1,8 @@
-import { PressableProps, ViewStyle } from 'react-native';
-import { GapProps, MarginProps, SpacingValues } from '../../types';
+import { PressableProps } from 'react-native';
+import { DisplayProps, FlexLayoutProps, GapProps, MarginProps, SpacingValues } from '../../types';
 
-interface CardProps extends PressableProps, MarginProps, GapProps {
+interface CardProps
+  extends PressableProps, MarginProps, GapProps, FlexLayoutProps, Omit<DisplayProps, 'direction'> {
   variant?: 'emphasis' | 'subtle';
   colorScheme?:
     | 'neutralStrong'
@@ -25,12 +26,8 @@ interface CardProps extends PressableProps, MarginProps, GapProps {
   noPadding?: boolean;
   disabled?: boolean;
   spacing?: SpacingValues;
-  /** @deprecated Use `spacing` instead. The `gap` prop will be removed in a future release. */
+  /** @deprecated Use `spacing` instead. The `space` prop will be removed in a future release. */
   space?: SpacingValues;
-  alignItems?: ViewStyle['alignItems'];
-  justifyContent?: ViewStyle['justifyContent'];
-  flexDirection?: ViewStyle['flexDirection'];
-  flexWrap?: ViewStyle['flexWrap'];
 }
 
 export default CardProps;

package/src/components/Card/CardRoot.tsx

@@ -123,7 +123,6 @@ Card.displayName = 'Card';
 const styles = StyleSheet.create(theme => ({
   card: {
     overflow: 'hidden',
-    alignItems: 'flex-start',
     borderRadius: theme.components.card.borderRadius,
     variants: {
       spacing: theme.globalStyle.variants.spacing,

package/src/components/Checkbox/Checkbox.docs.mdx

@@ -87,6 +87,7 @@ const MyComponent = () => {
 | `label`              | `string`                            | -           | The label to be displayed next to the checkbox.                                                                      |
 | `helperText`         | `string`                            | -           | The helper text to be displayed below the checkbox.                                                                  |
 | `helperIcon`         | `React.ComponentType`               | -           | The icon to be displayed next to the helper text.                                                                    |
+| `badge`              | `ReactNode`                         | -           | The badge to be displayed below the helper text.                                                                     |
 | `invalidText`        | `string`                            | -           | The invalid text to be displayed below the checkbox.                                                                 |
 | `validText`          | `string`                            | -           | The valid text to be displayed below the checkbox.                                                                   |
 | `showValidationIcon` | `boolean`                           | `true`      | Whether to show the validation icon.                                                                                 |

package/src/components/Checkbox/Checkbox.props.ts

@@ -23,6 +23,7 @@ type CheckboxWithChildrenProps = {
   label?: never;
   helperText?: never;
   helperIcon?: never;
+  badge?: never;
   invalidText?: never;
   validText?: never;
   showValidationIcon?: never;
@@ -34,6 +35,7 @@ type CheckboxWithoutChildrenProps = {
   label?: string;
   helperText?: string;
   helperIcon?: ComponentType;
+  badge?: ReactNode;
   invalidText?: string;
   validText?: string;
   showValidationIcon?: boolean;

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -5,6 +5,7 @@ import { Checkbox, CheckboxGroup, CheckboxImage } from '.';
 import bankLogo from '../../../docs/assets/bank-logo.png';
 import bankLogo1 from '../../../docs/assets/bank-logo1.png';
 import { VariantTitle } from '../../../docs/components';
+import { Badge } from '../Badge';
 
 const meta = {
   title: 'Stories / Checkbox',
@@ -133,6 +134,31 @@ export const WithImage: Story = {
   ),
 };
 
+export const WithBadge: Story = {
+  args: {
+    label: 'Label',
+    helperText: 'Helper text',
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render: ({ checked: checkedArg = false, onChange, ...args }) => {
+    const [checked, setChecked] = React.useState(checkedArg);
+    useEffect(() => {
+      setChecked(checkedArg);
+    }, [checkedArg]);
+    return (
+      <Checkbox
+        onChange={val => {
+          console.log('-----');
+          setChecked(val);
+        }}
+        badge={<Badge>New</Badge>}
+        {...args}
+        checked={checked}
+      />
+    );
+  },
+};
+
 export const Variants: Story = {
   render: () => {
     const [values, setValues] = React.useState(['Label 1']);

package/src/components/Checkbox/Checkbox.tsx

@@ -36,6 +36,7 @@ const Checkbox = ({
   checked,
   helperIcon,
   helperText,
+  badge,
   invalidText,
   validText,
   validationStatus: validation,
@@ -61,6 +62,7 @@ const Checkbox = ({
       <CheckboxTextContent>
         {!!label && <CheckboxLabel>{label}</CheckboxLabel>}
         {!!helperText && <Helper disabled={disabled} icon={helperIcon} text={helperText} />}
+        {badge ? badge : null}
         {validationStatus === 'invalid' && !!invalidText && (
           <Helper
             showIcon={showValidationIcon}

package/src/components/Modal/Modal.tsx

@@ -254,7 +254,7 @@ const Modal = ({
             </View>
           ) : null}
           {children}
-          {!stickyFooter && !noButtons ? footer : null}
+          {(!stickyFooter || inNavModal) && !noButtons ? footer : null}
         </View>
       )}
     </>

package/src/components/Radio/Radio.docs.mdx

@@ -100,6 +100,7 @@ const MyComponent = () => {
 | `label`              | `string`                            | -           | The label to be displayed next to the radio.                                                         |
 | `helperText`         | `string`                            | -           | The helper text to be displayed below the radio.                                                     |
 | `helperIcon`         | `React.ComponentType`               | -           | The icon to be displayed next to the helper text.                                                    |
+| `badge`              | `ReactNode`                         | -           | The badge to be displayed below the helper text.                                                     |
 | `invalidText`        | `string`                            | -           | The invalid text to be displayed below the radio.                                                    |
 | `validText`          | `string`                            | -           | The valid text to be displayed below the radio.                                                      |
 | `showValidationIcon` | `boolean`                           | `true`      | Whether to show the validation icon.                                                                 |

package/src/components/Radio/Radio.props.ts

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

package/src/components/Radio/Radio.stories.tsx

@@ -5,6 +5,7 @@ import { Radio, RadioGroup, RadioImage } from '.';
 import bankLogo from '../../../docs/assets/bank-logo.png';
 import bankLogo1 from '../../../docs/assets/bank-logo1.png';
 import { VariantTitle } from '../../../docs/components';
+import { Badge } from '../Badge';
 import { Flex } from '../Flex';
 import { FormField } from '../FormField';
 
@@ -136,6 +137,27 @@ export const WithImage: Story = {
   ),
 };
 
+export const WithBadge: Story = {
+  args: {
+    value: 'Option 1',
+    label: 'Label',
+    helperText: 'Helper text',
+  },
+  render: args => (
+    <RadioGroup>
+      <Radio
+        aria-label="Label 1"
+        onChange={(checked: boolean) => {
+          console.log(checked, '###');
+        }}
+        nativeID="Radio-1"
+        badge={<Badge>New</Badge>}
+        {...args}
+      />
+    </RadioGroup>
+  ),
+};
+
 export const Variants: Story = {
   parameters: {
     controls: { exclude: ['value', 'label', 'disabled'] },

package/src/components/Radio/Radio.tsx

@@ -36,6 +36,7 @@ const Radio = ({
   disabled,
   helperIcon,
   helperText,
+  badge,
   invalidText,
   validText,
   validationStatus: validation,
@@ -60,6 +61,7 @@ const Radio = ({
       <RadioTextContent>
         {!!label && <RadioLabel>{label}</RadioLabel>}
         {!!helperText && <Helper disabled={disabled} icon={helperIcon} text={helperText} />}
+        {badge ? badge : null}
         {validationStatus === 'invalid' && !!invalidText && (
           <Helper
             showIcon={showValidationIcon}

package/src/components/Radio/RadioTile.figma.tsx

@@ -9,6 +9,9 @@ figma.connect(
       helperText: figma.boolean('Helper text?', {
         true: figma.string('Helper text'),
       }),
+      badge: figma.boolean('Badge?', {
+        true: figma.children('Badge'),
+      }),
       label: figma.string('Label'),
       image: figma.boolean('Image?', {
         true: figma.instance('Radio Image'),
@@ -24,6 +27,7 @@ figma.connect(
       <RadioTile
         label={props.label}
         helperText={props.helperText}
+        badge={props.badge}
         image={props.image}
         checked={props.checked}
         disabled={props.indicator.disabled}