@ledgerhq/react-ui 0.2.0 → 0.5.0

package/components/navigation/progress/ProgressBar/Onboarding.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface Step {
     key: string;
     label: string;

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", fontWeight: "medium", variant: "micro" }, currentIndex + 1),
-            React.createElement(Text, { color: "palette.neutral.c00", fontWeight: "medium", textTransform: "uppercase", variant: "micro" }, 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, }) {

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

@@ -1,11 +1,12 @@
-/// <reference types="react" />
-export declare const ItemLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../../asorted/Text").BaseTextProps, never>;
+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, { variant: "paragraph" }, 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/Logo/Logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Logo: () => JSX.Element;
 export default Logo;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type SideBarProps = {
     children: Array<JSX.Element>;
     onToggle: () => void;
@@ -6,6 +5,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.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type ToggleButtonProps = {
     isDisplayed: boolean;
 };

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,16 @@
+import { StyledInterface, InterpolationFunction } from "styled-components";
+import { FlexboxProps, SpaceProps, PositionProps, ColorProps, LayoutProps, OverflowProps, BorderProps } from "styled-system";
+export declare type BaseStyledProps = SpaceProps & FlexboxProps & PositionProps & ColorProps & LayoutProps & BorderProps & OverflowProps & {
+    /**
+     * The columnGap CSS property sets the size of the gap (gutter) between an element's grid columns.
+     */
+    columnGap?: string | number;
+    /**
+     * The rowGap CSS property sets the size of the gap (gutter) between an element's grid rows.
+     */
+    rowGap?: string | number;
+    color?: string;
+};
+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, border, } from "styled-system";
+export const baseStyles = compose(flexbox, space, position, color, layout, overflow, gaps, border);
+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,7 +1,7 @@
 {
   "name": "@ledgerhq/react-ui",
   "description": "Ledger Live - Desktop UI",
-  "version": "0.2.0",
+  "version": "0.5.0",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "@ledgerhq/ui-shared": "^0.1.3",
     "@tippyjs/react": "^4.2.6",
     "@types/color": "^3.0.2",
-    "@types/react": "~17.0.34",
+    "@types/react": "~17.0.37",
     "@types/react-dom": "^17.0.11",
     "@types/react-select": "^4.0.18",
     "@types/react-transition-group": "^4.4.2",
@@ -47,11 +47,11 @@
     "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>;

package/styles/global.js

@@ -1,59 +1,38 @@
 import { createGlobalStyle } from "styled-components";
 import { rgba } from "./helpers";
-import reset from "./reset";
 import tippyStyles from "../components/message/Tooltip/styles";
 import { fontStyles } from "../components/asorted/Text/styles";
 export const GlobalStyle = createGlobalStyle `
-  ${reset};
+  html {
+    box-sizing: border-box;
+  }
 
   body {
     font-family: Inter;
     font-size: 100%;
   }
 
-  ${(props) => (props.fontsPath ? fontStyles : "")}
-
-  .spectron-run canvas:not(.visible-for-spectron) {
-    visibility: hidden;
+  *, *:before, *:after {
+    box-sizing: inherit;
   }
 
-  #react-root {
-    display: flex;
-    flex-direction: column;
-    max-width: 100%;
-    max-height: 100%;
-    width: 100vw;
-    height: 100vh;
-    background-color: ${(p) => p.theme.colors.palette.neutral.c00};
+  * {
+    margin: 0;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    user-select: inherit;
+    cursor: inherit;
+    outline: none;
   }
 
   ::selection {
-    background: ${(p) => rgba(p.theme.colors.palette.primary.c100, 0.1)};
+    background: ${(p) => rgba(p.theme.colors.primary.c100, 0.1)};
   }
 
   --track-color: rgba(0,0,0,0);
 
-  ::-webkit-scrollbar              {
-    width: ${(p) => p.theme.overflow.trackSize}px;
-    height: ${(p) => p.theme.overflow.trackSize}px;
-    background-color: rgba(0,0,0,0);
-  }
-  ::-webkit-scrollbar-button       {
-    opacity: 0;
-    height: 0;
-    width: 0;
-  }
-  ::-webkit-scrollbar-track        {
-    background-color: rgba(0,0,0,0);
-  }
-  ::-webkit-scrollbar-thumb        {
-    box-shadow: inset 0 0 0 ${(p) => p.theme.overflow.trackSize}px var(--track-color);
-    border: 2px solid rgba(0,0,0,0);
-    border-radius: ${(p) => p.theme.overflow.trackSize}px;
-  }
-  ::-webkit-scrollbar-corner {
-    opacity: 0;
-  }
+  ${(props) => (typeof props.fontsPath === "string" ? fontStyles : "")}
 
   ${tippyStyles}
 `;

package/styles/index.d.ts

@@ -1,7 +1,6 @@
 export { default as defaultTheme } from "./theme";
 export * from "./helpers";
 export * from "./global";
-export { default as resetCss } from "./reset";
 export * from "./StyleProvider";
 export type { ThemeNames, ColorPalette } from "@ledgerhq/ui-shared";
 export { palettes } from "@ledgerhq/ui-shared";