@jobber/components-native 0.91.0 → 0.91.2

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { StyleProp, TextStyle, ViewStyle } from "react-native";
 import type { IconNames } from "@jobber/design";
 export interface PrefixLabelProps {
@@ -10,7 +11,7 @@ export interface PrefixLabelProps {
 }
 export declare const prefixLabelTestId = "ATL-InputFieldWrapper-PrefixLabel";
 export declare const prefixIconTestId = "ATL-InputFieldWrapper-PrefixIcon";
-export declare function PrefixLabel({ focused, disabled, miniLabelActive, inputInvalid, label, styleOverride, }: PrefixLabelProps): JSX.Element;
+export declare function PrefixLabel({ focused, disabled, miniLabelActive, inputInvalid, label, styleOverride, }: PrefixLabelProps): React.JSX.Element;
 export interface PrefixIconProps {
     readonly focused: boolean;
     readonly disabled?: boolean;
@@ -18,4 +19,4 @@ export interface PrefixIconProps {
     readonly icon: IconNames;
     readonly styleOverride?: StyleProp<ViewStyle>;
 }
-export declare function PrefixIcon({ focused, disabled, inputInvalid, icon, }: PrefixIconProps): JSX.Element;
+export declare function PrefixIcon({ focused, disabled, inputInvalid, icon, }: PrefixIconProps): React.JSX.Element;

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { StyleProp, TextStyle } from "react-native";
 import type { IconNames } from "@jobber/design";
 export interface SuffixLabelProps {
@@ -11,7 +12,7 @@ export interface SuffixLabelProps {
 }
 export declare const suffixLabelTestId = "ATL-InputFieldWrapper-SuffixLabel";
 export declare const suffixIconTestId = "ATL-InputFieldWrapper-SuffixIcon";
-export declare function SuffixLabel({ focused, disabled, miniLabelActive, inputInvalid, label, hasLeftMargin, styleOverride, }: SuffixLabelProps): JSX.Element;
+export declare function SuffixLabel({ focused, disabled, miniLabelActive, inputInvalid, label, hasLeftMargin, styleOverride, }: SuffixLabelProps): React.JSX.Element;
 export interface SuffixIconProps {
     readonly focused: boolean;
     readonly disabled?: boolean;
@@ -20,4 +21,4 @@ export interface SuffixIconProps {
     readonly hasLeftMargin?: boolean;
     readonly onPress?: () => void;
 }
-export declare function SuffixIcon({ focused, disabled, inputInvalid, icon, hasLeftMargin, onPress, }: SuffixIconProps): JSX.Element;
+export declare function SuffixIcon({ focused, disabled, inputInvalid, icon, hasLeftMargin, onPress, }: SuffixIconProps): React.JSX.Element;

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

@@ -87,5 +87,5 @@ export interface InputPressableProps {
 }
 export type InputPressableRef = NativeText;
 export declare const InputPressable: React.ForwardRefExoticComponent<InputPressableProps & React.RefAttributes<NativeText>>;
-export declare function InputPressableInternal({ value, placeholder, disabled, invalid, error, showMiniLabel, onPress, accessibilityLabel, accessibilityHint, prefix, suffix, clearable, onClear, focused, }: InputPressableProps, ref: Ref<InputPressableRef>): JSX.Element;
+export declare function InputPressableInternal({ value, placeholder, disabled, invalid, error, showMiniLabel, onPress, accessibilityLabel, accessibilityHint, prefix, suffix, clearable, onClear, focused, }: InputPressableProps, ref: Ref<InputPressableRef>): React.JSX.Element;
 export {};

package/dist/types/src/InputSearch/components/FilterButton.d.ts

@@ -1,6 +1,7 @@
+import React from "react";
 interface FilterButtonProps {
     readonly accessibilityLabel: string;
     readonly onClick: () => void;
 }
-export declare function FilterButton({ accessibilityLabel, onClick, }: FilterButtonProps): JSX.Element;
+export declare function FilterButton({ accessibilityLabel, onClick, }: FilterButtonProps): React.JSX.Element;
 export {};

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

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

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { UseControllerProps } from "react-hook-form";
 import type { XOR } from "ts-xor";
 import type { Clearable } from "@jobber/hooks";
@@ -58,5 +59,5 @@ interface InputTimeDevControlled extends InputTimeBaseProps {
     readonly onChange: (value?: Date) => void;
 }
 export type InputTimeProps = XOR<InputTimeFormControlled, InputTimeDevControlled>;
-export declare function InputTime(props: InputTimeProps): JSX.Element;
+export declare function InputTime(props: InputTimeProps): React.JSX.Element;
 export {};

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

@@ -1,2 +1,3 @@
+import React from "react";
 import type { MenuProps } from "./types";
-export declare function Menu({ menuOptions, customActivator }: MenuProps): JSX.Element;
+export declare function Menu({ menuOptions, customActivator }: MenuProps): React.JSX.Element;

package/dist/types/src/Menu/components/MenuOption/MenuOption.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import type { MenuOptionInternalProps } from "../../types";
-export declare function MenuOption({ label, icon, iconColor, textAlign, destructive, textTransform, onPress, setOpen, }: MenuOptionInternalProps): JSX.Element;
+export declare function MenuOption({ label, icon, iconColor, textAlign, destructive, textTransform, onPress, setOpen, }: MenuOptionInternalProps): React.JSX.Element;

package/dist/types/src/Menu/components/Overlay/Overlay.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import type { OverlayProp } from "../../types";
-export declare function Overlay({ setOpen }: OverlayProp): JSX.Element;
+export declare function Overlay({ setOpen }: OverlayProp): React.JSX.Element;

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

@@ -1,4 +1,5 @@
 import type { IconColorNames, IconNames } from "@jobber/design";
+import type { ReactElement } from "react";
 import type { TextAlign } from "../Typography";
 export interface MenuOptionProps {
     readonly label: string;
@@ -14,7 +15,7 @@ export interface MenuOptionInternalProps extends MenuOptionProps {
 }
 export interface MenuProps {
     readonly menuOptions?: MenuOptionProps[];
-    readonly customActivator?: JSX.Element;
+    readonly customActivator?: ReactElement;
 }
 export interface OverlayProp {
     setOpen: (bool: boolean) => void;

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, }: ProgressBarProps): React.JSX.Element;

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

@@ -1,8 +1,9 @@
+import React from "react";
 interface ProgressBarInnerProps {
     readonly width: number;
     readonly animationDuration?: number;
     readonly color?: string;
 }
-export declare function ProgressBarInner({ width, color, }: ProgressBarInnerProps): JSX.Element;
+export declare function ProgressBarInner({ width, color, }: ProgressBarInnerProps): React.JSX.Element;
 export declare function calculateWidth(total: number, current: number): number;
 export {};

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/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

@@ -74,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

@@ -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.91.0",
+  "version": "0.91.2",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -94,5 +94,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "29381f7508578c0518fd4cecd07d021df83e08fc"
+  "gitHead": "89fec0b77276ec2b2fc80f4fc4ec2f6d207c1ac6"
 }

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.tsx

@@ -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/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/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.tsx

@@ -18,7 +18,7 @@ export function Banner({
   type,
   children,
   icon,
-}: BannerProps): JSX.Element {
+}: BannerProps) {
   const bannerIcon = icon || getBannerIcon(type);
 
   const shouldFlow =
@@ -60,7 +60,7 @@ export function Banner({
   );
 }
 
-function BannerChildren({ children }: PropsWithChildren): JSX.Element {
+function BannerChildren({ children }: PropsWithChildren) {
   if (!children) return <></>;
 
   if (children && typeof children === "string") {

package/src/Banner/components/BannerIcon/BannerIcon.tsx

@@ -10,7 +10,7 @@ export interface BannerIconProps {
   readonly type: BannerTypes;
 }
 
-export function BannerIcon({ icon, type }: BannerIconProps): JSX.Element {
+export function BannerIcon({ icon, type }: BannerIconProps) {
   const styles = useStyles();
 
   return (

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

@@ -25,7 +25,7 @@ export function BottomSheetOption({
   destructive,
   textTransform = "capitalize",
   onPress,
-}: BottomSheetOptionProps): JSX.Element {
+}: BottomSheetOptionProps) {
   const destructiveColor = "destructive";
   const textVariation = destructive ? destructiveColor : "subdued";
   const styles = useStyles();

package/src/Button/Button.tsx

@@ -124,7 +124,7 @@ export function Button({
   icon,
   testID,
   UNSAFE_style,
-}: ButtonProps): JSX.Element {
+}: ButtonProps) {
   const { tokens } = useAtlantisTheme();
   const styles = useStyles();
 

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

@@ -28,7 +28,7 @@ const AnimatedImage = Animated.createAnimatedComponent(ImageBackground);
 function InternalButtonLoadingInternal({
   variation,
   type,
-}: InternalButtonLoadingProps): JSX.Element {
+}: InternalButtonLoadingProps) {
   const translateX = useSharedValue(0);
   translateX.value = withRepeat(
     withTiming(offset, {

package/src/ButtonGroup/ButtonGroup.tsx

@@ -45,7 +45,7 @@ export function ButtonGroup({
   onOpenBottomSheet,
   onCloseBottomSheet,
   allowTapWhenOffline = false,
-}: ButtonGroupProps): JSX.Element {
+}: ButtonGroupProps) {
   const { t } = useAtlantisI18n();
   const { handlePress } = usePreventTapWhenOffline();
   const secondaryActionsRef = useRef<BottomSheetRef>();

package/src/ButtonGroup/ButtonGroupAction.tsx

@@ -1,5 +1,5 @@
 import type { IconColorNames, IconNames } from "@jobber/design";
-import React from "react";
+import React, { type ReactElement } from "react";
 import type { ButtonType, ButtonVariation } from "../Button";
 
 export interface ButtonGroupActionProps {
@@ -49,18 +49,18 @@ export interface ButtonGroupPrimaryActionProps extends ButtonGroupActionProps {
   /**
    * Optional custom button that can be rendered in place of the primary action button
    */
-  customButton?: JSX.Element;
+  customButton?: ReactElement;
   loading?: boolean;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function PrimaryAction(_: ButtonGroupPrimaryActionProps): JSX.Element {
+export function PrimaryAction(_: ButtonGroupPrimaryActionProps) {
   return <></>;
 }
 
 export function SecondaryAction(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   _: ButtonGroupSecondaryActionProps,
-): JSX.Element {
+) {
   return <></>;
 }

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

@@ -23,7 +23,7 @@ export function SecondaryActionSheet({
   showCancel,
   onOpenBottomSheet,
   onCloseBottomSheet,
-}: SecondaryActionSheetProps): JSX.Element {
+}: SecondaryActionSheetProps) {
   return (
     <Portal>
       <BottomSheet

package/src/Card/Card.tsx

@@ -80,7 +80,7 @@ export function Card({
   testID = "card",
   error,
   elevation = "none",
-}: CardProps): JSX.Element {
+}: CardProps) {
   const styles = useStyles();
 
   return (

package/src/Card/components/InternalCardHeader.tsx

@@ -15,7 +15,7 @@ export function InternalCardHeader({
   children,
   testID,
   collapsable,
-}: InternalCardHeaderProps): JSX.Element {
+}: InternalCardHeaderProps) {
   const styles = useStyles();
 
   const conditionalChildStyling = collapsable ? undefined : styles.noChildren;

package/src/Checkbox/Checkbox.tsx

@@ -79,7 +79,7 @@ export type CheckboxProps = XOR<
   UncontrolledCheckboxProps
 >;
 
-export function Checkbox(props: CheckboxProps): JSX.Element {
+export function Checkbox(props: CheckboxProps) {
   if (props.checked !== undefined && props.onChange !== undefined) {
     return <CheckboxInternal {...props} />;
   } else if (props.name) {
@@ -113,7 +113,7 @@ function CheckboxInternal({
   assistiveText,
   onChange,
   accessibilityLabel,
-}: CheckboxProps): JSX.Element {
+}: CheckboxProps) {
   const internalValue = checked ?? !!defaultChecked;
 
   const iconName = indeterminate ? "minus2" : "checkmark";

package/src/Checkbox/CheckboxGroup.test.tsx

@@ -66,7 +66,7 @@ function SetupWithForm({
 }: {
   readonly initialValues: CheckboxGroupFormData;
   readonly onChangeHandlers?: CheckboxGroupFormOnChangeHandlers;
-}): JSX.Element {
+}) {
   const formMethods = useForm({ defaultValues: initialValues });
 
   return (

package/src/Checkbox/CheckboxGroup.tsx

@@ -46,7 +46,7 @@ export function CheckboxGroup({
   onChange,
   name,
   ...rest
-}: CheckboxGroupProps): JSX.Element {
+}: CheckboxGroupProps) {
   if (state !== undefined && onChange !== undefined) {
     return (
       <CheckboxGroupInternal
@@ -92,7 +92,7 @@ function CheckboxGroupInternal({
   accessibilityLabel,
   onChange,
   name: parentName,
-}: ControlledCheckboxGroupProps): JSX.Element {
+}: ControlledCheckboxGroupProps) {
   const childrenNames = React.Children.map(children, child => {
     const name = throwErrorIfItHasNoName(child.props.name);
 

package/src/Chip/Chip.tsx

@@ -68,7 +68,7 @@ export function Chip({
   accessibilityLabel,
   accessibilityRole = "radio",
   accent,
-}: ChipProps): JSX.Element {
+}: ChipProps) {
   const styles = useStyles();
   const { tokens } = useAtlantisTheme();
   const defaultAccentColor = tokens["color-surface--reverse"];

package/src/Content/Content.tsx

@@ -51,7 +51,7 @@ export function Content({
   childSpacing = "base",
   direction = "vertical",
   UNSAFE_style,
-}: ContentProps): JSX.Element {
+}: ContentProps) {
   const horizontalStyles = useHorizontalStyles();
   const verticalStyles = useVerticalStyles();
   const spaceAroundStyles = useSpaceAroundStyles();

package/src/ContentOverlay/ContentOverlay.tsx

@@ -57,7 +57,7 @@ function ContentOverlayInternal(
     avoidKeyboardLikeIOS,
   }: ContentOverlayProps,
   ref: Ref<ContentOverlayRef>,
-): JSX.Element {
+) {
   isDraggable = onBeforeExit ? false : isDraggable;
   const isCloseableOnOverlayTap = onBeforeExit ? false : true;
   const { t } = useAtlantisI18n();

package/src/Disclosure/Disclosure.tsx

@@ -61,7 +61,7 @@ export function Disclosure({
   onToggle,
   isEmpty,
   animationDuration = staticTokens["timing-slowest"],
-}: DisclosureProps): JSX.Element {
+}: DisclosureProps) {
   const styles = useStyles();
 
   return (

package/src/Divider/Divider.tsx

@@ -26,7 +26,7 @@ export function Divider({
   size = "base",
   direction = "horizontal",
   testID = "Divider",
-}: DividerProps): JSX.Element {
+}: DividerProps) {
   const horizontalStyles = useHorizontalStyles();
   const verticalStyles = useVerticalStyles();