@ledgerhq/react-ui 0.7.2 → 0.7.5-monorepo.0

package/{components → lib/components}/Table/index.d.ts

@@ -14,11 +14,11 @@ export declare const ExtraRowContainer: import("styled-components").StyledCompon
 export declare type RowContainerProps = {
     rowIndex: number;
 };
-export declare const RowContainer: 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>>> & 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>>> & {
+export declare const RowContainer: 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>>> & BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.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;
-} & RowContainerProps, "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">;
+} & RowContainerProps, "overflow" | "p" | "color" | "size" | "rowGap" | "columnGap" | "height" | "width" | "display" | "opacity" | "order" | "left" | "right" | "top" | "bottom" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "position" | "zIndex" | "bg" | "backgroundColor" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "verticalAlign" | "overflowX" | "overflowY" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft">;
 interface CommonProps<T> {
     /** Table data */
     data: T[];
@@ -50,17 +50,17 @@ export interface RowProps<T> extends CommonProps<T> {
 }
 declare function RowsComponent<T>({ data, columns, render, extraRender, renderRow, }: RowProps<T>): JSX.Element;
 export declare const Rows: typeof RowsComponent;
-declare function Table<T>({ data, columns, withHeaders, extraRender, renderRow, ...containerProps }: Props<T>): JSX.Element;
-declare namespace Table {
+export declare function Table<T>({ data, columns, withHeaders, extraRender, renderRow, ...containerProps }: Props<T>): JSX.Element;
+export declare namespace Table {
     var Columns: typeof import("./Columns");
     var ExtraRowContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
         gridColumn: string;
     } & GridColumnProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "gridColumn">;
-    var RowContainer: 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>>> & 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>>> & {
+    var RowContainer: 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>>> & BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.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;
-    } & RowContainerProps, "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">;
+    } & RowContainerProps, "overflow" | "p" | "color" | "size" | "rowGap" | "columnGap" | "height" | "width" | "display" | "opacity" | "order" | "left" | "right" | "top" | "bottom" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "position" | "zIndex" | "bg" | "backgroundColor" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "verticalAlign" | "overflowX" | "overflowY" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft">;
 }
 declare const memoTable: typeof Table;
 export default memoTable;

package/{components → lib/components}/Table/index.js

@@ -45,7 +45,7 @@ function RowsComponent({ data, columns, render, extraRender, renderRow, }) {
     })));
 }
 export const Rows = memo(RowsComponent);
-function Table(_a) {
+export function Table(_a) {
     var { data, columns, withHeaders, extraRender, renderRow } = _a, containerProps = __rest(_a, ["data", "columns", "withHeaders", "extraRender", "renderRow"]);
     const gridTemplateColumns = useMemo(() => columns.reduce((acc, col) => `${acc} ${col.layout || "auto"}`, ""), [columns]);
     const headers = useMemo(() => withHeaders

package/{components → lib/components}/animations/GlitchText/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface GlitchTextProps {
     text: string;
     duration?: number;

package/{components → lib/components}/animations/GlitchText/index.js

@@ -29,7 +29,9 @@ export default function GlitchText({ text, duration = 800, delay = 500 }) {
             }
             frameT++;
         }, INTERVAL);
-        return () => interval && clearInterval(interval);
+        return () => {
+            interval && clearInterval(interval);
+        };
     }, [delay, duration, text]);
     return React.createElement(React.Fragment, null, shownText);
 }

package/{components → lib/components}/asorted/Divider/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type Props = {
     variant: "default" | "light";
 };

package/{components → lib/components}/asorted/Icon/Icon.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type Props = {
     name: string;
     size?: number;

package/{components → lib/components}/asorted/Text/styles.js

@@ -57,65 +57,65 @@ export const fontStyles = css `
 `;
 export const textVariantStyle = {
     h1: {
-        fontFamily: "Alpha",
+        fontFamily: "Alpha, Inter, Sans",
         fontWeight: 500,
         "text-transform": "uppercase",
     },
     h2: {
-        fontFamily: "Alpha",
+        fontFamily: "Alpha, Inter, Sans",
         fontWeight: 500,
         "text-transform": "uppercase",
     },
     h3: {
-        fontFamily: "Alpha",
+        fontFamily: "Alpha, Inter, Sans",
         fontWeight: 500,
         "text-transform": "uppercase",
     },
     h4: {
-        fontFamily: "Alpha",
+        fontFamily: "Alpha, Inter, Sans",
         fontWeight: 500,
         "text-transform": "uppercase",
     },
     h5: {
-        fontFamily: "Alpha",
+        fontFamily: "Alpha, Inter, Sans",
         fontWeight: 500,
         "text-transform": "uppercase",
     },
     large: {
-        fontFamily: "Inter",
+        fontFamily: "Inter, Sans",
     },
     largeLineHeight: {
-        fontFamily: "Inter",
+        fontFamily: "Inter, Sans",
         lineHeight: 1.7,
     },
     body: {
-        fontFamily: "Inter",
+        fontFamily: "Inter, Sans",
     },
     bodyLineHeight: {
-        fontFamily: "Inter",
+        fontFamily: "Inter, Sans",
         lineHeight: 1.7,
     },
     paragraph: {
-        fontFamily: "Inter",
+        fontFamily: "Inter, Sans",
     },
     paragraphLineHeight: {
-        fontFamily: "Inter",
+        fontFamily: "Inter, Sans",
         lineHeight: 1.7,
     },
     small: {
-        fontFamily: "Inter",
+        fontFamily: "Inter, Sans",
     },
     extraSmall: {
-        fontFamily: "Inter",
+        fontFamily: "Inter, Sans",
     },
     tiny: {
-        fontFamily: "Inter",
+        fontFamily: "Inter, Sans",
     },
     micro: {
-        fontFamily: "Inter",
+        fontFamily: "Inter, Sans",
     },
     subtitle: {
-        fontFamily: "Inter",
+        fontFamily: "Inter, Sans",
         fontWeight: 600,
         "text-transform": "uppercase",
     },

package/{components → lib/components}/cta/Button/index.d.ts

@@ -35,7 +35,7 @@ declare const ButtonWithRef: {
     Unstyled: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
     Expand: React.ForwardRefExoticComponent<Pick<ButtonProps & {
         onToggle?: ((arg0: boolean) => void) | undefined;
-    }, "overflow" | "p" | "style" | "key" | "color" | "children" | "onClick" | "variant" | "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" | "fontSize" | "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" | "outline" | "padding" | "disabled" | "onToggle" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY" | "Icon" | "iconSize" | "ff" | "iconPosition" | "iconButton" | "iconName"> & React.RefAttributes<HTMLButtonElement>>;
+    }, "overflow" | "p" | "style" | "key" | "color" | "children" | "onClick" | "variant" | "size" | "rowGap" | "columnGap" | "height" | "width" | "display" | "fontSize" | "opacity" | "order" | "disabled" | "onToggle" | "left" | "right" | "top" | "bottom" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "position" | "zIndex" | "bg" | "backgroundColor" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "verticalAlign" | "overflowX" | "overflowY" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "Icon" | "iconSize" | "ff" | "outline" | "iconPosition" | "iconButton" | "iconName"> & React.RefAttributes<HTMLButtonElement>>;
 };
 export declare type ButtonExpandProps = React.PropsWithChildren<ButtonProps & {
     onToggle?: (arg0: boolean) => void;

package/{components → lib/components}/cta/Button/index.js

@@ -119,7 +119,7 @@ const getVariantColors = (p) => ({
     }
   `,
 });
-export const ButtonUnstyled = styled.button `
+export const ButtonUnstyled = baseStyled.button `
   all: unset;
   cursor: pointer;
 
@@ -157,7 +157,7 @@ export const Base = baseStyled.button.attrs((p) => {
   &:active {
     box-shadow: 0 0 0 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};
   }
-  &:focus {
+  &:focus, &:hover {
     box-shadow: 0 0 0 2px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};
   }
 

package/{components → lib/components}/cta/Link/index.d.ts

@@ -39,7 +39,7 @@ export declare type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
 export declare const DEFAULT_ICON_POSITION = "right";
 export declare const DEFAULT_SIZE = "medium";
 export declare const DEFAULT_TYPE = "main";
-export declare const Base: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, React.AnchorHTMLAttributes<HTMLAnchorElement> & 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>>> & {
+export declare const Base: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, React.AnchorHTMLAttributes<HTMLAnchorElement> & 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>>, CSS.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;
@@ -58,7 +58,7 @@ export declare const Base: import("styled-components").StyledComponent<"a", impo
     /**
      * Affect the font variant & icon size
      */
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "small" | "large" | "medium" | undefined;
     /**
      * Color of the link, overrides colors defined by the `type` prop
      */

package/{components → lib/components}/cta/Toggle/index.d.ts

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

package/{components → lib/components}/form/BaseInput/index.d.ts

@@ -14,6 +14,7 @@ export declare type InputProps<T = ValueType> = Omit<CommonProps, "value" | "onC
     renderRight?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;
     unwrapped?: boolean;
     containerProps?: InputContainerProps;
+    clearable?: boolean;
     /**
      * A function can be provided to serialize a value of any type to a string.
      *
@@ -40,22 +41,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").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>>> & {
+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>>, CSS.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;
 } & {
     alignItems: string;
     pl: string;
-}, "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>>> & {
+}, "overflow" | "p" | "color" | "size" | "rowGap" | "columnGap" | "height" | "width" | "display" | "opacity" | "order" | "left" | "right" | "top" | "bottom" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "position" | "zIndex" | "bg" | "backgroundColor" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "verticalAlign" | "overflowX" | "overflowY" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft">;
+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>>, CSS.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;
 } & {
     alignItems: string;
     pr: string;
-}, "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">;
+}, "overflow" | "p" | "color" | "size" | "rowGap" | "columnGap" | "height" | "width" | "display" | "opacity" | "order" | "left" | "right" | "top" | "bottom" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "position" | "zIndex" | "bg" | "backgroundColor" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "verticalAlign" | "overflowX" | "overflowY" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft">;
+export declare const ClearableButtonUnstyled: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 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;
@@ -71,11 +73,12 @@ declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
     } & {
         theme?: import("styled-components").DefaultTheme | undefined;
     } & ({} | {
-        children?: import("react").ReactNode;
+        children?: React.ReactNode;
     })) & {
-        as?: string | import("react").ComponentType<any> | undefined;
-        forwardedAs?: string | import("react").ComponentType<any> | undefined;
+        as?: string | React.ComponentType<any> | undefined;
+        forwardedAs?: string | React.ComponentType<any> | undefined;
     }) | undefined;
+    clearable?: boolean | undefined;
     /**
      * A function can be provided to serialize a value of any type to a string.
      *

package/{components → lib/components}/form/BaseInput/index.js

@@ -12,9 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import styled, { css } from "styled-components";
 import { typography } from "styled-system";
 import React, { useState, useMemo, useCallback } from "react";
+import CircledCrossSolidMedium from "@ledgerhq/icons-ui/react/CircledCrossSolidMedium";
 import FlexBox from "../../layout/Flex";
 import Text from "../../asorted/Text";
 import { rgba } from "../../../styles/helpers";
+import { ButtonUnstyled } from "../../cta/Button";
 export const InputContainer = styled.div `
   display: flex;
   height: 48px;
@@ -109,17 +111,23 @@ export const InputRenderRightContainer = styled(FlexBox).attrs(() => ({
     alignItems: "center",
     pr: "16px",
 })) ``;
+export const ClearableButtonUnstyled = styled(ButtonUnstyled) `
+  display: flex;
+`;
 // 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, disabled, error, warning, onChange, onChangeEvent, renderLeft, renderRight, unwrapped, containerProps, serialize = IDENTITY, deserialize = IDENTITY } = props, htmlInputProps = __rest(props, ["value", "disabled", "error", "warning", "onChange", "onChangeEvent", "renderLeft", "renderRight", "unwrapped", "containerProps", "serialize", "deserialize"]);
+    const { value, disabled, error, warning, onChange, onChangeEvent, renderLeft, renderRight, unwrapped, containerProps, serialize = IDENTITY, deserialize = IDENTITY, clearable } = props, htmlInputProps = __rest(props, ["value", "disabled", "error", "warning", "onChange", "onChangeEvent", "renderLeft", "renderRight", "unwrapped", "containerProps", "serialize", "deserialize", "clearable"]);
     const [focus, setFocus] = useState(false);
     const inputValue = useMemo(() => serialize(value), [serialize, value]);
     const handleChange = useCallback((e) => {
         onChange && onChange(deserialize(e.target.value));
         onChangeEvent && onChangeEvent(e);
     }, [onChange, onChangeEvent, deserialize]);
+    const handleClear = useCallback(() => {
+        onChange && onChange(deserialize(""));
+    }, [onChange, deserialize]);
     const inner = (React.createElement(React.Fragment, null,
         typeof renderLeft === "function" ? renderLeft(props) : renderLeft,
         React.createElement(BaseInput, Object.assign({ ref: ref }, htmlInputProps, { disabled: disabled, error: error, warning: warning, onChange: handleChange, value: inputValue, onFocus: (event) => {
@@ -129,6 +137,9 @@ function Input(props, ref) {
                 setFocus(false);
                 htmlInputProps.onBlur && htmlInputProps.onBlur(event);
             } })),
+        clearable && inputValue && (React.createElement(FlexBox, { alignItems: "center", mr: 7 },
+            React.createElement(ClearableButtonUnstyled, { onClick: handleClear },
+                React.createElement(CircledCrossSolidMedium, { size: 18, color: "neutral.c50" })))),
         typeof renderRight === "function" ? renderRight(props) : renderRight));
     if (unwrapped) {
         return (React.createElement(FlexBox, { alignItems: "stretch", style: { height: "100%" } }, inner));

package/{components → lib/components}/form/Dropdown/index.d.ts

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

package/{components → lib/components}/form/LegendInput/index.d.ts

@@ -17,11 +17,12 @@ declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInpu
     } & {
         theme?: import("styled-components").DefaultTheme | undefined;
     } & ({} | {
-        children?: import("react").ReactNode;
+        children?: React.ReactNode;
     })) & {
-        as?: string | import("react").ComponentType<any> | undefined;
-        forwardedAs?: string | import("react").ComponentType<any> | undefined;
+        as?: string | React.ComponentType<any> | undefined;
+        forwardedAs?: string | React.ComponentType<any> | undefined;
     }) | undefined;
+    clearable?: boolean | undefined;
     serialize?: ((value: string) => string) | undefined;
     deserialize?: ((value: string) => string) | undefined;
 } & {

package/{components → lib/components}/form/NumberInput/index.d.ts

@@ -14,11 +14,12 @@ declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInpu
     } & {
         theme?: import("styled-components").DefaultTheme | undefined;
     } & ({} | {
-        children?: import("react").ReactNode;
+        children?: React.ReactNode;
     })) & {
-        as?: string | import("react").ComponentType<any> | undefined;
-        forwardedAs?: string | import("react").ComponentType<any> | undefined;
+        as?: string | React.ComponentType<any> | undefined;
+        forwardedAs?: string | React.ComponentType<any> | undefined;
     }) | undefined;
+    clearable?: boolean | undefined;
     serialize?: ((value: number | undefined) => string) | undefined;
     deserialize?: ((value: string) => number | undefined) | undefined;
 } & {

package/{components → lib/components}/form/QrCodeInput/index.d.ts

@@ -14,11 +14,12 @@ declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInpu
     } & {
         theme?: import("styled-components").DefaultTheme | undefined;
     } & ({} | {
-        children?: import("react").ReactNode;
+        children?: React.ReactNode;
     })) & {
-        as?: string | import("react").ComponentType<any> | undefined;
-        forwardedAs?: string | import("react").ComponentType<any> | undefined;
+        as?: string | React.ComponentType<any> | undefined;
+        forwardedAs?: string | React.ComponentType<any> | undefined;
     }) | undefined;
+    clearable?: boolean | undefined;
     serialize?: ((value: string) => string) | undefined;
     deserialize?: ((value: string) => string) | undefined;
 } & {

package/{components → lib/components}/form/QuantityInput/index.d.ts

@@ -14,11 +14,12 @@ declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInpu
     } & {
         theme?: import("styled-components").DefaultTheme | undefined;
     } & ({} | {
-        children?: import("react").ReactNode;
+        children?: React.ReactNode;
     })) & {
-        as?: string | import("react").ComponentType<any> | undefined;
-        forwardedAs?: string | import("react").ComponentType<any> | undefined;
+        as?: string | React.ComponentType<any> | undefined;
+        forwardedAs?: string | React.ComponentType<any> | undefined;
     }) | undefined;
+    clearable?: boolean | undefined;
     serialize?: ((value: string) => string) | undefined;
     deserialize?: ((value: string) => string) | undefined;
 } & {