@ledgerhq/react-ui 0.4.0 → 0.7.1

package/components/layout/Drawer/index.js

@@ -13,29 +13,25 @@ import React, { useCallback } from "react";
 import ReactDOM from "react-dom";
 import styled from "styled-components";
 import FlexBox from "../Flex";
-import Close from "@ledgerhq/icons-ui/react/CloseRegular";
+import Divider from "../../asorted/Divider";
+import Close from "@ledgerhq/icons-ui/react/CloseMedium";
 import ArrowLeft from "@ledgerhq/icons-ui/react/ArrowLeftRegular";
 import TransitionSlide from "../../transitions/TransitionSlide";
 import TransitionInOut from "../../transitions/TransitionInOut";
 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;
-  background-color: ${(p) => p.theme.colors.neutral.c00};
-  padding: ${(p) => p.theme.space[6]}px ${(p) => p.theme.space[12]}px;
 `;
-const Header = styled(FlexBox) `
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  min-height: ${(p) => p.theme.space[15]}px;
-`;
-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;
-  display: flex;
   flex-direction: column;
   align-items: stretch;
   justify-content: space-between;
@@ -44,19 +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;
-  flex: 1;
-
+const ScrollWrapper = styled(FlexBox) `
   &::-webkit-scrollbar {
     display: none;
   }
@@ -70,27 +62,44 @@ const Button = styled.button `
   cursor: pointer;
   color: ${(p) => p.theme.colors.neutral.c100};
 `;
-const DrawerContent = ({ isOpen, title, children, big, onClose, setTransitionsEnabled = () => 0, onBack, hideNavigation = true, }) => {
+const DrawerContent = 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(() => {
+        if (!ignoreBackdropClick) {
+            onClose();
+        }
+    }, [onClose, ignoreBackdropClick]);
+    const stopClickPropagation = useCallback((e) => {
+        e.stopPropagation();
+    }, []);
     return (React.createElement(TransitionInOut, { in: isOpen, appear: true, mountOnEnter: true, unmountOnExit: true, onEntering: disableChildAnimations, onEntered: enableChildAnimations, onExiting: disableChildAnimations },
-        React.createElement(Overlay, null,
-            React.createElement(TransitionSlide, { in: isOpen, fixed: true, reverseExit: true, appear: true, mountOnEnter: true, unmountOnExit: true },
-                React.createElement(Wrapper, { big: big },
+        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: "h5", flexShrink: 1 }, title)) || React.createElement("div", null),
-                            React.createElement(Button, { onClick: onClose },
-                                React.createElement(Close, null))),
-                        React.createElement(ScrollWrapper, null, children)))))));
-};
-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(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, 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, 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/Flex/index.d.ts

@@ -1,11 +1,8 @@
 import { BaseStyledProps } from "../../styled";
 export declare type FlexBoxProps = BaseStyledProps;
-declare const FlexBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+declare const FlexBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
     columnGap?: string | number | undefined;
     rowGap?: string | number | undefined;
     color?: string | undefined;
-    display?: string | undefined;
-    position?: string | undefined;
-    maxHeight?: number | undefined;
-}, "overflow" | "p" | "color" | "left" | "right" | "bottom" | "top" | "size" | "flex" | "padding" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "verticalAlign" | "width" | "zIndex" | "margin" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg">;
+}, "overflow" | "p" | "color" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
 export default FlexBox;

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,30 +11,24 @@ 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").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    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;
         rowGap?: string | number | undefined;
         color?: string | undefined;
-        display?: string | undefined;
-        position?: string | undefined;
-        maxHeight?: number | undefined;
     } & {
         as: string;
         flexDirection: string;
         flex: number;
         overflow: string;
-    }, "overflow" | "p" | "color" | "left" | "right" | "bottom" | "top" | "size" | "flex" | "padding" | "as" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "verticalAlign" | "width" | "zIndex" | "margin" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg">;
-    Footer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    }, "overflow" | "p" | "color" | "as" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
+    Footer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
         columnGap?: string | number | undefined;
         rowGap?: string | number | undefined;
         color?: string | undefined;
-        display?: string | undefined;
-        position?: string | undefined;
-        maxHeight?: number | undefined;
     } & {
         as: string;
-    }, "overflow" | "p" | "color" | "left" | "right" | "bottom" | "top" | "size" | "flex" | "padding" | "as" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "verticalAlign" | "width" | "zIndex" | "margin" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg">;
+    }, "overflow" | "p" | "color" | "as" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
 };
 export default PopinWrapper;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface SideProps {
     onBack?: () => void;
 }

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

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

package/components/loaders/InfiniteLoader/index.js

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

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

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

package/components/loaders/ProgressLoader/index.js

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

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

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

package/components/message/Alert/index.js

@@ -1,6 +1,7 @@
 import React from "react";
-import styled, { css } from "styled-components";
+import styled, { useTheme } from "styled-components";
 import Text from "../../asorted/Text";
+import Flex from "../../layout/Flex";
 import ShieldSecurityMedium from "@ledgerhq/icons-ui/react/ShieldSecurityMedium";
 import CircledCrossMedium from "@ledgerhq/icons-ui/react/CircledCrossMedium";
 import CircledAlertMedium from "@ledgerhq/icons-ui/react/CircledAlertMedium";
@@ -14,35 +15,41 @@ const icons = {
     warning: React.createElement(CircledAlertMedium, { size: 20 }),
     error: React.createElement(CircledCrossMedium, { size: 20 }),
 };
-const StyledAlertContainer = styled.div `
-  ${(p) => {
-    switch (p.type) {
+const getColors = ({ theme, type }) => {
+    switch (type) {
         case "warning":
-            return css `
-          background: ${p.theme.colors.warning.c30};
-          color: ${p.theme.colors.warning.c100};
-        `;
+            return {
+                background: theme.colors.warning.c30,
+                color: theme.colors.warning.c100,
+            };
         case "error":
-            return css `
-          background: ${p.theme.colors.error.c30};
-          color: ${p.theme.colors.error.c100};
-        `;
+            return {
+                background: theme.colors.error.c30,
+                color: theme.colors.error.c100,
+            };
         case "info":
         default:
-            return css `
-          background: ${p.theme.colors.primary.c20};
-          color: ${p.theme.colors.primary.c90};
-        `;
+            return {
+                background: theme.colors.primary.c20,
+                color: theme.colors.primary.c90,
+            };
     }
-}}
-
+};
+const StyledAlertContainer = styled(Flex) `
   border-radius: ${(p) => `${p.theme.radii[1]}px`};
-  padding: 16px;
-  display: flex;
   align-items: center;
 `;
-export default function Alert({ type = "info", title, showIcon = true }) {
-    return (React.createElement(StyledAlertContainer, { type: type },
+export default function Alert({ type = "info", title, showIcon = true, renderContent, renderRight, containerProps, }) {
+    const theme = useTheme();
+    const { color, background } = getColors({ theme, type });
+    const textProps = {
+        variant: "paragraph",
+        fontWeight: "medium",
+    };
+    return (React.createElement(StyledAlertContainer, Object.assign({ color: color, backgroundColor: background, padding: 6 }, containerProps),
         showIcon && !!icons[type] && React.createElement(StyledIconContainer, null, icons[type]),
-        React.createElement(Text, { variant: "body", color: "inherit" }, title)));
+        React.createElement(Flex, { flexDirection: "column", flex: 1, alignItems: "flex-start", rowGap: "6px" },
+            title && (React.createElement(Text, Object.assign({}, textProps, { color: "inherit" }), title)),
+            renderContent && renderContent({ color, textProps })),
+        React.createElement(Flex, null, renderRight && renderRight({ color, textProps }))));
 }

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/message/Tip/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type TipType = "success" | "warning" | "error";
 export interface TipProps {
     type?: TipType;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TippyProps } from "@tippyjs/react";
 declare type Placement = "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "auto" | "auto-start" | "auto-end";
 export interface Props extends TippyProps {

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

@@ -6,13 +6,10 @@ export declare type Props = React.PropsWithChildren<{
 }> & React.ComponentProps<typeof Wrapper>;
 interface ExtraWrapperProps extends ColorProps, LayoutProps, TypographyProps {
 }
-declare const Wrapper: 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>>> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+declare const Wrapper: 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>>> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
     columnGap?: string | number | undefined;
     rowGap?: string | number | undefined;
     color?: string | undefined;
-    display?: string | undefined;
-    position?: string | undefined;
-    maxHeight?: number | undefined;
-} & ExtraWrapperProps, "overflow" | "p" | "color" | "left" | "right" | "bottom" | "top" | "size" | "flex" | "padding" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "verticalAlign" | "width" | "zIndex" | "margin" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg">;
+} & ExtraWrapperProps, "overflow" | "p" | "color" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
 export default function Aside({ header, footer, children, ...props }: Props): JSX.Element;
 export {};

package/components/navigation/Breadcrumb/index.js

@@ -28,7 +28,7 @@ export default memo(function Breadcrumb({ segments, onChange }) {
         renderArray.push(React.createElement(React.Fragment, null,
             index > 0 ? (React.createElement(Text, { fontWeight: "semiBold", color: "neutral.c40", variant: "paragraph" }, "/")) : null,
             isMultiSegment(segment) ? (React.createElement(Dropdown, { label: "", options: segment.options, value: segment.value, onChange: (elt) => elt && onChange([...values, elt.value]), styles: {
-                    control: (provided, state) => (Object.assign(Object.assign({}, ControlModule.getStyles()(provided, state)), { cursor: "pointer" })),
+                    control: (provided, state) => (Object.assign(Object.assign({}, ControlModule.getStyles(theme)(provided, state)), { cursor: "pointer" })),
                     singleValue: (provided) => (Object.assign(Object.assign({}, provided), { margin: 0, top: undefined, position: undefined, overflow: undefined, maxWidth: undefined, transform: undefined, color: theme.colors.neutral.c80, ":hover": {
                             color: theme.colors.neutral.c100,
                             textDecoration: "underline",