@ledgerhq/react-ui 0.5.0 → 0.6.0

package/components/asorted/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Divider } from "./Divider";
-export { default as Icon, IconBox } from "./Icon";
+export { default as Icon, IconBox, BoxedIcon } from "./Icon";
 export { default as Text } from "./Text";

package/components/asorted/index.js

@@ -1,3 +1,3 @@
 export { default as Divider } from "./Divider";
-export { default as Icon, IconBox } from "./Icon";
+export { default as Icon, IconBox, BoxedIcon } from "./Icon";
 export { default as Text } from "./Text";

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

@@ -14,13 +14,13 @@ interface BaseProps extends BaseStyledProps, BordersProps {
     iconButton?: boolean;
     disabled?: boolean;
 }
-export interface ButtonProps extends BaseProps {
+export interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {
     Icon?: React.ComponentType<{
         size: number;
         color?: string;
     }>;
     children?: React.ReactNode;
-    onClick: (event?: React.SyntheticEvent<HTMLButtonElement>) => void;
+    onClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
     iconSize?: number;
     style?: React.CSSProperties;
 }
@@ -29,13 +29,15 @@ export declare const Base: import("styled-components").StyledComponent<"button",
     fontFamily: string;
     fontSize: number;
 } & BaseProps, "fontFamily" | "fontSize">;
-declare const Button: {
-    ({ Icon, iconPosition, iconSize, children, onClick, ...props }: ButtonProps): React.ReactElement;
+declare const ButtonWithRef: {
+    ({ Icon, iconPosition, iconSize, children, onClick, ...props }: ButtonProps, ref?: React.ForwardedRef<HTMLButtonElement> | undefined): React.ReactElement;
     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"> & React.RefAttributes<HTMLButtonElement>>;
 };
-export declare type ExpandButtonProps = React.PropsWithChildren<{
+export declare type ButtonExpandProps = React.PropsWithChildren<ButtonProps & {
     onToggle?: (arg0: boolean) => void;
-    onClick?: (arg0: React.SyntheticEvent<HTMLButtonElement>) => void;
 }>;
-export declare const ExpandButton: ({ onToggle, onClick, ...props }: ExpandButtonProps) => React.ReactElement;
-export default Button;
+export declare function ButtonExpand({ onToggle, onClick, ...props }: ButtonExpandProps, ref?: React.ForwardedRef<HTMLButtonElement>): React.ReactElement;
+export default ButtonWithRef;

package/components/cta/Button/index.js

@@ -15,6 +15,7 @@ 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";
 const IconContainer = styled.div `
   display: inline-block;
@@ -153,7 +154,7 @@ 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)};
   }
 
   ${(p) => {
@@ -188,19 +189,20 @@ 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 }),
+    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,
         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 +211,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/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,5 +1,6 @@
+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

@@ -18,7 +18,8 @@ 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),
         children));

package/components/form/Radio/RadioElement.d.ts

@@ -1,11 +1,12 @@
 import { InputHTMLAttributes } from "react";
 declare type InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange" | "name">;
 export declare type RadioElementProps = InputAttributes & {
-    variant?: "default" | "success" | "error";
+    variant?: "default" | "main" | "success" | "error";
     label: string;
+    outlined?: boolean;
 };
 declare const Element: {
-    ({ label, value, disabled, variant, ...props }: RadioElementProps): JSX.Element;
+    ({ label, value, disabled, outlined, variant, ...props }: RadioElementProps): JSX.Element;
     displayName: string;
 };
 export default Element;

package/components/form/Radio/RadioElement.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useContext, useMemo } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { rgba } from "../../../styles/helpers";
 import Text from "../../asorted/Text";
 import { RadioContext } from "./index";
@@ -25,6 +25,7 @@ const Input = styled.input `
   appearance: none;
   width: var(--ledger-ui-checkbox-size);
   height: var(--ledger-ui-checkbox-size);
+  flex-shrink: 0;
   border-radius: ${(p) => `${p.theme.radii[1]}px`};
   border: 1px solid var(--ledger-ui-checkbox-color);
   cursor: pointer;
@@ -60,6 +61,20 @@ const Input = styled.input `
     }
   }
 
+  &[data-variant="main"] {
+    :hover {
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c90};
+    }
+    :active,
+    :checked,
+    :focus {
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c100};
+    }
+    :focus {
+      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.neutral.c60, 0.48)};
+    }
+  }
+
   &[data-variant="success"] {
     :hover,
     :checked:not([disabled]),
@@ -88,13 +103,67 @@ const Input = styled.input `
     background-color: ${(p) => p.theme.colors.neutral.c30};
   }
 `;
+const outlinedCSS = css `
+  padding: 20px;
+  border: 1px solid ${(p) => p.theme.colors.neutral.c50};
+  border-radius: ${(p) => p.theme.radii[2]}px;
+  &[data-variant="default"] {
+    :hover {
+      border-color: ${(p) => p.theme.colors.primary.c90};
+    }
+    &[data-checked] :active {
+      border-color: ${(p) => p.theme.colors.primary.c100};
+    }
+    :focus {
+      border-color: ${(p) => p.theme.colors.primary.c80};
+    }
+  }
+
+  &[data-variant="main"] {
+    :hover {
+      border-color: ${(p) => p.theme.colors.neutral.c90};
+    }
+    &[data-checked],
+    :active :focus {
+      border-color: ${(p) => p.theme.colors.neutral.c100};
+    }
+  }
+
+  &[data-variant="success"] {
+    &[data-checked]:not([disabled]) {
+      border-color: ${(p) => p.theme.colors.success.c100};
+    }
+    :hover {
+      border-color: ${(p) => p.theme.colors.success.c100};
+    }
+  }
+
+  &[data-variant="error"] {
+    &[data-checked]:not([disabled]) {
+      border-color: ${(p) => p.theme.colors.error.c100};
+    }
+    :hover {
+      border-color: ${(p) => p.theme.colors.error.c100};
+    }
+  }
+
+  &[data-variant]:disabled {
+    border-color: ${(p) => p.theme.colors.neutral.c40};
+    cursor: unset;
+  }
+`;
 const RadioElement = styled.label.attrs({ tabIndex: -1 }) `
   display: inline-flex;
   column-gap: 0.75rem;
   align-items: center;
+  cursor: pointer;
+  &[data-variant]:disabled {
+    cursor: unset;
+  }
+  ${(p) => p.outlined && outlinedCSS}
 `;
 const Element = (_a) => {
-    var { label, value, disabled, variant = "default" } = _a, props = __rest(_a, ["label", "value", "disabled", "variant"]);
+    var { label, value, disabled, outlined, variant = "default" } = _a, props = __rest(_a, ["label", "value", "disabled", "outlined", "variant"]);
     const context = useContext(RadioContext);
     if (context === undefined)
         throw new Error("RadioElement must be used within a RadioProvider");
@@ -103,7 +172,7 @@ const Element = (_a) => {
     const handleChange = (event) => {
         context.onChange(event.target.value);
     };
-    return (React.createElement(RadioElement, null,
+    return (React.createElement(RadioElement, Object.assign({ "data-variant": variant }, (isChecked ? { "data-checked": true } : {}), { outlined: outlined }),
         React.createElement(Input, Object.assign({ type: "radio", "data-variant": variant, checked: isChecked, disabled: disabled, onChange: handleChange, value: value, name: context.name }, props)),
         React.createElement(Label, { variant: "paragraph" }, label)));
 };

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

@@ -11,7 +11,7 @@ export declare const RadioContext: React.Context<Omit<RadioProps, "children" | "
 declare const Radio: {
     ({ currentValue, name, onChange, children, containerProps, }: RadioProps): JSX.Element;
     Element: {
-        ({ label, value, disabled, variant, ...props }: import("./RadioElement").RadioElementProps): JSX.Element;
+        ({ label, value, disabled, outlined, variant, ...props }: import("./RadioElement").RadioElementProps): JSX.Element;
         displayName: string;
     };
     ListElement: {

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

@@ -1,10 +1,4 @@
-import { Styles, ControlProps, OptionTypeBase } from "react-select";
+import { GroupBase, StylesConfig, ControlProps } from "react-select";
 import { DefaultTheme } from "styled-components";
-export declare function getStyles<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(theme: DefaultTheme): NonNullable<Styles<T, M>["control"]>;
-export declare function Control<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(props: ControlProps<T, M>): JSX.Element;
+export declare function getStyles<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(theme: DefaultTheme): NonNullable<StylesConfig<O, M, G>["control"]>;
+export declare function Control<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(props: ControlProps<O, M, G>): JSX.Element;

package/components/form/SelectInput/Control.js

@@ -5,7 +5,8 @@ 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" }));
 }
 export function Control(props) {
-    const { isFocused, selectProps: { isDisabled, error, renderLeft }, children, } = props;
+    const { isFocused, selectProps, children } = props;
+    const { isDisabled, error, renderLeft } = selectProps;
     return (React.createElement(InputContainer, { disabled: isDisabled, error: error, focus: isFocused },
         React.createElement(components.Control, Object.assign({}, props),
             renderLeft ? renderLeft(props) : null,

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

@@ -1,9 +1,3 @@
-import { Styles, IndicatorProps, OptionTypeBase } from "react-select";
-export declare function getStyles<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(): NonNullable<Styles<T, M>["dropdownIndicator"]>;
-export declare function DropdownIndicator<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(props: IndicatorProps<T, M>): JSX.Element;
+import { GroupBase, StylesConfig, DropdownIndicatorProps } from "react-select";
+export declare function getStyles<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(): NonNullable<StylesConfig<O, M, G>["dropdownIndicator"]>;
+export declare function DropdownIndicator<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(props: DropdownIndicatorProps<O, M, G>): JSX.Element;

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

@@ -1,5 +1,2 @@
-import { IndicatorContainerProps, OptionTypeBase } from "react-select";
-export declare function IndicatorsContainer<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(props: IndicatorContainerProps<T, M>): JSX.Element;
+import { GroupBase, IndicatorsContainerProps } from "react-select";
+export declare function IndicatorsContainer<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(props: IndicatorsContainerProps<O, M, G>): JSX.Element;

package/components/form/SelectInput/IndicatorsContainer.js

@@ -2,7 +2,7 @@ import React from "react";
 import { components } from "react-select";
 import FlexBox from "../../layout/Flex";
 export function IndicatorsContainer(props) {
-    const { selectProps: { renderRight }, } = props;
+    const { renderRight } = props.selectProps;
     return (React.createElement(FlexBox, { alignItems: "center" },
         renderRight ? renderRight(props) : null,
         React.createElement(components.IndicatorsContainer, Object.assign({}, props))));

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

@@ -1,10 +1,4 @@
-import { Styles, MenuListComponentProps, OptionTypeBase } from "react-select";
+import { GroupBase, StylesConfig, MenuListProps } from "react-select";
 import { DefaultTheme } from "styled-components";
-export declare function getStyles<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(theme: DefaultTheme): NonNullable<Styles<T, M>["menuList"]>;
-export declare function MenuList<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(props: MenuListComponentProps<T, M>): JSX.Element;
+export declare function getStyles<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(theme: DefaultTheme): NonNullable<StylesConfig<O, M, G>["menuList"]>;
+export declare function MenuList<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(props: MenuListProps<O, M, G>): JSX.Element;

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

@@ -1,20 +1,8 @@
 import React from "react";
-import { Styles, OptionProps, OptionTypeBase } from "react-select";
-export declare function getStyles<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(): NonNullable<Styles<T, M>["option"]>;
-export declare type ExtraProps<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false> = {
-    render?: (props: React.PropsWithChildren<OptionProps<T, M>>) => React.ReactNode;
+import { GroupBase, StylesConfig, OptionProps } from "react-select";
+export declare function getStyles<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(): NonNullable<StylesConfig<O, M, G>["option"]>;
+export declare type ExtraProps<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>> = {
+    render?: (props: React.PropsWithChildren<OptionProps<O, M, G>>) => React.ReactNode;
 };
-export declare type Props<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false> = OptionProps<T, M> & ExtraProps<T, M>;
-export declare function Option<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(props: Props<T, M>): JSX.Element;
+export declare type Props<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>> = OptionProps<O, M, G> & ExtraProps<O, M, G>;
+export declare function Option<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(props: Props<O, M, G>): JSX.Element;

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

@@ -1,17 +1,8 @@
 import React from "react";
-import { Styles, ValueContainerProps, OptionTypeBase } from "react-select";
-export declare function getStyles<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(): Styles<T, M>["valueContainer"];
-declare type ExtraProps<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false> = {
-    render?: (props: React.PropsWithChildren<ValueContainerProps<T, M>>) => React.ReactNode;
+import { GroupBase, StylesConfig, ValueContainerProps } from "react-select";
+export declare function getStyles<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(): StylesConfig<O, M, G>["valueContainer"];
+declare type ExtraProps<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>> = {
+    render?: (props: React.PropsWithChildren<ValueContainerProps<O, M, G>>) => React.ReactNode;
 };
-export declare function ValueContainer<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(props: ValueContainerProps<T, M> & ExtraProps<T, M>): JSX.Element;
+export declare function ValueContainer<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(props: ValueContainerProps<O, M, G> & ExtraProps<O, M, G>): JSX.Element;
 export {};

package/components/form/SelectInput/ValueContainer.js

@@ -7,5 +7,5 @@ export function getStyles() {
 export function ValueContainer(props) {
     const color = props.selectProps.isDisabled ? "neutral.c60" : "neutral.c100";
     return (React.createElement(components.ValueContainer, Object.assign({}, props),
-        React.createElement(Text, { as: "div", variant: "paragraph", color: color }, props.render ? props.render(props) : props.children)));
+        React.createElement(Text, { as: "div", variant: "paragraph", color: color, style: { display: "inherit", alignItems: "center" } }, props.render ? props.render(props) : props.children)));
 }

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

@@ -1,10 +1,7 @@
 import React from "react";
-import { MenuListComponentProps, OptionTypeBase } from "react-select";
+import { GroupBase, MenuListProps } from "react-select";
 export declare type RowProps = React.PropsWithChildren<{
     style: React.CSSProperties;
 }>;
 export declare const VirtualRow: React.MemoExoticComponent<({ style, children }: RowProps) => JSX.Element>;
-export declare function VirtualMenuList<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(props: MenuListComponentProps<T, M>): React.ReactElement;
+export declare function VirtualMenuList<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(props: MenuListProps<O, M, G>): React.ReactElement;

package/components/form/SelectInput/VirtualMenuList.js

@@ -3,7 +3,8 @@ import { components } from "react-select";
 import { FixedSizeList as List } from "react-window";
 export const VirtualRow = memo(({ style, children }) => (React.createElement("div", { style: style }, children)));
 export function VirtualMenuList(props) {
-    const { children, options, maxHeight, getValue, getStyles, selectProps: { noOptionsMessage, rowHeight }, } = props;
+    const { children, options, maxHeight, getValue, getStyles, selectProps } = props;
+    const { noOptionsMessage, rowHeight = 0 } = selectProps;
     const listRef = useRef();
     const [value] = getValue();
     const initialOffset = options.indexOf(value) * rowHeight;

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

@@ -1,23 +1,14 @@
 import React from "react";
-import { Props as SelectProps, OptionTypeBase, Styles } from "react-select";
-export declare type SelfProps<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false> = {
+import { Props as SelectProps, ControlProps, IndicatorsContainerProps, GroupBase, StylesConfig } from "react-select";
+export declare type SelfProps<O, M extends boolean, G extends GroupBase<O>> = {
     error?: string;
-    renderLeft?: (props: Props<T, M>) => React.ReactNode;
-    renderRight?: (props: Props<T, M>) => React.ReactNode;
+    renderLeft?: (props: ControlProps<O, M, G>) => React.ReactNode;
+    renderRight?: (props: IndicatorsContainerProps<O, M, G>) => React.ReactNode;
     rowHeight?: number;
     unwrapped?: boolean;
-    extendStyles?: (styles: Styles<T, M>) => Styles<T, M>;
+    extendStyles?: (styles: StylesConfig<O, M, G>) => StylesConfig<O, M, G>;
 };
-export declare type Props<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false> = SelectProps<T, M> & SelfProps<T, M>;
-declare function SelectInput<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>({ error, rowHeight, unwrapped, extendStyles, ...props }: Props<T, M>): JSX.Element;
+export declare type Props<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>> = SelectProps<O, M, G> & SelfProps<O, M, G>;
+declare function SelectInput<O, M extends boolean, G extends GroupBase<O>>({ error, rowHeight, unwrapped, extendStyles, ...props }: Props<O, M, G>): JSX.Element;
 declare const _default: typeof SelectInput;
 export default _default;

package/components/form/SelectInput/index.js

@@ -28,6 +28,12 @@ const stylesFn = (theme) => ({
     input: (provided) => (Object.assign(Object.assign({}, provided), { color: theme.colors.neutral.c100 })),
     placeholder: (provided) => (Object.assign(Object.assign({}, provided), { color: theme.colors.neutral.c60 })),
     singleValue: (provided) => (Object.assign(Object.assign({}, provided), { color: "inherit" })),
+    multiValue: (provided) => (Object.assign(Object.assign({}, provided), { backgroundColor: theme.colors.primary.c20, borderRadius: theme.radii[1] })),
+    multiValueLabel: (provided) => (Object.assign(Object.assign({}, provided), { color: theme.colors.neutral.c100 })),
+    multiValueRemove: (provided) => (Object.assign(Object.assign({}, provided), { cursor: "pointer", ":hover": {
+            color: theme.colors.error.c100,
+            backgroundColor: theme.colors.error.c30,
+        } })),
     menu: (provided) => (Object.assign(Object.assign({}, provided), { border: 0, boxShadow: "none", background: "none" })),
 });
 function SelectInput(_a) {
@@ -35,7 +41,9 @@ function SelectInput(_a) {
     const theme = useTheme();
     const styles = useMemo(() => (extendStyles ? extendStyles(stylesFn(theme)) : stylesFn(theme)), [theme, extendStyles]);
     const { isDisabled, components = {} } = props;
-    const innerContent = (React.createElement(Select, Object.assign({}, props, { error: error, styles: Object.assign(Object.assign({}, styles), props.styles), classNamePrefix: "react-select", rowHeight: rowHeight, components: Object.assign({ Control: ControlModule.Control, ValueContainer: ValueContainerModule.ValueContainer, IndicatorsContainer, DropdownIndicator: DropdownIndicatorModule.DropdownIndicator, MenuList: MenuListModule.MenuList, Option: OptionModule.Option, IndicatorSeparator: null }, components) })));
+    const innerContent = (React.createElement(Select, Object.assign({}, props, { styles: Object.assign(Object.assign({}, styles), props.styles), classNamePrefix: "react-select", components: Object.assign({ Control: ControlModule.Control, ValueContainer: ValueContainerModule.ValueContainer, IndicatorsContainer, DropdownIndicator: DropdownIndicatorModule.DropdownIndicator, MenuList: MenuListModule.MenuList, Option: OptionModule.Option, IndicatorSeparator: null }, components), 
+        // @ts-expect-error We want to be able to pass extra props here…
+        rowHeight: rowHeight })));
     if (unwrapped)
         return innerContent;
     return (React.createElement("div", null,

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

@@ -3,7 +3,10 @@ export interface DrawerProps {
     isOpen: boolean;
     children: React.ReactNode;
     title?: React.ReactNode;
+    footer?: React.ReactNode;
     big?: boolean;
+    ignoreBackdropClick?: boolean;
+    backgroundColor?: string;
     onClose: () => void;
     onBack?: () => void;
     setTransitionsEnabled?: (arg0: boolean) => void;

package/components/layout/Drawer/index.js

@@ -13,7 +13,8 @@ import React, { useCallback } from "react";
 import ReactDOM from "react-dom";
 import styled from "styled-components";
 import FlexBox from "../Flex";
-import Close from "@ledgerhq/icons-ui/react/CloseRegular";
+import Divider from "../../asorted/Divider";
+import Close from "@ledgerhq/icons-ui/react/CloseMedium";
 import ArrowLeft from "@ledgerhq/icons-ui/react/ArrowLeftRegular";
 import TransitionSlide from "../../transitions/TransitionSlide";
 import TransitionInOut from "../../transitions/TransitionInOut";
@@ -22,19 +23,21 @@ const Container = styled(FlexBox) `
   width: 100%;
   height: 100%;
   flex-direction: column;
-  background-color: ${(p) => p.theme.colors.neutral.c00};
-  padding: ${(p) => p.theme.space[6]}px ${(p) => p.theme.space[12]}px;
 `;
 const Header = styled(FlexBox) `
-  display: flex;
-  flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  min-height: ${(p) => p.theme.space[15]}px;
+  padding: ${(p) => p.theme.space[12]}px;
+  padding-bottom: ${(p) => p.theme.space[10]}px;
+`;
+const Footer = styled(FlexBox) `
+  align-items: center;
+  padding: ${(p) => p.theme.space[8]}px ${(p) => p.theme.space[12]}px;
 `;
 const Wrapper = styled.div `
   height: 100%;
   width: ${(p) => p.big ? p.theme.sizes.drawer.side.big.width : p.theme.sizes.drawer.side.small.width}px;
+  background-color: ${(p) => { var _a; return (_a = p.backgroundColor) !== null && _a !== void 0 ? _a : p.theme.colors.neutral.c00; }};
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -55,6 +58,8 @@ const Overlay = styled.div `
 const ScrollWrapper = styled.div `
   overflow: scroll;
   position: relative;
+  padding: ${(p) => p.theme.space[12]}px;
+  padding-top: 0px;
   flex: 1;
 
   &::-webkit-scrollbar {
@@ -70,21 +75,33 @@ const Button = styled.button `
   cursor: pointer;
   color: ${(p) => p.theme.colors.neutral.c100};
 `;
-const DrawerContent = ({ isOpen, title, children, big, onClose, setTransitionsEnabled = () => 0, onBack, hideNavigation = true, }) => {
+const DrawerContent = ({ isOpen, title, children, footer, big, onClose, backgroundColor, setTransitionsEnabled = () => 0, onBack, ignoreBackdropClick = false, hideNavigation = true, }) => {
     const disableChildAnimations = useCallback(() => setTransitionsEnabled(false), [setTransitionsEnabled]);
     const enableChildAnimations = useCallback(() => setTransitionsEnabled(true), [setTransitionsEnabled]);
+    const handleBackdropClick = useCallback(() => {
+        if (!ignoreBackdropClick) {
+            onClose();
+        }
+    }, [onClose, ignoreBackdropClick]);
+    const stopClickPropagation = useCallback((e) => {
+        e.stopPropagation();
+    }, []);
     return (React.createElement(TransitionInOut, { in: isOpen, appear: true, mountOnEnter: true, unmountOnExit: true, onEntering: disableChildAnimations, onEntered: enableChildAnimations, onExiting: disableChildAnimations },
-        React.createElement(Overlay, null,
+        React.createElement(Overlay, { onClick: handleBackdropClick },
             React.createElement(TransitionSlide, { in: isOpen, fixed: true, reverseExit: true, appear: true, mountOnEnter: true, unmountOnExit: true },
-                React.createElement(Wrapper, { big: big },
+                React.createElement(Wrapper, { big: big, onClick: stopClickPropagation, backgroundColor: backgroundColor },
                     React.createElement(Container, null,
                         React.createElement(Header, null,
                             !hideNavigation && (React.createElement(React.Fragment, null, onBack != null ? (React.createElement(Button, { onClick: onBack },
                                 React.createElement(ArrowLeft, { size: 21 }))) : (React.createElement(ButtonPlaceholder, null)))),
-                            (React.createElement(Text, { variant: "h5", flexShrink: 1 }, title)) || React.createElement("div", null),
-                            React.createElement(Button, { onClick: onClose },
-                                React.createElement(Close, null))),
-                        React.createElement(ScrollWrapper, null, children)))))));
+                            (React.createElement(Text, { variant: "h3", flex: 1, textAlign: "center" }, title)) || React.createElement("div", null),
+                            React.createElement(FlexBox, { alignSelf: "flex-start" },
+                                React.createElement(Button, { onClick: onClose },
+                                    React.createElement(Close, null)))),
+                        React.createElement(ScrollWrapper, null, children),
+                        footer && (React.createElement(React.Fragment, null,
+                            React.createElement(Divider, { variant: "light" }),
+                            React.createElement(Footer, null, footer)))))))));
 };
 const Drawer = (_a) => {
     var { children } = _a, sideProps = __rest(_a, ["children"]);

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

@@ -1,7 +1,8 @@
-declare const InfiniteLoader: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {
-    alt: "loading...";
-    src: "data:image/png;base64,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";
-    width: "28";
-    height: "28";
-}, "height" | "width" | "alt" | "src">;
-export default InfiniteLoader;
+import React from "react";
+import { SizeProps } from "styled-system";
+declare const Loader: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, SizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>>, never>;
+export declare type Props = React.ComponentProps<typeof Loader> & {
+    color?: string;
+};
+export default function InfiniteLoader({ size, color, ...extraProps }: Props): JSX.Element;
+export {};

package/components/loaders/InfiniteLoader/index.js

@@ -1,5 +1,17 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
 import styled, { keyframes } from "styled-components";
-import image from "./image";
+import { system, size } from "styled-system";
 const rotate = keyframes `
   0% {
     transform: rotate(0deg);
@@ -8,13 +20,27 @@ const rotate = keyframes `
     transform: rotate(360deg);
   }
 `;
-const InfiniteLoader = styled.img.attrs({
-    alt: "loading...",
-    src: `data:image/png;base64,${image}`,
-    width: "28",
-    height: "28",
-}) `
+const Loader = styled.svg `
   animation: ${rotate} 1s linear infinite;
-  transition: 100ms linear transform;
+  ${size}
+  ${system({
+    stroke: {
+        property: "stroke",
+        scale: "colors",
+    },
+})}
 `;
-export default InfiniteLoader;
+export default function InfiniteLoader(_a) {
+    var { size = 38, color = "primary.c50" } = _a, extraProps = __rest(_a, ["size", "color"]);
+    return (React.createElement(Loader, Object.assign({ size: size, stroke: color, viewBox: "0 0 38 38", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, extraProps),
+        React.createElement("linearGradient", { id: "gradient-start", gradientUnits: "userSpaceOnUse", gradientTransform: "rotate(-20)" },
+            React.createElement("stop", { offset: "0", stopColor: "white", stopOpacity: "0.5" }),
+            React.createElement("stop", { offset: "1", stopColor: "white", stopOpacity: "1" })),
+        React.createElement("linearGradient", { id: "gradient-end", gradientUnits: "userSpaceOnUse", gradientTransform: "rotate(-20)" },
+            React.createElement("stop", { offset: "0", stopColor: "white", stopOpacity: "0.5" }),
+            React.createElement("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })),
+        React.createElement("mask", { id: "gradient-mask", maskUnits: "userSpaceOnUse" },
+            React.createElement("rect", { x: "-0", y: "-4", width: "44", height: "22", strokeWidth: "0", fill: "url(#gradient-start)", transform: "rotate(10)" }),
+            React.createElement("rect", { x: "0", y: "18", width: "44", height: "21", strokeWidth: "0", fill: "url(#gradient-end)", transform: "rotate(10)" })),
+        React.createElement("path", { d: "M34.8807 20.9499C35.3608 17.0398 34.3815 13.09 32.1304 9.85712C29.8793 6.6242 26.5146 4.33541 22.6808 3.42914C18.847 2.52287 14.8136 3.06283 11.3532 4.94559C7.89277 6.82836 5.24858 9.92158 3.92708 13.6328C2.60558 17.344 2.69968 21.4123 4.19135 25.0584C5.68302 28.7045 8.4674 31.6722 12.0112 33.3929C15.5549 35.1137 19.609 35.4666 23.3968 34.384C27.1846 33.3015 30.4398 30.8596 32.5391 27.526", strokeWidth: "6", strokeLinecap: "round", strokeLinejoin: "round", mask: "url(#gradient-mask)" })));
+}

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

@@ -11,5 +11,26 @@ export interface Props {
      * Progress of the loader, in percent, between 0 and 100.
      */
     progress?: number;
+    /**
+     * Whether to display the progress, defaults to true.
+     */
+    showPercentage?: boolean;
+    /**
+     * Percentage text color
+     */
+    textColor?: string;
+    /**
+     * Front stroke color.
+     */
+    frontStrokeColor?: string;
+    /**
+     * Front stroke linecap.
+     * https://developer.mozilla.org/fr/docs/Web/SVG/Attribute/stroke-linecap
+     */
+    frontStrokeLinecap?: "butt" | "round";
+    /**
+     * Background stroke color.
+     */
+    backgroundStrokeColor?: string;
 }
-export default function ProgressLoader({ radius, stroke, progress, }: Props): JSX.Element;
+export default function ProgressLoader({ radius, stroke, progress, showPercentage, textColor, frontStrokeColor, frontStrokeLinecap, backgroundStrokeColor, }: Props): JSX.Element;

package/components/loaders/ProgressLoader/index.js

@@ -11,14 +11,12 @@ const StyledCircle = styled.circle.attrs({
   transform-origin: 50% 50%;
 `;
 const StyledCircleBackground = styled(StyledCircle).attrs((props) => ({
-    stroke: props.theme.colors.primary.c20,
+    stroke: props.stroke || props.theme.colors.primary.c20,
 })) ``;
 const StyledCircleFront = styled(StyledCircle).attrs((props) => ({
-    stroke: props.theme.colors.primary.c60,
+    stroke: props.stroke || props.theme.colors.primary.c60,
 })) ``;
-const StyledCenteredText = styled(Text).attrs({
-    color: "primary.c80",
-}) `
+const StyledCenteredText = styled(Text) `
   position: absolute;
   top: 50%;
   left: 50%;
@@ -29,18 +27,18 @@ const StyledProgressLoaderContainer = styled.div `
   display: flex;
   position: absolute;
 `;
-function ProgressCircleSvg({ radius, stroke, progress, }) {
+function ProgressCircleSvg({ radius, stroke, progress, backgroundStrokeColor, frontStrokeColor, frontStrokeLinecap, }) {
     const normalizedRadius = radius - stroke / 2;
     const circumference = normalizedRadius * 2 * Math.PI;
     const strokeDashoffset = circumference - (progress / 100) * circumference;
     return (React.createElement("svg", { height: radius * 2, width: radius * 2 },
-        React.createElement(StyledCircleBackground, { strokeWidth: stroke, strokeDasharray: circumference + " " + circumference, style: { strokeDashoffset: 0 }, r: normalizedRadius }),
-        React.createElement(StyledCircleFront, { strokeWidth: stroke, strokeDasharray: circumference + " " + circumference, style: { strokeDashoffset }, r: normalizedRadius })));
+        React.createElement(StyledCircleBackground, { strokeWidth: stroke, strokeDasharray: circumference + " " + circumference, style: { strokeDashoffset: 0 }, stroke: backgroundStrokeColor, r: normalizedRadius }),
+        React.createElement(StyledCircleFront, { strokeWidth: stroke, strokeDasharray: circumference + " " + circumference, style: { strokeDashoffset }, stroke: frontStrokeColor, strokeLinecap: frontStrokeLinecap, r: normalizedRadius })));
 }
-export default function ProgressLoader({ radius = 32, stroke = 6, progress = 0, }) {
+export default function ProgressLoader({ radius = 32, stroke = 6, progress = 0, showPercentage = true, textColor, frontStrokeColor, frontStrokeLinecap, backgroundStrokeColor, }) {
     return (React.createElement(StyledProgressLoaderContainer, null,
-        React.createElement(StyledCenteredText, { variant: "body" },
+        showPercentage && (React.createElement(StyledCenteredText, { variant: "body", color: textColor || "primary.c80" },
             progress,
-            "%"),
-        React.createElement(ProgressCircleSvg, { radius: radius, stroke: stroke, progress: progress })));
+            "%")),
+        React.createElement(ProgressCircleSvg, { radius: radius, stroke: stroke, progress: progress, frontStrokeColor: frontStrokeColor, frontStrokeLinecap: frontStrokeLinecap, backgroundStrokeColor: backgroundStrokeColor })));
 }

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

@@ -1,28 +1,37 @@
 import { TextVariants } from "../../../styles/theme";
 declare type AlertType = "info" | "warning" | "error";
+declare type RenderProps = (props: {
+    color: string;
+    textProps: {
+        variant?: TextVariants;
+        fontWeight?: string;
+    };
+}) => JSX.Element;
 export interface AlertProps {
     /**
-     * Affects the colors of the background & text and what icon can be displayed
+     * Affects the colors of the background & text and what icon can be displayed.
      */
     type?: AlertType;
     /**
-     * Title of the Alert
+     * 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
+     * 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;
+    renderContent?: RenderProps;
+    /**
+     * Method for rendering additional content to the right. `{ color: string; textProps: { variant?: TextVariants; fontWeight?: string } }` is passed as props to easily style text elements.
+     */
+    renderRight?: RenderProps;
+    /**
+     * Additional props to be passed to the top level container (containing icon + content).
+     */
+    containerProps?: Record<string, unknown>;
     /**
      * Whether or not to display an icon
      */
     showIcon?: boolean;
 }
-export default function Alert({ type, title, showIcon, renderContent, }: AlertProps): JSX.Element;
+export default function Alert({ type, title, showIcon, renderContent, renderRight, containerProps, }: AlertProps): JSX.Element;
 export {};

package/components/message/Alert/index.js

@@ -35,22 +35,21 @@ const getColors = ({ theme, type }) => {
             };
     }
 };
-const StyledAlertContainer = styled(Flex).attrs(() => ({
-    padding: 6,
-})) `
+const StyledAlertContainer = styled(Flex) `
   border-radius: ${(p) => `${p.theme.radii[1]}px`};
   align-items: center;
 `;
-export default function Alert({ type = "info", title, showIcon = true, renderContent, }) {
+export default function Alert({ type = "info", title, showIcon = true, renderContent, renderRight, containerProps, }) {
     const theme = useTheme();
     const { color, background } = getColors({ theme, type });
     const textProps = {
         variant: "paragraph",
         fontWeight: "medium",
     };
-    return (React.createElement(StyledAlertContainer, { color: color, backgroundColor: background },
+    return (React.createElement(StyledAlertContainer, Object.assign({ color: color, backgroundColor: background, padding: 6 }, containerProps),
         showIcon && !!icons[type] && React.createElement(StyledIconContainer, null, icons[type]),
-        React.createElement(Flex, { flexDirection: "column", alignItems: "flex-start", rowGap: "6px" },
+        React.createElement(Flex, { flexDirection: "column", flex: 1, alignItems: "flex-start", rowGap: "6px" },
             title && (React.createElement(Text, Object.assign({}, textProps, { color: "inherit" }), title)),
-            renderContent && renderContent({ color, textProps }))));
+            renderContent && renderContent({ color, textProps })),
+        React.createElement(Flex, null, renderRight && renderRight({ color, textProps }))));
 }

package/index.d.ts

@@ -1,3 +1,3 @@
 export * from "./components";
 export * from "./assets";
-export { StyleProvider } from "./styles";
+export { StyleProvider, InvertTheme } from "./styles";

package/index.js

@@ -1,3 +1,3 @@
 export * from "./components";
 export * from "./assets";
-export { StyleProvider } from "./styles";
+export { StyleProvider, InvertTheme } from "./styles";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ledgerhq/react-ui",
   "description": "Ledger Live - Desktop UI",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
@@ -27,13 +27,12 @@
     "index.js"
   ],
   "dependencies": {
-    "@ledgerhq/icons-ui": "^0.2.0",
-    "@ledgerhq/ui-shared": "^0.1.3",
+    "@ledgerhq/icons-ui": "^0.2.1",
+    "@ledgerhq/ui-shared": "^0.1.4",
     "@tippyjs/react": "^4.2.6",
     "@types/color": "^3.0.2",
     "@types/react": "~17.0.37",
     "@types/react-dom": "^17.0.11",
-    "@types/react-select": "^4.0.18",
     "@types/react-transition-group": "^4.4.2",
     "@types/react-window": "^1.8.5",
     "@types/styled-components": "^5.1.14",
@@ -44,7 +43,7 @@
     "moment": "^2.29.1",
     "react-chartjs-2": "^3.0.5",
     "react-is": "^17.0.2",
-    "react-select": "^3.2.0",
+    "react-select": "^5.2.1",
     "react-transition-group": "^4.4.2",
     "react-window": "^1.8.6",
     "styled-system": "^5.1.5"

package/styles/InvertTheme.js

@@ -5,6 +5,6 @@ import { palettes } from "@ledgerhq/ui-shared";
 export const InvertTheme = ({ children }) => {
     const { theme } = useTheme();
     const revertTheme = theme === "light" ? "dark" : "light";
-    const newTheme = useMemo(() => (Object.assign(Object.assign({}, defaultTheme), { colors: Object.assign(Object.assign({}, defaultTheme.colors), { palette: palettes[revertTheme] }), theme: revertTheme })), [revertTheme]);
+    const newTheme = useMemo(() => (Object.assign(Object.assign({}, defaultTheme), { colors: Object.assign(Object.assign({}, palettes[revertTheme]), { palette: palettes[revertTheme] }), theme: revertTheme })), [revertTheme]);
     return React.createElement(ThemeProvider, { theme: newTheme }, children);
 };

package/styles/index.d.ts

@@ -2,5 +2,6 @@ export { default as defaultTheme } from "./theme";
 export * from "./helpers";
 export * from "./global";
 export * from "./StyleProvider";
+export { InvertTheme } from "./InvertTheme";
 export type { ThemeNames, ColorPalette } from "@ledgerhq/ui-shared";
 export { palettes } from "@ledgerhq/ui-shared";

package/styles/index.js

@@ -2,4 +2,5 @@ export { default as defaultTheme } from "./theme";
 export * from "./helpers";
 export * from "./global";
 export * from "./StyleProvider";
+export { InvertTheme } from "./InvertTheme";
 export { palettes } from "@ledgerhq/ui-shared";

package/styles/theme.d.ts

@@ -45,7 +45,7 @@ export declare const fontFamilies: {
         };
     };
 };
-declare const transition: (properties?: string[]) => FlattenSimpleInterpolation;
+declare const transition: (properties?: string[], duration?: string, easing?: string) => FlattenSimpleInterpolation;
 declare const animations: {
     fadeIn: () => FlattenSimpleInterpolation;
     fadeOut: () => FlattenSimpleInterpolation;

package/styles/theme.js

@@ -76,14 +76,14 @@ export const fontFamilies = {
         },
     },
 };
-const animationLength = "0.33s";
+const animationDuration = "0.33s";
 const easings = {
     outQuadratic: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
 };
-const transition = (properties = ["all"]) => css `
+const transition = (properties = ["all"], duration = animationDuration, easing = easings.outQuadratic) => css `
   transition-property: ${properties.join(",")};
-  transition-duration: ${animationLength};
-  transition-timing-function: ${easings.outQuadratic};
+  transition-duration: ${duration};
+  transition-timing-function: ${easing};
 `;
 const fadeIn = keyframes `
     0% {
@@ -123,16 +123,16 @@ const fadeInUp = keyframes `
   `;
 const animations = {
     fadeIn: () => css `
-      ${fadeIn} ${animationLength} ${easings.outQuadratic} forwards
+      ${fadeIn} ${animationDuration} ${easings.outQuadratic} forwards
     `,
     fadeOut: () => css `
-      ${fadeOut} ${animationLength} ${easings.outQuadratic} forwards
+      ${fadeOut} ${animationDuration} ${easings.outQuadratic} forwards
     `,
     fadeInGrowX: () => css `
       ${fadeInGrowX} 0.6s ${easings.outQuadratic} forwards
     `,
     fadeInUp: () => css `
-      ${fadeInUp} ${animationLength} ${easings.outQuadratic} forwards
+      ${fadeInUp} ${animationDuration} ${easings.outQuadratic} forwards
     `,
 };
 const overflow = {

package/components/loaders/InfiniteLoader/image.d.ts

@@ -1,2 +0,0 @@
-declare const _default: "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";
-export default _default;

package/components/loaders/InfiniteLoader/image.js

@@ -1 +0,0 @@
-export default "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";