@ledgerhq/native-ui 0.22.8 → 0.22.9

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components/native";
 import { Flex } from "../../../Layout";
 import { Text } from "react-native";
@@ -18,27 +18,26 @@ const labelFinalPositions = {
 const LabelContainer = styled(Animated.View) `
   position: absolute;
   padding: ${`0 ${labelPadding}px`};
-  display: inline-block;
-  height: 15;
+  height: 15px;
   z-index: ${(p) => (p.notched ? 3 : 0)};
 `;
 const AnimatedText = Animated.createAnimatedComponent(Text);
 const LabelText = styled(AnimatedText) `
-  display: inline-block;
-  height: 15;
-  line-height: 15;
+  height: 15px;
+  line-height: 15px;
   vertical-align: top;
   color: ${(p) => p.status === "default" ? inputTextColor[p.status] : inputStatusColors[p.status]};
 `;
 const LineCutout = styled(Flex) `
   position: absolute;
-  height: 1;
-  top: 7;
-  left: 0;
-  width: 120%;
+  height: 1px;
+  top: 7px;
+  left: 0px;
+  width: ${(p) => p.labelWidth}px;
   background: ${(p) => inputBackgroundColor[p.status]};
 `;
 export const AnimatedNotchedLabel = ({ placeholder, inputStatus }) => {
+    const [labelWidth, setLabelWidth] = useState(0);
     const notched = inputStatus !== "default";
     const labelTop = useSharedValue(notched ? labelFinalPositions.top : labelInitialPositions.top);
     const labelLeft = useSharedValue(notched ? labelFinalPositions.left : labelInitialPositions.left);
@@ -71,7 +70,7 @@ export const AnimatedNotchedLabel = ({ placeholder, inputStatus }) => {
             easing: Easing.inOut(Easing.quad),
         }));
     }, [notched]);
-    return (React.createElement(LabelContainer, { style: Object.assign(Object.assign({}, labelStyle), { elevation: notched ? 3 : 0 }), notched: notched },
-        notched && React.createElement(LineCutout, { status: inputStatus }),
+    return (React.createElement(LabelContainer, { onLayout: (event) => setLabelWidth(event.nativeEvent.layout.width), style: Object.assign(Object.assign({}, 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)));
 };

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

@@ -1,9 +1,9 @@
 import React from "react";
 import { type InputProps as BaseInputType } from "../BaseInput/index";
-import { StyleProp, ViewStyle } from "react-native";
+import { StyleProp, ViewStyle, TextInput } from "react-native";
 export type InputStatus = "default" | "focused" | "filled" | "error";
 export interface AnimatedInputProps extends BaseInputType {
     style?: StyleProp<ViewStyle>;
 }
-declare const AnimatedInput: ({ style, ...textInputProps }: AnimatedInputProps) => React.JSX.Element;
-export default AnimatedInput;
+declare const _default: React.ForwardRefExoticComponent<AnimatedInputProps & React.RefAttributes<TextInput>>;
+export default _default;

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

@@ -19,9 +19,8 @@ import { AnimatedNotchedLabel } from "./AnimatedNotchedLabel";
 const InputContainer = styled(View) `
   position: relative;
   box-sizing: border-box;
-  height: fit-content;
 `;
-const AnimatedInput = (_a) => {
+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 theme = useTheme();
@@ -33,20 +32,15 @@ const AnimatedInput = (_a) => {
     const displayClearCross = inputStatus === "error" || inputStatus === "focused";
     return (React.createElement(InputContainer, { status: inputStatus, style: style },
         placeholder && React.createElement(AnimatedNotchedLabel, { placeholder: placeholder, inputStatus: inputStatus }),
-        React.createElement(BaseInput, Object.assign({ onFocus: onFocus, onBlur: onBlur, error: error, value: value, containerStyle: {
-                height: "100%",
-            }, color: theme ? inputTextColor[inputStatus]({ theme }) : "neutral.c100", inputContainerStyle: {
+        React.createElement(BaseInput, Object.assign({ 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,
                 height: inputStatus !== "error" ? 56 : 48,
             }, baseInputContainerStyle: {
-                paddingTop: 15,
-                paddingBottom: 15,
-                paddingLeft: 14,
                 paddingRight: displayClearCross ? 8 : 14,
             }, inputErrorContainerStyles: {
                 marginTop: 8,
             }, inputErrorColor: theme ? inputStatusColors[inputStatus]({ theme }) : "neutral.c100", showErrorIcon: true }, rest))));
 };
-export default AnimatedInput;
+export default React.forwardRef(AnimatedInput);

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

@@ -64,6 +64,7 @@ export type InputProps<T = string> = Omit<CommonProps, "value" | "onChange"> & {
     inputErrorContainerStyles?: StyleProp<ViewStyle>;
     inputErrorColor?: string;
     showErrorIcon?: boolean;
+    hasBorder?: boolean;
     /**
      * Optional text color parameter.
      */
@@ -79,8 +80,8 @@ export declare const InputRenderLeftContainer: import("styled-components").Style
 } & {
     alignItems: string;
     flexDirection: string;
-    pl: number;
-}, "alignItems" | "flexDirection" | "pl">;
+    paddingRight: string;
+}, "alignItems" | "flexDirection" | "paddingRight">;
 export declare const InputRenderRightContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & {
     columnGap?: string | number | undefined;
     rowGap?: string | number | undefined;
@@ -91,8 +92,8 @@ export declare const InputRenderRightContainer: import("styled-components").Styl
 } & {
     alignItems: string;
     flexDirection: string;
-    pr: number;
-}, "alignItems" | "flexDirection" | "pr">;
+    paddingLeft: string;
+}, "alignItems" | "flexDirection" | "paddingLeft">;
 declare function Input<T = string>(props: InputProps<T>, ref?: any): JSX.Element;
 declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
     /**
@@ -153,6 +154,7 @@ declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
     inputErrorContainerStyles?: StyleProp<ViewStyle>;
     inputErrorColor?: string | undefined;
     showErrorIcon?: boolean | undefined;
+    hasBorder?: boolean | undefined;
     /**
      * Optional text color parameter.
      */

package/lib/components/Form/Input/BaseInput/index.js

@@ -20,9 +20,11 @@ const InputContainer = styled.View `
   width: 100%;
   background: ${(p) => p.theme.colors.background.main};
   height: 48px;
-  border: ${(p) => `1px solid ${p.theme.colors.neutral.c40}`};
-  border-radius: 24px;
+  border: ${(p) => (p.hasBorder ? `1px solid ${p.theme.colors.opacityDefault.c20}` : "none")};
+  border-radius: 8px;
   color: ${(p) => p.theme.colors.neutral.c100};
+  align-items: center;
+  padding: 0px 16px;
 
   ${(p) => p.disabled &&
     css `
@@ -32,6 +34,7 @@ const InputContainer = styled.View `
 
   ${(p) => p.focus &&
     !p.error &&
+    p.hasBorder &&
     css `
       border: 1px solid ${p.theme.colors.primary.c80};
     `};
@@ -39,50 +42,59 @@ const InputContainer = styled.View `
   ${(p) => p.error &&
     !p.disabled &&
     css `
-      border: 1px solid ${p.theme.colors.error.c50};
+      border: 1px solid ${p.theme.colors.error.c60};
     `};
 
   ${(p) => p.disabled &&
+    p.hasBorder &&
     css `
       color: ${p.theme.colors.neutral.c60};
       background: ${(p) => p.theme.colors.neutral.c30};
     `};
+
+  ${(p) => p.disabled &&
+    !p.hasBorder &&
+    css `
+      color: ${p.theme.colors.opacityDefault.c10};
+      background: ${(p) => p.theme.colors.neutral.c30};
+    `};
 `;
 const BaseInput = styled.TextInput.attrs((p) => ({
     selectionColor: p.theme.colors.primary.c80,
-    color: p.theme.colors.neutral.c100,
     placeholderTextColor: p.theme.colors.neutral.c80,
 })) `
   height: 100%;
   width: 100%;
   border: 0;
   flex-shrink: 1;
-  padding: 14px 20px;
+  display: flex;
+  min-height: fit-content;
+  color: ${(p) => p.theme.colors.neutral.c100};
 `;
 const InputErrorText = styled(Text) `
-  color: ${(p) => p.theme.colors.error.c50};
+  color: ${(p) => p.theme.colors.error.c60};
 `;
 export const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({
     alignItems: "center",
     flexDirection: "row",
-    pl: 16,
+    paddingRight: "8px",
 })) ``;
 export const InputRenderRightContainer = styled(FlexBox).attrs(() => ({
     alignItems: "center",
     flexDirection: "row",
-    pr: 16,
+    paddingLeft: "8px",
 })) ``;
 // Yes, this is dirty. If you can figure out a better way please change the code :).
 // 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, 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", "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 } = 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 inputRef = useRef();
     useImperativeHandle(ref, () => inputRef.current, [inputRef]);
     const inputValue = useMemo(() => serialize(value), [serialize, value]);
     const handleChange = useCallback((value) => {
-        onChange && onChange(deserialize(value));
-        onChangeText && onChangeText(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(deserialize(value));
+        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(value);
     }, [onChange, onChangeText, deserialize]);
     useEffect(() => {
         if (autoFocus && inputRef && inputRef.current && inputRef.current.focus)
@@ -90,18 +102,18 @@ function Input(props, ref) {
     }, [inputRef, autoFocus]);
     const [focus, setFocus] = React.useState(false);
     return (React.createElement(FlexBox, { width: "100%", style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
-        React.createElement(InputContainer, { disabled: disabled, focus: focus, error: error, style: inputContainerStyle },
+        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) => {
                     setFocus(true);
-                    typeof onFocus === "function" && onFocus(e);
+                    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
                 }, onBlur: (e) => {
                     setFocus(false);
-                    typeof onBlur === "function" && onBlur(e);
+                    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
                 }, style: Object.assign(Object.assign({}, (color ? { color: color } : {})), baseInputContainerStyle) })),
             typeof renderRight === "function" ? renderRight(props, inputRef) : renderRight),
-        !!error && !disabled && (React.createElement(FlexBox, { flexDirection: "row", alignItems: "center", style: inputErrorContainerStyles || { paddingLeft: "12px" } },
+        !!error && !disabled && (React.createElement(FlexBox, { flexDirection: "row", alignItems: "center", style: inputErrorContainerStyles },
             showErrorIcon && React.createElement(DeleteCircleFill, { color: inputErrorColor, size: "S" }),
-            React.createElement(InputErrorText, { color: inputErrorColor, variant: "small", ml: 2 }, error)))));
+            React.createElement(InputErrorText, { color: inputErrorColor, variant: "small", mt: 3 }, error)))));
 }
 export default React.forwardRef(Input);

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

@@ -19,6 +19,7 @@ declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInpu
     inputErrorContainerStyles?: import("react-native").StyleProp<import("react-native").ViewStyle>;
     inputErrorColor?: string | undefined;
     showErrorIcon?: boolean | undefined;
+    hasBorder?: boolean | undefined;
     color?: string | undefined;
 } & {
     legend: string;

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

@@ -19,6 +19,7 @@ declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInpu
     inputErrorContainerStyles?: import("react-native").StyleProp<import("react-native").ViewStyle>;
     inputErrorColor?: string | undefined;
     showErrorIcon?: boolean | undefined;
+    hasBorder?: boolean | undefined;
     color?: string | undefined;
 } & {
     onPercentClick: (percent: number) => void;

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

@@ -20,6 +20,7 @@ declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInpu
     inputErrorContainerStyles?: import("react-native").StyleProp<import("react-native").ViewStyle>;
     inputErrorColor?: string | undefined;
     showErrorIcon?: boolean | undefined;
+    hasBorder?: boolean | undefined;
     color?: string | undefined;
 } & {
     onQrCodeClick?: ((event: GestureResponderEvent) => void) | undefined;

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

@@ -19,6 +19,7 @@ declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInpu
     inputErrorContainerStyles?: import("react-native").StyleProp<import("react-native").ViewStyle>;
     inputErrorColor?: string | undefined;
     showErrorIcon?: boolean | undefined;
+    hasBorder?: boolean | undefined;
     color?: string | undefined;
 } & React.RefAttributes<TextInput>>;
 export default _default;

package/lib/components/Form/Input/SearchInput/index.js

@@ -10,21 +10,29 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useCallback } from "react";
-import styled from "styled-components/native";
+import styled, { useTheme } from "styled-components/native";
 import Input, { InputRenderLeftContainer } from "../BaseInput";
-import SearchMedium from "@ledgerhq/icons-ui/nativeLegacy/SearchMedium";
+import Search from "@ledgerhq/icons-ui/native/Search";
+import DeleteCircleFill from "@ledgerhq/icons-ui/native/DeleteCircleFill";
 import Button from "../../../cta/Button";
-const Icon = styled(SearchMedium).attrs((p) => ({
+const Icon = styled(Search).attrs((p) => ({
     color: p.theme.colors.neutral.c70,
 })) ``;
+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"]);
+    const theme = useTheme();
     const onClear = useCallback(() => {
-        if (onChange) {
-            onChange("");
-        }
+        onChange === null || onChange === void 0 ? void 0 : onChange("");
     }, [onChange]);
-    return (React.createElement(Input, Object.assign({ ref: ref, onChange: onChange, value: value }, props, { renderLeft: React.createElement(InputRenderLeftContainer, null,
-            React.createElement(Icon, null)), renderRight: value ? React.createElement(Button, { iconName: "Close", onPress: onClear }) : null })));
+    return (React.createElement(Input, Object.assign({ 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 })));
 }
 export default React.forwardRef(SearchInput);

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

@@ -3,5 +3,4 @@ export { default as LegendInput } from "./LegendInput";
 export { default as NumberInput } from "./NumberInput";
 export { default as QrCodeInput } from "./QrCodeInput";
 export { default as SearchInput } from "./SearchInput";
-export { default as SquaredSearchBar } from "./SquaredSearchBar";
 export { default as AnimatedInput } from "./AnimatedInput";

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

@@ -3,5 +3,4 @@ export { default as LegendInput } from "./LegendInput";
 export { default as NumberInput } from "./NumberInput";
 export { default as QrCodeInput } from "./QrCodeInput";
 export { default as SearchInput } from "./SearchInput";
-export { default as SquaredSearchBar } from "./SquaredSearchBar";
 export { default as AnimatedInput } from "./AnimatedInput";

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

@@ -74,7 +74,7 @@ export function ModalHeaderCloseButton({ onClose, }) {
     const { colors } = useTheme();
     return (React.createElement(CloseContainer, null,
         React.createElement(ClosePressableExtendedBounds, { onPress: onClose },
-            React.createElement(Close, { color: colors.neutral.c100, size: "S" }))));
+            React.createElement(Close, { color: colors.neutral.c100, size: "XS" }))));
 }
 export default function BaseModal(_a) {
     var { isOpen, onClose = () => { }, noCloseButton, safeContainerStyle = {}, containerStyle = {}, modalStyle = {}, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, onModalHide, CustomHeader } = _a, rest = __rest(_a, ["isOpen", "onClose", "noCloseButton", "safeContainerStyle", "containerStyle", "modalStyle", "preventBackdropClick", "Icon", "iconColor", "title", "description", "subtitle", "children", "onModalHide", "CustomHeader"]);

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

@@ -25,10 +25,10 @@ const modalStyleOverrides = StyleSheet.create({
     },
     container: {
         minHeight: 0,
-        paddingLeft: 24,
-        paddingRight: 24,
-        paddingTop: 24,
-        paddingBottom: 24,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 16,
+        paddingBottom: 16,
         maxHeight: "100%",
         borderTopLeftRadius: 24,
         borderTopRightRadius: 24,

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

@@ -4,7 +4,6 @@ import { TouchableOpacity, TouchableOpacityProps } from "react-native";
 import { BaseStyledProps } from "../../styled";
 import { IconType } from "../../Icon/type";
 export type ButtonProps = TouchableOpacityProps & BaseStyledProps & {
-    Icon?: IconType;
     onPressWhenDisabled?: TouchableOpacityProps["onPress"];
     iconName?: string;
     type?: "main" | "shade" | "error" | "color" | "default";
@@ -17,6 +16,8 @@ export type ButtonProps = TouchableOpacityProps & BaseStyledProps & {
     pending?: boolean;
     displayContentWhenPending?: boolean;
     buttonTestId?: string;
+    isNewIcon?: boolean;
+    Icon?: IconType | JSX.Element;
 };
 export declare const Base: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {
     iconButton?: boolean | undefined;

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

@@ -63,11 +63,16 @@ const SpinnerContainer = styled.View `
   justify-content: center;
 `;
 const ButtonContainer = (props) => {
-    const { Icon, iconPosition = "right", children, hide = false, size = "medium", iconName, pending, displayContentWhenPending, buttonTestId, } = props;
+    const { Icon, isNewIcon, iconPosition = "right", children, hide = false, size = "medium", iconName, pending, displayContentWhenPending, buttonTestId, } = props;
     const theme = useTheme();
     const { text } = getButtonColorStyle(theme.colors, props);
-    const IconNode = useMemo(() => (iconName && React.createElement(IconComponent, { name: iconName, size: ctaIconSize[size], color: text.color })) ||
-        (Icon && React.createElement(Icon, { size: ctaIconSize[size], color: text.color })), [iconName, size, Icon, text.color]);
+    const IconNode = useMemo(() => {
+        if (isNewIcon) {
+            return Icon;
+        }
+        return ((iconName && React.createElement(IconComponent, { name: iconName, size: ctaIconSize[size], color: text.color })) ||
+            (typeof Icon === "function" && React.createElement(Icon, { size: ctaIconSize[size], color: text.color })));
+    }, [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, { testID: buttonTestId, variant: ctaTextType[size], fontWeight: "semiBold", color: textColor }, children)) : null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.22.8",
+  "version": "0.22.9",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -43,7 +43,7 @@
     "styled-system": "^5.1.5",
     "victory-native": "^35.5.5",
     "@ledgerhq/crypto-icons-ui": "^1.1.0",
-    "@ledgerhq/icons-ui": "^0.6.3",
+    "@ledgerhq/icons-ui": "^0.6.4",
     "@ledgerhq/ui-shared": "^0.2.1"
   },
   "peerDependencies": {
@@ -81,7 +81,9 @@
     "@storybook/addon-ondevice-controls": "6.5.7",
     "@storybook/addon-ondevice-notes": "6.5.7",
     "@storybook/addon-react-native-web": "^0.0.21",
+    "@storybook/blocks": "^7.5.3",
     "@storybook/docs-tools": "^7.5.3",
+    "@storybook/manager-api": "7.5.3",
     "@storybook/react": "^7.5.3",
     "@storybook/react-native": "6.5.7",
     "@storybook/react-webpack5": "^7.5.3",
@@ -137,6 +139,7 @@
     "regenerator-runtime": "^0.14.0",
     "rimraf": "^4.4.1",
     "storybook": "^7.5.3",
+    "storybook-dark-mode": "^3.0.3",
     "styled-components": "^5.3.3",
     "stylelint": "^14.9.1",
     "stylelint-config-recommended": "^13.0.0",

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

@@ -1,119 +0,0 @@
-/// <reference types="styled-components-react-native" />
-import React from "react";
-import { TextInput, TextInputProps, StyleProp, ViewStyle } from "react-native";
-export type CommonProps = TextInputProps & {
-    disabled?: boolean;
-    error?: string;
-};
-export type InputProps<T = string> = Omit<CommonProps, "value" | "onChange"> & {
-    /**
-     * The value of the input.
-     */
-    value: T;
-    /**
-     * A function that will render some content on the left side of the input.
-     */
-    renderLeft?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;
-    /**
-     * A function that will render some content on the right side of the input.
-     */
-    renderRight?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;
-    /**
-     * Triggered when the input value is updated.
-     */
-    onChange?: (value: T) => void;
-    /**
-     * Same as onChange but preserves the native event passed as the callback argument.
-     */
-    onChangeEvent?: TextInputProps["onChange"];
-    /**
-     * A function can be provided to serialize a value of any type to a string.
-     *
-     * This can be useful to wrap the `<SquaredInput />` component (which expects a string)
-     * and create higher-level components that will automatically perform the input/output
-     * conversion to other types.
-     *
-     * *A serializer function should always be used in conjunction with a deserializer function.*
-     */
-    serialize?: (value: T) => string;
-    /**
-     * A deserializer can be provided to convert the html input value from a string to any other type.
-     *
-     * *A deserializer function should always be used in conjunction with a serializer function.*
-     */
-    deserialize?: (value: string) => T;
-    /**
-     * Additional style for the container element.
-     */
-    containerStyle?: StyleProp<ViewStyle>;
-};
-export declare const InputRenderLeftContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & {
-    columnGap?: string | number | undefined;
-    rowGap?: string | number | undefined;
-    color?: string | undefined;
-    display?: string | undefined;
-    position?: string | undefined;
-    maxHeight?: string | number | undefined;
-} & {
-    alignItems: string;
-    flexDirection: string;
-    pl: string;
-}, "alignItems" | "flexDirection" | "pl">;
-export declare const InputRenderRightContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & {
-    columnGap?: string | number | undefined;
-    rowGap?: string | number | undefined;
-    color?: string | undefined;
-    display?: string | undefined;
-    position?: string | undefined;
-    maxHeight?: string | number | undefined;
-} & {
-    alignItems: string;
-    flexDirection: string;
-    pr: string;
-}, "alignItems" | "flexDirection" | "pr">;
-declare function Input<T = string>(props: InputProps<T>, ref?: any): JSX.Element;
-declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
-    /**
-     * The value of the input.
-     */
-    value: T;
-    /**
-     * A function that will render some content on the left side of the input.
-     */
-    renderLeft?: React.ReactNode | ((props: InputProps<T>) => React.ReactNode);
-    /**
-     * A function that will render some content on the right side of the input.
-     */
-    renderRight?: React.ReactNode | ((props: InputProps<T>) => React.ReactNode);
-    /**
-     * Triggered when the input value is updated.
-     */
-    onChange?: ((value: T) => void) | undefined;
-    /**
-     * Same as onChange but preserves the native event passed as the callback argument.
-     */
-    onChangeEvent?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputChangeEventData>) => void) | undefined;
-    /**
-     * A function can be provided to serialize a value of any type to a string.
-     *
-     * This can be useful to wrap the `<SquaredInput />` component (which expects a string)
-     * and create higher-level components that will automatically perform the input/output
-     * conversion to other types.
-     *
-     * *A serializer function should always be used in conjunction with a deserializer function.*
-     */
-    serialize?: ((value: T) => string) | undefined;
-    /**
-     * A deserializer can be provided to convert the html input value from a string to any other type.
-     *
-     * *A deserializer function should always be used in conjunction with a serializer function.*
-     */
-    deserialize?: ((value: string) => T) | undefined;
-    /**
-     * Additional style for the container element.
-     */
-    containerStyle?: StyleProp<ViewStyle>;
-} & {
-    ref?: React.ForwardedRef<TextInput> | undefined;
-}) => ReturnType<typeof Input>;
-export default _default;

package/lib/components/Form/Input/SquaredInput/index.js

@@ -1,107 +0,0 @@
-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";
-import FlexBox from "../../../Layout/Flex";
-const InputContainer = styled.View `
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  background: ${(p) => p.theme.colors.opacityDefault.c05};
-  height: 48px;
-  border-radius: 8px;
-  color: ${(p) => p.theme.colors.neutral.c100};
-
-  ${(p) => p.disabled &&
-    css `
-      color: ${p.theme.colors.neutral.c60};
-      background: ${(p) => p.theme.colors.neutral.c30};
-    `};
-
-  ${(p) => p.focus &&
-    !p.error &&
-    css `
-      border: 1px solid ${p.theme.colors.primary.c80};
-    `};
-
-  ${(p) => p.error &&
-    !p.disabled &&
-    css `
-      border: 1px solid ${p.theme.colors.error.c50};
-    `};
-
-  ${(p) => p.disabled &&
-    css `
-      color: ${p.theme.colors.neutral.c60};
-      background: ${(p) => p.theme.colors.neutral.c30};
-    `};
-`;
-const SquaredInput = styled.TextInput.attrs((p) => ({
-    selectionColor: p.theme.colors.primary.c80,
-    color: p.theme.colors.neutral.c100,
-    placeholderTextColor: p.theme.colors.neutral.c70,
-})) `
-  height: 100%;
-  width: 100%;
-  border: 0;
-  flex-shrink: 1;
-  padding-top: 14px;
-  padding-bottom: 14px;
-  padding-left: 8px;
-  padding-right: 8px;
-`;
-const InputErrorContainer = styled(Text) `
-  color: ${(p) => p.theme.colors.error.c50};
-  margin-left: 12px;
-`;
-export const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({
-    alignItems: "center",
-    flexDirection: "row",
-    pl: "16px",
-})) ``;
-export const InputRenderRightContainer = styled(FlexBox).attrs(() => ({
-    alignItems: "center",
-    flexDirection: "row",
-    pr: "16px",
-})) ``;
-// Yes, this is dirty. If you can figure out a better way please change the code :).
-// 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, autoFocus, onFocus, onBlur } = props, textInputProps = __rest(props, ["value", "onChange", "onChangeText", "onChangeEvent", "disabled", "error", "renderLeft", "renderRight", "serialize", "deserialize", "containerStyle", "autoFocus", "onFocus", "onBlur"]);
-    const inputRef = useRef();
-    useImperativeHandle(ref, () => inputRef.current, [inputRef]);
-    const inputValue = useMemo(() => serialize(value), [serialize, value]);
-    const handleChange = useCallback((value) => {
-        onChange && onChange(deserialize(value));
-        onChangeText && 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 },
-        React.createElement(InputContainer, { disabled: disabled, focus: focus, error: error },
-            typeof renderLeft === "function" ? renderLeft(props) : renderLeft,
-            React.createElement(SquaredInput, Object.assign({ ref: inputRef }, textInputProps, { value: inputValue, onChange: onChangeEvent, onChangeText: handleChange, editable: !disabled, disabled: disabled, error: error, onFocus: (e) => {
-                    setFocus(true);
-                    typeof onFocus === "function" && onFocus(e);
-                }, onBlur: (e) => {
-                    setFocus(false);
-                    typeof onBlur === "function" && onBlur(e);
-                } })),
-            typeof renderRight === "function" ? renderRight(props) : renderRight),
-        !!error && !disabled && React.createElement(InputErrorContainer, null, error)));
-}
-export default React.forwardRef(Input);

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

@@ -1,14 +0,0 @@
-import React from "react";
-import { TextInput } from "react-native";
-import { InputProps } from "../SquaredInput";
-declare const _default: React.ForwardRefExoticComponent<Omit<import("../SquaredInput").CommonProps, "onChange" | "value"> & {
-    value: string;
-    renderLeft?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
-    renderRight?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
-    onChange?: ((value: string) => void) | undefined;
-    onChangeEvent?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputChangeEventData>) => void) | undefined;
-    serialize?: ((value: string) => string) | undefined;
-    deserialize?: ((value: string) => string) | undefined;
-    containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
-} & React.RefAttributes<TextInput>>;
-export default _default;

package/lib/components/Form/Input/SquaredSearchBar/index.js

@@ -1,30 +0,0 @@
-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 from "styled-components/native";
-import Input, { InputRenderLeftContainer } from "../SquaredInput";
-import SearchMedium from "@ledgerhq/icons-ui/nativeLegacy/SearchMedium";
-import Button from "../../../cta/Button";
-const Icon = styled(SearchMedium).attrs((p) => ({
-    color: p.theme.colors.neutral.c70,
-})) ``;
-function SquaredSearchBar(_a, ref) {
-    var { onChange, value } = _a, props = __rest(_a, ["onChange", "value"]);
-    const onClear = useCallback(() => {
-        if (onChange) {
-            onChange("");
-        }
-    }, [onChange]);
-    return (React.createElement(Input, Object.assign({ ref: ref, onChange: onChange, value: value }, props, { renderLeft: React.createElement(InputRenderLeftContainer, null,
-            React.createElement(Icon, { size: 20 })), renderRight: value ? React.createElement(Button, { iconName: "Close", onPress: onClear }) : null })));
-}
-export default React.forwardRef(SquaredSearchBar);