@ledgerhq/react-ui 0.4.0 → 0.5.0

package/components/cta/Link/index.js

@@ -4,6 +4,9 @@ import { getLinkColors } from "./getLinkStyle";
 import { ctaIconSize, ctaTextType } from "../getCtaStyle";
 import { Text } from "../../asorted";
 import baseStyled from "../../styled";
+export const DEFAULT_ICON_POSITION = "right";
+export const DEFAULT_SIZE = "medium";
+export const DEFAULT_TYPE = "main";
 const IconContainer = styled.div `
   ${(p) => p.iconLink ? "" : p.iconPosition === "left" ? `margin-right: 6px;` : `margin-left: 6px;`}
   display: flex;
@@ -11,7 +14,7 @@ const IconContainer = styled.div `
   justify-content: center;
 `;
 export const Base = baseStyled.a `
-  color: ${({ theme, disabled, type = "main" }) => getLinkColors(theme.colors)[disabled ? "disabled" : type]["default"]};
+  color: ${({ color, theme, disabled, type = "main" }) => color || getLinkColors(theme.colors)[disabled ? "disabled" : type]["default"]};
   cursor: pointer;
   display: inline-flex;
   flex-direction: row;
@@ -19,27 +22,28 @@ export const Base = baseStyled.a `
   align-items: center;
   justify-content: center;
 
-  text-decoration: none;
-
   :hover {
     text-decoration: underline;
   }
   :active {
-    color: ${({ theme, type = "main" }) => getLinkColors(theme.colors)[type]["pressed"]};
+    color: ${({ color, theme, type = "main" }) => color || getLinkColors(theme.colors)[type]["pressed"]};
     text-decoration: underline;
   }
+
+  text-decoration: ${(p) => (p.alwaysUnderline ? "underline" : "none")};
+
 `;
-const LinkContainer = (props) => {
-    const { Icon, iconPosition = "right", children, size = "medium" } = props;
+const LinkContainer = ({ Icon, iconPosition = DEFAULT_ICON_POSITION, children, color, size = DEFAULT_SIZE, textProps, }) => {
+    const text = (React.createElement(Text, Object.assign({ variant: ctaTextType[size], fontWeight: "semiBold", color: color || "inherit" }, textProps), children));
     return (React.createElement(React.Fragment, null,
-        iconPosition === "right" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: "inherit" }, children)) : null,
+        iconPosition === "right" && children ? text : null,
         Icon ? (React.createElement(IconContainer, { iconLink: !children, iconPosition: iconPosition },
-            React.createElement(Icon, { size: ctaIconSize[size], color: "currentcolor" }))) : null,
-        iconPosition === "left" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: "inherit" }, children)) : null));
+            React.createElement(Icon, { size: ctaIconSize[size], color: color || "currentcolor" }))) : null,
+        iconPosition === "left" && children ? text : null));
 };
 const Link = (props) => {
-    const { type = "main", size = "medium" } = props;
-    return (React.createElement(Base, Object.assign({}, props),
+    const { type = DEFAULT_TYPE, size = DEFAULT_SIZE, color } = props;
+    return (React.createElement(Base, Object.assign({ color: color }, props),
         React.createElement(LinkContainer, Object.assign({}, props, { type: type, size: size }))));
 };
 export default Link;

package/components/cta/Toggle/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ButtonProps } from "../Button";
 export interface ToggleProps extends Omit<ButtonProps, "type"> {
     checked?: boolean;

package/components/form/BaseInput/index.d.ts

@@ -40,29 +40,23 @@ export declare const BaseInput: import("styled-components").StyledComponent<"inp
 } & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
 export declare const InputErrorContainer: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../asorted/Text").TextProps, keyof import("../../asorted/Text").TextProps>;
 export declare const InputWarningContainer: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../asorted/Text").TextProps, keyof import("../../asorted/Text").TextProps>;
-export declare const InputRenderLeftContainer: import("styled-components").StyledComponent<"div", 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>>> & {
+export declare const InputRenderLeftContainer: import("styled-components").StyledComponent<"div", 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").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
     columnGap?: string | number | undefined;
     rowGap?: string | number | undefined;
     color?: string | undefined;
-    display?: string | undefined;
-    position?: string | undefined;
-    maxHeight?: number | undefined;
 } & {
     alignItems: string;
     pl: string;
-}, "overflow" | "p" | "color" | "left" | "right" | "bottom" | "top" | "size" | "flex" | "padding" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "verticalAlign" | "width" | "zIndex" | "margin" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg">;
-export declare const InputRenderRightContainer: import("styled-components").StyledComponent<"div", 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>>> & {
+}, "overflow" | "p" | "color" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
+export declare const InputRenderRightContainer: import("styled-components").StyledComponent<"div", 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").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
     columnGap?: string | number | undefined;
     rowGap?: string | number | undefined;
     color?: string | undefined;
-    display?: string | undefined;
-    position?: string | undefined;
-    maxHeight?: number | undefined;
 } & {
     alignItems: string;
     pr: string;
-}, "overflow" | "p" | "color" | "left" | "right" | "bottom" | "top" | "size" | "flex" | "padding" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "verticalAlign" | "width" | "zIndex" | "margin" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg">;
-declare function Input<T = ValueType>(props: InputProps<T>, ref: React.ForwardedRef<HTMLInputElement>): JSX.Element;
+}, "overflow" | "p" | "color" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
+declare function Input<T = ValueType>(props: InputProps<T>, ref?: React.ForwardedRef<HTMLInputElement>): JSX.Element;
 declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
     value: T;
     onChange?: ((value: T) => void) | undefined;
@@ -77,10 +71,10 @@ declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
     } & {
         theme?: import("styled-components").DefaultTheme | undefined;
     } & ({} | {
-        children?: React.ReactNode;
+        children?: import("react").ReactNode;
     })) & {
-        as?: string | React.ComponentType<any> | undefined;
-        forwardedAs?: string | React.ComponentType<any> | undefined;
+        as?: string | import("react").ComponentType<any> | undefined;
+        forwardedAs?: string | import("react").ComponentType<any> | undefined;
     }) | undefined;
     /**
      * A function can be provided to serialize a value of any type to a string.

package/components/form/Dropdown/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Props as SelectInputProps } from "../../form/SelectInput";
 export declare type Props = SelectInputProps & {
     label: string;

package/components/form/LegendInput/index.d.ts

@@ -1,6 +1,30 @@
-/// <reference types="react" />
+import React from "react";
 import { InputProps } from "../BaseInput";
 export declare type Props = InputProps & {
     legend: string;
 };
-export default function LegendInput({ legend, ...inputProps }: Props): JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInput").CommonProps, "onChange" | "value"> & {
+    value: string;
+    onChange?: ((value: string) => void) | undefined;
+    onChangeEvent?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    renderLeft?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    unwrapped?: boolean | undefined;
+    containerProps?: (({
+        [x: string]: any;
+        [x: number]: any;
+        [x: symbol]: any;
+    } & {
+        theme?: import("styled-components").DefaultTheme | undefined;
+    } & ({} | {
+        children?: import("react").ReactNode;
+    })) & {
+        as?: string | import("react").ComponentType<any> | undefined;
+        forwardedAs?: string | import("react").ComponentType<any> | undefined;
+    }) | undefined;
+    serialize?: ((value: string) => string) | undefined;
+    deserialize?: ((value: string) => string) | undefined;
+} & {
+    legend: string;
+} & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/components/form/LegendInput/index.js

@@ -20,8 +20,9 @@ const Legend = styled(Text) `
     color: ${(props) => props.theme.colors.neutral.c50};
   }
 `;
-export default function LegendInput(_a) {
+function LegendInput(_a, ref) {
     var { legend } = _a, inputProps = __rest(_a, ["legend"]);
-    return (React.createElement(Input, Object.assign({}, inputProps, { renderRight: React.createElement(InputRenderRightContainer, null,
+    return (React.createElement(Input, Object.assign({ ref: ref }, inputProps, { renderRight: React.createElement(InputRenderRightContainer, null,
             React.createElement(Legend, { variant: "body", "data-disabled": inputProps.disabled }, legend)) })));
 }
+export default React.forwardRef(LegendInput);

package/components/form/NumberInput/index.d.ts

@@ -1,5 +1,27 @@
-/// <reference types="react" />
+import React from "react";
 import { InputProps } from "../BaseInput";
-export default function NumberInput({ value, onPercentClick, max, disabled, ...inputProps }: InputProps<number | undefined> & {
+declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInput").CommonProps, "onChange" | "value"> & {
+    value: number | undefined;
+    onChange?: ((value: number | undefined) => void) | undefined;
+    onChangeEvent?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    renderLeft?: React.ReactNode | ((props: InputProps<number | undefined>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<number | undefined>) => React.ReactNode);
+    unwrapped?: boolean | undefined;
+    containerProps?: (({
+        [x: string]: any;
+        [x: number]: any;
+        [x: symbol]: any;
+    } & {
+        theme?: import("styled-components").DefaultTheme | undefined;
+    } & ({} | {
+        children?: import("react").ReactNode;
+    })) & {
+        as?: string | import("react").ComponentType<any> | undefined;
+        forwardedAs?: string | import("react").ComponentType<any> | undefined;
+    }) | undefined;
+    serialize?: ((value: number | undefined) => string) | undefined;
+    deserialize?: ((value: string) => number | undefined) | undefined;
+} & {
     onPercentClick: (percent: number) => void;
-}): JSX.Element;
+} & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/components/form/NumberInput/index.js

@@ -42,10 +42,11 @@ function deserialize(value) {
         return undefined;
     }
 }
-export default function NumberInput(_a) {
+function NumberInput(_a, ref) {
     var { value, onPercentClick, max, disabled } = _a, inputProps = __rest(_a, ["value", "onPercentClick", "max", "disabled"]);
-    return (React.createElement(Input, Object.assign({ serialize: serialize, deserialize: deserialize }, inputProps, { type: "number", value: value, max: max, disabled: disabled, renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", py: "3px", mr: "8px" }, [0.25, 0.5, 0.75, 1].map((percent) => (React.createElement(MaxButton, { key: percent, onClick: () => onPercentClick(percent), active: !!value && !!max && Number(value) === percent * Number(max), disabled: disabled },
+    return (React.createElement(Input, Object.assign({ ref: ref, serialize: serialize, deserialize: deserialize }, inputProps, { type: "number", value: value, max: max, disabled: disabled, renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", py: "3px", mr: "8px" }, [0.25, 0.5, 0.75, 1].map((percent) => (React.createElement(MaxButton, { key: percent, onClick: () => onPercentClick(percent), active: !!value && !!max && Number(value) === percent * Number(max), disabled: disabled },
             React.createElement(Text, { variant: "tiny", color: "inherit" },
                 percent * 100,
                 "%"))))) })));
 }
+export default React.forwardRef(NumberInput);

package/components/form/QrCodeInput/index.d.ts

@@ -1,5 +1,27 @@
 import React from "react";
 import { InputProps } from "../BaseInput";
-export default function QrCodeInput({ onQrCodeClick, ...inputProps }: InputProps & {
-    onQrCodeClick?: (e: React.FormEvent<HTMLButtonElement>) => void;
-}): JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInput").CommonProps, "onChange" | "value"> & {
+    value: string;
+    onChange?: ((value: string) => void) | undefined;
+    onChangeEvent?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    renderLeft?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    unwrapped?: boolean | undefined;
+    containerProps?: (({
+        [x: string]: any;
+        [x: number]: any;
+        [x: symbol]: any;
+    } & {
+        theme?: import("styled-components").DefaultTheme | undefined;
+    } & ({} | {
+        children?: import("react").ReactNode;
+    })) & {
+        as?: string | import("react").ComponentType<any> | undefined;
+        forwardedAs?: string | import("react").ComponentType<any> | undefined;
+    }) | undefined;
+    serialize?: ((value: string) => string) | undefined;
+    deserialize?: ((value: string) => string) | undefined;
+} & {
+    onQrCodeClick?: ((e: React.FormEvent<HTMLButtonElement>) => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/components/form/QrCodeInput/index.js

@@ -32,9 +32,10 @@ const QrCodeButton = styled.button `
     cursor: unset;
   }
 `;
-export default function QrCodeInput(_a) {
+function QrCodeInput(_a, ref) {
     var { onQrCodeClick } = _a, inputProps = __rest(_a, ["onQrCodeClick"]);
-    return (React.createElement(Input, Object.assign({}, inputProps, { renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", pr: "8px" },
+    return (React.createElement(Input, Object.assign({ ref: ref }, inputProps, { renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", pr: "8px" },
             React.createElement(QrCodeButton, { onClick: onQrCodeClick, disabled: inputProps.disabled },
                 React.createElement(QrCodeMedium, { size: "20px" }))) })));
 }
+export default React.forwardRef(QrCodeInput);

package/components/form/QuantityInput/index.d.ts

@@ -1,6 +1,28 @@
 import React from "react";
 import { InputProps } from "../BaseInput";
-export default function QuantityInput({ onMaxClick, price, ...inputProps }: InputProps & {
-    onMaxClick?: (e: React.FormEvent<HTMLButtonElement>) => void;
-    price?: string;
-}): JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInput").CommonProps, "onChange" | "value"> & {
+    value: string;
+    onChange?: ((value: string) => void) | undefined;
+    onChangeEvent?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    renderLeft?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    unwrapped?: boolean | undefined;
+    containerProps?: (({
+        [x: string]: any;
+        [x: number]: any;
+        [x: symbol]: any;
+    } & {
+        theme?: import("styled-components").DefaultTheme | undefined;
+    } & ({} | {
+        children?: import("react").ReactNode;
+    })) & {
+        as?: string | import("react").ComponentType<any> | undefined;
+        forwardedAs?: string | import("react").ComponentType<any> | undefined;
+    }) | undefined;
+    serialize?: ((value: string) => string) | undefined;
+    deserialize?: ((value: string) => string) | undefined;
+} & {
+    onMaxClick?: ((e: React.FormEvent<HTMLButtonElement>) => void) | undefined;
+    price?: string | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/components/form/QuantityInput/index.js

@@ -37,10 +37,11 @@ const Legend = styled(Text) `
     color: ${(p) => p.theme.colors.neutral.c50};
   }
 `;
-export default function QuantityInput(_a) {
+function QuantityInput(_a, ref) {
     var { onMaxClick, price } = _a, inputProps = __rest(_a, ["onMaxClick", "price"]);
-    return (React.createElement(Input, Object.assign({}, inputProps, { type: "number", renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", pr: "3px", py: "3px" },
+    return (React.createElement(Input, Object.assign({ ref: ref }, inputProps, { type: "number", renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", pr: "3px", py: "3px" },
             price && (React.createElement(Legend, { variant: "body", pr: "12px", "data-disabled": inputProps.disabled }, price)),
             React.createElement(MaxButton, { onClick: onMaxClick, disabled: inputProps.disabled },
                 React.createElement(Text, { variant: "tiny", color: "currentColor" }, "Max"))) })));
 }
+export default React.forwardRef(QuantityInput);

package/components/form/SearchInput/index.d.ts

@@ -1,3 +1,25 @@
-/// <reference types="react" />
+import React from "react";
 import { InputProps } from "../BaseInput";
-export default function SearchInput(props: InputProps): JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInput").CommonProps, "onChange" | "value"> & {
+    value: string;
+    onChange?: ((value: string) => void) | undefined;
+    onChangeEvent?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    renderLeft?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    unwrapped?: boolean | undefined;
+    containerProps?: (({
+        [x: string]: any;
+        [x: number]: any;
+        [x: symbol]: any;
+    } & {
+        theme?: import("styled-components").DefaultTheme | undefined;
+    } & ({} | {
+        children?: import("react").ReactNode;
+    })) & {
+        as?: string | import("react").ComponentType<any> | undefined;
+        forwardedAs?: string | import("react").ComponentType<any> | undefined;
+    }) | undefined;
+    serialize?: ((value: string) => string) | undefined;
+    deserialize?: ((value: string) => string) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/components/form/SearchInput/index.js

@@ -2,8 +2,9 @@ import React from "react";
 import { useTheme } from "styled-components";
 import Input, { InputRenderLeftContainer } from "../BaseInput";
 import SearchMedium from "@ledgerhq/icons-ui/react/SearchMedium";
-export default function SearchInput(props) {
+function SearchInput(props, ref) {
     const theme = useTheme();
-    return (React.createElement(Input, Object.assign({}, props, { renderLeft: React.createElement(InputRenderLeftContainer, null,
+    return (React.createElement(Input, Object.assign({ ref: ref }, props, { renderLeft: React.createElement(InputRenderLeftContainer, null,
             React.createElement(SearchMedium, { color: props.disabled ? theme.colors.neutral.c50 : theme.colors.neutral.c70 })) })));
 }
+export default React.forwardRef(SearchInput);

package/components/form/SelectInput/Control.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
 import { Styles, ControlProps, OptionTypeBase } from "react-select";
+import { DefaultTheme } from "styled-components";
 export declare function getStyles<T extends OptionTypeBase = {
     label: string;
     value: string;
-}, M extends boolean = false>(): NonNullable<Styles<T, M>["control"]>;
+}, M extends boolean = false>(theme: DefaultTheme): NonNullable<Styles<T, M>["control"]>;
 export declare function Control<T extends OptionTypeBase = {
     label: string;
     value: string;

package/components/form/SelectInput/Control.js

@@ -1,16 +1,12 @@
 import React from "react";
 import { components } from "react-select";
-import styled from "styled-components";
 import { InputContainer } from "../BaseInput";
-export function getStyles() {
-    return (provided) => (Object.assign(Object.assign({}, provided), { display: "flex", alignItems: "center", width: "100%", border: 0, boxShadow: "none", borderRadius: "inherit", background: "transparent" }));
+export function getStyles(theme) {
+    return (provided) => (Object.assign(Object.assign({}, provided), { display: "flex", alignItems: "center", width: "100%", border: 0, padding: `0px ${theme.space[7]}px`, boxShadow: "none", borderRadius: "inherit", background: "transparent" }));
 }
-const Container = styled(InputContainer) `
-  padding: 0 ${(p) => p.theme.space[7]}px;
-`;
 export function Control(props) {
     const { isFocused, selectProps: { isDisabled, error, renderLeft }, children, } = props;
-    return (React.createElement(Container, { disabled: isDisabled, error: error, focus: isFocused },
+    return (React.createElement(InputContainer, { disabled: isDisabled, error: error, focus: isFocused },
         React.createElement(components.Control, Object.assign({}, props),
             renderLeft ? renderLeft(props) : null,
             children)));

package/components/form/SelectInput/DropdownIndicator.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Styles, IndicatorProps, OptionTypeBase } from "react-select";
 export declare function getStyles<T extends OptionTypeBase = {
     label: string;

package/components/form/SelectInput/IndicatorsContainer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IndicatorContainerProps, OptionTypeBase } from "react-select";
 export declare function IndicatorsContainer<T extends OptionTypeBase = {
     label: string;

package/components/form/SelectInput/MenuList.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Styles, MenuListComponentProps, OptionTypeBase } from "react-select";
 import { DefaultTheme } from "styled-components";
 export declare function getStyles<T extends OptionTypeBase = {

package/components/form/SelectInput/index.js

@@ -20,7 +20,7 @@ import * as OptionModule from "./Option";
 import { IndicatorsContainer } from "./IndicatorsContainer";
 import { InputErrorContainer } from "../BaseInput";
 const stylesFn = (theme) => ({
-    control: ControlModule.getStyles(),
+    control: ControlModule.getStyles(theme),
     valueContainer: ValueContainerModule.getStyles(),
     dropdownIndicator: DropdownIndicatorModule.getStyles(),
     menuList: MenuListModule.getStyles(theme),

package/components/layout/Box/index.d.ts

@@ -1,11 +1,8 @@
 import { BaseStyledProps } from "../../styled";
 export declare type BoxProps = BaseStyledProps;
-declare const Box: import("styled-components").StyledComponent<"div", 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>>> & {
+declare const Box: import("styled-components").StyledComponent<"div", 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").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
     columnGap?: string | number | undefined;
     rowGap?: string | number | undefined;
     color?: string | undefined;
-    display?: string | undefined;
-    position?: string | undefined;
-    maxHeight?: number | undefined;
 }, never>;
 export default Box;

package/components/layout/Flex/index.d.ts

@@ -1,11 +1,8 @@
 import { BaseStyledProps } from "../../styled";
 export declare type FlexBoxProps = BaseStyledProps;
-declare const FlexBox: import("styled-components").StyledComponent<"div", 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>>> & {
+declare const FlexBox: import("styled-components").StyledComponent<"div", 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").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
     columnGap?: string | number | undefined;
     rowGap?: string | number | undefined;
     color?: string | undefined;
-    display?: string | undefined;
-    position?: string | undefined;
-    maxHeight?: number | undefined;
-}, "overflow" | "p" | "color" | "left" | "right" | "bottom" | "top" | "size" | "flex" | "padding" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "verticalAlign" | "width" | "zIndex" | "margin" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg">;
+}, "overflow" | "p" | "color" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
 export default FlexBox;

package/components/layout/Popin/index.d.ts

@@ -12,28 +12,22 @@ export declare type PopinHeaderProps = BaseStyledProps & {
 declare const PopinWrapper: {
     ({ children, ...popinProps }: PopinProps): React.ReactElement;
     Header: ({ children, onClose, onBack, ...props }: PopinHeaderProps) => JSX.Element;
-    Body: import("styled-components").StyledComponent<"div", 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>>> & {
+    Body: import("styled-components").StyledComponent<"div", 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").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
         columnGap?: string | number | undefined;
         rowGap?: string | number | undefined;
         color?: string | undefined;
-        display?: string | undefined;
-        position?: string | undefined;
-        maxHeight?: number | undefined;
     } & {
         as: string;
         flexDirection: string;
         flex: number;
         overflow: string;
-    }, "overflow" | "p" | "color" | "left" | "right" | "bottom" | "top" | "size" | "flex" | "padding" | "as" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "verticalAlign" | "width" | "zIndex" | "margin" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg">;
-    Footer: import("styled-components").StyledComponent<"div", 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>>> & {
+    }, "overflow" | "p" | "color" | "as" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
+    Footer: import("styled-components").StyledComponent<"div", 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").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
         columnGap?: string | number | undefined;
         rowGap?: string | number | undefined;
         color?: string | undefined;
-        display?: string | undefined;
-        position?: string | undefined;
-        maxHeight?: number | undefined;
     } & {
         as: string;
-    }, "overflow" | "p" | "color" | "left" | "right" | "bottom" | "top" | "size" | "flex" | "padding" | "as" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "verticalAlign" | "width" | "zIndex" | "margin" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg">;
+    }, "overflow" | "p" | "color" | "as" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
 };
 export default PopinWrapper;

package/components/layout/Side/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface SideProps {
     onBack?: () => void;
 }

package/components/loaders/ProgressLoader/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface Props {
     /**
      * Radius of the progress ring.

package/components/message/Alert/index.d.ts

@@ -1,9 +1,28 @@
-/// <reference types="react" />
+import { TextVariants } from "../../../styles/theme";
 declare type AlertType = "info" | "warning" | "error";
 export interface AlertProps {
+    /**
+     * Affects the colors of the background & text and what icon can be displayed
+     */
     type?: AlertType;
-    title: string;
+    /**
+     * Title of the Alert
+     */
+    title?: string;
+    /**
+     * Method for rendering additional content under the title `{ color: string; textProps: { variant?: TextVariants; fontWeight?: string } }` is passed as props to easily style text elements
+     */
+    renderContent?: (props: {
+        color: string;
+        textProps: {
+            variant?: TextVariants;
+            fontWeight?: string;
+        };
+    }) => JSX.Element;
+    /**
+     * Whether or not to display an icon
+     */
     showIcon?: boolean;
 }
-export default function Alert({ type, title, showIcon }: AlertProps): JSX.Element;
+export default function Alert({ type, title, showIcon, renderContent, }: AlertProps): JSX.Element;
 export {};