@ledgerhq/react-ui 0.7.0 → 0.7.1

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

package/components/form/DropdownGeneric/index.js

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

package/components/form/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,6 @@
 import React from "react";
+import { FlexBoxProps } from "../Flex";
+import { Props as DividerProps } from "../../asorted/Divider";
 export declare enum Direction {
     Left = "left",
     Right = "right"
@@ -17,6 +19,10 @@ export interface DrawerProps {
     hideNavigation?: boolean;
     menuPortalTarget?: Element | null;
     direction?: Direction;
+    extraContainerProps?: Partial<FlexBoxProps>;
+    extraHeaderProps?: Partial<FlexBoxProps>;
+    extraFooterProps?: Partial<FlexBoxProps>;
+    extraFooterDividerProps?: Partial<DividerProps>;
 }
 declare const _default: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/components/layout/Drawer/index.js

@@ -29,16 +29,6 @@ const Container = styled(FlexBox) `
   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(FlexBox) `
   height: 100%;
   width: ${(p) => p.big ? p.theme.sizes.drawer.side.big.width : p.theme.sizes.drawer.side.small.width}px;
@@ -56,15 +46,9 @@ const Overlay = styled.div `
   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;
   }
@@ -78,7 +62,7 @@ const Button = styled.button `
   cursor: pointer;
   color: ${(p) => p.theme.colors.neutral.c100};
 `;
-const DrawerContent = React.forwardRef(({ isOpen, title, children, footer, big, onClose, backgroundColor, setTransitionsEnabled = () => 0, onBack, ignoreBackdropClick = false, hideNavigation = true, direction = Direction.Left, }, ref) => {
+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(() => {
@@ -94,17 +78,17 @@ const DrawerContent = React.forwardRef(({ isOpen, title, children, footer, big,
             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)))))))));
+                            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"]);

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { Props as StepperProps } from "../progress/Stepper";
 import { FlexBoxProps as FlexProps } from "../../layout/Flex";
 export declare type StepProps = {
     /**
@@ -52,7 +53,7 @@ export interface Props<ExtraProps> {
     /**
      * Extra props that are passed to the stepper component.
      */
-    extraStepperProps?: FlexProps;
+    extraStepperProps?: Partial<StepperProps>;
     /**
      * Extra props that are passed to the stepper `Flex` wrapper.
      */

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { BorderProps, ColorProps, SpaceProps } from "styled-system";
+import { FlexBoxProps } from "../../../layout/Flex";
 /**
  * The state of a progress bar step.
  */
@@ -7,7 +8,7 @@ export declare type StepState = "pending" | "current" | "completed" | "errored"
 declare type LabelType = string | React.ComponentType<{
     state: StepState;
 }>;
-export interface Props {
+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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ledgerhq/react-ui",
   "description": "Ledger Live - Desktop UI",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "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.2",
+    "@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);
 };