@ledgerhq/react-ui 0.3.0 → 0.6.0

package/components/message/index.js

@@ -1,5 +1,7 @@
 export { default as Alert } from "./Alert";
 export { default as Log } from "./Log";
 export { default as Notification } from "./Notification";
+export { default as Badge } from "./Notification/Badge";
 export { default as Tooltip } from "./Tooltip";
 export { default as Tip } from "./Tip";
+export { default as StatusNotification } from "./StatusNotification";

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

@@ -6,13 +6,10 @@ export declare type Props = React.PropsWithChildren<{
 }> & React.ComponentProps<typeof Wrapper>;
 interface ExtraWrapperProps extends ColorProps, LayoutProps, TypographyProps {
 }
-declare const Wrapper: 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>>> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+declare const Wrapper: 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>>> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").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;
-    display?: string | undefined;
-    position?: string | undefined;
-    maxHeight?: number | undefined;
-} & ExtraWrapperProps, "overflow" | "p" | "color" | "left" | "right" | "bottom" | "top" | "size" | "flex" | "padding" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "verticalAlign" | "width" | "zIndex" | "margin" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg">;
+} & ExtraWrapperProps, "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">;
 export default function Aside({ header, footer, children, ...props }: Props): JSX.Element;
 export {};

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, { fontWeight: "semiBold", color: "palette.neutral.c40", variant: "paragraph" }, "/")) : 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,
+                    control: (provided, state) => (Object.assign(Object.assign({}, ControlModule.getStyles(theme)(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.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/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,4 +1,3 @@
-/// <reference types="react" />
 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;

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

@@ -6,8 +6,8 @@ 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;
@@ -26,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.c80};
+    --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;
   }
 
@@ -39,15 +39,15 @@ const ItemWrapper = styled.li `
 
   /** ACTIVE VARIANT **/
   &[data-active="true"] {
-    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.palette.neutral.c100};
-    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.palette.primary.c80};
-    --ll-sidebar-item-background-color: ${(props) => props.theme.colors.palette.primary.c20};
+    --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="true"] {
-    --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;
     opacity: 0.3;
     cursor: unset;
@@ -63,7 +63,7 @@ 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.palette.primary.c80};
+  background-color: ${(p) => p.theme.colors.primary.c80};
 `;
 export const ItemLabel = styled(Text) `
   display: inline-block;

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;

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

@@ -12,9 +12,9 @@ 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.c40};
-  background-color: ${(props) => props.theme.colors.palette.background.main};
+  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;
 

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.c20};
-  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

@@ -1,12 +1,15 @@
 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 & {
+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;
-    display?: string;
-    position?: string;
-    maxHeight?: number;
 };
 export declare const baseStyles: InterpolationFunction<unknown>;
 declare const _default: StyledInterface;

package/components/styled.js

@@ -1,7 +1,7 @@
 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);
+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));

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,8 +15,8 @@ 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);

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;

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;

package/components/tabs/index.d.ts

@@ -1,3 +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,3 +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/index.d.ts

@@ -1,3 +1,3 @@
 export * from "./components";
 export * from "./assets";
-export { StyleProvider } from "./styles";
+export { StyleProvider, InvertTheme } from "./styles";

package/index.js

@@ -1,3 +1,3 @@
 export * from "./components";
 export * from "./assets";
-export { StyleProvider } from "./styles";
+export { StyleProvider, InvertTheme } from "./styles";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ledgerhq/react-ui",
   "description": "Ledger Live - Desktop UI",
-  "version": "0.3.0",
+  "version": "0.6.0",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
@@ -27,13 +27,12 @@
     "index.js"
   ],
   "dependencies": {
-    "@ledgerhq/icons-ui": "^0.2.0",
-    "@ledgerhq/ui-shared": "^0.1.3",
+    "@ledgerhq/icons-ui": "^0.2.1",
+    "@ledgerhq/ui-shared": "^0.1.4",
     "@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",
     "@types/react-window": "^1.8.5",
     "@types/styled-components": "^5.1.14",
@@ -44,7 +43,7 @@
     "moment": "^2.29.1",
     "react-chartjs-2": "^3.0.5",
     "react-is": "^17.0.2",
-    "react-select": "^3.2.0",
+    "react-select": "^5.2.1",
     "react-transition-group": "^4.4.2",
     "react-window": "^1.8.6",
     "styled-system": "^5.1.5"

package/styles/InvertTheme.js

@@ -5,6 +5,6 @@ import { palettes } from "@ledgerhq/ui-shared";
 export const InvertTheme = ({ children }) => {
     const { theme } = useTheme();
     const revertTheme = theme === "light" ? "dark" : "light";
-    const newTheme = useMemo(() => (Object.assign(Object.assign({}, defaultTheme), { colors: Object.assign(Object.assign({}, defaultTheme.colors), { palette: palettes[revertTheme] }), theme: revertTheme })), [revertTheme]);
+    const newTheme = useMemo(() => (Object.assign(Object.assign({}, defaultTheme), { colors: Object.assign(Object.assign({}, palettes[revertTheme]), { palette: palettes[revertTheme] }), theme: revertTheme })), [revertTheme]);
     return React.createElement(ThemeProvider, { theme: newTheme }, children);
 };

package/styles/StyleProvider.js

@@ -3,7 +3,7 @@ import { ThemeProvider } from "styled-components";
 import { defaultTheme, GlobalStyle } from ".";
 import { palettes } from "@ledgerhq/ui-shared";
 export const StyleProvider = ({ children, fontsPath, fontMappings, selectedPalette = "light", }) => {
-    const theme = useMemo(() => (Object.assign(Object.assign({}, defaultTheme), { colors: Object.assign(Object.assign({}, defaultTheme.colors), { palette: palettes[selectedPalette] }), theme: selectedPalette })), [selectedPalette]);
+    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, fontMappings: fontMappings }),
         children));

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) => (typeof props.fontsPath === "string" ? 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,7 @@
 export { default as defaultTheme } from "./theme";
 export * from "./helpers";
 export * from "./global";
-export { default as resetCss } from "./reset";
 export * from "./StyleProvider";
+export { InvertTheme } from "./InvertTheme";
 export type { ThemeNames, ColorPalette } from "@ledgerhq/ui-shared";
 export { palettes } from "@ledgerhq/ui-shared";

package/styles/index.js

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

package/styles/theme.d.ts

@@ -45,7 +45,7 @@ export declare const fontFamilies: {
         };
     };
 };
-declare const transition: (properties?: string[]) => FlattenSimpleInterpolation;
+declare const transition: (properties?: string[], duration?: string, easing?: string) => FlattenSimpleInterpolation;
 declare const animations: {
     fadeIn: () => FlattenSimpleInterpolation;
     fadeOut: () => FlattenSimpleInterpolation;
@@ -98,7 +98,10 @@ declare module "styled-components" {
         fontSizes: number[];
         space: number[];
         shadows: string[];
-        colors: {
+        colors: ColorPalette & {
+            /**
+             * @deprecated Do not use the .palette prefix anymore!
+             */
             palette: ColorPalette;
         };
         fontWeights: Record<string, string>;