@ledgerhq/native-ui 0.1.0 → 0.4.0

package/components/Text/index.d.ts

@@ -1,20 +1,22 @@
 import React from "react";
 import { TextProps } from "react-native";
 import { FontSizeProps, TextAlignProps, ColorProps, SpaceProps, LineHeightProps, BorderProps } from "styled-system";
-import { FontWeightTypes, TextTypes } from "./getTextStyle";
-interface Props extends TextProps, FontSizeProps, TextAlignProps, ColorProps, SpaceProps, LineHeightProps, BorderProps {
-    type?: TextTypes;
+import { FontWeightTypes } from "./getTextStyle";
+import { TextVariants } from "../../styles/theme";
+export interface BaseTextProps extends TextProps, FontSizeProps, TextAlignProps, ColorProps, SpaceProps, LineHeightProps, BorderProps {
+    variant?: TextVariants;
     fontWeight?: FontWeightTypes;
     fontFamily?: string;
-    fontSize?: number | string;
+    fontSize?: number | string | TextVariants;
     color?: string;
     mt?: number | string;
     mb?: number | string;
     ml?: number | string;
     mr?: number | string;
-    lineHeight?: string;
+    paddingTop?: number;
+    lineHeight?: number;
     bracket?: boolean;
     children: React.ReactNode;
 }
-declare const Text: ({ children, bracket, ...props }: Props) => JSX.Element;
+declare const Text: ({ children, bracket, ...props }: BaseTextProps) => JSX.Element;
 export default Text;

package/components/Text/index.js

@@ -16,14 +16,20 @@ import BracketRight from "../../icons/BracketLeft";
 import BracketLeft from "../../icons/BracketRight";
 import { getColor } from "../../styles";
 import { getTextStyle } from "./getTextStyle";
-const Base = styled.Text `
+const Base = styled.Text.attrs((p) => {
+    var _a;
+    return ({
+        fontSize: p.fontSize ? p.fontSize : (_a = p.variant) !== null && _a !== void 0 ? _a : "paragraph",
+        color: p.color || "neutral.c100",
+    });
+}) `
+  ${(p) => getTextStyle(p)}
   ${lineHeight};
   ${fontSize};
   ${textAlign};
   ${color};
   ${space};
   ${border};
-  ${(p) => getTextStyle(p)}
   justify-content: center;
   align-items: center;
 `;
@@ -33,10 +39,9 @@ const T = styled.View `
   align-items: center;
 `;
 const BracketText = (_a) => {
-    var { children, color = "palette.neutral.c100" } = _a, props = __rest(_a, ["children", "color"]);
-    const { lineHeight: size } = getTextStyle(props);
+    var { children, color = "neutral.c100", lineHeight } = _a, props = __rest(_a, ["children", "color", "lineHeight"]);
+    const size = lineHeight || getTextStyle(props).lineHeight;
     const theme = useTheme();
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
     const c = theme ? getColor(theme, color) : "transparent";
     return (React.createElement(T, null,
         React.createElement(BracketLeft, { fill: c, width: size, height: size }),

package/components/chart/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { Item } from "./types";
+export declare type ChartProps = {
+    data: Array<Item>;
+    color: string;
+    tickFormat?: string;
+    valueKey?: string;
+    height?: number;
+};
+declare const Chart: ({ data, color, tickFormat, valueKey, height, }: ChartProps) => JSX.Element;
+export default Chart;

package/components/chart/index.js

@@ -0,0 +1,59 @@
+import React, { useMemo } from "react";
+import styled, { useTheme } from "styled-components/native";
+import moment from "moment";
+import { Defs, LinearGradient, Stop } from "react-native-svg";
+import { VictoryLine, VictoryChart, VictoryAxis, VictoryArea, VictoryScatter, } from "victory-native";
+import { hex } from "../../styles/helpers";
+import Flex from "../Layout/Flex";
+const Container = styled(Flex) `
+  background-color: ${(p) => p.theme.colors.background.main};
+`;
+const sortByDate = (a, b) => {
+    if (a.date.getTime() < b.date.getTime())
+        return -1;
+    if (a.date.getTime() > b.date.getTime())
+        return 1;
+    return 0;
+};
+const Chart = ({ data, color, tickFormat = "MMM", valueKey = "value", height = 191, }) => {
+    const theme = useTheme();
+    const sortData = useMemo(() => data.sort(sortByDate), [data]);
+    return (React.createElement(Container, null,
+        React.createElement(VictoryChart, { scale: { x: "time" }, height: height, domainPadding: { x: [0, 5], y: [30, 10] } },
+            React.createElement(VictoryAxis, { dependentAxis: true, crossAxis: true, style: {
+                    grid: {
+                        stroke: theme.colors.neutral.c40,
+                        strokeDasharray: "4 4",
+                    },
+                    axisLabel: { display: "none" },
+                    axis: { display: "none" },
+                    ticks: { display: "none" },
+                    tickLabels: { display: "none" },
+                } }),
+            React.createElement(VictoryAxis, { crossAxis: false, tickFormat: (timestamp) => moment(timestamp).format(tickFormat), style: {
+                    axis: {
+                        stroke: theme.colors.neutral.c40,
+                        strokeDasharray: "4 4",
+                    },
+                    tickLabels: {
+                        fill: theme.colors.neutral.c80,
+                        fontSize: 12,
+                        lineHeight: 14.52,
+                    },
+                    grid: { display: "none" },
+                } }),
+            React.createElement(Defs, null,
+                React.createElement(LinearGradient, { id: "chartGradient", x1: "0.5", x2: "0.5", y1: "0", y2: "1" },
+                    React.createElement(Stop, { stopColor: hex(color), stopOpacity: "0.11" }),
+                    React.createElement(Stop, { offset: "1", stopColor: hex(theme.colors.neutral.c00), stopOpacity: "0" }))),
+            React.createElement(VictoryArea, { data: sortData, interpolation: "monotoneX", sortKey: "date", x: "date", y: valueKey, style: { data: { fill: `url(#chartGradient)` } }, standalone: false }),
+            React.createElement(VictoryLine, { data: sortData, interpolation: "monotoneX", x: "date", y: valueKey, style: { data: { stroke: color } } }),
+            React.createElement(VictoryScatter, { style: {
+                    data: {
+                        stroke: color,
+                        strokeWidth: 3,
+                        fill: theme.colors.background.main,
+                    },
+                }, size: 5, data: [sortData[sortData.length - 1]], x: "date", y: valueKey }))));
+};
+export default Chart;

package/components/chart/types.d.ts

@@ -0,0 +1,6 @@
+export declare type Item = {
+    date: Date;
+    value?: number | string;
+} & {
+    [key: string]: number | string;
+};

package/components/chart/types.js

@@ -0,0 +1 @@
+export {};

package/components/cta/Button/getButtonStyle.js

@@ -1,25 +1,29 @@
 export function getButtonColors(colors) {
     return {
+        default: {
+            primaryColor: colors.neutral.c100,
+            secondaryColor: "rgba(0,0,0,0)",
+        },
         disabled: {
-            primaryColor: colors.palette.neutral.c50,
-            secondaryColor: colors.palette.neutral.c30,
+            primaryColor: colors.neutral.c50,
+            secondaryColor: colors.neutral.c30,
         },
         main: {
-            primaryColor: colors.palette.neutral.c00,
-            secondaryColor: colors.palette.neutral.c100,
+            primaryColor: colors.neutral.c00,
+            secondaryColor: colors.neutral.c100,
         },
         shade: {
-            primaryColor: colors.palette.neutral.c00,
-            secondaryColor: colors.palette.neutral.c100,
-            tertiaryColor: colors.palette.neutral.c40,
+            primaryColor: colors.neutral.c00,
+            secondaryColor: colors.neutral.c100,
+            tertiaryColor: colors.neutral.c40,
         },
         error: {
-            primaryColor: colors.palette.neutral.c00,
-            secondaryColor: colors.palette.error.c100,
+            primaryColor: colors.neutral.c00,
+            secondaryColor: colors.error.c100,
         },
         color: {
-            primaryColor: colors.palette.neutral.c00,
-            secondaryColor: colors.palette.primary.c80,
+            primaryColor: colors.neutral.c00,
+            secondaryColor: colors.primary.c80,
         },
     };
 }

package/components/cta/Button/index.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="styled-components-react-native" />
 import React from "react";
+import { SpaceProps } from "styled-system";
 import { TouchableOpacity, TouchableOpacityProps } from "react-native";
-export declare type ButtonProps = TouchableOpacityProps & {
+export declare type ButtonProps = TouchableOpacityProps & SpaceProps & {
     Icon?: React.ComponentType<{
         size: number;
         color: string;
-    }>;
-    type?: "main" | "shade" | "error" | "color";
+    }> | null;
+    type?: "main" | "shade" | "error" | "color" | "default";
     size?: "small" | "medium" | "large";
     iconPosition?: "right" | "left";
     outline?: boolean;
@@ -16,13 +17,13 @@ export declare type ButtonProps = TouchableOpacityProps & {
 };
 export declare const Base: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {
     iconButton?: boolean | undefined;
-} & TouchableOpacityProps & {
+} & TouchableOpacityProps & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
     Icon?: React.ComponentType<{
         size: number;
         color: string;
-    }> | undefined;
-    type?: "main" | "shade" | "error" | "color" | undefined;
-    size?: "small" | "medium" | "large" | undefined;
+    }> | null | undefined;
+    type?: "default" | "main" | "shade" | "error" | "color" | undefined;
+    size?: "large" | "small" | "medium" | undefined;
     iconPosition?: "left" | "right" | undefined;
     outline?: boolean | undefined;
     disabled?: boolean | undefined;

package/components/cta/Button/index.js

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import React, { useCallback, useState } from "react";
 import styled, { useTheme } from "styled-components/native";
-import { color, border } from "styled-system";
+import { color, border, space } from "styled-system";
 import { ActivityIndicator, TouchableOpacity, } from "react-native";
 import { buttonSizeStyle, getButtonColorStyle, } from "../../cta/Button/getButtonStyle";
 import { ctaIconSize, ctaTextType } from "../../cta/getCtaStyle";
@@ -24,6 +24,7 @@ const IconContainer = styled.View `
 export const Base = styled(TouchableOpacity).attrs((p) => (Object.assign({}, getButtonColorStyle(p.theme.colors, p).button))) `
   ${color};
   ${border};
+  ${space};
   border-radius: ${(p) => p.theme.space[10]}px;
   height: ${(p) => p.theme.space[10]}px;
   padding: 0 ${(p) => p.theme.space[7]}px;
@@ -62,14 +63,14 @@ const ButtonContainer = (props) => {
     const theme = useTheme();
     const { text } = getButtonColorStyle(theme.colors, props);
     return (React.createElement(Container, { hide: hide },
-        iconPosition === "right" && children ? (React.createElement(Text, { type: ctaTextType[size], fontWeight: "semibold", color: text.color }, children)) : null,
+        iconPosition === "right" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: text.color }, children)) : null,
         Icon ? (React.createElement(IconContainer, { iconButton: !children, iconPosition: iconPosition },
             React.createElement(Icon, { size: ctaIconSize[size], color: text.color }))) : null,
-        iconPosition === "left" && children ? (React.createElement(Text, { type: ctaTextType[size], fontWeight: "semibold", color: text.color }, children)) : null));
+        iconPosition === "left" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: text.color }, children)) : null));
 };
 const Button = (props) => {
-    const { Icon, children, type = "main", size = "medium" } = props;
-    return (React.createElement(Base, Object.assign({}, props, { type: type, size: size, iconButton: Icon && !children, activeOpacity: 0.5 }),
+    const { Icon, children, type = "default", size = "medium" } = props;
+    return (React.createElement(Base, Object.assign({}, props, { type: type, size: size, iconButton: !!Icon && !children, activeOpacity: 0.5 }),
         React.createElement(ButtonContainer, Object.assign({}, props, { type: type, size: size }))));
 };
 export const PromisableButton = (props) => {
@@ -87,9 +88,9 @@ export const PromisableButton = (props) => {
             setSpinnerOn(false);
         }
     }), [onPress]);
-    return (React.createElement(Base, Object.assign({}, props, { type: type, size: size, iconButton: Icon && !children, disabled: disabled || spinnerOn, onPress: onPressHandler }),
+    return (React.createElement(Base, Object.assign({}, props, { type: type, size: size, iconButton: !!Icon && !children, disabled: disabled || spinnerOn, onPress: onPressHandler }),
         React.createElement(ButtonContainer, Object.assign({}, props, { type: type, size: size, hide: spinnerOn })),
         React.createElement(SpinnerContainer, null,
-            React.createElement(ActivityIndicator, { color: theme.colors.palette.neutral.c50, animating: spinnerOn }))));
+            React.createElement(ActivityIndicator, { color: theme.colors.neutral.c50, animating: spinnerOn }))));
 };
 export default Button;

package/components/cta/Link/getLinkStyle.js

@@ -1,16 +1,16 @@
 export function getLinkColors(colors) {
     return {
         default: {
-            disabled: colors.palette.neutral.c50,
-            main: colors.palette.neutral.c100,
-            color: colors.palette.primary.c80,
-            shade: colors.palette.neutral.c70,
+            disabled: colors.neutral.c50,
+            main: colors.neutral.c100,
+            color: colors.primary.c80,
+            shade: colors.neutral.c70,
         },
         reversed: {
-            disabled: colors.palette.neutral.c80,
-            main: colors.palette.neutral.c00,
-            color: colors.palette.primary.c60,
-            shade: colors.palette.neutral.c50,
+            disabled: colors.neutral.c80,
+            main: colors.neutral.c00,
+            color: colors.primary.c60,
+            shade: colors.neutral.c50,
         },
     };
 }

package/components/cta/Link/index.js

@@ -22,10 +22,10 @@ const LinkContainer = (props) => {
     const { colors } = useTheme();
     const colorValue = getLinkColors(colors)[reversed ? "reversed" : "default"][disabled ? "disabled" : type];
     return (React.createElement(React.Fragment, null,
-        iconPosition === "right" && children ? (React.createElement(Text, { type: ctaTextType[size], fontWeight: "semibold", color: colorValue }, children)) : null,
+        iconPosition === "right" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: colorValue }, children)) : null,
         Icon ? (React.createElement(IconContainer, { iconLink: !children, iconPosition: iconPosition },
             React.createElement(Icon, { size: ctaIconSize[size], color: colorValue }))) : null,
-        iconPosition === "left" && children ? (React.createElement(Text, { type: ctaTextType[size], fontWeight: "semibold", color: colorValue }, children)) : null));
+        iconPosition === "left" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: colorValue }, children)) : null));
 };
 const Link = (props) => {
     const { type = "main", size = "medium" } = props;

package/components/cta/getCtaStyle.d.ts

@@ -1,6 +1,6 @@
-import { TextTypes } from "../Text/getTextStyle";
+import { TextVariants } from "../../styles/theme";
 export declare const ctaTextType: {
-    [index: string]: TextTypes;
+    [index: string]: TextVariants;
 };
 export declare const ctaIconSize: {
     [index: string]: number;

package/components/drawer/Notification/index.js

@@ -3,34 +3,28 @@ import styled, { useTheme } from "styled-components/native";
 import FlexBox from "../../Layout/Flex";
 import { TouchableOpacity, } from "react-native";
 import Text from "../../Text";
-import CloseMedium from "../../../assets/icons/CloseMedium";
+import CloseMedium from "@ledgerhq/icons-ui/native/CloseMedium";
 const NotificationContainer = styled.View `
   display: flex;
   width: 100%;
   flex-direction: row;
   align-items: center;
   padding: 16px;
-  background-color: ${(p) => p.variant === "primary"
-    ? p.theme.colors.palette.primary.c90
-    : "transparent"};
+  background-color: ${(p) => p.variant === "primary" ? p.theme.colors.primary.c90 : "transparent"};
   border-radius: ${(p) => `${p.theme.radii[1]}px`};
 `;
 export default function Notification({ Icon, color, variant = "primary", numberOfLines, title, subtitle, onClose, onLearnMore, }) {
     const { colors } = useTheme();
-    const textColor = variant === "primary"
-        ? colors.palette.neutral.c00
-        : colors.palette.neutral.c100;
+    const textColor = variant === "primary" ? colors.neutral.c00 : colors.neutral.c100;
     return (React.createElement(NotificationContainer, { variant: variant },
         React.createElement(FlexBox, null,
             React.createElement(Icon, { size: 18, color: color || textColor })),
         React.createElement(FlexBox, { ml: 16, flexShrink: 1 },
-            React.createElement(Text, { type: "body", fontWeight: "medium", color: color || textColor, numberOfLines: numberOfLines }, title),
-            !!subtitle && (React.createElement(Text, { type: "body", fontWeight: "medium", color: color ||
-                    (variant === "primary"
-                        ? colors.palette.neutral.c00
-                        : colors.palette.neutral.c80), mt: "2px", mb: "2px" }, subtitle)),
+            React.createElement(Text, { variant: "body", fontWeight: "medium", color: color || textColor, numberOfLines: numberOfLines }, title),
+            !!subtitle && (React.createElement(Text, { variant: "body", fontWeight: "medium", color: color ||
+                    (variant === "primary" ? colors.neutral.c00 : colors.neutral.c80), mt: "2px", mb: "2px" }, subtitle)),
             onLearnMore && (React.createElement(TouchableOpacity, { onPress: onLearnMore },
-                React.createElement(Text, { type: "body", fontWeight: "semibold", color: color || textColor }, "Learn more")))),
+                React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: color || textColor }, "Learn more")))),
         onClose && (React.createElement(FlexBox, { marginLeft: "auto", pl: 16 },
             React.createElement(TouchableOpacity, { onPress: onClose },
                 React.createElement(CloseMedium, { size: 14, color: color || textColor }))))));

package/components/message/Alert/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare type AlertType = "info" | "warning" | "error";
 export interface AlertProps {
     type?: AlertType;

package/components/message/Alert/index.js

@@ -1,8 +1,8 @@
 import React from "react";
 import styled, { useTheme } from "styled-components/native";
-import ShieldSecurityMedium from "../../../assets/icons/ShieldSecurityMedium";
-import CircledCrossMedium from "../../../assets/icons/CircledCrossMedium";
-import CircledAlertMedium from "../../../assets/icons/CircledAlertMedium";
+import ShieldSecurityMedium from "@ledgerhq/icons-ui/native/ShieldSecurityMedium";
+import CircledCrossMedium from "@ledgerhq/icons-ui/native/CircledCrossMedium";
+import CircledAlertMedium from "@ledgerhq/icons-ui/native/CircledAlertMedium";
 import Text from "../../Text";
 import { getColor } from "../../../styles";
 import FlexBox from "../../Layout/Flex";
@@ -13,16 +13,16 @@ const icons = {
 };
 const alertColors = {
     info: {
-        backgroundColor: "palette.primary.c20",
-        color: "palette.primary.c90",
+        backgroundColor: "primary.c20",
+        color: "primary.c90",
     },
     warning: {
-        backgroundColor: "palette.warning.c30",
-        color: "palette.warning.c100",
+        backgroundColor: "warning.c30",
+        color: "warning.c100",
     },
     error: {
-        backgroundColor: "palette.error.c30",
-        color: "palette.error.c100",
+        backgroundColor: "error.c30",
+        color: "error.c100",
     },
 };
 const StyledIconContainer = styled.View `

package/components/tags/Badge/index.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
 declare type BadgeType = "main" | "primary";
 export interface BadgeProps {
-    variant?: BadgeType;
+    badgeVariant?: BadgeType;
     active?: boolean;
     children: React.ReactNode;
 }
-export default function Badge({ variant, active, children, }: BadgeProps): JSX.Element;
+export default function Badge({ badgeVariant, active, children, }: BadgeProps): JSX.Element;
 export {};

package/components/tags/Badge/index.js

@@ -4,29 +4,29 @@ import Text from "../../Text";
 const badgesStyle = {
     main: {
         default: {
-            color: "palette.neutral.c80",
+            color: "neutral.c80",
             borderWidth: 1,
-            borderColor: "palette.neutral.c40",
+            borderColor: "neutral.c40",
         },
         active: {
-            color: "palette.neutral.c00",
-            backgroundColor: "palette.neutral.c100",
+            color: "neutral.c00",
+            backgroundColor: "neutral.c100",
         },
     },
     primary: {
         default: {
-            color: "palette.primary.c90",
+            color: "primary.c90",
         },
         active: {
-            color: "palette.primary.c90",
-            backgroundColor: "palette.primary.c20",
+            color: "primary.c90",
+            backgroundColor: "primary.c20",
         },
     },
 };
-const StyledBadgeText = styled(Text).attrs((p) => (Object.assign({}, badgesStyle[p.variant || "main"][p.active ? "active" : "default"]))) `
+const StyledBadgeText = styled(Text).attrs((p) => (Object.assign({}, badgesStyle[p.badgeVariant || "main"][p.active ? "active" : "default"]))) `
   border-radius: 32px;
   padding: 8px;
 `;
-export default function Badge({ variant = "main", active = false, children, }) {
-    return (React.createElement(StyledBadgeText, { variant: variant, active: active, type: "subTitle", fontWeight: "semibold" }, children));
+export default function Badge({ badgeVariant = "main", active = false, children, }) {
+    return (React.createElement(StyledBadgeText, { badgeVariant: badgeVariant, active: active, variant: "subtitle", fontWeight: "semiBold" }, children));
 }

package/icons/Close.js

@@ -4,5 +4,5 @@ import { useTheme } from "styled-components/native";
 export default function Close({ size = 16, color }) {
     const { colors } = useTheme();
     return (React.createElement(Svg, { viewBox: "0 0 16 16", width: size, height: size },
-        React.createElement(Path, { fill: color || colors.palette.neutral.c100, d: "M9.65 8.413l4.066-4.065a.375.375 0 0 0 0-.532l-.706-.706a.375.375 0 0 0-.531 0L8.413 7.176 4.348 3.11a.375.375 0 0 0-.532 0l-.706.706a.375.375 0 0 0 0 .532l4.066 4.065L3.11 12.48a.375.375 0 0 0 0 .531l.706.706a.375.375 0 0 0 .532 0l4.065-4.065 4.066 4.065a.375.375 0 0 0 .531 0l.706-.706a.375.375 0 0 0 0-.531L9.651 8.413z" })));
+        React.createElement(Path, { fill: color || colors.neutral.c100, d: "M9.65 8.413l4.066-4.065a.375.375 0 0 0 0-.532l-.706-.706a.375.375 0 0 0-.531 0L8.413 7.176 4.348 3.11a.375.375 0 0 0-.532 0l-.706.706a.375.375 0 0 0 0 .532l4.066 4.065L3.11 12.48a.375.375 0 0 0 0 .531l.706.706a.375.375 0 0 0 .532 0l4.065-4.065 4.066 4.065a.375.375 0 0 0 .531 0l.706-.706a.375.375 0 0 0 0-.531L9.651 8.413z" })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.1.0",
+  "version": "0.4.0",
   "description": "Ledger Live - Desktop UI",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
@@ -15,24 +15,25 @@
     "index.js"
   ],
   "dependencies": {
-    "@ledgerhq/ui-shared": "^0.1.1",
+    "@ledgerhq/icons-ui": "^0.2.0",
+    "@ledgerhq/ui-shared": "^0.1.3",
     "@types/color": "^3.0.2",
-    "@types/react": "^17.0.30",
+    "@types/react": "^17.0.34",
     "@types/react-native": "^0.65.9",
-    "@types/styled-components-react-native": "^5.1.1",
+    "@types/styled-components-react-native": "^5.1.3",
     "@types/styled-system": "^5.1.13",
     "color": "^3.1.3",
+    "moment": "^2.29.1",
     "react-native-modal": "^12.0.3",
-    "react-native-reanimated": "~2.2.3",
-    "react-native-svg": "12.1.1",
     "rn-range-slider": "^2.1.1",
-    "styled-components": "^5.3.3",
-    "styled-system": "^5.1.5"
+    "styled-system": "^5.1.5",
+    "victory-native": "^35.5.5"
   },
   "peerDependencies": {
     "react": "^17.0.2",
     "react-native": "^0.64.0",
-    "react-native-reanimated": "~2.2.3",
-    "react-native-svg": "12.1.1"
+    "react-native-reanimated": "^2.2.4",
+    "react-native-svg": "^12.1.1",
+    "styled-components": "^5.3.3"
   }
 }

package/styles/InvertTheme.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ThemeNames } from "@ledgerhq/ui-shared";
+interface Props {
+    children: React.ReactNode;
+    selectedPalette?: ThemeNames;
+}
+export declare const InvertTheme: ({ children }: Props) => React.ReactElement;
+export {};

package/styles/InvertTheme.js

@@ -0,0 +1,10 @@
+import React, { useMemo } from "react";
+import { ThemeProvider, useTheme } from "styled-components/native";
+import { defaultTheme } from ".";
+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]);
+    return React.createElement(ThemeProvider, { theme: newTheme }, children);
+};

package/styles/StyleProvider.d.ts

@@ -7,15 +7,6 @@ declare type Props = {
 };
 declare module "styled-components" {
     interface DefaultTheme extends Theme {
-        sizes: {
-            topBarHeight: number;
-            sideBarWidth: number;
-        };
-        radii: number[];
-        fontSizes: number[];
-        space: number[];
-        colors: Record<string, any>;
-        zIndexes: number[];
     }
 }
 export declare const StyleProvider: ({ children, selectedPalette, }: Props) => React.ReactElement;

package/styles/StyleProvider.js

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

package/styles/helpers.d.ts

@@ -1,5 +1,8 @@
 export declare const rgba: (c: string, a: number) => string;
+export declare const hex: (color: string) => string;
 export declare const darken: (c: string, a: number) => string;
 export declare const lighten: (c: string, a: number) => string;
 export declare const mix: (c: string, b: string, a: number) => string;
-export declare const getColor: (p: Record<string, any>, color: string) => string;
+export declare const getColor: (p: {
+    colors: unknown;
+}, color: string) => string;

package/styles/helpers.js

@@ -1,16 +1,14 @@
 import Color from "color";
 export const rgba = (c, a) => Color(c).alpha(a).rgb().toString();
+export const hex = (color) => Color(color).hex().toString();
 export const darken = (c, a) => Color(c).darken(a).toString();
 export const lighten = (c, a) => Color(c).lighten(a).toString();
 export const mix = (c, b, a) => Color(c).mix(Color(b), a).toString();
 const get = (object, path) => {
-    let p = path;
-    if (typeof path === "string")
-        p = path.split(".").filter((key) => key.length);
-    // @ts-expect-error FIXME
-    return p.reduce(
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-    (dive, key) => dive && dive[key], object);
+    const p = typeof path === "string"
+        ? path.split(".").filter((key) => key.length)
+        : path;
+    return p.reduce((dive, key) => dive && dive[key], object);
 };
 export const getColor = (p, color) => {
     const c = get(p.colors, color);

package/styles/index.d.ts

@@ -2,3 +2,4 @@ export { default as defaultTheme } from "./theme";
 export * from "./helpers";
 export * from "./StyleProvider";
 export type { ThemeNames, ColorPalette } from "@ledgerhq/ui-shared";
+export { palettes } from "@ledgerhq/ui-shared";

package/styles/index.js

@@ -1,3 +1,4 @@
 export { default as defaultTheme } from "./theme";
 export * from "./helpers";
 export * from "./StyleProvider";
+export { palettes } from "@ledgerhq/ui-shared";