@ledgerhq/native-ui 0.5.0 → 0.6.3

package/README.md

@@ -211,10 +211,7 @@ export default function App() {
         <Text variant="h2" color="neutral.c100" my={10}>
           Hello, world!
         </Text>
-        <Switch
-          checked={isLight}
-          onChange={() => setPalette(() => (isLight ? "dark" : "light"))}
-        />
+        <Switch checked={isLight} onChange={() => setPalette(() => (isLight ? "dark" : "light"))} />
       </Flex>
     </StyleProvider>
   );

package/components/Carousel/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef, useCallback } from "react";
-import { Platform, } from "react-native";
+import { Platform } from "react-native";
 import styled from "styled-components/native";
 import { Flex, SlideIndicator } from "../index";
 const HorizontalScrollView = styled.ScrollView.attrs({ horizontal: true }) `
@@ -14,9 +14,7 @@ function Carousel({ activeIndex, autoDelay, containerProps, slideIndicatorContai
     const slidesLength = React.Children.count(children);
     const scrollRef = useRef(null);
     const fullWidth = 100 * slidesLength;
-    const itemWidth = !dimensions.current
-        ? 0
-        : dimensions.current.contentWidth / slidesLength;
+    const itemWidth = !dimensions.current ? 0 : dimensions.current.contentWidth / slidesLength;
     const scrollToIndex = useCallback((index, animated = true) => {
         if (scrollRef.current && dimensions.current) {
             scrollRef.current.scrollTo({
@@ -52,7 +50,7 @@ function Carousel({ activeIndex, autoDelay, containerProps, slideIndicatorContai
         const interval = setInterval(() => {
             if (!disableTimer.current) {
                 setActiveIndexState((index) => {
-                    const newIndex = index ? (index + 1) % slidesLength : 0;
+                    const newIndex = typeof index !== "undefined" ? (index + 1) % slidesLength : 0;
                     scrollToIndex(newIndex);
                     onChange && onChange(newIndex);
                     return newIndex;

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

@@ -5,5 +5,5 @@ declare type CheckboxProps = {
     disabled?: boolean;
     label?: BaseTextProps["children"];
 };
-declare const Checkbox: ({ checked, onChange, disabled, label, }: CheckboxProps) => JSX.Element;
+declare const Checkbox: ({ checked, onChange, disabled, label }: CheckboxProps) => JSX.Element;
 export default Checkbox;

package/components/Form/Checkbox/index.js

@@ -16,7 +16,7 @@ const Square = styled(Flex).attrs({
     ? `background-color: ${theme.colors.primary.c90};`
     : `border: 1px solid ${theme.colors.neutral.c50};`}
 `;
-const Checkbox = ({ checked, onChange, disabled, label, }) => {
+const Checkbox = ({ checked, onChange, disabled, label }) => {
     const { colors, space } = useTheme();
     return (React.createElement(Pressable, { onPress: onChange, disabled: disabled },
         React.createElement(Flex, { flexDirection: "row", alignItems: "center" },

package/components/Form/Input/BaseInput/index.d.ts

@@ -71,7 +71,7 @@ export declare const InputRenderRightContainer: import("styled-components").Styl
     flexDirection: string;
     pr: string;
 }, "pr" | "alignItems" | "flexDirection">;
-declare function Input<T = string>(props: InputProps<T>, ref?: React.ForwardedRef<TextInput>): JSX.Element;
+declare function Input<T = string>(props: InputProps<T>, ref?: any): JSX.Element;
 declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
     /**
      * The value of the input.

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

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useMemo, useCallback } from "react";
+import React, { useMemo, useCallback, useEffect, useImperativeHandle, useRef } from "react";
 import styled, { css } from "styled-components/native";
 import Text from "../../../Text";
 import FlexBox from "../../../Layout/Flex";
@@ -17,7 +17,7 @@ const InputContainer = styled.View `
   display: flex;
   flex-direction: row;
   width: 100%;
-  background: ${(p) => p.theme.colors.neutral.c00};
+  background: ${(p) => p.theme.colors.background.main};
   height: 48px;
   border: ${(p) => `1px solid ${p.theme.colors.neutral.c40}`};
   border-radius: 24px;
@@ -49,6 +49,8 @@ const InputContainer = styled.View `
 `;
 const BaseInput = styled.TextInput.attrs((p) => ({
     selectionColor: p.theme.colors.primary.c80,
+    color: p.theme.colors.neutral.c100,
+    placeholderTextColor: p.theme.colors.neutral.c80,
 })) `
   height: 100%;
   width: 100%;
@@ -77,18 +79,30 @@ export const InputRenderRightContainer = styled(FlexBox).attrs(() => ({
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const IDENTITY = (_) => _;
 function Input(props, ref) {
-    const { value, onChange, onChangeText, onChangeEvent, disabled, error, renderLeft, renderRight, serialize = IDENTITY, deserialize = IDENTITY, containerStyle } = props, textInputProps = __rest(props, ["value", "onChange", "onChangeText", "onChangeEvent", "disabled", "error", "renderLeft", "renderRight", "serialize", "deserialize", "containerStyle"]);
+    const { value, onChange, onChangeText, onChangeEvent, disabled, error, renderLeft, renderRight, serialize = IDENTITY, deserialize = IDENTITY, containerStyle, autoFocus, onFocus, onBlur } = props, textInputProps = __rest(props, ["value", "onChange", "onChangeText", "onChangeEvent", "disabled", "error", "renderLeft", "renderRight", "serialize", "deserialize", "containerStyle", "autoFocus", "onFocus", "onBlur"]);
+    const inputRef = useRef();
+    useImperativeHandle(ref, () => inputRef.current, [inputRef]);
     const inputValue = useMemo(() => serialize(value), [serialize, value]);
     const handleChange = useCallback((value) => {
         onChange && onChange(deserialize(value));
         onChangeText && onChangeText(value);
     }, [onChange, onChangeText, deserialize]);
+    useEffect(() => {
+        if (autoFocus && inputRef && inputRef.current && inputRef.current.focus)
+            inputRef.current.focus();
+    }, [inputRef, autoFocus]);
     const [focus, setFocus] = React.useState(false);
     return (React.createElement(FlexBox, { width: "100%", style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
         React.createElement(InputContainer, { disabled: disabled, focus: focus, error: error },
             typeof renderLeft === "function" ? renderLeft(props) : renderLeft,
-            React.createElement(BaseInput, Object.assign({ ref: ref }, textInputProps, { value: inputValue, onChange: onChangeEvent, onChangeText: handleChange, editable: !disabled, disabled: disabled, error: error, onFocus: () => setFocus(true), onBlur: () => setFocus(false) })),
+            React.createElement(BaseInput, Object.assign({ ref: inputRef }, textInputProps, { value: inputValue, onChange: onChangeEvent, onChangeText: handleChange, editable: !disabled, disabled: disabled, error: error, onFocus: (e) => {
+                    setFocus(true);
+                    typeof onFocus === "function" && onFocus(e);
+                }, onBlur: (e) => {
+                    setFocus(false);
+                    typeof onBlur === "function" && onBlur(e);
+                } })),
             typeof renderRight === "function" ? renderRight(props) : renderRight),
-        !!error && !disabled && (React.createElement(InputErrorContainer, null, error))));
+        !!error && !disabled && React.createElement(InputErrorContainer, null, error)));
 }
 export default React.forwardRef(Input);

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

@@ -16,8 +16,8 @@ import Input from "../BaseInput";
 import FlexBox from "../../../Layout/Flex";
 import Text from "../../../Text";
 const PercentButton = styled(TouchableOpacity) `
-  color: ${(p) => p.active ? p.theme.colors.neutral.c00 : p.theme.colors.neutral.c70};
-  background-color: ${(p) => p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c00};
+  color: ${(p) => (p.active ? p.theme.colors.neutral.c00 : p.theme.colors.neutral.c70)};
+  background-color: ${(p) => (p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c00)};
   border-radius: 100px;
   border-width: 0;
   height: 31px;

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 ? "primary.c20" : "neutral.c00", border: "1px solid", borderColor: selected ? "primary.c100" : "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/index.native.js

@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 import styled from "styled-components/native";
 import RnRangeSlider from "rn-range-slider";
 import Text from "../../Text";
-import { Label, MinMaxTextContainer, Notch, Rail, RailSelected, Thumb, } from "./components";
+import { Label, MinMaxTextContainer, Notch, Rail, RailSelected, Thumb } from "./components";
 const SliderContainer = styled.View `
   display: flex;
   flex-direction: column;

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

@@ -4,5 +4,5 @@ declare type SwitchProps = {
     disabled?: boolean;
     label?: string;
 };
-declare const Switch: ({ checked, onChange, disabled, label, }: SwitchProps) => JSX.Element;
+declare const Switch: ({ checked, onChange, disabled, label }: SwitchProps) => JSX.Element;
 export default Switch;

package/components/Form/Switch/index.js

@@ -3,13 +3,13 @@ import { Switch as NativeSwitch } from "react-native";
 import { useTheme } from "styled-components/native";
 import Text from "../../Text";
 import Flex from "../../Layout/Flex";
-const Switch = ({ checked, onChange, disabled, label, }) => {
+const Switch = ({ checked, onChange, disabled, label }) => {
     const { colors, space } = useTheme();
     return (React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
         React.createElement(NativeSwitch, { trackColor: {
                 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] } }, label)) : null));
+        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

@@ -4,5 +4,5 @@ declare type ToggleProps = {
     onPress: () => void;
     children: ButtonProps["children"];
 };
-export default function Toggle({ active, children, onPress, }: ToggleProps): JSX.Element;
+export default function Toggle({ active, children, onPress }: ToggleProps): JSX.Element;
 export {};

package/components/Form/Toggle/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { TouchableOpacity } from "react-native";
 import Button from "../../cta/Button";
-export default function Toggle({ active = false, children, onPress, }) {
+export default function Toggle({ active = false, children, onPress }) {
     return (React.createElement(TouchableOpacity, { onPress: onPress },
         React.createElement(Button, { disabled: !active, type: "main" }, children)));
 }

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,49 @@
+import { IconOrElementType, IconType } from "./type";
+export declare const DEFAULT_BOX_SIZE = 40;
+export declare const DEFAULT_ICON_SIZE = 16;
+export declare const DEFAULT_BADGE_SIZE = 20;
+export declare type Variant = "square" | "circle";
+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?: IconType;
+    /**
+     * 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;
+    /**
+     * Box variant (box or circled)
+     */
+    variant?: Variant;
+};
+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: IconOrElementType;
+    /**
+     * 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, variant, }: IconBoxProps) => JSX.Element;
+declare const BoxedIcon: ({ Icon, iconSize, iconColor, ...iconBoxProps }: BoxedIconProps) => JSX.Element;
+export default BoxedIcon;

package/components/Icon/BoxedIcon.js

@@ -0,0 +1,85 @@
+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.variant === "circle" ? p.size : 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, variant = "square", }) => {
+    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 = variant === "circle" ? size : 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, variant = "square", }) => {
+    const hasBadge = !!Badge;
+    return (React.createElement(Container, { size: size },
+        hasBadge ? (React.createElement(IconBoxBackgroundSVG, { size: size, badgeSize: badgeSize, borderColor: borderColor, variant: variant })) : (React.createElement(IconBoxBackground, { border: "1px solid", size: size, borderColor: borderColor, variant: variant })),
+        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.isValidElement(Icon) ? (Icon) : (React.createElement(Icon, { size: iconSize || DEFAULT_ICON_SIZE, color: iconColor }))));
+};
+export default BoxedIcon;

package/components/Icon/Icon.d.ts

@@ -0,0 +1,9 @@
+export declare type Props = {
+    name: string;
+    size?: number;
+    weight?: "Regular" | "Thin" | "Light" | "Medium" | "UltraLight";
+    color?: string;
+};
+export declare const iconNames: string[];
+declare const Icon: ({ name, size, color, weight, }: Props) => JSX.Element | null;
+export default Icon;

package/components/Icon/Icon.js

@@ -0,0 +1,20 @@
+import * as icons from "@ledgerhq/icons-ui/native";
+import React from "react";
+export const iconNames = Array.from(Object.keys(icons).reduce((set, rawKey) => {
+    const key = rawKey
+        .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, "$1")
+        .replace(/(.+)(Ultra)+$/g, "$1");
+    if (!set.has(key))
+        set.add(key);
+    return set;
+}, new Set()));
+const Icon = ({ name, size = 16, color = "currentColor", weight = "Medium", }) => {
+    const maybeIconName = `${name}${weight}`;
+    if (maybeIconName in icons) {
+        // @ts-expect-error FIXME I don't know how to make you happy ts
+        const Component = icons[maybeIconName];
+        return React.createElement(Component, { size: size, color: color });
+    }
+    return null;
+};
+export default Icon;

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

@@ -14,6 +14,5 @@ const IconContainer = styled.View `
 `;
 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.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,3 @@
 export { default as IconBox } from "./IconBox";
+export { default as BoxedIcon } from "./BoxedIcon";
+export { default as Icon } from "./Icon";

package/components/Icon/index.js

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

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/Collapse/Accordion/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import Animated, { useSharedValue, withTiming, useAnimatedStyle, Easing, } from "react-native-reanimated";
 import Link from "../../../cta/Link";
-import { ChevronBottomMedium, ChevronTopMedium, } from "@ledgerhq/icons-ui/native";
+import { ChevronBottomMedium, ChevronTopMedium } from "@ledgerhq/icons-ui/native";
 import { View } from "react-native";
 const Accordion = ({ collapsed = false, children, title, onPress, }) => {
     const animationHeight = useSharedValue(collapsed ? "0%" : "100%");

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,23 @@
+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) => {
+        var _a;
+        return (Object.assign(Object.assign({}, item), { bullet: (React.createElement(IconBox, { Icon: React.createElement(Text, { variant: "body", fontWeight: "medium", color: "neutral.c100" }, (_a = item.number) !== null && _a !== void 0 ? _a : index + 1), 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;