@ledgerhq/react-ui 0.2.0 → 0.5.0

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

@@ -1,12 +1,33 @@
 import React from "react";
-export interface WrapperProps {
-    width?: number;
-    height?: number;
-}
-export declare type PopinProps = WrapperProps & {
+import { BaseStyledProps } from "../../styled";
+export interface PopinProps extends BaseStyledProps {
     isOpen: boolean;
     children: React.ReactNode;
+}
+export declare type PopinHeaderProps = BaseStyledProps & {
     onClose?: () => void;
+    onBack?: () => void;
+    children: React.ReactNode;
+};
+declare const PopinWrapper: {
+    ({ children, ...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;
+        rowGap?: string | number | undefined;
+        color?: string | undefined;
+    } & {
+        as: string;
+        flexDirection: string;
+        flex: number;
+        overflow: string;
+    }, "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;
+    } & {
+        as: string;
+    }, "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">;
 };
-declare const PopinWrapper: ({ children, ...popinProps }: PopinProps) => React.ReactElement;
 export default PopinWrapper;

package/components/layout/Popin/index.js

@@ -12,54 +12,75 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from "react";
 import ReactDOM from "react-dom";
 import styled from "styled-components";
+import CloseIcon from "@ledgerhq/icons-ui/react/CloseRegular";
+import ArrowLeftIcon from "@ledgerhq/icons-ui/react/ArrowLeftRegular";
+import baseStyled from "../../styled";
+import Flex from "../../layout/Flex";
 import Button from "../../cta/Button";
-import Close from "@ledgerhq/icons-ui/react/CloseRegular";
 import TransitionInOut from "../../transitions/TransitionInOut";
 import TransitionScale from "../../transitions/TransitionScale";
-const Container = styled.div `
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c00};
-  padding: ${(p) => p.theme.space[6]}px;
+const ICON_SIZE = 20;
+const Wrapper = styled(Flex).attrs((p) => ({
+    flexDirection: "column",
+    alignItems: "stretch",
+    justifyContent: "space-between",
+    height: p.height || `${p.theme.sizes.drawer.popin.max.height}px`,
+    width: p.width || `${p.theme.sizes.drawer.popin.max.width}px`,
+    minHeight: `${p.theme.sizes.drawer.popin.min.height}px`,
+    minWidth: `${p.theme.sizes.drawer.popin.min.width}px`,
+    maxHeight: `${p.theme.sizes.drawer.popin.max.height}px`,
+    maxWidth: `${p.theme.sizes.drawer.popin.max.width}px`,
+    zIndex: p.theme.zIndexes[8],
+    p: p.p !== undefined ? p.p : p.theme.space[10],
+    rowGap: 6,
+    backgroundColor: p.theme.colors.neutral.c00,
+})) ``;
+const Overlay = styled(Flex).attrs((p) => ({
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100vw",
+    height: "100vh",
+    zIndex: p.theme.zIndexes[8],
+    position: "fixed",
+    top: 0,
+    left: 0,
+    backgroundColor: p.theme.colors.neutral.c100a07,
+})) ``;
+const Header = baseStyled.section `
+  display: grid;
+  grid-template-columns: [icon] ${ICON_SIZE}px [title] 1fr [icon] ${ICON_SIZE}px;
+  column-gap: 12px;
 `;
-const Wrapper = styled.div `
-  height: ${(p) => p.height || p.theme.sizes.drawer.popin.min.height}px;
-  width: ${(p) => p.width || p.theme.sizes.drawer.popin.min.width}px;
-  min-height: ${(p) => p.theme.sizes.drawer.popin.min.height}px;
-  min-width: ${(p) => p.theme.sizes.drawer.popin.min.width}px;
-  max-height: ${(p) => p.theme.sizes.drawer.popin.max.height}px;
-  max-width: ${(p) => p.theme.sizes.drawer.popin.max.width}px;
+const HeaderTitleContainer = styled(Flex).attrs(() => ({
+    justifyContent: "center",
+})) ``;
+const PopinBody = baseStyled(Flex).attrs({
+    as: "section",
+    flexDirection: "column",
+    flex: 1,
+    overflow: "auto",
+}) ``;
+const PopinFooter = baseStyled(Flex).attrs({ as: "section" }) ``;
+const IconContainer = styled(Button.Unstyled) `
   display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: space-between;
-  z-index: ${(p) => p.theme.zIndexes[8]};
-`;
-const Overlay = styled.div `
-  position: fixed;
-  display: flex;
-  justify-content: center;
   align-items: center;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 999;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c100a07};
-`;
-const CloseButton = styled(Button) `
-  position: absolute;
-  top: ${(p) => p.theme.space[6]}px;
-  right: ${(p) => p.theme.space[6]}px;
 `;
-const Popin = ({ isOpen, children, width, height, onClose = () => { } }) => (React.createElement(TransitionInOut, { in: isOpen, appear: true, mountOnEnter: true, unmountOnExit: true },
-    React.createElement(Overlay, null,
-        React.createElement(TransitionScale, { in: isOpen, appear: true },
-            React.createElement(Wrapper, { width: width, height: height },
-                React.createElement(Container, null,
-                    React.createElement(CloseButton, { Icon: Close, onClick: onClose }),
-                    children))))));
+const PopinHeader = (_a) => {
+    var { children, onClose, onBack } = _a, props = __rest(_a, ["children", "onClose", "onBack"]);
+    return (React.createElement(Header, Object.assign({}, props),
+        React.createElement(Flex, null, onBack ? (React.createElement(IconContainer, { onClick: onBack },
+            React.createElement(ArrowLeftIcon, { size: ICON_SIZE, color: "neutral.c100" }))) : null),
+        React.createElement(HeaderTitleContainer, null, children),
+        React.createElement(Flex, null, onClose ? (React.createElement(IconContainer, { onClick: onClose },
+            React.createElement(CloseIcon, { size: ICON_SIZE, color: "neutral.c100" }))) : null)));
+};
+const Popin = (_a) => {
+    var { isOpen, children, width, height } = _a, props = __rest(_a, ["isOpen", "children", "width", "height"]);
+    return (React.createElement(TransitionInOut, { in: isOpen, appear: true, mountOnEnter: true, unmountOnExit: true },
+        React.createElement(Overlay, null,
+            React.createElement(TransitionScale, { in: isOpen, appear: true },
+                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"), []);
@@ -67,4 +88,7 @@ const PopinWrapper = (_a) => {
         throw new Error("popin root cannot be found");
     return ReactDOM.createPortal(React.createElement(Popin, Object.assign({}, popinProps), children), $root);
 };
+PopinWrapper.Header = PopinHeader;
+PopinWrapper.Body = PopinBody;
+PopinWrapper.Footer = PopinFooter;
 export default PopinWrapper;

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

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

package/components/layout/Side/index.js

@@ -1,6 +1,6 @@
 import React, { useRef, useCallback, useEffect, useState } from "react";
 import { TransitionGroup } from "react-transition-group";
-import Side from "./Side";
+import Drawer from "../Drawer";
 import TransitionSlide from "../../transitions/TransitionSlide";
 import { useSide } from "./Provider";
 export const SideWrapper = (props) => {
@@ -39,7 +39,7 @@ export const SideWrapper = (props) => {
         const onBack = (_a = state === null || state === void 0 ? void 0 : state.props) === null || _a === void 0 ? void 0 : _a.onBack;
         onBack && onBack();
     }, [state === null || state === void 0 ? void 0 : state.props]);
-    return (React.createElement(Side, Object.assign({}, props, { isOpen: !!state.open, onClose: onClose, onBack: ((_a = state === null || state === void 0 ? void 0 : state.props) === null || _a === void 0 ? void 0 : _a.onBack) ? wrappedOnBack : undefined, setTransitionsEnabled: setTransitionsEnabled }),
+    return (React.createElement(Drawer, Object.assign({}, props, { isOpen: !!state.open, onClose: onClose, onBack: ((_a = state === null || state === void 0 ? void 0 : state.props) === null || _a === void 0 ? void 0 : _a.onBack) ? wrappedOnBack : undefined, setTransitionsEnabled: setTransitionsEnabled, hideNavigation: false }),
         React.createElement(TransitionGroup, { enter: transitionsEnabled, exit: transitionsEnabled, component: null }, queue.map(({ Component, props, key }) => (React.createElement(TransitionSlide, { key: key, direction: direction }, Component && React.createElement(Component, Object.assign({}, props))))))));
 };
 export default SideWrapper;

package/components/layout/index.d.ts

@@ -1,4 +1,6 @@
 export { default as Flex } from "./Flex";
+export { default as Box } from "./Box";
 export { default as Grid } from "./Grid";
 export { default as Popin } from "./Popin";
 export { default as Side } from "./Side";
+export { default as Drawer } from "./Drawer";

package/components/layout/index.js

@@ -1,4 +1,6 @@
 export { default as Flex } from "./Flex";
+export { default as Box } from "./Box";
 export { default as Grid } from "./Grid";
 export { default as Popin } from "./Popin";
 export { default as Side } from "./Side";
+export { default as Drawer } from "./Drawer";

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface Props {
     /**
      * Radius of the progress ring.

package/components/loaders/ProgressLoader/index.js

@@ -11,13 +11,13 @@ const StyledCircle = styled.circle.attrs({
   transform-origin: 50% 50%;
 `;
 const StyledCircleBackground = styled(StyledCircle).attrs((props) => ({
-    stroke: props.theme.colors.palette.primary.c20,
+    stroke: props.theme.colors.primary.c20,
 })) ``;
 const StyledCircleFront = styled(StyledCircle).attrs((props) => ({
-    stroke: props.theme.colors.palette.primary.c60,
+    stroke: props.theme.colors.primary.c60,
 })) ``;
 const StyledCenteredText = styled(Text).attrs({
-    color: "palette.primary.c80",
+    color: "primary.c80",
 }) `
   position: absolute;
   top: 50%;

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

@@ -1,9 +1,28 @@
-/// <reference types="react" />
+import { TextVariants } from "../../../styles/theme";
 declare type AlertType = "info" | "warning" | "error";
 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?: (props: {
+        color: string;
+        textProps: {
+            variant?: TextVariants;
+            fontWeight?: string;
+        };
+    }) => JSX.Element;
+    /**
+     * 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, }: 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,42 @@ 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.palette.warning.c30};
-          color: ${p.theme.colors.palette.warning.c100};
-        `;
+            return {
+                background: theme.colors.warning.c30,
+                color: theme.colors.warning.c100,
+            };
         case "error":
-            return css `
-          background: ${p.theme.colors.palette.error.c30};
-          color: ${p.theme.colors.palette.error.c100};
-        `;
+            return {
+                background: theme.colors.error.c30,
+                color: theme.colors.error.c100,
+            };
         case "info":
         default:
-            return css `
-          background: ${p.theme.colors.palette.primary.c20};
-          color: ${p.theme.colors.palette.primary.c90};
-        `;
+            return {
+                background: theme.colors.primary.c20,
+                color: theme.colors.primary.c90,
+            };
     }
-}}
-
+};
+const StyledAlertContainer = styled(Flex).attrs(() => ({
+    padding: 6,
+})) `
   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, }) {
+    const theme = useTheme();
+    const { color, background } = getColors({ theme, type });
+    const textProps = {
+        variant: "paragraph",
+        fontWeight: "medium",
+    };
+    return (React.createElement(StyledAlertContainer, { color: color, backgroundColor: background },
         showIcon && !!icons[type] && React.createElement(StyledIconContainer, null, icons[type]),
-        React.createElement(Text, { variant: "body", color: "inherit" }, title)));
+        React.createElement(Flex, { flexDirection: "column", alignItems: "flex-start", rowGap: "6px" },
+            title && (React.createElement(Text, Object.assign({}, textProps, { color: "inherit" }), title)),
+            renderContent && renderContent({ color, textProps }))));
 }

package/components/message/Log/index.js

@@ -19,7 +19,7 @@ const Container = styled(FlexBox) `
   flex-wrap: wrap;
   align-items: stretch;
   min-height: ${(p) => p.theme.space[12]}px;
-  color: ${(p) => p.theme.colors.palette.neutral.c100};
+  color: ${(p) => p.theme.colors.neutral.c100};
 `;
 const TextContainer = styled(FlexBox).attrs(() => ({
     flex: "1",

package/components/message/Notification/Badge.js

@@ -20,14 +20,14 @@ const ActiveCircle = styled.div `
   width: 10px;
   border-radius: 9999px;
   box-sizing: content-box;
-  background-color: ${(p) => p.theme.colors.palette.error.c100};
+  background-color: ${(p) => p.theme.colors.error.c100};
 
   border: 2px solid
     var(
       --notification-badge-border,
       ${(p) => {
     /* The CSS variable is dynamically set by the Notification component */
-    return p.theme.colors.palette.background.main;
+    return p.theme.colors.background.main;
 }}
     );
 `;

package/components/message/Notification/index.js

@@ -23,11 +23,9 @@ const Container = styled(FlexBox).attrs({
 }) `
   --notification-badge-border: ${(p) => {
     /* Set a CSS variable that will be consumed by the Badge component */
-    return p.hasBackground
-        ? p.theme.colors.palette.neutral.c30
-        : p.theme.colors.palette.background.main;
+    return p.hasBackground ? p.theme.colors.neutral.c30 : p.theme.colors.background.main;
 }};
-  background-color: ${(p) => p.hasBackground ? p.theme.colors.palette.neutral.c30 : "transparent"};
+  background-color: ${(p) => (p.hasBackground ? p.theme.colors.neutral.c30 : "transparent")};
 
   border-radius: 8px;
 `;
@@ -36,8 +34,8 @@ function Notification(_a) {
     return (React.createElement(Container, Object.assign({ hasBackground: hasBackground }, containerProps),
         badge,
         React.createElement(FlexBox, { flexDirection: "column", rowGap: 3, flex: "auto" },
-            React.createElement(Text, { variant: "large", fontWeight: "medium", color: "palette.neutral.c100" }, title),
-            description && (React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: "palette.neutral.c80" }, description)),
+            React.createElement(Text, { variant: "large", fontWeight: "medium", color: "neutral.c100" }, title),
+            description && (React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: "neutral.c80", whiteSpace: "pre-wrap" }, description)),
             link && (React.createElement(FlexBox, { justifyContent: "flex-start" },
                 React.createElement(Link, { onClick: (event) => onLinkClick && onLinkClick(event), Icon: ExternalLinkMedium }, link))))));
 }

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { FlexBoxProps } from "../../layout/Flex";
+interface ContainerProps extends FlexBoxProps {
+    hasBorder?: boolean;
+}
+export interface Props extends ContainerProps {
+    text: string;
+    badge: React.ReactNode;
+}
+declare function StatusNotification({ text, badge, hasBorder, ...containerProps }: Props): JSX.Element;
+export default StatusNotification;

package/components/message/StatusNotification/index.js

@@ -0,0 +1,33 @@
+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 from "styled-components";
+import FlexBox from "../../layout/Flex";
+import Log from "../Log/";
+const Container = styled(FlexBox).attrs({
+    p: 8,
+    rowGap: 9,
+    alignItems: "center",
+    flexDirection: "column",
+}) `
+  border-width: 1px;
+  border-style: ${(p) => (p.hasBorder ? "solid" : "none")};
+  border-radius: 8px;
+  border-color: ${(p) => p.theme.colors.neutral.c40};
+`;
+function StatusNotification(_a) {
+    var { text, badge, hasBorder = false } = _a, containerProps = __rest(_a, ["text", "badge", "hasBorder"]);
+    return (React.createElement(Container, Object.assign({ hasBorder: hasBorder }, containerProps),
+        badge,
+        React.createElement(Log, null, text)));
+}
+export default StatusNotification;

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

@@ -0,0 +1,7 @@
+declare type TipType = "success" | "warning" | "error";
+export interface TipProps {
+    type?: TipType;
+    label: string;
+}
+export default function Tip({ type, label }: TipProps): JSX.Element;
+export {};

package/components/message/Tip/index.js

@@ -0,0 +1,43 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import Text from "../../asorted/Text";
+import { CheckAloneMedium, CloseMedium, CircledAlertMedium } from "@ledgerhq/icons-ui/react";
+import { Flex } from "../../layout";
+const icons = {
+    success: React.createElement(CheckAloneMedium, { size: 16 }),
+    warning: React.createElement(CircledAlertMedium, { size: 16 }),
+    error: React.createElement(CloseMedium, { size: 16 }),
+};
+const StyledIconContainer = styled.div `
+  ${(p) => {
+    switch (p.type) {
+        case "warning":
+            return css `
+          background: ${p.theme.colors.warning.c10};
+          color: ${p.theme.colors.warning.c100};
+        `;
+        case "error":
+            return css `
+          background: ${p.theme.colors.error.c10};
+          color: ${p.theme.colors.error.c100};
+        `;
+        case "success":
+        default:
+            return css `
+          background: ${p.theme.colors.success.c30};
+          color: ${p.theme.colors.success.c100};
+        `;
+    }
+}}
+
+  border-radius: ${(p) => `${p.theme.radii[1]}px`};
+  margin-right ${(p) => `${p.theme.space[6]}px`};
+  padding: 6px;
+  display: flex;
+  align-items: center;
+`;
+export default function Tip({ type, label }) {
+    return (React.createElement(Flex, { alignItems: "center" },
+        type && React.createElement(StyledIconContainer, { type: type }, icons[type]),
+        React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: "neutral.c100", flexShrink: 1 }, label)));
+}

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

@@ -1,8 +1,8 @@
-/// <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 declare type Props = TippyProps & {
+export interface Props extends TippyProps {
+    /** The preferred placement of the tippy. */
     placement?: Placement;
-};
+}
 export default function Tooltip(props: Props): JSX.Element | null;
 export {};

package/components/message/Tooltip/index.js

@@ -36,6 +36,6 @@ const Wrapper = forwardRef((props, ref) => {
 });
 export default function Tooltip(props) {
     const { content, placement = "auto", children } = props, rest = __rest(props, ["content", "placement", "children"]);
-    return (React.createElement(Tippy, Object.assign({}, rest, { placement: placement, content: React.createElement(Text, { fontWeight: "medium", variant: "paragraph", color: "palette.neutral.c00" }, content) }),
+    return (React.createElement(Tippy, Object.assign({}, rest, { placement: placement, content: React.createElement(Text, { fontWeight: "medium", variant: "paragraph", color: "neutral.c00" }, content) }),
         React.createElement(Wrapper, { children: children })));
 }

package/components/message/Tooltip/styles.js

@@ -10,8 +10,8 @@ export default css `
 
   .tippy-box {
     position: relative;
-    background-color: ${(p) => p.theme.colors.palette.neutral.c100};
-    color: ${(p) => p.theme.colors.palette.neutral.c00};
+    background-color: ${(p) => p.theme.colors.neutral.c100};
+    color: ${(p) => p.theme.colors.neutral.c00};
     border-radius: 4px;
     font-size: 14px;
     line-height: 1.4;
@@ -72,7 +72,7 @@ export default css `
   .tippy-arrow {
     width: 16px;
     height: 16px;
-    color: ${(p) => p.theme.colors.palette.neutral.c100};
+    color: ${(p) => p.theme.colors.neutral.c100};
   }
 
   .tippy-arrow:before {

package/components/message/index.d.ts

@@ -1,4 +1,7 @@
 export { default as Alert } from "./Alert";
 export { default as Log } from "./Log";
 export { default as Notification } from "./Notification";
+export { default as Badge } from "./Notification/Badge";
 export { default as Tooltip } from "./Tooltip";
+export { default as Tip } from "./Tip";
+export { default as StatusNotification } from "./StatusNotification";

package/components/message/index.js

@@ -1,4 +1,7 @@
 export { default as Alert } from "./Alert";
 export { default as Log } from "./Log";
 export { default as Notification } from "./Notification";
+export { default as Badge } from "./Notification/Badge";
 export { default as Tooltip } from "./Tooltip";
+export { default as Tip } from "./Tip";
+export { default as StatusNotification } from "./StatusNotification";

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

@@ -6,6 +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("../../layout/Flex").FlexBoxProps & ExtraWrapperProps, never>;
+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;
+} & 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

@@ -7,14 +7,14 @@ import * as ControlModule from "../../form/SelectInput/Control";
 const Link = styled(Text).attrs({
     ff: "Inter|SemiBold",
     fontSize: 3,
-    color: "palette.neutral.c80",
+    color: "neutral.c80",
     tabIndex: 0,
 }) `
   cursor: pointer;
   :hover,
   :active,
   :focus {
-    color: ${(p) => p.theme.colors.palette.neutral.c100};
+    color: ${(p) => p.theme.colors.neutral.c100};
     text-decoration: underline;
   }
 `;
@@ -26,11 +26,11 @@ export default memo(function Breadcrumb({ segments, onChange }) {
     const [contents] = segments.reduce(([renderArray, valuesArray], segment, index) => {
         const values = [...valuesArray];
         renderArray.push(React.createElement(React.Fragment, null,
-            index > 0 ? (React.createElement(Text, { fontWeight: "semiBold", color: "palette.neutral.c40", variant: "paragraph" }, "/")) : 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" })),
-                    singleValue: (provided) => (Object.assign(Object.assign({}, provided), { margin: 0, top: undefined, position: undefined, overflow: undefined, maxWidth: undefined, transform: undefined, color: theme.colors.palette.neutral.c80, ":hover": {
-                            color: theme.colors.palette.neutral.c100,
+                    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",
                         } })),
                 } })) : (React.createElement(Link, { onKeyDown: (event) => ["Enter", " "].includes(event.key) && onChange([...values, segment.value]), onClick: () => onChange([...values, segment.value]) }, segment.label))));

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

@@ -1,8 +1,8 @@
 import React from "react";
 import FlexBox from "../../layout/Flex";
 export declare type Props = {
-    left: React.ReactNode;
-    right: React.ReactNode;
-    children: React.ReactNode;
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+    children?: React.ReactNode;
 } & React.ComponentProps<typeof FlexBox>;
 export default function ({ left, right, children, ...rest }: Props): JSX.Element;