@ledgerhq/react-ui 0.1.1 → 0.4.0

package/components/navigation/Breadcrumb/index.js

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

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

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

package/components/navigation/progress/ProgressBar/Onboarding.js

@@ -15,12 +15,12 @@ const Bar = styled.div `
   border-top-${(p) => (p.on ? "right" : "left")}-radius: 0;
   border-bottom-${(p) => (p.on ? "right" : "left")}-radius: 0;
   flex: ${(p) => p.fill};
-  background: ${(p) => p.on ? p.theme.colors.palette.neutral.c100 : p.theme.colors.palette.neutral.c40};
+  background: ${(p) => (p.on ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c40)};
 `;
 const Handler = styled.div `
   transition: all 600ms linear;
   padding: 4px;
-  background: ${(p) => p.theme.colors.palette.neutral.c100};
+  background: ${(p) => p.theme.colors.neutral.c100};
   border-radius: ${(p) => `${p.theme.radii[1]}px`};
 
   display: flex;
@@ -35,8 +35,8 @@ const Handler = styled.div `
     width: 16px;
     justify-content: center;
     align-items: center;
-    color: ${(p) => p.theme.colors.palette.neutral.c100};
-    background: ${(p) => p.theme.colors.palette.neutral.c00};
+    color: ${(p) => p.theme.colors.neutral.c100};
+    background: ${(p) => p.theme.colors.neutral.c00};
   }
 `;
 const Onboarding = ({ steps, currentIndex }) => {
@@ -45,8 +45,8 @@ const Onboarding = ({ steps, currentIndex }) => {
     return (React.createElement(Container, null,
         React.createElement(Bar, { on: true, fill: fill }),
         React.createElement(Handler, { key: currentStep.key },
-            React.createElement(Text, { className: "index", color: "palette.neutral.c00", ff: "Inter|Regular", fontWeight: "500", fontSize: 1 }, currentIndex + 1),
-            React.createElement(Text, { color: "palette.neutral.c00", ff: "Inter|Regular", fontWeight: "500", textTransform: "uppercase", fontSize: 1 }, currentStep.label)),
+            React.createElement(Text, { className: "index", color: "neutral.c00", fontWeight: "medium", variant: "micro" }, currentIndex + 1),
+            React.createElement(Text, { color: "neutral.c00", fontWeight: "medium", textTransform: "uppercase", variant: "micro" }, currentStep.label)),
         React.createElement(Bar, { fill: 100 - Number(fill) })));
 };
 export default Onboarding;

package/components/navigation/progress/Stepper/index.js

@@ -24,7 +24,7 @@ export const Item = {
     ${space}
   `,
     Current: styled.div.attrs({
-        backgroundColor: "palette.primary.c90",
+        backgroundColor: "primary.c90",
     }) `
     width: 6px;
     height: 6px;
@@ -32,7 +32,7 @@ export const Item = {
     ${color}
   `,
     Pending: styled.div.attrs({
-        backgroundColor: "palette.neutral.c70",
+        backgroundColor: "neutral.c70",
     }) `
     width: ${(p) => p.theme.space[2]}px;
     height: ${(p) => p.theme.space[2]}px;
@@ -45,19 +45,19 @@ export const Item = {
 const StepText = styled(Text) `
   color: ${(p) => {
     if (p.errored) {
-        return p.theme.colors.palette.error.c100;
+        return p.theme.colors.error.c100;
     }
     if (p.inactive) {
-        return p.theme.colors.palette.neutral.c70;
+        return p.theme.colors.neutral.c70;
     }
-    return p.theme.colors.palette.neutral.c100;
+    return p.theme.colors.neutral.c100;
 }};
 `;
 const BaseSeparator = styled.div `
   flex: 1;
   position: relative;
   overflow-x: hidden;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c40};
+  background-color: ${(p) => p.theme.colors.neutral.c40};
   height: 1px;
   top: ${(p) => p.theme.space[5]}px;
 `;
@@ -68,11 +68,11 @@ const Separator = {
 const stepContentsByState = {
     pending: (React.createElement(Item.Container, null,
         React.createElement(Item.Pending, null))),
-    current: (React.createElement(Item.Container, { backgroundColor: "palette.primary.c20", borderRadius: "8px" },
+    current: (React.createElement(Item.Container, { backgroundColor: "primary.c20", borderRadius: "8px" },
         React.createElement(Item.Current, null))),
-    completed: (React.createElement(Item.Container, { color: "palette.primary.c90", backgroundColor: "palette.primary.c20", borderRadius: "8px" },
+    completed: (React.createElement(Item.Container, { color: "primary.c90", backgroundColor: "primary.c20", borderRadius: "8px" },
         React.createElement(Item.Completed, null))),
-    errored: (React.createElement(Item.Container, { color: "palette.error.c100", backgroundColor: "palette.warning.c30", borderRadius: "8px" },
+    errored: (React.createElement(Item.Container, { color: "error.c100", backgroundColor: "warning.c30", borderRadius: "8px" },
         React.createElement(Item.Errored, null))),
 };
 export const Step = memo(function Step({ state, label, hideLeftSeparator, nextState, }) {
@@ -84,7 +84,7 @@ export const Step = memo(function Step({ state, label, hideLeftSeparator, nextSt
             (!hideLeftSeparator && React.createElement(Separator.Item, { inactive: inactive, position: "left" })) || (React.createElement(Flex, { flex: "1" })),
             stepContentsByState[state],
             (nextState && React.createElement(Separator.Item, { inactive: nextInactive, position: "right" })) || (React.createElement(Flex, { flex: "1" }))),
-        React.createElement(StepText, { inactive: inactive, errored: errored, type: "navigation" }, label)));
+        React.createElement(StepText, { inactive: inactive, errored: errored, variant: "small" }, label)));
 });
 function getState(activeIndex, index, errored) {
     if (activeIndex < index) {

package/components/navigation/sideBar/Item/Item.d.ts

@@ -1,16 +1,13 @@
 /// <reference types="react" />
-export declare const ItemLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
-    color: string;
-    className: string;
-} & import("../../../asorted/Text").BaseTextProps & {
-    theme: import("../../../../styles/theme").Theme;
-}, "className" | "color">;
+export declare const ItemLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../../asorted/Text").TextProps, keyof import("../../../asorted/Text").TextProps>;
 export declare type ItemType = {
     label: string;
     children: JSX.Element;
     onClick: () => void;
     isActive?: boolean;
     isDisabled?: boolean;
+    displayNotificationBadge?: boolean;
+    customNotificationBadge?: JSX.Element;
 };
-declare const Item: ({ label, children, onClick, isActive, isDisabled }: ItemType) => JSX.Element;
+declare const Item: ({ label, children, onClick, isActive, isDisabled, displayNotificationBadge, customNotificationBadge, }: ItemType) => JSX.Element;
 export default Item;

package/components/navigation/sideBar/Item/Item.js

@@ -3,10 +3,11 @@ import styled from "styled-components";
 import SideBarContext from "../index";
 import Text from "../../../asorted/Text";
 import TransitionInOut from "../../../transitions/TransitionInOut";
+import Flex from "../../../layout/Flex";
 const ItemWrapper = styled.li `
   /** DEFAULT VARIANT **/
-  --ll-sidebar-item-label-color: ${(props) => props.theme.colors.palette.neutral.c80};
-  --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.palette.neutral.c80};
+  --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c80};
+  --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.neutral.c80};
   --ll-sidebar-item-background-color: unset;
 
   display: flex;
@@ -25,8 +26,8 @@ const ItemWrapper = styled.li `
 
   /** HOVER VARIANT **/
   &:hover {
-    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.palette.neutral.c100};
-    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.palette.primary.c90};
+    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c100};
+    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.primary.c80};
     --ll-sidebar-item-background-color: unset;
   }
 
@@ -37,37 +38,54 @@ const ItemWrapper = styled.li `
   }
 
   /** ACTIVE VARIANT **/
-  &[data-active] {
-    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.palette.neutral.c100};
-    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.palette.primary.c90};
-    --ll-sidebar-item-background-color: ${(props) => props.theme.colors.palette.primary.c20};
+  &[data-active="true"] {
+    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c100};
+    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.primary.c80};
+    --ll-sidebar-item-background-color: ${(props) => props.theme.colors.primary.c20};
   }
 
   /** DISABLE VARIANT **/
-  &[data-disable] {
-    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.palette.neutral.c80};
-    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.palette.neutral.c80};
+  &[data-disable="true"] {
+    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c80};
+    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.neutral.c80};
     --ll-sidebar-item-background-color: unset;
     opacity: 0.3;
     cursor: unset;
+    pointer-events: none;
   }
 `;
+const CollapsedBadgeContainer = styled.div `
+  position: absolute;
+  margin-top: -${(p) => p.theme.space[11]}px;
+  margin-left: ${(p) => p.theme.space[8]}px;
+`;
+const DefaultBadge = styled.div `
+  height: ${(p) => p.theme.space[4]}px;
+  width: ${(p) => p.theme.space[4]}px;
+  border-radius: ${(p) => p.theme.radii[2]}px;
+  background-color: ${(p) => p.theme.colors.primary.c80};
+`;
 export const ItemLabel = styled(Text) `
   display: inline-block;
   color: var(--ll-sidebar-item-label-color);
 
   text-transform: capitalize;
 `;
-const Item = ({ label, children, onClick, isActive, isDisabled }) => {
+const Item = ({ label, children, onClick, isActive, isDisabled, displayNotificationBadge, customNotificationBadge, }) => {
     const { isExpanded } = useContext(SideBarContext);
     const handleClick = () => {
         if (isDisabled)
             return;
         onClick();
     };
-    return (React.createElement(ItemWrapper, { role: "button", onClick: handleClick, "data-active": isActive, "data-disable": isDisabled, tabIndex: 0 },
-        children,
-        React.createElement(TransitionInOut, { timeout: 300, in: isExpanded, unmountOnExit: true, mountOnEnter: true, style: { transitionDelay: isExpanded ? "300ms" : 0 } },
-            React.createElement(ItemLabel, { type: "cta" }, label))));
+    const badge = customNotificationBadge !== null && customNotificationBadge !== void 0 ? customNotificationBadge : React.createElement(DefaultBadge, null);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ItemWrapper, { role: "button", onClick: handleClick, "data-active": isActive, "data-disable": isDisabled, tabIndex: 0 },
+            children,
+            React.createElement(CollapsedBadgeContainer, null,
+                React.createElement(TransitionInOut, { unmountOnExit: true, mountOnEnter: true, in: !isExpanded, style: { transitionDelay: !isExpanded ? "200ms" : 0 } }, displayNotificationBadge && badge)),
+            React.createElement(TransitionInOut, { timeout: 200, in: isExpanded, unmountOnExit: true, mountOnEnter: true, style: { transitionDelay: isExpanded ? "200ms" : 0, display: "flex", flex: "1" } },
+                React.createElement(ItemLabel, { variant: "paragraph" }, label),
+                React.createElement(Flex, { alignItems: "center", justifyContent: "flex-end", ml: 2, flexGrow: 1 }, displayNotificationBadge && badge)))));
 };
 export default Item;

package/components/navigation/sideBar/SideBar/SideBar.d.ts

@@ -6,6 +6,6 @@ export declare type SideBarProps = {
 };
 declare const SideBar: {
     ({ children, onToggle, isExpanded }: SideBarProps): JSX.Element;
-    Item: ({ label, children, onClick, isActive, isDisabled }: import("../Item/Item").ItemType) => JSX.Element;
+    Item: ({ label, children, onClick, isActive, isDisabled, displayNotificationBadge, customNotificationBadge, }: import("../Item/Item").ItemType) => JSX.Element;
 };
 export default SideBar;

package/components/navigation/sideBar/SideBar/SideBar.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from "react";
+import React, { useMemo, useState } from "react";
 import { CSSTransition } from "react-transition-group";
 import styled from "styled-components";
 import SideBarContext from "../../../navigation/sideBar";
@@ -12,10 +12,10 @@ const Nav = styled(Flex) `
   row-gap: 1.5rem;
   height: 100vh;
   max-width: 14.875rem;
-  color: ${(props) => props.theme.colors.palette.neutral.c100};
-  border-right: 1px solid ${(props) => props.theme.colors.palette.neutral.c90};
-  background-color: ${(props) => props.theme.colors.palette.neutral.c00};
-  transition: max-width 300ms;
+  color: ${(props) => props.theme.colors.neutral.c100};
+  border-right: 1px solid ${(props) => props.theme.colors.neutral.c40};
+  background-color: ${(props) => props.theme.colors.background.main};
+  transition: max-width 200ms;
   will-change: max-width;
 
   &.nav-enter {
@@ -31,12 +31,20 @@ const Nav = styled(Flex) `
     max-width: ${(p) => `${p.theme.space[19]}px`};
   }
 `;
+const TransparentMouseZone = styled.div `
+  position: absolute;
+  left: 100%;
+  top: 0;
+  width: ${(p) => `${p.theme.space[8]}px`};
+  height: 100%;
+`;
 const SideBar = ({ children, onToggle, isExpanded = true }) => {
     const [isToggleDisplayed, setToggleDisplayed] = useState(false);
     const providerValue = useMemo(() => ({ isExpanded, onToggle }), [isExpanded, onToggle]);
     return (React.createElement(SideBarContext.Provider, { value: providerValue },
-        React.createElement(CSSTransition, { in: isExpanded, timeout: 300, classNames: "nav" },
+        React.createElement(CSSTransition, { in: isExpanded, timeout: 200, classNames: "nav" },
             React.createElement(Nav, { flexDirection: "column", justifyContent: "flex-start", alignContent: "stretch", role: "navigation", "aria-label": "Main", onMouseEnter: () => setToggleDisplayed(true), onMouseLeave: () => setToggleDisplayed(false) },
+                React.createElement(TransparentMouseZone, null),
                 React.createElement(Toggle, { isDisplayed: isToggleDisplayed }),
                 React.createElement(Logo, null),
                 React.createElement(Flex, { flexDirection: "column", justifyContent: "flex-start", alignContent: "stretch" }, children)))));

package/components/navigation/sideBar/Toggle/Toggle.js

@@ -15,8 +15,8 @@ const ToggleButtonContainer = styled(TransitionInOut) `
   right: calc(var(--ll-side-bar-toggle-button-size) / -2);
   cursor: pointer;
 
-  background: ${(p) => p.theme.colors.palette.neutral.c00};
-  border: 1px solid ${(p) => p.theme.colors.palette.neutral.c100};
+  background: ${(p) => p.theme.colors.neutral.c20};
+  border: 1px solid ${(p) => p.theme.colors.neutral.c100};
   border-radius: 50%;
   width: var(--ll-side-bar-toggle-button-size);
   height: var(--ll-side-bar-toggle-button-size);

package/components/styled.d.ts

@@ -0,0 +1,13 @@
+import { StyledInterface, InterpolationFunction } from "styled-components";
+import { FlexboxProps, SpaceProps, PositionProps, ColorProps, LayoutProps, OverflowProps } from "styled-system";
+export declare type BaseStyledProps = SpaceProps & FlexboxProps & PositionProps & ColorProps & LayoutProps & OverflowProps & {
+    columnGap?: string | number;
+    rowGap?: string | number;
+    color?: string;
+    display?: string;
+    position?: string;
+    maxHeight?: number;
+};
+export declare const baseStyles: InterpolationFunction<unknown>;
+declare const _default: StyledInterface;
+export default _default;

package/components/styled.js

@@ -0,0 +1,13 @@
+import gaps from "../styles/system/gaps";
+import styled from "styled-components";
+import { compose, flexbox, space, position, color, layout, overflow, } from "styled-system";
+export const baseStyles = compose(flexbox, space, position, color, layout, overflow, gaps);
+const proxyStyled = new Proxy(styled, {
+    apply(target, thisArg, argumentsList) {
+        return styled(target.apply(thisArg, argumentsList)(baseStyles));
+    },
+    get(target, property) {
+        return styled(target[property].apply(styled, [baseStyles]));
+    },
+});
+export default proxyStyled;

package/components/tabs/Bar/index.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import Flex from "../../layout/Flex";
 const Bar = styled.div `
   display: inline-flex;
-  border: 1px solid ${(p) => p.theme.colors.palette.neutral.c40};
+  border: 1px solid ${(p) => p.theme.colors.neutral.c40};
   border-radius: 33px;
   padding: 2px;
 `;
@@ -15,12 +15,12 @@ const Item = styled(Flex).attrs({
   cursor: pointer;
   padding: 8px 12px 8px 12px;
   border-radius: 33px;
-  color: ${(p) => p.active ? p.theme.colors.palette.neutral.c00 : p.theme.colors.palette.neutral.c80};
-  background-color: ${(p) => (p.active ? p.theme.colors.palette.neutral.c100 : "unset")};
+  color: ${(p) => (p.active ? p.theme.colors.neutral.c00 : p.theme.colors.neutral.c80)};
+  background-color: ${(p) => (p.active ? p.theme.colors.neutral.c100 : "unset")};
 `;
 export default function BarTabs({ children, onTabChange, initialActiveIndex }) {
     const [activeIndex, setActiveIndex] = useState(initialActiveIndex);
-    return (React.createElement(Bar, null, React.Children.toArray(children).map((child, index) => (React.createElement(Item, { key: index, active: index === activeIndex, onClick: (_) => {
+    return (React.createElement(Bar, null, React.Children.toArray(children).map((child, index) => (React.createElement(Item, { key: index, active: index === activeIndex, onClick: () => {
             setActiveIndex(index);
             onTabChange && onTabChange(index);
         } }, child)))));

package/components/tabs/Chip/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export declare type Props = React.PropsWithChildren<{
+    /**
+     * An optional callback that will be called when the active tab changes.
+     */
+    onTabChange?: (activeIndex: number) => void;
+    /**
+     * The tab index to mark as active when rendering for the first time.
+     * If omitted, then initially no tabs will be selected.
+     */
+    initialActiveIndex?: number;
+}>;
+export default function BarTabs({ children, onTabChange, initialActiveIndex }: Props): JSX.Element;

package/components/tabs/Chip/index.js

@@ -0,0 +1,21 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import Flex from "../../layout/Flex";
+const Item = styled(Flex).attrs({
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+}) `
+  cursor: pointer;
+  padding: 8px 12px 8px 12px;
+  border-radius: ${(p) => p.theme.radii[2]}px;
+  color: ${(p) => p.theme.colors.neutral.c100};
+  background-color: ${(p) => (p.active ? p.theme.colors.primary.c30 : "unset")};
+`;
+export default function BarTabs({ children, onTabChange, initialActiveIndex }) {
+    const [activeIndex, setActiveIndex] = useState(initialActiveIndex);
+    return (React.createElement(Flex, { justifyContent: "space-between", flex: 1, columnGap: 5 }, React.Children.toArray(children).map((child, index) => (React.createElement(Item, { key: index, active: index === activeIndex, onClick: () => {
+            setActiveIndex(index);
+            onTabChange && onTabChange(index);
+        } }, child)))));
+}

package/components/tabs/Pill/index.js

@@ -24,14 +24,14 @@ const Item = styled(Flex).attrs({ flex: 1, justifyContent: "center", alignItems:
   padding: 8px 10px 8px 10px;
   border: 1px solid;
   &[data-active="false"] {
-    color: ${(p) => p.theme.colors.palette.neutral.c80};
-    background-color: ${(p) => p.theme.colors.palette.neutral.c00};
-    border-color: ${(p) => p.theme.colors.palette.neutral.c40};
+    color: ${(p) => p.theme.colors.neutral.c80};
+    background-color: ${(p) => p.theme.colors.neutral.c00};
+    border-color: ${(p) => p.theme.colors.neutral.c40};
   }
   &[data-active="true"] {
-    color: ${(p) => p.theme.colors.palette.neutral.c00};
-    background-color: ${(p) => p.theme.colors.palette.neutral.c100};
-    border-color: ${(p) => p.theme.colors.palette.neutral.c100};
+    color: ${(p) => p.theme.colors.neutral.c00};
+    background-color: ${(p) => p.theme.colors.neutral.c100};
+    border-color: ${(p) => p.theme.colors.neutral.c100};
 
     &:not(:last-child) {
       border-right-width: 0;
@@ -43,7 +43,7 @@ const Item = styled(Flex).attrs({ flex: 1, justifyContent: "center", alignItems:
 `;
 export default function PillTabs({ children, onTabChange, initialActiveIndex, }) {
     const [activeIndex, setActiveIndex] = useState(initialActiveIndex);
-    return (React.createElement(Pill, null, React.Children.toArray(children).map((child, index) => (React.createElement(Item, { key: index, "data-active": index === activeIndex, onClick: (_) => {
+    return (React.createElement(Pill, null, React.Children.toArray(children).map((child, index) => (React.createElement(Item, { key: index, "data-active": index === activeIndex, onClick: () => {
             setActiveIndex(index);
             onTabChange && onTabChange(index);
         } }, child)))));

package/components/tabs/Tabs/index.js

@@ -32,7 +32,7 @@ const HeaderTitle = styled(Text).attrs({
     fontWeight: "600",
 }) `
   margin-inline: 12px;
-  color: ${(p) => p.selected ? p.theme.colors.palette.neutral.c100 : p.theme.colors.palette.neutral.c80};
+  color: ${(p) => (p.selected ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c80)};
 `;
 const HeaderBottomBarFixed = styled(Flex).attrs({
     flex: 1,
@@ -40,7 +40,7 @@ const HeaderBottomBarFixed = styled(Flex).attrs({
   width: 100%;
   position: relative;
   top: 3px;
-  border-bottom: 1px solid ${(p) => p.theme.colors.palette.neutral.c40};
+  border-bottom: 1px solid ${(p) => p.theme.colors.neutral.c40};
 `;
 const HeaderBottomBarMoving = styled.div `
   position: relative;
@@ -48,12 +48,12 @@ const HeaderBottomBarMoving = styled.div `
   width: ${(p) => p.width}px;
   transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   border-bottom: solid 3px;
-  border-bottom-color: ${(p) => p.theme.colors.palette.primary.c70};
+  border-bottom-color: ${(p) => p.theme.colors.primary.c70};
 `;
 const Badge = styled(Tag).attrs((p) => ({
     borderRadius: p.theme.radii[3],
-    backgroundColor: p.theme.colors.palette.primary.c70,
-    color: p.theme.colors.palette.neutral.c00,
+    backgroundColor: p.theme.colors.primary.c70,
+    color: p.theme.colors.neutral.c00,
 })) `
   padding: 5px;
   min-width: 24px;
@@ -74,8 +74,8 @@ const MainContent = styled(Flex).attrs({
     flex: 1,
 }) `
   width: 100%;
-  color: ${(p) => p.active ? p.theme.colors.palette.neutral.c00 : p.theme.colors.palette.neutral.c70};
-  background-color: ${(p) => p.active ? p.theme.colors.palette.neutral.c100 : p.theme.colors.palette.neutral.c00};
+  color: ${(p) => (p.active ? p.theme.colors.neutral.c00 : p.theme.colors.neutral.c70)};
+  background-color: ${(p) => (p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c00)};
 `;
 export default function Tabs(props) {
     const { tabs, onTabChange } = props;
@@ -97,6 +97,7 @@ export default function Tabs(props) {
                 left,
             });
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [activeIndex]);
     const onTabClick = (index) => {
         const tab = tabs.find((t) => t.index === index);

package/components/tabs/index.d.ts

@@ -1,2 +1,4 @@
 export { default as Bar } from "./Bar";
 export { default as Pill } from "./Pill";
+export { default as Tabs } from "./Tabs";
+export { default as Chip } from "./Chip";

package/components/tabs/index.js

@@ -1,2 +1,4 @@
 export { default as Bar } from "./Bar";
 export { default as Pill } from "./Pill";
+export { default as Tabs } from "./Tabs";
+export { default as Chip } from "./Chip";

package/package.json

@@ -1,10 +1,20 @@
 {
   "name": "@ledgerhq/react-ui",
   "description": "Ledger Live - Desktop UI",
-  "version": "0.1.1",
+  "version": "0.4.0",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
+  "exports": {
+    ".": {
+      "require": "./cjs/index.js",
+      "default": "./index.js"
+    },
+    "./": {
+      "require": "./cjs/",
+      "default": "./"
+    }
+  },
   "sideEffects": [
     "*.woff2",
     "assets/fonts.js"
@@ -17,12 +27,12 @@
     "index.js"
   ],
   "dependencies": {
-    "@ledgerhq/icons-ui": "^0.1.0",
-    "@ledgerhq/ui-shared": "^0.1.1",
-    "@tippyjs/react": "^4.2.5",
+    "@ledgerhq/icons-ui": "^0.2.0",
+    "@ledgerhq/ui-shared": "^0.1.3",
+    "@tippyjs/react": "^4.2.6",
     "@types/color": "^3.0.2",
-    "@types/react": "~17.0.28",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "~17.0.34",
+    "@types/react-dom": "^17.0.11",
     "@types/react-select": "^4.0.18",
     "@types/react-transition-group": "^4.4.2",
     "@types/react-window": "^1.8.5",
@@ -33,14 +43,15 @@
     "color": "^3.1.3",
     "moment": "^2.29.1",
     "react-chartjs-2": "^3.0.5",
+    "react-is": "^17.0.2",
     "react-select": "^3.2.0",
     "react-transition-group": "^4.4.2",
     "react-window": "^1.8.6",
-    "styled-components": "^5.2.3",
     "styled-system": "^5.1.5"
   },
   "peerDependencies": {
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.3"
   }
 }

package/styles/InvertTheme.d.ts

@@ -1,9 +1,2 @@
 import React from "react";
-import { ThemeNames } from "@ledgerhq/ui-shared";
-interface Props {
-    children: React.ReactNode;
-    selectedPalette?: ThemeNames;
-    fontsPath?: string;
-}
-export declare const InvertTheme: ({ children }: Props) => React.ReactElement;
-export {};
+export declare const InvertTheme: ({ children }: React.PropsWithChildren<unknown>) => React.ReactElement;

package/styles/StyleProvider.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
+import { GlobalStyleProps } from ".";
 import { ThemeNames } from "@ledgerhq/ui-shared";
-interface Props {
+interface Props extends GlobalStyleProps {
     children: React.ReactNode;
     selectedPalette?: ThemeNames;
-    fontsPath?: string;
 }
-export declare const StyleProvider: ({ children, fontsPath, selectedPalette, }: Props) => React.ReactElement;
+export declare const StyleProvider: ({ children, fontsPath, fontMappings, selectedPalette, }: Props) => React.ReactElement;
 export {};

package/styles/StyleProvider.js

@@ -2,9 +2,9 @@ import React, { useMemo } from "react";
 import { ThemeProvider } from "styled-components";
 import { defaultTheme, GlobalStyle } from ".";
 import { palettes } from "@ledgerhq/ui-shared";
-export const StyleProvider = ({ children, fontsPath, selectedPalette = "light", }) => {
-    const theme = useMemo(() => (Object.assign(Object.assign({}, defaultTheme), { colors: Object.assign(Object.assign({}, defaultTheme.colors), { palette: palettes[selectedPalette] }), theme: selectedPalette })), [selectedPalette]);
+export const StyleProvider = ({ children, fontsPath, fontMappings, selectedPalette = "light", }) => {
+    const theme = useMemo(() => (Object.assign(Object.assign({}, defaultTheme), { colors: Object.assign(Object.assign(Object.assign({}, defaultTheme.colors), palettes[selectedPalette]), { palette: palettes[selectedPalette] }), theme: selectedPalette })), [selectedPalette]);
     return (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(GlobalStyle, { fontsPath: fontsPath }),
+        React.createElement(GlobalStyle, { fontsPath: fontsPath, fontMappings: fontMappings }),
         children));
 };

package/styles/global.d.ts

@@ -1,4 +1,5 @@
 export declare type GlobalStyleProps = {
     fontsPath?: string;
+    fontMappings?: (name: string) => string;
 };
 export declare const GlobalStyle: import("styled-components").GlobalStyleComponent<GlobalStyleProps, import("styled-components").DefaultTheme>;