@ledgerhq/native-ui 0.1.1 → 0.5.0

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

@@ -16,7 +16,7 @@ import Input from "../BaseInput";
 import FlexBox from "../../../Layout/Flex";
 import QrCodeMedium from "@ledgerhq/icons-ui/native/QrCodeMedium";
 const QrCodeButton = styled(TouchableOpacity) `
-  background-color: ${(p) => p.theme.colors.palette.neutral.c100};
+  background-color: ${(p) => p.theme.colors.neutral.c100};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -26,11 +26,12 @@ const QrCodeButton = styled(TouchableOpacity) `
   border-width: 0;
 `;
 const Icon = styled(QrCodeMedium).attrs((p) => ({
-    color: p.theme.colors.palette.neutral.c00,
+    color: p.theme.colors.neutral.c00,
 })) ``;
-export default function QrCodeInput(_a) {
+function QrCodeInput(_a, ref) {
     var { onQrCodeClick } = _a, inputProps = __rest(_a, ["onQrCodeClick"]);
-    return (React.createElement(Input, Object.assign({}, inputProps, { renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", pr: "8px" },
+    return (React.createElement(Input, Object.assign({ ref: ref }, inputProps, { renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", pr: "8px" },
             React.createElement(QrCodeButton, { onPress: onQrCodeClick },
                 React.createElement(Icon, { size: "20px" }))) })));
 }
+export default React.forwardRef(QrCodeInput);

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

@@ -1,3 +1,14 @@
-/// <reference types="react" />
+import React from "react";
+import { TextInput } from "react-native";
 import { InputProps } from "../BaseInput";
-export default function SearchInput(props: InputProps): JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInput").CommonProps, "onChange" | "value"> & {
+    value: string;
+    renderLeft?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    onChange?: ((value: string) => void) | undefined;
+    onChangeEvent?: ((e: import("react-native").NativeSyntheticEvent<import("react-native").TextInputChangeEventData>) => void) | undefined;
+    serialize?: ((value: string) => string) | undefined;
+    deserialize?: ((value: string) => string) | undefined;
+    containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+} & React.RefAttributes<TextInput>>;
+export default _default;

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { GestureResponderEvent } from "react-native";
+export declare type ElementProps<V> = React.PropsWithChildren<{
+    first?: boolean;
+    selected?: boolean;
+    value?: V;
+    onPress?: ((event: GestureResponderEvent) => void) | undefined;
+}>;
+export declare type Props<V> = React.PropsWithChildren<{
+    currentValue?: V;
+    onChange: (newValue: V) => void;
+}>;
+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;
+}
+export default SelectableList;

package/components/Form/SelectableList.js

@@ -0,0 +1,32 @@
+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 SelectableList({ currentValue, onChange, children }) {
+    return (React.createElement(Flex, { accessible: true, accessibilityRole: "radiogroup" }, React.Children.map(children, (child, index) => {
+        if (!React.isValidElement(child))
+            return null;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const casted = child;
+        return React.cloneElement(casted, {
+            first: index === 0,
+            onPress: () => onChange(casted === null || casted === void 0 ? void 0 : casted.props.value),
+            selected: (casted === null || casted === void 0 ? void 0 : casted.props.value) === currentValue,
+        });
+    })));
+}
+SelectableList.Element = Element;
+export default SelectableList;

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

package/components/Form/Slider/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-const SliderScreen = () => {
+const SliderScreen = (_props) => {
     return React.createElement(React.Fragment, null);
 };
 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, { type: "small", fontWeight: "medium", color: "palette.neutral.c70" }, min),
-            React.createElement(Text, { type: "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, { type: "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] } }, 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,3 +2,4 @@ export { default as Checkbox } from "./Checkbox";
 export * from "./Input";
 export { default as Slider } from "./Slider";
 export { default as Switch } from "./Switch";
+export { default as SelectableList } from "./SelectableList";

package/components/Form/index.js

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

package/components/Icon/IconBox/index.js

@@ -9,11 +9,11 @@ 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 })));
+        React.createElement(Icon, { size: iconSize, color: color || colors.neutral.c100 })));
 }

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/Modals/BaseModal/index.d.ts

@@ -16,5 +16,5 @@ export declare type BaseModalProps = {
     description?: string;
     subtitle?: string;
     children: React.ReactNode;
-} & ModalProps;
-export default function BaseModal({ isOpen, onClose, containerStyle, modalStyle, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, ...rest }: Partial<BaseModalProps>): React.ReactElement;
+} & Partial<ModalProps>;
+export default function BaseModal({ isOpen, onClose, containerStyle, modalStyle, preventBackdropClick, Icon, iconColor, title, description, subtitle, children, ...rest }: BaseModalProps): React.ReactElement;

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;
@@ -38,19 +38,19 @@ const CloseContainer = styled.View `
   align-items: flex-end;
   margin-bottom: ${(p) => p.theme.space[7]}px;
 `;
-const StyledTitle = styled(Text).attrs({ type: "h3" }) `
+const StyledTitle = styled(Text).attrs({ variant: "h3" }) `
   text-transform: uppercase;
 `;
 const StyledDescription = styled(Text).attrs({
-    type: "body",
-    color: "palette.neutral.c80",
+    variant: "body",
+    color: "neutral.c80",
 }) `
   text-transform: capitalize;
   margin-top: ${(p) => p.theme.space[2]}px;
 `;
 const StyledSubtitle = styled(Text).attrs({
-    type: "subTitle",
-    color: "palette.neutral.c80",
+    variant: "subtitle",
+    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),

package/components/Layout/ScrollContainerHeader/Header.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import Animated from "react-native-reanimated";
 export declare type HeaderProps = {
     TopLeftSection?: JSX.Element;

package/components/Layout/ScrollContainerHeader/Header.js

@@ -6,7 +6,7 @@ import Flex from "../Flex";
 const Container = styled(Flex).attrs({
     paddingHorizontal: 16,
 }) `
-  background-color: ${(p) => p.theme.colors.palette.background.main};
+  background-color: ${(p) => p.theme.colors.background.main};
   width: 100%;
 `;
 const SCROLL_BREAKPOINT = 80;

package/components/Layout/Table/Row.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { Props as FlexBoxProps } from "../Flex";
 interface Props extends FlexBoxProps {
-    Icon: (props: {
+    Icon?: (props: {
         size?: number;
     }) => React.ReactElement;
     iconBorder?: boolean;

package/components/Layout/index.d.ts

@@ -1,4 +1,7 @@
+export { default as Accordion } from "./Collapse/Accordion";
 export { default as Flex } from "./Flex";
+export { default as Box } from "./Box";
 export * from "./Modals";
 export { default as ScrollContainer } from "./ScrollContainer";
+export { default as ScrollContainerHeader } from "./ScrollContainerHeader";
 export { default as Row } from "./Table/Row";

package/components/Layout/index.js

@@ -1,4 +1,7 @@
+export { default as Accordion } from "./Collapse/Accordion";
 export { default as Flex } from "./Flex";
+export { default as Box } from "./Box";
 export * from "./Modals";
 export { default as ScrollContainer } from "./ScrollContainer";
+export { default as ScrollContainerHeader } from "./ScrollContainerHeader";
 export { default as Row } from "./Table/Row";

package/components/Loader/index.d.ts

@@ -2,7 +2,10 @@ import React from "react";
 declare type Props = {
     progress?: number;
     onPress?: () => void;
-    Icon?: typeof React.Component;
+    Icon?: React.ComponentType<{
+        color: string;
+        size: number;
+    }>;
 };
 declare const ProgressLoader: ({ progress, onPress, Icon, }: Props) => React.ReactElement;
 export default ProgressLoader;

package/components/Loader/index.js

@@ -10,8 +10,8 @@ const iconSize = radius * 0.88;
 const iconOffset = radius - iconSize / 2;
 const ProgressLoader = ({ progress = 0, onPress, Icon, }) => {
     const { colors } = useTheme();
-    const backgroundColor = colors.palette.primary.c20;
-    const progressColor = colors.palette.primary.c90;
+    const backgroundColor = colors.primary.c20;
+    const progressColor = colors.primary.c90;
     const strokeDashoffset = circumference - progress * circumference;
     return (React.createElement(TouchableOpacity, { disabled: !onPress, onPress: onPress },
         React.createElement(Svg, { width: radius * 2, height: radius * 2 },

package/components/Navigation/SlideIndicator/index.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import styled from "styled-components/native";
-import Animated, { useAnimatedStyle, Easing, withTiming, } from "react-native-reanimated";
+import Animated, { useDerivedValue, useAnimatedStyle, Easing, withTiming, } from "react-native-reanimated";
 const Container = styled.View `
   flex-direction: row;
   align-items: center;
@@ -8,15 +8,19 @@ const Container = styled.View `
   height: 6px;
   position: relative;
 `;
-const Bullet = styled.TouchableOpacity `
+const bulletStyle = `
   width: 6px;
   height: 6px;
   border-radius: 6px;
   margin: 0 6px;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c40};
 `;
-const ActiveBullet = styled(Bullet) `
-  background-color: ${(p) => p.theme.colors.palette.neutral.c100};
+const Bullet = styled.TouchableOpacity `
+  ${bulletStyle}
+  background-color: ${(p) => p.theme.colors.neutral.c40};
+`;
+const ActiveBullet = styled.View.attrs({ pointerEvents: "none" }) `
+  ${bulletStyle}
+  background-color: ${(p) => p.theme.colors.neutral.c100};
   position: absolute;
   top: 0;
   left: 0;
@@ -28,10 +32,13 @@ const config = {
 };
 function SlideIndicator({ slidesLength, activeIndex = 0, onChange, }) {
     const slidesArray = useMemo(() => new Array(slidesLength).fill(0), [slidesLength]);
-    const activeSize = useMemo(() => (Math.max(0, Math.min(slidesLength - 1, activeIndex)) + 1) * (6 + 12) -
-        12, [activeIndex, slidesLength]);
+    const activeSize = useDerivedValue(() => {
+        const size = (Math.max(0, Math.min(slidesLength - 1, activeIndex)) + 1) * (6 + 12) -
+            12;
+        return size;
+    }, [activeIndex, slidesLength]);
     const animatedStyles = useAnimatedStyle(() => ({
-        width: withTiming(activeSize, config),
+        width: withTiming(activeSize.value, config),
     }));
     return (React.createElement(Container, null,
         slidesArray.map((_, index) => (React.createElement(Bullet, { key: index, onPress: () => onChange(index) }))),

package/components/Navigation/Stepper/index.js

@@ -19,12 +19,12 @@ import Animated, { useAnimatedStyle, withTiming, withDelay, Easing, } from "reac
 const Separator = styled.View `
   flex: 1;
   height: 1px;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c40};
+  background-color: ${(p) => p.theme.colors.neutral.c40};
   ${space}
 `;
 const SeparatorFilling = Animated.createAnimatedComponent(styled.View `
   height: 100%;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c100};
+  background-color: ${(p) => p.theme.colors.neutral.c100};
 `);
 const AnimatedSeparator = (_a) => {
     var { filled, delay, duration } = _a, spaceProps = __rest(_a, ["filled", "delay", "duration"]);
@@ -67,13 +67,13 @@ const StepIcon = {
     width: ${(p) => p.theme.space[2]}px;
     height: ${(p) => p.theme.space[2]}px;
     border-radius: ${(p) => p.theme.radii[2]}px;
-    background-color: ${(p) => p.theme.colors.palette.primary.c90};
+    background-color: ${(p) => p.theme.colors.primary.c90};
   `,
     Pending: styled.View `
     width: ${(p) => p.theme.space[1]}px;
     height: ${(p) => p.theme.space[1]}px;
     border-radius: ${(p) => p.theme.space[1]}px;
-    background-color: ${(p) => p.theme.colors.palette.neutral.c70};
+    background-color: ${(p) => p.theme.colors.neutral.c70};
   `,
     Completed: ({ color }) => (React.createElement(CheckAlone, { size: 16, color: color })),
     Errored: ({ color }) => (React.createElement(CloseMedium, { size: 16, color: color })),
@@ -85,13 +85,13 @@ const StepView = styled.View `
   justify-content: center;
 `;
 const ActiveText = styled(Text) `
-  color: ${(p) => p.theme.colors.palette.neutral.c100};
+  color: ${(p) => p.theme.colors.neutral.c100};
 `;
 const PendingText = styled(Text) `
-  color: ${(p) => p.theme.colors.palette.neutral.c70};
+  color: ${(p) => p.theme.colors.neutral.c70};
 `;
 const ErroredText = styled(Text) `
-  color: ${(p) => p.theme.colors.palette.error.c100};
+  color: ${(p) => p.theme.colors.error.c100};
 `;
 function Step({ state, label, showLeftSeparator, showRightSeparator, }) {
     const labelText = useMemo(() => {
@@ -109,19 +109,19 @@ function Step({ state, label, showLeftSeparator, showRightSeparator, }) {
     const icon = useMemo(() => {
         switch (state) {
             case "COMPLETED":
-                return (React.createElement(StepIcon.Background, { backgroundColor: "palette.primary.c20" },
-                    React.createElement(StepIcon.Completed, { color: colors.palette.primary.c90 })));
+                return (React.createElement(StepIcon.Background, { backgroundColor: "primary.c20" },
+                    React.createElement(StepIcon.Completed, { color: colors.primary.c90 })));
             case "CURRENT":
-                return (React.createElement(StepIcon.Background, { backgroundColor: "palette.primary.c20" },
+                return (React.createElement(StepIcon.Background, { backgroundColor: "primary.c20" },
                     React.createElement(StepIcon.Current, null)));
             case "ERRORED":
-                return (React.createElement(StepIcon.Background, { backgroundColor: "palette.warning.c30" },
-                    React.createElement(StepIcon.Errored, { color: colors.palette.error.c100 })));
+                return (React.createElement(StepIcon.Background, { backgroundColor: "warning.c30" },
+                    React.createElement(StepIcon.Errored, { color: colors.error.c100 })));
             case "PENDING":
                 return (React.createElement(StepIcon.Background, null,
                     React.createElement(StepIcon.Pending, null)));
         }
-    }, [state]);
+    }, [state, colors]);
     return (React.createElement(StepView, null,
         React.createElement(StepIcon.Container, { mb: 2 },
             showLeftSeparator && (React.createElement(AnimatedSeparator, { filled: state !== "PENDING", duration: 100, delay: state !== "PENDING" ? 350 : 0 })),

package/components/Navigation/ToggleGroup/index.d.ts

@@ -6,7 +6,14 @@ export declare type ToggleGroupProps = {
     activeIndex: number;
     onChange: (newIndex: number) => void;
 };
-export declare const ToggleGroupContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("../../Layout/Flex").Props & {
+export declare const ToggleGroupContainer: 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">;

package/components/Navigation/ToggleGroup/index.js

@@ -9,7 +9,7 @@ export const ToggleGroupContainer = styled(FlexBox).attrs({
     alignItems: "stretch",
 }) `
   width: 100%;
-  border: ${(p) => `1px solid ${p.theme.colors.palette.neutral.c40}`};
+  border: ${(p) => `1px solid ${p.theme.colors.neutral.c40}`};
   border-radius: 35px;
   padding: 4px;
 `;

package/components/Text/getTextStyle.d.ts

@@ -1,22 +1,15 @@
-export declare type TextTypes = "h1" | "h2" | "h3" | "emphasis" | "body" | "link" | "subTitle" | "small" | "tag" | "large" | "paragraph";
-export declare type FontWeightTypes = "medium" | "semibold" | "bold";
+import { TextVariants } from "../../styles/theme";
+import { BaseTextProps } from "./index";
+export declare type FontWeightTypes = "medium" | "semiBold" | "bold";
 export declare function getTextTypeStyle({ bracket }: {
     bracket?: boolean;
-}): {
-    [index: string]: {
-        fontFamily: string;
-        fontSize: number;
-        lineHeight: number;
-        paddingTop?: number;
-    };
-};
-export declare function getTextStyle({ type, bracket, fontWeight, }: {
-    type?: TextTypes;
-    bracket?: boolean;
-    fontWeight?: FontWeightTypes;
-}): {
+}): Record<TextVariants, {
+    fontFamily: string;
+    lineHeight?: number;
+    paddingTop?: number;
+}>;
+export declare function getTextStyle({ variant, bracket, fontWeight, }: Partial<BaseTextProps>): {
     fontFamily: string;
-    fontSize: number;
-    lineHeight: number;
+    lineHeight?: number;
     paddingTop?: number;
 };