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

package/lib/components/Tabs/TemplateTabs/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 FlexBox from "../../Layout/Flex";
@@ -20,9 +9,8 @@ export const TabsContainer = styled(FlexBox) `
   align-items: stretch;
   ${(p) => (p.stretchItems ? "" : "justify-content: center;")}
 `;
-const TemplateTabsGroup = (_a) => {
-    var { gap, size, stretchItems = false } = _a, props = __rest(_a, ["gap", "size", "stretchItems"]);
+const TemplateTabsGroup = ({ gap, size, stretchItems = false, ...props }) => {
     const { labels, activeIndex, onChange, Item } = props;
-    return (React.createElement(TabsContainer, Object.assign({ columnGap: gap, stretchItems: stretchItems }, props), labels.map((label, index) => (React.createElement(Item, Object.assign({ key: index }, props, { index: index, isActive: index === activeIndex, label: label, size: size, stretchItems: stretchItems, onPress: () => onChange(index) }))))));
+    return (React.createElement(TabsContainer, { columnGap: gap, stretchItems: stretchItems, ...props }, labels.map((label, index) => (React.createElement(Item, { key: index, ...props, index: index, isActive: index === activeIndex, label: label, size: size, stretchItems: stretchItems, onPress: () => onChange(index) })))));
 };
 export default TemplateTabsGroup;

package/lib/components/Text/getTextStyle.js

@@ -118,7 +118,9 @@ const getConcatenedFontWeightFontFamily = {
     },
 };
 export function getTextStyle({ variant = "paragraph", bracket = false, fontWeight = "medium", }) {
-    var _a;
     const style = getTextTypeStyle({ bracket })[variant];
-    return Object.assign(Object.assign({}, style), getConcatenedFontWeightFontFamily[(_a = style === null || style === void 0 ? void 0 : style.fontFamily) !== null && _a !== void 0 ? _a : "Inter"][fontWeight]);
+    return {
+        ...style,
+        ...getConcatenedFontWeightFontFamily[style?.fontFamily ?? "Inter"][fontWeight],
+    };
 }

package/lib/components/Text/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, { useTheme } from "styled-components/native";
 import { compose, fontSize, textAlign, lineHeight, system, } from "styled-system";
@@ -28,13 +17,10 @@ const textTransform = system({
         property: "textTransform",
     },
 });
-const Base = baseStyled.Text.attrs((p) => {
-    var _a;
-    return ({
-        fontSize: p.fontSize ? p.fontSize : (_a = p.variant) !== null && _a !== void 0 ? _a : "paragraph",
-        color: p.color || "neutral.c100",
-    });
-}) `
+const Base = baseStyled.Text.attrs((p) => ({
+    fontSize: p.fontSize ? p.fontSize : p.variant ?? "paragraph",
+    color: p.color || "neutral.c100",
+})) `
   ${(p) => getTextStyle(p)}
   ${compose(lineHeight, fontSize, textAlign, uppercase, textTransform)}
   justify-content: center;
@@ -45,20 +31,18 @@ const T = styled.View `
   justify-content: center;
   align-items: center;
 `;
-const BracketText = (_a) => {
-    var { children, color = "neutral.c100" } = _a, props = __rest(_a, ["children", "color"]);
+const BracketText = ({ children, color = "neutral.c100", ...props }) => {
     const size = getBracketSize(props);
     const theme = useTheme();
     const c = theme ? getColor(theme, color) : "transparent";
     return (React.createElement(T, null,
         React.createElement(BracketLeft, { fill: c, width: size, height: size }),
-        React.createElement(Base, Object.assign({}, props, { color: color, bracket: true }), children),
+        React.createElement(Base, { ...props, color: color, bracket: true }, children),
         React.createElement(BracketRight, { fill: c, width: size, height: size })));
 };
-const Text = (_a) => {
-    var { children, bracket, textAlign = "left", testID } = _a, props = __rest(_a, ["children", "bracket", "textAlign", "testID"]);
+const Text = ({ children, bracket, textAlign = "left", testID, ...props }) => {
     if (bracket)
-        return React.createElement(BracketText, Object.assign({}, props), children);
-    return (React.createElement(Base, Object.assign({ textAlign: textAlign }, props, { testID: testID }), children));
+        return React.createElement(BracketText, { ...props }, children);
+    return (React.createElement(Base, { textAlign: textAlign, ...props, testID: testID }, children));
 };
 export default Text;

package/lib/components/cta/Button/getButtonStyle.js

@@ -49,13 +49,21 @@ export function getButtonColorStyle(colors, props) {
     if (outline) {
         return {
             text: { color: disabled ? primaryColor : secondaryColor },
-            button: Object.assign({ backgroundColor: "transparent", borderColor: disabled ? primaryColor : tertiaryColor !== null && tertiaryColor !== void 0 ? tertiaryColor : secondaryColor, borderWidth: 1 }, (pressedOutlineColor && { underlayColor: pressedOutlineColor })),
+            button: {
+                backgroundColor: "transparent",
+                borderColor: disabled ? primaryColor : tertiaryColor ?? secondaryColor,
+                borderWidth: 1,
+                ...(pressedOutlineColor && { underlayColor: pressedOutlineColor }),
+            },
         };
     }
     else {
         return {
             text: { color: primaryColor },
-            button: Object.assign({ backgroundColor: secondaryColor }, (pressedColor && { underlayColor: pressedColor })),
+            button: {
+                backgroundColor: secondaryColor,
+                ...(pressedColor && { underlayColor: pressedColor }),
+            },
         };
     }
 }

package/lib/components/cta/Button/index.js

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import React, { useCallback, useState, useMemo } from "react";
 import styled, { useTheme } from "styled-components/native";
 import { ActivityIndicator, TouchableOpacity, View, } from "react-native";
@@ -24,10 +15,14 @@ export const Base = baseStyled(TouchableOpacity).attrs((p) => {
     const disabled = !p.onPressWhenDisabled && p.disabled;
     const visuallyDisabled = p.onPressWhenDisabled && p.disabled;
     const onPress = visuallyDisabled ? p.onPressWhenDisabled : p.onPress;
-    return Object.assign(Object.assign({}, getButtonColorStyle(p.theme.colors, p).button), { 
+    return {
+        ...getButtonColorStyle(p.theme.colors, p).button,
         // Avoid conflict with styled-system's size property by nulling size and renaming it
-        size: undefined, sizeVariant: p.size, disabled,
-        onPress });
+        size: undefined,
+        sizeVariant: p.size,
+        disabled,
+        onPress,
+    };
 }) `
 
   border-radius: ${(p) => p.theme.space[10]}px;
@@ -75,7 +70,7 @@ const ButtonContainer = (props) => {
     }, [iconName, size, Icon, text.color, isNewIcon]);
     const textColor = useMemo(() => (pending ? theme.colors.neutral.c50 : text.color), [pending, theme.colors.neutral.c50, text.color]);
     return (React.createElement(Container, { hide: hide },
-        iconPosition === "right" && children ? (React.createElement(Text, Object.assign({ testID: buttonTestId, variant: ctaTextType[size], fontWeight: "semiBold", color: textColor }, (!Icon && { textAlign: "center" })), children)) : null,
+        iconPosition === "right" && children ? (React.createElement(Text, { testID: buttonTestId, variant: ctaTextType[size], fontWeight: "semiBold", color: textColor, ...(!Icon && { textAlign: "center" }) }, children)) : null,
         pending && displayContentWhenPending ? (React.createElement(IconContainer, { iconPosition: iconPosition },
             React.createElement(SpinnerContainer, { displayContentWhenPending: true },
                 React.createElement(ActivityIndicator, { color: theme.colors.neutral.c50, animating: true })))) : IconNode ? (React.createElement(IconContainer, { iconButton: !children, iconPosition: iconPosition }, IconNode)) : null,
@@ -84,9 +79,9 @@ const ButtonContainer = (props) => {
 const Button = (props) => {
     const { Icon, children, type = "default", iconName, disabled = false, pending = false, displayContentWhenPending = false, testID, } = props;
     const theme = useTheme();
-    return (React.createElement(Base, Object.assign({ activeOpacity: 1 }, props, { type: type, iconButton: (!!Icon || !!iconName) && !children, disabled: disabled || pending, testID: testID }),
+    return (React.createElement(Base, { activeOpacity: 1, ...props, type: type, iconButton: (!!Icon || !!iconName) && !children, disabled: disabled || pending, testID: testID },
         React.createElement(View, null,
-            React.createElement(ButtonContainer, Object.assign({}, props, { type: type, hide: pending && !displayContentWhenPending })),
+            React.createElement(ButtonContainer, { ...props, type: type, hide: pending && !displayContentWhenPending }),
             pending && !displayContentWhenPending ? (React.createElement(SpinnerContainer, { displayContentWhenPending: displayContentWhenPending },
                 React.createElement(ActivityIndicator, { color: theme.colors.neutral.c50, animating: true }))) : null)));
 };
@@ -94,20 +89,20 @@ export const PromisableButton = (props) => {
     const { Icon, children, onPress, type = "main", disabled = false, iconName } = props;
     const [spinnerOn, setSpinnerOn] = useState(false);
     const theme = useTheme();
-    const onPressHandler = useCallback((event) => __awaiter(void 0, void 0, void 0, function* () {
+    const onPressHandler = useCallback(async (event) => {
         if (!onPress)
             return;
         setSpinnerOn(true);
         try {
-            yield onPress(event);
+            await onPress(event);
         }
         finally {
             setSpinnerOn(false);
         }
-    }), [onPress]);
-    return (React.createElement(Base, Object.assign({}, props, { type: type, iconButton: (!!Icon || !!iconName) && !children, disabled: disabled || spinnerOn, onPress: onPressHandler }),
+    }, [onPress]);
+    return (React.createElement(Base, { ...props, type: type, iconButton: (!!Icon || !!iconName) && !children, disabled: disabled || spinnerOn, onPress: onPressHandler },
         React.createElement(View, null,
-            React.createElement(ButtonContainer, Object.assign({}, props, { type: type, hide: spinnerOn })),
+            React.createElement(ButtonContainer, { ...props, type: type, hide: spinnerOn }),
             React.createElement(SpinnerContainer, null,
                 React.createElement(ActivityIndicator, { color: theme.colors.neutral.c50, animating: spinnerOn })))));
 };

package/lib/components/cta/Link/index.js

@@ -25,7 +25,7 @@ const LinkContainer = (props) => {
 };
 const Link = (props) => {
     const { type = "main", size = "medium" } = props;
-    return (React.createElement(Base, Object.assign({}, props, { activeOpacity: 0.5 }),
-        React.createElement(LinkContainer, Object.assign({}, props, { type: type, size: size }))));
+    return (React.createElement(Base, { ...props, activeOpacity: 0.5 },
+        React.createElement(LinkContainer, { ...props, type: type, size: size })));
 };
 export default Link;

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,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"}
+{"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,YA6BjC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/cta/QuickAction/QuickActionButton/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 Text from "../../../Text";
@@ -29,9 +18,12 @@ export const Base = baseStyled(TouchableOpacity) `
     ? `border: 1px solid ${theme.colors.neutral.c30};`
     : `background-color: ${theme.colors.neutral.c20};`}
 `;
-const QuickActionButton = (_a) => {
-    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}` }),
+const QuickActionButton = ({ Icon, children, disabled, onPress, onPressWhenDisabled, textVariant = "body", variant = "large", testID, ...otherProps }) => {
+    const text = // Extract the text to use it as a testID
+     React.isValidElement(children) && children.props?.i18nKey
+        ? children.props.i18nKey.split(".").pop() // Extract the last part of the key
+        : children?.toString().toLowerCase();
+    return (React.createElement(Base, { disabled: onPressWhenDisabled ? false : disabled, onPress: disabled ? onPressWhenDisabled : onPress, visuallyDisabled: disabled, variant: variant, ...otherProps, testID: `${testID}-${text}` },
         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.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, { useCallback } from "react";
 import { FlatList } from "react-native";
 import QuickActionButton from "../QuickActionButton";
-const QuickActionList = (_a) => {
-    var { numColumns = 3, data, id, testID } = _a, otherProps = __rest(_a, ["numColumns", "data", "id", "testID"]);
+const QuickActionList = ({ numColumns = 3, data, id, testID, ...otherProps }) => {
     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, testID: testID })));
+        return (React.createElement(QuickActionButton, { ...item, flex: 1, mr: (index + 1) % numColumns > 0 && data && index !== data.length - 1 ? 4 : 0, mb: 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 })));
+    return (React.createElement(FlatList, { ...otherProps, data: data, keyExtractor: (_item, index) => `${id}${index}`, horizontal: false, renderItem: renderItem, numColumns: numColumns }));
 };
 export default QuickActionList;

package/lib/components/message/Alert/index.js

@@ -60,7 +60,7 @@ const AlertUnderlinedText = styled(AlertBodyText) `
 function Alert({ type = "info", Icon, title, showIcon = true, children }) {
     const theme = useTheme();
     const textColor = "neutral.c100";
-    const IconComponent = Icon !== null && Icon !== void 0 ? Icon : icons[type];
+    const IconComponent = Icon ?? icons[type];
     return (React.createElement(StyledAlertContainer, { type: type },
         showIcon && !!icons[type] && (React.createElement(StyledIconContainer, null,
             React.createElement(IconComponent, { size: 20, color: getColor(theme, alertColors[type || "info"].iconColor) }))),

package/lib/components/message/Log/index.js

@@ -8,7 +8,7 @@ function Log({ children, extraTextProps }) {
         React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between", mb: Platform.OS === "android" ? "-2px" : "-6px" },
             React.createElement(BracketTopLeft, { color: "neutral.c100" }),
             React.createElement(BracketTopRight, { color: "neutral.c100" })),
-        React.createElement(Text, Object.assign({ variant: "h2", lineHeight: "28px", textTransform: "uppercase", textAlign: "center", color: "neutral.c100", px: "15.5px", style: { overflow: "visible" } }, extraTextProps), children),
+        React.createElement(Text, { variant: "h2", lineHeight: "28px", textTransform: "uppercase", textAlign: "center", color: "neutral.c100", px: "15.5px", style: { overflow: "visible" }, ...extraTextProps }, children),
         React.createElement(Flex, { mt: Platform.OS === "android" ? "-9.5px" : "-5px", flexDirection: "row", justifyContent: "space-between" },
             React.createElement(BracketBottomLeft, { color: "neutral.c100" }),
             React.createElement(BracketBottomRight, { color: "neutral.c100" }))));

package/lib/components/message/Notification/index.js

@@ -51,17 +51,14 @@ const variantProps = {
         borderRadius: 8,
     },
 };
-const NotificationContainer = styled(FlexBox).attrs((p) => {
-    var _a, _b, _c, _d, _e;
-    return ({
-        width: "100%",
-        flexDirection: "row",
-        alignItems: "center",
-        bg: (_b = (_a = variantProps[p.variant]) === null || _a === void 0 ? void 0 : _a.bg) !== null && _b !== void 0 ? _b : variantProps.primary.bg,
-        p: (_c = variantProps[p.variant]) === null || _c === void 0 ? void 0 : _c.padding,
-        borderRadius: (_e = (_d = variantProps[p.variant]) === null || _d === void 0 ? void 0 : _d.borderRadius) !== null && _e !== void 0 ? _e : 1,
-    });
-}) ``;
+const NotificationContainer = styled(FlexBox).attrs((p) => ({
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    bg: variantProps[p.variant]?.bg ?? variantProps.primary.bg,
+    p: variantProps[p.variant]?.padding,
+    borderRadius: variantProps[p.variant]?.borderRadius ?? 1,
+})) ``;
 const ClosePressableExtendedBounds = styled.TouchableOpacity.attrs({
     p: 5,
     m: -5,
@@ -69,15 +66,14 @@ const ClosePressableExtendedBounds = styled.TouchableOpacity.attrs({
   ${space};
 `;
 export default function Notification({ Icon, iconColor, variant = "primary", numberOfLines, title, subtitle, onClose, linkText, onLinkPress, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const { colors } = useTheme();
-    const textColor = (_b = (_a = variantProps[variant]) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : variantProps.primary.color;
-    const linkColor = ((_c = variantProps[variant]) === null || _c === void 0 ? void 0 : _c.linkColor) || textColor;
-    const iconMarginRight = (_e = (_d = variantProps[variant]) === null || _d === void 0 ? void 0 : _d.iconMarginRight) !== null && _e !== void 0 ? _e : 16;
-    const closeIconSize = (_g = (_f = variantProps[variant]) === null || _f === void 0 ? void 0 : _f.closeIconSize) !== null && _g !== void 0 ? _g : 14;
-    const closeIconColor = (_j = (_h = variantProps[variant]) === null || _h === void 0 ? void 0 : _h.closeIconColor) !== null && _j !== void 0 ? _j : textColor;
-    const textVariant = (_l = (_k = variantProps[variant]) === null || _k === void 0 ? void 0 : _k.textVariant) !== null && _l !== void 0 ? _l : "body";
-    const textFontWeight = (_o = (_m = variantProps[variant]) === null || _m === void 0 ? void 0 : _m.textFontWeight) !== null && _o !== void 0 ? _o : "medium";
+    const textColor = variantProps[variant]?.color ?? variantProps.primary.color;
+    const linkColor = variantProps[variant]?.linkColor || textColor;
+    const iconMarginRight = variantProps[variant]?.iconMarginRight ?? 16;
+    const closeIconSize = variantProps[variant]?.closeIconSize ?? 14;
+    const closeIconColor = variantProps[variant]?.closeIconColor ?? textColor;
+    const textVariant = variantProps[variant]?.textVariant ?? "body";
+    const textFontWeight = variantProps[variant]?.textFontWeight ?? "medium";
     return (React.createElement(NotificationContainer, { variant: variant },
         Icon && (React.createElement(FlexBox, { mr: iconMarginRight },
             React.createElement(Icon, { size: 20, color: iconColor || textColor }))),

package/lib/components/tags/Badge/index.js

@@ -23,7 +23,9 @@ const badgesStyle = {
         },
     },
 };
-const StyledBadgeText = styled(Text).attrs((p) => (Object.assign({}, badgesStyle[p.badgeVariant || "main"][p.active ? "active" : "default"]))) `
+const StyledBadgeText = styled(Text).attrs((p) => ({
+    ...badgesStyle[p.badgeVariant || "main"][p.active ? "active" : "default"],
+})) `
   border-radius: 32px;
   padding: 8px;
 `;

package/lib/components/tags/Tag/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 Flex from "../../Layout/Flex";
 import Text from "../../Text";
@@ -18,9 +7,8 @@ const typeColor = {
     shade: "neutral.c30",
     warning: "warning.c50",
 };
-export default function Tag(_a) {
-    var { type = "shade", size = "small", color, textColor, uppercase, Icon, children, numberOfLines, ellipsizeMode } = _a, props = __rest(_a, ["type", "size", "color", "textColor", "uppercase", "Icon", "children", "numberOfLines", "ellipsizeMode"]);
-    return (React.createElement(Flex, Object.assign({ px: size === "small" ? "6px" : 3, alignItems: "center", justifyContent: "center", flexDirection: "row", borderRadius: 6, bg: color || typeColor[type], height: size === "small" ? "18px" : "28px" }, props),
+export default function Tag({ type = "shade", size = "small", color, textColor, uppercase, Icon, children, numberOfLines, ellipsizeMode, ...props }) {
+    return (React.createElement(Flex, { px: size === "small" ? "6px" : 3, alignItems: "center", justifyContent: "center", flexDirection: "row", borderRadius: 6, bg: color || typeColor[type], height: size === "small" ? "18px" : "28px", ...props },
         Icon && (React.createElement(Box, { pr: 2 },
             React.createElement(Icon, { size: size === "small" ? 16 : 20, color: type === "shade" ? "neutral.c90" : "neutral.c00" }))),
         React.createElement(Text, { variant: size === "small" ? "subtitle" : "small", fontWeight: "bold", uppercase: uppercase !== false, textAlign: "center", color: textColor || (type === "shade" ? "neutral.c90" : "neutral.c00"), numberOfLines: numberOfLines, ellipsizeMode: ellipsizeMode }, children)));

package/lib/icons/BracketLeft.js

@@ -1,6 +1,6 @@
 import React from "react";
 import Svg, { Path } from "react-native-svg";
-const BracketLeft = (props) => (React.createElement(Svg, Object.assign({ viewBox: "0 0 64 128" }, props),
+const BracketLeft = (props) => (React.createElement(Svg, { viewBox: "0 0 64 128", ...props },
     React.createElement(Path, { d: "m 8.692,119.94 v 8.058 H 64 V 91.6548 H 55.941 V 119.94 Z" }),
     React.createElement(Path, { d: "M 8.692,0 V 8.05844 H 55.941 V 36.3452 H 64 V 0 Z" })));
 export default BracketLeft;

package/lib/icons/BracketRight.js

@@ -1,6 +1,6 @@
 import React from "react";
 import Svg, { Path } from "react-native-svg";
-const BracketRight = (props) => (React.createElement(Svg, Object.assign({ viewBox: "0 0 64 128" }, props),
+const BracketRight = (props) => (React.createElement(Svg, { viewBox: "0 0 64 128", ...props },
     React.createElement(Path, { d: "M 0,91.6548 V 128 h 55.3076 v -8.06 H 8.05844 V 91.6548 Z" }),
     React.createElement(Path, { d: "M 0,0 V 36.3452 H 8.05844 V 8.05844 H 55.3076 V 0 Z" })));
 export default BracketRight;

package/lib/styles/InvertTheme.js

@@ -5,6 +5,10 @@ import { palettes } from "@ledgerhq/ui-shared";
 export const InvertTheme = ({ children }) => {
     const { theme } = useTheme();
     const revertTheme = theme === "light" ? "dark" : "light";
-    const newTheme = useMemo(() => (Object.assign(Object.assign({}, defaultTheme), { colors: Object.assign(Object.assign({}, defaultTheme.colors), { palette: palettes[revertTheme] }), theme: revertTheme })), [revertTheme]);
+    const newTheme = useMemo(() => ({
+        ...defaultTheme,
+        colors: { ...defaultTheme.colors, palette: palettes[revertTheme] },
+        theme: revertTheme,
+    }), [revertTheme]);
     return React.createElement(ThemeProvider, { theme: newTheme }, children);
 };

package/lib/styles/StyleProvider.js

@@ -3,6 +3,14 @@ import { ThemeProvider } from "styled-components/native";
 import defaultTheme from "./theme";
 import { palettes } from "@ledgerhq/ui-shared";
 export const StyleProvider = ({ children, selectedPalette }) => {
-    const theme = useMemo(() => (Object.assign(Object.assign({}, defaultTheme), { colors: Object.assign(Object.assign(Object.assign({}, defaultTheme.colors), palettes[selectedPalette]), { palette: palettes[selectedPalette] }), theme: selectedPalette })), [selectedPalette]);
+    const theme = useMemo(() => ({
+        ...defaultTheme,
+        colors: {
+            ...defaultTheme.colors,
+            ...palettes[selectedPalette],
+            palette: palettes[selectedPalette],
+        },
+        theme: selectedPalette,
+    }), [selectedPalette]);
     return React.createElement(ThemeProvider, { theme: theme }, children);
 };

package/lib/styles/theme.js

@@ -51,7 +51,10 @@ const theme = {
     radii,
     fontSizes,
     space,
-    colors: Object.assign(Object.assign({}, palettes.light), { palette: palettes.light }),
+    colors: {
+        ...palettes.light,
+        palette: palettes.light,
+    },
     zIndexes,
 };
 export default theme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.28.0",
+  "version": "0.29.0-next.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -29,7 +29,6 @@
     "./lib/*/": "./lib/*/index.js",
     "./*": "./lib/*.js",
     "./*/": "./lib/*/index.js",
-    "./": "./lib/",
     "./package.json": "./package.json"
   },
   "files": [
@@ -91,7 +90,7 @@
     "@svgr/plugin-svgo": "^5.5.0",
     "@types/color": "^3.0.3",
     "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/node": "^20.8.10",
+    "@types/node": "^22.10.10",
     "@types/prop-types": "^15.7.5",
     "@types/react": "^18.2.21",
     "@types/styled-components": "^5.1.3",