@ledgerhq/native-ui 0.28.0 → 0.29.0-next.0

package/lib/components/Layout/List/TipList/index.js

@@ -1,20 +1,11 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { useMemo } from "react";
 import List from "../List";
 import Check from "@ledgerhq/icons-ui/nativeLegacy/CheckAloneMedium";
 import Close from "@ledgerhq/icons-ui/nativeLegacy/CloseMedium";
-export default function TipList(_a) {
-    var { items } = _a, props = __rest(_a, ["items"]);
-    const tipItems = useMemo(() => items.map((item) => (Object.assign(Object.assign({}, item), { bullet: item.isPositive ? (React.createElement(Check, { size: 20, color: "success.c50" })) : (React.createElement(Close, { size: 20, color: "error.c50" })) }))), [items]);
-    return React.createElement(List, Object.assign({ items: tipItems }, props));
+export default function TipList({ items, ...props }) {
+    const tipItems = useMemo(() => items.map((item) => ({
+        ...item,
+        bullet: item.isPositive ? (React.createElement(Check, { size: 20, color: "success.c50" })) : (React.createElement(Close, { size: 20, color: "error.c50" })),
+    })), [items]);
+    return React.createElement(List, { items: tipItems, ...props });
 }

package/lib/components/Layout/List/VerticalStepper/StepperItem.js

@@ -12,7 +12,6 @@ const Container = styled(Flex) `
   border-bottom-color: ${(p) => p.isLastItem && p.status !== "inactive" ? "transparent" : p.theme.colors.neutral.c40};
 `;
 export default function StepperItem({ item, progress, nested, isLastItem, onTapIndex, index, }) {
-    var _a;
     /**
      * Having an initial value of null will prevent having "height: 0" before the
      * initial call of onLayout.
@@ -25,16 +24,13 @@ export default function StepperItem({ item, progress, nested, isLastItem, onTapI
     const handleLayout = useCallback(({ nativeEvent: { layout } }) => {
         sharedHeight.value = withTiming(layout.height, { duration: 300 });
     }, [sharedHeight]);
-    const animatedStyle = useAnimatedStyle(() => {
-        var _a;
-        return ({
-            /**
-             * If it's null the component still renders normally at its full height
-             * without its height being derived from an animated value.
-             */
-            height: (_a = sharedHeight.value) !== null && _a !== void 0 ? _a : undefined,
-        });
-    }, []);
+    const animatedStyle = useAnimatedStyle(() => ({
+        /**
+         * If it's null the component still renders normally at its full height
+         * without its height being derived from an animated value.
+         */
+        height: sharedHeight.value ?? undefined,
+    }), []);
     const handlePress = useCallback(() => {
         onTapIndex && onTapIndex(index);
     }, [onTapIndex, index]);
@@ -47,7 +43,7 @@ export default function StepperItem({ item, progress, nested, isLastItem, onTapI
                         item.status === "active" && (React.createElement(ProgressLoader, { progress: progress, infinite: !progress, radius: 10, strokeWidth: 2 }))),
                     React.createElement(Flex, { flex: 1, ml: nested ? 0 : 4, mr: nested ? 0 : 2 },
                         React.createElement(Flex, { pb: item.status === "active" && item.renderBody ? 3 : undefined },
-                            React.createElement(Text, Object.assign({}, (nested ? { variant: "body" } : { variant: "large", fontWeight: "semiBold" }), { color: item.status === "active" || nested ? "neutral.c100" : "neutral.c80" }), item.status === "completed" ? (_a = item.doneTitle) !== null && _a !== void 0 ? _a : item.title : item.title)),
+                            React.createElement(Text, { ...(nested ? { variant: "body" } : { variant: "large", fontWeight: "semiBold" }), color: item.status === "active" || nested ? "neutral.c100" : "neutral.c80" }, item.status === "completed" ? item.doneTitle ?? item.title : item.title)),
                         React.createElement(Animated.ScrollView, { style: animatedStyle, showsVerticalScrollIndicator: false },
                             React.createElement(Animated.View, { onLayout: handleLayout }, item.renderBody && item.status === "active" ? item.renderBody(true) : null))))))));
 }

package/lib/components/Layout/List/VerticalStepper/index.js

@@ -1,20 +1,8 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import StepperItem from "./StepperItem";
 import { Flex } from "../..";
-export default React.memo(function VerticalStepper(_a) {
-    var { steps, onTapIndex, nested } = _a, props = __rest(_a, ["steps", "onTapIndex", "nested"]);
-    return (React.createElement(Flex, Object.assign({}, props, { flexDirection: "column" }),
-        nested && React.createElement(Flex, { mt: 7, mb: 4, borderBottomWidth: 1, borderBottomColor: "neutral.c40" }), steps === null || steps === void 0 ? void 0 :
-        steps.map((step, index) => (React.createElement(StepperItem, { key: step.title, item: step, progress: step.progress, nested: nested, isLastItem: index === steps.length - 1, onTapIndex: onTapIndex, index: index })))));
+export default React.memo(function VerticalStepper({ steps, onTapIndex, nested, ...props }) {
+    return (React.createElement(Flex, { ...props, flexDirection: "column" },
+        nested && React.createElement(Flex, { mt: 7, mb: 4, borderBottomWidth: 1, borderBottomColor: "neutral.c40" }),
+        steps?.map((step, index) => (React.createElement(StepperItem, { key: step.title, item: step, progress: step.progress, nested: nested, isLastItem: index === steps.length - 1, onTapIndex: onTapIndex, index: index })))));
 });

package/lib/components/Layout/List/VerticalTimeline/TimelineIndicator.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import { Dimensions, PixelRatio, Platform, StyleSheet } from "react-native";
 import { CircledCheckSolidMedium } from "@ledgerhq/icons-ui/nativeLegacy";
@@ -75,10 +64,9 @@ const CenterCircle = styled(Flex) `
   align-items: center;
   justify-content: center;
 `;
-export default function TimelineIndicator(_a) {
-    var { status, isFirstItem, isLastItem, topHeight } = _a, props = __rest(_a, ["status", "isFirstItem", "isLastItem", "topHeight"]);
+export default function TimelineIndicator({ status, isFirstItem, isLastItem, topHeight, ...props }) {
     const { colors } = useTheme();
-    return (React.createElement(Flex, Object.assign({ flexDirection: "column", alignItems: "center" }, props),
+    return (React.createElement(Flex, { flexDirection: "column", alignItems: "center", ...props },
         React.createElement(TopSegmentSvg, { status: status, hidden: isFirstItem, height: PixelRatio.roundToNearestPixel(topHeight || topSegmentDefaultHeight) }),
         React.createElement(CenterCircle, { status: status, isLastItem: isLastItem }, status === "completed" && (React.createElement(CircledCheckSolidMedium, { color: isLastItem ? colors.success.c70 : colors.primary.c80, size: 20 }))),
         React.createElement(BottomSegmentSvg, { status: status, hidden: isLastItem })));

package/lib/components/Layout/List/VerticalTimeline/TimelineItem.js

@@ -35,7 +35,6 @@ const Container = styled(Flex) `
   padding: 20px 16px;
 `;
 export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, isLastItem, setActiveIndex, index, withExtraMarginOnActiveStep, }) {
-    var _a;
     const theme = useTheme();
     /**
      * Having an initial value of null will prevent having "height: 0" before the
@@ -49,16 +48,13 @@ export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, i
     const handleLayout = useCallback(({ nativeEvent: { layout } }) => {
         sharedHeight.value = withTiming(layout.height, { duration: 300 });
     }, [sharedHeight]);
-    const animatedStyle = useAnimatedStyle(() => {
-        var _a;
-        return ({
-            /**
-             * If it's null the component still renders normally at its full height
-             * without its height being derived from an animated value.
-             */
-            height: (_a = sharedHeight.value) !== null && _a !== void 0 ? _a : undefined,
-        });
-    }, []);
+    const animatedStyle = useAnimatedStyle(() => ({
+        /**
+         * If it's null the component still renders normally at its full height
+         * without its height being derived from an animated value.
+         */
+        height: sharedHeight.value ?? undefined,
+    }), []);
     const handlePress = useCallback(() => {
         setActiveIndex && setActiveIndex(index);
     }, [setActiveIndex, index]);
@@ -73,8 +69,8 @@ export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, i
                             ? "success.c70"
                             : item.status === "active"
                                 ? "primary.c80"
-                                : "neutral.c70" }, item.status === "completed" ? (_a = item.doneTitle) !== null && _a !== void 0 ? _a : item.title : item.title),
-                    (item === null || item === void 0 ? void 0 : item.estimatedTime) && item.status === "active" && (React.createElement(Tag, null, formatEstimatedTime
+                                : "neutral.c70" }, item.status === "completed" ? item.doneTitle ?? item.title : item.title),
+                    item?.estimatedTime && item.status === "active" && (React.createElement(Tag, null, formatEstimatedTime
                         ? formatEstimatedTime(item.estimatedTime)
                         : `${item.estimatedTime / 60} min`))),
                 React.createElement(Animated.ScrollView, { style: animatedStyle, showsVerticalScrollIndicator: false },

package/lib/components/Layout/List/VerticalTimeline/index.js

@@ -1,22 +1,10 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { useRef, useCallback } from "react";
 import { ScrollView, View, } from "react-native";
 import TimelineItem from "./TimelineItem";
 import Flex from "../../Flex";
 import Text from "../../../Text";
 import { ItemStatus } from "../types";
-export default function VerticalTimeline(_a) {
-    var { steps, formatEstimatedTime, setActiveIndex, header, autoScroll = true, contentContainerStyle } = _a, props = __rest(_a, ["steps", "formatEstimatedTime", "setActiveIndex", "header", "autoScroll", "contentContainerStyle"]);
+export default function VerticalTimeline({ steps, formatEstimatedTime, setActiveIndex, header, autoScroll = true, contentContainerStyle, ...props }) {
     const scrollViewRef = useRef(null);
     const stepsContainerLayout = useRef();
     const onStepsContainerLayout = useCallback((evt) => {
@@ -30,11 +18,11 @@ export default function VerticalTimeline(_a) {
     }, []);
     return (React.createElement(ScrollView, { ref: scrollViewRef, onLayout: onStepsContainerLayout, contentContainerStyle: contentContainerStyle },
         header,
-        React.createElement(Flex, Object.assign({}, props, { onLayout: onStepsContainerLayout, flexDirection: "column" }), steps === null || steps === void 0 ? void 0 : steps.map((step, index) => (React.createElement(View, { onLayout: autoScroll && step.status === "active" ? onActiveStepLayout : undefined },
+        React.createElement(Flex, { ...props, onLayout: onStepsContainerLayout, flexDirection: "column" }, steps?.map((step, index) => (React.createElement(View, { onLayout: autoScroll && step.status === "active" ? onActiveStepLayout : undefined },
             React.createElement(TimelineItem, { key: step.title, item: step, formatEstimatedTime: formatEstimatedTime, isFirstItem: index === 0, isLastItem: index === steps.length - 1, setActiveIndex: setActiveIndex, index: index })))))));
 }
-const SubtitleText = (props) => (React.createElement(Text, Object.assign({ variant: "body", fontWeight: "semiBold", color: "neutral.c100", mb: 3 }, props)));
-const BodyText = (props) => (React.createElement(Text, Object.assign({ variant: "bodyLineHeight", fontWeight: "medium", color: "neutral.c80" }, props)));
+const SubtitleText = (props) => (React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: "neutral.c100", mb: 3, ...props }));
+const BodyText = (props) => (React.createElement(Text, { variant: "bodyLineHeight", fontWeight: "medium", color: "neutral.c80", ...props }));
 VerticalTimeline.BodyText = BodyText;
 VerticalTimeline.SubtitleText = SubtitleText;
 VerticalTimeline.ItemStatus = ItemStatus;

package/lib/components/Layout/Modals/BaseModal/index.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { useCallback } from "react";
 import ReactNativeModal from "react-native-modal";
 import styled from "styled-components/native";
@@ -89,8 +78,7 @@ export function ModalHeaderBackButton({ onBack, }) {
         React.createElement(TouchableOpacity, { onPress: onBack, testID: "modal-back-button" },
             React.createElement(ArrowLeft, { color: colors.neutral.c100, size: "XS" }))));
 }
-export default function BaseModal(_a) {
-    var { isOpen, onClose = () => { }, onBack = () => { }, noCloseButton, hasBackButton, safeContainerStyle = {}, containerStyle = {}, modalStyle = {}, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, onModalHide, CustomHeader } = _a, rest = __rest(_a, ["isOpen", "onClose", "onBack", "noCloseButton", "hasBackButton", "safeContainerStyle", "containerStyle", "modalStyle", "preventBackdropClick", "Icon", "iconColor", "title", "description", "subtitle", "children", "onModalHide", "CustomHeader"]);
+export default function BaseModal({ isOpen, onClose = () => { }, onBack = () => { }, noCloseButton, hasBackButton, safeContainerStyle = {}, containerStyle = {}, modalStyle = {}, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, onModalHide, CustomHeader, ...rest }) {
     const backDropProps = preventBackdropClick
         ? {}
         : {
@@ -105,7 +93,7 @@ export default function BaseModal(_a) {
         onClose();
         onModalHide && onModalHide();
     }, [onClose, onModalHide]);
-    return (React.createElement(ReactNativeModal, Object.assign({}, backDropProps, rest, { isVisible: !!isOpen, deviceWidth: width, deviceHeight: height, useNativeDriver: true, useNativeDriverForBackdrop: true, hideModalContentWhileAnimating: true, onModalHide: onModalHideWithClose, style: [defaultModalStyle, modalStyle] }),
+    return (React.createElement(ReactNativeModal, { ...backDropProps, ...rest, isVisible: !!isOpen, deviceWidth: width, deviceHeight: height, useNativeDriver: true, useNativeDriverForBackdrop: true, hideModalContentWhileAnimating: true, onModalHide: onModalHideWithClose, style: [defaultModalStyle, modalStyle] },
         React.createElement(SafeContainer, { style: safeContainerStyle },
             CustomHeader && (React.createElement(CustomHeader, null, !noCloseButton && React.createElement(ModalHeaderCloseButton, { onClose: onClose }))),
             React.createElement(Container, { style: containerStyle },

package/lib/components/Layout/Modals/BottomDrawer/index.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import { StyleSheet } from "react-native";
 import BaseModal from "../BaseModal";
@@ -34,7 +23,6 @@ const modalStyleOverrides = StyleSheet.create({
         borderTopRightRadius: 24,
     },
 });
-export default function BottomDrawer(_a) {
-    var { children } = _a, restProps = __rest(_a, ["children"]);
-    return (React.createElement(BaseModal, Object.assign({}, restProps, { modalStyle: modalStyleOverrides.modal, safeContainerStyle: modalStyleOverrides.safeContainer, containerStyle: [modalStyleOverrides.container, restProps.containerStyle], propagateSwipe: true }), children));
+export default function BottomDrawer({ children, ...restProps }) {
+    return (React.createElement(BaseModal, { ...restProps, modalStyle: modalStyleOverrides.modal, safeContainerStyle: modalStyleOverrides.safeContainer, containerStyle: [modalStyleOverrides.container, restProps.containerStyle], propagateSwipe: true }, children));
 }

package/lib/components/Layout/Modals/Popin/index.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import { StyleSheet } from "react-native";
 import styled from "styled-components/native";
@@ -27,9 +16,8 @@ const modalStyleOverrides = StyleSheet.create({
         borderRadius: 4,
     },
 });
-export default function Popin(_a) {
-    var { children, leftButtonText = "Cancel", rightButtonText = "Delete", onLeftButtonPress, onRightButtonPress } = _a, restProps = __rest(_a, ["children", "leftButtonText", "rightButtonText", "onLeftButtonPress", "onRightButtonPress"]);
-    return (React.createElement(BaseModal, Object.assign({}, restProps, { containerStyle: modalStyleOverrides.container }),
+export default function Popin({ children, leftButtonText = "Cancel", rightButtonText = "Delete", onLeftButtonPress, onRightButtonPress, ...restProps }) {
+    return (React.createElement(BaseModal, { ...restProps, containerStyle: modalStyleOverrides.container },
         children,
         React.createElement(FooterButtonsContainer, null,
             React.createElement(Button, { onPress: onLeftButtonPress, outline: true, type: "shade", style: { flex: 1, marginRight: 8 } },

package/lib/components/Layout/Modals/Tooltip/index.js

@@ -1,26 +1,14 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { useCallback, useState } from "react";
 import { TouchableOpacity } from "react-native";
 import BottomDrawer from "../BottomDrawer";
-export default function Tooltip(_a) {
-    var { children, tooltipContent } = _a, restProps = __rest(_a, ["children", "tooltipContent"]);
+export default function Tooltip({ children, tooltipContent, ...restProps }) {
     const [isOpen, setIsOpen] = useState(false);
     const openModal = useCallback(() => {
         setIsOpen(true);
     }, []);
     return (React.createElement(React.Fragment, null,
         React.createElement(TouchableOpacity, { onPress: openModal }, children),
-        React.createElement(BottomDrawer, Object.assign({}, restProps, { isOpen: isOpen, onClose: () => {
+        React.createElement(BottomDrawer, { ...restProps, isOpen: isOpen, onClose: () => {
                 setIsOpen(false);
-            } }), tooltipContent)));
+            } }, tooltipContent)));
 }

package/lib/components/Layout/ScrollContainer/index.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import { space } from "styled-system";
 import baseStyled from "../../styled";
@@ -16,8 +5,5 @@ import Animated from "react-native-reanimated";
 const ScrollView = baseStyled(Animated.ScrollView) `
   ${space};
 `;
-const ScrollContainer = (_a) => {
-    var { children, onScroll, horizontal = false } = _a, props = __rest(_a, ["children", "onScroll", "horizontal"]);
-    return (React.createElement(ScrollView, Object.assign({}, props, { onScroll: onScroll, horizontal: horizontal }), children));
-};
+const ScrollContainer = ({ children, onScroll, horizontal = false, ...props }) => (React.createElement(ScrollView, { ...props, onScroll: onScroll, horizontal: horizontal }, children));
 export default ScrollContainer;

package/lib/components/Layout/ScrollContainerHeader/index.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import { FlatList, View } from "react-native";
 import Animated, { useAnimatedScrollHandler, useSharedValue } from "react-native-reanimated";
@@ -17,17 +6,16 @@ import Header from "./Header";
 import baseStyled from "../../styled";
 const StyledFlatList = baseStyled(FlatList) ``;
 const AnimatedFlatList = Animated.createAnimatedComponent(StyledFlatList);
-const ScrollContainerHeader = (_a) => {
-    var { TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, children, onScroll, containerProps } = _a, props = __rest(_a, ["TopLeftSection", "TopRightSection", "TopMiddleSection", "MiddleSection", "BottomSection", "children", "onScroll", "containerProps"]);
+const ScrollContainerHeader = ({ TopLeftSection, TopRightSection, TopMiddleSection, MiddleSection, BottomSection, children, onScroll, containerProps, ...props }) => {
     const currentPositionY = useSharedValue(0);
     const handleScroll = useAnimatedScrollHandler((event) => {
         currentPositionY.value = event.contentOffset.y;
         if (onScroll)
             onScroll(event.contentOffset.y);
     });
-    return (React.createElement(Flex, Object.assign({ flex: 1 }, containerProps),
+    return (React.createElement(Flex, { flex: 1, ...containerProps },
         React.createElement(Header, { TopLeftSection: TopLeftSection, TopRightSection: TopRightSection, TopMiddleSection: TopMiddleSection, MiddleSection: MiddleSection, BottomSection: BottomSection, currentPositionY: currentPositionY }),
-        React.createElement(AnimatedFlatList, Object.assign({}, props, { onScroll: handleScroll, scrollEventThrottle: 16, data: [...React.Children.toArray(children)], renderItem: ({ item }) => React.createElement(View, null, item), keyExtractor: (_, index) => index.toString() }))));
+        React.createElement(AnimatedFlatList, { ...props, onScroll: handleScroll, scrollEventThrottle: 16, data: [...React.Children.toArray(children)], renderItem: ({ item }) => React.createElement(View, null, item), keyExtractor: (_, index) => index.toString() })));
 };
 ScrollContainerHeader.Header = Header;
 export default ScrollContainerHeader;

package/lib/components/Layout/ScrollListContainer/index.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { forwardRef } from "react";
 import { View, } from "react-native";
 import Animated from "react-native-reanimated";
@@ -19,8 +8,7 @@ const AnimatedFlatList = Animated.createAnimatedComponent(StyledFlatList);
  ** This Layout is a wrapper for FlatList that accepts
  ** complex onScroll callback for react-native-reanimated.
  */
-const ScrollListContainer = forwardRef((_a, ref) => {
-    var { children, onScroll, horizontal = false } = _a, props = __rest(_a, ["children", "onScroll", "horizontal"]);
-    return (React.createElement(AnimatedFlatList, Object.assign({ ref: ref, data: [...React.Children.toArray(children)], renderItem: ({ item }) => React.createElement(View, null, item), onScroll: onScroll, horizontal: horizontal }, props)));
+const ScrollListContainer = forwardRef(({ children, onScroll, horizontal = false, ...props }, ref) => {
+    return (React.createElement(AnimatedFlatList, { ref: ref, data: [...React.Children.toArray(children)], renderItem: ({ item }) => React.createElement(View, null, item), onScroll: onScroll, horizontal: horizontal, ...props }));
 });
 export default ScrollListContainer;

package/lib/components/Layout/Table/Row.js

@@ -1,23 +1,11 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import FlexBox from "../Flex";
 import IconBox from "../../Icon/IconBox";
 const ICON_SIZE = 32;
 const BOX_SIZE = 40;
 const SMALL_ICON_SIZE = 14;
-export default function Row(_a) {
-    var { Icon, iconBorder = true, topLeft, bottomLeft, topRight, bottomRight } = _a, props = __rest(_a, ["Icon", "iconBorder", "topLeft", "bottomLeft", "topRight", "bottomRight"]);
-    return (React.createElement(FlexBox, Object.assign({}, props, { flexDirection: "row", justifyContent: "space-between", p: 6 }),
+export default function Row({ Icon, iconBorder = true, topLeft, bottomLeft, topRight, bottomRight, ...props }) {
+    return (React.createElement(FlexBox, { ...props, flexDirection: "row", justifyContent: "space-between", p: 6 },
         React.createElement(FlexBox, { flexDirection: "row", flexShrink: 1, alignItems: "center" },
             Icon &&
                 (iconBorder ? (React.createElement(IconBox, { Icon: Icon, iconSize: SMALL_ICON_SIZE, boxSize: BOX_SIZE })) : (React.createElement(Icon, { size: ICON_SIZE }))),

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

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { useEffect } from "react";
 import Svg, { LinearGradient, Stop, Mask, Path, Rect } from "react-native-svg";
 import styled from "styled-components/native";
@@ -20,11 +9,12 @@ const strokeSystem = system({
         scale: "colors",
     },
 });
-const Loader = styled(Svg).attrs((props) => (Object.assign({}, strokeSystem(props)))) `
+const Loader = styled(Svg).attrs((props) => ({
+    ...strokeSystem(props),
+})) `
   ${size}
 `;
-export default function InfiniteLoader(_a) {
-    var { size = 38, color = "primary.c50", mock = false, testID = "" } = _a, extraProps = __rest(_a, ["size", "color", "mock", "testID"]);
+export default function InfiniteLoader({ size = 38, color = "primary.c50", mock = false, testID = "", ...extraProps }) {
     const rotation = useSharedValue(0);
     const animatedStyles = useAnimatedStyle(() => {
         return {
@@ -44,7 +34,7 @@ export default function InfiniteLoader(_a) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     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(Loader, { 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 }),
                 React.createElement(Stop, { offset: 1, stopColor: "white", stopOpacity: 1 })),

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

@@ -10,7 +10,7 @@ const ProgressLoader = ({ progress = 0, infinite, mainColor, secondaryColor, onP
     const progressColor = mainColor || colors.primary.c80;
     const normalizedRadius = radius - strokeWidth / 2;
     const circumference = normalizedRadius * 2 * Math.PI;
-    const strokeDashoffset = circumference * (1 - (progress !== null && progress !== void 0 ? progress : 0));
+    const strokeDashoffset = circumference * (1 - (progress ?? 0));
     const rotation = useSharedValue(0);
     const animatedStyles = useAnimatedStyle(() => ({
         transform: [

package/lib/components/Navigation/FlowStepper/index.js

@@ -10,9 +10,9 @@ function FlowStepper({ activeIndex, header, footer, extraProps, progressBarProps
         previousActiveIndex.current = activeIndex;
     }, [activeIndex]);
     return (React.createElement(Flex, { flex: 1 },
-        header && header(Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength })),
+        header && header({ ...extraProps, activeIndex, stepsLength }),
         React.createElement(SafeAreaView, { style: { flex: 1 } },
-            React.createElement(ProgressBar, Object.assign({ index: activeIndex, length: stepsLength }, progressBarProps)),
+            React.createElement(ProgressBar, { index: activeIndex, length: stepsLength, ...progressBarProps }),
             React.createElement(Flex, { flex: 1 }, React.Children.map(children, (child, index) => {
                 if (renderTransition && transitionDuration) {
                     return (React.createElement(Transition, { in: index === activeIndex, timeout: transitionDuration, mountOnEnter: true, unmountOnExit: true }, (status) => {
@@ -31,6 +31,6 @@ function FlowStepper({ activeIndex, header, footer, extraProps, progressBarProps
                     return index === activeIndex ? child : null;
                 }
             })),
-            footer && footer(Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength })))));
+            footer && footer({ ...extraProps, activeIndex, stepsLength }))));
 }
 export default FlowStepper;

package/lib/components/Navigation/Stepper/index.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { useMemo } from "react";
 import styled, { useTheme } from "styled-components/native";
 import { space, color } from "styled-system";
@@ -26,15 +15,14 @@ const SeparatorFilling = Animated.createAnimatedComponent(styled.View `
   height: 100%;
   background-color: ${(p) => p.theme.colors.neutral.c100};
 `);
-const AnimatedSeparator = (_a) => {
-    var { filled, delay, duration } = _a, spaceProps = __rest(_a, ["filled", "delay", "duration"]);
+const AnimatedSeparator = ({ filled, delay, duration, ...spaceProps }) => {
     const animatedStyle = useAnimatedStyle(() => ({
         width: withDelay(delay, withTiming(filled ? "100%" : "0%", {
             duration: duration,
             easing: Easing.linear,
         })),
     }));
-    return (React.createElement(Separator, Object.assign({}, spaceProps),
+    return (React.createElement(Separator, { ...spaceProps },
         React.createElement(SeparatorFilling, { style: [animatedStyle] })));
 };
 // #endregion
@@ -141,10 +129,10 @@ function Stepper({ steps, activeIndex, errored }) {
                 ? errored
                     ? "ERRORED"
                     : "CURRENT"
-                : i < (activeIndex !== null && activeIndex !== void 0 ? activeIndex : 0)
+                : i < (activeIndex ?? 0)
                     ? "COMPLETED"
                     : "PENDING", showLeftSeparator: i > 0, showRightSeparator: i < steps.length - 1 }),
-        i < steps.length - 1 ? (React.createElement(AnimatedSeparator, { filled: i < (activeIndex !== null && activeIndex !== void 0 ? activeIndex : 0), duration: 250, delay: 100, mt: separatorMarginTop })) : null)))));
+        i < steps.length - 1 ? (React.createElement(AnimatedSeparator, { filled: i < (activeIndex ?? 0), duration: 250, delay: 100, mt: separatorMarginTop })) : null)))));
 }
 // #endregion
 export default Stepper;

package/lib/components/ProgressBar/index.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import styled from "styled-components/native";
 import Flex from "../Layout/Flex";
@@ -21,13 +10,12 @@ const ActiveBar = styled(Box) `
   left: 0;
 `;
 const AnimatedBar = Animated.createAnimatedComponent(ActiveBar);
-function ProgressBar(_a) {
-    var { index, length, activeBarProps } = _a, props = __rest(_a, ["index", "length", "activeBarProps"]);
+function ProgressBar({ index, length, activeBarProps, ...props }) {
     const width = useDerivedValue(() => Math.round((index / (length - 1)) * 100), [index, length]);
     const animatedStyles = useAnimatedStyle(() => ({
         width: withTiming(`${width.value}%`),
     }));
-    return (React.createElement(Flex, Object.assign({ height: 4, width: "100%", backgroundColor: "neutral.c20", position: "relative" }, props),
-        React.createElement(AnimatedBar, Object.assign({ style: [animatedStyles], bg: "neutral.c100" }, activeBarProps))));
+    return (React.createElement(Flex, { height: 4, width: "100%", backgroundColor: "neutral.c20", position: "relative", ...props },
+        React.createElement(AnimatedBar, { style: [animatedStyles], bg: "neutral.c100", ...activeBarProps })));
 }
 export default React.memo(ProgressBar);

package/lib/components/Tabs/Chip/index.js

@@ -9,9 +9,9 @@ const TabBox = styled(TouchableOpacity) `
   ${(p) => (p.stretchItems ? "margin: auto;" : "margin: auto 0;")}
   padding: ${(p) => p.theme.space[p.size === "small" ? 3 : 5]}px;
   border-radius: 8px;
-  background-color: ${(p) => { var _a, _b; return p.isActive ? (_a = p.activeBg) !== null && _a !== void 0 ? _a : p.theme.colors.primary.c20 : (_b = p.inactiveBg) !== null && _b !== void 0 ? _b : "transparent"; }};
+  background-color: ${(p) => p.isActive ? p.activeBg ?? p.theme.colors.primary.c20 : p.inactiveBg ?? "transparent"};
 `;
 export const ChipTab = ({ onPress, isActive, label, disabled, activeBg, activeColor, inactiveBg, inactiveColor, stretchItems, size = "medium", }) => (React.createElement(TabBox, { activeBg: activeBg, disabled: disabled, inactiveBg: inactiveBg, isActive: isActive, stretchItems: stretchItems, onPress: onPress, size: size },
-    React.createElement(Text, { variant: "small", fontWeight: "semiBold", color: isActive ? activeColor !== null && activeColor !== void 0 ? activeColor : "palette.neutral.c100" : inactiveColor !== null && inactiveColor !== void 0 ? inactiveColor : "palette.neutral.c80", textAlign: "center" }, label)));
-const ChipTabs = (props) => (React.createElement(TemplateTabs, Object.assign({}, props, { Item: ChipTab })));
+    React.createElement(Text, { variant: "small", fontWeight: "semiBold", color: isActive ? activeColor ?? "palette.neutral.c100" : inactiveColor ?? "palette.neutral.c80", textAlign: "center" }, label)));
+const ChipTabs = (props) => (React.createElement(TemplateTabs, { ...props, Item: ChipTab }));
 export default ChipTabs;

package/lib/components/Tabs/Graph/index.js

@@ -24,5 +24,5 @@ const StyledTabs = styled(TemplateTabs) `
 export const GraphTab = ({ onPress, isActive, label, activeColor = "neutral.c100", activeBg = "neutral.c30", size = "medium", disabled, }) => {
     return (React.createElement(TabBox, { onPress: onPress, disabled: disabled }, isActive ? (React.createElement(TabText, { variant: "small", size: size, bg: activeBg, color: disabled ? "neutral.c70" : activeColor, fontWeight: "semiBold", uppercase: true }, label)) : (React.createElement(TabText, { variant: "small", size: size, color: disabled ? "neutral.c40" : "neutral.c70", fontWeight: "semiBold", uppercase: true }, label))));
 };
-const GraphTabs = (props) => (React.createElement(StyledTabs, Object.assign({}, props, { Item: GraphTab })));
+const GraphTabs = (props) => (React.createElement(StyledTabs, { ...props, Item: GraphTab }));
 export default GraphTabs;