@ledgerhq/native-ui 0.22.8-nightly.0 → 0.22.8

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import styled from "styled-components/native";
 import { Flex } from "../../../Layout";
 import { Text } from "react-native";
@@ -18,26 +18,27 @@ const labelFinalPositions = {
 const LabelContainer = styled(Animated.View) `
   position: absolute;
   padding: ${`0 ${labelPadding}px`};
-  height: 15px;
+  display: inline-block;
+  height: 15;
   z-index: ${(p) => (p.notched ? 3 : 0)};
 `;
 const AnimatedText = Animated.createAnimatedComponent(Text);
 const LabelText = styled(AnimatedText) `
-  height: 15px;
-  line-height: 15px;
+  display: inline-block;
+  height: 15;
+  line-height: 15;
   vertical-align: top;
   color: ${(p) => p.status === "default" ? inputTextColor[p.status] : inputStatusColors[p.status]};
 `;
 const LineCutout = styled(Flex) `
   position: absolute;
-  height: 1px;
-  top: 7px;
-  left: 0px;
-  width: ${(p) => p.labelWidth}px;
+  height: 1;
+  top: 7;
+  left: 0;
+  width: 120%;
   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);
@@ -70,7 +71,7 @@ export const AnimatedNotchedLabel = ({ placeholder, inputStatus }) => {
             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 },
-        notched && React.createElement(LineCutout, { status: inputStatus, labelWidth: labelWidth }),
+    return (React.createElement(LabelContainer, { style: Object.assign(Object.assign({}, labelStyle), { elevation: notched ? 3 : 0 }), notched: notched },
+        notched && React.createElement(LineCutout, { status: inputStatus }),
         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, TextInput } from "react-native";
+import { StyleProp, ViewStyle } from "react-native";
 export type InputStatus = "default" | "focused" | "filled" | "error";
 export interface AnimatedInputProps extends BaseInputType {
     style?: StyleProp<ViewStyle>;
 }
-declare const _default: React.ForwardRefExoticComponent<AnimatedInputProps & React.RefAttributes<TextInput>>;
-export default _default;
+declare const AnimatedInput: ({ style, ...textInputProps }: AnimatedInputProps) => React.JSX.Element;
+export default AnimatedInput;

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

@@ -19,8 +19,9 @@ import { AnimatedNotchedLabel } from "./AnimatedNotchedLabel";
 const InputContainer = styled(View) `
   position: relative;
   box-sizing: border-box;
+  height: fit-content;
 `;
-const AnimatedInput = (_a, ref) => {
+const AnimatedInput = (_a) => {
     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();
@@ -32,15 +33,20 @@ 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 }),
-        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, Object.assign({ onFocus: onFocus, onBlur: onBlur, error: error, value: value, containerStyle: {
+                height: "100%",
+            }, 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 React.forwardRef(AnimatedInput);
+export default AnimatedInput;

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

@@ -64,7 +64,6 @@ export type InputProps<T = string> = Omit<CommonProps, "value" | "onChange"> & {
     inputErrorContainerStyles?: StyleProp<ViewStyle>;
     inputErrorColor?: string;
     showErrorIcon?: boolean;
-    hasBorder?: boolean;
     /**
      * Optional text color parameter.
      */
@@ -80,8 +79,8 @@ export declare const InputRenderLeftContainer: import("styled-components").Style
 } & {
     alignItems: string;
     flexDirection: string;
-    paddingRight: string;
-}, "alignItems" | "flexDirection" | "paddingRight">;
+    pl: number;
+}, "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;
@@ -92,8 +91,8 @@ export declare const InputRenderRightContainer: import("styled-components").Styl
 } & {
     alignItems: string;
     flexDirection: string;
-    paddingLeft: string;
-}, "alignItems" | "flexDirection" | "paddingLeft">;
+    pr: number;
+}, "alignItems" | "flexDirection" | "pr">;
 declare function Input<T = string>(props: InputProps<T>, ref?: any): JSX.Element;
 declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
     /**
@@ -154,7 +153,6 @@ 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,11 +20,9 @@ const InputContainer = styled.View `
   width: 100%;
   background: ${(p) => p.theme.colors.background.main};
   height: 48px;
-  border: ${(p) => (p.hasBorder ? `1px solid ${p.theme.colors.opacityDefault.c20}` : "none")};
-  border-radius: 8px;
+  border: ${(p) => `1px solid ${p.theme.colors.neutral.c40}`};
+  border-radius: 24px;
   color: ${(p) => p.theme.colors.neutral.c100};
-  align-items: center;
-  padding: 0px 16px;
 
   ${(p) => p.disabled &&
     css `
@@ -34,7 +32,6 @@ const InputContainer = styled.View `
 
   ${(p) => p.focus &&
     !p.error &&
-    p.hasBorder &&
     css `
       border: 1px solid ${p.theme.colors.primary.c80};
     `};
@@ -42,59 +39,50 @@ const InputContainer = styled.View `
   ${(p) => p.error &&
     !p.disabled &&
     css `
-      border: 1px solid ${p.theme.colors.error.c60};
+      border: 1px solid ${p.theme.colors.error.c50};
     `};
 
   ${(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;
-  display: flex;
-  min-height: fit-content;
-  color: ${(p) => p.theme.colors.neutral.c100};
+  padding: 14px 20px;
 `;
 const InputErrorText = styled(Text) `
-  color: ${(p) => p.theme.colors.error.c60};
+  color: ${(p) => p.theme.colors.error.c50};
 `;
 export const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({
     alignItems: "center",
     flexDirection: "row",
-    paddingRight: "8px",
+    pl: 16,
 })) ``;
 export const InputRenderRightContainer = styled(FlexBox).attrs(() => ({
     alignItems: "center",
     flexDirection: "row",
-    paddingLeft: "8px",
+    pr: 16,
 })) ``;
 // 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, 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, 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 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 && onChange(deserialize(value));
+        onChangeText && onChangeText(value);
     }, [onChange, onChangeText, deserialize]);
     useEffect(() => {
         if (autoFocus && inputRef && inputRef.current && inputRef.current.focus)
@@ -102,18 +90,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, hasBorder: hasBorder, error: error, style: inputContainerStyle },
+        React.createElement(InputContainer, { disabled: disabled, focus: focus, 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);
-                    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+                    typeof onFocus === "function" && onFocus(e);
                 }, onBlur: (e) => {
                     setFocus(false);
-                    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+                    typeof onBlur === "function" && 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 },
+        !!error && !disabled && (React.createElement(FlexBox, { flexDirection: "row", alignItems: "center", style: inputErrorContainerStyles || { paddingLeft: "12px" } },
             showErrorIcon && React.createElement(DeleteCircleFill, { color: inputErrorColor, size: "S" }),
-            React.createElement(InputErrorText, { color: inputErrorColor, variant: "small", mt: 3 }, error)))));
+            React.createElement(InputErrorText, { color: inputErrorColor, variant: "small", ml: 2 }, error)))));
 }
 export default React.forwardRef(Input);

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

@@ -19,7 +19,6 @@ 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,7 +19,6 @@ 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,7 +20,6 @@ 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,7 +19,6 @@ 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,29 +10,21 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useCallback } from "react";
-import styled, { useTheme } from "styled-components/native";
+import styled from "styled-components/native";
 import Input, { InputRenderLeftContainer } from "../BaseInput";
-import Search from "@ledgerhq/icons-ui/native/Search";
-import DeleteCircleFill from "@ledgerhq/icons-ui/native/DeleteCircleFill";
+import SearchMedium from "@ledgerhq/icons-ui/nativeLegacy/SearchMedium";
 import Button from "../../../cta/Button";
-const Icon = styled(Search).attrs((p) => ({
+const Icon = styled(SearchMedium).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(() => {
-        onChange === null || onChange === void 0 ? void 0 : onChange("");
+        if (onChange) {
+            onChange("");
+        }
     }, [onChange]);
-    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 })));
+    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 })));
 }
 export default React.forwardRef(SearchInput);

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

@@ -0,0 +1,119 @@
+/// <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

@@ -0,0 +1,107 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,30 @@
+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);

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

@@ -3,4 +3,5 @@ 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,4 +3,5 @@ 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: "XS" }))));
+            React.createElement(Close, { color: colors.neutral.c100, size: "S" }))));
 }
 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: 16,
-        paddingRight: 16,
-        paddingTop: 16,
-        paddingBottom: 16,
+        paddingLeft: 24,
+        paddingRight: 24,
+        paddingTop: 24,
+        paddingBottom: 24,
         maxHeight: "100%",
         borderTopLeftRadius: 24,
         borderTopRightRadius: 24,

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

@@ -4,6 +4,7 @@ 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";
@@ -16,8 +17,6 @@ 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,16 +63,11 @@ const SpinnerContainer = styled.View `
   justify-content: center;
 `;
 const ButtonContainer = (props) => {
-    const { Icon, isNewIcon, iconPosition = "right", children, hide = false, size = "medium", iconName, pending, displayContentWhenPending, buttonTestId, } = props;
+    const { Icon, iconPosition = "right", children, hide = false, size = "medium", iconName, pending, displayContentWhenPending, buttonTestId, } = props;
     const theme = useTheme();
     const { text } = getButtonColorStyle(theme.colors, props);
-    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 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 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-nightly.0",
+  "version": "0.22.8",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -42,8 +42,8 @@
     "rn-range-slider": "2.1.1",
     "styled-system": "^5.1.5",
     "victory-native": "^35.5.5",
-    "@ledgerhq/crypto-icons-ui": "^1.0.2",
-    "@ledgerhq/icons-ui": "^0.6.3-nightly.1",
+    "@ledgerhq/crypto-icons-ui": "^1.1.0",
+    "@ledgerhq/icons-ui": "^0.6.3",
     "@ledgerhq/ui-shared": "^0.2.1"
   },
   "peerDependencies": {
@@ -81,9 +81,7 @@
     "@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",
@@ -139,7 +137,6 @@
     "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",