@jobber/components-native 0.84.4-match-mobi-55ef4ec.7 → 0.84.4-match-mobi-540af48.10

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

@@ -1,2 +1,3 @@
+import React from "react";
 import type { ProgressBarProps } from "./types";
-export declare function ProgressBar({ loading, total, current, inProgress, reverseTheme, header, variation, size, }: ProgressBarProps): JSX.Element;
+export declare function ProgressBar({ loading, total, current, inProgress, reverseTheme, header, variation, size, UNSAFE_style, }: ProgressBarProps): React.JSX.Element;

package/dist/types/src/ProgressBar/ProgressBarInner.d.ts

@@ -1,8 +1,12 @@
+import React from "react";
+import type { StyleProp, ViewStyle } from "react-native";
 interface ProgressBarInnerProps {
     readonly width: number;
     readonly animationDuration?: number;
     readonly color?: string;
+    readonly style?: StyleProp<ViewStyle>;
+    readonly testID?: string;
 }
-export declare function ProgressBarInner({ width, color, }: ProgressBarInnerProps): JSX.Element;
+export declare function ProgressBarInner({ width, color, style, testID, }: ProgressBarInnerProps): React.JSX.Element;
 export declare function calculateWidth(total: number, current: number): number;
 export {};

package/dist/types/src/ProgressBar/ProgressBarStepped.d.ts

@@ -1,10 +1,12 @@
 import React from "react";
+import type { ProgressBarUnsafeStyle } from "./types";
 interface ProgressBarSteppedProps {
     readonly total: number;
     readonly current: number;
     readonly color?: string;
     readonly loading?: boolean;
     readonly inProgress?: number;
+    readonly UNSAFE_style?: ProgressBarUnsafeStyle;
 }
-export declare function ProgressBarStepped({ total, current, color, loading, inProgress, }: ProgressBarSteppedProps): React.JSX.Element;
+export declare function ProgressBarStepped({ total, current, color, loading, inProgress, UNSAFE_style, }: ProgressBarSteppedProps): React.JSX.Element;
 export {};

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { StyleProp, ViewStyle } from "react-native";
 export interface ProgressBarProps {
     /**
      * The total number of items to be completed
@@ -36,4 +37,23 @@ export interface ProgressBarProps {
      * @default base
      */
     readonly size?: "smaller" | "small" | "base";
+    /** **Use at your own risk:** Custom style for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: ProgressBarUnsafeStyle;
+}
+export interface ProgressBarUnsafeStyle {
+    /** Styles applied to the outer accessible wrapper (role="progressbar"). */
+    container?: StyleProp<ViewStyle>;
+    /** Styles applied to the inner bar container (track container) – controls bar height/rounding. */
+    progressBarContainer?: StyleProp<ViewStyle>;
+    /** Styles applied to each step block in the stepped variation. */
+    step?: StyleProp<ViewStyle>;
+    /** Track/background bar in 'progress' variation (full-width inner) */
+    track?: StyleProp<ViewStyle>;
+    /** Filled/completed portion in 'progress' variation */
+    fill?: StyleProp<ViewStyle>;
+    /** In-progress overlay portion in 'progress' variation */
+    inProgressFill?: StyleProp<ViewStyle>;
 }

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

@@ -1,4 +1,5 @@
 import type { ReactElement } from "react";
+import React from "react";
 import type { RegisterOptions } from "react-hook-form";
 export interface SelectOption {
     /**
@@ -69,5 +70,5 @@ export interface SelectProps {
      */
     readonly testID?: string;
 }
-export declare function Select({ value, defaultValue, onChange, children, placeholder, label, assistiveText, disabled, invalid, validations, accessibilityLabel, name, testID, }: SelectProps): JSX.Element;
-export declare function Option({ children }: SelectOption): JSX.Element;
+export declare function Select({ value, defaultValue, onChange, children, placeholder, label, assistiveText, disabled, invalid, validations, accessibilityLabel, name, testID, }: SelectProps): React.JSX.Element;
+export declare function Option({ children }: SelectOption): React.JSX.Element;

package/dist/types/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.d.ts

@@ -1,4 +1,5 @@
+import React from "react";
 import type { SelectInternalPickerProps } from "../../types";
 type SelectDefaultPickerProps = SelectInternalPickerProps;
-export declare function SelectDefaultPicker({ children, options, disabled, onChange, }: SelectDefaultPickerProps): JSX.Element;
+export declare function SelectDefaultPicker({ children, options, disabled, onChange, }: SelectDefaultPickerProps): React.JSX.Element;
 export {};

package/dist/types/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.ios.d.ts

@@ -1,4 +1,5 @@
+import React from "react";
 import type { SelectInternalPickerProps } from "../../types";
 type SelectDefaultPickerProps = SelectInternalPickerProps;
-export declare function SelectDefaultPicker({ children, options, onChange, }: SelectDefaultPickerProps): JSX.Element;
+export declare function SelectDefaultPicker({ children, options, onChange, }: SelectDefaultPickerProps): React.JSX.Element;
 export {};

package/dist/types/src/Select/components/SelectInternalPicker/SelectInternalPicker.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import type { SelectInternalPickerProps } from "../../types";
-export declare function SelectInternalPicker({ children, options, disabled, onChange, }: SelectInternalPickerProps): JSX.Element;
+export declare function SelectInternalPicker({ children, options, disabled, onChange, }: SelectInternalPickerProps): React.JSX.Element;

package/dist/types/src/Select/components/SelectPressable/SelectPressable.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { PressableProps } from "react-native";
 import type { SelectInternalPickerProps } from "../../types";
 type SelectPressableProps = Pick<SelectInternalPickerProps, "children"> & Pick<PressableProps, "onPress">;
@@ -6,5 +7,5 @@ type SelectPressableProps = Pick<SelectInternalPickerProps, "children"> & Pick<P
  * screen-reader is being used to avoid screen-readers from ignoring the press
  * on the MenuView
  */
-export declare function SelectPressable({ children, onPress, }: SelectPressableProps): JSX.Element;
+export declare function SelectPressable({ children, onPress }: SelectPressableProps): React.JSX.Element;
 export {};

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

@@ -1,3 +1,4 @@
+import React from "react";
 export type StatusType = "success" | "warning" | "critical" | "inactive" | "informative";
 export interface StatusLabelType {
     readonly statusLabel: string;
@@ -17,5 +18,5 @@ interface StatusLabelProps {
      */
     readonly status?: StatusType;
 }
-export declare function StatusLabel({ text, alignment, status, }: StatusLabelProps): JSX.Element;
+export declare function StatusLabel({ text, alignment, status, }: StatusLabelProps): React.JSX.Element;
 export {};

package/dist/types/src/StatusLabel/StatusLabel.style.d.ts

@@ -3,6 +3,7 @@ export declare const useStyles: () => {
         flexDirection: "row";
         justifyContent: "flex-end";
         alignItems: "center";
+        alignSelf: "flex-start";
         flexWrap: "nowrap";
         flexGrow: number;
         flexShrink: number;
@@ -14,7 +15,6 @@ export declare const useStyles: () => {
     };
     statusLabelText: {
         flexShrink: number;
-        marginBottom: number;
     };
     labelTextStartAligned: {
         flexDirection: "row-reverse";

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { XOR } from "ts-xor";
 import type { BaseSwitchProps } from "./components/BaseSwitch";
 interface WithLabelProps extends BaseSwitchProps {
@@ -11,5 +12,5 @@ interface WithLabelProps extends BaseSwitchProps {
     readonly description?: string;
 }
 export type SwitchProps = XOR<BaseSwitchProps, WithLabelProps>;
-export declare function Switch(props: SwitchProps): JSX.Element;
+export declare function Switch(props: SwitchProps): React.JSX.Element;
 export {};

package/dist/types/src/Switch/components/BaseSwitch/BaseSwitch.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 export interface BaseSwitchProps {
     /**
      * Value of the switch
@@ -24,4 +25,4 @@ export interface BaseSwitchProps {
      */
     readonly name?: string;
 }
-export declare function BaseSwitch({ value, defaultValue, onValueChange, disabled, accessibilityLabel, name, }: BaseSwitchProps): JSX.Element;
+export declare function BaseSwitch({ value, defaultValue, onValueChange, disabled, accessibilityLabel, name, }: BaseSwitchProps): React.JSX.Element;

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { OnTextLayoutEvent, TextAlign, TextVariation, TruncateLength, TypographyProps } from "../Typography";
 import type { TypographyUnsafeStyle } from "../Typography/Typography";
 export interface TextProps extends Pick<TypographyProps<"base">, "maxFontScaleSize" | "selectable"> {
@@ -31,9 +32,9 @@ export interface TextProps extends Pick<TypographyProps<"base">, "maxFontScaleSi
      */
     readonly align?: TextAlign;
     /**
-     * Text to display
+     * Text to display. Supports nesting text elements.
      */
-    readonly children?: string;
+    readonly children?: React.ReactNode;
     /**
      * Reverse theme for better display on dark background
      */
@@ -73,4 +74,4 @@ export interface TextProps extends Pick<TypographyProps<"base">, "maxFontScaleSi
 }
 export type TextLevel = "text" | "textSupporting";
 export declare const TEXT_MAX_SCALED_FONT_SIZES: Record<TextLevel, number>;
-export declare function Text({ level, variation, emphasis, allowFontScaling, adjustsFontSizeToFit, maxLines, align, children, reverseTheme, strikeThrough, italic, hideFromScreenReader, maxFontScaleSize, UNSAFE_style, underline, selectable, onTextLayout, }: TextProps): JSX.Element;
+export declare function Text({ level, variation, emphasis, allowFontScaling, adjustsFontSizeToFit, maxLines, align, children, reverseTheme, strikeThrough, italic, hideFromScreenReader, maxFontScaleSize, UNSAFE_style, underline, selectable, onTextLayout, }: TextProps): React.JSX.Element;

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { Spacing } from "../Content";
 import type { TextLevel } from "../Text";
 interface TextListProps {
@@ -25,5 +26,5 @@ interface TextListProps {
      */
     readonly childSpacing?: Spacing;
 }
-export declare function TextList({ items, childSpacing, emphasis, level, spacing, }: TextListProps): JSX.Element;
+export declare function TextList({ items, childSpacing, emphasis, level, spacing, }: TextListProps): React.JSX.Element;
 export {};

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

@@ -1,4 +1,5 @@
+import React from "react";
 import type { ThumbnailListProps } from "./types";
 import type { File } from "../FormatFile";
 export declare const filterImages: (files: File[]) => File[];
-export declare function ThumbnailList({ files, rowCount, handleOpenFile, createThumbnail, }: ThumbnailListProps): JSX.Element;
+export declare function ThumbnailList({ files, rowCount, handleOpenFile, createThumbnail, }: ThumbnailListProps): React.JSX.Element;

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ToastPosition } from "react-native-toast-message";
 export interface JobberToastProps {
     /**
@@ -7,7 +8,7 @@ export interface JobberToastProps {
      */
     readonly bottomOffset?: number;
 }
-export declare function JobberToast({ bottomOffset }: JobberToastProps): JSX.Element;
+export declare function JobberToast({ bottomOffset }: JobberToastProps): React.JSX.Element;
 export interface ShowToastParams {
     /**
      * Message to be displayed in the toast

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

@@ -24,9 +24,9 @@ export interface TypographyProps<T extends FontFamily> {
      */
     readonly size?: TextSize;
     /**
-     * Text to display
+     * Text to display. Supports nesting text elements.
      */
-    readonly children?: string;
+    readonly children?: React.ReactNode;
     /**
      * The maximum amount of lines the text can occupy before being truncated with "...".
      * Uses predefined string values that correspond to a doubling scale for the amount of lines.
@@ -105,7 +105,7 @@ export interface TypographyUnsafeStyle {
     textStyle?: StyleProp<TextStyle>;
 }
 export declare const Typography: React.MemoExoticComponent<typeof InternalTypography>;
-declare function InternalTypography<T extends FontFamily = "base">({ fontFamily, fontStyle, fontWeight, transform, color, align, size, children, maxLines, allowFontScaling, maxFontScaleSize, adjustsFontSizeToFit, lineHeight, letterSpacing, reverseTheme, hideFromScreenReader, accessibilityRole, strikeThrough, underline, UNSAFE_style, selectable, onTextLayout, }: TypographyProps<T>): JSX.Element;
+declare function InternalTypography<T extends FontFamily = "base">({ fontFamily, fontStyle, fontWeight, transform, color, align, size, children, maxLines, allowFontScaling, maxFontScaleSize, adjustsFontSizeToFit, lineHeight, letterSpacing, reverseTheme, hideFromScreenReader, accessibilityRole, strikeThrough, underline, UNSAFE_style, selectable, onTextLayout, }: TypographyProps<T>): React.JSX.Element;
 export type FontFamily = "base" | "display";
 export type FontStyle = "regular" | "italic";
 export type FontWeight = "regular" | "medium" | "bold" | "semiBold" | "extraBold" | "black";

package/dist/types/src/Typography/TypographyGestureDetector.d.ts

@@ -1,7 +1,8 @@
 import type { PropsWithChildren } from "react";
+import React from "react";
 /**
  * This is a workaround suggested by react-native-gesture-handler to prevent
  * accidental highlighting of text in Android devices
  * https://github.com/software-mansion/react-native-gesture-handler/issues/1372
  */
-export declare function TypographyGestureDetector(props: PropsWithChildren<unknown>): JSX.Element;
+export declare function TypographyGestureDetector(props: PropsWithChildren<unknown>): React.JSX.Element;

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

@@ -5,5 +5,5 @@ interface MockSafeAreaProviderProps {
     readonly frame?: Rect;
     readonly insets?: EdgeInsets;
 }
-export declare function MockSafeAreaProvider({ frame, insets, children, }: MockSafeAreaProviderProps): JSX.Element;
+export declare function MockSafeAreaProvider({ frame, insets, children, }: MockSafeAreaProviderProps): React.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.84.4-match-mobi-55ef4ec.7+55ef4ec91",
+  "version": "0.84.4-match-mobi-540af48.10+540af48e1",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -32,10 +32,10 @@
     "build": "npm run build:clean && npm run compile",
     "bootstrap": "npm run build",
     "prepack": "npm run build",
-    "compile": "tsc -b",
+    "compile": "tsc -p tsconfig.build.json",
     "build:clean": "rm -rf ./dist",
     "storybook": "storybook dev -p 6008 --disable-telemetry",
-    "build-storybook": "storybook build --disable-telemetry"
+    "storybook:build": "storybook build --disable-telemetry"
   },
   "dependencies": {
     "@react-native-clipboard/clipboard": "^1.11.2",
@@ -43,8 +43,8 @@
     "autolinker": "^4.0.0",
     "deepmerge": "^4.2.2",
     "lodash": "^4.17.21",
-    "react-hook-form": "^7.30.0",
-    "react-intl": "^6.4.2",
+    "react-hook-form": "^7.52.0",
+    "react-intl": "^7.1.11",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-modalize": "^2.0.13",
     "react-native-portalize": "^1.0.7",
@@ -53,30 +53,41 @@
     "ts-xor": "^1.1.0"
   },
   "devDependencies": {
+    "@gorhom/bottom-sheet": "^5.2.8",
+    "@react-native-community/datetimepicker": "^8.4.5",
+    "@react-native/babel-preset": "^0.82.1",
     "@storybook/addon-a11y": "^9.1.2",
     "@storybook/react": "^9.1.2",
     "@storybook/react-native-web-vite": "^9.1.2",
-    "@testing-library/jest-native": "^5.4.2",
-    "@testing-library/react-native": "^12.0.1",
+    "@testing-library/react-native": "^13.3.3",
     "@types/lodash.chunk": "^4.2.7",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.identity": "^3.0.7",
-    "@types/react": "^18.0.28",
     "@types/react-native-uuid": "^1.4.0",
-    "metro-react-native-babel-preset": "^0.76.0",
-    "react-test-renderer": "^18.2.0",
+    "@types/react-test-renderer": "19.1.0",
+    "date-fns": "^2.30.0",
+    "date-fns-tz": "^2.0.0",
+    "react-native": "^0.82.1",
+    "react-native-gesture-handler": "^2.29.1",
+    "react-native-modal-datetime-picker": "^18.0.0",
+    "react-native-reanimated": "^3.7.1",
+    "react-native-safe-area-context": "^5.4.0",
+    "react-native-svg": "^15.1.0",
+    "react-native-web": "^0.20.0",
+    "react-test-renderer": "^19.1.1",
     "storybook": "^9.1.2"
   },
   "peerDependencies": {
     "@babel/core": "^7.4.5",
+    "@gorhom/bottom-sheet": "^5.2.8",
     "@jobber/design": "*",
     "@react-native-community/datetimepicker": ">=6.7.0",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
-    "react": "^18.2.0",
-    "react-intl": "^6.4.2",
-    "react-native": ">=0.76.0",
-    "react-native-gesture-handler": ">=2.10.0",
+    "react": "^19",
+    "react-intl": "^6 || ^7",
+    "react-native": ">=0.79.5",
+    "react-native-gesture-handler": ">=2.22.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-modal-datetime-picker": " >=13.0.0",
     "react-native-modalize": "^2.0.13",
@@ -85,5 +96,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "55ef4ec916758fd15610ded5298d293958e665fa"
+  "gitHead": "540af48e1dfd90116999584f50bca29c4ab9e0ba"
 }

package/src/ActionItem/ActionItem.tsx

@@ -61,7 +61,7 @@ export function ActionItem({
   actionIconAlignment = "center",
   onPress,
   testID = "actionItem",
-}: ActionItemProps): JSX.Element {
+}: ActionItemProps) {
   const actionIconStyle = {
     justifyContent: actionIconAlignment,
   };

package/src/ActionItem/ActionItemGroup.tsx

@@ -18,9 +18,7 @@ interface ActionItemGroupProps {
   readonly children: ActionItemElement | ActionItemElement[];
 }
 
-export function ActionItemGroup({
-  children,
-}: ActionItemGroupProps): JSX.Element {
+export function ActionItemGroup({ children }: ActionItemGroupProps) {
   return <View>{renderChildren(children)}</View>;
 }
 

package/src/ActionItem/components/ActionItemContainer.tsx

@@ -16,7 +16,7 @@ export function ActionItemContainer({
   title,
   children,
   testID,
-}: ActionItemContainerProps): JSX.Element {
+}: ActionItemContainerProps) {
   const styles = useStyles();
   const actionItemStyles = useActionItemStyles();
 

package/src/ActionLabel/ActionLabel.test.tsx

@@ -117,6 +117,18 @@ describe("ActionLabel", () => {
       });
     });
   });
+
+  it("supports nested inline content", () => {
+    const { Text } = require("../Text");
+    const { getByText, toJSON } = render(
+      <ActionLabel>
+        Before <Text variation="interactive">Inner</Text> After
+      </ActionLabel>,
+    );
+
+    expect(getByText("Inner")).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+  });
 });
 
 function getStyleObject(el: ReactTestInstance) {

package/src/ActionLabel/ActionLabel.tsx

@@ -12,9 +12,9 @@ type ActionLabelType = "default" | "cardTitle";
 
 interface ActionLabelProps {
   /**
-   * Text to display
+   * Text to display. Supports nesting text elements.
    */
-  readonly children?: string;
+  readonly children?: React.ReactNode;
 
   /**
    * Set the display text to disabled color
@@ -43,7 +43,7 @@ export function ActionLabel({
   type = "default",
   disabled = false,
   align = "center",
-}: ActionLabelProps): JSX.Element {
+}: ActionLabelProps) {
   return (
     <Typography
       color={getColor(variation, disabled)}

package/src/ActionLabel/__snapshots__/ActionLabel.test.tsx.snap

@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActionLabel supports nested inline content 1`] = `
+<Text
+  accessibilityRole="text"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  maxFontSizeMultiplier={1.125}
+  selectable={false}
+  selectionColor="hsl(86, 100%, 46%)"
+  style={
+    [
+      {
+        "fontFamily": "inter-semibold",
+      },
+      {
+        "color": "hsl(107, 58%, 33%)",
+      },
+      {
+        "textAlign": "center",
+      },
+      {
+        "fontSize": 16,
+        "lineHeight": 18,
+      },
+      {
+        "letterSpacing": 0,
+      },
+    ]
+  }
+>
+  Before 
+  <Text
+    accessibilityRole="text"
+    adjustsFontSizeToFit={false}
+    allowFontScaling={true}
+    collapsable={false}
+    maxFontSizeMultiplier={3.125}
+    selectable={true}
+    selectionColor="hsl(86, 100%, 46%)"
+    style={
+      [
+        {
+          "fontFamily": "inter-regular",
+        },
+        {
+          "color": "hsl(107, 58%, 33%)",
+        },
+        {
+          "textAlign": "left",
+        },
+        {
+          "fontSize": 16,
+          "lineHeight": 20,
+        },
+        {
+          "letterSpacing": 0,
+        },
+      ]
+    }
+  >
+    Inner
+  </Text>
+   After
+</Text>
+`;

package/src/ActivityIndicator/ActivityIndicator.tsx

@@ -3,9 +3,7 @@ import type { ActivityIndicatorProps } from "react-native";
 import { ActivityIndicator } from "react-native";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
 
-export function JobberActivityIndicator(
-  props: ActivityIndicatorProps,
-): JSX.Element {
+export function JobberActivityIndicator(props: ActivityIndicatorProps) {
   const { tokens } = useAtlantisTheme();
 
   return (

package/src/AtlantisContext/AtlantisContext.test.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import type { PropsWithChildren } from "react";
 import React from "react";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import type { AtlantisContextProps } from "./AtlantisContext";
 import {
   AtlantisContext,

package/src/AtlantisThemeContext/AtlantisThemeContext.test.tsx

@@ -51,24 +51,24 @@ describe("ThemeContext", () => {
     expect(result.current.tokens).toEqual(expectedLightTokens);
   });
 
-  it("updates the theme and tokens", () => {
+  it("updates the theme and tokens", async () => {
     const { result } = renderHook(useAtlantisTheme, {
       wrapper: (props: AtlantisThemeContextProviderProps) => (
         <Wrapper {...props} />
       ),
     });
 
-    act(() => result.current.setTheme("dark"));
+    await act(async () => result.current.setTheme("dark"));
     expect(result.current.theme).toBe("dark");
     expect(result.current.tokens).toEqual(expectedDarkTokens);
 
-    act(() => result.current.setTheme("light"));
+    await act(async () => result.current.setTheme("light"));
     expect(result.current.theme).toBe("light");
     expect(result.current.tokens).toEqual(expectedLightTokens);
   });
 
   describe("when theme is forced for provider", () => {
-    it("ignores updates to the global theme", () => {
+    it("ignores updates to the global theme", async () => {
       const { result } = renderHook(useAtlantisTheme, {
         wrapper: (props: AtlantisThemeContextProviderProps) => (
           <WrapperWithOverride {...props} dangerouslyOverrideTheme="light" />
@@ -76,7 +76,7 @@ describe("ThemeContext", () => {
       });
 
       // Update the global theme
-      act(() => result.current.setTheme("dark"));
+      await act(async () => result.current.setTheme("dark"));
 
       // This hook shouldn't be affected by it because it's set to the light theme
       expect(result.current.theme).toBe("light");

package/src/AutoLink/AutoLink.test.tsx

@@ -1,12 +1,10 @@
 import React from "react";
 import { fireEvent, render } from "@testing-library/react-native";
+import { Linking } from "react-native";
 import { copyTextToClipboard } from "./clipboard";
 import { AutoLink } from "./AutoLink";
 
-const mockOpenUrl = jest.fn();
-jest.mock("react-native/Libraries/Linking/Linking", () => ({
-  openURL: mockOpenUrl,
-}));
+const mockOpenUrl = jest.spyOn(Linking, "openURL").mockImplementation();
 
 jest.mock("./clipboard", () => {
   return {

package/src/AutoLink/AutoLink.tsx

@@ -11,7 +11,7 @@ export function AutoLink({
   bottomTabsVisible = true,
   selectable = true,
   ...rest
-}: AutoLinkProps): JSX.Element {
+}: AutoLinkProps) {
   const { splitText, matches } = useCreateLinkedText({ text, ...rest });
   const { tokens } = useAtlantisTheme();
 

package/src/AutoLink/components/ComposeTextWithLinks/ComposeTextWithLinks.tsx

@@ -12,7 +12,7 @@ export function ComposeTextWithLinks({
   match,
   bottomTabsVisible,
   selectable = true,
-}: ComposeTextWithLinksProps): JSX.Element {
+}: ComposeTextWithLinksProps) {
   const { t } = useAtlantisI18n();
 
   const isLink = match?.getType();

package/src/AutoLink/components/Link/Link.tsx

@@ -8,11 +8,7 @@ interface LinkProps {
   readonly onLongPress?: () => void;
 }
 
-export function Link({
-  children,
-  onPress,
-  onLongPress,
-}: LinkProps): JSX.Element {
+export function Link({ children, onPress, onLongPress }: LinkProps) {
   return (
     <RNText onPress={onPress} onLongPress={onLongPress}>
       <Text variation="interactive">{children}</Text>

package/src/Banner/Banner.test.tsx

@@ -35,6 +35,18 @@ describe("Banner", () => {
       expect(getByText("Notice me")).toBeDefined();
       expect(icon.props.children.props.name).toBe("starburst");
     });
+
+    it("renders a success Banner", () => {
+      const { getByText, getByTestId } = render(
+        <Banner type="success">
+          <Text>Your import is complete</Text>
+        </Banner>,
+      );
+
+      const icon = getByTestId("ATL-Banner-Icon");
+      expect(getByText("Your import is complete")).toBeDefined();
+      expect(icon.props.children.props.name).toBe("checkmark");
+    });
   });
 
   describe("Children", () => {