@ledgerhq/react-ui 0.6.0 → 0.7.0

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/layout/Drawer/index.d.ts

@@ -1,4 +1,8 @@
 import React from "react";
+export declare enum Direction {
+    Left = "left",
+    Right = "right"
+}
 export interface DrawerProps {
     isOpen: boolean;
     children: React.ReactNode;
@@ -11,6 +15,8 @@ export interface DrawerProps {
     onBack?: () => void;
     setTransitionsEnabled?: (arg0: boolean) => void;
     hideNavigation?: boolean;
+    menuPortalTarget?: Element | null;
+    direction?: Direction;
 }
-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,6 +19,11 @@ 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%;
@@ -34,11 +39,9 @@ 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,7 +50,7 @@ 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;
@@ -75,7 +78,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, ignoreBackdropClick = false, hideNavigation = true, direction = Direction.Left, }, ref) => {
     const disableChildAnimations = useCallback(() => setTransitionsEnabled(false), [setTransitionsEnabled]);
     const enableChildAnimations = useCallback(() => setTransitionsEnabled(true), [setTransitionsEnabled]);
     const handleBackdropClick = useCallback(() => {
@@ -87,9 +90,9 @@ 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,
                             !hideNavigation && (React.createElement(React.Fragment, null, onBack != null ? (React.createElement(Button, { onClick: onBack },
@@ -102,12 +105,17 @@ const DrawerContent = ({ isOpen, title, children, footer, big, onClose, backgrou
                         footer && (React.createElement(React.Fragment, null,
                             React.createElement(Divider, { variant: "light" }),
                             React.createElement(Footer, null, 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);
+    }
 };
-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);
-};
-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/navigation/FlowStepper/index.d.ts

@@ -0,0 +1,76 @@
+import React from "react";
+import { FlexBoxProps as FlexProps } from "../../layout/Flex";
+export declare type StepProps = {
+    /**
+     * The label of the step.
+     */
+    label: string;
+    /**
+     * A specific index, can be used to explicitely order steps.
+     */
+    index?: number;
+    /**
+     * 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;
+}
+export interface Props<ExtraProps> {
+    /**
+     * The index of the active step.
+     */
+    activeIndex: number;
+    /**
+     * An optional header displayed above the stepper.
+     */
+    header?: (props: InnerProps & ExtraProps) => React.ReactNode;
+    /**
+     * An optional footer displayed below the body.
+     */
+    footer?: (props: InnerProps & ExtraProps) => React.ReactNode;
+    /**
+     * 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?: FlexProps;
+    /**
+     * Extra props that are passed to the stepper `Flex` wrapper.
+     */
+    extraStepperContainerProps?: FlexProps;
+    /**
+     * Custom rendering function to wrap children.
+     */
+    renderChildren?: (args: {
+        children: React.ReactNode;
+    }) => React.ReactNode;
+    /**
+    /**
+     * A list of children representing each step of the flow.
+     */
+    children: React.ReactElement<StepProps> | React.ReactElement<StepProps>[];
+}
+declare function FlowStepper<ExtraProps>({ activeIndex, header, footer, extraProps, extraContainerProps, extraStepperProps, extraStepperContainerProps, renderChildren, children, }: Props<ExtraProps>): JSX.Element;
+declare namespace FlowStepper {
+    var Step: ({ children }: StepProps) => JSX.Element;
+}
+export default FlowStepper;

package/components/navigation/FlowStepper/index.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { isElement } from "react-is";
+import Flex from "../../layout/Flex";
+import { Stepper } from "..";
+function FlowStepper({ activeIndex, header, footer, extraProps, extraContainerProps, extraStepperProps, extraStepperContainerProps, renderChildren, children, }) {
+    const { steps, innerContents } = 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;
+        if (label && !hidden) {
+            acc.steps[index] = label;
+        }
+        if (index === activeIndex) {
+            acc.innerContents = child;
+        }
+        return acc;
+    }, {
+        steps: [],
+        innerContents: null,
+    });
+    return (React.createElement(Flex, Object.assign({ flex: 1, flexDirection: "column" }, extraContainerProps),
+        header &&
+            header(Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength: steps.length })),
+        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({ children: innerContents }) : innerContents),
+        footer &&
+            footer(Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength: steps.length }))));
+}
+function Step({ children }) {
+    return React.createElement(React.Fragment, null, children);
+}
+FlowStepper.Step = Step;
+export default FlowStepper;

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,20 @@
 import React from "react";
 import { BorderProps, ColorProps, SpaceProps } from "styled-system";
+/**
+ * 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 {
     /**
      * 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 +23,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 +60,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.0",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",