@ledgerhq/native-ui 0.2.0 → 0.6.0

package/components/ProgressBar/index.js

@@ -0,0 +1,33 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import styled from "styled-components/native";
+import Flex from "../Layout/Flex";
+import Animated, { useDerivedValue, useAnimatedStyle, withTiming, } from "react-native-reanimated";
+const ActiveBar = styled.View `
+  background-color: ${(p) => p.theme.colors.neutral.c100};
+  position: absolute;
+  height: 100%;
+  top: 0;
+  left: 0;
+`;
+const AnimatedBar = Animated.createAnimatedComponent(ActiveBar);
+function ProgressBar(_a) {
+    var { index, length } = _a, props = __rest(_a, ["index", "length"]);
+    const width = useDerivedValue(() => Math.round((index / (length - 1)) * 100), [index, length]);
+    const animatedStyles = useAnimatedStyle(() => ({
+        width: withTiming(`${width.value}%`),
+    }));
+    return (React.createElement(Flex, Object.assign({ height: 4, width: "100%", backgroundColor: "neutral.c20", position: "relative" }, props),
+        React.createElement(AnimatedBar, { style: [animatedStyles] })));
+}
+export default React.memo(ProgressBar);

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { BaseTabsProps, TabItemProps } from "../TemplateTabs";
+export declare const ChipTab: ({ onPress, isActive, label, }: TabItemProps) => React.ReactElement;
+declare const ChipTabs: (props: BaseTabsProps) => React.ReactElement;
+export default ChipTabs;

package/components/Tabs/Chip/index.js

@@ -0,0 +1,20 @@
+import React from "react";
+import styled from "styled-components/native";
+import Text from "../../Text";
+import { TouchableOpacity } from "react-native";
+import TemplateTabs from "../TemplateTabs";
+const TabBox = styled(TouchableOpacity) `
+  text-align: center;
+  margin: auto;
+  flex: 1;
+  padding: ${(p) => p.theme.space[5]}px 0;
+  border-radius: 8px;
+  background-color: ${(p) => p.isActive ? p.theme.colors.palette.primary.c20 : "transparent"};
+`;
+const StyledTabs = styled(TemplateTabs) ``;
+export const ChipTab = ({ onPress, isActive, label, }) => {
+    return (React.createElement(TabBox, { isActive: isActive, onPress: onPress },
+        React.createElement(Text, { variant: "small", fontWeight: "semiBold", color: isActive ? "palette.neutral.c100" : "palette.neutral.c80", textAlign: "center" }, label)));
+};
+const ChipTabs = (props) => (React.createElement(StyledTabs, Object.assign({}, props, { Item: ChipTab })));
+export default ChipTabs;

package/components/Tabs/Graph/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { BaseTabsProps, TabItemProps } from "../TemplateTabs";
+export declare const GraphTab: ({ onPress, isActive, label, }: TabItemProps) => React.ReactElement;
+declare const GraphTabs: (props: BaseTabsProps) => React.ReactElement;
+export default GraphTabs;

package/components/Tabs/Graph/index.js

@@ -0,0 +1,21 @@
+import React from "react";
+import styled from "styled-components/native";
+import Text from "../../Text";
+import { TouchableOpacity } from "react-native";
+import Button from "../../cta/Button";
+import TemplateTabs from "../TemplateTabs";
+const TabBbx = styled(TouchableOpacity) `
+  text-align: center;
+  margin: auto;
+  flex: 1;
+`;
+const StyledTabs = styled(TemplateTabs) `
+  border: ${(p) => `1px solid ${p.theme.colors.palette.neutral.c40}`};
+  border-radius: 35px;
+  padding: 4px;
+`;
+export const GraphTab = ({ onPress, isActive, label, }) => {
+    return (React.createElement(TabBbx, { onPress: onPress }, isActive ? (React.createElement(Button, { type: "main" }, label)) : (React.createElement(Text, { lineHeight: 36, textAlign: "center" }, label))));
+};
+const GraphTabs = (props) => (React.createElement(StyledTabs, Object.assign({}, props, { Item: GraphTab })));
+export default GraphTabs;

package/components/Tabs/TemplateTabs/index.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="styled-components-react-native" />
+import React from "react";
+export declare type BaseTabsProps = {
+    labels: string[];
+    activeIndex: number;
+    onChange: (newIndex: number) => void;
+};
+export declare type TabItemProps = Partial<BaseTabsProps> & {
+    label: string;
+    isActive: boolean;
+    index: number;
+    onPress: () => void;
+};
+export declare type TabsProps = BaseTabsProps & {
+    Item: (props: TabItemProps) => React.ReactElement;
+};
+export declare const TabsContainer: import("styled-components").StyledComponent<typeof import("react-native").View, 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>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<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").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & {
+    columnGap?: string | number | undefined;
+    rowGap?: string | number | undefined;
+    color?: string | undefined;
+    display?: string | undefined;
+    position?: string | undefined;
+    maxHeight?: number | undefined;
+} & {
+    flexDirection: string;
+    alignItems: string;
+}, "alignItems" | "flexDirection">;
+declare const TemplateTabsGroup: (props: TabsProps) => React.ReactElement;
+export default TemplateTabsGroup;

package/components/Tabs/TemplateTabs/index.js

@@ -0,0 +1,14 @@
+import React from "react";
+import styled from "styled-components/native";
+import FlexBox from "../../Layout/Flex";
+export const TabsContainer = styled(FlexBox).attrs({
+    flexDirection: "row",
+    alignItems: "stretch",
+}) `
+  width: 100%;
+`;
+const TemplateTabsGroup = (props) => {
+    const { labels, activeIndex, onChange, Item } = props;
+    return (React.createElement(TabsContainer, Object.assign({}, props), labels.map((label, index) => (React.createElement(Item, Object.assign({ key: index }, props, { label: label, index: index, isActive: index === activeIndex, onPress: () => onChange(index) }))))));
+};
+export default TemplateTabsGroup;

package/components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ChipTabs } from "./Chip";
+export { default as GraphTabs } from "./Graph";

package/components/Tabs/index.js

@@ -0,0 +1,2 @@
+export { default as ChipTabs } from "./Chip";
+export { default as GraphTabs } from "./Graph";

package/components/Text/index.js

@@ -20,7 +20,7 @@ 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 || "palette.neutral.c100",
+        color: p.color || "neutral.c100",
     });
 }) `
   ${(p) => getTextStyle(p)}
@@ -39,7 +39,7 @@ 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();
     const c = theme ? getColor(theme, color) : "transparent";

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.c00), 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,8 +1,8 @@
 /// <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;
@@ -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;
-    }> | null | undefined;
-    type?: "default" | "main" | "shade" | "error" | "color" | undefined;
-    size?: "large" | "small" | "medium" | 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;` : "")}
 `;
@@ -69,12 +68,12 @@ const ButtonContainer = (props) => {
         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/index.d.ts

@@ -1,5 +1,4 @@
 export * from "./cta";
-export * from "./drawer";
 export * from "./Form";
 export * from "./Icon";
 export * from "./Layout";
@@ -8,3 +7,7 @@ export * from "./message";
 export * from "./Navigation";
 export * from "./tags";
 export { default as Text } from "./Text";
+export { default as Carousel } from "./Carousel";
+export * from "./Tabs";
+export { default as ProgressBar } from "./ProgressBar";
+export * as Transitions from "./transitions";

package/components/index.js

@@ -1,5 +1,4 @@
 export * from "./cta";
-export * from "./drawer";
 export * from "./Form";
 export * from "./Icon";
 export * from "./Layout";
@@ -8,3 +7,8 @@ export * from "./message";
 export * from "./Navigation";
 export * from "./tags";
 export { default as Text } from "./Text";
+export { default as Carousel } from "./Carousel";
+export * from "./Tabs";
+export { default as ProgressBar } from "./ProgressBar";
+import * as Transitions_1 from "./transitions";
+export { Transitions_1 as Transitions };

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/{drawer → message}/Notification/index.d.ts

@@ -1,17 +1,18 @@
 import React from "react";
 import { TextProps, TouchableOpacityProps } from "react-native";
 declare type Props = {
-    Icon: React.ComponentType<{
+    Icon?: React.ComponentType<{
         size: number;
         color?: string;
     }>;
-    color?: string;
+    iconColor?: string;
     variant?: "primary" | "secondary";
     title: string;
     subtitle?: string;
     numberOfLines?: TextProps["numberOfLines"];
     onClose?: TouchableOpacityProps["onPress"];
-    onLearnMore?: TouchableOpacityProps["onPress"];
+    linkText?: string;
+    onLinkPress?: TouchableOpacityProps["onPress"];
 };
-export default function Notification({ Icon, color, variant, numberOfLines, title, subtitle, onClose, onLearnMore, }: Props): React.ReactElement;
+export default function Notification({ Icon, iconColor, variant, numberOfLines, title, subtitle, onClose, linkText, onLinkPress, }: Props): React.ReactElement;
 export {};

package/components/message/Notification/index.js

@@ -0,0 +1,35 @@
+import React from "react";
+import styled, { useTheme } from "styled-components/native";
+import FlexBox from "../../Layout/Flex";
+import { TouchableOpacity, } from "react-native";
+import Text from "../../Text";
+import CloseMedium from "@ledgerhq/icons-ui/native/CloseMedium";
+import { Flex } from "../../Layout";
+const NotificationContainer = styled.View `
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  ${(p) => p.variant === "primary" &&
+    `
+     padding: 16px;
+  `}
+  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, iconColor, variant = "primary", numberOfLines, title, subtitle, onClose, linkText, onLinkPress, }) {
+    const { colors } = useTheme();
+    const textColor = variant === "primary" ? colors.neutral.c00 : colors.neutral.c100;
+    return (React.createElement(NotificationContainer, { variant: variant },
+        Icon && (React.createElement(FlexBox, { mr: 16 },
+            React.createElement(Icon, { size: 20, color: iconColor || textColor }))),
+        React.createElement(FlexBox, { flexShrink: 1 },
+            React.createElement(Text, { variant: "body", fontWeight: "medium", color: textColor, numberOfLines: numberOfLines }, title),
+            !!subtitle && (React.createElement(Text, { variant: "body", fontWeight: "medium", color: variant === "primary" ? colors.neutral.c00 : colors.neutral.c80, mt: 2 }, subtitle)),
+            linkText && onLinkPress && (React.createElement(Flex, { mt: 3 },
+                React.createElement(TouchableOpacity, { onPress: onLinkPress },
+                    React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: textColor }, linkText))))),
+        onClose && (React.createElement(FlexBox, { marginLeft: "auto", pl: 16 },
+            React.createElement(TouchableOpacity, { onPress: onClose },
+                React.createElement(CloseMedium, { size: 14, color: textColor }))))));
+}

package/components/message/index.d.ts

@@ -1 +1,2 @@
 export { default as Alert } from "./Alert";
+export { default as Notification } from "./Notification";

package/components/message/index.js

@@ -1 +1,2 @@
 export { default as Alert } from "./Alert";
+export { default as Notification } from "./Notification";

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.js

@@ -4,22 +4,22 @@ 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",
         },
     },
 };

package/components/transitions/Fade.d.ts

@@ -0,0 +1,5 @@
+import { TransitionProps } from "./types";
+/**
+ * A fade-in / fade-out transition changing the opacity of its children based on their status.
+ */
+export declare function Fade({ status, duration, style, children }: TransitionProps): JSX.Element;

package/components/transitions/Fade.js

@@ -0,0 +1,32 @@
+import React, { useRef, useMemo, useEffect } from "react";
+import { Animated } from "react-native";
+/**
+ * A fade-in / fade-out transition changing the opacity of its children based on their status.
+ */
+export function Fade({ status, duration, style, children }) {
+    const fadeAnim = useRef(new Animated.Value(status === "entered" ? 1 : 0)).current;
+    const fadeIn = useMemo(() => Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration,
+        useNativeDriver: true,
+    }), [duration, fadeAnim]);
+    const fadeOut = useMemo(() => Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration,
+        useNativeDriver: true,
+    }), [duration, fadeAnim]);
+    useEffect(() => {
+        if (status === "entering") {
+            fadeIn.start();
+        }
+        if (status === "exiting") {
+            fadeOut.start();
+        }
+    }, [fadeIn, fadeOut, status]);
+    return (React.createElement(Animated.View, { style: [
+            {
+                opacity: fadeAnim,
+            },
+            style,
+        ] }, children));
+}

package/components/transitions/Slide.d.ts

@@ -0,0 +1,11 @@
+import { TransitionProps } from "./types";
+export interface SlideProps extends TransitionProps {
+    /**
+     * The direction of the slide animation.
+     */
+    direction?: "left" | "right";
+}
+/**
+ * A slide left/right transition translating its children based on their status and a given direction.
+ */
+export declare function Slide({ status, duration, style, direction, children, }: SlideProps): JSX.Element;