@ledgerhq/react-ui 0.4.0 → 0.7.1

package/components/cta/Button/index.js

@@ -9,13 +9,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import styled, { css } from "styled-components";
 import baseStyled from "../../styled";
 import { fontSize, border, compose } from "styled-system";
 import fontFamily from "../../../styles/styled/fontFamily";
 import { fontSizes } from "../../../styles/theme";
+import { rgba } from "../../../styles/helpers";
 import ChevronBottom from "@ledgerhq/icons-ui/react/ChevronBottomRegular";
+import IconComponent from "../../asorted/Icon";
 const IconContainer = styled.div `
   display: inline-block;
   ${(p) => `${p.iconPosition === "left" ? "margin-right" : "margin-left"}: ${p.theme.space[4]}px;`}
@@ -26,12 +28,12 @@ const getVariantColors = (p) => ({
         outline: `
         border-color: ${p.theme.colors.neutral.c100};
         color: ${p.theme.colors.neutral.c100};
-        background-color: ${p.theme.colors.neutral.c00};
+        background-color: transparent;
         &:hover, &:focus {
-          background-color: ${p.theme.colors.neutral.c20};
+          background-color: ${rgba(p.theme.colors.neutral.c100, 0.03)};
         }
         &:active {
-          background-color: ${p.theme.colors.neutral.c30};
+          background-color: ${rgba(p.theme.colors.neutral.c100, 0.05)};
         }
       `,
         filled: `
@@ -62,12 +64,12 @@ const getVariantColors = (p) => ({
         outline: `
       border-color: ${p.theme.colors.error.c100};
       color: ${p.theme.colors.error.c100};
-      background-color: ${p.theme.colors.neutral.c00};
+      background-color: transparent;
       &:hover {
-        background-color: ${p.theme.colors.error.c10};
+        background-color: ${rgba(p.theme.colors.error.c100, 0.02)};
       }
       &:active {
-        background-color: ${p.theme.colors.error.c30};
+        background-color: ${rgba(p.theme.colors.error.c100, 0.05)};
       }
     `,
         filled: `
@@ -82,12 +84,12 @@ const getVariantColors = (p) => ({
         outline: `
       border-color: ${p.theme.colors.primary.c80};
       color: ${p.theme.colors.primary.c80};
-      background-color: ${p.theme.colors.neutral.c00};
+      background-color: transparent;
       &:hover {
-        background-color: ${p.theme.colors.primary.c10};
+        background-color: ${rgba(p.theme.colors.primary.c100, 0.02)};
       }
       &:active {
-        background-color: ${p.theme.colors.primary.c20};
+        background-color: ${rgba(p.theme.colors.primary.c100, 0.05)};
       }
     `,
         filled: `
@@ -102,7 +104,7 @@ const getVariantColors = (p) => ({
         outline: `
         border-color: ${p.theme.colors.neutral.c50};
         color: ${p.theme.colors.neutral.c50};
-        background-color: ${p.theme.colors.neutral.c00};
+        background-color: transparent;
       `,
         filled: `
         color: ${p.theme.colors.neutral.c50};
@@ -153,7 +155,10 @@ export const Base = baseStyled.button.attrs((p) => {
   position: relative;
   cursor: ${(p) => (p.disabled ? "default" : "pointer")};
   &:active {
-    box-shadow: 0 0 0 4px ${(p) => p.theme.colors.primary.c60};
+    box-shadow: 0 0 0 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};
+  }
+  &:focus {
+    box-shadow: 0 0 0 2px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};
   }
 
   ${(p) => {
@@ -188,19 +193,22 @@ export const Base = baseStyled.button.attrs((p) => {
           }
         `
     : ""}
-  ${(p) => p.theme.transition(["background-color", "color", "border-color"])}
+  ${(p) => p.theme.transition(["background-color", "color", "border-color", "box-shadow"], "0.2s")}
 `;
 const ContentContainer = styled.div ``;
-const Button = (_a) => {
+const Button = (_a, ref) => {
     var _b;
-    var { Icon, iconPosition = "right", iconSize = 16, children, onClick } = _a, props = __rest(_a, ["Icon", "iconPosition", "iconSize", "children", "onClick"]);
-    return (React.createElement(Base, Object.assign({}, props, { iconButton: !(Icon == null) && !children, onClick: onClick }),
+    var { Icon, iconPosition = "right", iconSize = 16, children, onClick, iconName } = _a, props = __rest(_a, ["Icon", "iconPosition", "iconSize", "children", "onClick", "iconName"]);
+    const iconNodeSize = iconSize || fontSizes[(_b = props.fontSize) !== null && _b !== void 0 ? _b : 4];
+    const IconNode = useMemo(() => (iconName && React.createElement(IconComponent, { name: iconName, size: iconNodeSize })) ||
+        (Icon && React.createElement(Icon, { size: iconNodeSize })), [iconName, iconNodeSize, Icon]);
+    return (React.createElement(Base, Object.assign({}, props, { ref: ref, iconButton: !(Icon == null) && !children, onClick: onClick }),
         iconPosition === "right" ? React.createElement(ContentContainer, null, children) : null,
-        Icon != null ? (React.createElement(IconContainer, { iconPosition: iconPosition },
-            React.createElement(Icon, { size: iconSize || fontSizes[(_b = props.fontSize) !== null && _b !== void 0 ? _b : 4] }))) : null,
+        IconNode && React.createElement(IconContainer, { iconPosition: iconPosition }, IconNode),
         iconPosition === "left" ? React.createElement(ContentContainer, null, children) : null));
 };
-const StyledExpandButton = styled(Button).attrs((props) => ({
+const ButtonWithRef = React.forwardRef(Button);
+const StyledButtonExpand = styled(ButtonWithRef).attrs((props) => ({
     Icon: props.Icon != null || ChevronBottom,
     iconPosition: props.iconPosition || "right",
 })) `
@@ -209,14 +217,17 @@ const StyledExpandButton = styled(Button).attrs((props) => ({
     ${(p) => (p.expanded ? "transform: rotate(180deg)" : "")}
   }
 `;
-export const ExpandButton = function ExpandButton(_a) {
+export function ButtonExpand(_a, ref) {
     var { onToggle, onClick } = _a, props = __rest(_a, ["onToggle", "onClick"]);
     const [expanded, setExpanded] = useState(false);
-    return (React.createElement(StyledExpandButton, Object.assign({}, props, { expanded: expanded, onClick: (event) => {
+    return (React.createElement(StyledButtonExpand, Object.assign({}, props, { ref: ref, expanded: expanded, onClick: (event) => {
             setExpanded((expanded) => !expanded);
             onToggle != null && onToggle(!expanded);
             onClick != null && onClick(event);
         } })));
-};
+}
 Button.Unstyled = ButtonUnstyled;
-export default Button;
+Button.Expand = React.forwardRef(ButtonExpand);
+ButtonWithRef.Unstyled = Button.Unstyled;
+ButtonWithRef.Expand = Button.Expand;
+export default ButtonWithRef;

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

@@ -1,30 +1,79 @@
 import React from "react";
+import { TextProps } from "../../asorted/Text";
 import { BaseStyledProps } from "../../styled";
 export declare type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & BaseStyledProps & {
+    /**
+     * Component that takes `{size: number; color?: string}` as props
+     */
     Icon?: React.ComponentType<{
         size: number;
         color?: string;
     }>;
+    /**
+     * Affects the colors of the text, icon & underline, can be overriden by the `color` prop
+     */
     type?: "main" | "shade" | "color";
+    /**
+     * Affect the font variant & icon size
+     */
     size?: "small" | "medium" | "large";
+    /**
+     * Color of the link, overrides colors defined by the `type` prop
+     */
+    color?: string;
+    /**
+     * Props passed to the rendered text
+     */
+    textProps?: TextProps;
+    /**
+     * If true text will always be underlined, else it will be underlined only on hover
+     */
+    alwaysUnderline?: boolean;
+    /**
+     * Position of the icon relative to the text
+     */
     iconPosition?: "right" | "left";
     disabled?: boolean;
     children?: React.ReactNode;
 };
-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").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+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>>> & {
     columnGap?: string | number | undefined;
     rowGap?: string | number | undefined;
     color?: string | undefined;
-    display?: string | undefined;
-    position?: string | undefined;
-    maxHeight?: number | undefined;
 } & {
+    /**
+     * Component that takes `{size: number; color?: string}` as props
+     */
     Icon?: React.ComponentType<{
         size: number;
         color?: string | undefined;
     }> | undefined;
+    /**
+     * Affects the colors of the text, icon & underline, can be overriden by the `color` prop
+     */
     type?: "main" | "color" | "shade" | undefined;
+    /**
+     * Affect the font variant & icon size
+     */
     size?: "small" | "medium" | "large" | undefined;
+    /**
+     * Color of the link, overrides colors defined by the `type` prop
+     */
+    color?: string | undefined;
+    /**
+     * Props passed to the rendered text
+     */
+    textProps?: TextProps | undefined;
+    /**
+     * If true text will always be underlined, else it will be underlined only on hover
+     */
+    alwaysUnderline?: boolean | undefined;
+    /**
+     * Position of the icon relative to the text
+     */
     iconPosition?: "left" | "right" | undefined;
     disabled?: boolean | undefined;
     children?: React.ReactNode;

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/BaseInput/index.js

@@ -28,7 +28,7 @@ export const InputContainer = styled.div `
     !p.warning &&
     css `
       border: 1px solid ${p.theme.colors.primary.c80};
-      box-shadow: 0 0 0 4px ${rgba(p.theme.colors.primary.c60, 0.48)};
+      box-shadow: 0 0 0 4px ${rgba(p.theme.colors.primary.c60, 0.4)};
     `};
 
   ${(p) => p.error &&

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import { GroupBase } from "react-select";
 import { Props as SelectInputProps } from "../../form/SelectInput";
-export declare type Props = SelectInputProps & {
+export declare type Props<O> = SelectInputProps<O, false, GroupBase<O>> & {
     label: string;
 };
-export default function Dropdown(props: Props): JSX.Element;
+export default function Dropdown<O>(props: Props<O>): JSX.Element;

package/components/form/Dropdown/index.js

@@ -14,22 +14,23 @@ import { components } from "react-select";
 import { useTheme } from "styled-components";
 import SelectInput from "../../form/SelectInput";
 import Text from "../../asorted/Text";
+import { Icons } from "../../../";
 import { ValueContainer } from "../../form/SelectInput/ValueContainer";
-import { ChevronBottomMedium, ChevronTopMedium } from "@ledgerhq/icons-ui/react";
 import FlexBox from "../../layout/Flex";
 function DropdownControl(props) {
-    const { selectProps: { label }, children, } = props;
+    const { selectProps, children } = props;
+    const { label } = selectProps;
     return (React.createElement(components.Control, Object.assign({}, props),
-        React.createElement(Text, { fontWeight: "semiBold", variant: "paragraph", color: "neutral.c80", mr: 2 }, label),
+        React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: "neutral.c80", mr: 2 }, label),
         children));
 }
 function DropdownValueContainer(props) {
-    const ChevronIcon = props.selectProps.menuIsOpen ? ChevronTopMedium : ChevronBottomMedium;
-    return (React.createElement(ValueContainer, Object.assign({}, props, { render: () => (React.createElement(FlexBox, null,
-            React.createElement(Text, { fontWeight: "semiBold", variant: "paragraph", mr: 2 },
+    const isOpen = props.selectProps.menuIsOpen;
+    return (React.createElement(ValueContainer, Object.assign({}, props, { render: () => (React.createElement(FlexBox, { alignItems: "center" },
+            React.createElement(Text, { variant: "paragraph", fontWeight: "medium", mr: 2 },
                 React.createElement(FlexBox, null, props.children)),
-            React.createElement(FlexBox, { alignItems: "center" },
-                React.createElement(ChevronIcon, { size: 12 })))) })));
+            React.createElement(FlexBox, { alignItems: "center", style: { transform: isOpen ? "rotate(180deg)" : "" } },
+                React.createElement(Icons.DropdownMedium, { size: 20 })))) })));
 }
 function DropdownIndicatorsContainer() {
     return null;

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

@@ -0,0 +1,36 @@
+import React from "react";
+export declare const placements: readonly ["bottom-start", "bottom", "bottom-end"];
+declare type Placement = typeof placements[number];
+export declare type Props = {
+    /**
+     * Label of the dropdown button, displayed before the dropdown icon.
+     */
+    label: string | React.ReactNode;
+    /**
+     * Controls whether the dropdown can be open.
+     * Defaults to false.
+     */
+    disabled?: boolean;
+    /**
+     * Controls whether the dropdown will close on a click event happening outside of this component.
+     * Defaults to true.
+     */
+    closeOnClickOutside?: boolean;
+    /**
+     * Controls whether the dropdown will close on a click event happening inside the dropdown.
+     * Defaults to false.
+     */
+    closeOnClickInside?: boolean;
+    /**
+     * Content of the dropdown.
+     */
+    children: React.ReactNode;
+    /**
+     * Horizontal position of the dropdown relative to the dropdown button.
+     * Will automatically adjust to the document to avoid overflowing.
+     * Defaults to "bottom".
+     */
+    placement?: Placement;
+};
+declare const DropdownGeneric: ({ label, closeOnClickOutside, closeOnClickInside, disabled, placement, children, }: Props) => JSX.Element;
+export default DropdownGeneric;

package/components/form/DropdownGeneric/index.js

@@ -0,0 +1,95 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useFloating, getScrollParents, shift, flip } from "@floating-ui/react-dom";
+import styled from "styled-components";
+import { Icons } from "../../../";
+import Flex from "../../layout/Flex";
+import Box from "../../layout/Flex";
+import Text from "../../asorted/Text";
+const ButtonContainer = styled(Box).attrs({
+    flexDirection: "row",
+    width: "auto",
+    alignItems: "center",
+    height: "36px",
+}) `
+  cursor: ${(p) => !p.disabled && "pointer"};
+  > :last-child {
+    /* targeting the dropdown icon */
+    ${(p) => p.opened && "transform: rotate(180deg);"}
+    margin: 0px ${(p) => p.theme.space[3]}px;
+  }
+`;
+const DropdownContainer = styled(Flex).attrs(({ theme }) => {
+    const isLight = theme.colors.type === "light";
+    return {
+        display: "flex",
+        flexDirection: "column",
+        padding: 3,
+        border: `1px solid ${theme.colors.neutral[isLight ? "c20" : "c30"]}`,
+        borderRadius: "8px",
+        backgroundColor: isLight ? "neutral.c00" : "neutral.c20",
+        color: theme.colors.neutral.c80,
+    };
+}) `
+  box-shadow: 0px 6px 12px rgba(0, 0, 0, ${(p) => (p.theme.colors.type === "light" ? 0.04 : 0.08)});
+`;
+export const placements = ["bottom-start", "bottom", "bottom-end"];
+const DropdownGeneric = ({ label, closeOnClickOutside = true, closeOnClickInside = false, disabled = false, placement = "bottom", children, }) => {
+    const divRef = useRef(null);
+    const [opened, setOpened] = useState(false);
+    const handleClickButton = useCallback(() => {
+        if (!disabled)
+            setOpened(!opened);
+    }, [opened, disabled]);
+    const handleClickInside = useCallback(() => {
+        if (closeOnClickInside)
+            setOpened(false);
+    }, [setOpened, closeOnClickInside]);
+    const { x, y, reference, floating, strategy, update, refs } = useFloating({
+        placement: placements.includes(placement) ? placement : "bottom",
+        middleware: [shift(), flip()],
+    });
+    const handleResizeOrScroll = useCallback(() => {
+        if (opened && !disabled)
+            update();
+    }, [opened, disabled, update]);
+    useEffect(() => {
+        if (!refs.reference.current || !refs.floating.current) {
+            return;
+        }
+        const parents = [
+            ...getScrollParents(refs.reference.current),
+            ...getScrollParents(refs.floating.current),
+        ];
+        parents.forEach((parent) => {
+            parent.addEventListener("scroll", handleResizeOrScroll);
+            parent.addEventListener("resize", handleResizeOrScroll);
+        });
+        return () => {
+            parents.forEach((parent) => {
+                parent.removeEventListener("scroll", handleResizeOrScroll);
+                parent.removeEventListener("resize", handleResizeOrScroll);
+            });
+        };
+    }, [opened, disabled, refs.reference, refs.floating, handleResizeOrScroll]);
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (closeOnClickOutside &&
+                opened &&
+                divRef.current &&
+                !divRef.current.contains(event.target)) {
+                setOpened(false);
+            }
+        }
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [closeOnClickOutside, opened, setOpened, divRef]);
+    const color = disabled ? "neutral.c50" : "neutral.c100";
+    return (React.createElement("div", { ref: divRef },
+        React.createElement(ButtonContainer, { ref: reference, onClick: handleClickButton, disabled: disabled, opened: opened && !disabled },
+            React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: color }, label),
+            React.createElement(Icons.DropdownMedium, { size: 20, color: color })),
+        opened && !disabled && (React.createElement(DropdownContainer, { ref: floating, style: { overflow: "visible", position: strategy, top: y !== null && y !== void 0 ? y : "", left: x !== null && x !== void 0 ? x : "" }, onClick: handleClickInside }, children))));
+};
+export default DropdownGeneric;

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;