@ledgerhq/native-ui 0.26.1 → 0.27.0-next.0

package/lib/components/Cards/BannerCard/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="styled-components-react-native" />
 import React from "react";
-import { TouchableOpacityProps, TouchableOpacity } from "react-native";
+import { TouchableOpacityProps } from "react-native";
 export type CardProps = TouchableOpacityProps & {
     title?: string;
     onPressDismiss?: () => void;
@@ -11,8 +11,8 @@ export type CardProps = TouchableOpacityProps & {
 type CloseProps = {
     onPressDismiss?: () => void;
 };
-export declare const Container: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {}, never>;
-export declare const CloseContainer: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<TouchableOpacityProps & React.RefAttributes<import("react-native").View>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const CloseContainer: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<TouchableOpacityProps & React.RefAttributes<import("react-native").View>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const ChevronContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("../../styled").BaseStyledProps, never>;
 export declare const CloseButton: ({ onPressDismiss }: CloseProps) => React.JSX.Element;
 declare const BannerCard: (props: CardProps) => React.ReactElement;

package/lib/components/Cards/BannerCard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Cards/BannerCard/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAMvE,MAAM,MAAM,SAAS,GAAG,qBAAqB,GAAG;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,eAAe,EAAE,OAAO,GAAG,OAAO,CAAC;CACpC,CAAC;AAEF,KAAK,UAAU,GAAG;IAChB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,SAAS,2HAUrB,CAAC;AAEF,eAAO,MAAM,cAAc,2HAQ1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,0KAM5B,CAAC;AAEF,eAAO,MAAM,WAAW,uBAAwB,UAAU,sBAOzD,CAAC;AAsCF,QAAA,MAAM,UAAU,UAAW,SAAS,KAAG,MAAM,YAE5C,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Cards/BannerCard/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAoB,MAAM,cAAc,CAAC;AAMvE,MAAM,MAAM,SAAS,GAAG,qBAAqB,GAAG;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,eAAe,EAAE,OAAO,GAAG,OAAO,CAAC;CACpC,CAAC;AAEF,KAAK,UAAU,GAAG;IAChB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,SAAS,6MAUrB,CAAC;AAEF,eAAO,MAAM,cAAc,6MAQ1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,0KAM5B,CAAC;AAEF,eAAO,MAAM,WAAW,uBAAwB,UAAU,sBAOzD,CAAC;AAsCF,QAAA,MAAM,UAAU,UAAW,SAAS,KAAG,MAAM,YAE5C,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Cards/NotificationCard/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="styled-components-react-native" />
 import React from "react";
-import { TouchableOpacityProps, TouchableOpacity } from "react-native";
+import { TouchableOpacityProps } from "react-native";
 export type CardProps = TouchableOpacityProps & {
     tag?: string;
     description?: string;
@@ -13,6 +13,6 @@ export type CardProps = TouchableOpacityProps & {
     viewed: boolean;
 };
 declare const NotificationCard: (props: CardProps) => React.ReactElement;
-export declare const Base: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {}, never>;
+export declare const Base: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<TouchableOpacityProps & React.RefAttributes<import("react-native").View>>, import("styled-components").DefaultTheme, {}, never>;
 export default NotificationCard;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Cards/NotificationCard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Cards/NotificationCard/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAOvC,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEvE,MAAM,MAAM,SAAS,GAAG,qBAAqB,GAAG;IAC9C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AA0BF,QAAA,MAAM,gBAAgB,UAAW,SAAS,KAAG,MAAM,YAkElD,CAAC;AAEF,eAAO,MAAM,IAAI,2HAA6B,CAAC;AAM/C,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Cards/NotificationCard/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAOvC,OAAO,EAAE,qBAAqB,EAAoB,MAAM,cAAc,CAAC;AAEvE,MAAM,MAAM,SAAS,GAAG,qBAAqB,GAAG;IAC9C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AA0BF,QAAA,MAAM,gBAAgB,UAAW,SAAS,KAAG,MAAM,YAkElD,CAAC;AAEF,eAAO,MAAM,IAAI,6MAA6B,CAAC;AAM/C,eAAe,gBAAgB,CAAC"}

package/lib/components/Cards/SideImageCard/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="styled-components-react-native" />
 import React from "react";
-import { TouchableOpacityProps, TouchableOpacity, Image } from "react-native";
+import { TouchableOpacityProps, Image } from "react-native";
 export type CardProps = TouchableOpacityProps & {
     tag?: string;
     title?: string;
@@ -8,11 +8,11 @@ export type CardProps = TouchableOpacityProps & {
     imageUrl?: string;
     onPressDismiss?: () => void;
 };
-export declare const Base: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {}, never>;
+export declare const Base: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<TouchableOpacityProps & React.RefAttributes<import("react-native").View>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const Container: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("../../styled").BaseStyledProps, never>;
 export declare const ImageContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("../../styled").BaseStyledProps, never>;
 export declare const ImageContent: import("styled-components").StyledComponent<typeof Image, import("styled-components").DefaultTheme, {}, never>;
-export declare const CloseContainer: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {}, never>;
+export declare const CloseContainer: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<TouchableOpacityProps & React.RefAttributes<import("react-native").View>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const CloseButton: (props: CardProps) => React.JSX.Element;
 declare const SideImageCard: (props: CardProps) => React.ReactElement;
 export default SideImageCard;

package/lib/components/Cards/SideImageCard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Cards/SideImageCard/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAQ9E,MAAM,MAAM,SAAS,GAAG,qBAAqB,GAAG;IAC9C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,IAAI,2HAEhB,CAAC;AAEF,eAAO,MAAM,SAAS,0KAIrB,CAAC;AAEF,eAAO,MAAM,cAAc,0KAI1B,CAAC;AACF,eAAO,MAAM,YAAY,gHAIxB,CAAC;AAEF,eAAO,MAAM,cAAc,2HAW1B,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,SAAS,sBAO3C,CAAC;AAiEF,QAAA,MAAM,aAAa,UAAW,SAAS,KAAG,MAAM,YAM/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Cards/SideImageCard/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAoB,KAAK,EAAE,MAAM,cAAc,CAAC;AAQ9E,MAAM,MAAM,SAAS,GAAG,qBAAqB,GAAG;IAC9C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,IAAI,6MAEhB,CAAC;AAEF,eAAO,MAAM,SAAS,0KAIrB,CAAC;AAEF,eAAO,MAAM,cAAc,0KAI1B,CAAC;AACF,eAAO,MAAM,YAAY,gHAIxB,CAAC;AAEF,eAAO,MAAM,cAAc,6MAW1B,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,SAAS,sBAO3C,CAAC;AAiEF,QAAA,MAAM,aAAa,UAAW,SAAS,KAAG,MAAM,YAM/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Form/DrawerTabSelector/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+interface TabSelectorProps<T extends string | number> {
+    options: T[];
+    selectedOption: T;
+    handleSelectOption: (option: T) => void;
+    labels: {
+        [key in T]: string;
+    };
+}
+export default function DrawerTabSelector<T extends string | number>({ options, selectedOption, handleSelectOption, labels, }: TabSelectorProps<T>): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Form/DrawerTabSelector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/DrawerTabSelector/index.tsx"],"names":[],"mappings":";AAwDA,UAAU,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAClD,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,cAAc,EAAE,CAAC,CAAC;IAClB,kBAAkB,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IACxC,MAAM,EAAE;SAAG,GAAG,IAAI,CAAC,GAAG,MAAM;KAAE,CAAC;CAChC;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EACnE,OAAO,EACP,cAAc,EACd,kBAAkB,EAClB,MAAM,GACP,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA4DnC"}

package/lib/components/Form/DrawerTabSelector/index.js

@@ -0,0 +1,61 @@
+import React, { useEffect } from "react";
+import Text from "../../Text";
+import Flex from "../../Layout/Flex";
+import styled, { useTheme } from "styled-components/native";
+import { TouchableOpacity } from "react-native";
+import Animated, { useSharedValue, useAnimatedStyle, withSpring } from "react-native-reanimated";
+const StyledTouchableOpacity = styled(TouchableOpacity) `
+  width: ${(p) => p.width}px;
+  flex: 1;
+  height: 100%;
+`;
+const StyledFlex = styled(Flex) `
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+const StyledText = styled(Text) `
+  line-height: 14.52px;
+  overflow: visible;
+  text-align: center;
+  font-size: 12px;
+  color: ${(p) => p.isSelected ? p.theme.colors.constant.black : p.theme.colors.opacityDefault.c50};
+`;
+const OptionButton = ({ option, selectedOption, handleSelectOption, label, width, }) => {
+    const isSelected = selectedOption === option;
+    return (React.createElement(StyledTouchableOpacity, { width: width, onPress: () => handleSelectOption(option) },
+        React.createElement(StyledFlex, { isSelected: isSelected },
+            React.createElement(StyledText, { fontWeight: "semiBold", isSelected: isSelected, numberOfLines: 1 }, label))));
+};
+export default function DrawerTabSelector({ options, selectedOption, handleSelectOption, labels, }) {
+    const { colors } = useTheme();
+    const longuestLabel = labels[options[0]].length > labels[options[1]].length ? options[0] : options[1];
+    const widthFactor = 8;
+    const margin = 20;
+    const width = labels[longuestLabel].length * widthFactor + margin;
+    const semiWidth = width / 2;
+    const translateX = useSharedValue(-semiWidth);
+    useEffect(() => {
+        translateX.value = withSpring(selectedOption === options[0] ? -semiWidth : semiWidth, {
+            damping: 30,
+            stiffness: 80,
+        });
+    }, [selectedOption, translateX, options]);
+    const animatedStyle = useAnimatedStyle(() => {
+        return {
+            transform: [{ translateX: translateX.value }],
+        };
+    });
+    return (React.createElement(Flex, { flexDirection: "row", justifyContent: "center", alignItems: "center", width: width * 2 + 4, height: "35px", borderRadius: "40px", bg: colors.opacityDefault.c05, position: "relative" },
+        React.createElement(Animated.View, { style: [
+                {
+                    position: "absolute",
+                    width: width - 2,
+                    height: "90%",
+                    backgroundColor: colors.primary.c80,
+                    borderRadius: 40,
+                },
+                animatedStyle,
+            ] }),
+        options.map((option) => (React.createElement(OptionButton, { width: width, key: option, option: option, selectedOption: selectedOption, handleSelectOption: handleSelectOption, label: labels[option] })))));
+}

package/lib/components/Form/TabSelector/index.d.ts

@@ -1,12 +1,8 @@
 /// <reference types="react" />
-interface TabSelectorProps<T extends string | number> {
-    options: T[];
-    selectedOption: T;
-    handleSelectOption: (option: T) => void;
-    labels: {
-        [key in T]: string;
-    };
-}
-export default function TabSelector<T extends string | number>({ options, selectedOption, handleSelectOption, labels, }: TabSelectorProps<T>): JSX.Element;
+type TabSelectorProps = {
+    labels: string[];
+    onToggle: (value: string) => void;
+};
+export default function TabSelector({ labels, onToggle }: TabSelectorProps): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Form/TabSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/TabSelector/index.tsx"],"names":[],"mappings":";AAwDA,UAAU,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAClD,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,cAAc,EAAE,CAAC,CAAC;IAClB,kBAAkB,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IACxC,MAAM,EAAE;SAAG,GAAG,IAAI,CAAC,GAAG,MAAM;KAAE,CAAC;CAChC;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC7D,OAAO,EACP,cAAc,EACd,kBAAkB,EAClB,MAAM,GACP,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA4DnC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/TabSelector/index.tsx"],"names":[],"mappings":";AA8BA,KAAK,gBAAgB,GAAG;IACtB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAqDvF"}

package/lib/components/Form/TabSelector/index.js

@@ -1,61 +1,55 @@
-import React, { useEffect } from "react";
-import Text from "../../Text";
+import React, { useState } from "react";
+import { Pressable } from "react-native";
+import Animated, { useSharedValue, useAnimatedStyle, withTiming } from "react-native-reanimated";
+import styled from "styled-components/native";
 import Flex from "../../Layout/Flex";
-import styled, { useTheme } from "styled-components/native";
-import { TouchableOpacity } from "react-native";
-import Animated, { useSharedValue, useAnimatedStyle, withSpring } from "react-native-reanimated";
-const StyledTouchableOpacity = styled(TouchableOpacity) `
-  width: ${(p) => p.width}px;
-  flex: 1;
+import Text from "../../Text";
+import Box from "../../Layout/Box";
+const Container = styled(Flex) `
   height: 100%;
+  justify-content: space-between;
+  flex-direction: row;
+  position: relative;
 `;
-const StyledFlex = styled(Flex) `
+const AnimatedBackground = styled(Animated.View) `
+  position: absolute;
   height: 100%;
-  justify-content: center;
-  align-items: center;
+  border-radius: 8px;
+  background-color: ${({ theme }) => theme.colors.opacityDefault.c05};
 `;
-const StyledText = styled(Text) `
-  line-height: 14.52px;
-  overflow: visible;
-  text-align: center;
-  font-size: 12px;
-  color: ${(p) => p.isSelected ? p.theme.colors.constant.black : p.theme.colors.opacityDefault.c50};
+const Tab = styled(Flex) `
+  flex: 1;
+  padding: 4px;
+  border-radius: 8px;
+  align-items: center;
+  justify-content: center;
 `;
-const OptionButton = ({ option, selectedOption, handleSelectOption, label, width, }) => {
-    const isSelected = selectedOption === option;
-    return (React.createElement(StyledTouchableOpacity, { width: width, onPress: () => handleSelectOption(option) },
-        React.createElement(StyledFlex, { isSelected: isSelected },
-            React.createElement(StyledText, { fontWeight: "semiBold", isSelected: isSelected, numberOfLines: 1 }, label))));
-};
-export default function TabSelector({ options, selectedOption, handleSelectOption, labels, }) {
-    const { colors } = useTheme();
-    const longuestLabel = labels[options[0]].length > labels[options[1]].length ? options[0] : options[1];
-    const widthFactor = 8;
-    const margin = 20;
-    const width = labels[longuestLabel].length * widthFactor + margin;
-    const semiWidth = width / 2;
-    const translateX = useSharedValue(-semiWidth);
-    useEffect(() => {
-        translateX.value = withSpring(selectedOption === options[0] ? -semiWidth : semiWidth, {
-            damping: 30,
-            stiffness: 80,
-        });
-    }, [selectedOption, translateX, options]);
+export default function TabSelector({ labels, onToggle }) {
+    const translateX = useSharedValue(0);
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const handlePress = (value, index) => {
+        setSelectedIndex(index);
+        translateX.value = (containerWidth / labels.length) * index;
+        if (selectedIndex !== index)
+            onToggle(value);
+    };
+    const handleLayout = (event) => {
+        const { width } = event.nativeEvent.layout;
+        setContainerWidth(width);
+    };
     const animatedStyle = useAnimatedStyle(() => {
         return {
-            transform: [{ translateX: translateX.value }],
+            transform: [{ translateX: withTiming(translateX.value, { duration: 250 }) }],
+            width: containerWidth / labels.length,
         };
     });
-    return (React.createElement(Flex, { flexDirection: "row", justifyContent: "center", alignItems: "center", width: width * 2 + 4, height: "35px", borderRadius: "40px", bg: colors.opacityDefault.c05, position: "relative" },
-        React.createElement(Animated.View, { style: [
-                {
-                    position: "absolute",
-                    width: width - 2,
-                    height: "90%",
-                    backgroundColor: colors.primary.c80,
-                    borderRadius: 40,
-                },
-                animatedStyle,
-            ] }),
-        options.map((option) => (React.createElement(OptionButton, { width: width, key: option, option: option, selectedOption: selectedOption, handleSelectOption: handleSelectOption, label: labels[option] })))));
+    return (React.createElement(Box, { height: "100%", width: "100%", borderRadius: 12, border: 1, borderColor: "opacityDefault.c10", p: 2 },
+        React.createElement(Container, { onLayout: handleLayout },
+            React.createElement(AnimatedBackground, { style: animatedStyle }),
+            labels.map((label, index) => (React.createElement(Pressable, { hitSlop: 6, key: label, onPress: () => handlePress(label, index), style: ({ pressed }) => [
+                    { opacity: pressed && selectedIndex !== index ? 0.5 : 1, flex: 1 },
+                ] },
+                React.createElement(Tab, null,
+                    React.createElement(Text, { fontSize: 14, fontWeight: "semiBold", flexShrink: 1, numberOfLines: 1 }, label))))))));
 }

package/lib/components/Form/index.d.ts

@@ -4,5 +4,6 @@ export { default as Slider } from "./Slider";
 export { default as Switch } from "./Switch";
 export { default as Toggle } from "./Toggle";
 export { default as SelectableList } from "./SelectableList";
+export { default as DrawerTabSelector } from "./DrawerTabSelector";
 export { default as TabSelector } from "./TabSelector";
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/lib/components/Form/index.js

@@ -4,4 +4,5 @@ export { default as Slider } from "./Slider";
 export { default as Switch } from "./Switch";
 export { default as Toggle } from "./Toggle";
 export { default as SelectableList } from "./SelectableList";
+export { default as DrawerTabSelector } from "./DrawerTabSelector";
 export { default as TabSelector } from "./TabSelector";

package/lib/components/Loader/InfiniteLoader/index.d.ts

@@ -6,6 +6,6 @@ declare const Loader: import("styled-components").StyledComponent<typeof Svg, im
 export type Props = React.ComponentProps<typeof Loader> & {
     color?: string;
 };
-export default function InfiniteLoader({ size, color, mock, ...extraProps }: Props): JSX.Element;
+export default function InfiniteLoader({ size, color, mock, testID, ...extraProps }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Loader/InfiniteLoader/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Loader/InfiniteLoader/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,GAA+C,MAAM,kBAAkB,CAAC;AAE/E,OAAO,EAAgB,SAAS,EAAE,MAAM,eAAe,CAAC;AAgBxD,QAAA,MAAM,MAAM,2RAIX,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,IAAS,EACT,KAAqB,EACrB,IAAY,EACZ,GAAG,UAAU,EACd,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkFrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Loader/InfiniteLoader/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,GAA+C,MAAM,kBAAkB,CAAC;AAE/E,OAAO,EAAgB,SAAS,EAAE,MAAM,eAAe,CAAC;AAgBxD,QAAA,MAAM,MAAM,2RAIX,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,IAAS,EACT,KAAqB,EACrB,IAAY,EACZ,MAAW,EACX,GAAG,UAAU,EACd,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAmFrB"}

package/lib/components/Loader/InfiniteLoader/index.js

@@ -24,7 +24,7 @@ const Loader = styled(Svg).attrs((props) => (Object.assign({}, strokeSystem(prop
   ${size}
 `;
 export default function InfiniteLoader(_a) {
-    var { size = 38, color = "primary.c50", mock = false } = _a, extraProps = __rest(_a, ["size", "color", "mock"]);
+    var { size = 38, color = "primary.c50", mock = false, testID = "" } = _a, extraProps = __rest(_a, ["size", "color", "mock", "testID"]);
     const rotation = useSharedValue(0);
     const animatedStyles = useAnimatedStyle(() => {
         return {
@@ -43,7 +43,7 @@ export default function InfiniteLoader(_a) {
         return () => cancelAnimation(rotation);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (React.createElement(Animated.View, { style: [{ display: "flex", justifyContent: "center", alignItems: "center" }, animatedStyles] },
+    return (React.createElement(Animated.View, { style: [{ display: "flex", justifyContent: "center", alignItems: "center" }, animatedStyles], testID: testID },
         React.createElement(Loader, Object.assign({ size: size, stroke: color, viewBox: "0 0 38 38", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, extraProps),
             React.createElement(LinearGradient, { id: "gradient-start", gradientUnits: "userSpaceOnUse", gradientTransform: "rotate(-20)" },
                 React.createElement(Stop, { offset: 0, stopColor: "white", stopOpacity: 0.5 }),

package/lib/components/cta/Button/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="styled-components-react-native" />
 import React from "react";
-import { TouchableOpacity, TouchableOpacityProps } from "react-native";
+import { TouchableOpacityProps, View } from "react-native";
 import { BaseStyledProps } from "../../styled";
 import { IconType } from "../../Icon/type";
 export type ButtonProps = TouchableOpacityProps & BaseStyledProps & {
@@ -19,7 +19,7 @@ export type ButtonProps = TouchableOpacityProps & BaseStyledProps & {
     isNewIcon?: boolean;
     Icon?: IconType | JSX.Element;
 };
-export declare const Base: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {
+export declare const Base: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<TouchableOpacityProps & React.RefAttributes<View>>, import("styled-components").DefaultTheme, {
     iconButton?: boolean | undefined;
     sizeVariant?: ButtonProps["size"];
 } & Omit<ButtonProps, "size">, never>;

package/lib/components/cta/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/cta/Button/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAG9D,OAAO,EAIL,gBAAgB,EAChB,qBAAqB,EAEtB,MAAM,cAAc,CAAC;AAKtB,OAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,MAAM,MAAM,WAAW,GAAG,qBAAqB,GAC7C,eAAe,GAAG;IAChB,mBAAmB,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;IACnE,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC;CAC/B,CAAC;AAUJ,eAAO,MAAM,IAAI;;kBAiBC,WAAW,CAAC,MAAM,CAAC;qCAiBpC,CAAC;AA0FF,QAAA,MAAM,MAAM,UAAW,WAAW,KAAG,MAAM,YAgC1C,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAAW,WAAW,KAAG,MAAM,YAmC3D,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/cta/Button/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAG9D,OAAO,EAKL,qBAAqB,EACrB,IAAI,EACL,MAAM,cAAc,CAAC;AAKtB,OAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,MAAM,MAAM,WAAW,GAAG,qBAAqB,GAC7C,eAAe,GAAG;IAChB,mBAAmB,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;IACnE,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC;CAC/B,CAAC;AAUJ,eAAO,MAAM,IAAI;;kBAiBC,WAAW,CAAC,MAAM,CAAC;qCAiBpC,CAAC;AA0FF,QAAA,MAAM,MAAM,UAAW,WAAW,KAAG,MAAM,YAgC1C,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAAW,WAAW,KAAG,MAAM,YAmC3D,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/cta/Link/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="styled-components-react-native" />
 import React from "react";
-import { TouchableOpacity, TouchableOpacityProps } from "react-native";
+import { TouchableOpacityProps } from "react-native";
 export type LinkProps = TouchableOpacityProps & {
     Icon?: React.ComponentType<{
         size: number;
@@ -14,7 +14,7 @@ export type LinkProps = TouchableOpacityProps & {
     children?: React.ReactNode;
     numberOfLines?: number;
 };
-export declare const Base: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {}, never>;
+export declare const Base: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<TouchableOpacityProps & React.RefAttributes<import("react-native").View>>, import("styled-components").DefaultTheme, {}, never>;
 declare const Link: (props: LinkProps) => React.ReactElement;
 export default Link;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/cta/Link/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/cta/Link/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAMvE,MAAM,MAAM,SAAS,GAAG,qBAAqB,GAAG;IAC9C,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC5D,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAClC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAUF,eAAO,MAAM,IAAI,2HAKhB,CAAC;AAgDF,QAAA,MAAM,IAAI,UAAW,SAAS,KAAG,MAAM,YAOtC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/cta/Link/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAMvE,MAAM,MAAM,SAAS,GAAG,qBAAqB,GAAG;IAC9C,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC5D,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAClC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAUF,eAAO,MAAM,IAAI,6MAKhB,CAAC;AAgDF,QAAA,MAAM,IAAI,UAAW,SAAS,KAAG,MAAM,YAOtC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/cta/QuickAction/QuickActionButton/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { TouchableOpacity, TouchableOpacityProps } from "react-native";
+import { TouchableOpacityProps } from "react-native";
 import { IconType } from "src/components/Icon/type";
 import { BaseStyledProps } from "../../../styled";
 import { TextVariants } from "../../../../styles/theme";
@@ -12,10 +12,10 @@ export type QuickActionButtonProps = TouchableOpacityProps & BaseStyledProps & {
     variant?: Variant;
 };
 export declare const StyledText: import("styled-components").StyledComponent<({ children, bracket, textAlign, testID, ...props }: import("../../../Text").BaseTextProps) => React.JSX.Element, import("styled-components").DefaultTheme, {}, never>;
-export declare const Base: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, TouchableOpacityProps & {
+export declare const Base: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<TouchableOpacityProps & React.RefAttributes<import("react-native").View>>, import("styled-components").DefaultTheme, TouchableOpacityProps & {
     visuallyDisabled?: boolean | undefined;
     variant: Variant;
 }, never>;
-declare const QuickActionButton: ({ Icon, children, disabled, onPress, onPressWhenDisabled, textVariant, variant, ...otherProps }: QuickActionButtonProps) => React.ReactElement;
+declare const QuickActionButton: ({ Icon, children, disabled, onPress, onPressWhenDisabled, textVariant, variant, testID, ...otherProps }: QuickActionButtonProps) => React.ReactElement;
 export default QuickActionButton;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/cta/QuickAction/QuickActionButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/cta/QuickAction/QuickActionButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAEvE,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAmB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,KAAK,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAEjC,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,GACxD,eAAe,GAAG;IAChB,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;IACvD,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,eAAO,MAAM,UAAU,oNAGtB,CAAC;AAEF,eAAO,MAAM,IAAI;;aACgD,OAAO;SAcvE,CAAC;AAEF,QAAA,MAAM,iBAAiB,oGASpB,sBAAsB,KAAG,MAAM,YAwBjC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/cta/QuickAction/QuickActionButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAEvE,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAmB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,KAAK,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAEjC,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,GACxD,eAAe,GAAG;IAChB,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;IACvD,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,eAAO,MAAM,UAAU,oNAGtB,CAAC;AAEF,eAAO,MAAM,IAAI;;aACgD,OAAO;SAcvE,CAAC;AAEF,QAAA,MAAM,iBAAiB,4GAUpB,sBAAsB,KAAG,MAAM,YAyBjC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/cta/QuickAction/QuickActionButton/index.js

@@ -30,8 +30,8 @@ export const Base = baseStyled(TouchableOpacity) `
     : `background-color: ${theme.colors.neutral.c20};`}
 `;
 const QuickActionButton = (_a) => {
-    var { Icon, children, disabled, onPress, onPressWhenDisabled, textVariant = "body", variant = "large" } = _a, otherProps = __rest(_a, ["Icon", "children", "disabled", "onPress", "onPressWhenDisabled", "textVariant", "variant"]);
-    return (React.createElement(Base, Object.assign({ disabled: onPressWhenDisabled ? false : disabled, onPress: disabled ? onPressWhenDisabled : onPress, visuallyDisabled: disabled, variant: variant }, otherProps),
+    var { Icon, children, disabled, onPress, onPressWhenDisabled, textVariant = "body", variant = "large", testID } = _a, otherProps = __rest(_a, ["Icon", "children", "disabled", "onPress", "onPressWhenDisabled", "textVariant", "variant", "testID"]);
+    return (React.createElement(Base, Object.assign({ disabled: onPressWhenDisabled ? false : disabled, onPress: disabled ? onPressWhenDisabled : onPress, visuallyDisabled: disabled, variant: variant }, otherProps, { testID: `${testID}-${children}` }),
         React.createElement(Icon, { size: variant === "small" ? 20 : 24, color: disabled ? "neutral.c50" : "neutral.c100" }),
         React.createElement(StyledText, { numberOfLines: 1, variant: textVariant, fontWeight: "semiBold", color: disabled ? "neutral.c50" : "neutral.c100", mt: 2 }, children)));
 };

package/lib/components/cta/QuickAction/QuickActionList/index.d.ts

@@ -3,7 +3,8 @@ import { FlatListProps } from "react-native";
 import { QuickActionButtonProps } from "../QuickActionButton";
 export type QuickActionListProps = Omit<FlatListProps<QuickActionButtonProps>, "renderItem"> & {
     id: string;
+    testID?: string;
 };
-declare const QuickActionList: ({ numColumns, data, id, ...otherProps }: QuickActionListProps) => React.ReactElement;
+declare const QuickActionList: ({ numColumns, data, id, testID, ...otherProps }: QuickActionListProps) => React.ReactElement;
 export default QuickActionList;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/cta/QuickAction/QuickActionList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/cta/QuickAction/QuickActionList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAY,aAAa,EAAE,MAAM,cAAc,CAAC;AAEvD,OAA0B,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEjF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,EAAE,YAAY,CAAC,GAAG;IAC7F,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,QAAA,MAAM,eAAe,4CAKlB,oBAAoB,KAAG,MAAM,YAyB/B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/cta/QuickAction/QuickActionList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAY,aAAa,EAAE,MAAM,cAAc,CAAC;AAEvD,OAA0B,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEjF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,EAAE,YAAY,CAAC,GAAG;IAC7F,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,QAAA,MAAM,eAAe,oDAMlB,oBAAoB,KAAG,MAAM,YA0B/B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/cta/QuickAction/QuickActionList/index.js

@@ -13,9 +13,9 @@ import React, { useCallback } from "react";
 import { FlatList } from "react-native";
 import QuickActionButton from "../QuickActionButton";
 const QuickActionList = (_a) => {
-    var { numColumns = 3, data, id } = _a, otherProps = __rest(_a, ["numColumns", "data", "id"]);
+    var { numColumns = 3, data, id, testID } = _a, otherProps = __rest(_a, ["numColumns", "data", "id", "testID"]);
     const renderItem = useCallback(({ item, index }) => {
-        return (React.createElement(QuickActionButton, Object.assign({}, item, { flex: 1, mr: (index + 1) % numColumns > 0 && data && index !== data.length - 1 ? 4 : 0, mb: (data === null || data === void 0 ? void 0 : data.length) && index + numColumns < data.length ? 4 : 0 })));
+        return (React.createElement(QuickActionButton, Object.assign({}, item, { flex: 1, mr: (index + 1) % numColumns > 0 && data && index !== data.length - 1 ? 4 : 0, mb: (data === null || data === void 0 ? void 0 : data.length) && index + numColumns < data.length ? 4 : 0, testID: testID })));
     }, []);
     return (React.createElement(FlatList, Object.assign({}, otherProps, { data: data, keyExtractor: (_item, index) => `${id}${index}`, horizontal: false, renderItem: renderItem, numColumns: numColumns })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.26.1",
+  "version": "0.27.0-next.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -40,7 +40,7 @@
     "react-native-modal": "^13.0.0",
     "rn-range-slider": "2.1.1",
     "styled-system": "^5.1.5",
-    "@ledgerhq/crypto-icons-ui": "^1.6.0",
+    "@ledgerhq/crypto-icons-ui": "^1.7.0-next.0",
     "@ledgerhq/icons-ui": "^0.8.1",
     "@ledgerhq/ui-shared": "^0.3.0"
   },
@@ -108,11 +108,11 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.15",
-    "expo": "^49.0.7",
+    "expo": "51.0.39",
     "expo-asset": "8.10.1",
     "expo-constants": "^14.4.2",
     "expo-font": "^11.4.0",
-    "expo-modules-core": "1.5.11",
+    "expo-modules-core": "1.12.26",
     "fs-extra": "^10.0.1",
     "glob": "^7.2.0",
     "metro": "^0.80.12",
@@ -130,7 +130,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18",
-    "react-native": "0.74.6",
+    "react-native": "0.75.4",
     "react-native-reanimated": "3.16.1",
     "react-native-safe-area-context": "^4.10.9",
     "react-native-svg": "13.14.0",