@ledgerhq/react-ui 0.6.0 → 0.7.3

package/components/asorted/Divider/index.d.ts

@@ -1,4 +1,4 @@
-declare type Props = {
+export declare type Props = {
     variant: "default" | "light";
 };
 declare const _default: ({ variant }: Props) => JSX.Element;

package/components/asorted/Icon/BoxedIcon.js

@@ -15,6 +15,9 @@ import Flex from "../../layout/Flex";
 export const DEFAULT_BOX_SIZE = 40;
 export const DEFAULT_ICON_SIZE = 16;
 export const DEFAULT_BADGE_SIZE = 20;
+function getClipRectangleSize(badgeSize) {
+    return (3 / 4) * badgeSize;
+}
 const getTopRightSquareClippedPolygon = (boxSize, rectangleSize) => {
     // clipping path that hides top right square of size `${rectangleSize}px`
     const diff = boxSize - rectangleSize;
@@ -32,7 +35,8 @@ const IconBoxBackground = styled(Flex) `
   height: ${(p) => p.size}px;
   width: ${(p) => p.size}px;
   ${(p) => {
-    return p.hasBadge && `clip-path: ${getTopRightSquareClippedPolygon(p.size, 15)};`;
+    return (p.hasBadge &&
+        `clip-path: ${getTopRightSquareClippedPolygon(p.size, getClipRectangleSize(p.badgeSize))};`);
 }};
   border-radius: ${(p) => p.theme.radii[2]}px;
 `;
@@ -45,7 +49,7 @@ const BadgeContainer = styled.div `
 export const IconBox = ({ Badge, size = DEFAULT_BOX_SIZE, children, borderColor = "neutral.c40", badgeColor, badgeSize = DEFAULT_BADGE_SIZE, }) => {
     const hasBadge = !!Badge;
     return (React.createElement(Container, { size: size },
-        React.createElement(IconBoxBackground, { size: size, hasBadge: hasBadge, border: "1px solid", borderColor: borderColor }),
+        React.createElement(IconBoxBackground, { size: size, badgeSize: badgeSize, hasBadge: hasBadge, border: "1px solid", borderColor: borderColor }),
         children,
         hasBadge && (React.createElement(BadgeContainer, { badgeSize: badgeSize },
             React.createElement(Badge, { size: badgeSize, color: badgeColor })))));

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

@@ -15,6 +15,7 @@ interface BaseProps extends BaseStyledProps, BordersProps {
     disabled?: boolean;
 }
 export interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {
+    iconName?: string;
     Icon?: React.ComponentType<{
         size: number;
         color?: string;
@@ -30,11 +31,11 @@ export declare const Base: import("styled-components").StyledComponent<"button",
     fontSize: number;
 } & BaseProps, "fontFamily" | "fontSize">;
 declare const ButtonWithRef: {
-    ({ Icon, iconPosition, iconSize, children, onClick, ...props }: ButtonProps, ref?: React.ForwardedRef<HTMLButtonElement> | undefined): React.ReactElement;
+    ({ Icon, iconPosition, iconSize, children, onClick, iconName, ...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>>;
+    }, "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>>;
 };
 export declare type ButtonExpandProps = React.PropsWithChildren<ButtonProps & {
     onToggle?: (arg0: boolean) => void;

package/components/cta/Button/index.js

@@ -9,7 +9,7 @@ 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";
@@ -17,6 +17,7 @@ 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;`}
@@ -27,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: `
@@ -63,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: `
@@ -83,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: `
@@ -103,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};
@@ -156,6 +157,9 @@ export const Base = baseStyled.button.attrs((p) => {
   &:active {
     box-shadow: 0 0 0 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};
   }
+  &:focus, &:hover {
+    box-shadow: 0 0 0 2px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};
+  }
 
   ${(p) => {
     var _a;
@@ -194,11 +198,13 @@ export const Base = baseStyled.button.attrs((p) => {
 const ContentContainer = styled.div ``;
 const Button = (_a, ref) => {
     var _b;
-    var { Icon, iconPosition = "right", iconSize = 16, children, onClick } = _a, props = __rest(_a, ["Icon", "iconPosition", "iconSize", "children", "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 ButtonWithRef = React.forwardRef(Button);

package/components/form/Dropdown/index.js

@@ -14,23 +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, 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,42 @@
+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;
+    /**
+     * Vertical alignment of the dropdown relative to the dropdown button.
+     * Will automatically adjust to the document to avoid overflowing.
+     * Defaults to "bottom".
+     */
+    placement?: Placement;
+    /**
+     * Controls whether the dropdown will flip its side to keep it in view
+     * in case there isn't enough space available. See https://floating-ui.com/docs/flip
+     * Defaults to false.
+     */
+    flipDisabled?: boolean;
+};
+declare const DropdownGeneric: ({ label, closeOnClickOutside, closeOnClickInside, disabled, placement, flipDisabled, children, }: Props) => JSX.Element;
+export default DropdownGeneric;

package/components/form/DropdownGeneric/index.js

@@ -0,0 +1,115 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useFloating, getScrollParents, shift, size, 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-left: ${(p) => p.theme.space[3]}px;
+  }
+`;
+const DropdownContainer = styled(Flex).attrs(({ theme }) => {
+    const isLight = theme.colors.type === "light";
+    return {
+        zIndex: 1,
+        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,
+    };
+}) `
+  overflow-y: auto;
+  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", flipDisabled = false, children, }) => {
+    const divRef = useRef(null);
+    const [maxHeight, setMaxHeight] = useState();
+    const [maxWidth, setMaxWidth] = useState();
+    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(),
+            ...(flipDisabled ? [] : [flip()]),
+            size({
+                padding: 6,
+                apply({ height, width }) {
+                    setMaxHeight(height);
+                    setMaxWidth(width);
+                },
+            }),
+        ],
+    });
+    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);
+            });
+        };
+    }, [flipDisabled, 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(Box, { 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: {
+                position: strategy,
+                top: y !== null && y !== void 0 ? y : "",
+                left: x !== null && x !== void 0 ? x : "",
+                maxHeight: maxHeight ? `${maxHeight}px` : "",
+                maxWidth: maxWidth ? "" : "",
+                // maxWidth: maxWidth ? `${maxWidth}px` : "", /* TODO: fix this */
+            }, onClick: handleClickInside }, children))));
+};
+export default DropdownGeneric;

package/components/form/SelectInput/MenuList.js

@@ -1,7 +1,8 @@
 import React from "react";
 import { components } from "react-select";
 export function getStyles(theme) {
-    return (provided) => (Object.assign(Object.assign({}, provided), { display: "flex", flexDirection: "column", gap: theme.space[2], padding: theme.space[3], border: `1px solid ${theme.colors.neutral.c20}`, borderRadius: "8px", boxShadow: `0px 2px 12px rgba(0, 0, 0, 0.04)`, background: theme.colors.neutral.c00, color: theme.colors.neutral.c80 }));
+    const isLight = theme.colors.type === "light";
+    return (provided) => (Object.assign(Object.assign({}, provided), { display: "flex", flexDirection: "column", gap: theme.space[2], padding: theme.space[3], border: `1px solid ${theme.colors.neutral[isLight ? "c20" : "c30"]}`, borderRadius: "8px", boxShadow: `0px 6px 12px rgba(0, 0, 0, ${isLight ? 0.04 : 0.08})`, background: theme.colors.neutral[isLight ? "c00" : "c20"], color: theme.colors.neutral.c80 }));
 }
 export function MenuList(props) {
     return React.createElement(components.MenuList, Object.assign({}, props), props.children);

package/components/form/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Input } from "./BaseInput";
 export { default as Checkbox } from "./Checkbox";
 export { default as Dropdown } from "./Dropdown";
+export { default as DropdownGeneric } from "./DropdownGeneric";
 export { default as LegendInput } from "./LegendInput";
 export { default as NumberInput } from "./NumberInput";
 export { default as QrCodeInput } from "./QrCodeInput";

package/components/form/index.js

@@ -1,6 +1,7 @@
 export { default as Input } from "./BaseInput";
 export { default as Checkbox } from "./Checkbox";
 export { default as Dropdown } from "./Dropdown";
+export { default as DropdownGeneric } from "./DropdownGeneric";
 export { default as LegendInput } from "./LegendInput";
 export { default as NumberInput } from "./NumberInput";
 export { default as QrCodeInput } from "./QrCodeInput";

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

@@ -1,4 +1,10 @@
 import React from "react";
+import { FlexBoxProps } from "../Flex";
+import { Props as DividerProps } from "../../asorted/Divider";
+export declare enum Direction {
+    Left = "left",
+    Right = "right"
+}
 export interface DrawerProps {
     isOpen: boolean;
     children: React.ReactNode;
@@ -11,6 +17,12 @@ export interface DrawerProps {
     onBack?: () => void;
     setTransitionsEnabled?: (arg0: boolean) => void;
     hideNavigation?: boolean;
+    menuPortalTarget?: Element | null;
+    direction?: Direction;
+    extraContainerProps?: Partial<FlexBoxProps>;
+    extraHeaderProps?: Partial<FlexBoxProps>;
+    extraFooterProps?: Partial<FlexBoxProps>;
+    extraFooterDividerProps?: Partial<DividerProps>;
 }
-declare const Drawer: ({ children, ...sideProps }: DrawerProps) => React.ReactElement;
-export default Drawer;
+declare const _default: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/components/layout/Drawer/index.js

@@ -19,26 +19,19 @@ import ArrowLeft from "@ledgerhq/icons-ui/react/ArrowLeftRegular";
 import TransitionSlide from "../../transitions/TransitionSlide";
 import TransitionInOut from "../../transitions/TransitionInOut";
 import Text from "../../asorted/Text";
+export var Direction;
+(function (Direction) {
+    Direction["Left"] = "left";
+    Direction["Right"] = "right";
+})(Direction || (Direction = {}));
 const Container = styled(FlexBox) `
   width: 100%;
   height: 100%;
   flex-direction: column;
 `;
-const Header = styled(FlexBox) `
-  justify-content: space-between;
-  align-items: center;
-  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 `
+const Wrapper = styled(FlexBox) `
   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;
   justify-content: space-between;
@@ -47,21 +40,15 @@ const Wrapper = styled.div `
 const Overlay = styled.div `
   display: flex;
   position: fixed;
-  justify-content: flex-end;
+  justify-content: ${(p) => (p.direction === Direction.Left ? "flex-end" : "flex-start")};
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   z-index: 999;
-  background-color: ${(p) => p.theme.colors.neutral.c100a07};
+  background-color: ${(p) => p.theme.colors.constant.overlay};
 `;
-const ScrollWrapper = styled.div `
-  overflow: scroll;
-  position: relative;
-  padding: ${(p) => p.theme.space[12]}px;
-  padding-top: 0px;
-  flex: 1;
-
+const ScrollWrapper = styled(FlexBox) `
   &::-webkit-scrollbar {
     display: none;
   }
@@ -75,7 +62,7 @@ const Button = styled.button `
   cursor: pointer;
   color: ${(p) => p.theme.colors.neutral.c100};
 `;
-const DrawerContent = ({ isOpen, title, children, footer, big, onClose, backgroundColor, setTransitionsEnabled = () => 0, onBack, ignoreBackdropClick = false, hideNavigation = true, }) => {
+const DrawerContent = React.forwardRef(({ isOpen, title, children, footer, big, onClose, backgroundColor, setTransitionsEnabled = () => 0, onBack, extraContainerProps, extraHeaderProps, extraFooterProps, extraFooterDividerProps, ignoreBackdropClick = false, hideNavigation = true, direction = Direction.Left, }, ref) => {
     const disableChildAnimations = useCallback(() => setTransitionsEnabled(false), [setTransitionsEnabled]);
     const enableChildAnimations = useCallback(() => setTransitionsEnabled(true), [setTransitionsEnabled]);
     const handleBackdropClick = useCallback(() => {
@@ -87,27 +74,32 @@ const DrawerContent = ({ isOpen, title, children, footer, big, onClose, backgrou
         e.stopPropagation();
     }, []);
     return (React.createElement(TransitionInOut, { in: isOpen, appear: true, mountOnEnter: true, unmountOnExit: true, onEntering: disableChildAnimations, onEntered: enableChildAnimations, onExiting: disableChildAnimations },
-        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, onClick: stopClickPropagation, backgroundColor: backgroundColor },
+        React.createElement(Overlay, { direction: direction, onClick: handleBackdropClick, ref: ref },
+            React.createElement(TransitionSlide, { in: isOpen, direction: direction, fixed: true, reverseExit: true, appear: true, mountOnEnter: true, unmountOnExit: true },
+                React.createElement(Wrapper, { big: big, onClick: stopClickPropagation, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : "neutral.c00" },
                     React.createElement(Container, null,
-                        React.createElement(Header, null,
+                        React.createElement(FlexBox, Object.assign({ justifyContent: "space-between", alignItems: "center", p: 12, pb: 10 }, extraHeaderProps),
                             !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: "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),
+                        React.createElement(ScrollWrapper, Object.assign({ flexDirection: "column", alignItems: "stretch", overflow: "scroll", position: "relative", p: 12, pt: 0, flex: 1 }, extraContainerProps), 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"]);
-    const $root = React.useMemo(() => document.querySelector("#ll-side-root"), []);
-    if ($root === null)
-        throw new Error("side root cannot be found");
-    return ReactDOM.createPortal(React.createElement(DrawerContent, Object.assign({}, sideProps), children), $root);
+                            React.createElement(Divider, Object.assign({ variant: "light" }, extraFooterDividerProps)),
+                            React.createElement(FlexBox, Object.assign({ alignItems: "center", py: 8, px: 12 }, extraFooterProps), footer)))))))));
+});
+const Drawer = (_a, ref) => {
+    var { children, menuPortalTarget } = _a, sideProps = __rest(_a, ["children", "menuPortalTarget"]);
+    const $root = React.useMemo(() => menuPortalTarget === undefined && typeof document !== undefined
+        ? document.querySelector("body")
+        : menuPortalTarget, [menuPortalTarget]);
+    if (!$root) {
+        return (React.createElement(DrawerContent, Object.assign({ ref: ref }, sideProps), children));
+    }
+    else {
+        return ReactDOM.createPortal(React.createElement(DrawerContent, Object.assign({ ref: ref }, sideProps), children), $root);
+    }
 };
-export default Drawer;
+export default React.forwardRef(Drawer);

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

@@ -3,6 +3,7 @@ import { BaseStyledProps } from "../../styled";
 export interface PopinProps extends BaseStyledProps {
     isOpen: boolean;
     children: React.ReactNode;
+    menuPortalTarget?: Element | null;
 }
 export declare type PopinHeaderProps = BaseStyledProps & {
     onClose?: () => void;
@@ -10,7 +11,7 @@ export declare type PopinHeaderProps = BaseStyledProps & {
     children: React.ReactNode;
 };
 declare const PopinWrapper: {
-    ({ children, ...popinProps }: PopinProps): React.ReactElement;
+    ({ children, menuPortalTarget, ...popinProps }: PopinProps): React.ReactElement;
     Header: ({ children, onClose, onBack, ...props }: PopinHeaderProps) => JSX.Element;
     Body: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").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;

package/components/layout/Popin/index.js

@@ -82,11 +82,16 @@ const Popin = (_a) => {
                 React.createElement(Wrapper, Object.assign({ width: width, height: height }, props), children)))));
 };
 const PopinWrapper = (_a) => {
-    var { children } = _a, popinProps = __rest(_a, ["children"]);
-    const $root = React.useMemo(() => document.querySelector("#ll-popin-root"), []);
-    if ($root === null)
-        throw new Error("popin root cannot be found");
-    return ReactDOM.createPortal(React.createElement(Popin, Object.assign({}, popinProps), children), $root);
+    var { children, menuPortalTarget } = _a, popinProps = __rest(_a, ["children", "menuPortalTarget"]);
+    const $root = React.useMemo(() => menuPortalTarget === undefined && typeof document !== undefined
+        ? document.querySelector("body")
+        : menuPortalTarget, [menuPortalTarget]);
+    if (!$root) {
+        return React.createElement(Popin, Object.assign({}, popinProps), children);
+    }
+    else {
+        return ReactDOM.createPortal(React.createElement(Popin, Object.assign({}, popinProps), children), $root);
+    }
 };
 PopinWrapper.Header = PopinHeader;
 PopinWrapper.Body = PopinBody;

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

@@ -1,6 +1,9 @@
 import React from "react";
+import { TextProps } from "../../asorted/Text";
 import { FlexBoxProps } from "../../layout/Flex";
-export declare type Props = React.PropsWithChildren<FlexBoxProps>;
-declare function Log({ children, ...props }: Props): JSX.Element;
+export declare type Props = React.PropsWithChildren<FlexBoxProps & {
+    extraTextProps?: TextProps;
+}>;
+declare function Log({ children, extraTextProps, ...props }: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Log>;
 export default _default;

package/components/message/Log/index.js

@@ -19,7 +19,6 @@ const Container = styled(FlexBox) `
   flex-wrap: wrap;
   align-items: stretch;
   min-height: ${(p) => p.theme.space[12]}px;
-  color: ${(p) => p.theme.colors.neutral.c100};
 `;
 const TextContainer = styled(FlexBox).attrs(() => ({
     flex: "1",
@@ -31,11 +30,11 @@ const TextContainer = styled(FlexBox).attrs(() => ({
   }
 `;
 function Log(_a) {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    return (React.createElement(Container, Object.assign({}, props),
+    var { children, extraTextProps } = _a, props = __rest(_a, ["children", "extraTextProps"]);
+    return (React.createElement(Container, Object.assign({ color: "neutral.c100" }, props),
         React.createElement(BracketLeft, null),
         React.createElement(TextContainer, { flex: "1", alignItems: "center", justifyContent: "center" },
-            React.createElement(Text, { variant: "h3", textTransform: "uppercase", textAlign: "center" }, children)),
+            React.createElement(Text, Object.assign({ variant: "h3", textTransform: "uppercase", textAlign: "center", color: "inherit" }, extraTextProps), children)),
         React.createElement(BracketRight, null)));
 }
 export default memo(Log);

package/components/navigation/FlowStepper/index.d.ts

@@ -0,0 +1,136 @@
+import React from "react";
+import { Props as StepperProps } from "../progress/Stepper";
+import { FlexBoxProps as FlexProps } from "../../layout/Flex";
+export declare type StepProps = {
+    /**
+     * A specific index, can be used to explicitely order steps.
+     */
+    index?: number;
+    /**
+     * Custom header for this step.
+     */
+    header?: React.ReactNode;
+    /**
+     * Custom footer for this step.
+     */
+    footer?: React.ReactNode;
+    /**
+     * The label of the step.
+     */
+    label: string;
+    /**
+     * Hides the step from the progress stepper.
+     */
+    hidden?: boolean;
+    /**
+     * The step contents.
+     */
+    children: React.ReactNode;
+};
+interface InnerProps {
+    /**
+     * The active index.
+     */
+    activeIndex: number;
+    /**
+     * The total number of steps.
+     */
+    stepsLength: number;
+}
+declare type StepChild = React.ReactElement<StepProps>;
+declare type SectionRenderFunc<ExtraProps> = (props: InnerProps & ExtraProps) => React.ReactNode;
+declare type SectionStepRenderFunc<ExtraProps> = (args: InnerProps & ExtraProps & {
+    children: React.ReactNode;
+}) => React.ReactNode;
+export interface Props<ExtraProps> {
+    /**
+     * The index of the active step.
+     */
+    activeIndex: number;
+    /**
+     * An optional generic header displayed above the stepper.
+     */
+    header?: SectionRenderFunc<ExtraProps>;
+    /**
+     * Custom rendering function to wrap the header (only used if the `header` is defined
+     * on the child for the current step.)
+     */
+    renderStepHeader?: SectionStepRenderFunc<ExtraProps>;
+    /**
+     * An optional generic footer displayed below the body.
+     */
+    footer?: SectionRenderFunc<ExtraProps>;
+    /**
+     * Custom rendering function to wrap the footer (only used if the `footer` is defined
+     * on the child for the current step.)
+     */
+    renderStepFooter?: SectionStepRenderFunc<ExtraProps>;
+    /**
+     * Extra props that are passed to the header and footer render functions.
+     */
+    extraProps?: ExtraProps;
+    /**
+     * Extra props that are passed to the container `Flex` element.
+     */
+    extraContainerProps?: FlexProps;
+    /**
+     * Extra props that are passed to the stepper component.
+     */
+    extraStepperProps?: Partial<StepperProps>;
+    /**
+     * Extra props that are passed to the stepper `Flex` wrapper.
+     */
+    extraStepperContainerProps?: FlexProps;
+    /**
+     * Custom rendering function to wrap children.
+     */
+    renderChildren?: (args: InnerProps & ExtraProps & {
+        children: React.ReactNode;
+    }) => React.ReactNode;
+    /**
+     * A list of children representing each step of the flow.
+     * Each child can have a prop `stepHeader` and/or `stepFooter` that will
+     * associate a custom header/footer to this particular step.
+     * The custom header/footer can be wrapped using the prop renderStepHeader/renderStepFooter.
+     */
+    children: StepChild | StepChild[];
+}
+declare function FlowStepper<ExtraProps>({ activeIndex, header, renderStepHeader, footer, renderStepFooter, extraProps, extraContainerProps, extraStepperProps, extraStepperContainerProps, renderChildren, children, }: Props<ExtraProps>): JSX.Element;
+declare namespace FlowStepper {
+    var Step: ({ children }: StepProps) => JSX.Element;
+    var Indexed: typeof FlowStepperIndexed;
+}
+export default FlowStepper;
+export declare type IndexedStepProps = StepProps & {
+    /**
+     * String to identify the step. Must be different from sibling steps's `key` prop.
+     */
+    itemKey: string;
+};
+declare type IndexedStepperChild = React.ReactElement<IndexedStepProps>;
+export declare type IndexedProps<ExtraProps> = Omit<Props<ExtraProps>, "activeIndex" | "children"> & {
+    /**
+     * The key of the active step
+     */
+    activeKey: string;
+    /**
+     * A list of children representing each step of the flow.
+     */
+    children: IndexedStepperChild | IndexedStepperChild[];
+};
+/**
+ * This is a FlowStepper where each child must have an `itemKey: string` prop
+ * and the active step is defined by the `activeKey: string` prop.
+ *
+ * This allows for usages with a lot of steps where dealing with indices could be
+ * painful and error prone (for instance inserting/removing a step somewhere would shift
+ * the indices of the following steps and navigation would be impacted).
+ *
+ * By using string identifiers (`itemKey`) for each step, it's more "human readable"
+ * and less error prone to setup a navigation logic between steps.
+ */
+declare function FlowStepperIndexed<ExtraProps>(props: IndexedProps<ExtraProps>): JSX.Element;
+declare namespace FlowStepperIndexed {
+    var Step: typeof IndexedStep;
+}
+declare function IndexedStep({ children }: IndexedStepProps): JSX.Element;

package/components/navigation/FlowStepper/index.js

@@ -0,0 +1,84 @@
+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 { isElement } from "react-is";
+import Flex from "../../layout/Flex";
+import { Stepper } from "..";
+function FlowStepper({ activeIndex, header, renderStepHeader, footer, renderStepFooter, extraProps, extraContainerProps, extraStepperProps, extraStepperContainerProps, renderChildren, children, }) {
+    const { steps, innerContents, stepFooter, stepHeader } = React.Children.toArray(children).reduce((acc, child, idx) => {
+        var _a;
+        const index = (_a = (isElement(child) && child.props.index)) !== null && _a !== void 0 ? _a : idx;
+        const label = isElement(child) && child.props.label;
+        const hidden = isElement(child) && child.props.hidden;
+        const stepHeader = isElement(child) && child.props.header;
+        const stepFooter = isElement(child) && child.props.footer;
+        if (label && !hidden) {
+            acc.steps[index] = label;
+        }
+        if (index === activeIndex) {
+            acc.innerContents = child;
+            acc.stepFooter = stepFooter;
+            acc.stepHeader = stepHeader;
+        }
+        return acc;
+    }, {
+        steps: [],
+        innerContents: null,
+        stepHeader: null,
+        stepFooter: null,
+    });
+    const renderArgs = Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength: steps.length });
+    function getSectionContents(renderFunc, stepSection, renderStepFunc) {
+        return stepSection
+            ? renderStepFunc
+                ? renderStepFunc(Object.assign(Object.assign({}, renderArgs), { children: stepSection }))
+                : stepSection
+            : renderFunc && renderFunc(renderArgs);
+    }
+    return (React.createElement(Flex, Object.assign({ flex: 1, flexDirection: "column" }, extraContainerProps),
+        getSectionContents(header, stepHeader, renderStepHeader),
+        React.createElement(Flex, Object.assign({ my: 8, justifyContent: "center" }, extraStepperContainerProps),
+            React.createElement(Stepper, Object.assign({ activeIndex: activeIndex, steps: steps, flex: 1 }, extraStepperProps))),
+        React.createElement(Flex, { flex: 1, flexDirection: "column", position: "relative" }, renderChildren
+            ? renderChildren(Object.assign(Object.assign({}, renderArgs), { children: innerContents }))
+            : innerContents),
+        getSectionContents(footer, stepFooter, renderStepFooter)));
+}
+function Step({ children }) {
+    return React.createElement(React.Fragment, null, children);
+}
+FlowStepper.Step = Step;
+export default FlowStepper;
+/**
+ * This is a FlowStepper where each child must have an `itemKey: string` prop
+ * and the active step is defined by the `activeKey: string` prop.
+ *
+ * This allows for usages with a lot of steps where dealing with indices could be
+ * painful and error prone (for instance inserting/removing a step somewhere would shift
+ * the indices of the following steps and navigation would be impacted).
+ *
+ * By using string identifiers (`itemKey`) for each step, it's more "human readable"
+ * and less error prone to setup a navigation logic between steps.
+ */
+function FlowStepperIndexed(props) {
+    const { activeKey, children } = props, otherProps = __rest(props, ["activeKey", "children"]);
+    const activeIndex = React.Children.toArray(children).findIndex((child) => {
+        const res = isElement(child) && child.props.itemKey === activeKey;
+        return res;
+    });
+    return (React.createElement(FlowStepper, Object.assign({}, otherProps, { activeIndex: activeIndex }), children));
+}
+function IndexedStep({ children }) {
+    return React.createElement(React.Fragment, null, children);
+}
+FlowStepperIndexed.Step = IndexedStep;
+FlowStepper.Indexed = FlowStepperIndexed;

package/components/navigation/index.d.ts

@@ -3,3 +3,4 @@ export { default as Breadcrumb } from "./Breadcrumb";
 export { default as Header } from "./Header";
 export * from "./progress";
 export { default as SideBar } from "./sideBar/SideBar";
+export { default as FlowStepper } from "./FlowStepper";

package/components/navigation/index.js

@@ -3,3 +3,4 @@ export { default as Breadcrumb } from "./Breadcrumb";
 export { default as Header } from "./Header";
 export * from "./progress";
 export { default as SideBar } from "./sideBar/SideBar";
+export { default as FlowStepper } from "./FlowStepper";

package/components/navigation/progress/Stepper/index.d.ts

@@ -1,10 +1,21 @@
 import React from "react";
 import { BorderProps, ColorProps, SpaceProps } from "styled-system";
-export interface Props {
+import { FlexBoxProps } from "../../../layout/Flex";
+/**
+ * The state of a progress bar step.
+ */
+export declare type StepState = "pending" | "current" | "completed" | "errored" | "disabled";
+declare type LabelType = string | React.ComponentType<{
+    state: StepState;
+}>;
+export interface Props extends FlexBoxProps {
     /**
      * An array of labels that will determine the progress bar steps.
+     *  A label is either a string or a component that will be rendered with the
+     *  prop `state: "pending" | "current" | "completed" | "errored"`.
+     *  A styled StepText component is exported to allow easy styling of such a custom label.
      */
-    steps: string[];
+    steps: LabelType[];
     /**
      * Index of the active step, starting at zero and defaulting to 0 if omitted.
      */
@@ -13,20 +24,22 @@ export interface Props {
      * If true the current step is considered as a failure.
      */
     errored?: boolean;
+    /**
+     * Steps with indexes contained inside the array will be shown as disabled.
+     */
+    disabledIndexes?: number[];
 }
-/**
- * The state of a progress bar step.
- */
-declare type StepState = "pending" | "current" | "completed" | "errored";
 export declare type StepProps = {
     /**
      * State of the step.
      */
     state: StepState;
     /**
-     * The label to display.
+     * The label to display. To display more than text, this can be a component that will be rendered with the
+     *  prop `state: "pending" | "current" | "completed" | "errored" | "disabled"`.
+     *  A styled StepText component is exported to allow easy styling of such a custom Label
      */
-    label: string;
+    label: LabelType;
     /**
      * If true, hides the left "separator" bar that bridges the gap between the wider separator and the item.
      */
@@ -48,9 +61,13 @@ export declare const Item: {
         backgroundColor: string;
     } & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "backgroundColor">;
     Completed: () => JSX.Element;
+    Disabled: () => JSX.Element;
     Errored: () => JSX.Element;
 };
+export declare const StepText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../../asorted/Text").TextProps & {
+    state: StepState;
+}, keyof import("../../../asorted/Text").TextProps>;
 export declare const Step: React.NamedExoticComponent<StepProps>;
-declare function ProgressSteps({ steps, activeIndex, errored }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof ProgressSteps>;
+declare function Stepper({ steps, activeIndex, errored, disabledIndexes, ...extraProps }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Stepper>;
 export default _default;

package/components/navigation/progress/Stepper/index.js

@@ -1,8 +1,18 @@
-import React, { memo } from "react";
+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, { memo, Fragment } from "react";
 import styled from "styled-components";
 import { border, color, space } from "styled-system";
-import CheckAlone from "@ledgerhq/icons-ui/react/CheckAloneMedium";
-import CloseMedium from "@ledgerhq/icons-ui/react/CloseMedium";
+import { Icons } from "../../../../index";
 import Text from "../../../asorted/Text";
 import Flex from "../../../layout/Flex";
 export const Item = {
@@ -39,15 +49,19 @@ export const Item = {
     border-radius: ${(p) => p.theme.space[2]}px;
     ${color}
   `,
-    Completed: () => React.createElement(CheckAlone, { size: 16 }),
-    Errored: () => React.createElement(CloseMedium, { size: 16 }),
+    Completed: () => React.createElement(Icons.CheckAloneMedium, { size: 16 }),
+    Disabled: () => React.createElement(Icons.CloseMedium, { size: 16 }),
+    Errored: () => React.createElement(Icons.CloseMedium, { size: 16 }),
 };
-const StepText = styled(Text) `
+export const StepText = styled(Text) `
   color: ${(p) => {
-    if (p.errored) {
+    if (p.state === "errored") {
         return p.theme.colors.error.c100;
     }
-    if (p.inactive) {
+    if (p.state === "disabled") {
+        return p.theme.colors.neutral.c50;
+    }
+    if (p.state === "pending") {
         return p.theme.colors.neutral.c70;
     }
     return p.theme.colors.neutral.c100;
@@ -74,19 +88,23 @@ const stepContentsByState = {
         React.createElement(Item.Completed, null))),
     errored: (React.createElement(Item.Container, { color: "error.c100", backgroundColor: "warning.c30", borderRadius: "8px" },
         React.createElement(Item.Errored, null))),
+    disabled: (React.createElement(Item.Container, { color: "neutral.c50" },
+        React.createElement(Item.Disabled, null))),
 };
-export const Step = memo(function Step({ state, label, hideLeftSeparator, nextState, }) {
+export const Step = memo(function Step({ state, label: Label, hideLeftSeparator, nextState, }) {
     const inactive = state === "pending";
-    const nextInactive = nextState === "pending";
-    const errored = state === "errored";
+    const nextInactive = state === "pending";
     return (React.createElement(Flex, { flexDirection: "column", alignItems: "center" },
         React.createElement(Item.Spacer, { mb: 5 },
             (!hideLeftSeparator && React.createElement(Separator.Item, { inactive: inactive, position: "left" })) || (React.createElement(Flex, { flex: "1" })),
             stepContentsByState[state],
             (nextState && React.createElement(Separator.Item, { inactive: nextInactive, position: "right" })) || (React.createElement(Flex, { flex: "1" }))),
-        React.createElement(StepText, { inactive: inactive, errored: errored, variant: "small" }, label)));
+        typeof Label === "string" ? (React.createElement(StepText, { state: state, variant: "small" }, Label)) : (React.createElement(Label, { state: state }))));
 });
-function getState(activeIndex, index, errored) {
+function getState(activeIndex, index, errored, disabled) {
+    if (disabled) {
+        return "disabled";
+    }
     if (activeIndex < index) {
         return "pending";
     }
@@ -95,13 +113,14 @@ function getState(activeIndex, index, errored) {
     }
     return "completed";
 }
-function ProgressSteps({ steps, activeIndex = 0, errored }) {
-    return (React.createElement(Flex, { flexWrap: "nowrap", justifyContent: "space-between" }, steps.map((step, idx) => {
-        const state = getState(activeIndex, idx, errored);
+function Stepper(_a) {
+    var { steps, activeIndex = 0, errored, disabledIndexes } = _a, extraProps = __rest(_a, ["steps", "activeIndex", "errored", "disabledIndexes"]);
+    return (React.createElement(Flex, Object.assign({ flexWrap: "nowrap", justifyContent: "space-between" }, extraProps), steps.map((step, idx) => {
+        const state = getState(activeIndex, idx, errored, disabledIndexes === null || disabledIndexes === void 0 ? void 0 : disabledIndexes.includes(idx));
         const nextState = idx < steps.length - 1 ? getState(activeIndex, idx + 1) : undefined;
-        return (React.createElement(React.Fragment, null,
+        return (React.createElement(Fragment, { key: idx },
             idx > 0 && React.createElement(Separator.Step, { inactive: state === "pending" }),
             React.createElement(Step, { label: step, state: state, nextState: nextState, hideLeftSeparator: idx === 0 })));
     })));
 }
-export default memo(ProgressSteps);
+export default memo(Stepper);

package/components/navigation/sideBar/SideBar/SideBar.js

@@ -11,24 +11,26 @@ const Nav = styled(Flex) `
   padding: ${(p) => `${p.theme.space[19]}px ${p.theme.space[5]}px 0`};
   row-gap: 1.5rem;
   height: 100vh;
-  max-width: 14.875rem;
+  width: 14.875rem;
   color: ${(props) => props.theme.colors.neutral.c100};
   border-right: 1px solid ${(props) => props.theme.colors.neutral.c40};
   background-color: ${(props) => props.theme.colors.background.main};
-  transition: max-width 200ms;
-  will-change: max-width;
+  transition: width 200ms;
+  will-change: width;
+  flex-shrink: 0;
+  z-index: ${(p) => p.theme.zIndexes[2]};
 
   &.nav-enter {
-    max-width: ${(p) => p.theme.space[19]}px;
+    width: ${(p) => p.theme.space[19]}px;
   }
   &.nav-enter-done {
-    max-width: 14.875rem;
+    width: 14.875rem;
   }
   &.nav-exit {
-    max-width: 14.875rem;
+    width: 14.875rem;
   }
   &.nav-exit-done {
-    max-width: ${(p) => `${p.theme.space[19]}px`};
+    width: ${(p) => `${p.theme.space[19]}px`};
   }
 `;
 const TransparentMouseZone = styled.div `

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ledgerhq/react-ui",
   "description": "Ledger Live - Desktop UI",
-  "version": "0.6.0",
+  "version": "0.7.3",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
@@ -27,8 +27,9 @@
     "index.js"
   ],
   "dependencies": {
-    "@ledgerhq/icons-ui": "^0.2.1",
-    "@ledgerhq/ui-shared": "^0.1.4",
+    "@floating-ui/react-dom": "^0.4.0",
+    "@ledgerhq/icons-ui": "^0.2.3",
+    "@ledgerhq/ui-shared": "^0.1.5",
     "@tippyjs/react": "^4.2.6",
     "@types/color": "^3.0.2",
     "@types/react": "~17.0.37",

package/styles/InvertTheme.d.ts

@@ -1,2 +1,5 @@
 import React from "react";
-export declare const InvertTheme: ({ children }: React.PropsWithChildren<unknown>) => React.ReactElement;
+export declare type Props = {
+    if?: boolean;
+};
+export declare const InvertTheme: ({ if: condition, children, }: React.PropsWithChildren<Props>) => React.ReactElement;

package/styles/InvertTheme.js

@@ -2,9 +2,9 @@ import React, { useMemo } from "react";
 import { ThemeProvider, useTheme } from "styled-components";
 import { defaultTheme } from ".";
 import { palettes } from "@ledgerhq/ui-shared";
-export const InvertTheme = ({ children }) => {
-    const { theme } = useTheme();
-    const revertTheme = theme === "light" ? "dark" : "light";
+export const InvertTheme = ({ if: condition, children, }) => {
+    const theme = useTheme();
+    const revertTheme = theme.theme === "light" ? "dark" : "light";
     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);
+    return React.createElement(ThemeProvider, { theme: condition ? newTheme : theme }, children);
 };