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

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

@@ -1,6 +1,6 @@
 /// <reference types="styled-components-react-native" />
 import React from "react";
-import { TextInput, TextInputProps, StyleProp, ViewStyle, TextStyle } from "react-native";
+import { TextInput, TextInputProps, StyleProp, ViewStyle } from "react-native";
 export type CommonProps = TextInputProps & {
     disabled?: boolean;
     error?: string;
@@ -13,15 +13,11 @@ export type InputProps<T = string> = Omit<CommonProps, "value" | "onChange"> & {
     /**
      * A function that will render some content on the left side of the input.
      */
-    renderLeft?: ((props: InputProps<T>, ref: React.RefObject<{
-        clear: () => void;
-    }>) => React.ReactNode) | React.ReactNode;
+    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>, ref: React.RefObject<{
-        clear: () => void;
-    }>) => React.ReactNode) | React.ReactNode;
+    renderRight?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;
     /**
      * Triggered when the input value is updated.
      */
@@ -50,24 +46,6 @@ export type InputProps<T = string> = Omit<CommonProps, "value" | "onChange"> & {
      * Additional style for the container element.
      */
     containerStyle?: StyleProp<ViewStyle>;
-    /**
-     * Additional style for the input container element.
-     */
-    inputContainerStyle?: StyleProp<ViewStyle> & TextStyle;
-    /**
-     * Additional style for the baseInput container element.
-     */
-    baseInputContainerStyle?: TextStyle;
-    /**
-     * Additional style for the error container element.
-     */
-    inputErrorContainerStyles?: StyleProp<ViewStyle>;
-    inputErrorColor?: string;
-    showErrorIcon?: boolean;
-    /**
-     * Optional text color parameter.
-     */
-    color?: string;
 };
 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;
@@ -79,7 +57,7 @@ export declare const InputRenderLeftContainer: import("styled-components").Style
 } & {
     alignItems: string;
     flexDirection: string;
-    pl: number;
+    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;
@@ -91,7 +69,7 @@ export declare const InputRenderRightContainer: import("styled-components").Styl
 } & {
     alignItems: string;
     flexDirection: string;
-    pr: number;
+    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"> & {
@@ -102,15 +80,11 @@ declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
     /**
      * A function that will render some content on the left side of the input.
      */
-    renderLeft?: React.ReactNode | ((props: InputProps<T>, ref: React.RefObject<{
-        clear: () => void;
-    }>) => React.ReactNode);
+    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>, ref: React.RefObject<{
-        clear: () => void;
-    }>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<T>) => React.ReactNode);
     /**
      * Triggered when the input value is updated.
      */
@@ -139,24 +113,6 @@ declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
      * Additional style for the container element.
      */
     containerStyle?: StyleProp<ViewStyle>;
-    /**
-     * Additional style for the input container element.
-     */
-    inputContainerStyle?: (StyleProp<ViewStyle> & TextStyle) | undefined;
-    /**
-     * Additional style for the baseInput container element.
-     */
-    baseInputContainerStyle?: TextStyle | undefined;
-    /**
-     * Additional style for the error container element.
-     */
-    inputErrorContainerStyles?: StyleProp<ViewStyle>;
-    inputErrorColor?: string | undefined;
-    showErrorIcon?: boolean | undefined;
-    /**
-     * Optional text color parameter.
-     */
-    color?: string | undefined;
 } & {
     ref?: React.ForwardedRef<TextInput> | undefined;
 }) => ReturnType<typeof Input>;

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

@@ -13,7 +13,6 @@ import React, { useMemo, useCallback, useEffect, useImperativeHandle, useRef } f
 import styled, { css } from "styled-components/native";
 import Text from "../../../Text";
 import FlexBox from "../../../Layout/Flex";
-import { DeleteCircleFill } from "@ledgerhq/icons-ui/native";
 const InputContainer = styled.View `
   display: flex;
   flex-direction: row;
@@ -57,26 +56,30 @@ const BaseInput = styled.TextInput.attrs((p) => ({
   width: 100%;
   border: 0;
   flex-shrink: 1;
-  padding: 14px 20px;
+  padding-top: 14px;
+  padding-bottom: 14px;
+  padding-left: 20px;
+  padding-right: 20px;
 `;
-const InputErrorText = styled(Text) `
+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: 16,
+    pl: "16px",
 })) ``;
 export const InputRenderRightContainer = styled(FlexBox).attrs(() => ({
     alignItems: "center",
     flexDirection: "row",
-    pr: 16,
+    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, 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, 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]);
@@ -90,18 +93,16 @@ 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 },
-            typeof renderLeft === "function" ? renderLeft(props, inputRef) : renderLeft,
+        React.createElement(InputContainer, { disabled: disabled, focus: focus, error: error },
+            typeof renderLeft === "function" ? renderLeft(props) : 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);
                 }, onBlur: (e) => {
                     setFocus(false);
                     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 || { paddingLeft: "12px" } },
-            showErrorIcon && React.createElement(DeleteCircleFill, { color: inputErrorColor, size: "S" }),
-            React.createElement(InputErrorText, { color: inputErrorColor, variant: "small", ml: 2 }, error)))));
+                } })),
+            typeof renderRight === "function" ? renderRight(props) : renderRight),
+        !!error && !disabled && React.createElement(InputErrorContainer, null, error)));
 }
 export default React.forwardRef(Input);

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

@@ -3,23 +3,13 @@ import { TextInput } from "react-native";
 import { InputProps } from "../BaseInput";
 declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInput").CommonProps, "onChange" | "value"> & {
     value: string;
-    renderLeft?: React.ReactNode | ((props: InputProps<string>, ref: React.RefObject<{
-        clear: () => void;
-    }>) => React.ReactNode);
-    renderRight?: React.ReactNode | ((props: InputProps<string>, ref: React.RefObject<{
-        clear: () => void;
-    }>) => React.ReactNode);
+    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>;
-    inputContainerStyle?: (import("react-native").StyleProp<import("react-native").ViewStyle> & import("react-native").TextStyle) | undefined;
-    baseInputContainerStyle?: import("react-native").TextStyle | undefined;
-    inputErrorContainerStyles?: import("react-native").StyleProp<import("react-native").ViewStyle>;
-    inputErrorColor?: string | undefined;
-    showErrorIcon?: boolean | undefined;
-    color?: string | undefined;
 } & {
     legend: string;
 } & React.RefAttributes<TextInput>>;

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

@@ -3,23 +3,13 @@ import { TextInput } from "react-native";
 import { InputProps } from "../BaseInput";
 declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInput").CommonProps, "onChange" | "value"> & {
     value: number | undefined;
-    renderLeft?: React.ReactNode | ((props: InputProps<number | undefined>, ref: React.RefObject<{
-        clear: () => void;
-    }>) => React.ReactNode);
-    renderRight?: React.ReactNode | ((props: InputProps<number | undefined>, ref: React.RefObject<{
-        clear: () => void;
-    }>) => React.ReactNode);
+    renderLeft?: React.ReactNode | ((props: InputProps<number | undefined>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<number | undefined>) => React.ReactNode);
     onChange?: ((value: number | undefined) => void) | undefined;
     onChangeEvent?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputChangeEventData>) => void) | undefined;
     serialize?: ((value: number | undefined) => string) | undefined;
     deserialize?: ((value: string) => number | undefined) | undefined;
     containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
-    inputContainerStyle?: (import("react-native").StyleProp<import("react-native").ViewStyle> & import("react-native").TextStyle) | undefined;
-    baseInputContainerStyle?: import("react-native").TextStyle | undefined;
-    inputErrorContainerStyles?: import("react-native").StyleProp<import("react-native").ViewStyle>;
-    inputErrorColor?: string | undefined;
-    showErrorIcon?: boolean | undefined;
-    color?: string | undefined;
 } & {
     onPercentClick: (percent: number) => void;
     min?: number | undefined;

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

@@ -4,23 +4,13 @@ import { GestureResponderEvent } from "react-native";
 import { InputProps } from "../BaseInput";
 declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInput").CommonProps, "onChange" | "value"> & {
     value: string;
-    renderLeft?: React.ReactNode | ((props: InputProps<string>, ref: React.RefObject<{
-        clear: () => void;
-    }>) => React.ReactNode);
-    renderRight?: React.ReactNode | ((props: InputProps<string>, ref: React.RefObject<{
-        clear: () => void;
-    }>) => React.ReactNode);
+    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>;
-    inputContainerStyle?: (import("react-native").StyleProp<import("react-native").ViewStyle> & import("react-native").TextStyle) | undefined;
-    baseInputContainerStyle?: import("react-native").TextStyle | undefined;
-    inputErrorContainerStyles?: import("react-native").StyleProp<import("react-native").ViewStyle>;
-    inputErrorColor?: string | undefined;
-    showErrorIcon?: boolean | undefined;
-    color?: string | undefined;
 } & {
     onQrCodeClick?: ((event: GestureResponderEvent) => void) | undefined;
 } & React.RefAttributes<TextInput>>;

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

@@ -3,22 +3,12 @@ import { TextInput } from "react-native";
 import { InputProps } from "../BaseInput";
 declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInput").CommonProps, "onChange" | "value"> & {
     value: string;
-    renderLeft?: React.ReactNode | ((props: InputProps<string>, ref: React.RefObject<{
-        clear: () => void;
-    }>) => React.ReactNode);
-    renderRight?: React.ReactNode | ((props: InputProps<string>, ref: React.RefObject<{
-        clear: () => void;
-    }>) => React.ReactNode);
+    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>;
-    inputContainerStyle?: (import("react-native").StyleProp<import("react-native").ViewStyle> & import("react-native").TextStyle) | undefined;
-    baseInputContainerStyle?: import("react-native").TextStyle | undefined;
-    inputErrorContainerStyles?: import("react-native").StyleProp<import("react-native").ViewStyle>;
-    inputErrorColor?: string | undefined;
-    showErrorIcon?: boolean | undefined;
-    color?: string | undefined;
 } & React.RefAttributes<TextInput>>;
 export default _default;

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

@@ -4,4 +4,3 @@ 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

@@ -4,4 +4,3 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.22.3-nightly.0",
+  "version": "0.22.3",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -42,7 +42,7 @@
     "rn-range-slider": "2.1.1",
     "styled-system": "^5.1.5",
     "victory-native": "^35.5.5",
-    "@ledgerhq/crypto-icons-ui": "^0.6.2-nightly.0",
+    "@ledgerhq/crypto-icons-ui": "^0.7.0",
     "@ledgerhq/icons-ui": "^0.6.2",
     "@ledgerhq/ui-shared": "^0.2.1"
   },

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

@@ -1,8 +0,0 @@
-import React from "react";
-import { InputStatus } from ".";
-type AnimatedNotchedLabelProps = {
-    placeholder: string;
-    inputStatus: InputStatus;
-};
-export declare const AnimatedNotchedLabel: ({ placeholder, inputStatus }: AnimatedNotchedLabelProps) => React.JSX.Element;
-export {};

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

@@ -1,77 +0,0 @@
-import React from "react";
-import styled from "styled-components/native";
-import { Flex } from "../../../Layout";
-import { Text } from "react-native";
-import Animated, { useSharedValue, withTiming, useAnimatedStyle, useAnimatedReaction, Easing, } from "react-native-reanimated";
-import { inputTextColor, inputStatusColors, inputBackgroundColor } from "./inputTextColor";
-const labelPadding = 4;
-const labelInitialPositions = {
-    top: 20.5,
-    left: 16 - labelPadding,
-    fontSize: 16,
-};
-const labelFinalPositions = {
-    top: -7,
-    left: 16 - labelPadding,
-    fontSize: 12,
-};
-const LabelContainer = styled(Animated.View) `
-  position: absolute;
-  padding: ${`0 ${labelPadding}px`};
-  display: inline-block;
-  height: 15;
-  z-index: ${(p) => (p.notched ? 3 : 0)};
-`;
-const AnimatedText = Animated.createAnimatedComponent(Text);
-const LabelText = styled(AnimatedText) `
-  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: 1;
-  top: 7;
-  left: 0;
-  width: 120%;
-  background: ${(p) => inputBackgroundColor[p.status]};
-`;
-export const AnimatedNotchedLabel = ({ placeholder, inputStatus }) => {
-    const notched = inputStatus !== "default";
-    const labelTop = useSharedValue(notched ? labelFinalPositions.top : labelInitialPositions.top);
-    const labelLeft = useSharedValue(notched ? labelFinalPositions.left : labelInitialPositions.left);
-    const fontSize = useSharedValue(notched ? labelFinalPositions.fontSize : labelInitialPositions.fontSize);
-    const labelStyle = useAnimatedStyle(() => {
-        return {
-            top: labelTop.value,
-            left: labelLeft.value,
-        };
-    });
-    const labelFontSize = useAnimatedStyle(() => {
-        return {
-            fontSize: fontSize.value,
-        };
-    });
-    useAnimatedReaction(() => notched, (isNotched) => {
-        const targetTop = isNotched ? labelFinalPositions.top : labelInitialPositions.top;
-        const targetLeft = isNotched ? labelFinalPositions.left : labelInitialPositions.left;
-        const targetSize = isNotched ? labelFinalPositions.fontSize : labelInitialPositions.fontSize;
-        labelTop.value = withTiming(targetTop, undefined, () => ({
-            duration: 200,
-            easing: Easing.inOut(Easing.quad),
-        }));
-        labelLeft.value = withTiming(targetLeft, undefined, () => ({
-            duration: 200,
-            easing: Easing.inOut(Easing.quad),
-        }));
-        fontSize.value = withTiming(targetSize, undefined, () => ({
-            duration: 100,
-            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 }),
-        React.createElement(LabelText, { style: Object.assign({}, labelFontSize), status: inputStatus }, placeholder)));
-};

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

@@ -1,9 +0,0 @@
-import React from "react";
-import { type InputProps as BaseInputType } from "../BaseInput/index";
-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<unknown>>;
-export default _default;

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

@@ -1,52 +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, { forwardRef } from "react";
-import { BaseInput } from "..";
-import styled, { useTheme } from "styled-components/native";
-import { View } from "react-native";
-import { inputTextColor, inputStatusColors, getInputStatus } from "./inputTextColor";
-import { useAnimatedInputFocus } from "./useAnimatedInputFocus";
-import { AnimatedNotchedLabel } from "./AnimatedNotchedLabel";
-const InputContainer = styled(View) `
-  position: relative;
-  box-sizing: border-box;
-  height: fit-content;
-`;
-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();
-    const { onFocus, onBlur, focused } = useAnimatedInputFocus({
-        onFocusCallback,
-        onBlurCallback,
-    });
-    const inputStatus = getInputStatus({ focused, hasError: !!error, hasValue: !!value });
-    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: {
-                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 forwardRef(AnimatedInput);

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

@@ -1,29 +0,0 @@
-import { Theme } from "src/styles/theme";
-export type CbThemeType = {
-    theme: Theme;
-};
-export declare const inputStatusColors: {
-    default: ({ theme }: CbThemeType) => string;
-    focused: ({ theme }: CbThemeType) => string;
-    filled: ({ theme }: CbThemeType) => string;
-    error: ({ theme }: CbThemeType) => string;
-};
-export declare const inputTextColor: {
-    default: ({ theme }: CbThemeType) => string;
-    focused: ({ theme }: CbThemeType) => string;
-    filled: ({ theme }: CbThemeType) => string;
-    error: ({ theme }: CbThemeType) => string;
-};
-export declare const inputBackgroundColor: {
-    default: ({ theme }: CbThemeType) => string;
-    focused: ({ theme }: CbThemeType) => string;
-    filled: ({ theme }: CbThemeType) => string;
-    error: ({ theme }: CbThemeType) => string;
-};
-type getInputStatusProps = {
-    focused?: boolean;
-    hasValue?: boolean;
-    hasError?: boolean;
-};
-export declare const getInputStatus: ({ focused, hasValue, hasError }: getInputStatusProps) => "error" | "default" | "focused" | "filled";
-export {};

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

@@ -1,27 +0,0 @@
-export const inputStatusColors = {
-    default: ({ theme }) => theme.colors.opacityDefault.c50,
-    focused: ({ theme }) => theme.colors.primary.c80,
-    filled: ({ theme }) => theme.colors.neutral.c60,
-    error: ({ theme }) => theme.colors.error.c50,
-};
-export const inputTextColor = {
-    default: ({ theme }) => theme.colors.opacityDefault.c70,
-    focused: ({ theme }) => theme.colors.neutral.c100,
-    filled: ({ theme }) => theme.colors.neutral.c100,
-    error: ({ theme }) => theme.colors.neutral.c100,
-};
-export const inputBackgroundColor = {
-    default: ({ theme }) => theme.colors.background.main,
-    focused: ({ theme }) => theme.colors.background.main,
-    filled: ({ theme }) => theme.colors.background.main,
-    error: ({ theme }) => theme.colors.background.main,
-};
-export const getInputStatus = ({ focused, hasValue, hasError }) => {
-    if (hasError)
-        return "error";
-    if (focused)
-        return "focused";
-    if (hasValue)
-        return "filled";
-    return "default";
-};

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

@@ -1,11 +0,0 @@
-import { NativeSyntheticEvent, TextInputFocusEventData } from "react-native";
-type useAnimatedInputFocusProps = {
-    onFocusCallback?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => TextInputFocusEventData | void;
-    onBlurCallback?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => TextInputFocusEventData | void;
-};
-export declare const useAnimatedInputFocus: ({ onFocusCallback, onBlurCallback, }: useAnimatedInputFocusProps) => {
-    onFocus: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
-    onBlur: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
-    focused: boolean;
-};
-export {};

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

@@ -1,13 +0,0 @@
-import { useState } from "react";
-export const useAnimatedInputFocus = ({ onFocusCallback, onBlurCallback, }) => {
-    const [focused, setFocused] = useState(false);
-    const onFocus = (e) => {
-        setFocused(true);
-        onFocusCallback && onFocusCallback(e);
-    };
-    const onBlur = (e) => {
-        setFocused(false);
-        onBlurCallback && onBlurCallback(e);
-    };
-    return { onFocus, onBlur, focused };
-};