@ledgerhq/react-ui 0.4.0 → 0.7.1

package/assets/logos/LedgerLiveAltRegular.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type Props = {
     width?: number | string;
     height?: number | string;

package/assets/logos/LedgerLiveRegular.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type Props = {
     width?: number | string;
     height?: number | string;

package/components/Chart/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ChartProps } from "react-chartjs-2";
 import "chartjs-adapter-moment";
 import type { Item, timeOptions } from "./types";

package/components/Table/Columns.d.ts

@@ -1,34 +1,83 @@
 import React from "react";
 import { Props as IconProps } from "../asorted/Icon";
 import Text, { TextProps } from "../asorted/Text";
+export interface Column<T> {
+    /**
+     * A function called to render each cell of the column.
+     */
+    render: (props: CellProps<T>) => React.ReactNode;
+    /**
+     * A valid grid template [value](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns#values).
+     * This layout is applied to every cell of the column.
+     * Default to "min-content" - the largest minimal content contribution of the grid item.
+     */
+    layout?: string;
+    /**
+     * A function called to render the header cell.
+     * If omitted the rendered header element will be an empty div.
+     */
+    header?: () => React.ReactNode;
+}
 export interface CellProps<T> {
+    /**
+     * The cell element.
+     */
     elt: T;
+    /**
+     * The row index.
+     */
     rowIndex: number;
+    /**
+     * The column index.
+     */
     columnIndex: number;
 }
-declare type HeaderFn = () => React.ReactNode;
-export interface Column<T> {
-    layout?: string;
-    render: (props: CellProps<T>) => React.ReactNode;
-    header?: HeaderFn;
-}
 /**
  * A column which contains a single icon and that has a fixed width.
  */
-export declare function IconColumn<T>({ props, header, layout, }: {
+declare function iconColumn<T>({ props, header, layout, }: {
+    /**
+     * An object containing the unerlying <Text /> wrapper props as well as
+     * the "name" and "weight" props of the unerlying <Icon />.
+     */
     props: (elt: T) => Pick<IconProps, "name" | "weight"> & TextProps;
-    header?: HeaderFn;
+    /**
+     * An optional render function to display the column header.
+     */
+    header?: () => React.ReactNode;
+    /**
+     * The grid column layout, by default "min-content".
+     */
     layout?: string;
 }): Column<T>;
+export { iconColumn as icon };
 /**
  * A column that contains a title and a subtitle.
  */
-export declare function TextColumn<T>({ title, subtitle, header, layout, titleProps, subtitleProps, }: {
+declare function textColumn<T>({ title, subtitle, header, layout, titleProps, subtitleProps, }: {
+    /**
+     * An optional title.
+     */
     title?: (elt: T) => React.ReactNode;
+    /**
+     * An optional subtitle.
+     */
     subtitle?: (elt: T) => React.ReactNode;
-    header?: HeaderFn;
+    /**
+     * An optional render function to display the column header.
+     */
+    header?: () => React.ReactNode;
+    /**
+     * The grid column layout, by default "auto".
+     */
     layout?: string;
+    /**
+     * Optional extra props passed to the title <Text /> wrapper.
+     */
     titleProps?: (elt: T) => Partial<React.ComponentProps<typeof Text>>;
+    /**
+     * Optional extra props passed to the subtitle <Text /> wrapper.
+     */
     subtitleProps?: (elt: T) => Partial<React.ComponentProps<typeof Text>>;
 }): Column<T>;
-export {};
+export { textColumn as text };

package/components/Table/Columns.js

@@ -16,38 +16,28 @@ import Text from "../asorted/Text";
 /**
  * A column which contains a single icon and that has a fixed width.
  */
-export function IconColumn({ props, header, layout, }) {
+function iconColumn({ props, header, layout, }) {
     return {
         layout: layout || "min-content",
         render: ({ elt }) => {
             const _a = props(elt), { name, weight } = _a, textProps = __rest(_a, ["name", "weight"]);
-            return (React.createElement(Text, Object.assign({}, textProps, { style: { display: "flex" } }),
+            return (React.createElement(Text, Object.assign({}, textProps, { style: { display: "flex", alignItems: "center" } }),
                 React.createElement(Icon, { name: name, weight: weight })));
         },
         header,
     };
 }
+export { iconColumn as icon };
 /**
  * A column that contains a title and a subtitle.
  */
-export function TextColumn({ 
-// An optional title.
-title, 
-// An optional subtitle.
-subtitle, 
-// An optional render function to display the column header.
-header, 
-// The grid column layout, by default "auto".
-layout, 
-// Optional extra props passed to the title <Text /> wrapper.
-titleProps, 
-// Optional extra props passed to the subtitle <Text /> wrapper.
-subtitleProps, }) {
+function textColumn({ title, subtitle, header, layout, titleProps, subtitleProps, }) {
     return {
         layout: layout || "auto",
-        render: ({ elt }) => (React.createElement(FlexBox, { flexDirection: "column" },
+        render: ({ elt }) => (React.createElement(FlexBox, { flexDirection: "column", justifyContent: "center" },
             title && (React.createElement(Text, Object.assign({ fontWeight: "medium", variant: "body", textOverflow: "ellipsis", overflow: "hidden", color: "neutral.c100" }, ((titleProps && titleProps(elt)) || {})), title(elt))),
             subtitle && (React.createElement(Text, Object.assign({ fontWeight: "medium", variant: "paragraph", textOverflow: "ellipsis", overflow: "hidden", color: "neutral.c80" }, ((subtitleProps && subtitleProps(elt)) || {})), subtitle(elt))))),
         header,
     };
 }
+export { textColumn as text };

package/components/Table/index.d.ts

@@ -8,27 +8,59 @@ export interface ContainerExtraProps extends BorderProps, BaseStyledProps {
 }
 export interface ContainerProps extends ContainerExtraProps, GridProps {
 }
-export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & ContainerExtraProps, never>;
-export declare const ExtraRowContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridColumnProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
-export interface Props<T> extends Omit<ContainerProps, "columns" | "color"> {
+export declare const ExtraRowContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    gridColumn: string;
+} & GridColumnProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "gridColumn">;
+export declare type RowContainerProps = {
+    rowIndex: number;
+};
+export declare const RowContainer: 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>>> & 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;
+} & RowContainerProps, "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">;
+interface CommonProps<T> {
+    /** Table data */
     data: T[];
+    /** Columns used to render table cells and headers. */
     columns: Column<T>[];
-    withHeaders?: boolean;
+    /**
+     * An optional rendering function that will get called after each row render.
+     * Can be used to display additional rows and columns dynamically.
+     */
     extraRender?: (elt: T, index: number) => React.ReactNode;
+    /**
+     * A render function that can be used to wrap each row of the table inside an custom element.
+     */
+    renderRow?: (rowIndex: number, children: React.ReactNode) => React.ReactNode;
 }
-export interface RowProps<T> {
-    data: T[];
-    columns: Column<T>[];
+export interface Props<T> extends CommonProps<T>, Omit<ContainerProps, "columns" | "color"> {
+    /**
+     * Renders headers if set to true.
+     */
+    withHeaders?: boolean;
+}
+export interface RowProps<T> extends CommonProps<T> {
     render?: (args: {
         column: Column<T>;
         rowIndex: number;
         columnIndex: number;
         children: React.ReactNode;
     }) => React.ReactNode;
-    extraRender?: (elt: T, index: number) => React.ReactNode;
 }
-declare function RowsComponent<T>({ data, columns, extraRender, render }: RowProps<T>): JSX.Element;
+declare function RowsComponent<T>({ data, columns, render, extraRender, renderRow, }: RowProps<T>): JSX.Element;
 export declare const Rows: typeof RowsComponent;
-declare function Table<T>({ data, columns, withHeaders, extraRender, ...containerProps }: Props<T>): JSX.Element;
-declare const _default: typeof Table;
-export default _default;
+declare function Table<T>({ data, columns, withHeaders, extraRender, renderRow, ...containerProps }: Props<T>): JSX.Element;
+declare namespace Table {
+    var Columns: typeof import("./Columns");
+    var ExtraRowContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+        gridColumn: string;
+    } & GridColumnProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "gridColumn">;
+    var RowContainer: 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>>> & 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;
+    } & RowContainerProps, "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">;
+}
+declare const memoTable: typeof Table;
+export default memoTable;

package/components/Table/index.js

@@ -13,27 +13,40 @@ import React, { memo, useMemo } from "react";
 import styled from "styled-components";
 import { border, gridColumn } from "styled-system";
 import Grid from "../layout/Grid";
-export const Container = styled(Grid) `
+import Flex from "../layout/Flex";
+import * as Columns from "./Columns";
+const Container = styled(Grid) `
   ${border}
 `;
-export const ExtraRowContainer = styled.div `
+export const ExtraRowContainer = styled.div.attrs({ gridColumn: "1 / -1" }) `
   ${gridColumn}
 `;
-function RowsComponent({ data, columns, extraRender, render }) {
-    return (React.createElement(React.Fragment, { key: "row-component" }, data.map((elt, rowIndex) => (React.createElement(React.Fragment, { key: `row-component-row-${rowIndex}` },
-        columns.map((column, columnIndex) => (React.createElement(React.Fragment, { key: `row-component-column-${rowIndex}${columnIndex}` }, render
-            ? render({
-                column,
-                rowIndex,
-                columnIndex,
-                children: column.render({ elt, rowIndex, columnIndex }),
-            })
-            : column.render({ elt, rowIndex, columnIndex })))),
-        (extraRender && extraRender(elt, rowIndex)) || null)))));
+export const RowContainer = styled(Flex) `
+  display: contents;
+`;
+function RowsComponent({ data, columns, render, extraRender, renderRow, }) {
+    return (React.createElement(React.Fragment, { key: "row-component" }, data.map((elt, rowIndex) => {
+        const row = (React.createElement(React.Fragment, null,
+            columns.map((column, columnIndex) => (React.createElement(React.Fragment, { key: `row-component-column-${rowIndex}${columnIndex}` }, render
+                ? render({
+                    column,
+                    rowIndex,
+                    columnIndex,
+                    children: column.render({ elt, rowIndex, columnIndex }),
+                })
+                : column.render({ elt, rowIndex, columnIndex })))),
+            (extraRender && extraRender(elt, rowIndex)) || null));
+        if (renderRow) {
+            return renderRow(rowIndex, row);
+        }
+        else {
+            return React.createElement(React.Fragment, { key: `row-component-row-${rowIndex}` }, row);
+        }
+    })));
 }
 export const Rows = memo(RowsComponent);
 function Table(_a) {
-    var { data, columns, withHeaders, extraRender } = _a, containerProps = __rest(_a, ["data", "columns", "withHeaders", "extraRender"]);
+    var { data, columns, withHeaders, extraRender, renderRow } = _a, containerProps = __rest(_a, ["data", "columns", "withHeaders", "extraRender", "renderRow"]);
     const gridTemplateColumns = useMemo(() => columns.reduce((acc, col) => `${acc} ${col.layout || "auto"}`, ""), [columns]);
     const headers = useMemo(() => withHeaders
         ? columns.reduce((acc, col, index) => [
@@ -43,6 +56,13 @@ function Table(_a) {
         : null, [withHeaders, columns]);
     return (React.createElement(Container, Object.assign({ gridTemplateColumns: gridTemplateColumns, gridAutoRows: "auto", columns: "none", alignItems: "center" }, containerProps),
         headers,
-        React.createElement(Rows, { data: data, columns: columns, extraRender: extraRender })));
+        React.createElement(Rows, { data: data, columns: columns, extraRender: extraRender, renderRow: renderRow })));
 }
-export default memo(Table);
+Table.Columns = Columns;
+Table.ExtraRowContainer = ExtraRowContainer;
+Table.RowContainer = RowContainer;
+const memoTable = memo(Table);
+memoTable.Columns = Columns;
+memoTable.RowContainer = RowContainer;
+memoTable.ExtraRowContainer = ExtraRowContainer;
+export default memoTable;

package/components/Table/stories.helper.js

@@ -1,7 +1,8 @@
 import React from "react";
 import { useTheme } from "styled-components";
 import Text from "../asorted/Text";
-import { IconColumn, TextColumn } from "./Columns";
+import Table from "./index";
+const { Columns } = Table;
 function Header({ children }) {
     const theme = useTheme();
     return (React.createElement(Text, { fontWeight: "semiBold", variant: "paragraph", style: { borderBottom: `1px solid ${theme.colors.neutral.c40}` }, mx: -4, px: 4, pb: 8 }, children));
@@ -42,27 +43,27 @@ export const balance = {
         },
     ],
     columns: [
-        TextColumn({
+        Columns.text({
             header: () => React.createElement(Header, null, "Currency"),
             title: (elt) => elt.currency,
         }),
-        TextColumn({
+        Columns.text({
             header: () => React.createElement(Header, null, "Amount"),
             title: (elt) => elt.amount,
             subtitle: (elt) => elt.counterValue,
         }),
-        TextColumn({
+        Columns.text({
             header: () => React.createElement(Header, null, "Address"),
             subtitle: (elt) => elt.address,
         }),
-        TextColumn({
+        Columns.text({
             header: () => React.createElement(Header, null, "Evolution"),
             subtitle: (elt) => (elt.evolution > 0 ? "+" : "") + elt.evolution,
             subtitleProps: (elt) => ({
                 color: elt.evolution < 0 ? "error.c100" : "success.c100",
             }),
         }),
-        IconColumn({
+        Columns.icon({
             header: () => React.createElement(Header, null, "\u00A0"),
             props: (elt) => ({
                 name: "StarSolid",
@@ -137,33 +138,33 @@ export const accounts = {
             layout: "64px",
             render: ({ elt }) => elt.currency.abbrev === "BTC" ? svgBtc : elt.currency.abbrev === "ETH" ? svgEth : svgUsdt,
         },
-        TextColumn({
+        Columns.text({
             layout: "2fr",
             title: (elt) => elt.name,
             subtitle: (elt) => elt.currency.name,
         }),
-        IconColumn({
+        Columns.icon({
             props: (elt) => ({
                 name: elt.synchronized ? "CircledCheck" : "Clock",
                 color: elt.synchronized ? "success.c100" : "neutral.c80",
             }),
         }),
-        TextColumn({
+        Columns.text({
             layout: "1fr",
             subtitle: (elt) => elt.currency.abbrev,
         }),
-        TextColumn({
+        Columns.text({
             layout: "1fr",
             title: (elt) => elt.amount,
         }),
-        TextColumn({
+        Columns.text({
             layout: "1fr",
             subtitle: (elt) => (elt.evolution > 0 ? "+" : "") + elt.evolution,
             subtitleProps: (elt) => ({
                 color: elt.evolution < 0 ? "error.c100" : "success.c100",
             }),
         }),
-        IconColumn({
+        Columns.icon({
             props: (elt) => ({
                 name: "StarSolid",
                 color: elt.starred ? "neutral.c100" : "neutral.c70",

package/components/animations/GlitchText/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface GlitchTextProps {
     text: string;
     duration?: number;

package/components/asorted/Divider/index.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-declare type Props = {
+export declare type Props = {
     variant: "default" | "light";
 };
 declare const _default: ({ variant }: Props) => JSX.Element;

package/components/asorted/Icon/BoxedIcon.d.ts

@@ -0,0 +1,48 @@
+import React from "react";
+export declare const DEFAULT_BOX_SIZE = 40;
+export declare const DEFAULT_ICON_SIZE = 16;
+export declare const DEFAULT_BADGE_SIZE = 20;
+export declare type IconProps = {
+    size?: number;
+    color?: string;
+};
+export declare type IconBoxProps = {
+    /**
+     * Component that takes `{size?: number; color?: string}` as props. Will be rendered at the top right with the size provided in `badgeSize` or a default size.
+     */
+    Badge?: React.ComponentType<IconProps> | ((props: IconProps) => JSX.Element);
+    /**
+     * Color of the border
+     */
+    borderColor?: string;
+    /**
+     * Badge color, will be applied to the component provided in the `Badge` prop
+     */
+    badgeColor?: string;
+    /**
+     * Badge size, will be applied to the component provided in the `Badge` prop
+     */
+    badgeSize?: number;
+    children?: JSX.Element;
+    /**
+     * Box size for preview
+     */
+    size?: number;
+};
+export declare type BoxedIconProps = IconBoxProps & {
+    /**
+     * Component that takes `{size?: number; color?: string}` as props. Will be rendered at the top right with the size provided in `iconSize` or a default size.
+     */
+    Icon: React.ComponentType<IconProps> | ((props: IconProps) => JSX.Element);
+    /**
+     * Icon size, will be applied to the component provided in the `Icon` prop
+     */
+    iconSize?: number;
+    /**
+     * Icon color, will be applied to the component provided in the `Icon` prop
+     */
+    iconColor?: string;
+};
+export declare const IconBox: ({ Badge, size, children, borderColor, badgeColor, badgeSize, }: IconBoxProps) => JSX.Element;
+declare const BoxedIcon: ({ Icon, iconSize, iconColor, ...iconBoxProps }: BoxedIconProps) => JSX.Element;
+export default BoxedIcon;

package/components/asorted/Icon/BoxedIcon.js

@@ -0,0 +1,62 @@
+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 Flex from "../../layout/Flex";
+export const DEFAULT_BOX_SIZE = 40;
+export const DEFAULT_ICON_SIZE = 16;
+export const DEFAULT_BADGE_SIZE = 20;
+function getClipRectangleSize(badgeSize) {
+    return (3 / 4) * badgeSize;
+}
+const getTopRightSquareClippedPolygon = (boxSize, rectangleSize) => {
+    // clipping path that hides top right square of size `${rectangleSize}px`
+    const diff = boxSize - rectangleSize;
+    return `polygon(0 0, 0 0, 0 0, ${diff}px 0, ${diff}px ${rectangleSize}px, 100% ${rectangleSize}px, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 100%)`;
+};
+const Container = styled(Flex).attrs((p) => ({
+    heigth: p.size,
+    width: p.size,
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+})) ``;
+const IconBoxBackground = styled(Flex) `
+  position: absolute;
+  height: ${(p) => p.size}px;
+  width: ${(p) => p.size}px;
+  ${(p) => {
+    return (p.hasBadge &&
+        `clip-path: ${getTopRightSquareClippedPolygon(p.size, getClipRectangleSize(p.badgeSize))};`);
+}};
+  border-radius: ${(p) => p.theme.radii[2]}px;
+`;
+const BadgeContainer = styled.div `
+  position: absolute;
+  ${(p) => `
+    top: -${p.badgeSize / 2 - 2}px;
+    right: -${p.badgeSize / 2 - 2}px;`}
+`;
+export const IconBox = ({ Badge, size = DEFAULT_BOX_SIZE, children, borderColor = "neutral.c40", badgeColor, badgeSize = DEFAULT_BADGE_SIZE, }) => {
+    const hasBadge = !!Badge;
+    return (React.createElement(Container, { size: size },
+        React.createElement(IconBoxBackground, { size: size, badgeSize: badgeSize, hasBadge: hasBadge, border: "1px solid", borderColor: borderColor }),
+        children,
+        hasBadge && (React.createElement(BadgeContainer, { badgeSize: badgeSize },
+            React.createElement(Badge, { size: badgeSize, color: badgeColor })))));
+};
+const BoxedIcon = (_a) => {
+    var { Icon, iconSize = DEFAULT_ICON_SIZE, iconColor } = _a, iconBoxProps = __rest(_a, ["Icon", "iconSize", "iconColor"]);
+    return (React.createElement(IconBox, Object.assign({}, iconBoxProps),
+        React.createElement(Icon, { size: iconSize || DEFAULT_ICON_SIZE, color: iconColor })));
+};
+export default BoxedIcon;

package/components/asorted/Icon/Icon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type Props = {
     name: string;
     size?: number;
@@ -7,5 +6,4 @@ export declare type Props = {
 };
 export declare const iconNames: string[];
 declare const Icon: ({ name, size, color, weight, }: Props) => JSX.Element | null;
-export declare const IconBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export default Icon;

package/components/asorted/Icon/Icon.js

@@ -1,6 +1,5 @@
 import * as icons from "@ledgerhq/icons-ui/react";
 import React from "react";
-import styled from "styled-components";
 export const iconNames = Array.from(Object.keys(icons).reduce((set, rawKey) => {
     const key = rawKey
         .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, "$1")
@@ -18,10 +17,4 @@ const Icon = ({ name, size = 16, color = "currentColor", weight = "Medium", }) =
     }
     return null;
 };
-export const IconBox = styled.div `
-  padding: ${(p) => p.theme.space[6]}px;
-  border: 1px solid ${(p) => p.theme.colors.neutral.c40};
-  border-radius: ${(p) => p.theme.radii[2]}px;
-  display: inline-flex;
-`;
 export default Icon;

package/components/asorted/Icon/index.d.ts

@@ -1,2 +1,4 @@
-export { default, iconNames, IconBox } from "./Icon";
+export { default, iconNames } from "./Icon";
+import BoxedIcon, { IconBox } from "./BoxedIcon";
+export { BoxedIcon, IconBox };
 export type { Props } from "./Icon";

package/components/asorted/Icon/index.js

@@ -1 +1,3 @@
-export { default, iconNames, IconBox } from "./Icon";
+export { default, iconNames } from "./Icon";
+import BoxedIcon, { IconBox } from "./BoxedIcon";
+export { BoxedIcon, IconBox };

package/components/asorted/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Divider } from "./Divider";
-export { default as Icon, IconBox } from "./Icon";
+export { default as Icon, IconBox, BoxedIcon } from "./Icon";
 export { default as Text } from "./Text";

package/components/asorted/index.js

@@ -1,3 +1,3 @@
 export { default as Divider } from "./Divider";
-export { default as Icon, IconBox } from "./Icon";
+export { default as Icon, IconBox, BoxedIcon } from "./Icon";
 export { default as Text } from "./Text";

package/components/cta/Button/index.d.ts

@@ -14,13 +14,14 @@ interface BaseProps extends BaseStyledProps, BordersProps {
     iconButton?: boolean;
     disabled?: boolean;
 }
-export interface ButtonProps extends BaseProps {
+export interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {
+    iconName?: string;
     Icon?: React.ComponentType<{
         size: number;
         color?: string;
     }>;
     children?: React.ReactNode;
-    onClick: (event?: React.SyntheticEvent<HTMLButtonElement>) => void;
+    onClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
     iconSize?: number;
     style?: React.CSSProperties;
 }
@@ -29,13 +30,15 @@ export declare const Base: import("styled-components").StyledComponent<"button",
     fontFamily: string;
     fontSize: number;
 } & BaseProps, "fontFamily" | "fontSize">;
-declare const Button: {
-    ({ Icon, iconPosition, iconSize, children, onClick, ...props }: ButtonProps): React.ReactElement;
+declare const ButtonWithRef: {
+    ({ Icon, iconPosition, iconSize, children, onClick, iconName, ...props }: ButtonProps, ref?: React.ForwardedRef<HTMLButtonElement> | undefined): React.ReactElement;
     Unstyled: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+    Expand: React.ForwardRefExoticComponent<Pick<ButtonProps & {
+        onToggle?: ((arg0: boolean) => void) | undefined;
+    }, "overflow" | "p" | "style" | "key" | "color" | "children" | "onClick" | "variant" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontSize" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "outline" | "padding" | "disabled" | "onToggle" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY" | "Icon" | "iconSize" | "ff" | "iconPosition" | "iconButton" | "iconName"> & React.RefAttributes<HTMLButtonElement>>;
 };
-export declare type ExpandButtonProps = React.PropsWithChildren<{
+export declare type ButtonExpandProps = React.PropsWithChildren<ButtonProps & {
     onToggle?: (arg0: boolean) => void;
-    onClick?: (arg0: React.SyntheticEvent<HTMLButtonElement>) => void;
 }>;
-export declare const ExpandButton: ({ onToggle, onClick, ...props }: ExpandButtonProps) => React.ReactElement;
-export default Button;
+export declare function ButtonExpand({ onToggle, onClick, ...props }: ButtonExpandProps, ref?: React.ForwardedRef<HTMLButtonElement>): React.ReactElement;
+export default ButtonWithRef;