@ledgerhq/react-ui 0.2.0 → 0.5.0

package/README.md

@@ -10,7 +10,7 @@
 
 ## Reference
 
-[📚 The storybook is hosted here.](https://ledger-live-ui-react.vercel.app/)
+**[🔗 Storybook](https://ledger-live-ui-react.vercel.app/)**
 
 ## Installation
 
@@ -20,7 +20,15 @@
 npm i @ledgerhq/react-ui
 ```
 
-_And if the React packages are not installed:_
+### Peer dependencies
+
+This library uses [styled components](https://styled-components.com/) heavily and relies on it being installed separately (to avoid package duplication).
+
+```sh
+npm i styled-components
+```
+
+And (obviously) if React packages are not already installed:
 
 ```sh
 npm i react react-dom
@@ -51,7 +59,7 @@ import { Text, Flex, Logos } from "@ledgerhq/react-ui";
 function Hello() {
   return (
     <Flex flexDirection="column" alignItems="center" rowGap={12} p={12}>
-      <Text color="palette.neutral.c100">
+      <Text color="neutral.c100">
         <Logos.LedgerLiveRegular />
       </Text>
       <Text variant="h1">Hello, world!</Text>
@@ -92,6 +100,41 @@ With webpack 5 the rule below will process the font files and save them in the `
 },
 ```
 
+#### Scoped Imports
+
+If you are using a loader that saves the fonts with custom names (for instance when using `create-react-app`), you can use the `fontMappings` prop to map the font names.
+
+```js
+// These imports return the path to the public folder where the loader saves the fonts during the build.
+import HMAlphaMono from "@ledgerhq/react-ui/assets/fonts/HMAlphaMono-Medium.woff2";
+import InterBold from "@ledgerhq/react-ui/assets/fonts/Inter-Bold.woff2";
+import InterExtraBold from "@ledgerhq/react-ui/assets/fonts/Inter-ExtraBold.woff2";
+import InterExtraLight from "@ledgerhq/react-ui/assets/fonts/Inter-ExtraLight-BETA.woff2";
+import InterLight from "@ledgerhq/react-ui/assets/fonts/Inter-Light-BETA.woff2";
+import InterMedium from "@ledgerhq/react-ui/assets/fonts/Inter-Medium.woff2";
+import InterRegular from "@ledgerhq/react-ui/assets/fonts/Inter-Regular.woff2";
+import InterSemiBold from "@ledgerhq/react-ui/assets/fonts/Inter-SemiBold.woff2";
+
+// Map the font names with the file path.
+const fontMap = {
+  "HMAlphaMono-Medium": HMAlphaMono,
+  "Inter-Bold": InterBold,
+  "Inter-ExtraBold": InterExtraBold,
+  "Inter-ExtraLight-BETA": InterExtraLight,
+  "Inter-Light-BETA": InterLight,
+  "Inter-Medium": InterMedium,
+  "Inter-Regular": InterRegular,
+  "Inter-SemiBold": InterSemiBold,
+};
+
+// The substring call is used to make the path relative (removes the prepending /).
+const fontMappings = (name) => fontMap[name].substring(1);
+
+/* … */
+
+<StyleProvider fontPath="path/to/fonts" fontMappings={fontMappings}>
+```
+
 #### Manually
 
 The `.woff2` font files are located in the `src/assets/fonts` folder.
@@ -129,7 +172,7 @@ function Root() {
   return (
     <StyleProvider fontsPath="assets" selectedPalette={palette}>
       <Flex flexDirection="column" alignItems="center" rowGap={12} p={12}>
-        <Text color="palette.neutral.c100">
+        <Text color="neutral.c100">
           <Logos.LedgerLiveRegular />
         </Text>
         <Text variant="h1">Hello, world!</Text>

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/Chart/index.js

@@ -72,7 +72,7 @@ const defaultValue = {
 export default (_a) => {
     var { data, color, variant = defaultValue.variant, valueKey = defaultValue.valueKey, timeOptions = defaultValue.timeOptions } = _a, chartProps = __rest(_a, ["data", "color", "variant", "valueKey", "timeOptions"]);
     const theme = useTheme();
-    const config = useMemo(() => getConfig(variant, { gridColor: theme.colors.palette.neutral.c40, timeOptions }), [variant, theme.colors.palette.neutral.c40, timeOptions]);
+    const config = useMemo(() => getConfig(variant, { gridColor: theme.colors.neutral.c40, timeOptions }), [variant, theme.colors.neutral.c40, timeOptions]);
     // inject default font configuration at mount
     useEffect(() => {
         defaults.font = fontConfig;

package/components/Table/Columns.d.ts

@@ -1,34 +1,83 @@
 import React from "react";
 import { Props as IconProps } from "../asorted/Icon";
-import Text, { BaseTextProps } from "../asorted/Text";
+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, }: {
-    props: (elt: T) => Pick<IconProps, "name" | "weight"> & BaseTextProps;
-    header?: HeaderFn;
+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;
+    /**
+     * 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" },
-            title && (React.createElement(Text, Object.assign({ fontWeight: "medium", variant: "body", textOverflow: "ellipsis", overflow: "hidden", color: "palette.neutral.c100" }, ((titleProps && titleProps(elt)) || {})), title(elt))),
-            subtitle && (React.createElement(Text, Object.assign({ fontWeight: "medium", variant: "paragraph", textOverflow: "ellipsis", overflow: "hidden", color: "palette.neutral.c80" }, ((subtitleProps && subtitleProps(elt)) || {})), subtitle(elt))))),
+        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

@@ -1,33 +1,66 @@
 import React from "react";
-import { SpaceProps, ColorProps, BorderProps, FlexboxProps, GridColumnProps } from "styled-system";
+import { BorderProps, GridColumnProps } from "styled-system";
 import { Props as GridProps } from "../layout/Grid";
 import type { Column } from "./Columns";
+import { BaseStyledProps } from "../styled";
 export type { Column };
-export interface ContainerExtraProps extends SpaceProps, ColorProps, BorderProps, FlexboxProps {
+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

@@ -11,32 +11,42 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { memo, useMemo } from "react";
 import styled from "styled-components";
-import { space, color, border, flexbox, gridColumn, } from "styled-system";
+import { border, gridColumn } from "styled-system";
 import Grid from "../layout/Grid";
-export const Container = styled(Grid) `
-  ${space}
-  ${color}
+import Flex from "../layout/Flex";
+import * as Columns from "./Columns";
+const Container = styled(Grid) `
   ${border}
-  ${flexbox}
 `;
-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) => [
@@ -46,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,10 +1,11 @@
 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.palette.neutral.c40}` }, mx: -4, px: 4, pb: 8 }, children));
+    return (React.createElement(Text, { fontWeight: "semiBold", variant: "paragraph", style: { borderBottom: `1px solid ${theme.colors.neutral.c40}` }, mx: -4, px: 4, pb: 8 }, children));
 }
 export const balance = {
     data: [
@@ -42,31 +43,31 @@ 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 ? "palette.error.c100" : "palette.success.c100",
+                color: elt.evolution < 0 ? "error.c100" : "success.c100",
             }),
         }),
-        IconColumn({
+        Columns.icon({
             header: () => React.createElement(Header, null, "\u00A0"),
             props: (elt) => ({
                 name: "StarSolid",
-                color: elt.starred ? "palette.neutral.c100" : "palette.neutral.c70",
+                color: elt.starred ? "neutral.c100" : "neutral.c70",
             }),
         }),
     ],
@@ -137,36 +138,36 @@ 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 ? "palette.success.c100" : "palette.neutral.c80",
+                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 ? "palette.error.c100" : "palette.success.c100",
+                color: elt.evolution < 0 ? "error.c100" : "success.c100",
             }),
         }),
-        IconColumn({
+        Columns.icon({
             props: (elt) => ({
                 name: "StarSolid",
-                color: elt.starred ? "palette.neutral.c100" : "palette.neutral.c70",
+                color: elt.starred ? "neutral.c100" : "neutral.c70",
             }),
         }),
     ],

package/components/Tag/index.d.ts

@@ -1,6 +1,10 @@
 import React from "react";
-import { BorderProps, ColorProps } from "styled-system";
-export declare type Props = React.PropsWithChildren<{
+import { BorderProps } from "styled-system";
+import { TextProps } from "../asorted/Text";
+import { BaseStyledProps } from "../styled";
+export declare type Size = "large" | "medium" | "small";
+export declare type Type = "plain" | "opacity" | "outlined" | "outlinedOpacity";
+export declare type TagProps = BaseStyledProps & BorderProps & React.PropsWithChildren<{
     /**
      * Changes the appearance based on the active state.
      */
@@ -8,6 +12,15 @@ export declare type Props = React.PropsWithChildren<{
     /**
      * Tag style.
      */
-    type?: "plain" | "opacity" | "outlined";
-} & BorderProps & ColorProps>;
-export default function Tag({ children, ...props }: Props): JSX.Element;
+    type?: Type;
+    /**
+     * Size of the tag, affects the padding and the casing (uppercase for small and medium)
+     */
+    size?: Size;
+    /**
+     * Props passed to the text component, overriding props set internally by Tag component
+     */
+    textProps?: TextProps;
+    disabled?: boolean;
+}>;
+export default function Tag({ children, textProps, size, ...props }: TagProps): JSX.Element;