@ledgerhq/react-ui 0.3.1 → 0.7.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
 
@@ -22,7 +22,7 @@ npm i @ledgerhq/react-ui
 
 ### Peer dependencies
 
-This library uses [styled components](https://styled-components.com/) heavily relies on it being installed separately (to avoid package duplication).
+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
@@ -59,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>
@@ -172,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, { 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" },
-            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

@@ -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,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.js

@@ -17,18 +17,18 @@ function getColor({ type, active, disabled }) {
     switch (type) {
         case "plain":
             if (disabled)
-                return active ? "palette.neutral.c00" : "palette.neutral.c70";
-            return active ? "palette.neutral.c00" : "palette.primary.c90";
+                return active ? "neutral.c00" : "neutral.c70";
+            return active ? "neutral.c00" : "primary.c90";
         default:
-            return disabled ? "palette.neutral.c70" : "palette.primary.c90";
+            return disabled ? "neutral.c70" : "primary.c90";
     }
 }
 function getBgColor({ type, active, disabled }) {
     switch (type) {
         case "plain":
-            return active ? (disabled ? "palette.neutral.c70" : "palette.primary.c90") : undefined;
+            return active ? (disabled ? "neutral.c70" : "primary.c90") : undefined;
         case "opacity":
-            return active ? (disabled ? "palette.neutral.c30" : "palette.primary.c20") : undefined;
+            return active ? (disabled ? "neutral.c30" : "primary.c20") : undefined;
         default:
             return;
     }
@@ -38,9 +38,9 @@ function getBorderColor({ type, active, disabled }) {
         return;
     switch (type) {
         case "outlined":
-            return disabled ? "palette.neutral.c70" : "palette.primary.c90";
+            return disabled ? "neutral.c70" : "primary.c90";
         case "outlinedOpacity":
-            return disabled ? "palette.neutral.c40" : "palette.primary.c40";
+            return disabled ? "neutral.c40" : "primary.c40";
     }
 }
 function getPadding({ size }) {

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,4 +1,3 @@
-/// <reference types="react" />
 declare type Props = {
     variant: "default" | "light";
 };

package/components/asorted/Divider/index.js

@@ -2,11 +2,11 @@ import React from "react";
 import styled from "styled-components";
 const Divider = styled.div `
   display: block;
-  background: ${(p) => p.theme.colors.palette.neutral.c90};
+  background: ${(p) => p.theme.colors.neutral.c90};
   height: 1px;
 
   &[data-variant="light"] {
-    background: ${(p) => p.theme.colors.palette.neutral.c40};
+    background: ${(p) => p.theme.colors.neutral.c40};
   }
 `;
 export default ({ variant = "default" }) => React.createElement(Divider, { "data-variant": variant });

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;