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

package/lib/components/Cards/BannerCard/index.js

@@ -38,7 +38,7 @@ export const CloseButton = ({ onPressDismiss }) => {
 };
 const CardContainer = (props) => {
     const { onPressDismiss, LeftElement, LeftElementNotCirlcled, title, typeOfRightIcon } = props;
-    return (React.createElement(Container, Object.assign({}, props),
+    return (React.createElement(Container, { ...props },
         LeftElementNotCirlcled ? (LeftElement) : (React.createElement(Flex, { borderRadius: 50, height: 40, width: 40, alignItems: "center", justifyContent: "center", bg: "opacityDefault.c05" }, LeftElement)),
         React.createElement(Flex, { flexShrink: 1 },
             React.createElement(Text, { mx: 4, variant: "large", fontWeight: "medium", numberOfLines: 2, color: "neutral.c100" }, title)),
@@ -46,6 +46,6 @@ const CardContainer = (props) => {
             React.createElement(ChevronRightMedium, { size: 24 })))));
 };
 const BannerCard = (props) => {
-    return React.createElement(CardContainer, Object.assign({}, props, { activeOpacity: 0.5 }));
+    return React.createElement(CardContainer, { ...props, activeOpacity: 0.5 });
 };
 export default BannerCard;

package/lib/components/Cards/InformativeCard/index.js

@@ -20,12 +20,12 @@ const CardContainer = (props) => {
         React.createElement(Flex, { justifyContent: "space-between", alignItems: "flex-start", py: 2, pr: imageUrl ? 4 : 2, flex: 1 },
             React.createElement(Text, { variant: "body", fontWeight: "medium", color: "neutral.c100", numberOfLines: 2 }, title),
             React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: "neutral.c70", numberOfLines: 1, mt: 4 }, tag)),
-        imageUrl && (React.createElement(ImageContent, Object.assign({ source: {
+        imageUrl && (React.createElement(ImageContent, { source: {
                 uri: imageUrl,
-            }, style: styles.image }, imageProps)))));
+            }, style: styles.image, ...imageProps }))));
 };
 const InformativeCard = (props) => {
-    return (React.createElement(Base, Object.assign({}, props, { activeOpacity: 0.5, onPress: props.onClickCard }),
-        React.createElement(CardContainer, Object.assign({}, props))));
+    return (React.createElement(Base, { ...props, activeOpacity: 0.5, onPress: props.onClickCard },
+        React.createElement(CardContainer, { ...props })));
 };
 export default memo(InformativeCard);

package/lib/components/Cards/NotificationCard/index.js

@@ -14,7 +14,7 @@ const Timer = ({ time, viewed }) => (React.createElement(Flex, { flexDirection:
 const NotificationCard = (props) => {
     const { tag = "", time = "", title, description, cta, viewed, onClickCard, showLinkCta, link = "", } = props;
     const ctaIcon = useMemo(() => {
-        const isDeepLink = link === null || link === void 0 ? void 0 : link.startsWith("ledgerlive:");
+        const isDeepLink = link?.startsWith("ledgerlive:");
         return link && isDeepLink ? undefined : () => React.createElement(ExternalLinkMedium, { color: "neutral.c100" });
     }, [link]);
     return (React.createElement(Base, { onPress: onClickCard, activeOpacity: link ? 0.5 : 1 },

package/lib/components/Cards/SideImageCard/index.js

@@ -54,11 +54,11 @@ const TextComponent = (props) => (React.createElement(Flex, { justifyContent: "s
 const CardContainer = (props) => {
     const { imageUrl, onPressDismiss } = props;
     return (React.createElement(Container, { height: 125 },
-        React.createElement(TextComponent, Object.assign({}, props)),
+        React.createElement(TextComponent, { ...props }),
         React.createElement(ImageComponent, { imageUrl: imageUrl, onPressDismiss: onPressDismiss })));
 };
 const SideImageCard = (props) => {
-    return (React.createElement(Base, Object.assign({}, props, { activeOpacity: 0.5 }),
-        React.createElement(CardContainer, Object.assign({}, props))));
+    return (React.createElement(Base, { ...props, activeOpacity: 0.5 },
+        React.createElement(CardContainer, { ...props })));
 };
 export default SideImageCard;

package/lib/components/Carousel/index.js

@@ -108,16 +108,16 @@ function Carousel({ activeIndex = 0, autoDelay, restartAfterEnd = true, scrollOn
             onTap(event);
         }
     }, [maxDurationOfTap, onTap, tapTime]);
-    return (React.createElement(Flex, Object.assign({ flex: 1, width: "100%", alignItems: "center", justifyContent: "center" }, containerProps),
-        React.createElement(HorizontalScrollView, Object.assign({ ref: scrollRef, onScroll: onScroll, onContentSizeChange: onContentSizeChange, onScrollBeginDrag: () => {
+    return (React.createElement(Flex, { flex: 1, width: "100%", alignItems: "center", justifyContent: "center", ...containerProps },
+        React.createElement(HorizontalScrollView, { ref: scrollRef, onScroll: onScroll, onContentSizeChange: onContentSizeChange, onScrollBeginDrag: () => {
                 disableTimer.current = true;
             }, onScrollEndDrag: () => {
                 disableTimer.current = false;
             }, pagingEnabled: Platform.OS !== "web", showsHorizontalScrollIndicator: false, scrollEventThrottle: 200, contentContainerStyle: {
                 width: `${fullWidth}%`,
                 flexDirection: I18nManager.isRTL && Platform.OS !== "ios" ? "row-reverse" : "row",
-            }, decelerationRate: "fast", onTouchStart: scrollOnSidePress ? onStartTap : undefined, onTouchEnd: scrollOnSidePress ? onEndTap : undefined }, scrollViewProps), React.Children.map(children, (child, index) => (React.createElement(Flex, { key: index, flex: 1 }, child)))),
-        React.createElement(Flex, Object.assign({ my: 8 }, slideIndicatorContainerProps), React.isValidElement(IndicatorComponent) ? (IndicatorComponent) : (
+            }, decelerationRate: "fast", onTouchStart: scrollOnSidePress ? onStartTap : undefined, onTouchEnd: scrollOnSidePress ? onEndTap : undefined, ...scrollViewProps }, React.Children.map(children, (child, index) => (React.createElement(Flex, { key: index, flex: 1 }, child)))),
+        React.createElement(Flex, { my: 8, ...slideIndicatorContainerProps }, React.isValidElement(IndicatorComponent) ? (IndicatorComponent) : (
         /* @ts-expect-error TS 5 can't seem to be able to prove this is a react comopnent here */
         React.createElement(IndicatorComponent, { activeIndex: activeIndexState || 0, onChange: (index) => {
                 scrollToIndex(index);

package/lib/components/Form/Input/AnimatedInput/AnimatedNotchedLabel.js

@@ -70,7 +70,7 @@ export const AnimatedNotchedLabel = ({ placeholder, inputStatus, value, }) => {
             easing: Easing.inOut(Easing.quad),
         }));
     }, [notched]);
-    return (React.createElement(LabelContainer, { onLayout: (event) => setLabelWidth(event.nativeEvent.layout.width), style: Object.assign(Object.assign({}, labelStyle), { elevation: notched ? 3 : 0 }), notched: notched },
+    return (React.createElement(LabelContainer, { onLayout: (event) => setLabelWidth(event.nativeEvent.layout.width), style: { ...labelStyle, elevation: notched ? 3 : 0 }, notched: notched },
         notched && React.createElement(LineCutout, { status: inputStatus, labelWidth: labelWidth }),
-        React.createElement(LabelText, { style: Object.assign({}, labelFontSize), status: inputStatus }, placeholder)));
+        React.createElement(LabelText, { style: { ...labelFontSize }, status: inputStatus }, placeholder)));
 };

package/lib/components/Form/Input/AnimatedInput/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 { BaseInput } from "..";
 import styled, { useTheme } from "styled-components/native";
@@ -20,9 +9,8 @@ const InputContainer = styled(View) `
   position: relative;
   box-sizing: border-box;
 `;
-const AnimatedInput = (_a, ref) => {
-    var { style = { width: "100%" } } = _a, textInputProps = __rest(_a, ["style"]);
-    const { placeholder, onFocus: onFocusCallback, onBlur: onBlurCallback, error, value } = textInputProps, rest = __rest(textInputProps, ["placeholder", "onFocus", "onBlur", "error", "value"]);
+const AnimatedInput = ({ style = { width: "100%" }, ...textInputProps }, ref) => {
+    const { placeholder, onFocus: onFocusCallback, onBlur: onBlurCallback, error, value, ...rest } = textInputProps;
     const theme = useTheme();
     const { onFocus, onBlur, focused } = useAnimatedInputFocus({
         onFocusCallback,
@@ -32,7 +20,7 @@ const AnimatedInput = (_a, ref) => {
     const displayClearCross = inputStatus === "error" || inputStatus === "focused";
     return (React.createElement(InputContainer, { status: inputStatus, style: style },
         placeholder && (React.createElement(AnimatedNotchedLabel, { placeholder: placeholder, inputStatus: inputStatus, value: value })),
-        React.createElement(BaseInput, Object.assign({ ref: ref, onFocus: onFocus, onBlur: onBlur, error: error, value: value, color: theme ? inputTextColor[inputStatus]({ theme }) : "neutral.c100", inputContainerStyle: {
+        React.createElement(BaseInput, { ref: ref, onFocus: onFocus, onBlur: onBlur, error: error, value: value, color: theme ? inputTextColor[inputStatus]({ theme }) : "neutral.c100", inputContainerStyle: {
                 backgroundColor: "none",
                 borderColor: theme ? inputStatusColors[inputStatus]({ theme }) : "neutral.c100",
                 borderRadius: 8,
@@ -41,6 +29,6 @@ const AnimatedInput = (_a, ref) => {
                 paddingRight: displayClearCross ? 8 : 14,
             }, inputErrorContainerStyles: {
                 marginTop: 8,
-            }, inputErrorColor: theme ? inputStatusColors[inputStatus]({ theme }) : "neutral.c100", showErrorIcon: true }, rest))));
+            }, inputErrorColor: theme ? inputStatusColors[inputStatus]({ theme }) : "neutral.c100", showErrorIcon: true, ...rest })));
 };
 export default React.forwardRef(AnimatedInput);

package/lib/components/Form/Input/AnimatedInputSelect/index.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 { AnimatedInput } from "..";
 import { useTheme } from "styled-components/native";
 import { useAnimatedInputFocus } from "../AnimatedInput/useAnimatedInputFocus";
 import { getInputStatus, inputStatusColors } from "../AnimatedInput/inputTextColor";
 import { SelectComponent } from "./Select";
-const AnimatedInputSelect = (_a, ref) => {
-    var { selectProps } = _a, textInputProps = __rest(_a, ["selectProps"]);
-    const { placeholder, onFocus: onFocusCallback, onBlur: onBlurCallback, error, value, onChange } = textInputProps, rest = __rest(textInputProps, ["placeholder", "onFocus", "onBlur", "error", "value", "onChange"]);
+const AnimatedInputSelect = ({ selectProps, ...textInputProps }, ref) => {
+    const { placeholder, onFocus: onFocusCallback, onBlur: onBlurCallback, error, value, onChange, ...rest } = textInputProps;
     const { onPressSelect, text } = selectProps;
     const theme = useTheme();
     const { onFocus, onBlur, focused } = useAnimatedInputFocus({
@@ -25,6 +13,6 @@ const AnimatedInputSelect = (_a, ref) => {
         onBlurCallback,
     });
     const inputStatus = getInputStatus({ focused, hasError: !!error, hasValue: !!value });
-    return (React.createElement(AnimatedInput, Object.assign({ value: value, ref: ref, onFocus: onFocus, onBlur: onBlur, renderRight: () => (React.createElement(SelectComponent, { text: text, color: inputStatusColors[inputStatus]({ theme }), onPressSelect: onPressSelect })), placeholder: placeholder, onChange: onChange }, rest)));
+    return (React.createElement(AnimatedInput, { value: value, ref: ref, onFocus: onFocus, onBlur: onBlur, renderRight: () => (React.createElement(SelectComponent, { text: text, color: inputStatusColors[inputStatus]({ theme }), onPressSelect: onPressSelect })), placeholder: placeholder, onChange: onChange, ...rest }));
 };
 export default React.forwardRef(AnimatedInputSelect);

package/lib/components/Form/Input/BaseInput/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, useCallback, useEffect, useImperativeHandle, useRef } from "react";
 import styled, { css } from "styled-components/native";
 import Text from "../../../Text";
@@ -88,29 +77,29 @@ export const InputRenderRightContainer = styled(FlexBox).attrs(() => ({
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const IDENTITY = (_) => _;
 function Input(props, ref) {
-    const { value, onChange, onChangeText, onChangeEvent, disabled, error, renderLeft, renderRight, serialize = IDENTITY, deserialize = IDENTITY, containerStyle, hasBorder = true, inputContainerStyle, baseInputContainerStyle, inputErrorContainerStyles, autoFocus, onFocus, onBlur, color, inputErrorColor = "error.c50", showErrorIcon = false } = props, textInputProps = __rest(props, ["value", "onChange", "onChangeText", "onChangeEvent", "disabled", "error", "renderLeft", "renderRight", "serialize", "deserialize", "containerStyle", "hasBorder", "inputContainerStyle", "baseInputContainerStyle", "inputErrorContainerStyles", "autoFocus", "onFocus", "onBlur", "color", "inputErrorColor", "showErrorIcon"]);
+    const { value, onChange, onChangeText, onChangeEvent, disabled, error, renderLeft, renderRight, serialize = IDENTITY, deserialize = IDENTITY, containerStyle, hasBorder = true, inputContainerStyle, baseInputContainerStyle, inputErrorContainerStyles, autoFocus, onFocus, onBlur, color, inputErrorColor = "error.c50", showErrorIcon = false, ...textInputProps } = props;
     const inputRef = useRef();
     useImperativeHandle(ref, () => inputRef.current, [inputRef]);
     const inputValue = useMemo(() => serialize(value), [serialize, value]);
     const handleChange = useCallback((value) => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(deserialize(value));
-        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(value);
+        onChange?.(deserialize(value));
+        onChangeText?.(value);
     }, [onChange, onChangeText, deserialize]);
     useEffect(() => {
         if (autoFocus && inputRef && inputRef.current && inputRef.current.focus)
             inputRef.current.focus();
     }, [inputRef, autoFocus]);
     const [focus, setFocus] = React.useState(false);
-    return (React.createElement(FlexBox, { width: "100%", style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
+    return (React.createElement(FlexBox, { width: "100%", style: containerStyle ?? undefined },
         React.createElement(InputContainer, { disabled: disabled, focus: focus, hasBorder: hasBorder, error: error, style: inputContainerStyle },
             typeof renderLeft === "function" ? renderLeft(props, inputRef) : renderLeft,
-            React.createElement(BaseInput, Object.assign({ ref: inputRef }, textInputProps, { value: inputValue, onChange: onChangeEvent, onChangeText: handleChange, editable: !disabled, disabled: disabled, error: error, onFocus: (e) => {
+            React.createElement(BaseInput, { ref: inputRef, ...textInputProps, value: inputValue, onChange: onChangeEvent, onChangeText: handleChange, editable: !disabled, disabled: disabled, error: error, onFocus: (e) => {
                     setFocus(true);
-                    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+                    onFocus?.(e);
                 }, onBlur: (e) => {
                     setFocus(false);
-                    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-                }, style: Object.assign(Object.assign({}, (color ? { color: color } : {})), baseInputContainerStyle) })),
+                    onBlur?.(e);
+                }, style: { ...(color ? { color: color } : {}), ...baseInputContainerStyle } }),
             typeof renderRight === "function" ? renderRight(props, inputRef) : renderRight),
         !!error && !disabled && (React.createElement(FlexBox, { flexDirection: "row", alignItems: "center", style: inputErrorContainerStyles },
             showErrorIcon && React.createElement(DeleteCircleFill, { color: inputErrorColor, size: "S" }),

package/lib/components/Form/Input/LegendInput/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 Input, { InputRenderRightContainer } from "../BaseInput";
 import Text from "../../../Text";
-function LegendInput(_a, ref) {
-    var { legend } = _a, inputProps = __rest(_a, ["legend"]);
-    return (React.createElement(Input, Object.assign({ ref: ref }, inputProps, { renderRight: React.createElement(InputRenderRightContainer, null,
-            React.createElement(Text, { color: "neutral.c70", variant: "body" }, legend)) })));
+function LegendInput({ legend, ...inputProps }, ref) {
+    return (React.createElement(Input, { ref: ref, ...inputProps, renderRight: React.createElement(InputRenderRightContainer, null,
+            React.createElement(Text, { color: "neutral.c70", variant: "body" }, legend)) }));
 }
 export default React.forwardRef(LegendInput);

package/lib/components/Form/Input/NumberInput/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 { TouchableOpacity } from "react-native";
 import styled from "styled-components/native";
@@ -38,14 +27,13 @@ function deserialize(value) {
         return undefined;
     }
 }
-function NumberInput(_a, ref) {
-    var { onPercentClick, max, value, disabled } = _a, inputProps = __rest(_a, ["onPercentClick", "max", "value", "disabled"]);
-    return (React.createElement(Input, Object.assign({ ref: ref, serialize: serialize, deserialize: deserialize }, inputProps, { value: value, disabled: disabled, keyboardType: "numeric", renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", py: "3px", mr: "8px", flexDirection: "row" }, [0.25, 0.5, 0.75, 1].map((percent) => {
+function NumberInput({ onPercentClick, max, value, disabled, ...inputProps }, ref) {
+    return (React.createElement(Input, { ref: ref, serialize: serialize, deserialize: deserialize, ...inputProps, value: value, disabled: disabled, keyboardType: "numeric", renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", py: "3px", mr: "8px", flexDirection: "row" }, [0.25, 0.5, 0.75, 1].map((percent) => {
             const active = !!value && !!max && Number(value) === percent * Number(max);
             return (React.createElement(PercentButton, { key: percent, onPress: () => onPercentClick(percent), active: active, disabled: disabled },
                 React.createElement(Text, { variant: "small", color: active ? "neutral.c00" : "neutral.c70" },
                     percent * 100,
                     "%")));
-        })) })));
+        })) }));
 }
 export default React.forwardRef(NumberInput);

package/lib/components/Form/Input/QrCodeInput/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 { TouchableOpacity } from "react-native";
 import styled from "styled-components/native";
@@ -28,10 +17,9 @@ const QrCodeButton = styled(TouchableOpacity) `
 const Icon = styled(QrCodeMedium).attrs((p) => ({
     color: p.theme.colors.neutral.c00,
 })) ``;
-function QrCodeInput(_a, ref) {
-    var { onQrCodeClick } = _a, inputProps = __rest(_a, ["onQrCodeClick"]);
-    return (React.createElement(Input, Object.assign({ ref: ref }, inputProps, { renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", pr: "8px" },
+function QrCodeInput({ onQrCodeClick, ...inputProps }, ref) {
+    return (React.createElement(Input, { ref: ref, ...inputProps, renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", pr: "8px" },
             React.createElement(QrCodeButton, { onPress: onQrCodeClick },
-                React.createElement(Icon, { size: "20px" }))) })));
+                React.createElement(Icon, { size: "20px" }))) }));
 }
 export default React.forwardRef(QrCodeInput);

package/lib/components/Form/Input/SearchInput/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 styled, { useTheme } from "styled-components/native";
 import Input, { InputRenderLeftContainer } from "../BaseInput";
@@ -21,18 +10,17 @@ const Icon = styled(Search).attrs((p) => ({
 const Delete = styled(DeleteCircleFill).attrs((p) => ({
     color: p.theme.colors.opacityDefault.c50,
 })) ``;
-function SearchInput(_a, ref) {
-    var { onChange, value } = _a, props = __rest(_a, ["onChange", "value"]);
+function SearchInput({ onChange, value, ...props }, ref) {
     const theme = useTheme();
     const onClear = useCallback(() => {
-        onChange === null || onChange === void 0 ? void 0 : onChange("");
+        onChange?.("");
     }, [onChange]);
-    return (React.createElement(Input, Object.assign({ ref: ref, onChange: onChange, value: value, hasBorder: false, inputContainerStyle: {
+    return (React.createElement(Input, { ref: ref, onChange: onChange, value: value, hasBorder: false, inputContainerStyle: {
             backgroundColor: theme.colors.opacityDefault.c05,
             height: 40,
             paddingHorizontal: 12,
             paddingVertical: 0,
-        }, baseInputContainerStyle: { height: 40 } }, props, { renderLeft: React.createElement(InputRenderLeftContainer, null,
-            React.createElement(Icon, { size: "S" })), renderRight: value ? (React.createElement(Button, { Icon: React.createElement(Delete, { size: "S" }), isNewIcon: true, onPress: onClear, style: { width: "auto", marginLeft: 8 } })) : null })));
+        }, baseInputContainerStyle: { height: 40 }, ...props, renderLeft: React.createElement(InputRenderLeftContainer, null,
+            React.createElement(Icon, { size: "S" })), renderRight: value ? (React.createElement(Button, { Icon: React.createElement(Delete, { size: "S" }), isNewIcon: true, onPress: onClear, style: { width: "auto", marginLeft: 8 } })) : null }));
 }
 export default React.forwardRef(SearchInput);

package/lib/components/Form/SelectableList.js

@@ -16,7 +16,7 @@ function Element(props) {
             React.createElement(Text, { variant: "large", flex: 1, color: disabled ? "neutral.c50" : selected ? "primary.c90" : "neutral.c100" }, children || value),
             RenderRight && (React.createElement(Flex, { pl: 6, flexShrink: 0 }, React.isValidElement(RenderRight) ? (RenderRight) : (
             /* @ts-expect-error TS 5 can't seem to be able to prove this is a react comopnent here */
-            React.createElement(RenderRight, Object.assign({}, props))))))));
+            React.createElement(RenderRight, { ...props })))))));
 }
 function SelectableList({ currentValue, onChange, children }) {
     return (React.createElement(Flex, { accessible: true, accessibilityRole: "radiogroup" }, React.Children.map(children, (child, index) => {
@@ -26,8 +26,8 @@ function SelectableList({ currentValue, onChange, children }) {
         const casted = child;
         return React.cloneElement(casted, {
             first: index === 0,
-            onPress: () => onChange(casted === null || casted === void 0 ? void 0 : casted.props.value),
-            selected: (casted === null || casted === void 0 ? void 0 : casted.props.value) === currentValue,
+            onPress: () => onChange(casted?.props.value),
+            selected: casted?.props.value === currentValue,
         });
     })));
 }

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

@@ -1,11 +1,12 @@
 /// <reference types="react" />
-type TabSelectorProps = {
+type TabSelectorProps<T extends string> = {
     labels: {
-        id: string;
+        id: T;
         value: string;
     }[];
-    onToggle: (value: string) => void;
+    initialTab?: T extends infer K ? K : never;
+    onToggle: (value: T) => void;
 };
-export default function TabSelector({ labels, onToggle }: TabSelectorProps): JSX.Element;
+export default function TabSelector<T extends string>({ labels, initialTab, onToggle, }: TabSelectorProps<T>): 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":";AA8BA,KAAK,gBAAgB,GAAG;IACtB,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACxC,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/TabSelector/index.tsx"],"names":[],"mappings":";AA8BA,KAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAAI;IACxC,MAAM,EAAE;QAAE,EAAE,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC9B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,EACpD,MAAM,EACN,UAAU,EACV,QAAQ,GACT,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA4DnC"}

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Pressable } from "react-native";
 import Animated, { useSharedValue, useAnimatedStyle, withTiming } from "react-native-reanimated";
 import styled from "styled-components/native";
@@ -24,10 +24,16 @@ const Tab = styled(Flex) `
   align-items: center;
   justify-content: center;
 `;
-export default function TabSelector({ labels, onToggle }) {
-    const translateX = useSharedValue(0);
+export default function TabSelector({ labels, initialTab, onToggle, }) {
     const [containerWidth, setContainerWidth] = useState(0);
-    const [selectedIndex, setSelectedIndex] = useState(0);
+    const initialIndex = initialTab ? labels.findIndex((l) => l.id === initialTab) : 0;
+    const translateX = useSharedValue(0);
+    const [selectedIndex, setSelectedIndex] = useState(initialIndex);
+    useEffect(() => {
+        if (containerWidth > 0) {
+            translateX.value = (containerWidth / labels.length) * initialIndex;
+        }
+    }, [containerWidth, labels.length, initialIndex]);
     const handlePress = (id, index) => {
         setSelectedIndex(index);
         translateX.value = (containerWidth / labels.length) * index;

package/lib/components/Icon/BoxedIcon.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, { useTheme } from "styled-components/native";
 import { PixelRatio } from "react-native";
@@ -78,9 +67,8 @@ export const IconBox = ({ Badge, size = DEFAULT_BOX_SIZE, children, borderColor
         hasBadge && (React.createElement(BadgeContainer, { badgeSize: badgeSize },
             React.createElement(Badge, { size: badgeSize, color: badgeColor })))));
 };
-const BoxedIcon = (_a) => {
-    var { Icon, iconSize = DEFAULT_ICON_SIZE, iconColor } = _a, iconBoxProps = __rest(_a, ["Icon", "iconSize", "iconColor"]);
-    return (React.createElement(IconBox, Object.assign({}, iconBoxProps), React.isValidElement(Icon) ? (Icon) : (
+const BoxedIcon = ({ Icon, iconSize = DEFAULT_ICON_SIZE, iconColor, ...iconBoxProps }) => {
+    return (React.createElement(IconBox, { ...iconBoxProps }, React.isValidElement(Icon) ? (Icon) : (
     /* @ts-expect-error TS 5 can't seem to be able to prove this is a react comopnent here */
     React.createElement(Icon, { size: iconSize || DEFAULT_ICON_SIZE, color: iconColor }))));
 };

package/lib/components/Icon/IconBadge.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 from "react";
 import Flex from "../Layout/Flex";
 export const DEFAULT_ICON_SIZE = 16;
 export const DEFAULT_BACKGROUND_COLOR = "neutral.c40";
 const BORDER_RADIUS = 999999;
-const IconBadge = (_a) => {
-    var { Icon, iconSize = DEFAULT_ICON_SIZE, backgroundColor = DEFAULT_BACKGROUND_COLOR, iconColor } = _a, rest = __rest(_a, ["Icon", "iconSize", "backgroundColor", "iconColor"]);
-    return (React.createElement(Flex, Object.assign({ height: iconSize * 2, width: iconSize * 2, backgroundColor: backgroundColor, borderRadius: BORDER_RADIUS, alignItems: "center", justifyContent: "center" }, rest), React.isValidElement(Icon) ? (Icon) : (
+const IconBadge = ({ Icon, iconSize = DEFAULT_ICON_SIZE, backgroundColor = DEFAULT_BACKGROUND_COLOR, iconColor, ...rest }) => {
+    return (React.createElement(Flex, { height: iconSize * 2, width: iconSize * 2, backgroundColor: backgroundColor, borderRadius: BORDER_RADIUS, alignItems: "center", justifyContent: "center", ...rest }, React.isValidElement(Icon) ? (Icon) : (
     /* @ts-expect-error TS 5 can't seem to be able to prove this is a react comopnent here */
     React.createElement(Icon, { size: iconSize, color: iconColor }))));
 };

package/lib/components/Icon/IconBox/index.js

@@ -15,7 +15,7 @@ const IconContainer = styled(Flex).attrs(({ size = DEFAULT_BOX_SIZE }) => ({
 `;
 export default function IconBox({ Icon, color, boxSize = DEFAULT_BOX_SIZE, iconSize = DEFAULT_ICON_SIZE, iconContainerProps, }) {
     const { colors } = useTheme();
-    return (React.createElement(IconContainer, Object.assign({ size: boxSize }, iconContainerProps), React.isValidElement(Icon) ? (Icon) : (
+    return (React.createElement(IconContainer, { size: boxSize, ...iconContainerProps }, React.isValidElement(Icon) ? (Icon) : (
     /* @ts-expect-error TS 5 can't seem to be able to prove this is a react comopnent here */
     React.createElement(Icon, { size: iconSize, color: color || colors.neutral.c100 }))));
 }

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

@@ -9,8 +9,8 @@ const DividerBase = styled(Flex).attrs((p) => ({
 })) ``;
 const Divider = (props) => {
     if (!props.text)
-        return React.createElement(DividerBase, Object.assign({}, props));
-    return (React.createElement(Flex, Object.assign({}, props, { flexDirection: "row", alignItems: "center" }),
+        return React.createElement(DividerBase, { ...props });
+    return (React.createElement(Flex, { ...props, flexDirection: "row", alignItems: "center" },
         React.createElement(DividerBase, { flex: 1 }),
         React.createElement(Text, { variant: "bodyLineHeight", color: "neutral.c60", mx: 6 }, props.text),
         React.createElement(DividerBase, { flex: 1 })));

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

@@ -1,19 +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, { useMemo } from "react";
 import List from "../List";
 import BoxedIcon from "../../../Icon/BoxedIcon";
-export default function IconBoxList(_a) {
-    var { items, iconVariants, iconShapes } = _a, props = __rest(_a, ["items", "iconVariants", "iconShapes"]);
-    const iconBoxItems = useMemo(() => items.map((item) => (Object.assign(Object.assign({}, item), { bullet: (React.createElement(BoxedIcon, { variant: iconShapes, iconColor: iconVariants === "plain" ? "primary.c70" : undefined, backgroundColor: iconVariants === "plain" ? "primary.c10" : undefined, borderColor: iconVariants === "plain" ? "transparent" : undefined, Icon: item.Icon, iconSize: 20 })) }))), [items]);
-    return React.createElement(List, Object.assign({ items: iconBoxItems }, props));
+export default function IconBoxList({ items, iconVariants, iconShapes, ...props }) {
+    const iconBoxItems = useMemo(() => items.map((item) => ({
+        ...item,
+        bullet: (React.createElement(BoxedIcon, { variant: iconShapes, iconColor: iconVariants === "plain" ? "primary.c70" : undefined, backgroundColor: iconVariants === "plain" ? "primary.c10" : undefined, borderColor: iconVariants === "plain" ? "transparent" : undefined, Icon: item.Icon, iconSize: 20 })),
+    })), [items]);
+    return React.createElement(List, { items: iconBoxItems, ...props });
 }

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

@@ -1,29 +1,16 @@
-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 Text from "../../../Text";
 import { Box, Flex } from "../../index";
 import { FlatList } from "react-native";
-export const ListItem = (_a) => {
-    var { title, description, bullet = null } = _a, props = __rest(_a, ["title", "description", "bullet"]);
-    return (React.createElement(Flex, Object.assign({ flexDirection: "row", alignItems: "center" }, props),
+export const ListItem = ({ title, description, bullet = null, ...props }) => {
+    return (React.createElement(Flex, { flexDirection: "row", alignItems: "center", ...props },
         bullet && (React.createElement(Box, { mr: 7, flexShrink: 0 }, bullet)),
         React.createElement(Flex, { flexDirection: "column", flexShrink: 1, flexWrap: "nowrap" },
             title && (React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: "neutral.c100", flexShrink: 1, mb: description ? 2 : null }, title)),
             description && (React.createElement(Text, { variant: "body", fontWeight: "medium", color: "neutral.c80", flexShrink: 1 }, description)))));
 };
-export default function List(_a) {
-    var { items, itemContainerProps } = _a, props = __rest(_a, ["items", "itemContainerProps"]);
-    const renderItem = useCallback(({ item }) => (React.createElement(ListItem, Object.assign({}, item, { mb: 6, pb: 2 }, itemContainerProps))), [itemContainerProps]);
-    return (React.createElement(Flex, Object.assign({ flexDirection: "column" }, props),
+export default function List({ items, itemContainerProps, ...props }) {
+    const renderItem = useCallback(({ item }) => (React.createElement(ListItem, { ...item, mb: 6, pb: 2, ...itemContainerProps })), [itemContainerProps]);
+    return (React.createElement(Flex, { flexDirection: "column", ...props },
         React.createElement(FlatList, { data: items, renderItem: renderItem })));
 }

package/lib/components/Layout/List/NumberedList/index.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, { useMemo } from "react";
 import List from "../List";
 import { IconBox } from "../../../Icon";
 import Text from "../../../Text";
-export default function NumberedList(_a) {
-    var { items } = _a, props = __rest(_a, ["items"]);
-    const numberedItems = useMemo(() => items.map((item, index) => {
-        var _a;
-        return (Object.assign(Object.assign({}, item), { bullet: (React.createElement(IconBox, { Icon: React.createElement(Text, { variant: "body", fontWeight: "medium", color: "neutral.c100" }, (_a = item.number) !== null && _a !== void 0 ? _a : index + 1), boxSize: 36 })) }));
-    }), [items]);
-    return React.createElement(List, Object.assign({ items: numberedItems }, props));
+export default function NumberedList({ items, ...props }) {
+    const numberedItems = useMemo(() => items.map((item, index) => ({
+        ...item,
+        bullet: (React.createElement(IconBox, { Icon: React.createElement(Text, { variant: "body", fontWeight: "medium", color: "neutral.c100" }, item.number ?? index + 1), boxSize: 36 })),
+    })), [items]);
+    return React.createElement(List, { items: numberedItems, ...props });
 }