@ledgerhq/native-ui 0.20.5-nightly.2 → 0.20.6-hotfix.0

package/lib/components/Cards/index.d.ts

@@ -2,4 +2,3 @@ export { default as FullBackgroundCard } from "./FullBackgroundCard";
 export { default as SideImageCard } from "./SideImageCard";
 export { default as NotificationCard } from "./NotificationCard";
 export { default as InformativeCard } from "./InformativeCard";
-export { default as BannerCard } from "./BannerCard";

package/lib/components/Cards/index.js

@@ -2,4 +2,3 @@ export { default as FullBackgroundCard } from "./FullBackgroundCard";
 export { default as SideImageCard } from "./SideImageCard";
 export { default as NotificationCard } from "./NotificationCard";
 export { default as InformativeCard } from "./InformativeCard";
-export { default as BannerCard } from "./BannerCard";

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

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

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

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

package/lib/components/Form/SelectableList.d.ts

@@ -8,7 +8,6 @@ type BaseElementProps<V> = {
     value?: V;
     onPress?: ((event: GestureResponderEvent) => void) | undefined;
     Icon?: IconType;
-    testID?: string;
 };
 export type ElementProps<V> = React.PropsWithChildren<BaseElementProps<V> & {
     /**

package/lib/components/Form/SelectableList.js

@@ -8,8 +8,8 @@ const ElementContainer = styled(Flex).attrs({
     accessibilityRole: "radio",
 }) ``;
 function Element(props) {
-    const { first, value, selected, disabled, onPress, children, Icon, renderRight: RenderRight, testID, } = props;
-    return (React.createElement(TouchableOpacity, { onPress: onPress, disabled: disabled, testID: testID },
+    const { first, value, selected, disabled, onPress, children, Icon, renderRight: RenderRight, } = props;
+    return (React.createElement(TouchableOpacity, { onPress: onPress, disabled: disabled },
         React.createElement(ElementContainer, { p: 6, mt: first ? 0 : 4, backgroundColor: selected ? "primary.c20" : "transparent", border: "1px solid", borderColor: selected ? "primary.c50" : "neutral.c40", borderRadius: 1, flexDirection: "row", alignItems: "center" },
             Icon && (React.createElement(Flex, { mr: 6, flexShrink: 0 },
                 React.createElement(Icon, { size: 24, color: disabled ? "neutral.c50" : selected ? "primary.c90" : "neutral.c100" }))),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.20.5-nightly.2",
+  "version": "0.20.6-hotfix.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -47,7 +47,7 @@
     "styled-system": "^5.1.5",
     "victory-native": "^35.5.5",
     "@ledgerhq/crypto-icons-ui": "^0.5.1",
-    "@ledgerhq/icons-ui": "^0.4.4-nightly.0",
+    "@ledgerhq/icons-ui": "^0.5.0-hotfix.0",
     "@ledgerhq/ui-shared": "^0.2.1"
   },
   "peerDependencies": {
@@ -84,16 +84,16 @@
     "@storybook/addon-controls": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-links": "^6.5.16",
-    "@storybook/addon-ondevice-actions": "6.5.6",
-    "@storybook/addon-ondevice-backgrounds": "6.5.6",
-    "@storybook/addon-ondevice-controls": "6.5.6",
-    "@storybook/addon-ondevice-notes": "6.5.6",
+    "@storybook/addon-ondevice-actions": "6.5.5",
+    "@storybook/addon-ondevice-backgrounds": "6.5.5",
+    "@storybook/addon-ondevice-controls": "6.5.5",
+    "@storybook/addon-ondevice-notes": "6.5.5",
     "@storybook/addon-react-native-web": "^0.0.19",
     "@storybook/builder-webpack5": "^6.5.14",
     "@storybook/docs-tools": "^6.5.16",
     "@storybook/manager-webpack5": "^6.5.14",
     "@storybook/react": "^6.5.16",
-    "@storybook/react-native": "6.5.6",
+    "@storybook/react-native": "6.5.5",
     "@svgr/core": "^5.5.0",
     "@svgr/plugin-jsx": "^5.5.0",
     "@svgr/plugin-svgo": "^5.5.0",
@@ -139,8 +139,8 @@
     "react-native": "0.71.6",
     "react-native-reanimated": "^3.1.0",
     "react-native-safe-area-context": "^4.5.0",
-    "react-native-web": "~0.19.0",
-    "regenerator-runtime": "^0.14.0",
+    "react-native-web": "~0.18.12",
+    "regenerator-runtime": "^0.13.9",
     "rimraf": "^4.4.1",
     "styled-components": "^5.3.3",
     "stylelint": "^14.9.1",

package/lib/components/Cards/BannerCard/index.d.ts

@@ -1,25 +0,0 @@
-/// <reference types="styled-components-react-native" />
-import React from "react";
-import { TouchableOpacityProps, TouchableOpacity } from "react-native";
-export type CardProps = TouchableOpacityProps & {
-    title?: string;
-    onPressDismiss?: () => void;
-    LeftElement?: JSX.Element;
-    typeOfRightIcon: "arrow" | "close";
-};
-type CloseProps = {
-    onPressDismiss?: () => void;
-};
-export declare const Container: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {}, never>;
-export declare const CloseContainer: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {}, never>;
-export declare const ChevronContainer: 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;
-}, never>;
-export declare const CloseButton: ({ onPressDismiss }: CloseProps) => JSX.Element;
-declare const BannerCard: (props: CardProps) => React.ReactElement;
-export default BannerCard;

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

@@ -1,50 +0,0 @@
-import React from "react";
-import { ChevronRightMedium, CloseMedium } from "@ledgerhq/icons-ui/nativeLegacy";
-import { TouchableOpacity } from "react-native";
-import styled, { useTheme } from "styled-components/native";
-import Text from "../../Text";
-import Flex from "../../Layout/Flex";
-export const Container = styled(TouchableOpacity) `
-  background: ${(p) => p.theme.colors.opacityDefault.c05};
-  flex-direction: row;
-  backdrop-filter: blur(62px);
-  border-radius: 12px;
-  height: 72px;
-  padding: ${(p) => p.theme.space[6]}px;
-  align-items: center;
-  justify-content: space-between;
-  z-index: 5;
-`;
-export const CloseContainer = styled(TouchableOpacity) `
-  background-color: ${(p) => p.theme.colors.opacityDefault.c05};
-  border-radius: 50;
-  height: 24px;
-  width: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-export const ChevronContainer = styled(Flex) `
-  height: 24px;
-  width: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-export const CloseButton = ({ onPressDismiss }) => {
-    const { colors } = useTheme();
-    return (React.createElement(CloseContainer, { onPress: onPressDismiss },
-        React.createElement(CloseMedium, { size: 14, color: colors.neutral.c100 })));
-};
-const CardContainer = (props) => {
-    const { onPressDismiss, LeftElement, title, typeOfRightIcon } = props;
-    return (React.createElement(Container, Object.assign({}, props),
-        React.createElement(Flex, { borderRadius: 50, height: 40, width: 40, alignItems: "center", justifyContent: "center", bg: "opacityDefault.c05" }, LeftElement),
-        React.createElement(Text, { mx: 4, variant: "large", fontWeight: "medium", numberOfLines: 3, maxWidth: "70%", color: "neutral.c100" }, title),
-        typeOfRightIcon === "close" ? (React.createElement(CloseButton, { onPressDismiss: onPressDismiss })) : (React.createElement(ChevronContainer, null,
-            React.createElement(ChevronRightMedium, { size: 24 })))));
-};
-const BannerCard = (props) => {
-    return React.createElement(CardContainer, Object.assign({}, props, { activeOpacity: 0.5 }));
-};
-export default BannerCard;

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);