@ledgerhq/native-ui 0.1.1 → 0.5.0

package/components/Text/getTextStyle.js

@@ -2,61 +2,47 @@ export function getTextTypeStyle({ bracket }) {
     return {
         h1: {
             fontFamily: "Alpha",
-            fontSize: 36,
-            lineHeight: 43.2,
+            lineHeight: 32,
             paddingTop: bracket ? 15 : 0,
         },
         h2: {
             fontFamily: "Alpha",
-            fontSize: 28,
-            lineHeight: 33.6,
+            lineHeight: 28,
             paddingTop: bracket ? 10 : 0,
         },
         h3: {
             fontFamily: "Alpha",
-            fontSize: 20,
-            lineHeight: 24,
+            lineHeight: 20,
             paddingTop: bracket ? 5 : 0,
         },
-        large: {
+        h4: {
             fontFamily: "Inter",
-            fontSize: 16,
-            lineHeight: 19.36,
         },
-        emphasis: {
+        large: {
             fontFamily: "Inter",
-            fontSize: 14,
-            lineHeight: 20,
         },
         body: {
             fontFamily: "Inter",
-            fontSize: 14,
+        },
+        bodyLineHeight: {
+            fontFamily: "Inter",
             lineHeight: 20,
         },
         paragraph: {
             fontFamily: "Inter",
-            fontSize: 13,
-            lineHeight: 15.73,
         },
-        link: {
+        paragraphLineHeight: {
             fontFamily: "Inter",
-            fontSize: 13,
-            lineHeight: 16,
+            lineHeight: 18,
         },
-        tiny: {
+        small: {
             fontFamily: "Inter",
-            fontSize: 12,
-            lineHeight: 16,
         },
-        navigation: {
+        subtitle: {
             fontFamily: "Inter",
-            fontSize: 12,
-            lineHeight: 14.52,
         },
-        subTitle: {
+        tiny: {
             fontFamily: "Inter",
-            fontSize: 11,
-            lineHeight: 13.31,
         },
     };
 }
@@ -65,12 +51,18 @@ const getConcatenedFontWeightFontFamily = {
         medium: {
             fontFamily: "HMAlphaMono-Medium",
         },
+        semiBold: {
+            fontFamily: "HMAlphaMono-Medium",
+        },
+        bold: {
+            fontFamily: "HMAlphaMono-Medium",
+        },
     },
     Inter: {
         medium: {
             fontFamily: "Inter-Medium",
         },
-        semibold: {
+        semiBold: {
             fontFamily: "Inter-SemiBold",
         },
         bold: {
@@ -78,7 +70,8 @@ const getConcatenedFontWeightFontFamily = {
         },
     },
 };
-export function getTextStyle({ type = "body", bracket, fontWeight = "medium", }) {
-    const style = getTextTypeStyle({ bracket })[type];
-    return Object.assign(Object.assign({}, style), getConcatenedFontWeightFontFamily[style.fontFamily || "Inter"][fontWeight]);
+export function getTextStyle({ variant = "paragraph", bracket = false, fontWeight = "medium", }) {
+    var _a;
+    const style = getTextTypeStyle({ bracket })[variant];
+    return Object.assign(Object.assign({}, style), getConcatenedFontWeightFontFamily[(_a = style === null || style === void 0 ? void 0 : style.fontFamily) !== null && _a !== void 0 ? _a : "Inter"][fontWeight]);
 }

package/components/Text/index.d.ts

@@ -1,12 +1,13 @@
 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;
+    fontSize?: number | string | TextVariants;
     color?: string;
     mt?: number | string;
     mb?: number | string;
@@ -17,5 +18,5 @@ interface Props extends TextProps, FontSizeProps, TextAlignProps, ColorProps, Sp
     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,7 +16,14 @@ import BracketRight from "../../icons/BracketLeft";
 import BracketLeft from "../../icons/BracketRight";
 import { getColor } from "../../styles";
 import { getTextStyle } from "./getTextStyle";
-const Base = styled.Text.attrs((p) => (Object.assign(Object.assign({}, getTextStyle(p)), { color: p.color || "palette.neutral.c100" }))) `
+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};
@@ -32,10 +39,9 @@ const T = styled.View `
   align-items: center;
 `;
 const BracketText = (_a) => {
-    var { children, color = "palette.neutral.c100", lineHeight } = _a, props = __rest(_a, ["children", "color", "lineHeight"]);
+    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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Item } from "./types";
 export declare type ChartProps = {
     data: Array<Item>;

package/components/chart/index.js

@@ -6,7 +6,7 @@ import { VictoryLine, VictoryChart, VictoryAxis, VictoryArea, VictoryScatter, }
 import { hex } from "../../styles/helpers";
 import Flex from "../Layout/Flex";
 const Container = styled(Flex) `
-  background-color: ${(p) => p.theme.colors.palette.background.main};
+  background-color: ${(p) => p.theme.colors.background.main};
 `;
 const sortByDate = (a, b) => {
     if (a.date.getTime() < b.date.getTime())
@@ -22,7 +22,7 @@ const Chart = ({ data, color, tickFormat = "MMM", valueKey = "value", height = 1
         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.palette.neutral.c40,
+                        stroke: theme.colors.neutral.c40,
                         strokeDasharray: "4 4",
                     },
                     axisLabel: { display: "none" },
@@ -32,11 +32,11 @@ const Chart = ({ data, color, tickFormat = "MMM", valueKey = "value", height = 1
                 } }),
             React.createElement(VictoryAxis, { crossAxis: false, tickFormat: (timestamp) => moment(timestamp).format(tickFormat), style: {
                     axis: {
-                        stroke: theme.colors.palette.neutral.c40,
+                        stroke: theme.colors.neutral.c40,
                         strokeDasharray: "4 4",
                     },
                     tickLabels: {
-                        fill: theme.colors.palette.neutral.c80,
+                        fill: theme.colors.neutral.c80,
                         fontSize: 12,
                         lineHeight: 14.52,
                     },
@@ -45,14 +45,14 @@ const Chart = ({ data, color, tickFormat = "MMM", valueKey = "value", height = 1
             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.palette.neutral.c0), stopOpacity: "0" }))),
+                    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.palette.background.main,
+                        fill: theme.colors.background.main,
                     },
                 }, size: 5, data: [sortData[sortData.length - 1]], x: "date", y: valueKey }))));
 };

package/components/cta/Button/getButtonStyle.js

@@ -1,29 +1,29 @@
 export function getButtonColors(colors) {
     return {
         default: {
-            primaryColor: colors.palette.neutral.c100,
+            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,12 @@
 /// <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 & SpaceProps & {
+import { BaseStyledProps } from "../../styled";
+export declare type ButtonProps = TouchableOpacityProps & BaseStyledProps & {
     Icon?: React.ComponentType<{
         size: number;
         color: string;
-    }>;
+    }> | null;
     type?: "main" | "shade" | "error" | "color" | "default";
     size?: "small" | "medium" | "large";
     iconPosition?: "right" | "left";
@@ -17,19 +17,8 @@ export declare type ButtonProps = TouchableOpacityProps & SpaceProps & {
 };
 export declare const Base: import("styled-components").StyledComponent<typeof TouchableOpacity, import("styled-components").DefaultTheme, {
     iconButton?: boolean | undefined;
-} & TouchableOpacityProps & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
-    Icon?: React.ComponentType<{
-        size: number;
-        color: string;
-    }> | undefined;
-    type?: "default" | "main" | "shade" | "error" | "color" | undefined;
-    size?: "small" | "medium" | "large" | undefined;
-    iconPosition?: "left" | "right" | undefined;
-    outline?: boolean | undefined;
-    disabled?: boolean | undefined;
-    pressed?: boolean | undefined;
-    children?: React.ReactNode;
-}, never>;
+    sizeVariant?: ButtonProps["size"];
+} & Omit<ButtonProps, "size">, never>;
 declare const Button: (props: ButtonProps) => React.ReactElement;
 export declare const PromisableButton: (props: ButtonProps) => React.ReactElement;
 export default Button;

package/components/cta/Button/index.js

@@ -9,11 +9,11 @@ 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, space } from "styled-system";
 import { ActivityIndicator, TouchableOpacity, } from "react-native";
 import { buttonSizeStyle, getButtonColorStyle, } from "../../cta/Button/getButtonStyle";
 import { ctaIconSize, ctaTextType } from "../../cta/getCtaStyle";
 import Text from "../../Text";
+import baseStyled from "../../styled";
 const IconContainer = styled.View `
   ${(p) => p.iconButton
     ? ""
@@ -21,12 +21,11 @@ const IconContainer = styled.View `
         ? `margin-right: 10px;`
         : `margin-left: 10px;`}
 `;
-export const Base = styled(TouchableOpacity).attrs((p) => (Object.assign({}, getButtonColorStyle(p.theme.colors, p).button))) `
-  ${color};
-  ${border};
-  ${space};
+export const Base = baseStyled(TouchableOpacity).attrs((p) => (Object.assign(Object.assign({}, getButtonColorStyle(p.theme.colors, p).button), { 
+    // Avoid conflict with styled-system's size property by nulling size and renaming it
+    size: undefined, sizeVariant: p.size }))) `
+
   border-radius: ${(p) => p.theme.space[10]}px;
-  height: ${(p) => p.theme.space[10]}px;
   padding: 0 ${(p) => p.theme.space[7]}px;
   flex-direction: row;
   border-style: solid;
@@ -36,7 +35,7 @@ export const Base = styled(TouchableOpacity).attrs((p) => (Object.assign({}, get
   align-content: center;
   overflow: hidden;
   position: relative;
-  ${(p) => buttonSizeStyle[p.size || "medium"]}
+  ${(p) => buttonSizeStyle[p.sizeVariant || "medium"]}
 
   ${(p) => (p.iconButton ? `padding: 0; width: ${p.theme.space[10]}px;` : "")}
 `;
@@ -63,18 +62,18 @@ 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 = "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 }))));
+    const { Icon, children, type = "default" } = props;
+    return (React.createElement(Base, Object.assign({}, props, { type: type, iconButton: !!Icon && !children, activeOpacity: 0.5 }),
+        React.createElement(ButtonContainer, Object.assign({}, props, { type: type }))));
 };
 export const PromisableButton = (props) => {
-    const { Icon, children, onPress, type = "main", size = "medium", disabled = false, } = props;
+    const { Icon, children, onPress, type = "main", disabled = false } = props;
     const [spinnerOn, setSpinnerOn] = useState(false);
     const theme = useTheme();
     const onPressHandler = useCallback((event) => __awaiter(void 0, void 0, void 0, function* () {
@@ -88,9 +87,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 }),
-        React.createElement(ButtonContainer, Object.assign({}, props, { type: type, size: size, hide: spinnerOn })),
+    return (React.createElement(Base, Object.assign({}, props, { type: type, iconButton: !!Icon && !children, disabled: disabled || spinnerOn, onPress: onPressHandler }),
+        React.createElement(ButtonContainer, Object.assign({}, props, { type: type, 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

@@ -10,27 +10,21 @@ const NotificationContainer = styled.View `
   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/index.d.ts

@@ -8,3 +8,4 @@ export * from "./message";
 export * from "./Navigation";
 export * from "./tags";
 export { default as Text } from "./Text";
+export { default as Carousel } from "./Carousel";

package/components/index.js

@@ -8,3 +8,4 @@ export * from "./message";
 export * from "./Navigation";
 export * from "./tags";
 export { default as Text } from "./Text";
+export { default as Carousel } from "./Carousel";

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

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

package/components/message/Alert/index.js

@@ -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/styled.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="styled-components-react-native" />
+import { ReactNativeStyledInterface, DefaultTheme } from "styled-components/native";
+import { FlexboxProps, SpaceProps, PositionProps, ColorProps, LayoutProps, OverflowProps, BorderProps, BackgroundProps } from "styled-system";
+import { InterpolationFunction } from "styled-components";
+export declare type BaseStyledProps = SpaceProps & FlexboxProps & PositionProps & ColorProps & LayoutProps & OverflowProps & BorderProps & BackgroundProps & {
+    columnGap?: string | number;
+    rowGap?: string | number;
+    color?: string;
+    display?: string;
+    position?: string;
+    maxHeight?: number;
+};
+export declare const baseStyles: InterpolationFunction<unknown>;
+declare const _default: ReactNativeStyledInterface<DefaultTheme>;
+export default _default;

package/components/styled.js

@@ -0,0 +1,12 @@
+import styled from "styled-components/native";
+import { compose, flexbox, space, position, color, layout, overflow, border, background, } from "styled-system";
+export const baseStyles = compose(flexbox, space, position, color, layout, overflow, border, background);
+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/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.1",
+  "version": "0.5.0",
   "description": "Ledger Live - Desktop UI",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
@@ -15,27 +15,25 @@
     "index.js"
   ],
   "dependencies": {
-    "@ledgerhq/icons-ui": "^0.1.0",
-    "@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.37",
     "@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",
     "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"
   }
 }