@jobber/components-native 0.84.4-JOB-124066-166e539.11 → 0.84.4-JOB-138679-b1552ab.68

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

@@ -1,8 +1,8 @@
-import type { MutableRefObject, RefObject } from "react";
-import type { ControllerProps, DeepPartial, FieldPath, FieldValues, Mode, UnpackNestedValue, UseFormReturn } from "react-hook-form";
+import type { ReactElement, RefObject } from "react";
+import type { ControllerProps, DefaultValues, FieldPath, FieldValues, Mode, UseFormReturn } from "react-hook-form";
 import type { IconNames } from "@jobber/design";
 import type { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
-export type FormValues<T> = UnpackNestedValue<T>;
+export type FormValues<T> = T;
 export type FormErrors = FormNetworkErrors | FormUserErrors;
 export type FormBannerMessage = FormWarningMessage | FormNoticeMessage;
 export declare enum FormSubmitErrorType {
@@ -37,7 +37,7 @@ interface FormNoticeMessage {
     message: string;
 }
 export type FormRef<T extends FieldValues = FieldValues> = (UseFormReturn<T> & {
-    scrollViewRef?: RefObject<KeyboardAwareScrollView>;
+    scrollViewRef?: RefObject<KeyboardAwareScrollView | null>;
     saveButtonHeight?: number;
     messageBannerHeight?: number;
 }) | undefined;
@@ -81,7 +81,7 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
      * The initial values of the form inputs
      * This should be available as soon as initialLoading is set to false
      */
-    initialValues?: FormValues<DeepPartial<T>>;
+    initialValues?: DefaultValues<T>;
     /**
      * When the validation should happen.
      * Possible values are "onBlur", "onChange", "onSubmit", "onTouched", and "all".
@@ -97,7 +97,7 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
     /**
      * ref object to access react hook form methods and state
      */
-    formRef?: MutableRefObject<FormRef<T> | undefined>;
+    formRef?: RefObject<FormRef<T> | undefined>;
     /**
      * Label to be displayed for the save button
      */
@@ -106,7 +106,7 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
      * @deprecated use `secondaryAction` instead.
      * Override default save button in the sticky section of the form with another element.
      */
-    renderStickySection?: (onSubmit: () => void, label: string | undefined, isSubmitting: boolean) => JSX.Element;
+    renderStickySection?: (onSubmit: () => void, label: string | undefined, isSubmitting: boolean) => ReactElement;
     /**
      * Adding a key will save a local copy of the form data that will be used to
      * recover values when the app is backgrounded or has crashed.
@@ -131,6 +131,12 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
      * If a user opens the same form the data will only be loaded if the `localCacheId` matches
      */
     localCacheId?: string | string[];
+    /**
+     * If true, the local cache will be removed when the user navigates away from
+     * the dirty form even when offline. By default, cache is only removed on back when online.
+     * Defaults to false.
+     */
+    UNSAFE_allowDiscardLocalCacheWhenOffline?: boolean;
     /**
      * Secondary Action for ButtonGroup
      */

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

@@ -20,5 +20,5 @@ interface FormFieldProps<T> {
      */
     readonly validations?: RegisterOptions;
 }
-export declare function FormField<T>({ name, children, defaultValue: value, validations, }: FormFieldProps<T>): JSX.Element;
+export declare function FormField<T>({ name, children, defaultValue: value, validations, }: FormFieldProps<T>): React.JSX.Element;
 export {};

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { BottomSheetOptionsSuffix } from "./components/FormatFileBottomSheet";
 import type { CreateThumbnail, File, FileUpload, FormattedFile } from "./types";
 export interface FormatFileProps<T> {
@@ -43,4 +44,4 @@ export interface FormatFileProps<T> {
     readonly showFileTypeIndicator?: boolean;
     readonly createThumbnail?: CreateThumbnail;
 }
-export declare function FormatFile<T extends File | FileUpload>({ file, accessibilityLabel, accessibilityHint, onTap, onRemove, bottomSheetOptionsSuffix, styleInGrid, testID, showFileTypeIndicator, createThumbnail, onPreviewPress, }: FormatFileProps<T>): JSX.Element;
+export declare function FormatFile<T extends File | FileUpload>({ file, accessibilityLabel, accessibilityHint, onTap, onRemove, bottomSheetOptionsSuffix, styleInGrid, testID, showFileTypeIndicator, createThumbnail, onPreviewPress, }: FormatFileProps<T>): React.JSX.Element;

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

@@ -1 +1,2 @@
-export declare function ErrorIcon(): JSX.Element;
+import React from "react";
+export declare function ErrorIcon(): React.JSX.Element;

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

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

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

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

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

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

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

@@ -1,3 +1,4 @@
+import React from "react";
 import { StatusCode } from "../../types";
 interface ProgressBarProps {
     /**
@@ -13,5 +14,5 @@ interface ProgressBarProps {
      */
     readonly onComplete?: () => void;
 }
-export declare const ProgressBar: ({ progress, status, onComplete, }: ProgressBarProps) => JSX.Element;
+export declare const ProgressBar: ({ progress, status, onComplete, }: ProgressBarProps) => React.JSX.Element;
 export {};

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

@@ -1,11 +1,12 @@
+import React from "react";
 import type { TextAlign, TextColor, TruncateLength, TypographyProps } from "../Typography";
 type HeadingColor = Extract<TextColor, "text" | "subdued" | "heading">;
 export type HeadingLevel = "title" | "subtitle" | "heading" | "subHeading";
 interface HeadingProps<T extends HeadingLevel> extends Pick<TypographyProps<"base">, "selectable"> {
     /**
-     * Text to display.
+     * Text to display. Supports nesting text elements.
      */
-    readonly children: string;
+    readonly children: React.ReactNode;
     /**
      * The type of heading, e.g., "Title"
      */
@@ -33,5 +34,5 @@ interface HeadingProps<T extends HeadingLevel> extends Pick<TypographyProps<"bas
     readonly allowFontScaling?: boolean;
 }
 export declare const HEADING_MAX_SCALED_FONT_SIZE: Record<HeadingLevel, number>;
-export declare function Heading<T extends HeadingLevel = "heading">({ children, level, variation, reverseTheme, align, maxLines, allowFontScaling, selectable, }: HeadingProps<T>): JSX.Element;
+export declare function Heading<T extends HeadingLevel = "heading">({ children, level, variation, reverseTheme, align, maxLines, allowFontScaling, selectable, }: HeadingProps<T>): React.JSX.Element;
 export {};

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { IconColorNames, IconNames, IconSizes } from "@jobber/design";
 export interface IconProps {
     /** The icon to show.  */
@@ -22,4 +23,4 @@ export interface IconProps {
      */
     readonly testID?: string;
 }
-export declare function Icon({ name, color, size, customColor, testID, }: IconProps): JSX.Element;
+export declare function Icon({ name, color, size, customColor, testID, }: IconProps): React.JSX.Element;

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

@@ -31,5 +31,5 @@ interface IconButtonProps {
      */
     readonly testID?: string;
 }
-export declare function IconButton({ badge, name, color, customColor, onPress, accessibilityLabel, testID, }: IconButtonProps): JSX.Element;
+export declare function IconButton({ badge, name, color, customColor, onPress, accessibilityLabel, testID, }: IconButtonProps): React.JSX.Element;
 export {};

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { FormatNumberOptions } from "react-intl";
 import type { ControllerRenderProps, FieldValues } from "react-hook-form";
 import type { InputTextProps } from "../InputText";
@@ -28,4 +29,4 @@ export interface InputCurrencyProps extends Omit<InputTextProps, "keyboard" | "o
     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;
+export declare function InputCurrency(props: InputCurrencyProps): React.JSX.Element;

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

@@ -1,8 +1,10 @@
+import React from "react";
 import type { UseControllerProps } from "react-hook-form";
 import type { XOR } from "ts-xor";
 import type { Clearable } from "@jobber/hooks";
 import type { InputFieldWrapperProps } from "../InputFieldWrapper";
-interface BaseInputDateProps extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder"> {
+import type { InputPressableProps } from "../InputPressable/InputPressable";
+interface BaseInputDateProps extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder">, Pick<InputPressableProps, "showMiniLabel"> {
     /**
      * Defaulted to "always" so user can clear the dates whenever there's a value.
      */
@@ -70,5 +72,5 @@ export type InputDateProps = XOR<FormControlledInputDate, DevControlledInputDate
 /**
  * Allow users to select a date using the device date picker.
  */
-export declare function InputDate(props: InputDateProps): JSX.Element;
+export declare function InputDate(props: InputDateProps): React.JSX.Element;
 export {};

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

@@ -26,7 +26,14 @@ export interface InputFieldWrapperProps {
      * Text that goes below the input to help the user understand the input
      */
     readonly assistiveText?: string;
-    readonly hasMiniLabel?: boolean;
+    /**
+     * Controls how the placeholder text is displayed.
+     * - normal: the placeholder text will be displayed in the normal placeholder position
+     * - mini: the placeholder text will float above the input value
+     * - hidden: the placeholder text will not be displayed
+     * @default "normal"
+     */
+    readonly placeholderMode?: "normal" | "mini" | "hidden";
     readonly hasValue?: boolean;
     /**
      * Symbol to display before the text input
@@ -78,4 +85,4 @@ export interface InputFieldWrapperProps {
 }
 export declare const INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID = "ATL-InputFieldWrapper-Glimmers";
 export declare const INPUT_FIELD_WRAPPER_SPINNER_TEST_ID = "ATL-InputFieldWrapper-Spinner";
-export declare function InputFieldWrapper({ invalid, disabled, placeholder, assistiveText, prefix, suffix, hasMiniLabel, hasValue, error, focused, children, onClear, showClearAction, styleOverride, toolbar, toolbarVisibility, loading, loadingType, }: InputFieldWrapperProps): JSX.Element;
+export declare function InputFieldWrapper({ invalid, disabled, placeholder, assistiveText, prefix, suffix, placeholderMode, hasValue, error, focused, children, onClear, showClearAction, styleOverride, toolbar, toolbarVisibility, loading, loadingType, }: InputFieldWrapperProps): React.JSX.Element;

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

@@ -23,6 +23,7 @@ export declare const useStyles: () => {
         right: number;
         bottom: number;
         left: number;
+        zIndex: number;
     };
     miniLabel: {
         top: number;
@@ -30,7 +31,6 @@ export declare const useStyles: () => {
         backgroundColor: string;
         marginRight: number;
         maxHeight: number;
-        zIndex: number;
     };
     miniLabelShowClearAction: {
         backgroundColor: string;

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

@@ -1,3 +1,4 @@
+import React from "react";
 interface ClearActionProps {
     /**
      * Press handler
@@ -5,5 +6,5 @@ interface ClearActionProps {
     readonly onPress: () => void;
     readonly hasMarginRight?: boolean;
 }
-export declare function ClearAction({ onPress, hasMarginRight, }: ClearActionProps): JSX.Element;
+export declare function ClearAction({ onPress, hasMarginRight, }: ClearActionProps): React.JSX.Element;
 export {};

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

@@ -1,22 +1,22 @@
+import React from "react";
 import type { StyleProp, TextStyle, ViewStyle } from "react-native";
 import type { IconNames } from "@jobber/design";
 export interface PrefixLabelProps {
     readonly focused: boolean;
     readonly disabled?: boolean;
-    readonly hasMiniLabel: boolean;
+    readonly miniLabelActive: 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 declare function PrefixLabel({ focused, disabled, miniLabelActive, inputInvalid, label, styleOverride, }: PrefixLabelProps): React.JSX.Element;
 export interface PrefixIconProps {
     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;
+export declare function PrefixIcon({ focused, disabled, inputInvalid, icon, }: PrefixIconProps): React.JSX.Element;

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

@@ -1,9 +1,10 @@
+import React from "react";
 import type { StyleProp, TextStyle } from "react-native";
 import type { IconNames } from "@jobber/design";
 export interface SuffixLabelProps {
     readonly focused: boolean;
     readonly disabled?: boolean;
-    readonly hasMiniLabel: boolean;
+    readonly miniLabelActive: boolean;
     readonly inputInvalid?: boolean;
     readonly label: string;
     readonly hasLeftMargin?: boolean;
@@ -11,14 +12,13 @@ export interface SuffixLabelProps {
 }
 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 declare function SuffixLabel({ focused, disabled, miniLabelActive, inputInvalid, label, hasLeftMargin, styleOverride, }: SuffixLabelProps): React.JSX.Element;
 export interface SuffixIconProps {
     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;
+export declare function SuffixIcon({ focused, disabled, inputInvalid, icon, hasLeftMargin, onPress, }: SuffixIconProps): React.JSX.Element;

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

@@ -39,6 +39,14 @@ export interface InputPressableProps {
      * Indicates the current selection is invalid
      */
     readonly invalid?: boolean | string;
+    /**
+     * Controls the visibility of the mini label that appears inside the input
+     * when a value is entered. By default, the placeholder text moves up to
+     * become a mini label. Set to false to disable this behavior.
+     *
+     * @default true
+     */
+    readonly showMiniLabel?: boolean;
     /**
      * Callback that is called when the text input is focused
      * @param event
@@ -79,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, 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/InputPressable/InputPressable.style.d.ts

@@ -15,4 +15,7 @@ export declare const useStyles: () => {
     inputInvalid: {
         borderColor: string;
     };
+    withoutMiniLabel: {
+        paddingTop: number;
+    };
 };

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

@@ -1,7 +1,7 @@
 import React from "react";
 import type { InputTextProps, InputTextRef } from "../InputText";
 export declare const InputSearch: React.ForwardRefExoticComponent<InputSearchProps & React.RefAttributes<InputTextRef>>;
-export interface InputSearchProps extends Pick<InputTextProps, "accessibilityHint" | "accessibilityLabel" | "autoFocus" | "placeholder" | "prefix"> {
+export interface InputSearchProps extends Pick<InputTextProps, "accessibilityHint" | "accessibilityLabel" | "autoFocus" | "placeholder" | "prefix" | "showMiniLabel"> {
     /**
      * A callback function that handles the update of the new value of the property value.
      */

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/InputText.d.ts

@@ -1,6 +1,6 @@
 import type { SyntheticEvent } from "react";
 import React from "react";
-import type { NativeSyntheticEvent, StyleProp, TextInputFocusEventData, TextInputProps, TextStyle } from "react-native";
+import type { FocusEvent, StyleProp, TextInputProps, TextStyle } from "react-native";
 import { TextInput } from "react-native";
 import type { RegisterOptions } from "react-hook-form";
 import type { IconNames } from "@jobber/design";
@@ -31,6 +31,14 @@ export interface InputTextProps extends Pick<InputFieldWrapperProps, "toolbar" |
      * Text that helps the user understand the input
      */
     readonly assistiveText?: string;
+    /**
+     * Controls the visibility of the mini label that appears inside the input
+     * when a value is entered. By default, the placeholder text moves up to
+     * become a mini label. Set to false to disable this behavior.
+     *
+     * @default true
+     */
+    readonly showMiniLabel?: boolean;
     /**
      * Determines what keyboard is shown
      */
@@ -65,7 +73,7 @@ export interface InputTextProps extends Pick<InputFieldWrapperProps, "toolbar" |
      * Callback that is called when the text input is focused
      * @param event
      */
-    readonly onFocus?: (event?: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+    readonly onFocus?: (event?: FocusEvent) => void;
     /**
      * Callback that is called when the text input is blurred
      */

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

@@ -14,4 +14,8 @@ export declare const useStyles: () => {
     multilineInputiOS: {
         paddingTop: number;
     };
+    multilineWithoutMiniLabel: {
+        paddingTop: number;
+        paddingBottom: number;
+    };
 };

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,8 +1,10 @@
+import React from "react";
 import type { UseControllerProps } from "react-hook-form";
 import type { XOR } from "ts-xor";
 import type { Clearable } from "@jobber/hooks";
 import type { InputFieldWrapperProps } from "../InputFieldWrapper";
-interface InputTimeBaseProps extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder"> {
+import type { InputPressableProps } from "../InputPressable/InputPressable";
+interface InputTimeBaseProps extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder">, Pick<InputPressableProps, "showMiniLabel"> {
     /**
      * Defaulted to "always" so user can clear the time whenever there's a value.
      */
@@ -57,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;
@@ -12,9 +13,13 @@ export interface MenuOptionProps {
 export interface MenuOptionInternalProps extends MenuOptionProps {
     setOpen: (bool: boolean) => void;
 }
+export interface CustomActivatorProps {
+    readonly onPress?: () => void;
+    readonly onLongPress?: () => void;
+}
 export interface MenuProps {
     readonly menuOptions?: MenuOptionProps[];
-    readonly customActivator?: JSX.Element;
+    readonly customActivator?: ReactElement<CustomActivatorProps>;
 }
 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

@@ -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;