@ledgerhq/react-ui 0.1.1 → 0.4.0

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/Provider.d.ts

@@ -1,15 +1,16 @@
 import React from "react";
-interface State {
-    Component: React.ComponentType<any> | null | undefined;
-    props?: any;
+import type { SideProps } from ".";
+interface State<P extends SideProps = SideProps> {
+    Component: React.ComponentType<P> | null | undefined;
+    props?: P;
     open: boolean;
 }
-export declare let setSide: (Component?: any, props?: any) => void;
-interface ContextValue {
-    state: State;
-    setSide: (Component?: React.ComponentType<any>, props?: any) => void;
+export declare let setSide: <P extends SideProps = SideProps>(Component?: State<P>["Component"], props?: State<P>["props"]) => void;
+interface ContextValue<P extends SideProps = SideProps> {
+    state: State<P>;
+    setSide: (Component?: React.ComponentType<P>, props?: P) => void;
 }
-export declare const context: React.Context<ContextValue>;
+export declare const context: React.Context<ContextValue<SideProps>>;
 export declare const useSide: () => ContextValue;
 declare const SideProvider: ({ children }: {
     children: React.ReactNode;

package/components/layout/Side/Provider.js

@@ -8,7 +8,6 @@ const reducer = (state, update) => {
 };
 const initialState = {
     Component: null,
-    props: null,
     open: false,
 };
 export const context = React.createContext({
@@ -16,8 +15,7 @@ export const context = React.createContext({
     setSide: () => { },
 });
 export const useSide = () => {
-    const sideContext = useContext(context);
-    return sideContext;
+    return useContext(context);
 };
 const SideProvider = ({ children }) => {
     const [state, dispatch] = useReducer(reducer, initialState);

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) => {
@@ -13,13 +13,10 @@ export const SideWrapper = (props) => {
     const nonce = useRef(0);
     const onClose = useCallback(() => setSide(), [setSide]);
     useEffect(() => {
-        // @ts-expect-error FIXME
         setQueue((q) => {
-            if (!state.open)
+            if (!state.open || !state.Component)
                 return [];
-            // @ts-expect-error FIXME
-            if (state.Component != null)
-                return q.concat([Object.assign(Object.assign({}, state), { key: nonce.current++ })]);
+            return q.concat([Object.assign(Object.assign({}, state), { key: nonce.current++ })]);
         });
     }, [state]);
     useEffect(() => {
@@ -39,10 +36,10 @@ export const SideWrapper = (props) => {
     const wrappedOnBack = useCallback(() => {
         var _a;
         setDirection("right");
-        (_a = state === null || state === void 0 ? void 0 : state.props) === null || _a === void 0 ? void 0 : _a.onBack();
+        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 }),
-        React.createElement(TransitionGroup, { enter: transitionsEnabled, exit: transitionsEnabled, component: null }, queue.map(({ Component, props, key }) => (React.createElement(TransitionSlide, { key: key, direction: direction },
-            React.createElement(Component, Object.assign({}, props))))))));
+    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.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%;
@@ -39,7 +39,7 @@ function ProgressCircleSvg({ radius, stroke, progress, }) {
 }
 export default function ProgressLoader({ radius = 32, stroke = 6, progress = 0, }) {
     return (React.createElement(StyledProgressLoaderContainer, null,
-        React.createElement(StyledCenteredText, { type: "cta" },
+        React.createElement(StyledCenteredText, { variant: "body" },
             progress,
             "%"),
         React.createElement(ProgressCircleSvg, { radius: radius, stroke: stroke, progress: progress })));

package/components/message/Alert/index.js

@@ -19,19 +19,19 @@ const StyledAlertContainer = styled.div `
     switch (p.type) {
         case "warning":
             return css `
-          background: ${p.theme.colors.palette.warning.c30};
-          color: ${p.theme.colors.palette.warning.c100};
+          background: ${p.theme.colors.warning.c30};
+          color: ${p.theme.colors.warning.c100};
         `;
         case "error":
             return css `
-          background: ${p.theme.colors.palette.error.c30};
-          color: ${p.theme.colors.palette.error.c100};
+          background: ${p.theme.colors.error.c30};
+          color: ${p.theme.colors.error.c100};
         `;
         case "info":
         default:
             return css `
-          background: ${p.theme.colors.palette.primary.c20};
-          color: ${p.theme.colors.palette.primary.c90};
+          background: ${p.theme.colors.primary.c20};
+          color: ${p.theme.colors.primary.c90};
         `;
     }
 }}
@@ -44,5 +44,5 @@ const StyledAlertContainer = styled.div `
 export default function Alert({ type = "info", title, showIcon = true }) {
     return (React.createElement(StyledAlertContainer, { type: type },
         showIcon && !!icons[type] && React.createElement(StyledIconContainer, null, icons[type]),
-        React.createElement(Text, { type: "body", color: "inherit" }, title)));
+        React.createElement(Text, { variant: "body", color: "inherit" }, title)));
 }

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",
@@ -35,7 +35,7 @@ function Log(_a) {
     return (React.createElement(Container, Object.assign({}, props),
         React.createElement(BracketLeft, null),
         React.createElement(TextContainer, { flex: "1", alignItems: "center", justifyContent: "center" },
-            React.createElement(Text, { type: "h3", textTransform: "uppercase", textAlign: "center" }, children)),
+            React.createElement(Text, { variant: "h3", textTransform: "uppercase", textAlign: "center" }, children)),
         React.createElement(BracketRight, null)));
 }
 export default memo(Log);

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.d.ts

@@ -1,23 +1,17 @@
 import React from "react";
-import { ColorProps } from "styled-system";
+import { FlexBoxProps } from "../../layout/Flex";
 import Badge from "./Badge";
-import type { Theme } from "../../../styles/theme";
-export declare type Props = {
+import { LinkProps } from "../../cta/Link";
+interface ContainerProps extends FlexBoxProps {
+    hasBackground?: boolean;
+}
+export interface Props extends ContainerProps {
     title: string;
     badge: React.ReactNode;
     description?: string;
     link?: string;
-    onLinkClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;
-    hasBackground?: boolean;
-} & ColorProps & React.ComponentProps<typeof Container>;
-declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../layout/Flex").FlexBoxProps & {
-    p: number;
-    columnGap: number;
-    alignItems: string;
-} & {
-    hasBackground?: boolean | undefined;
-    theme: Theme;
-}, "p" | "alignItems" | "columnGap">;
+    onLinkClick?: LinkProps["onClick"];
+}
 export declare type NotificationType = {
     (p: Props): JSX.Element;
     Badge: typeof Badge;

package/components/message/Notification/index.js

@@ -11,11 +11,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from "react";
 import styled from "styled-components";
-import { color } from "styled-system";
 import FlexBox from "../../layout/Flex";
 import Text from "../../asorted/Text";
-import Icon from "../../asorted/Icon";
 import Badge from "./Badge";
+import Link from "../../cta/Link";
+import { ExternalLinkMedium } from "@ledgerhq/icons-ui/react";
 const Container = styled(FlexBox).attrs({
     p: 6,
     columnGap: 8,
@@ -23,41 +23,21 @@ 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;
-  ${color}
-`;
-const Link = styled(Text).attrs({
-    ff: "Inter|SemiBold",
-    fontSize: 4,
-    color: "palette.neutral.c100",
-}) `
-  display: inline-flex;
-  align-items: center;
-  column-gap: 6px;
-  cursor: pointer;
-
-  :hover,
-  :focus,
-  :active {
-    text-decoration: underline;
-  }
 `;
 function Notification(_a) {
     var { title, description, badge, link, onLinkClick, hasBackground = false } = _a, containerProps = __rest(_a, ["title", "description", "badge", "link", "onLinkClick", "hasBackground"]);
-    return (React.createElement(Container, Object.assign({}, containerProps, { hasBackground: hasBackground }),
+    return (React.createElement(Container, Object.assign({ hasBackground: hasBackground }, containerProps),
         badge,
         React.createElement(FlexBox, { flexDirection: "column", rowGap: 3, flex: "auto" },
-            React.createElement(Text, { ff: "Inter|Medium", fontSize: 5, color: "palette.neutral.c100" }, title),
-            description && (React.createElement(Text, { ff: "Inter|Medium", fontSize: 4, color: "palette.neutral.c80" }, description)),
-            link && (React.createElement(Link, { onClick: (event) => onLinkClick && onLinkClick(event) },
-                link,
-                React.createElement(Icon, { name: "ExternalLink", size: 18 }))))));
+            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))))));
 }
 Notification.Badge = Badge;
 export default Notification;

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,8 @@
+/// <reference types="react" />
+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,9 @@
 /// <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

@@ -9,10 +9,33 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from "react";
+import React, { forwardRef } from "react";
+import { isForwardRef } from "react-is";
 import Tippy from "@tippyjs/react";
 import Text from "../../asorted/Text";
+// Tippyjs need the ref to be forwarded to the DOM element wrapping the children.
+// This component has been created to add a wrapping span and use its ref when needed.
+// See: https://github.com/atomiks/tippyjs-react#component-children
+const Wrapper = forwardRef((props, ref) => {
+    const childrenCount = React.Children.count(props.children);
+    try {
+        const child = React.Children.only(props.children);
+        const isValidElement = React.isValidElement(child);
+        const isForwardingRef = isForwardRef(child);
+        const isDomElement = isValidElement && typeof child.type === "string";
+        if (isForwardingRef || isDomElement) {
+            return React.cloneElement(child, { ref });
+        }
+        else {
+            return React.createElement("span", { ref: ref }, props.children);
+        }
+    }
+    catch (e) {
+        return childrenCount < 1 ? null : React.createElement("span", { ref: ref }, props.children);
+    }
+});
 export default function Tooltip(props) {
-    const { content, placement = "auto" } = props, rest = __rest(props, ["content", "placement"]);
-    return (React.createElement(Tippy, Object.assign({}, rest, { placement: placement, content: React.createElement(Text, { ff: "Inter|Medium", fontSize: 3, color: "palette.neutral.c00" }, content) })));
+    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: "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,13 @@ 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").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">;
 export default function Aside({ header, footer, children, ...props }: Props): JSX.Element;
 export {};