react-native-ui-lib 8.1.8-snapshot.7635 → 8.1.8-snapshot.7643

package/src/components/baseInput/index.js

@@ -3,8 +3,11 @@ import _isString from "lodash/isString";
 import _isFunction from "lodash/isFunction";
 import _isArray from "lodash/isArray";
 import _get from "lodash/get";
-import _invoke from "lodash/invoke"; // @ts-nocheck
+import _invoke from "lodash/invoke";
+import _values from "lodash/values"; // @ts-nocheck
+import PropTypes from 'prop-types';
 import 'react';
+import { ViewPropTypes, TextInputPropTypes } from 'deprecated-react-native-prop-types';
 import { Colors, Typography } from "../../style";
 import { BaseComponent } from "../../commons";
 import Validators from "./Validators";
@@ -17,6 +20,51 @@ const VALIDATORS = {
 };
 export default class BaseInput extends BaseComponent {
   static displayName = 'BaseInput';
+  static propTypes = {
+    ...TextInputPropTypes,
+    // ...BaseComponent.propTypes,
+    /**
+     * text color
+     */
+    color: PropTypes.string,
+    /**
+     * text input container style
+     */
+    containerStyle: ViewPropTypes.style,
+    /**
+     * validator type or custom validator function
+     */
+    validate: PropTypes.oneOfType([PropTypes.oneOf(_values(VALIDATORS)),
+    // enum
+    PropTypes.func,
+    // custom
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(_values(VALIDATORS)), PropTypes.func])) // array of validators
+    ]),
+    /**
+     * Whether to mark required field with an asterisk
+     */
+    markRequired: PropTypes.bool,
+    /**
+     * the message to be displayed when the validation fails
+     */
+    errorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+    /**
+     * whether to run the validation on mount
+     */
+    validateOnStart: PropTypes.bool,
+    /**
+     * whether to run the validation on text changed
+     */
+    validateOnChange: PropTypes.bool,
+    /**
+     * whether to run the validation on blur
+     */
+    validateOnBlur: PropTypes.bool,
+    /**
+     * callback for validity change
+     */
+    onChangeValidity: PropTypes.func
+  };
   static defaultProps = {
     validateOnBlur: true
   };

package/src/components/button/index.d.ts

@@ -448,7 +448,7 @@ export { Button };
 declare const _default: React.ForwardRefExoticComponent<((import("../touchableOpacity").TouchableOpacityProps & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & Partial<Record<"transparent" | "black" | "white" | "dark" | "$backgroundDefault" | "$backgroundElevated" | "$backgroundElevatedLight" | "$backgroundNeutralHeavy" | "$backgroundNeutralIdle" | "$backgroundNeutralMedium" | "$backgroundNeutral" | "$backgroundNeutralLight" | "$backgroundPrimaryHeavy" | "$backgroundPrimaryMedium" | "$backgroundPrimaryLight" | "$backgroundGeneralHeavy" | "$backgroundGeneralMedium" | "$backgroundGeneralLight" | "$backgroundSuccessHeavy" | "$backgroundSuccessLight" | "$backgroundWarningHeavy" | "$backgroundWarningLight" | "$backgroundMajorLight" | "$backgroundMajorHeavy" | "$backgroundDangerHeavy" | "$backgroundDangerLight" | "$backgroundDisabled" | "$backgroundDark" | "$backgroundDarkElevated" | "$backgroundDarkActive" | "$backgroundInverted" | "$textDisabled" | "$textDefault" | "$textNeutralHeavy" | "$textNeutral" | "$textNeutralLight" | "$textDefaultLight" | "$textPrimary" | "$textGeneral" | "$textSuccess" | "$textSuccessLight" | "$textMajor" | "$textDanger" | "$textDangerLight" | "$iconDefault" | "$iconNeutral" | "$iconDefaultLight" | "$iconPrimary" | "$iconPrimaryLight" | "$iconGeneral" | "$iconGeneralLight" | "$iconSuccess" | "$iconSuccessLight" | "$iconMajor" | "$iconDanger" | "$iconDangerLight" | "$iconDisabled" | "$outlineDefault" | "$outlineDisabled" | "$outlineDisabledHeavy" | "$outlineNeutral" | "$outlineNeutralHeavy" | "$outlinePrimary" | "$outlinePrimaryMedium" | "$outlineGeneral" | "$outlineWarning" | "$outlineDanger" | "$outlineInverted" | "$black" | "$white" | "grey1" | "grey5" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue1" | "blue5" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green1" | "green5" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow1" | "yellow5" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange1" | "orange5" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red1" | "red5" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple1" | "purple5" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet1" | "violet5" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & Partial<Record<"bg-transparent" | "bg-black" | "bg-white" | "bg-dark" | "bg-$backgroundDefault" | "bg-$backgroundElevated" | "bg-$backgroundElevatedLight" | "bg-$backgroundNeutralHeavy" | "bg-$backgroundNeutralIdle" | "bg-$backgroundNeutralMedium" | "bg-$backgroundNeutral" | "bg-$backgroundNeutralLight" | "bg-$backgroundPrimaryHeavy" | "bg-$backgroundPrimaryMedium" | "bg-$backgroundPrimaryLight" | "bg-$backgroundGeneralHeavy" | "bg-$backgroundGeneralMedium" | "bg-$backgroundGeneralLight" | "bg-$backgroundSuccessHeavy" | "bg-$backgroundSuccessLight" | "bg-$backgroundWarningHeavy" | "bg-$backgroundWarningLight" | "bg-$backgroundMajorLight" | "bg-$backgroundMajorHeavy" | "bg-$backgroundDangerHeavy" | "bg-$backgroundDangerLight" | "bg-$backgroundDisabled" | "bg-$backgroundDark" | "bg-$backgroundDarkElevated" | "bg-$backgroundDarkActive" | "bg-$backgroundInverted" | "bg-$textDisabled" | "bg-$textDefault" | "bg-$textNeutralHeavy" | "bg-$textNeutral" | "bg-$textNeutralLight" | "bg-$textDefaultLight" | "bg-$textPrimary" | "bg-$textGeneral" | "bg-$textSuccess" | "bg-$textSuccessLight" | "bg-$textMajor" | "bg-$textDanger" | "bg-$textDangerLight" | "bg-$iconDefault" | "bg-$iconNeutral" | "bg-$iconDefaultLight" | "bg-$iconPrimary" | "bg-$iconPrimaryLight" | "bg-$iconGeneral" | "bg-$iconGeneralLight" | "bg-$iconSuccess" | "bg-$iconSuccessLight" | "bg-$iconMajor" | "bg-$iconDanger" | "bg-$iconDangerLight" | "bg-$iconDisabled" | "bg-$outlineDefault" | "bg-$outlineDisabled" | "bg-$outlineDisabledHeavy" | "bg-$outlineNeutral" | "bg-$outlineNeutralHeavy" | "bg-$outlinePrimary" | "bg-$outlinePrimaryMedium" | "bg-$outlineGeneral" | "bg-$outlineWarning" | "bg-$outlineDanger" | "bg-$outlineInverted" | "bg-$black" | "bg-$white" | "bg-grey1" | "bg-grey5" | "bg-grey10" | "bg-grey20" | "bg-grey30" | "bg-grey40" | "bg-grey50" | "bg-grey60" | "bg-grey70" | "bg-grey80" | "bg-blue1" | "bg-blue5" | "bg-blue10" | "bg-blue20" | "bg-blue30" | "bg-blue40" | "bg-blue50" | "bg-blue60" | "bg-blue70" | "bg-blue80" | "bg-cyan10" | "bg-cyan20" | "bg-cyan30" | "bg-cyan40" | "bg-cyan50" | "bg-cyan60" | "bg-cyan70" | "bg-cyan80" | "bg-green1" | "bg-green5" | "bg-green10" | "bg-green20" | "bg-green30" | "bg-green40" | "bg-green50" | "bg-green60" | "bg-green70" | "bg-green80" | "bg-yellow1" | "bg-yellow5" | "bg-yellow10" | "bg-yellow20" | "bg-yellow30" | "bg-yellow40" | "bg-yellow50" | "bg-yellow60" | "bg-yellow70" | "bg-yellow80" | "bg-orange1" | "bg-orange5" | "bg-orange10" | "bg-orange20" | "bg-orange30" | "bg-orange40" | "bg-orange50" | "bg-orange60" | "bg-orange70" | "bg-orange80" | "bg-red1" | "bg-red5" | "bg-red10" | "bg-red20" | "bg-red30" | "bg-red40" | "bg-red50" | "bg-red60" | "bg-red70" | "bg-red80" | "bg-purple1" | "bg-purple5" | "bg-purple10" | "bg-purple20" | "bg-purple30" | "bg-purple40" | "bg-purple50" | "bg-purple60" | "bg-purple70" | "bg-purple80" | "bg-violet1" | "bg-violet5" | "bg-violet10" | "bg-violet20" | "bg-violet30" | "bg-violet40" | "bg-violet50" | "bg-violet60" | "bg-violet70" | "bg-violet80", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
     label?: string | undefined;
     color?: string | undefined;
-    iconSource?: import("../image").ImageSourceType | ((iconStyle?: StyleProp<ImageStyle>[] | undefined) => React.JSX.Element) | null;
+    iconSource?: import("../image").ImageSourceType | ((iconStyle?: StyleProp<ImageStyle>[] | undefined) => JSX.Element) | null;
     iconStyle?: StyleProp<ImageStyle>;
     iconProps?: Partial<import("../icon").IconProps> | undefined;
     iconOnRight?: boolean | undefined;
@@ -479,7 +479,7 @@ declare const _default: React.ForwardRefExoticComponent<((import("../touchableOp
 }) | Omit<import("../touchableOpacity").TouchableOpacityProps & import("../../commons/modifiers").CustomModifier & Partial<Record<"bg-transparent" | "bg-black" | "bg-white" | "bg-dark" | "bg-$backgroundDefault" | "bg-$backgroundElevated" | "bg-$backgroundElevatedLight" | "bg-$backgroundNeutralHeavy" | "bg-$backgroundNeutralIdle" | "bg-$backgroundNeutralMedium" | "bg-$backgroundNeutral" | "bg-$backgroundNeutralLight" | "bg-$backgroundPrimaryHeavy" | "bg-$backgroundPrimaryMedium" | "bg-$backgroundPrimaryLight" | "bg-$backgroundGeneralHeavy" | "bg-$backgroundGeneralMedium" | "bg-$backgroundGeneralLight" | "bg-$backgroundSuccessHeavy" | "bg-$backgroundSuccessLight" | "bg-$backgroundWarningHeavy" | "bg-$backgroundWarningLight" | "bg-$backgroundMajorLight" | "bg-$backgroundMajorHeavy" | "bg-$backgroundDangerHeavy" | "bg-$backgroundDangerLight" | "bg-$backgroundDisabled" | "bg-$backgroundDark" | "bg-$backgroundDarkElevated" | "bg-$backgroundDarkActive" | "bg-$backgroundInverted" | "bg-$textDisabled" | "bg-$textDefault" | "bg-$textNeutralHeavy" | "bg-$textNeutral" | "bg-$textNeutralLight" | "bg-$textDefaultLight" | "bg-$textPrimary" | "bg-$textGeneral" | "bg-$textSuccess" | "bg-$textSuccessLight" | "bg-$textMajor" | "bg-$textDanger" | "bg-$textDangerLight" | "bg-$iconDefault" | "bg-$iconNeutral" | "bg-$iconDefaultLight" | "bg-$iconPrimary" | "bg-$iconPrimaryLight" | "bg-$iconGeneral" | "bg-$iconGeneralLight" | "bg-$iconSuccess" | "bg-$iconSuccessLight" | "bg-$iconMajor" | "bg-$iconDanger" | "bg-$iconDangerLight" | "bg-$iconDisabled" | "bg-$outlineDefault" | "bg-$outlineDisabled" | "bg-$outlineDisabledHeavy" | "bg-$outlineNeutral" | "bg-$outlineNeutralHeavy" | "bg-$outlinePrimary" | "bg-$outlinePrimaryMedium" | "bg-$outlineGeneral" | "bg-$outlineWarning" | "bg-$outlineDanger" | "bg-$outlineInverted" | "bg-$black" | "bg-$white" | "bg-grey1" | "bg-grey5" | "bg-grey10" | "bg-grey20" | "bg-grey30" | "bg-grey40" | "bg-grey50" | "bg-grey60" | "bg-grey70" | "bg-grey80" | "bg-blue1" | "bg-blue5" | "bg-blue10" | "bg-blue20" | "bg-blue30" | "bg-blue40" | "bg-blue50" | "bg-blue60" | "bg-blue70" | "bg-blue80" | "bg-cyan10" | "bg-cyan20" | "bg-cyan30" | "bg-cyan40" | "bg-cyan50" | "bg-cyan60" | "bg-cyan70" | "bg-cyan80" | "bg-green1" | "bg-green5" | "bg-green10" | "bg-green20" | "bg-green30" | "bg-green40" | "bg-green50" | "bg-green60" | "bg-green70" | "bg-green80" | "bg-yellow1" | "bg-yellow5" | "bg-yellow10" | "bg-yellow20" | "bg-yellow30" | "bg-yellow40" | "bg-yellow50" | "bg-yellow60" | "bg-yellow70" | "bg-yellow80" | "bg-orange1" | "bg-orange5" | "bg-orange10" | "bg-orange20" | "bg-orange30" | "bg-orange40" | "bg-orange50" | "bg-orange60" | "bg-orange70" | "bg-orange80" | "bg-red1" | "bg-red5" | "bg-red10" | "bg-red20" | "bg-red30" | "bg-red40" | "bg-red50" | "bg-red60" | "bg-red70" | "bg-red80" | "bg-purple1" | "bg-purple5" | "bg-purple10" | "bg-purple20" | "bg-purple30" | "bg-purple40" | "bg-purple50" | "bg-purple60" | "bg-purple70" | "bg-purple80" | "bg-violet1" | "bg-violet5" | "bg-violet10" | "bg-violet20" | "bg-violet30" | "bg-violet40" | "bg-violet50" | "bg-violet60" | "bg-violet70" | "bg-violet80", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
     label?: string | undefined;
     color?: string | undefined;
-    iconSource?: import("../image").ImageSourceType | ((iconStyle?: StyleProp<ImageStyle>[] | undefined) => React.JSX.Element) | null;
+    iconSource?: import("../image").ImageSourceType | ((iconStyle?: StyleProp<ImageStyle>[] | undefined) => JSX.Element) | null;
     iconStyle?: StyleProp<ImageStyle>;
     iconProps?: Partial<import("../icon").IconProps> | undefined;
     iconOnRight?: boolean | undefined;
@@ -510,7 +510,7 @@ declare const _default: React.ForwardRefExoticComponent<((import("../touchableOp
 }, "ref"> | Omit<import("../touchableOpacity").TouchableOpacityProps & import("../../commons/modifiers").CustomModifier & Partial<Record<"transparent" | "black" | "white" | "dark" | "$backgroundDefault" | "$backgroundElevated" | "$backgroundElevatedLight" | "$backgroundNeutralHeavy" | "$backgroundNeutralIdle" | "$backgroundNeutralMedium" | "$backgroundNeutral" | "$backgroundNeutralLight" | "$backgroundPrimaryHeavy" | "$backgroundPrimaryMedium" | "$backgroundPrimaryLight" | "$backgroundGeneralHeavy" | "$backgroundGeneralMedium" | "$backgroundGeneralLight" | "$backgroundSuccessHeavy" | "$backgroundSuccessLight" | "$backgroundWarningHeavy" | "$backgroundWarningLight" | "$backgroundMajorLight" | "$backgroundMajorHeavy" | "$backgroundDangerHeavy" | "$backgroundDangerLight" | "$backgroundDisabled" | "$backgroundDark" | "$backgroundDarkElevated" | "$backgroundDarkActive" | "$backgroundInverted" | "$textDisabled" | "$textDefault" | "$textNeutralHeavy" | "$textNeutral" | "$textNeutralLight" | "$textDefaultLight" | "$textPrimary" | "$textGeneral" | "$textSuccess" | "$textSuccessLight" | "$textMajor" | "$textDanger" | "$textDangerLight" | "$iconDefault" | "$iconNeutral" | "$iconDefaultLight" | "$iconPrimary" | "$iconPrimaryLight" | "$iconGeneral" | "$iconGeneralLight" | "$iconSuccess" | "$iconSuccessLight" | "$iconMajor" | "$iconDanger" | "$iconDangerLight" | "$iconDisabled" | "$outlineDefault" | "$outlineDisabled" | "$outlineDisabledHeavy" | "$outlineNeutral" | "$outlineNeutralHeavy" | "$outlinePrimary" | "$outlinePrimaryMedium" | "$outlineGeneral" | "$outlineWarning" | "$outlineDanger" | "$outlineInverted" | "$black" | "$white" | "grey1" | "grey5" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue1" | "blue5" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green1" | "green5" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow1" | "yellow5" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange1" | "orange5" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red1" | "red5" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple1" | "purple5" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet1" | "violet5" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & Partial<Record<"bg-transparent" | "bg-black" | "bg-white" | "bg-dark" | "bg-$backgroundDefault" | "bg-$backgroundElevated" | "bg-$backgroundElevatedLight" | "bg-$backgroundNeutralHeavy" | "bg-$backgroundNeutralIdle" | "bg-$backgroundNeutralMedium" | "bg-$backgroundNeutral" | "bg-$backgroundNeutralLight" | "bg-$backgroundPrimaryHeavy" | "bg-$backgroundPrimaryMedium" | "bg-$backgroundPrimaryLight" | "bg-$backgroundGeneralHeavy" | "bg-$backgroundGeneralMedium" | "bg-$backgroundGeneralLight" | "bg-$backgroundSuccessHeavy" | "bg-$backgroundSuccessLight" | "bg-$backgroundWarningHeavy" | "bg-$backgroundWarningLight" | "bg-$backgroundMajorLight" | "bg-$backgroundMajorHeavy" | "bg-$backgroundDangerHeavy" | "bg-$backgroundDangerLight" | "bg-$backgroundDisabled" | "bg-$backgroundDark" | "bg-$backgroundDarkElevated" | "bg-$backgroundDarkActive" | "bg-$backgroundInverted" | "bg-$textDisabled" | "bg-$textDefault" | "bg-$textNeutralHeavy" | "bg-$textNeutral" | "bg-$textNeutralLight" | "bg-$textDefaultLight" | "bg-$textPrimary" | "bg-$textGeneral" | "bg-$textSuccess" | "bg-$textSuccessLight" | "bg-$textMajor" | "bg-$textDanger" | "bg-$textDangerLight" | "bg-$iconDefault" | "bg-$iconNeutral" | "bg-$iconDefaultLight" | "bg-$iconPrimary" | "bg-$iconPrimaryLight" | "bg-$iconGeneral" | "bg-$iconGeneralLight" | "bg-$iconSuccess" | "bg-$iconSuccessLight" | "bg-$iconMajor" | "bg-$iconDanger" | "bg-$iconDangerLight" | "bg-$iconDisabled" | "bg-$outlineDefault" | "bg-$outlineDisabled" | "bg-$outlineDisabledHeavy" | "bg-$outlineNeutral" | "bg-$outlineNeutralHeavy" | "bg-$outlinePrimary" | "bg-$outlinePrimaryMedium" | "bg-$outlineGeneral" | "bg-$outlineWarning" | "bg-$outlineDanger" | "bg-$outlineInverted" | "bg-$black" | "bg-$white" | "bg-grey1" | "bg-grey5" | "bg-grey10" | "bg-grey20" | "bg-grey30" | "bg-grey40" | "bg-grey50" | "bg-grey60" | "bg-grey70" | "bg-grey80" | "bg-blue1" | "bg-blue5" | "bg-blue10" | "bg-blue20" | "bg-blue30" | "bg-blue40" | "bg-blue50" | "bg-blue60" | "bg-blue70" | "bg-blue80" | "bg-cyan10" | "bg-cyan20" | "bg-cyan30" | "bg-cyan40" | "bg-cyan50" | "bg-cyan60" | "bg-cyan70" | "bg-cyan80" | "bg-green1" | "bg-green5" | "bg-green10" | "bg-green20" | "bg-green30" | "bg-green40" | "bg-green50" | "bg-green60" | "bg-green70" | "bg-green80" | "bg-yellow1" | "bg-yellow5" | "bg-yellow10" | "bg-yellow20" | "bg-yellow30" | "bg-yellow40" | "bg-yellow50" | "bg-yellow60" | "bg-yellow70" | "bg-yellow80" | "bg-orange1" | "bg-orange5" | "bg-orange10" | "bg-orange20" | "bg-orange30" | "bg-orange40" | "bg-orange50" | "bg-orange60" | "bg-orange70" | "bg-orange80" | "bg-red1" | "bg-red5" | "bg-red10" | "bg-red20" | "bg-red30" | "bg-red40" | "bg-red50" | "bg-red60" | "bg-red70" | "bg-red80" | "bg-purple1" | "bg-purple5" | "bg-purple10" | "bg-purple20" | "bg-purple30" | "bg-purple40" | "bg-purple50" | "bg-purple60" | "bg-purple70" | "bg-purple80" | "bg-violet1" | "bg-violet5" | "bg-violet10" | "bg-violet20" | "bg-violet30" | "bg-violet40" | "bg-violet50" | "bg-violet60" | "bg-violet70" | "bg-violet80", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
     label?: string | undefined;
     color?: string | undefined;
-    iconSource?: import("../image").ImageSourceType | ((iconStyle?: StyleProp<ImageStyle>[] | undefined) => React.JSX.Element) | null;
+    iconSource?: import("../image").ImageSourceType | ((iconStyle?: StyleProp<ImageStyle>[] | undefined) => JSX.Element) | null;
     iconStyle?: StyleProp<ImageStyle>;
     iconProps?: Partial<import("../icon").IconProps> | undefined;
     iconOnRight?: boolean | undefined;
@@ -541,7 +541,7 @@ declare const _default: React.ForwardRefExoticComponent<((import("../touchableOp
 }, "ref"> | Omit<import("../touchableOpacity").TouchableOpacityProps & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & import("../../commons/modifiers").CustomModifier & Partial<Record<"bg-transparent" | "bg-black" | "bg-white" | "bg-dark" | "bg-$backgroundDefault" | "bg-$backgroundElevated" | "bg-$backgroundElevatedLight" | "bg-$backgroundNeutralHeavy" | "bg-$backgroundNeutralIdle" | "bg-$backgroundNeutralMedium" | "bg-$backgroundNeutral" | "bg-$backgroundNeutralLight" | "bg-$backgroundPrimaryHeavy" | "bg-$backgroundPrimaryMedium" | "bg-$backgroundPrimaryLight" | "bg-$backgroundGeneralHeavy" | "bg-$backgroundGeneralMedium" | "bg-$backgroundGeneralLight" | "bg-$backgroundSuccessHeavy" | "bg-$backgroundSuccessLight" | "bg-$backgroundWarningHeavy" | "bg-$backgroundWarningLight" | "bg-$backgroundMajorLight" | "bg-$backgroundMajorHeavy" | "bg-$backgroundDangerHeavy" | "bg-$backgroundDangerLight" | "bg-$backgroundDisabled" | "bg-$backgroundDark" | "bg-$backgroundDarkElevated" | "bg-$backgroundDarkActive" | "bg-$backgroundInverted" | "bg-$textDisabled" | "bg-$textDefault" | "bg-$textNeutralHeavy" | "bg-$textNeutral" | "bg-$textNeutralLight" | "bg-$textDefaultLight" | "bg-$textPrimary" | "bg-$textGeneral" | "bg-$textSuccess" | "bg-$textSuccessLight" | "bg-$textMajor" | "bg-$textDanger" | "bg-$textDangerLight" | "bg-$iconDefault" | "bg-$iconNeutral" | "bg-$iconDefaultLight" | "bg-$iconPrimary" | "bg-$iconPrimaryLight" | "bg-$iconGeneral" | "bg-$iconGeneralLight" | "bg-$iconSuccess" | "bg-$iconSuccessLight" | "bg-$iconMajor" | "bg-$iconDanger" | "bg-$iconDangerLight" | "bg-$iconDisabled" | "bg-$outlineDefault" | "bg-$outlineDisabled" | "bg-$outlineDisabledHeavy" | "bg-$outlineNeutral" | "bg-$outlineNeutralHeavy" | "bg-$outlinePrimary" | "bg-$outlinePrimaryMedium" | "bg-$outlineGeneral" | "bg-$outlineWarning" | "bg-$outlineDanger" | "bg-$outlineInverted" | "bg-$black" | "bg-$white" | "bg-grey1" | "bg-grey5" | "bg-grey10" | "bg-grey20" | "bg-grey30" | "bg-grey40" | "bg-grey50" | "bg-grey60" | "bg-grey70" | "bg-grey80" | "bg-blue1" | "bg-blue5" | "bg-blue10" | "bg-blue20" | "bg-blue30" | "bg-blue40" | "bg-blue50" | "bg-blue60" | "bg-blue70" | "bg-blue80" | "bg-cyan10" | "bg-cyan20" | "bg-cyan30" | "bg-cyan40" | "bg-cyan50" | "bg-cyan60" | "bg-cyan70" | "bg-cyan80" | "bg-green1" | "bg-green5" | "bg-green10" | "bg-green20" | "bg-green30" | "bg-green40" | "bg-green50" | "bg-green60" | "bg-green70" | "bg-green80" | "bg-yellow1" | "bg-yellow5" | "bg-yellow10" | "bg-yellow20" | "bg-yellow30" | "bg-yellow40" | "bg-yellow50" | "bg-yellow60" | "bg-yellow70" | "bg-yellow80" | "bg-orange1" | "bg-orange5" | "bg-orange10" | "bg-orange20" | "bg-orange30" | "bg-orange40" | "bg-orange50" | "bg-orange60" | "bg-orange70" | "bg-orange80" | "bg-red1" | "bg-red5" | "bg-red10" | "bg-red20" | "bg-red30" | "bg-red40" | "bg-red50" | "bg-red60" | "bg-red70" | "bg-red80" | "bg-purple1" | "bg-purple5" | "bg-purple10" | "bg-purple20" | "bg-purple30" | "bg-purple40" | "bg-purple50" | "bg-purple60" | "bg-purple70" | "bg-purple80" | "bg-violet1" | "bg-violet5" | "bg-violet10" | "bg-violet20" | "bg-violet30" | "bg-violet40" | "bg-violet50" | "bg-violet60" | "bg-violet70" | "bg-violet80", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
     label?: string | undefined;
     color?: string | undefined;
-    iconSource?: import("../image").ImageSourceType | ((iconStyle?: StyleProp<ImageStyle>[] | undefined) => React.JSX.Element) | null;
+    iconSource?: import("../image").ImageSourceType | ((iconStyle?: StyleProp<ImageStyle>[] | undefined) => JSX.Element) | null;
     iconStyle?: StyleProp<ImageStyle>;
     iconProps?: Partial<import("../icon").IconProps> | undefined;
     iconOnRight?: boolean | undefined;

package/src/components/button/types.d.ts

@@ -1,7 +1,7 @@
+/// <reference types="react" />
 import { ImageStyle, TextStyle, StyleProp } from 'react-native';
 import { BaseComponentInjectedProps, ForwardRefInjectedProps, TypographyModifiers, ColorsModifiers, BackgroundColorModifier, MarginModifiers } from '../../commons/new';
 import { TouchableOpacityProps } from '../touchableOpacity';
-import type { JSX } from 'react';
 import { TextProps } from '../text';
 import { ImageProps } from '../image';
 import type { IconProps } from '../icon';
@@ -140,7 +140,7 @@ export type ButtonProps = TouchableOpacityProps & TypographyModifiers & ColorsMo
     /**
      * Custom element to render as button background (takes precedence over backgroundColor)
      */
-    customBackground?: React.ReactElement<any>;
+    customBackground?: React.ReactElement;
 };
 export type ButtonState = {
     size?: number;

package/src/components/carousel/index.d.ts

@@ -1,4 +1,4 @@
-import React, { Component, RefObject, ReactNode, Key, type JSX } from 'react';
+import React, { Component, RefObject, ReactNode, Key } from 'react';
 import { ScrollView, LayoutChangeEvent, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
 import { CarouselProps, CarouselState, PageControlPosition } from './types';
 export { CarouselProps, PageControlPosition };
@@ -15,7 +15,7 @@ declare class Carousel extends Component<CarouselProps, CarouselState> {
     static displayName: string;
     static defaultProps: DefaultProps;
     static pageControlPositions: typeof PageControlPosition;
-    carousel: RefObject<ScrollView | null>;
+    carousel: RefObject<ScrollView>;
     autoplayTimer?: ReturnType<typeof setTimeout>;
     orientationChange?: boolean;
     skippedInitialScroll?: boolean;
@@ -49,7 +49,7 @@ declare class Carousel extends Component<CarouselProps, CarouselState> {
     goToNextPage(): void;
     getCalcIndex(index: number): number;
     getSnapToOffsets: () => number[] | undefined;
-    getInitialContentOffset: (snapToOffsets: number[] | undefined) => import("./types").PointPropType;
+    getInitialContentOffset: (snapToOffsets: number[] | undefined) => PointPropType;
     shouldUsePageWidth(): number | false | undefined;
     shouldEnablePagination(): boolean | undefined;
     shouldAllowAccessibilityLayout(): boolean | undefined;
@@ -60,11 +60,11 @@ declare class Carousel extends Component<CarouselProps, CarouselState> {
     onScrollEvent: (...args: any[]) => void;
     renderChild: (child: ReactNode, key: Key) => JSX.Element | undefined;
     renderChildren(): JSX.Element[] | null | undefined;
-    renderPageControl(): JSX.Element | undefined;
-    renderCounter(): JSX.Element | undefined;
-    renderAccessibleLayout(): JSX.Element;
-    renderCarousel(): JSX.Element;
-    render(): JSX.Element;
+    renderPageControl(): React.JSX.Element | undefined;
+    renderCounter(): React.JSX.Element | undefined;
+    renderAccessibleLayout(): React.JSX.Element;
+    renderCarousel(): React.JSX.Element;
+    render(): React.JSX.Element;
 }
 export { Carousel };
 declare const _default: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<any>> & Carousel & {

package/src/components/carousel/types.d.ts

@@ -1,13 +1,10 @@
 import { ScrollViewProps, StyleProp, ViewStyle, NativeSyntheticEvent, NativeScrollEvent, Animated } from 'react-native';
+import { PointPropType } from 'deprecated-react-native-prop-types';
 import { PageControlProps } from '../pageControl';
 export declare enum PageControlPosition {
     OVER = "over",
     UNDER = "under"
 }
-export type PointPropType = {
-    x: number;
-    y: number;
-};
 export interface CarouselProps extends ScrollViewProps {
     /**
      * the first page to start with

package/src/components/carousel/types.js

@@ -1,3 +1,5 @@
+// @ts-expect-error No typings available for 'deprecated-react-native-prop-types'
+
 export let PageControlPosition = /*#__PURE__*/function (PageControlPosition) {
   PageControlPosition["OVER"] = "over";
   PageControlPosition["UNDER"] = "under";

package/src/components/chip/index.d.ts

@@ -1,4 +1,4 @@
-import React, { type JSX } from 'react';
+import React from 'react';
 import { StyleProp, ViewStyle, ViewProps, ImageStyle, TextStyle, ImageSourcePropType } from 'react-native';
 import { AvatarProps } from '../avatar';
 import { BadgeProps } from '../badge';

package/src/components/colorPalette/index.d.ts

@@ -73,7 +73,7 @@ declare class ColorPalette extends PureComponent<Props, State> {
         backgroundColor: string;
     };
     constructor(props: Props);
-    carousel: React.RefObject<typeof Carousel | null>;
+    carousel: React.RefObject<typeof Carousel>;
     scrollBar: React.RefObject<any>;
     itemsRefs?: any;
     selectedColorIndex?: number;

package/src/components/dateTimePicker/index.d.ts

@@ -66,7 +66,7 @@ export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | '
      */
     renderInput?: (props: Omit<DateTimePickerProps, 'value'> & {
         value?: string;
-    }) => React.ReactElement<any>;
+    }) => React.ReactElement;
     /**
      * Override system theme variant (dark or light mode) used by the date picker.
      */
@@ -164,7 +164,7 @@ declare const DateTimePicker: React.ForwardRefExoticComponent<OldApiProps & Omit
      */
     renderInput?: ((props: Omit<DateTimePickerProps, 'value'> & {
         value?: string;
-    }) => React.ReactElement<any>) | undefined;
+    }) => React.ReactElement) | undefined;
     /**
      * Override system theme variant (dark or light mode) used by the date picker.
      */

package/src/components/dateTimePicker/index.js

@@ -53,8 +53,8 @@ const DateTimePicker = forwardRef((props, ref) => {
   } = props;
   const [value, setValue] = useState(propsValue);
   const chosenDate = useRef(propsValue);
-  const expandable = useRef(undefined);
-  const textField = useRef(undefined);
+  const expandable = useRef();
+  const textField = useRef();
   useImperativeHandle(ref, () => {
     return {
       isValid: () => textField.current?.isValid(),

package/src/components/dialog/types.d.ts

@@ -45,19 +45,19 @@ export interface DialogHeaderProps extends ViewProps {
     /**
      * Pass to render a leading element
      */
-    leadingAccessory?: ReactElement<any>;
+    leadingAccessory?: ReactElement;
     /**
      * Pass to render a trailing element
      */
-    trailingAccessory?: ReactElement<any>;
+    trailingAccessory?: ReactElement;
     /**
      * Pass to render a top element above the title
      */
-    topAccessory?: ReactElement<any>;
+    topAccessory?: ReactElement;
     /**
      * Pass to render a bottom element below the subtitle
      */
-    bottomAccessory?: ReactElement<any>;
+    bottomAccessory?: ReactElement;
     /**
      * Style for the leading + content + trailing components (without the topAccessory\bottomAccessory)
      */

package/src/components/drawer/index.d.ts

@@ -126,7 +126,7 @@ declare class Drawer extends PureComponent<DrawerProps> {
     };
     leftRender: SwipeableProps['renderLeftActions'];
     rightRender: SwipeableProps['renderLeftActions'];
-    _swipeableRow: RefObject<Swipeable | null>;
+    _swipeableRow: RefObject<Swipeable>;
     animationOptions: SwipeableProps['animationOptions'];
     leftActionX: Animated.Value;
     constructor(props: DrawerProps);

package/src/components/expandableSection/index.d.ts

@@ -1,4 +1,4 @@
-import React, { type JSX } from 'react';
+import React from 'react';
 export type ExpandableSectionProps = {
     /**
      * expandableSection header element
@@ -36,5 +36,5 @@ export type ExpandableSectionProps = {
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ExpandableSectionScreen.tsx
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ExpandableSection/ExpandableSection.gif?raw=true
  */
-declare function ExpandableSection(props: ExpandableSectionProps): JSX.Element;
+declare function ExpandableSection(props: ExpandableSectionProps): React.JSX.Element;
 export default ExpandableSection;

package/src/components/fadedScrollView/index.js

@@ -20,7 +20,7 @@ const FadedScrollView = props => {
     ...others
   } = props;
   const ScrollView = useGesture ? GestureScrollView : RNScrollView;
-  const scrollViewRef = useRef(undefined);
+  const scrollViewRef = useRef();
   const horizontal = propsHorizontal ?? false;
   const {
     onContentSizeChange,

package/src/components/featureHighlight/index.js

@@ -200,12 +200,16 @@ class FeatureHighlight extends Component {
         {title && <Text text60 style={[styles.title, {
         color,
         marginBottom: message ? titleBottomMargin : messageBottomMargin
-      }, titleStyle]} numberOfLines={titleNumberOfLines} pointerEvents={'none'}>
+      }, titleStyle]} numberOfLines={titleNumberOfLines}
+      // @ts-expect-error
+      pointerEvents={'none'}>
             {title}
           </Text>}
         {message && <Text text70 style={[styles.message, {
         color
-      }, messageStyle]} numberOfLines={messageNumberOfLines} pointerEvents={'none'}>
+      }, messageStyle]} numberOfLines={messageNumberOfLines}
+      // @ts-expect-error
+      pointerEvents={'none'}>
             {message}
           </Text>}
         <Button label={defaultButtonLabel} size={ButtonSize.medium} labelStyle={{
@@ -240,9 +244,7 @@ class FeatureHighlight extends Component {
           {pageControlProps ? <View flex bottom>
               <PageControl {...pageControlProps} containerStyle={{
             marginBottom: 24
-          }} ref={r => {
-            this.viewRef = r;
-          }} />
+          }} ref={r => this.viewRef = r} />
               <View accessible accessibilityLabel={'dismiss button'} />
             </View> : <View flex accessible accessibilityLabel={'dismiss'} accessibilityRole={'button'} />}
         </TouchableWithoutFeedback>

package/src/components/gridListItem/index.d.ts

@@ -21,7 +21,7 @@ export interface GridListItemProps {
     /**
      * Custom GridListItem to be rendered in the GridView
      */
-    renderCustomItem?: () => React.ReactElement<any>;
+    renderCustomItem?: () => React.ReactElement;
     /**
      * The item size
      */
@@ -29,7 +29,7 @@ export interface GridListItemProps {
     /**
      * Title content text
      */
-    title?: string | React.ReactElement<any>;
+    title?: string | React.ReactElement;
     /**
      * Title content typography
      */
@@ -45,7 +45,7 @@ export interface GridListItemProps {
     /**
      * Subtitle content text
      */
-    subtitle?: string | React.ReactElement<any>;
+    subtitle?: string | React.ReactElement;
     /**
      * Subtitle content typography
      */
@@ -61,7 +61,7 @@ export interface GridListItemProps {
     /**
      * Description content text
      */
-    description?: string | React.ReactElement<any>;
+    description?: string | React.ReactElement;
     /**
      * Description content typography
      */
@@ -101,12 +101,12 @@ export interface GridListItemProps {
     /**
      * Renders an overlay on top of the image
      */
-    renderOverlay?: () => React.ReactElement<any>;
+    renderOverlay?: () => React.ReactElement;
     /**
      * Test ID for component
      */
     testID?: string;
-    children?: React.ReactElement<any> | React.ReactElement<any>[];
+    children?: React.ReactElement | React.ReactElement[];
 }
 /**
  * @description: A single grid view/list item component
@@ -122,7 +122,7 @@ declare class GridListItem extends Component<GridListItemProps> {
     onItemPress: () => void;
     getItemSizeObj(): ImageSize;
     getContainerHorizontalAlignment: (this: any, horizontalAlignment: any) => "center" | "flex-start" | "flex-end" | undefined;
-    renderContent(text: string | React.ReactElement<any> | undefined, textProps: Partial<TextProps>): React.JSX.Element | undefined;
+    renderContent(text: string | React.ReactElement | undefined, textProps: Partial<TextProps>): React.JSX.Element | undefined;
     render(): React.JSX.Element;
 }
 export default GridListItem;

package/src/components/gridView/index.d.ts

@@ -39,7 +39,7 @@ export interface GridViewProps {
     /**
      * Pass to render a custom item
      */
-    renderCustomItem?: (item: GridListItemProps) => React.ReactElement<any>;
+    renderCustomItem?: (item: GridListItemProps) => React.ReactElement;
 }
 interface GridViewState {
     viewWidth: number;

package/src/components/hint/HintBubble.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { View as RNView, LayoutChangeEvent } from 'react-native';
 import { HintProps } from './types';
 interface HintBubbleProps extends Pick<HintProps, 'testID' | 'visible' | 'message' | 'messageStyle' | 'color' | 'removePaddings' | 'enableShadow' | 'borderRadius' | 'iconStyle' | 'icon' | 'customContent'> {
-    hintRef: React.RefObject<RNView | null>;
+    hintRef: React.RefObject<RNView>;
     setHintLayout: (layoutChangeEvent: LayoutChangeEvent) => void;
     hintPositionStyle: {
         left: number;

package/src/components/hint/HintOld.d.ts

@@ -1,4 +1,4 @@
-import React, { Component, ReactElement, ElementRef, type JSX } from 'react';
+import React, { Component, ReactElement, ElementRef } from 'react';
 import { Animated, GestureResponderEvent, ImageSourcePropType, ImageStyle, StyleProp, TextStyle, ViewStyle, LayoutChangeEvent, View as RNView } from 'react-native';
 declare enum TARGET_POSITIONS {
     LEFT = "left",
@@ -18,7 +18,7 @@ interface HintTargetFrame {
 type Position = Pick<ViewStyle, 'top' | 'bottom' | 'left' | 'right'>;
 type HintPositionStyle = Position & Pick<ViewStyle, 'alignItems'>;
 type Paddings = Pick<ViewStyle, 'paddingLeft' | 'paddingRight' | 'paddingVertical' | 'paddingHorizontal'>;
-type ContentType = string | ReactElement<any>;
+type ContentType = string | ReactElement;
 export interface HintProps {
     /**
      * Control the visibility of the hint
@@ -130,7 +130,7 @@ declare class Hint extends Component<HintProps, HintState> {
     };
     static positions: typeof HintPositions;
     targetRef: ElementRef<typeof RNView> | null;
-    hintRef: React.RefObject<RNView | null>;
+    hintRef: React.RefObject<RNView>;
     animationDuration: number;
     state: {
         targetLayoutInWindow: {
@@ -183,14 +183,14 @@ declare class Hint extends Component<HintProps, HintState> {
     getTipPosition(): Position;
     getHintOffsetForShortMessage: () => number;
     isUsingModal: () => boolean | undefined;
-    renderOverlay(): JSX.Element | undefined;
-    renderHintTip(): JSX.Element;
-    renderHint(): JSX.Element;
-    renderHintContainer(): JSX.Element | undefined;
-    renderHintAnchor(): JSX.Element;
-    renderMockChildren(): JSX.Element | undefined;
+    renderOverlay(): React.JSX.Element | undefined;
+    renderHintTip(): React.JSX.Element;
+    renderHint(): React.JSX.Element;
+    renderHintContainer(): React.JSX.Element | undefined;
+    renderHintAnchor(): React.JSX.Element;
+    renderMockChildren(): React.JSX.Element | undefined;
     renderChildren(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    render(): string | number | bigint | true | JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null;
+    render(): string | number | true | React.JSX.Element | Iterable<React.ReactNode> | null;
 }
 declare const _default: React.ForwardRefExoticComponent<HintProps & React.RefAttributes<any>> & typeof Hint;
 export default _default;

package/src/components/hint/hooks/useHintLayout.d.ts

@@ -6,7 +6,7 @@ export default function useHintLayout({ onBackgroundPress, targetFrame }: UseHin
     targetLayoutState: LayoutRectangle | undefined;
     targetLayoutInWindowState: LayoutRectangle | undefined;
     hintMessageWidth: number | undefined;
-    targetRef: import("react").RefObject<RNView | null>;
+    targetRef: import("react").MutableRefObject<RNView | null>;
     onTargetLayout: ({ nativeEvent: { layout } }: LayoutChangeEvent) => void;
     setHintLayout: ({ nativeEvent: { layout } }: LayoutChangeEvent) => void;
 };

package/src/components/hint/index.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { HintPositions, HintProps } from './types';
 declare const Hint: {
-    (props: HintProps): string | number | bigint | true | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null;
+    (props: HintProps): string | number | true | React.JSX.Element | Iterable<React.ReactNode> | null;
     displayName: string;
     positions: typeof HintPositions;
 };
 export { HintProps, Hint };
 declare const _default: React.ForwardRefExoticComponent<HintProps & React.RefAttributes<any>> & {
-    (props: HintProps): string | number | bigint | true | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null;
+    (props: HintProps): string | number | true | React.JSX.Element | Iterable<React.ReactNode> | null;
     displayName: string;
     positions: typeof HintPositions;
 };

package/src/components/hint/types.d.ts

@@ -1,9 +1,9 @@
-import type { ReactElement, JSX } from 'react';
+import type { ReactElement } from 'react';
 import type { GestureResponderEvent, ImageSourcePropType, ImageStyle, LayoutRectangle, StyleProp, TextStyle, ViewStyle } from 'react-native';
 export type PositionStyle = Pick<ViewStyle, 'top' | 'bottom' | 'left' | 'right'>;
 export type LayoutStyle = PositionStyle & Pick<ViewStyle, 'alignItems'>;
 export type PaddingsStyle = Pick<ViewStyle, 'paddingLeft' | 'paddingRight' | 'paddingVertical' | 'paddingHorizontal'>;
-export type ContentType = string | ReactElement<any>;
+export type ContentType = string | ReactElement;
 export declare enum TargetAlignments {
     LEFT = "left",
     RIGHT = "right",

package/src/components/icon/index.js

@@ -74,6 +74,9 @@ const Icon = forwardRef((props, ref) => {
     </>;
 });
 Icon.displayName = 'Icon';
+Icon.defaultProps = {
+  assetGroup: 'icons'
+};
 export default asBaseComponent(Icon, {
   modifiersOptions: {
     margins: true

package/src/components/image/index.d.ts

@@ -50,7 +50,7 @@ export type ImageProps = Omit<RNImageProps, 'source'> & Pick<ImageBackgroundProp
     /**
      * Render an overlay with custom content
      */
-    customOverlayContent?: React.ReactElement<any> | React.ReactElement<any>[];
+    customOverlayContent?: React.ReactElement | React.ReactElement[];
     /**
      * Default image source in case of an error
      */

package/src/components/image/index.js

@@ -158,27 +158,24 @@ class Image extends PureComponent {
     const {
       margins
     } = modifiers;
-    return <ImageView
-    // @ts-expect-error TODO: this error emanates from the fact that
-    // RNImage does not support `resizeMode` inside styles.containImage
-    // I think this is too complex for TS to handle as using inline style
-    // solves it. It is probably possible to refactor and solve it, but
-    // I feel it is not worth the risk ATM.
-    style={[tintColor && {
-      tintColor
-    }, shouldFlipRTL && styles.rtlFlipped, width ? {
-      width
-    } : undefined, height ? {
-      height
-    } : undefined, borderRadius ? {
-      borderRadius
-    } : undefined, cover && styles.coverImage, this.isGif() && styles.gifImage, aspectRatio ? {
-      aspectRatio
-    } : undefined, !useImageInsideContainer && margins, useImageInsideContainer && styles.containImage, style, useImageInsideContainer && styles.shrink]} accessible={false} accessibilityRole={'image'} fsTagName={recorderTag} {...others}
-    // NOTE: imageStyle prop is only relevant for when rendering ImageBackground component
-    imageStyle={this.getImageStyle()} onError={this.onError} source={source}>
+    return (
+      // @ts-ignore
+      <ImageView style={[tintColor && {
+        tintColor
+      }, shouldFlipRTL && styles.rtlFlipped, width && {
+        width
+      }, height && {
+        height
+      }, borderRadius && {
+        borderRadius
+      }, cover && styles.coverImage, this.isGif() && styles.gifImage, aspectRatio && {
+        aspectRatio
+      }, !useImageInsideContainer && margins, useImageInsideContainer && styles.containImage, style, useImageInsideContainer && styles.shrink]} accessible={false} accessibilityRole={'image'} fsTagName={recorderTag} {...others}
+      // NOTE: imageStyle prop is only relevant for when rendering ImageBackground component
+      imageStyle={this.getImageStyle()} onError={this.onError} source={source}>
         {(overlayType || customOverlayContent) && <Overlay type={overlayType} intensity={overlayIntensity} color={overlayColor} customContent={customOverlayContent} borderRadius={borderRadius} />}
-      </ImageView>;
+      </ImageView>
+    );
   };
   renderRegularImage() {
     const {