react-native-ui-lib 7.46.2-snapshot.7314 → 7.46.2-snapshot.7316

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

@@ -39,7 +39,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
             fontFamily?: string | undefined;
             fontSize?: number | undefined;
             fontStyle?: "normal" | "italic" | undefined;
-            fontWeight?: "black" | 900 | 600 | "light" | 100 | "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 200 | 300 | 400 | 500 | 700 | 800 | "ultralight" | "thin" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | undefined;
+            fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
             letterSpacing?: number | undefined;
             lineHeight?: number | undefined;
             textAlign?: "auto" | "left" | "right" | "center" | "justify" | undefined;
@@ -62,41 +62,31 @@ declare class Button extends PureComponent<Props, ButtonState> {
             borderBlockEndColor?: import("react-native").ColorValue | undefined;
             borderBlockStartColor?: import("react-native").ColorValue | undefined;
             borderBottomColor?: import("react-native").ColorValue | undefined;
-            borderBottomEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-            borderBottomLeftRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-            borderBottomRightRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-            borderBottomStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+            borderBottomEndRadius?: import("react-native").AnimatableNumericValue | undefined;
+            borderBottomLeftRadius?: import("react-native").AnimatableNumericValue | undefined;
+            borderBottomRightRadius?: import("react-native").AnimatableNumericValue | undefined;
+            borderBottomStartRadius?: import("react-native").AnimatableNumericValue | undefined;
             borderColor?: import("react-native").ColorValue | undefined;
             borderCurve?: "circular" | "continuous" | undefined;
             borderEndColor?: import("react-native").ColorValue | undefined;
-            borderEndEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-            borderEndStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+            borderEndEndRadius?: import("react-native").AnimatableNumericValue | undefined;
+            borderEndStartRadius?: import("react-native").AnimatableNumericValue | undefined;
             borderLeftColor?: import("react-native").ColorValue | undefined;
-            borderRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+            borderRadius?: import("react-native").AnimatableNumericValue | undefined;
             borderRightColor?: import("react-native").ColorValue | undefined;
             borderStartColor?: import("react-native").ColorValue | undefined;
-            borderStartEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-            borderStartStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+            borderStartEndRadius?: import("react-native").AnimatableNumericValue | undefined;
+            borderStartStartRadius?: import("react-native").AnimatableNumericValue | undefined;
             borderStyle?: "solid" | "dotted" | "dashed" | undefined;
             borderTopColor?: import("react-native").ColorValue | undefined;
-            borderTopEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-            borderTopLeftRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-            borderTopRightRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-            borderTopStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-            outlineColor?: import("react-native").ColorValue | undefined;
-            outlineOffset?: import("react-native").AnimatableNumericValue | undefined;
-            outlineStyle?: "solid" | "dotted" | "dashed" | undefined;
-            outlineWidth?: import("react-native").AnimatableNumericValue | undefined;
+            borderTopEndRadius?: import("react-native").AnimatableNumericValue | undefined;
+            borderTopLeftRadius?: import("react-native").AnimatableNumericValue | undefined;
+            borderTopRightRadius?: import("react-native").AnimatableNumericValue | undefined;
+            borderTopStartRadius?: import("react-native").AnimatableNumericValue | undefined;
             opacity?: import("react-native").AnimatableNumericValue | undefined;
             elevation?: number | undefined;
             pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
-            isolation?: "auto" | "isolate" | undefined;
-            cursor?: import("react-native").CursorValue | undefined;
-            boxShadow?: string | readonly import("react-native").BoxShadowValue[] | undefined;
-            filter?: string | readonly import("react-native").FilterFunction[] | undefined;
-            mixBlendMode?: import("react-native").BlendMode | undefined;
-            experimental_backgroundImage?: string | readonly import("react-native").GradientValue[] | undefined;
-            alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | "space-evenly" | undefined;
+            alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | undefined;
             alignItems?: import("react-native").FlexAlignType | undefined;
             alignSelf?: "auto" | import("react-native").FlexAlignType | undefined;
             aspectRatio?: string | number | undefined;
@@ -108,15 +98,14 @@ declare class Button extends PureComponent<Props, ButtonState> {
             borderTopWidth?: number | undefined;
             borderWidth?: number | undefined;
             bottom?: import("react-native").DimensionValue | undefined;
-            boxSizing?: "border-box" | "content-box" | undefined;
-            display?: "none" | "flex" | "contents" | undefined;
+            display?: "none" | "flex" | undefined;
             end?: import("react-native").DimensionValue | undefined;
             flex?: number | undefined;
             flexBasis?: import("react-native").DimensionValue | undefined;
             flexDirection: "row" | "column" | "row-reverse" | "column-reverse";
-            rowGap?: string | number | undefined;
-            gap?: string | number | undefined;
-            columnGap?: string | number | undefined;
+            rowGap?: number | undefined;
+            gap?: number | undefined;
+            columnGap?: number | undefined;
             flexGrow?: number | undefined;
             flexShrink?: number | undefined;
             flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
@@ -146,32 +135,13 @@ declare class Button extends PureComponent<Props, ButtonState> {
             paddingStart?: import("react-native").DimensionValue | undefined;
             paddingTop?: import("react-native").DimensionValue | undefined;
             paddingVertical?: import("react-native").DimensionValue | undefined;
-            position?: "absolute" | "relative" | "static" | undefined;
+            position?: "absolute" | "relative" | undefined;
             right?: import("react-native").DimensionValue | undefined;
             start?: import("react-native").DimensionValue | undefined;
             top?: import("react-native").DimensionValue | undefined;
             width?: import("react-native").DimensionValue | undefined;
             zIndex?: number | undefined;
             direction?: "ltr" | "rtl" | "inherit" | undefined;
-            inset?: import("react-native").DimensionValue | undefined;
-            insetBlock?: import("react-native").DimensionValue | undefined;
-            insetBlockEnd?: import("react-native").DimensionValue | undefined;
-            insetBlockStart?: import("react-native").DimensionValue | undefined;
-            insetInline?: import("react-native").DimensionValue | undefined;
-            insetInlineEnd?: import("react-native").DimensionValue | undefined;
-            insetInlineStart?: import("react-native").DimensionValue | undefined;
-            marginBlock?: import("react-native").DimensionValue | undefined;
-            marginBlockEnd?: import("react-native").DimensionValue | undefined;
-            marginBlockStart?: import("react-native").DimensionValue | undefined;
-            marginInline?: import("react-native").DimensionValue | undefined;
-            marginInlineEnd?: import("react-native").DimensionValue | undefined;
-            marginInlineStart?: import("react-native").DimensionValue | undefined;
-            paddingBlock?: import("react-native").DimensionValue | undefined;
-            paddingBlockEnd?: import("react-native").DimensionValue | undefined;
-            paddingBlockStart?: import("react-native").DimensionValue | undefined;
-            paddingInline?: import("react-native").DimensionValue | undefined;
-            paddingInlineEnd?: import("react-native").DimensionValue | undefined;
-            paddingInlineStart?: import("react-native").DimensionValue | undefined;
             shadowColor?: import("react-native").ColorValue | undefined;
             shadowOffset?: Readonly<{
                 width: number;
@@ -179,7 +149,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
             }> | undefined;
             shadowOpacity?: import("react-native").AnimatableNumericValue | undefined;
             shadowRadius?: number | undefined;
-            transform?: string | readonly (({
+            transform?: string | (({
                 perspective: import("react-native").AnimatableNumericValue;
             } & {
                 rotate?: undefined;
@@ -300,7 +270,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
                 skewY?: undefined;
                 matrix?: undefined;
             }) | ({
-                translateX: import("react-native").AnimatableNumericValue | `${number}%`;
+                translateX: import("react-native").AnimatableNumericValue;
             } & {
                 perspective?: undefined;
                 rotate?: undefined;
@@ -315,7 +285,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
                 skewY?: undefined;
                 matrix?: undefined;
             }) | ({
-                translateY: import("react-native").AnimatableNumericValue | `${number}%`;
+                translateY: import("react-native").AnimatableNumericValue;
             } & {
                 perspective?: undefined;
                 rotate?: undefined;
@@ -386,6 +356,9 @@ declare class Button extends PureComponent<Props, ButtonState> {
             verticalAlign?: "auto" | "top" | "bottom" | "middle" | undefined;
             includeFontPadding?: boolean | undefined;
         };
+        backgroundElement: {
+            overflow: "hidden";
+        };
     };
     componentDidUpdate(prevProps: Props): void;
     onLayout: (event: LayoutChangeEvent) => void;
@@ -437,6 +410,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
         left: number;
         right: number;
     };
+    renderCustomBackground(): React.JSX.Element | undefined;
     render(): React.JSX.Element;
 }
 export { Button };
@@ -470,6 +444,7 @@ declare const _default: React.ForwardRefExoticComponent<((import("../touchableOp
     getActiveBackgroundColor?: ((backgroundColor: string, props: any) => string) | undefined;
     animateLayout?: boolean | undefined;
     animateTo?: import("./types").ButtonAnimationDirectionProp | undefined;
+    customBackground?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
 }) | 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;
@@ -500,6 +475,7 @@ declare const _default: React.ForwardRefExoticComponent<((import("../touchableOp
     getActiveBackgroundColor?: ((backgroundColor: string, props: any) => string) | undefined;
     animateLayout?: boolean | undefined;
     animateTo?: import("./types").ButtonAnimationDirectionProp | undefined;
+    customBackground?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
 }, "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;
@@ -530,6 +506,7 @@ declare const _default: React.ForwardRefExoticComponent<((import("../touchableOp
     getActiveBackgroundColor?: ((backgroundColor: string, props: any) => string) | undefined;
     animateLayout?: boolean | undefined;
     animateTo?: import("./types").ButtonAnimationDirectionProp | undefined;
+    customBackground?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
 }, "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;
@@ -560,5 +537,6 @@ declare const _default: React.ForwardRefExoticComponent<((import("../touchableOp
     getActiveBackgroundColor?: ((backgroundColor: string, props: any) => string) | undefined;
     animateLayout?: boolean | undefined;
     animateTo?: import("./types").ButtonAnimationDirectionProp | undefined;
+    customBackground?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
 }, "ref">) & React.RefAttributes<{}>> & ComponentStatics<typeof Button>;
 export default _default;

package/src/components/button/index.js

@@ -4,6 +4,7 @@ import { Platform, StyleSheet, LayoutAnimation } from 'react-native';
 import { asBaseComponent, forwardRef, Constants } from "../../commons/new";
 import { Colors, Typography, BorderRadiuses } from "../../style";
 import TouchableOpacity from "../touchableOpacity";
+import View from "../view";
 import Text from "../text";
 import Icon from "../icon";
 import { ButtonSize, ButtonAnimationDirection, ButtonProps, DEFAULT_PROPS } from "./types";
@@ -358,6 +359,17 @@ class Button extends PureComponent {
       right: horizontalHitslop
     };
   }
+  renderCustomBackground() {
+    const {
+      customBackground
+    } = this.props;
+    if (customBackground) {
+      const borderRadiusStyle = this.getBorderRadiusStyle();
+      return <View absF style={[this.styles.backgroundElement, borderRadiusStyle]}>
+          {customBackground}
+        </View>;
+    }
+  }
   render() {
     const {
       onPress,
@@ -368,6 +380,7 @@ class Button extends PureComponent {
       modifiers,
       forwardedRef,
       hitSlop: hitSlopProp,
+      customBackground,
       ...others
     } = this.props;
     const shadowStyle = this.getShadowStyle();
@@ -375,13 +388,14 @@ class Button extends PureComponent {
       margins,
       paddings
     } = modifiers;
-    const backgroundColor = this.getBackgroundColor();
+    const backgroundColor = customBackground ? undefined : this.getBackgroundColor();
     const outlineStyle = this.getOutlineStyle();
     const containerSizeStyle = this.getContainerSizeStyle();
     const borderRadiusStyle = this.getBorderRadiusStyle();
     return <TouchableOpacity row centerV style={[this.styles.container, animateLayout && this.getAnimationDirectionStyle(), containerSizeStyle, this.isLink && this.styles.innerContainerLink, shadowStyle, margins, paddings, {
       backgroundColor
     }, borderRadiusStyle, outlineStyle, style]} activeOpacity={0.6} activeBackgroundColor={this.getActiveBackgroundColor()} onLayout={this.onLayout} onPress={onPress} disabled={disabled} testID={testID} hitSlop={hitSlopProp ?? this.getAccessibleHitSlop()} {...others} ref={forwardedRef}>
+        {this.renderCustomBackground()}
         {this.props.children}
         {this.props.iconOnRight ? this.renderLabel() : this.renderIcon()}
         {this.props.iconOnRight ? this.renderIcon() : this.renderLabel()}
@@ -415,6 +429,9 @@ function createStyles() {
       backgroundColor: 'transparent',
       flexDirection: 'row',
       ...Typography.text70
+    },
+    backgroundElement: {
+      overflow: 'hidden'
     }
   });
 }

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

@@ -131,12 +131,17 @@ export type ButtonProps = TouchableOpacityProps & TypographyModifiers & ColorsMo
     getActiveBackgroundColor?: (backgroundColor: string, props: any) => string;
     /**
      * should animate layout change
+     * Note?: For Android you must set 'setLayoutAnimationEnabledExperimental(true)' via RN's 'UIManager'
      */
     animateLayout?: boolean;
     /**
      * the direction of the animation ('left' and 'right' will effect the button's own alignment)
      */
     animateTo?: ButtonAnimationDirectionProp;
+    /**
+     * Custom element to render as button background (takes precedence over backgroundColor)
+     */
+    customBackground?: React.ReactElement;
 };
 export type ButtonState = {
     size?: number;

package/src/components/colorPicker/ColorPickerDialog.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import { DialogProps } from '../dialog';
+import { DialogProps } from '../../incubator/dialog';
 export interface ColorPickerDialogProps extends DialogProps {
     /**
      * The initial color to pass the picker dialog

package/src/components/colorPicker/ColorPickerDialog.js

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { LayoutAnimation, StyleSheet, Keyboard } from 'react-native';
 import { Constants, asBaseComponent } from "../../commons/new";
 import { Colors } from "../../style";
-import Dialog from "../dialog";
+import Dialog from "../../incubator/dialog";
 import { getColorValue, getValidColorString, getTextColor, BORDER_RADIUS } from "./ColorPickerPresenter";
 import ColorPickerDialogHeader from "./ColorPickerDialogHeader";
 import ColorPickerPreview from "./ColorPickerPreview";

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

@@ -2,11 +2,11 @@ import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { BaseComponentInjectedProps } from '../../commons/new';
 import { TextFieldProps } from '../textField';
-import type { DialogProps } from '../dialog';
+import type { DialogMigrationProps } from '../../incubator/dialog';
 import { ButtonProps } from '../button';
 import { OldApiProps } from './useOldApi';
 export type DateTimePickerMode = 'date' | 'time';
-export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | 'onChange'> & {
+export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | 'onChange'> & DialogMigrationProps & {
     /**
      * The type of picker to display ('date' or 'time')
      */
@@ -15,10 +15,6 @@ export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | '
      * The initial value to set the picker to. Defaults to device's date / time
      */
     value?: Date;
-    /**
-     *  The props to pass to the dialog expandable container
-     */
-    dialogProps?: DialogProps;
     /**
      * The onChange callback
      */
@@ -96,6 +92,7 @@ export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | '
      */
     cancelButtonProps?: ButtonProps;
 };
+type DateTimePickerPropsInternal = DateTimePickerProps & BaseComponentInjectedProps;
 /**
  * @description: Date and Time Picker Component that wraps RNDateTimePicker for date and time modes.
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DateTimePickerScreen.tsx
@@ -104,185 +101,7 @@ export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | '
  * @extendsLink: https://github.com/react-native-community/react-native-datetimepicker#react-native-datetimepicker
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_iOS.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_Android.gif?raw=true
  */
-declare const DateTimePicker: React.ForwardRefExoticComponent<OldApiProps & Omit<TextFieldProps, "value" | "onChange"> & {
-    /**
-     * The type of picker to display ('date' or 'time')
-     */
-    mode?: DateTimePickerMode | undefined;
-    /**
-     * The initial value to set the picker to. Defaults to device's date / time
-     */
-    value?: Date | undefined;
-    /**
-     *  The props to pass to the dialog expandable container
-     */
-    dialogProps?: DialogProps | undefined;
-    /**
-     * The onChange callback
-     */
-    onChange?: ((date: Date) => void) | undefined;
-    /**
-     * Should this input be editable or disabled
-     */
-    editable?: boolean | undefined;
-    /**
-     * The minimum date or time value to use
-     */
-    minimumDate?: Date | undefined;
-    /**
-     * The maximum date or time value to use
-     */
-    maximumDate?: Date | undefined;
-    /**
-     * A callback function to format the time or date
-     * @param mode the type of the picker ('date' or 'time')
-     * @returns the formatted string to display
-     */
-    dateTimeFormatter?: ((value: Date, mode: DateTimePickerMode) => string) | undefined;
-    /**
-     * Allows changing of the locale of the component (iOS only)
-     */
-    locale?: string | undefined;
-    /**
-     * Allows changing of the time picker to a 24 hour format (Android only)
-     */
-    is24Hour?: boolean | undefined;
-    /**
-     * The interval at which minutes can be selected. Possible values are: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30 (iOS only)
-     */
-    minuteInterval?: number | undefined;
-    /**
-     * Allows changing of the timeZone of the date picker. By default it uses the device's time zone (iOS only)
-     */
-    timeZoneOffsetInMinutes?: number | undefined;
-    /**
-     * style to apply to the iOS dialog header
-     */
-    headerStyle?: StyleProp<ViewStyle>;
-    /**
-     * Render custom input
-     */
-    renderInput?: ((props: Omit<DateTimePickerProps, 'value'> & {
-        value?: string;
-    }) => React.ReactElement) | undefined;
-    /**
-     * Override system theme variant (dark or light mode) used by the date picker.
-     */
-    themeVariant?: "light" | "dark" | undefined;
-    /**
-     * The component testID
-     */
-    testID?: string | undefined;
-    /**
-     * Allows changing the visual display of the picker
-     */
-    display?: string | undefined;
-    /**
-     * Text color of the wheel picker items
-     */
-    textColor?: string | undefined;
-    /**
-     * Background color of the wheel picker
-     */
-    backgroundColor?: string | undefined;
-    /**
-     * Confirm button props
-     */
-    confirmButtonProps?: ButtonProps | undefined;
-    /**
-     * Cancel button props
-     */
-    cancelButtonProps?: ButtonProps | undefined;
-} & BaseComponentInjectedProps & React.RefAttributes<any>>;
+declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerPropsInternal & React.RefAttributes<any>>;
 export { DateTimePicker };
-declare const _default: React.ForwardRefExoticComponent<OldApiProps & Omit<TextFieldProps, "value" | "onChange"> & {
-    /**
-     * The type of picker to display ('date' or 'time')
-     */
-    mode?: DateTimePickerMode | undefined;
-    /**
-     * The initial value to set the picker to. Defaults to device's date / time
-     */
-    value?: Date | undefined;
-    /**
-     *  The props to pass to the dialog expandable container
-     */
-    dialogProps?: DialogProps | undefined;
-    /**
-     * The onChange callback
-     */
-    onChange?: ((date: Date) => void) | undefined;
-    /**
-     * Should this input be editable or disabled
-     */
-    editable?: boolean | undefined;
-    /**
-     * The minimum date or time value to use
-     */
-    minimumDate?: Date | undefined;
-    /**
-     * The maximum date or time value to use
-     */
-    maximumDate?: Date | undefined;
-    /**
-     * A callback function to format the time or date
-     * @param mode the type of the picker ('date' or 'time')
-     * @returns the formatted string to display
-     */
-    dateTimeFormatter?: ((value: Date, mode: DateTimePickerMode) => string) | undefined;
-    /**
-     * Allows changing of the locale of the component (iOS only)
-     */
-    locale?: string | undefined;
-    /**
-     * Allows changing of the time picker to a 24 hour format (Android only)
-     */
-    is24Hour?: boolean | undefined;
-    /**
-     * The interval at which minutes can be selected. Possible values are: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30 (iOS only)
-     */
-    minuteInterval?: number | undefined;
-    /**
-     * Allows changing of the timeZone of the date picker. By default it uses the device's time zone (iOS only)
-     */
-    timeZoneOffsetInMinutes?: number | undefined;
-    /**
-     * style to apply to the iOS dialog header
-     */
-    headerStyle?: StyleProp<ViewStyle>;
-    /**
-     * Render custom input
-     */
-    renderInput?: ((props: Omit<DateTimePickerProps, "value"> & {
-        value?: string | undefined;
-    }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
-    /**
-     * Override system theme variant (dark or light mode) used by the date picker.
-     */
-    themeVariant?: "light" | "dark" | undefined;
-    /**
-     * The component testID
-     */
-    testID?: string | undefined;
-    /**
-     * Allows changing the visual display of the picker
-     */
-    display?: string | undefined;
-    /**
-     * Text color of the wheel picker items
-     */
-    textColor?: string | undefined;
-    /**
-     * Background color of the wheel picker
-     */
-    backgroundColor?: string | undefined;
-    /**
-     * Confirm button props
-     */
-    confirmButtonProps?: ButtonProps | undefined;
-    /**
-     * Cancel button props
-     */
-    cancelButtonProps?: ButtonProps | undefined;
-} & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<any>>;
 export default _default;

package/src/components/dateTimePicker/index.js

@@ -42,6 +42,7 @@ const DateTimePicker = forwardRef((props, ref) => {
     themeVariant = Colors.getScheme(),
     onChange,
     dialogProps,
+    migrateDialog,
     textColor = Colors.$textDefault,
     backgroundColor = Colors.$backgroundDefault,
     headerStyle,
@@ -149,10 +150,10 @@ const DateTimePicker = forwardRef((props, ref) => {
     return <RNDateTimePicker mode={mode} value={value || new Date()} onChange={handleChange} minimumDate={minimumDate} maximumDate={maximumDate} locale={locale} is24Hour={is24Hour} minuteInterval={minuteInterval} timeZoneOffsetInMinutes={timeZoneOffsetInMinutes} display={display} textColor={textColor} style={dateTimePickerStyle} themeVariant={themeVariant} testID={`${testID}.picker`} />;
   }, [mode, value, handleChange, minimumDate, maximumDate, locale, is24Hour, minuteInterval, timeZoneOffsetInMinutes, themeVariant]);
   const renderIOSExpandableOverlay = () => {
-    return <View>
+    return <>
         {renderHeader()}
         {renderDateTimePicker()}
-      </View>;
+      </>;
   };
   const renderAndroidDateTimePicker = useCallback(({
     visible
@@ -164,7 +165,7 @@ const DateTimePicker = forwardRef((props, ref) => {
   return <>
       <ExpandableOverlay
     // @ts-expect-error
-    ref={expandable} expandableContent={Constants.isIOS ? renderIOSExpandableOverlay() : undefined} useDialog dialogProps={_dialogProps} disabled={editable === false}
+    ref={expandable} expandableContent={Constants.isIOS ? renderIOSExpandableOverlay() : undefined} useDialog dialogProps={_dialogProps} migrateDialog={migrateDialog} disabled={editable === false}
     // NOTE: Android picker comes with its own overlay built-in therefor we're not using ExpandableOverlay for it
     renderCustomOverlay={Constants.isAndroid ? renderAndroidDateTimePicker : undefined} testID={`${testID}.overlay`}>
         {renderInput ? renderInput({

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { PanningDirections } from '../panningViews/panningProvider';
+interface DialogDismissibleProps {
+    /**
+     * Additional styling
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * The direction of the allowed pan (default is DOWN)
+     * Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###)
+     */
+    direction?: PanningDirections;
+    /**
+     * onDismiss callback
+     */
+    onDismiss?: () => void;
+    /**
+     * The dialog`s container style
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Whether to show the dialog or not
+     */
+    visible?: boolean;
+}
+interface Props extends DialogDismissibleProps {
+    children?: React.ReactNode | React.ReactNode[];
+}
+declare const DialogDismissibleView: {
+    (props: Props): React.JSX.Element;
+    displayName: string;
+};
+export default DialogDismissibleView;