@ledgerhq/native-ui 0.18.1 → 0.19.0-next.0

package/lib/components/Cards/FullBackgroundCard/index.js

@@ -12,8 +12,8 @@ const FullBackgroundCard = ({ variant, backgroundImage, tag, description, onPres
     const { colors } = useTheme();
     const backgroundVariants = useMemo(() => ({
         purple: colors.primary.c80,
-        red: colors.error.c60,
-    }), [colors.primary.c80, colors.error.c60]);
+        red: colors.error.c30,
+    }), [colors.primary.c80, colors.error.c30]);
     const backgroundVariantColor = variant && backgroundVariants[variant]
         ? backgroundVariants[variant]
         : backgroundVariants.purple;
@@ -26,7 +26,7 @@ const FullBackgroundCard = ({ variant, backgroundImage, tag, description, onPres
                 React.createElement(ShadowGradient, { color: colors.neutral.c00 }))) : (React.createElement(ColoredGradient, { color: backgroundVariantColor, opacityColor: colors.neutral.c20 })),
             React.createElement(Flex, { p: 6 },
                 React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between", mb: 3 },
-                    React.createElement(Flex, { bg: "neutral.c100a01", borderRadius: 6, px: 3, py: "6px", maxWidth: "80%" },
+                    React.createElement(Flex, { bg: "opacityDefault.c10", borderRadius: 6, px: 3, py: "6px", maxWidth: "80%" },
                         React.createElement(Text, { variant: "small", fontWeight: "semiBold", color: "neutral.c90", numberOfLines: 1 }, tag)),
                     React.createElement(TouchableOpacity, { onPress: onDismiss, style: { top: -8, right: -8 } },
                         React.createElement(Flex, { bg: "neutral.c30", p: "6px", borderRadius: 24 },

package/lib/components/Cards/NotificationCard/index.js

@@ -6,11 +6,11 @@ import Box from "../../Layout/Box";
 import Link from "../../cta/Link";
 import styled from "styled-components/native";
 import { TouchableOpacity } from "react-native";
-const Tag = ({ tag }) => (React.createElement(Flex, { bg: "neutral.c100a01", borderRadius: 6, px: 3, py: "3px", maxWidth: "75%" },
+const Tag = ({ tag }) => (React.createElement(Flex, { bg: "opacityDefault.c10", borderRadius: 6, px: 3, py: "3px", maxWidth: "75%" },
     React.createElement(Text, { variant: "small", fontWeight: "semiBold", color: "neutral.c90", numberOfLines: 1 }, tag)));
 const Timer = ({ time, viewed }) => (React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", ml: 2 },
     React.createElement(Text, { variant: "small", fontWeight: "semiBold", color: "neutral.c90", numberOfLines: 1 }, time),
-    React.createElement(Box, { ml: 3, backgroundColor: viewed ? "transparent" : "error.c80", height: "8px", width: "8px", borderRadius: 24 })));
+    React.createElement(Box, { ml: 3, backgroundColor: viewed ? "transparent" : "error.c40", height: "8px", width: "8px", borderRadius: 24 })));
 const NotificationCard = (props) => {
     const { tag = "", time = "", title, description, cta, viewed, onClickCard, showLinkCta, link = "", } = props;
     const ctaIcon = useMemo(() => {

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

@@ -38,7 +38,7 @@ const InputContainer = styled.View `
   ${(p) => p.error &&
     !p.disabled &&
     css `
-      border: 1px solid ${p.theme.colors.error.c100};
+      border: 1px solid ${p.theme.colors.error.c50};
     `};
 
   ${(p) => p.disabled &&
@@ -62,7 +62,7 @@ const BaseInput = styled.TextInput.attrs((p) => ({
   padding-right: 20px;
 `;
 const InputErrorContainer = styled(Text) `
-  color: ${(p) => p.theme.colors.error.c100};
+  color: ${(p) => p.theme.colors.error.c50};
   margin-left: 12px;
 `;
 export const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({

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

@@ -15,6 +15,6 @@ 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]);
+    const tipItems = useMemo(() => items.map((item) => (Object.assign(Object.assign({}, item), { bullet: item.isPositive ? (React.createElement(Check, { size: 20, color: "success.c50" })) : (React.createElement(Close, { size: 20, color: "error.c50" })) }))), [items]);
     return React.createElement(List, Object.assign({ items: tipItems }, props));
 }

package/lib/components/Layout/List/VerticalStepper/StepperItem.js

@@ -43,7 +43,7 @@ export default function StepperItem({ item, progress, nested, isLastItem, setAct
             React.createElement(Container, { nested: nested, status: item.status, isLastItem: isLastItem },
                 React.createElement(Flex, { px: nested ? 0 : 4, py: nested ? 4 : 7, flexDirection: nested ? "row-reverse" : "row", justifyContent: nested ? "space-between" : "flex-start" },
                     React.createElement(Flex, { width: "28px", alignItems: "center" },
-                        item.status === "completed" && React.createElement(CheckAloneMedium, { size: 20, color: "success.c100" }),
+                        item.status === "completed" && React.createElement(CheckAloneMedium, { size: 20, color: "success.c50" }),
                         item.status === "active" && (React.createElement(ProgressLoader, { progress: progress, infinite: !progress, radius: 10, strokeWidth: 2 }))),
                     React.createElement(Flex, { flex: 1, ml: nested ? 0 : 4, mr: nested ? 0 : 2 },
                         React.createElement(Flex, { pb: item.status === "active" && item.renderBody ? 4 : undefined },

package/lib/components/Layout/List/VerticalTimeline/TimelineIndicator.js

@@ -27,7 +27,7 @@ const linesWidth = 2;
 const linesLength = 5000;
 const TopSegmentSvg = ({ status, hidden, height }) => {
     const theme = useTheme();
-    const strokeColor = status === "inactive" ? theme.colors.neutral.c50 : theme.colors.primary.c80;
+    const strokeColor = status === "inactive" ? theme.colors.neutral.c40 : theme.colors.primary.c80;
     const strokeDashArray = status === "inactive" ? `${dashLength}` : undefined;
     return (React.createElement(Flex, { height: height, width: "100%", overflow: "hidden" },
         React.createElement(Flex, { style: StyleSheet.absoluteFillObject, alignItems: "center" },
@@ -37,7 +37,7 @@ const TopSegmentSvg = ({ status, hidden, height }) => {
 const topSegmentDefaultHeight = Platform.OS === "android" ? 23 : 21; // difference due to how borders are drawn in android
 const BottomSegmentSvg = ({ status, hidden }) => {
     const theme = useTheme();
-    const strokeColor = status === "completed" ? theme.colors.primary.c80 : theme.colors.neutral.c50;
+    const strokeColor = status === "completed" ? theme.colors.primary.c80 : theme.colors.neutral.c40;
     const strokeDashArray = status === "completed" ? undefined : `${dashLength}`;
     return (React.createElement(Flex, { flex: 1, width: "100%", style: { transform: [{ scaleY: -1 }] }, overflow: "hidden" },
         React.createElement(Flex, { style: StyleSheet.absoluteFillObject, alignItems: "center" },
@@ -45,23 +45,24 @@ const BottomSegmentSvg = ({ status, hidden }) => {
                 React.createElement(Line, { x1: "0", y1: "0", x2: "0", y2: "100%", strokeWidth: hidden ? 0 : 2 * linesWidth, stroke: strokeColor, strokeDasharray: strokeDashArray, strokeDashoffset: `${dashLength}` })))));
 };
 const getIconBackground = (theme, status, isLastItem) => {
-    if (status === "completed") {
+    if (isLastItem) {
+        if (status === "inactive")
+            return theme.colors.success.c10;
         return "transparent";
     }
-    else if (isLastItem) {
-        return theme.colors.success.c10;
-    }
     else if (status === "active") {
         return theme.colors.neutral.c40;
     }
-    return theme.colors.background.main;
+    else {
+        return "transparent";
+    }
 };
 const getIconBorder = (theme, status, isLastItem) => {
     if (isLastItem) {
-        return theme.colors.success.c100;
+        return theme.colors.success.c70;
     }
     else if (status === "inactive") {
-        return theme.colors.neutral.c50;
+        return theme.colors.neutral.c40;
     }
     return theme.colors.primary.c80;
 };
@@ -79,7 +80,7 @@ export default function TimelineIndicator(_a) {
     const { colors } = useTheme();
     return (React.createElement(Flex, Object.assign({ flexDirection: "column", alignItems: "center" }, props),
         React.createElement(TopSegmentSvg, { status: status, hidden: isFirstItem, height: PixelRatio.roundToNearestPixel(topHeight || topSegmentDefaultHeight) }),
-        React.createElement(CenterCircle, { status: status, isLastItem: isLastItem }, status === "completed" && (React.createElement(CircledCheckSolidMedium, { color: isLastItem ? colors.success.c100 : colors.primary.c80, size: 20 }))),
+        React.createElement(CenterCircle, { status: status, isLastItem: isLastItem }, status === "completed" && (React.createElement(CircledCheckSolidMedium, { color: isLastItem ? colors.success.c70 : colors.primary.c80, size: 20 }))),
         React.createElement(BottomSegmentSvg, { status: status, hidden: isLastItem })));
 }
 TimelineIndicator.topSegmentDefaultHeight = topSegmentDefaultHeight;

package/lib/components/Layout/List/VerticalTimeline/TimelineItem.js

@@ -20,7 +20,7 @@ const getContainerBorder = (theme, status, isLastItem) => {
         return "transparent";
     }
     else if (isLastItem && status === "active") {
-        return theme.colors.success.c100;
+        return theme.colors.success.c50;
     }
     else if (status === "active") {
         return theme.colors.neutral.c40;
@@ -69,8 +69,8 @@ export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, i
                     : undefined }),
             React.createElement(Container, { status: item.status, isLastItem: isLastItem, mt: withExtraMarginOnActiveStep && !isFirstItem && item.status === "active" ? 4 : 0, mb: withExtraMarginOnActiveStep && !isLastItem && item.status === "active" ? 4 : 0 },
                 React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between" },
-                    React.createElement(Text, { variant: "body", fontWeight: "semiBold", flexShrink: 1, color: item.status === "completed" && isLastItem
-                            ? "success.c80"
+                    React.createElement(Text, { variant: "body", fontWeight: status === "active" ? "semiBold" : "medium", flexShrink: 1, color: item.status === "completed" && isLastItem
+                            ? "success.c40"
                             : item.status === "active"
                                 ? "primary.c80"
                                 : "neutral.c70" }, item.status === "completed" ? (_a = item.doneTitle) !== null && _a !== void 0 ? _a : item.title : item.title),

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
 import { BaseTextProps } from "../../../Text";
 import { BaseStyledProps } from "src/components/styled";
 import { Item } from "../types";
@@ -12,8 +13,9 @@ export type Props = BaseStyledProps & {
      * Defaults to true.
      * */
     autoScroll?: boolean;
+    contentContainerStyle?: StyleProp<ViewStyle>;
 };
-declare function VerticalTimeline({ steps, formatEstimatedTime, setActiveIndex, header, autoScroll, ...props }: Props): JSX.Element;
+declare function VerticalTimeline({ steps, formatEstimatedTime, setActiveIndex, header, autoScroll, contentContainerStyle, ...props }: Props): JSX.Element;
 declare namespace VerticalTimeline {
     var BodyText: React.FC<BaseTextProps>;
     var SubtitleText: React.FC<BaseTextProps>;

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

@@ -10,13 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useRef, useCallback } from "react";
-import { ScrollView, View } from "react-native";
+import { ScrollView, View, } from "react-native";
 import TimelineItem from "./TimelineItem";
 import Flex from "../../Flex";
 import Text from "../../../Text";
 import { ItemStatus } from "../types";
 export default function VerticalTimeline(_a) {
-    var { steps, formatEstimatedTime, setActiveIndex, header, autoScroll = true } = _a, props = __rest(_a, ["steps", "formatEstimatedTime", "setActiveIndex", "header", "autoScroll"]);
+    var { steps, formatEstimatedTime, setActiveIndex, header, autoScroll = true, contentContainerStyle } = _a, props = __rest(_a, ["steps", "formatEstimatedTime", "setActiveIndex", "header", "autoScroll", "contentContainerStyle"]);
     const scrollViewRef = useRef(null);
     const stepsContainerLayout = useRef();
     const onStepsContainerLayout = useCallback((evt) => {
@@ -28,7 +28,7 @@ export default function VerticalTimeline(_a) {
         const { layout } = evt.nativeEvent;
         scrollViewRef.current.scrollTo({ x: 0, y: stepsContainerLayout.current.y + layout.y });
     }, []);
-    return (React.createElement(ScrollView, { ref: scrollViewRef, onLayout: onStepsContainerLayout },
+    return (React.createElement(ScrollView, { ref: scrollViewRef, onLayout: onStepsContainerLayout, contentContainerStyle: contentContainerStyle },
         header,
         React.createElement(Flex, Object.assign({}, props, { onLayout: onStepsContainerLayout, flexDirection: "column" }), steps === null || steps === void 0 ? void 0 : steps.map((step, index) => (React.createElement(View, { onLayout: autoScroll && step.status === "active" ? onActiveStepLayout : undefined },
             React.createElement(TimelineItem, { key: step.title, item: step, formatEstimatedTime: formatEstimatedTime, isFirstItem: index === 0, isLastItem: index === steps.length - 1, setActiveIndex: setActiveIndex, index: index })))))));

package/lib/components/Navigation/Stepper/index.js

@@ -91,7 +91,7 @@ const PendingText = styled(Text) `
   color: ${(p) => p.theme.colors.neutral.c70};
 `;
 const ErroredText = styled(Text) `
-  color: ${(p) => p.theme.colors.error.c100};
+  color: ${(p) => p.theme.colors.error.c50};
 `;
 function Step({ state, label, showLeftSeparator, showRightSeparator, }) {
     const labelText = useMemo(() => {
@@ -116,7 +116,7 @@ function Step({ state, label, showLeftSeparator, showRightSeparator, }) {
                     React.createElement(StepIcon.Current, null)));
             case "ERRORED":
                 return (React.createElement(StepIcon.Background, { backgroundColor: "warning.c30" },
-                    React.createElement(StepIcon.Errored, { color: colors.error.c100 })));
+                    React.createElement(StepIcon.Errored, { color: colors.error.c50 })));
             case "PENDING":
                 return (React.createElement(StepIcon.Background, null,
                     React.createElement(StepIcon.Pending, null)));

package/lib/components/cta/Button/getButtonStyle.js

@@ -13,21 +13,21 @@ export function getButtonColors(colors) {
         main: {
             primaryColor: colors.neutral.c00,
             secondaryColor: colors.neutral.c100,
-            pressedColor: colors.neutral.c100a06,
-            pressedOutlineColor: colors.neutral.c100a01,
+            pressedColor: colors.opacityDefault.c60,
+            pressedOutlineColor: colors.opacityDefault.c10,
         },
         shade: {
             primaryColor: colors.neutral.c00,
             secondaryColor: colors.neutral.c100,
             tertiaryColor: colors.neutral.c40,
-            pressedColor: colors.neutral.c100a06,
-            pressedOutlineColor: colors.neutral.c100a01,
+            pressedColor: colors.opacityDefault.c60,
+            pressedOutlineColor: colors.opacityDefault.c10,
         },
         error: {
             primaryColor: colors.neutral.c00,
-            secondaryColor: colors.error.c100,
-            pressedColor: colors.error.c100a07,
-            pressedOutlineColor: colors.error.c100a025,
+            secondaryColor: colors.error.c50,
+            pressedColor: colors.error.c50a07,
+            pressedOutlineColor: colors.error.c50a025,
         },
         color: {
             primaryColor: colors.neutral.c00,

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

@@ -1,5 +1,6 @@
+/// <reference types="styled-components-react-native" />
 import React from "react";
-type AlertType = "info" | "warning" | "error";
+type AlertType = "info" | "secondary" | "success" | "warning" | "error";
 export type IconProps = {
     size?: number;
     color?: string;
@@ -15,13 +16,18 @@ export interface AlertProps {
     title?: React.ReactNode;
     showIcon?: boolean;
     children?: React.ReactNode;
-    /**
-     * Alternative to using the `children` prop in order to render something using the value of `textColor`
-     * that is passed as a parameter.
-     */
-    renderContent?: ({ textColor }: {
-        textColor: string;
-    }) => React.ReactNode | null;
 }
-export default function Alert({ type, Icon, title, showIcon, children, renderContent, }: AlertProps): JSX.Element;
-export {};
+declare function Alert({ type, Icon, title, showIcon, children }: AlertProps): JSX.Element;
+declare namespace Alert {
+    var BodyText: import("styled-components").StyledComponent<({ children, bracket, textAlign, ...props }: import("../../Text").BaseTextProps) => JSX.Element, import("styled-components").DefaultTheme, {
+        flexShrink: 1;
+        variant: "bodyLineHeight";
+        fontWeight: "semiBold";
+    }, "fontWeight" | "variant" | "flexShrink">;
+    var UnderlinedText: import("styled-components").StyledComponent<({ children, bracket, textAlign, ...props }: import("../../Text").BaseTextProps) => JSX.Element, import("styled-components").DefaultTheme, {
+        flexShrink: 1;
+        variant: "bodyLineHeight";
+        fontWeight: "semiBold";
+    }, "fontWeight" | "variant" | "flexShrink">;
+}
+export default Alert;

package/lib/components/message/Alert/index.js

@@ -1,51 +1,72 @@
 import React from "react";
 import styled, { useTheme } from "styled-components/native";
-import InfoMedium from "@ledgerhq/icons-ui/native/InfoMedium";
-import CircledCrossMedium from "@ledgerhq/icons-ui/native/CircledCrossMedium";
-import CircledAlertMedium from "@ledgerhq/icons-ui/native/CircledAlertMedium";
+import InfoAltFillMedium from "@ledgerhq/icons-ui/native/InfoAltFillMedium";
+import CircledCheckSolidMedium from "@ledgerhq/icons-ui/native/CircledCheckSolidMedium";
+import WarningSolidMedium from "@ledgerhq/icons-ui/native/WarningSolidMedium";
+import CircledCrossSolidMedium from "@ledgerhq/icons-ui/native/CircledCrossSolidMedium";
 import Text from "../../Text";
-import { getColor } from "../../../styles";
 import FlexBox from "../../Layout/Flex";
+import { getColor } from "../../../styles";
 const icons = {
-    info: InfoMedium,
-    warning: CircledAlertMedium,
-    error: CircledCrossMedium,
+    info: InfoAltFillMedium,
+    secondary: InfoAltFillMedium,
+    success: CircledCheckSolidMedium,
+    warning: WarningSolidMedium,
+    error: CircledCrossSolidMedium,
 };
 const alertColors = {
     info: {
-        backgroundColor: "primary.c20",
-        color: "primary.c90",
+        backgroundColor: "primary.c10",
+        iconColor: "primary.c80",
+    },
+    secondary: {
+        backgroundColor: "opacityDefault.c05",
+        iconColor: "neutral.c80",
+    },
+    success: {
+        backgroundColor: "success.c10",
+        iconColor: "success.c50",
     },
     warning: {
-        backgroundColor: "warning.c30",
-        color: "warning.c100",
+        backgroundColor: "warning.c10",
+        iconColor: "warning.c70",
     },
     error: {
-        backgroundColor: "error.c30",
-        color: "error.c100",
+        backgroundColor: "error.c10",
+        iconColor: "error.c50",
     },
 };
-const StyledIconContainer = styled.View `
-  margin-right: 12px;
-  display: flex;
-  align-items: center;
-`;
+const StyledIconContainer = styled(FlexBox).attrs({
+    mr: 4,
+    alignItems: "center",
+}) ``;
 const StyledAlertContainer = styled(FlexBox).attrs((p) => ({
     backgroundColor: alertColors[p.type || "info"].backgroundColor,
+    p: 6,
 })) `
   width: 100%;
-  border-radius: ${(p) => `${p.theme.radii[1]}px`};
-  padding: 16px;
+  border-radius: ${(p) => `${p.theme.radii[2]}px`};
   flex-direction: row;
-  align-items: center;
+  align-items: flex-start;
+`;
+const AlertBodyText = styled(Text).attrs({
+    flexShrink: 1,
+    variant: "bodyLineHeight",
+    fontWeight: "semiBold",
+}) ``;
+const AlertUnderlinedText = styled(AlertBodyText) `
+  text-decoration-line: underline;
 `;
-export default function Alert({ type = "info", Icon, title, showIcon = true, children, renderContent, }) {
+function Alert({ type = "info", Icon, title, showIcon = true, children }) {
     const theme = useTheme();
-    const textColor = getColor(theme, alertColors[type || "info"].color);
-    const iconProps = { size: 20, color: textColor };
+    const textColor = "neutral.c100";
+    const IconComponent = Icon !== null && Icon !== void 0 ? Icon : icons[type];
     return (React.createElement(StyledAlertContainer, { type: type },
-        showIcon && !!icons[type] && (React.createElement(StyledIconContainer, null, Icon ? React.createElement(Icon, Object.assign({}, iconProps)) : icons[type || "info"](iconProps))),
-        title && (React.createElement(Text, { color: textColor, flexShrink: 1 }, title)),
-        children,
-        renderContent && renderContent({ textColor })));
+        showIcon && !!icons[type] && (React.createElement(StyledIconContainer, null,
+            React.createElement(IconComponent, { size: 20, color: getColor(theme, alertColors[type || "info"].iconColor) }))),
+        title ? (React.createElement(Text, { color: textColor, flexShrink: 1, variant: "bodyLineHeight", fontWeight: "semiBold" }, title)) : null,
+        children));
 }
+Alert.BodyText = AlertBodyText;
+Alert.UnderlinedText = AlertUnderlinedText;
+export default Alert;

package/lib/components/message/Notification/index.js

@@ -14,17 +14,17 @@ const variantProps = {
         padding: 6,
     },
     success: {
-        bg: "success.c100",
+        bg: "success.c50",
         color: "neutral.c00",
         padding: 6,
     },
     warning: {
-        bg: "warning.c100",
+        bg: "warning.c50",
         color: "neutral.c00",
         padding: 6,
     },
     error: {
-        bg: "error.c100",
+        bg: "error.c50",
         color: "neutral.c00",
         padding: 6,
     },

package/lib/components/tags/Tag/index.js

@@ -16,7 +16,7 @@ import { Box } from "../../Layout";
 const typeColor = {
     color: "primary.c80",
     shade: "neutral.c30",
-    warning: "warning.c100",
+    warning: "warning.c50",
 };
 export default function Tag(_a) {
     var { type = "shade", size = "small", color, textColor, uppercase, Icon, children, numberOfLines, ellipsizeMode } = _a, props = __rest(_a, ["type", "size", "color", "textColor", "uppercase", "Icon", "children", "numberOfLines", "ellipsizeMode"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.18.1",
+  "version": "0.19.0-next.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -46,9 +46,9 @@
     "rn-range-slider": "2.1.1",
     "styled-system": "^5.1.5",
     "victory-native": "^35.5.5",
-    "@ledgerhq/crypto-icons-ui": "^0.2.2",
+    "@ledgerhq/crypto-icons-ui": "^0.3.0-next.0",
     "@ledgerhq/icons-ui": "^0.4.0",
-    "@ledgerhq/ui-shared": "^0.1.10"
+    "@ledgerhq/ui-shared": "^0.2.0-next.0"
   },
   "peerDependencies": {
     "@types/react": "*",
@@ -143,13 +143,12 @@
     "react-native-safe-area-context": "^4.5.0",
     "react-native-web": "~0.18.12",
     "regenerator-runtime": "^0.13.9",
-    "rimraf": "^4.1.2",
+    "rimraf": "^4.4.1",
     "styled-components": "^5.3.3",
     "stylelint": "^14.9.1",
     "stylelint-config-recommended": "^8.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
-    "typescript": "^4.9.5",
     "util": "^0.12.5",
     "victory": "^35.5.5",
     "webpack": "^5.76.1",