@jobber/components-native 0.56.2 → 0.57.0

package/dist/types/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.d.ts

@@ -8,6 +8,6 @@ export interface BottomSheetOptionProps {
     readonly textAlign?: TextAlign;
     readonly destructive?: boolean;
     readonly textTransform?: "none" | "capitalize";
-    onPress: () => void;
+    readonly onPress: () => void;
 }
 export declare function BottomSheetOption({ text, icon, iconColor, textAlign, destructive, textTransform, onPress, }: BottomSheetOptionProps): JSX.Element;

package/dist/types/src/ButtonGroup/components/SecondaryActionSheet/SecondaryActionSheet.d.ts

@@ -2,12 +2,12 @@ import { RefObject } from "react";
 import { ButtonGroupSecondaryActionProps } from "../../types";
 import { BottomSheetRef } from "../../../BottomSheet/BottomSheet";
 interface SecondaryActionSheetProps {
-    actions: ButtonGroupSecondaryActionProps[];
-    secondaryActionsRef: RefObject<BottomSheetRef>;
-    showCancel?: boolean;
-    heading?: string;
-    onOpenBottomSheet?: () => void;
-    onCloseBottomSheet?: () => void;
+    readonly actions: ButtonGroupSecondaryActionProps[];
+    readonly secondaryActionsRef: RefObject<BottomSheetRef>;
+    readonly showCancel?: boolean;
+    readonly heading?: string;
+    readonly onOpenBottomSheet?: () => void;
+    readonly onCloseBottomSheet?: () => void;
 }
 export declare function SecondaryActionSheet({ actions, secondaryActionsRef, heading, showCancel, onOpenBottomSheet, onCloseBottomSheet, }: SecondaryActionSheetProps): JSX.Element;
 export {};

package/dist/types/src/Checkbox/CheckboxGroup.d.ts

@@ -6,8 +6,8 @@ interface CommonCheckboxGroupProps extends Omit<CheckboxProps, "onChange"> {
     /**
      * Checkbox items
      */
-    children: CheckboxElement[];
-    state?: CheckboxGroupState;
+    readonly children: CheckboxElement[];
+    readonly state?: CheckboxGroupState;
     onChange?(groupChecks: CheckboxGroupState): void;
 }
 interface ControlledCheckboxGroupProps extends CommonCheckboxGroupProps {

package/dist/types/src/Form/components/FormBody/FormBody.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { FormActionBarProps } from "../FormActionBar";
 interface FormBodyProps extends FormActionBarProps {
-    children: JSX.Element;
-    shouldRenderActionBar?: boolean;
-    saveButtonOffset?: number;
+    readonly children: JSX.Element;
+    readonly shouldRenderActionBar?: boolean;
+    readonly saveButtonOffset?: number;
 }
 export declare function FormBody({ isFormSubmitting, submit, keyboardHeight, children, saveButtonLabel, renderStickySection, shouldRenderActionBar, secondaryActions, setSecondaryActionLoading, setSaveButtonHeight, saveButtonOffset, }: FormBodyProps): JSX.Element;
 export declare function useBottomPadding(): number;

package/dist/types/src/Form/components/FormCache/FormCache.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { FieldValues } from "react-hook-form";
 interface FormCacheProps<T extends FieldValues> {
-    localCacheId?: string | string[];
-    localCacheKey?: string;
-    localCacheExclude?: string[];
-    setLocalCache: (data: T) => void;
+    readonly localCacheId?: string | string[];
+    readonly localCacheKey?: string;
+    readonly localCacheExclude?: string[];
+    readonly setLocalCache: (data: T) => void;
 }
 export declare function FormCache<T extends FieldValues>({ localCacheExclude, localCacheKey, setLocalCache, }: FormCacheProps<T>): JSX.Element;
 export {};

package/dist/types/src/Form/components/FormMessageBanner/FormMessageBanner.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { FormBannerMessage } from "../../types";
 interface FormMessageBannerProps {
-    bannerMessages?: FormBannerMessage[];
+    readonly bannerMessages?: FormBannerMessage[];
 }
 export declare function FormMessageBanner({ bannerMessages, }: FormMessageBannerProps): JSX.Element;
 export {};

package/dist/types/src/FormField/FormField.d.ts

@@ -4,7 +4,7 @@ interface FormFieldProps<T> {
     /**
      * Name of the field.
      */
-    name: string;
+    readonly name: string;
     /**
      * The initial value of the form field.
      */
@@ -12,7 +12,7 @@ interface FormFieldProps<T> {
     /**
      * Children to render.
      */
-    children: (field: ControllerRenderProps<FieldValues, string>, error?: FieldError) => React.ReactNode;
+    readonly children: (field: ControllerRenderProps<FieldValues, string>, error?: FieldError) => React.ReactNode;
     /**
      * Rules for returning an error when validations are violated.
      * WARNING: This component needs to be nested inside a FormProvider

package/dist/types/src/FormatFile/FormatFile.d.ts

@@ -5,7 +5,7 @@ export interface FormatFileProps<T> {
     /**
      * File upload details object. Can be a File or a FileUpload
      */
-    file: T;
+    readonly file: T;
     /**
      * Accessibility label
      */
@@ -17,23 +17,23 @@ export interface FormatFileProps<T> {
     /**
      * A function which handles the onTap event.
      */
-    onTap?: (file: T) => void;
+    readonly onTap?: (file: T) => void;
     /**
      * A function to be called on "Remove" Bottom Sheet Option press
      */
-    onRemove?: () => void;
+    readonly onRemove?: () => void;
     /**
      * Handler for the "Preview" Bottom Sheet Option press
      */
-    onPreviewPress?: (formattedFile: FormattedFile) => void;
+    readonly onPreviewPress?: (formattedFile: FormattedFile) => void;
     /**
      * A file type to show at Bottom Sheet options
      */
-    bottomSheetOptionsSuffix?: BottomSheetOptionsSuffix;
+    readonly bottomSheetOptionsSuffix?: BottomSheetOptionsSuffix;
     /**
      * Uses a grid layout when multi-file upload is supported
      */
-    styleInGrid?: boolean;
+    readonly styleInGrid?: boolean;
     /**
      * A reference to the element in the rendered output
      */

package/dist/types/src/FormatFile/components/FileView/FileView.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import { FormattedFile } from "../../types";
 interface FileViewProps {
-    accessibilityLabel?: string;
-    showOverlay: boolean;
-    showError: boolean;
-    file: FormattedFile;
-    styleInGrid: boolean;
-    onUploadComplete: () => void;
+    readonly accessibilityLabel?: string;
+    readonly showOverlay: boolean;
+    readonly showError: boolean;
+    readonly file: FormattedFile;
+    readonly styleInGrid: boolean;
+    readonly onUploadComplete: () => void;
 }
 export declare function FileView({ accessibilityLabel, styleInGrid, file, showOverlay, showError, onUploadComplete, }: FileViewProps): JSX.Element;
 export {};

package/dist/types/src/FormatFile/components/FormatFileBottomSheet/FormatFileBottomSheet.d.ts

@@ -2,10 +2,10 @@ import { RefObject } from "react";
 import { BottomSheetRef } from "../../../BottomSheet/BottomSheet";
 export type BottomSheetOptionsSuffix = "receipt" | "image" | "file" | "video";
 interface FormatFileBottomSheetProps {
-    bottomSheetRef: RefObject<BottomSheetRef>;
-    onPreviewPress?: () => void;
-    onRemovePress?: () => void;
-    bottomSheetOptionsSuffix?: BottomSheetOptionsSuffix;
+    readonly bottomSheetRef: RefObject<BottomSheetRef>;
+    readonly onPreviewPress?: () => void;
+    readonly onRemovePress?: () => void;
+    readonly bottomSheetOptionsSuffix?: BottomSheetOptionsSuffix;
 }
 export declare const FormatFileBottomSheet: ({ bottomSheetRef, onPreviewPress, onRemovePress, bottomSheetOptionsSuffix, }: FormatFileBottomSheetProps) => JSX.Element;
 export {};

package/dist/types/src/FormatFile/components/MediaView/MediaView.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import { FormattedFile } from "../../types";
 interface MediaViewProps {
-    accessibilityLabel?: string;
-    showOverlay: boolean;
-    showError: boolean;
-    file: FormattedFile;
-    styleInGrid: boolean;
-    onUploadComplete: () => void;
+    readonly accessibilityLabel?: string;
+    readonly showOverlay: boolean;
+    readonly showError: boolean;
+    readonly file: FormattedFile;
+    readonly styleInGrid: boolean;
+    readonly onUploadComplete: () => void;
 }
 export declare function MediaView({ accessibilityLabel, showOverlay, showError, file, styleInGrid, onUploadComplete, }: MediaViewProps): JSX.Element;
 export {};

package/dist/types/src/FormatFile/components/ProgressBar/ProgressBar.d.ts

@@ -5,15 +5,15 @@ interface ProgressBarProps {
     /**
      * Upload progress value from 0 to 1
      */
-    progress: number;
+    readonly progress: number;
     /**
      * Upload status
      */
-    status: StatusCode;
+    readonly status: StatusCode;
     /**
      * Function to be called when the progress is finished
      */
-    onComplete?: () => void;
+    readonly onComplete?: () => void;
 }
 export declare const ProgressBar: ({ progress, status, onComplete, }: ProgressBarProps) => JSX.Element;
 export {};

package/dist/types/src/InputCurrency/InputCurrency.d.ts

@@ -24,9 +24,9 @@ export interface InputCurrencyProps extends Omit<InputTextProps, "keyboard" | "o
      */
     readonly maxLength?: number;
     onChange?(newValue?: number | string | undefined): void;
-    value?: number;
-    defaultValue?: number;
-    keyboard?: "decimal-pad" | "numbers-and-punctuation";
+    readonly value?: number;
+    readonly defaultValue?: number;
+    readonly keyboard?: "decimal-pad" | "numbers-and-punctuation";
 }
 export declare const getInternalValue: (props: InputCurrencyProps, field: ControllerRenderProps<FieldValues, string>, formatNumber: (value: number, opts?: FormatNumberOptions | undefined) => string) => string;
 export declare function InputCurrency(props: InputCurrencyProps): JSX.Element;

package/dist/types/src/InputFieldWrapper/components/Prefix/Prefix.d.ts

@@ -2,22 +2,22 @@
 import { StyleProp, TextStyle, ViewStyle } from "react-native";
 import { IconNames } from "@jobber/design";
 export interface PrefixLabelProps {
-    focused: boolean;
-    disabled?: boolean;
-    hasMiniLabel: boolean;
-    inputInvalid: boolean;
-    label: string;
-    styleOverride?: StyleProp<TextStyle>;
+    readonly focused: boolean;
+    readonly disabled?: boolean;
+    readonly hasMiniLabel: boolean;
+    readonly inputInvalid: boolean;
+    readonly label: string;
+    readonly styleOverride?: StyleProp<TextStyle>;
 }
 export declare const prefixLabelTestId = "ATL-InputFieldWrapper-PrefixLabel";
 export declare const prefixIconTestId = "ATL-InputFieldWrapper-PrefixIcon";
 export declare function PrefixLabel({ focused, disabled, hasMiniLabel, inputInvalid, label, styleOverride, }: PrefixLabelProps): JSX.Element;
 export interface PrefixIconProps {
-    focused: boolean;
-    disabled?: boolean;
-    hasMiniLabel: boolean;
-    inputInvalid?: boolean;
-    icon: IconNames;
-    styleOverride?: StyleProp<ViewStyle>;
+    readonly focused: boolean;
+    readonly disabled?: boolean;
+    readonly hasMiniLabel: boolean;
+    readonly inputInvalid?: boolean;
+    readonly icon: IconNames;
+    readonly styleOverride?: StyleProp<ViewStyle>;
 }
 export declare function PrefixIcon({ focused, disabled, inputInvalid, icon, }: PrefixIconProps): JSX.Element;

package/dist/types/src/InputFieldWrapper/components/Suffix/Suffix.d.ts

@@ -2,24 +2,24 @@
 import { StyleProp, TextStyle } from "react-native";
 import { IconNames } from "@jobber/design";
 export interface SuffixLabelProps {
-    focused: boolean;
-    disabled?: boolean;
-    hasMiniLabel: boolean;
-    inputInvalid?: boolean;
-    label: string;
-    hasLeftMargin?: boolean;
-    styleOverride?: StyleProp<TextStyle>;
+    readonly focused: boolean;
+    readonly disabled?: boolean;
+    readonly hasMiniLabel: boolean;
+    readonly inputInvalid?: boolean;
+    readonly label: string;
+    readonly hasLeftMargin?: boolean;
+    readonly styleOverride?: StyleProp<TextStyle>;
 }
 export declare const suffixLabelTestId = "ATL-InputFieldWrapper-SuffixLabel";
 export declare const suffixIconTestId = "ATL-InputFieldWrapper-SuffixIcon";
 export declare function SuffixLabel({ focused, disabled, hasMiniLabel, inputInvalid, label, hasLeftMargin, styleOverride, }: SuffixLabelProps): JSX.Element;
 export interface SuffixIconProps {
-    focused: boolean;
-    disabled?: boolean;
-    hasMiniLabel: boolean;
-    inputInvalid?: boolean;
-    icon: IconNames;
-    hasLeftMargin?: boolean;
-    onPress?: () => void;
+    readonly focused: boolean;
+    readonly disabled?: boolean;
+    readonly hasMiniLabel: boolean;
+    readonly inputInvalid?: boolean;
+    readonly icon: IconNames;
+    readonly hasLeftMargin?: boolean;
+    readonly onPress?: () => void;
 }
 export declare function SuffixIcon({ focused, disabled, inputInvalid, icon, hasLeftMargin, onPress, }: SuffixIconProps): JSX.Element;

package/dist/types/src/InputPassword/InputPassword.d.ts

@@ -7,5 +7,5 @@ export interface InputPasswordProps extends Omit<InputTextProps, "keyboard" | "s
      *
      * @default true
      */
-    usePrivacyEye?: boolean;
+    readonly usePrivacyEye?: boolean;
 }

package/dist/types/src/InputText/context/InputAccessoriesProvider.d.ts

@@ -1,4 +1,4 @@
 import { ReactNode } from "react";
 export declare function InputAccessoriesProvider({ children, }: {
-    children: ReactNode;
+    readonly children: ReactNode;
 }): JSX.Element;

package/dist/types/src/Toast/Toast.d.ts

@@ -6,7 +6,7 @@ export interface JobberToastProps {
      * Has effect only when the position is "bottom".
      * @default 40
      */
-    bottomOffset?: number;
+    readonly bottomOffset?: number;
 }
 export declare function JobberToast({ bottomOffset }: JobberToastProps): JSX.Element;
 export interface ShowToastParams {

package/dist/types/src/utils/test/MockSafeAreaProvider.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
 import { EdgeInsets, Rect } from "react-native-safe-area-context";
 interface MockSafeAreaProviderProps {
-    children: React.ReactNode;
-    frame?: Rect;
-    insets?: EdgeInsets;
+    readonly children: React.ReactNode;
+    readonly frame?: Rect;
+    readonly insets?: EdgeInsets;
 }
 export declare function MockSafeAreaProvider({ frame, insets, children, }: MockSafeAreaProviderProps): JSX.Element;
 export {};

package/jestSetup.js

@@ -2,6 +2,7 @@ import React from "react";
 
 jest.mock("./dist/src/hooks", () => {
   const actualHooks = jest.requireActual("./dist/src/hooks");
+
   return { ...actualHooks, useIsScreenReaderEnabled: () => false };
 });
 
@@ -18,6 +19,7 @@ jest.mock("./dist/src/Button/components/InternalButtonLoading", () => {
 jest.mock("react-native-reanimated", () => {
   const reanimated = require("react-native-reanimated/mock");
   const timing = () => ({ start: () => undefined });
+
   return {
     ...reanimated,
     default: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.56.2",
+  "version": "0.57.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -36,8 +36,8 @@
     "build:clean": "rm -rf ./dist"
   },
   "dependencies": {
-    "@jobber/design": "^0.55.0",
-    "@jobber/hooks": "^2.9.0",
+    "@jobber/design": "^0.55.1",
+    "@jobber/hooks": "^2.9.1",
     "@react-native-clipboard/clipboard": "^1.11.2",
     "@react-native-picker/picker": "^2.4.10",
     "autolinker": "^4.0.0",
@@ -84,5 +84,5 @@
     "react-native-reanimated": "^2.17.0",
     "react-native-safe-area-context": "^4.5.2"
   },
-  "gitHead": "aa6fdf546cd601c5f13ca9c88c4b47ce3eae9b13"
+  "gitHead": "0efee497cd920eccd458d96cbb17e9cc67e3cc6b"
 }

package/src/ActionItem/ActionItem.tsx

@@ -116,6 +116,7 @@ function getActionIconColour(
   if (actionIconColour === "subtle") {
     return "interactiveSubtle";
   }
+
   return actionIconColour;
 }
 
@@ -127,5 +128,6 @@ function getActionIcon(icon: ActionIconNames): IconNames {
   } else if (icon === "editpencil") {
     return "edit";
   }
+
   return icon;
 }

package/src/ActionItem/ActionItemGroup.tsx

@@ -29,6 +29,7 @@ function renderChildren(children: ActionItemElement | ActionItemElement[]) {
 
   return childArray.map((child, index) => {
     const isSubsequentChild = index !== 0;
+
     return (
       <View key={index}>
         {isSubsequentChild && (

package/src/AutoLink/hooks/useCreateLinkedText.ts

@@ -21,6 +21,7 @@ export function useCreateLinkedText({
 
       const token = generateToken();
       matches[token] = match;
+
       return token;
     },
   });

package/src/AutoLink/hooks/useTokenGenerator.ts

@@ -4,6 +4,7 @@ import { v1 } from "react-native-uuid";
 export function useTokenGenerator(): [() => string, RegExp] {
   let counter = 0;
   const [identifier] = useState(v1());
+
   return [
     () => `@__ELEMENT-${identifier}-${counter++}__@`,
     new RegExp(`(@__ELEMENT-${identifier}-\\d+__@)`, "g"),

package/src/BottomSheet/BottomSheet.tsx

@@ -101,7 +101,7 @@ function BottomSheetInternal(
   }
 }
 
-function Header({ heading }: { heading: string }) {
+function Header({ heading }: { readonly heading: string }) {
   return (
     <View style={styles.header}>
       <Heading level={"subtitle"}>{heading}</Heading>
@@ -113,8 +113,8 @@ function Footer({
   cancellable,
   onCancel,
 }: {
-  cancellable: boolean;
-  onCancel: () => void;
+  readonly cancellable: boolean;
+  readonly onCancel: () => void;
 }) {
   const insets = useSafeAreaInsets();
   const { t } = useAtlantisI18n();

package/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.tsx

@@ -14,8 +14,9 @@ export interface BottomSheetOptionProps {
   readonly textAlign?: TextAlign;
   readonly destructive?: boolean;
   readonly textTransform?: "none" | "capitalize";
-  onPress: () => void;
+  readonly onPress: () => void;
 }
+
 export function BottomSheetOption({
   text,
   icon,
@@ -27,6 +28,7 @@ export function BottomSheetOption({
 }: BottomSheetOptionProps): JSX.Element {
   const destructiveColor = "critical";
   const textVariation = destructive ? destructiveColor : "subdued";
+
   return (
     <TouchableOpacity
       style={styles.bottomSheetOption}

package/src/Button/Button.style.ts

@@ -79,8 +79,8 @@ export const styles = StyleSheet.create({
   },
 
   learning: {
-    backgroundColor: tokens["color-informative"],
-    borderColor: tokens["color-informative"],
+    backgroundColor: tokens["color-interactive--subtle"],
+    borderColor: tokens["color-interactive--subtle"],
   },
 
   destructive: {

package/src/Button/Button.test.tsx

@@ -78,7 +78,7 @@ describe("Button", () => {
       },
     ],
     ["destructive", { bgColor: tokens["color-destructive"] }],
-    ["learning", { bgColor: tokens["color-informative"] }],
+    ["learning", { bgColor: tokens["color-interactive--subtle"] }],
   ])("renders a %s Button", (variation, { bgColor, borderColor }) => {
     const { buttonStyle } = renderButton(
       <Button label={variation} variation={variation} onPress={jest.fn()} />,
@@ -218,7 +218,7 @@ describe("Button", () => {
         variation: "learning",
         type: "secondary",
       });
-      expect(iconColor).toBe(tokens["color-informative"]);
+      expect(iconColor).toBe(tokens["color-interactive--subtle"]);
       expect(textColor).toBe(iconColor);
     });
 

package/src/Button/Button.tsx

@@ -179,7 +179,7 @@ function getActionLabelVariation(
 
   switch (variation) {
     case "learning":
-      return "learning";
+      return "subtle";
     case "destructive":
       return "destructive";
     case "cancel":
@@ -204,7 +204,7 @@ function getIconColorVariation(
 
   switch (variation) {
     case "learning":
-      return "informative";
+      return "interactiveSubtle";
     case "destructive":
       return "destructive";
     case "cancel":

package/src/Button/components/InternalButtonLoading/InternalButtonLoading.tsx

@@ -71,6 +71,7 @@ function getLoadingPattern({
 }: InternalButtonLoadingProps): string {
   if (variation === "cancel") return darkPattern;
   if (type === "primary") return lightPattern;
+
   return darkPattern;
 }
 

package/src/ButtonGroup/components/SecondaryActionSheet/SecondaryActionSheet.tsx

@@ -6,12 +6,12 @@ import { BottomSheetOption } from "../../../BottomSheet/components/BottomSheetOp
 import { BottomSheet, BottomSheetRef } from "../../../BottomSheet/BottomSheet";
 
 interface SecondaryActionSheetProps {
-  actions: ButtonGroupSecondaryActionProps[];
-  secondaryActionsRef: RefObject<BottomSheetRef>;
-  showCancel?: boolean;
-  heading?: string;
-  onOpenBottomSheet?: () => void;
-  onCloseBottomSheet?: () => void;
+  readonly actions: ButtonGroupSecondaryActionProps[];
+  readonly secondaryActionsRef: RefObject<BottomSheetRef>;
+  readonly showCancel?: boolean;
+  readonly heading?: string;
+  readonly onOpenBottomSheet?: () => void;
+  readonly onCloseBottomSheet?: () => void;
 }
 
 export function SecondaryActionSheet({
@@ -34,6 +34,7 @@ export function SecondaryActionSheet({
         <View>
           {actions.map((action, index) => {
             const { label, onPress, icon, iconColor, destructive } = action;
+
             return (
               <BottomSheetOption
                 destructive={destructive}

package/src/Card/Card.tsx

@@ -65,6 +65,7 @@ function getElevationStyle(elevation: elevationProp) {
   if (elevation === "none") {
     return undefined;
   }
+
   return styles[`${elevation}Elevation`];
 }
 
@@ -85,39 +86,37 @@ export function Card({
         testID={testID}
       >
         {header && (
-          <>
-            <InternalCardHeader
-              onPress={header.onPress}
-              testID={`${testID}Header`}
-              collapsable={!!children}
-            >
-              <View style={styles.headerTitle}>
-                <Typography
-                  color="heading"
-                  fontFamily="base"
-                  fontWeight="bold"
-                  size="default"
-                  lineHeight="base"
-                  accessibilityRole="header"
-                >
-                  {header.title}
-                </Typography>
-              </View>
-              <View style={styles.actionItem}>
-                {!!header.actionItem?.label && (
-                  <View style={styles.actionLabel}>
-                    <ActionLabel type="cardTitle">
-                      {header.actionItem.label}
-                    </ActionLabel>
-                  </View>
-                )}
+          <InternalCardHeader
+            onPress={header.onPress}
+            testID={`${testID}Header`}
+            collapsable={!!children}
+          >
+            <View style={styles.headerTitle}>
+              <Typography
+                color="heading"
+                fontFamily="base"
+                fontWeight="bold"
+                size="default"
+                lineHeight="base"
+                accessibilityRole="header"
+              >
+                {header.title}
+              </Typography>
+            </View>
+            <View style={styles.actionItem}>
+              {!!header.actionItem?.label && (
+                <View style={styles.actionLabel}>
+                  <ActionLabel type="cardTitle">
+                    {header.actionItem.label}
+                  </ActionLabel>
+                </View>
+              )}
 
-                {header.actionItem?.iconName && (
-                  <Icon name={header.actionItem.iconName} color="interactive" />
-                )}
-              </View>
-            </InternalCardHeader>
-          </>
+              {header.actionItem?.iconName && (
+                <Icon name={header.actionItem.iconName} color="interactive" />
+              )}
+            </View>
+          </InternalCardHeader>
         )}
         {children}
         {footer && (

package/src/Card/components/InternalCardHeader.tsx

@@ -16,6 +16,7 @@ export function InternalCardHeader({
   collapsable,
 }: InternalCardHeaderProps): JSX.Element {
   const conditionalChildStyling = collapsable ? undefined : styles.noChildren;
+
   if (onPress) {
     return (
       <Pressable