@ledgerhq/native-ui 0.3.0 → 0.6.1

package/components/Form/Input/SearchInput/index.js

@@ -3,9 +3,10 @@ import styled from "styled-components/native";
 import Input, { InputRenderLeftContainer } from "../BaseInput";
 import SearchMedium from "@ledgerhq/icons-ui/native/SearchMedium";
 const Icon = styled(SearchMedium).attrs((p) => ({
-    color: p.theme.colors.palette.neutral.c70,
+    color: p.theme.colors.neutral.c70,
 })) ``;
-export default function SearchInput(props) {
-    return (React.createElement(Input, Object.assign({}, props, { renderLeft: React.createElement(InputRenderLeftContainer, null,
+function SearchInput(props, ref) {
+    return (React.createElement(Input, Object.assign({ ref: ref }, props, { renderLeft: React.createElement(InputRenderLeftContainer, null,
             React.createElement(Icon, null)) })));
 }
+export default React.forwardRef(SearchInput);

package/components/Form/SelectableList.d.ts

@@ -1,10 +1,19 @@
-import React from "react";
+import React, { ComponentType } from "react";
 import { GestureResponderEvent } from "react-native";
-export declare type ElementProps<V> = React.PropsWithChildren<{
+import { IconType } from "../Icon/type";
+declare type BaseElementProps<V> = {
     first?: boolean;
     selected?: boolean;
+    disabled?: boolean;
     value?: V;
     onPress?: ((event: GestureResponderEvent) => void) | undefined;
+    Icon?: IconType;
+};
+export declare type ElementProps<V> = React.PropsWithChildren<BaseElementProps<V> & {
+    /**
+     * A function that will render some content on the right side of the input.
+     */
+    renderRight?: ComponentType<BaseElementProps<V>> | React.ReactElement;
 }>;
 export declare type Props<V> = React.PropsWithChildren<{
     currentValue?: V;
@@ -12,6 +21,6 @@ export declare type Props<V> = React.PropsWithChildren<{
 }>;
 declare function SelectableList<V>({ currentValue, onChange, children }: Props<V>): JSX.Element;
 declare namespace SelectableList {
-    var Element: <V>({ first, value, selected, onPress, children, }: ElementProps<V>) => JSX.Element;
+    var Element: <V>(props: ElementProps<V>) => JSX.Element;
 }
 export default SelectableList;

package/components/Form/SelectableList.js

@@ -1,19 +1,20 @@
 import React from "react";
 import { TouchableOpacity } from "react-native";
 import styled from "styled-components/native";
-import { border } from "styled-system";
 import Flex from "../Layout/Flex";
 import { Text } from "../index";
 const ElementContainer = styled(Flex).attrs({
     accessible: true,
     accessibilityRole: "radio",
-}) `
-  ${border}
-`;
-function Element({ first, value, selected, onPress, children, }) {
-    return (React.createElement(TouchableOpacity, { onPress: onPress },
-        React.createElement(ElementContainer, { p: 6, mt: first ? 0 : 4, backgroundColor: selected ? "palette.primary.c20" : "palette.neutral.c00", border: "1px solid", borderColor: selected ? "palette.primary.c100" : "palette.neutral.c40", borderRadius: 1 },
-            React.createElement(Text, { variant: "large" }, children || value))));
+}) ``;
+function Element(props) {
+    const { first, value, selected, disabled, onPress, children, Icon, renderRight: RenderRight, } = props;
+    return (React.createElement(TouchableOpacity, { onPress: onPress, disabled: disabled },
+        React.createElement(ElementContainer, { p: 6, mt: first ? 0 : 4, backgroundColor: selected ? "primary.c20" : "neutral.c00", border: "1px solid", borderColor: selected ? "primary.c100" : "neutral.c40", borderRadius: 1, flexDirection: "row", alignItems: "center" },
+            Icon && (React.createElement(Flex, { mr: 6, flexShrink: 0 },
+                React.createElement(Icon, { size: 24, color: disabled ? "neutral.c50" : "neutral.c100" }))),
+            React.createElement(Text, { variant: "large", flex: 1, color: disabled ? "neutral.c50" : "neutral.c100" }, children || value),
+            RenderRight && (React.createElement(Flex, { pl: 6, flexShrink: 0 }, React.isValidElement(RenderRight) ? (RenderRight) : (React.createElement(RenderRight, Object.assign({}, props))))))));
 }
 function SelectableList({ currentValue, onChange, children }) {
     return (React.createElement(Flex, { accessible: true, accessibilityRole: "radiogroup" }, React.Children.map(children, (child, index) => {

package/components/Form/Slider/components.js

@@ -17,19 +17,19 @@ export const RailSelected = styled.View `
   margin-left: -5px;
   margin-right: -5px;
   height: 40px;
-  background-color: ${(p) => p.theme.colors.palette.primary.c40};
+  background-color: ${(p) => p.theme.colors.primary.c40};
   border-radius: 30px;
 `;
 export const Rail = styled.View `
   flex: 1;
   height: 40px;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c30};
+  background-color: ${(p) => p.theme.colors.neutral.c30};
   border-radius: 30px;
 `;
 const ThumbContainer = styled.View `
   height: 40px;
   width: 40px;
-  background-color: ${(p) => p.theme.colors.palette.primary.c90};
+  background-color: ${(p) => p.theme.colors.primary.c90};
   border-radius: 40px;
   display: flex;
   align-items: center;
@@ -38,7 +38,7 @@ const ThumbContainer = styled.View `
 export const Thumb = () => {
     const { colors } = useTheme();
     return (React.createElement(ThumbContainer, null,
-        React.createElement(ArrowsHMedium, { color: colors.palette.neutral.c00, size: 24 })));
+        React.createElement(ArrowsHMedium, { color: colors.neutral.c00, size: 24 })));
 };
 const LabelContainer = styled.View `
   display: flex;
@@ -46,10 +46,10 @@ const LabelContainer = styled.View `
   justify-content: center;
   align-items: center;
   padding: 3.5px 6px;
-  background-color: ${(p) => p.theme.colors.palette.primary.c20};
+  background-color: ${(p) => p.theme.colors.primary.c20};
   border-radius: 4px;
 `;
 export const Label = ({ children }) => {
     return (React.createElement(LabelContainer, null,
-        React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: "palette.primary.c90" }, children)));
+        React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: "primary.c90" }, children)));
 };

package/components/Form/Slider/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { SliderProps } from "./index.native";
 declare const SliderScreen: (_props: SliderProps) => JSX.Element;
 export default SliderScreen;

package/components/Form/Slider/index.native.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type SliderProps = {
     step: number;
     min: number;

package/components/Form/Slider/index.native.js

@@ -20,7 +20,7 @@ const Slider = ({ value, min, max, step, onChange, disabled }) => {
                 width: "100%",
             }, min: min, max: max, low: value, disabled: disabled, step: step, disableRange: true, floatingLabel: true, renderThumb: Thumb, renderRail: renderRail, renderRailSelected: renderRailSelected, renderLabel: renderLabel, renderNotch: renderNotch, onValueChanged: onChange }),
         React.createElement(MinMaxTextContainer, null,
-            React.createElement(Text, { variant: "small", fontWeight: "medium", color: "palette.neutral.c70" }, min),
-            React.createElement(Text, { variant: "small", fontWeight: "medium", color: "palette.neutral.c70" }, max))));
+            React.createElement(Text, { variant: "small", fontWeight: "medium", color: "neutral.c70" }, min),
+            React.createElement(Text, { variant: "small", fontWeight: "medium", color: "neutral.c70" }, max))));
 };
 export default Slider;

package/components/Form/Switch/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type SwitchProps = {
     checked: boolean;
     onChange?: (value: boolean) => void;

package/components/Form/Switch/index.js

@@ -7,9 +7,9 @@ const Switch = ({ checked, onChange, disabled, label, }) => {
     const { colors, space } = useTheme();
     return (React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
         React.createElement(NativeSwitch, { trackColor: {
-                false: colors.palette.neutral.c50,
-                true: colors.palette.primary.c80,
-            }, thumbColor: colors.palette.neutral.c00, onValueChange: onChange, value: checked, disabled: disabled, ios_backgroundColor: colors.palette.neutral.c50 }),
-        label ? (React.createElement(Text, { variant: "body", color: checked ? colors.palette.primary.c90 : colors.palette.neutral.c100, style: { marginLeft: space[3] } }, label)) : null));
+                false: colors.neutral.c50,
+                true: colors.primary.c80,
+            }, thumbColor: colors.neutral.c00, onValueChange: onChange, value: checked, disabled: disabled, ios_backgroundColor: colors.neutral.c50 }),
+        label ? (React.createElement(Text, { variant: "body", color: checked ? colors.primary.c90 : colors.neutral.c100, style: { marginLeft: space[3], flexShrink: 1 } }, label)) : null));
 };
 export default Switch;

package/components/Form/Toggle/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ButtonProps } from "../../cta/Button";
 declare type ToggleProps = {
     active?: boolean;

package/components/Form/index.d.ts

@@ -2,4 +2,5 @@ export { default as Checkbox } from "./Checkbox";
 export * from "./Input";
 export { default as Slider } from "./Slider";
 export { default as Switch } from "./Switch";
+export { default as Toggle } from "./Toggle";
 export { default as SelectableList } from "./SelectableList";

package/components/Form/index.js

@@ -2,4 +2,5 @@ export { default as Checkbox } from "./Checkbox";
 export * from "./Input";
 export { default as Slider } from "./Slider";
 export { default as Switch } from "./Switch";
+export { default as Toggle } from "./Toggle";
 export { default as SelectableList } from "./SelectableList";

package/components/Icon/BoxedIcon.d.ts

@@ -0,0 +1,48 @@
+import React from "react";
+export declare const DEFAULT_BOX_SIZE = 40;
+export declare const DEFAULT_ICON_SIZE = 16;
+export declare const DEFAULT_BADGE_SIZE = 20;
+export declare type IconProps = {
+    size?: number;
+    color?: string;
+};
+export declare type IconBoxProps = {
+    /**
+     * Component that takes `{size?: number; color?: string}` as props. Will be rendered at the top right with the size provided in `badgeSize` or a default size.
+     */
+    Badge?: React.ComponentType<IconProps>;
+    /**
+     * Color of the border
+     */
+    borderColor?: string;
+    /**
+     * Badge color, will be applied to the component provided in the `Badge` prop
+     */
+    badgeColor?: string;
+    /**
+     * Badge size, will be applied to the component provided in the `Badge` prop
+     */
+    badgeSize?: number;
+    children?: JSX.Element;
+    /**
+     * Box size for preview
+     */
+    size?: number;
+};
+export declare type BoxedIconProps = IconBoxProps & {
+    /**
+     * Component that takes `{size?: number; color?: string}` as props. Will be rendered at the top right with the size provided in `iconSize` or a default size.
+     */
+    Icon: React.ComponentType<IconProps> | ((props: IconProps) => JSX.Element);
+    /**
+     * Icon size, will be applied to the component provided in the `Icon` prop
+     */
+    iconSize?: number;
+    /**
+     * Icon color, will be applied to the component provided in the `Icon` prop
+     */
+    iconColor?: string;
+};
+export declare const IconBox: ({ Badge, size, children, borderColor, badgeColor, badgeSize, }: IconBoxProps) => JSX.Element;
+declare const BoxedIcon: ({ Icon, iconSize, iconColor, ...iconBoxProps }: BoxedIconProps) => JSX.Element;
+export default BoxedIcon;

package/components/Icon/BoxedIcon.js

@@ -0,0 +1,87 @@
+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, { useTheme } from "styled-components/native";
+import { PixelRatio } from "react-native";
+import { Rect, ClipPath, Svg, Defs } from "react-native-svg";
+import Flex from "../Layout/Flex";
+import Box from "../Layout/Box";
+export const DEFAULT_BOX_SIZE = 40;
+export const DEFAULT_ICON_SIZE = 16;
+export const DEFAULT_BADGE_SIZE = 20;
+const BORDER_RADIUS = 2;
+function getClipRectangleSize(badgeSize) {
+    return (3 / 4) * badgeSize;
+}
+const Container = styled(Flex).attrs((p) => ({
+    heigth: p.size,
+    width: p.size,
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    overflow: "visible",
+})) ``;
+const IconBoxBackground = styled(Flex) `
+  position: absolute;
+  height: ${(p) => p.size}px;
+  width: ${(p) => p.size}px;
+  border-radius: ${(p) => p.theme.radii[BORDER_RADIUS]}px;
+`;
+const BadgeContainer = styled.View `
+  position: absolute;
+  overflow: visible;
+  ${(p) => `
+    top: -${p.badgeSize / 2 - 2}px;
+    right: -${p.badgeSize / 2 - 2}px;
+    height: ${p.badgeSize}px;
+    width: ${p.badgeSize}px;`}
+`;
+/** This component is needed to draw a border that is clipped behind the badge icon */
+const IconBoxBackgroundSVG = ({ size, borderColor, badgeSize, }) => {
+    const { colors, radii } = useTheme();
+    const borderRadius = radii[BORDER_RADIUS];
+    const borderWidth = 1;
+    const paletteStr = borderColor.split(".")[0];
+    // @ts-expect-error idk how to handle this properly pls help
+    const palette = colors[paletteStr];
+    const strokeColor = (palette ? palette[borderColor.split(".")[1]] : borderColor) ||
+        colors.neutral.c40;
+    const squareSize = getClipRectangleSize(badgeSize);
+    /**
+     * The following adjustments are necessary to have visual consistency
+     *  between RN (native) Views with border and this component
+     */
+    const svgSize = size + borderWidth;
+    const rectSize = size - borderWidth;
+    const rectRadius = borderRadius - borderWidth / 2;
+    return (React.createElement(Box, { position: "absolute", overflow: "hidden" },
+        React.createElement(Svg, { height: svgSize, width: svgSize },
+            React.createElement(Defs, null,
+                React.createElement(ClipPath, { id: "clip" },
+                    React.createElement(Rect, { x: "0", y: "0", width: svgSize - squareSize, height: squareSize }),
+                    React.createElement(Rect, { x: "0", y: squareSize, width: "100%", height: svgSize - squareSize }))),
+            React.createElement(Rect, { strokeWidth: PixelRatio.roundToNearestPixel(borderWidth), stroke: strokeColor, x: borderWidth, y: borderWidth, rx: rectRadius, ry: rectRadius, width: rectSize, height: rectSize, fill: "transparent", clipPath: "url(#clip)" }))));
+};
+export const IconBox = ({ Badge, size = DEFAULT_BOX_SIZE, children, borderColor = "neutral.c40", badgeColor, badgeSize = DEFAULT_BADGE_SIZE, }) => {
+    const hasBadge = !!Badge;
+    return (React.createElement(Container, { size: size },
+        hasBadge ? (React.createElement(IconBoxBackgroundSVG, { size: size, badgeSize: badgeSize, borderColor: borderColor })) : (React.createElement(IconBoxBackground, { border: "1px solid", size: size, borderColor: borderColor })),
+        children,
+        hasBadge && (React.createElement(BadgeContainer, { badgeSize: badgeSize },
+            React.createElement(Badge, { size: badgeSize, color: badgeColor })))));
+};
+const BoxedIcon = (_a) => {
+    var { Icon, iconSize = DEFAULT_ICON_SIZE, iconColor } = _a, iconBoxProps = __rest(_a, ["Icon", "iconSize", "iconColor"]);
+    return (React.createElement(IconBox, Object.assign({}, iconBoxProps),
+        React.createElement(Icon, { size: iconSize || DEFAULT_ICON_SIZE, color: iconColor })));
+};
+export default BoxedIcon;

package/components/Icon/IconBox/index.d.ts

@@ -1,9 +1,7 @@
 import React from "react";
+import { IconOrElementType } from "../type";
 declare type Props = {
-    Icon: (props: {
-        size?: number;
-        color?: string;
-    }) => React.ReactElement;
+    Icon: IconOrElementType;
     color?: string;
     boxSize?: number;
     iconSize?: number;

package/components/Icon/IconBox/index.js

@@ -9,11 +9,10 @@ const IconContainer = styled.View `
   align-items: center;
   justify-content: center;
   border-width: 1px;
-  border-color: ${(p) => p.theme.colors.palette.neutral.c40};
+  border-color: ${(p) => p.theme.colors.neutral.c40};
   border-radius: ${(p) => `${p.theme.radii[1]}px`};
 `;
 export default function IconBox({ Icon, color, boxSize = DEFAULT_BOX_SIZE, iconSize = DEFAULT_ICON_SIZE, }) {
     const { colors } = useTheme();
-    return (React.createElement(IconContainer, { size: boxSize },
-        React.createElement(Icon, { size: iconSize, color: color || colors.palette.neutral.c100 })));
+    return (React.createElement(IconContainer, { size: boxSize }, React.isValidElement(Icon) ? (Icon) : (React.createElement(Icon, { size: iconSize, color: color || colors.neutral.c100 }))));
 }

package/components/Icon/index.d.ts

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

package/components/Icon/index.js

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

package/components/Icon/type.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export declare type IconProps = {
+    size?: number;
+    color?: string;
+};
+export declare type IconType = React.ComponentType<IconProps>;
+export declare type IconOrElementType = IconType | React.ReactElement;

package/components/Icon/type.js

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

package/components/Layout/Box/index.d.ts

@@ -0,0 +1,11 @@
+import { BaseStyledProps } from "../../styled";
+export declare type BoxProps = BaseStyledProps;
+declare const Box: 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;
+}, never>;
+export default Box;

package/components/Layout/Box/index.js

@@ -0,0 +1,3 @@
+import baseStyled from "../../styled";
+const Box = baseStyled.View ``;
+export default Box;

package/components/Layout/Flex/index.d.ts

@@ -1,13 +1,12 @@
-/// <reference types="styled-components-react-native" />
-import React from "react";
-import { BackgroundProps, ColorProps, FlexboxProps, LayoutProps, SpaceProps } from "styled-system";
-export interface Props extends ColorProps, BackgroundProps, LayoutProps, FlexboxProps, SpaceProps {
-    alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
-    flexBasis?: string;
-    flexDirection?: "row" | "row-reverse" | "column" | "column-reverse";
-    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
-    children?: React.ReactNode;
-    style?: Record<string, unknown>;
-}
-declare const FlexBox: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, Props, never>;
+import { BaseStyledProps } from "../../styled";
+export declare type FlexBoxProps = BaseStyledProps;
+export declare type Props = FlexBoxProps;
+declare const FlexBox: 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;
+}, never>;
 export default FlexBox;

package/components/Layout/Flex/index.js

@@ -1,11 +1,5 @@
-import styled from "styled-components/native";
-import { background, color, flexbox, layout, space, } from "styled-system";
-const FlexBox = styled.View `
+import baseStyled from "../../styled";
+const FlexBox = baseStyled.View `
   display: flex;
-  ${flexbox};
-  ${space};
-  ${background};
-  ${color};
-  ${layout};
 `;
 export default FlexBox;

package/components/Layout/List/IconBoxList/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { BaseListItemProps, BaseListProps } from "../List";
+import { IconType } from "../../../Icon/type";
+export declare type IconBoxListItemProps = Omit<BaseListItemProps, "bullet"> & {
+    Icon: IconType;
+};
+export declare type IconBoxListProps = Omit<BaseListProps, "items"> & {
+    items: IconBoxListItemProps[];
+};
+export default function IconBoxList({ items, ...props }: IconBoxListProps): React.ReactElement;

package/components/Layout/List/IconBoxList/index.js

@@ -0,0 +1,19 @@
+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, { useMemo } from "react";
+import List from "../List";
+import { IconBox } from "../../../Icon";
+export default function IconBoxList(_a) {
+    var { items } = _a, props = __rest(_a, ["items"]);
+    const iconBoxItems = useMemo(() => items.map((item) => (Object.assign(Object.assign({}, item), { bullet: React.createElement(IconBox, { Icon: item.Icon, boxSize: 48, iconSize: 20 }) }))), [items]);
+    return React.createElement(List, Object.assign({ items: iconBoxItems }, props));
+}

package/components/Layout/List/List/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { BaseStyledProps } from "../../../styled";
+export declare type BaseListItemProps = {
+    title?: string;
+    description?: string;
+    bullet?: React.ReactNode;
+};
+export declare type BaseListProps = {
+    items: BaseListItemProps[];
+    itemContainerProps?: BaseStyledProps;
+};
+export declare const ListItem: ({ title, description, bullet, ...props }: BaseStyledProps & BaseListItemProps) => React.ReactElement;
+export default function List({ items, itemContainerProps, ...props }: BaseListProps): React.ReactElement;

package/components/Layout/List/List/index.js

@@ -0,0 +1,29 @@
+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, { useCallback } from "react";
+import Text from "../../../Text";
+import { Box, Flex } from "../../index";
+import { FlatList } from "react-native";
+export const ListItem = (_a) => {
+    var { title, description, bullet = null } = _a, props = __rest(_a, ["title", "description", "bullet"]);
+    return (React.createElement(Flex, Object.assign({ flexDirection: "row", alignItems: "center" }, props),
+        bullet && (React.createElement(Box, { mr: 7, flexShrink: 0 }, bullet)),
+        React.createElement(Flex, { flexDirection: "column", flexShrink: 1, flexWrap: "nowrap" },
+            title && (React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: "neutral.c100", flexShrink: 1, mb: description ? 2 : null }, title)),
+            description && (React.createElement(Text, { variant: "body", fontWeight: "medium", color: "neutral.c80", flexShrink: 1 }, description)))));
+};
+export default function List(_a) {
+    var { items, itemContainerProps } = _a, props = __rest(_a, ["items", "itemContainerProps"]);
+    const renderItem = useCallback(({ item }) => (React.createElement(ListItem, Object.assign({}, item, { mb: 6, pb: 2 }, itemContainerProps))), [itemContainerProps]);
+    return (React.createElement(Flex, Object.assign({ flexDirection: "column" }, props),
+        React.createElement(FlatList, { data: items, renderItem: renderItem })));
+}

package/components/Layout/List/NumberedList/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { BaseListItemProps, BaseListProps } from "../List";
+export declare type NumberedListItemProps = Omit<BaseListItemProps, "bullet"> & {
+    number?: number;
+};
+export declare type NumberedListProps = Omit<BaseListProps, "items"> & {
+    items: NumberedListItemProps[];
+};
+export default function NumberedList({ items, ...props }: NumberedListProps): React.ReactElement;

package/components/Layout/List/NumberedList/index.js

@@ -0,0 +1,20 @@
+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, { useMemo } from "react";
+import List from "../List";
+import { IconBox } from "../../../Icon";
+import Text from "../../../Text";
+export default function NumberedList(_a) {
+    var { items } = _a, props = __rest(_a, ["items"]);
+    const numberedItems = useMemo(() => items.map((item, index) => (Object.assign(Object.assign({}, item), { bullet: (React.createElement(IconBox, { Icon: React.createElement(Text, { variant: "body", fontWeight: "medium", color: "neutral.c100" }, item.number ? item.number : index), boxSize: 36 })) }))), [items]);
+    return React.createElement(List, Object.assign({ items: numberedItems }, props));
+}

package/components/Layout/List/TipList/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { BaseListItemProps, BaseListProps } from "../List";
+export declare type TipListItemProps = Omit<BaseListItemProps, "bullet"> & {
+    isPositive: boolean;
+};
+export declare type TipListProps = Omit<BaseListProps, "items"> & {
+    items: TipListItemProps[];
+};
+export default function TipList({ items, ...props }: TipListProps): React.ReactElement;

package/components/Layout/List/TipList/index.js

@@ -0,0 +1,20 @@
+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, { useMemo } from "react";
+import List from "../List";
+import Check from "@ledgerhq/icons-ui/native/CheckAloneMedium";
+import Close from "@ledgerhq/icons-ui/native/CloseMedium";
+export default function TipList(_a) {
+    var { items } = _a, props = __rest(_a, ["items"]);
+    const tipItems = useMemo(() => items.map((item) => (Object.assign(Object.assign({}, item), { bullet: item.isPositive ? (React.createElement(Check, { size: 20, color: "success.c100" })) : (React.createElement(Close, { size: 20, color: "error.c100" })) }))), [items]);
+    return React.createElement(List, Object.assign({ items: tipItems }, props));
+}

package/components/Layout/List/index.d.ts

@@ -0,0 +1,4 @@
+export { default as List } from "./List";
+export { default as IconBoxList } from "./IconBoxList";
+export { default as TipList } from "./TipList";
+export { default as NumberedList } from "./NumberedList";

package/components/Layout/List/index.js

@@ -0,0 +1,4 @@
+export { default as List } from "./List";
+export { default as IconBoxList } from "./IconBoxList";
+export { default as TipList } from "./TipList";
+export { default as NumberedList } from "./NumberedList";

package/components/Layout/Modals/BaseModal/index.js

@@ -19,7 +19,7 @@ import FlexBox from "../../../Layout/Flex";
 import Text from "../../../Text";
 const { width, height } = sizes;
 const Container = styled.View `
-  background-color: ${(p) => p.theme.colors.palette.background.main};
+  background-color: ${(p) => p.theme.colors.background.main};
   width: 100%;
   padding: 16px;
   min-height: 350px;
@@ -43,14 +43,14 @@ const StyledTitle = styled(Text).attrs({ variant: "h3" }) `
 `;
 const StyledDescription = styled(Text).attrs({
     variant: "body",
-    color: "palette.neutral.c80",
+    color: "neutral.c80",
 }) `
   text-transform: capitalize;
   margin-top: ${(p) => p.theme.space[2]}px;
 `;
 const StyledSubtitle = styled(Text).attrs({
     variant: "subtitle",
-    color: "palette.neutral.c80",
+    color: "neutral.c80",
 }) `
   text-transform: uppercase;
   margin-bottom: ${(p) => p.theme.space[2]}px;
@@ -77,7 +77,7 @@ export default function BaseModal(_a) {
                 Icon && (React.createElement(FlexBox, { mb: 24 }, typeof Icon === "function"
                     ? Icon({
                         size: 48,
-                        color: iconColor || colors.palette.neutral.c100,
+                        color: iconColor || colors.neutral.c100,
                     })
                     : Icon)),
                 subtitle && React.createElement(StyledSubtitle, null, subtitle),