@ledgerhq/native-ui 0.18.0 → 0.18.1-nightly.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

@@ -58,7 +58,7 @@ const getIconBackground = (theme, status, isLastItem) => {
 };
 const getIconBorder = (theme, status, isLastItem) => {
     if (isLastItem) {
-        return theme.colors.success.c100;
+        return theme.colors.success.c50;
     }
     else if (status === "inactive") {
         return theme.colors.neutral.c50;
@@ -79,7 +79,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.c50 : 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;
@@ -70,7 +70,7 @@ export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, i
             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"
+                            ? "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/Loader/InfiniteLoader/index.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="styled-components-react-native" />
 import React from "react";
+import Svg from "react-native-svg";
 import { SizeProps } from "styled-system";
-declare const Loader: import("styled-components").StyledComponent<React.ComponentClass<import("react-native-svg").SvgProps, any>, import("styled-components").DefaultTheme, SizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>>, never>;
+declare const Loader: import("styled-components").StyledComponent<typeof Svg, import("styled-components").DefaultTheme, SizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>>, never>;
 export type Props = React.ComponentProps<typeof Loader> & {
     color?: string;
 };

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/Text/getTextStyle.js

@@ -15,6 +15,7 @@ const bracketSizes = {
     small: 16,
     subtitle: 16,
     tiny: 16,
+    tinyAlpha: 16,
 };
 export function getBracketSize({ variant }) {
     return variant ? bracketSizes[variant] : 20;
@@ -81,6 +82,9 @@ export function getTextTypeStyle({ bracket }) {
         tiny: {
             fontFamily: "Inter",
         },
+        tinyAlpha: {
+            fontFamily: "Alpha",
+        },
     };
 }
 const getConcatenedFontWeightFontFamily = {

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

@@ -17,12 +17,12 @@ const alertColors = {
         color: "primary.c90",
     },
     warning: {
-        backgroundColor: "warning.c30",
-        color: "warning.c100",
+        backgroundColor: "warning.c20",
+        color: "warning.c90",
     },
     error: {
-        backgroundColor: "error.c30",
-        color: "error.c100",
+        backgroundColor: "error.c20",
+        color: "error.c90",
     },
 };
 const StyledIconContainer = styled.View `

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/lib/styles/theme.d.ts

@@ -1,9 +1,9 @@
 import { ColorPalette } from "@ledgerhq/ui-shared";
 export declare const space: number[];
-export declare const textVariants: readonly ["h1", "h1Inter", "h2", "h3", "h4", "h5", "large", "largeLineHeight", "body", "bodyLineHeight", "paragraph", "paragraphLineHeight", "small", "subtitle", "tiny"];
+export declare const textVariants: readonly ["h1", "h1Inter", "h2", "h3", "h4", "h5", "large", "largeLineHeight", "body", "bodyLineHeight", "paragraph", "paragraphLineHeight", "small", "subtitle", "tiny", "tinyAlpha"];
 export type TextVariants = typeof textVariants[number];
 export type ThemeScale<Type, Aliases extends string> = Array<Type> & Record<Aliases, Type>;
-export declare const fontSizes: ThemeScale<number, "h1" | "h1Inter" | "h2" | "h3" | "h4" | "h5" | "large" | "largeLineHeight" | "body" | "bodyLineHeight" | "paragraph" | "paragraphLineHeight" | "small" | "subtitle" | "tiny">;
+export declare const fontSizes: ThemeScale<number, "h1" | "h1Inter" | "h2" | "h3" | "h4" | "h5" | "large" | "largeLineHeight" | "body" | "bodyLineHeight" | "paragraph" | "paragraphLineHeight" | "small" | "subtitle" | "tiny" | "tinyAlpha">;
 export declare const radii: number[];
 export declare const zIndexes: number[];
 export type Theme = {

package/lib/styles/theme.js

@@ -17,6 +17,7 @@ export const textVariants = [
     "small",
     "subtitle",
     "tiny",
+    "tinyAlpha",
 ];
 //                        0   1   2   3   4   5   6   7   8   9
 export const fontSizes = [10, 11, 12, 13, 14, 16, 18, 24, 28, 32];
@@ -37,6 +38,7 @@ fontSizes.paragraphLineHeight = fontSizes.paragraph;
 fontSizes.largeLineHeight = fontSizes.large;
 fontSizes.h4 = fontSizes.h2;
 fontSizes.h5 = fontSizes.h3;
+fontSizes.tinyAlpha = fontSizes.tiny;
 export const radii = [0, 4, 8];
 export const zIndexes = [-1, 0, 1, 9, 10, 90, 100, 900, 1000];
 const theme = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.18.0",
+  "version": "0.18.1-nightly.0",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",
@@ -42,69 +42,72 @@
     "moment": "^2.29.1",
     "react-native-animatable": "^1.3.3",
     "react-native-modal": "^13.0.0",
-    "react-native-svg": "^12.1.1",
-    "rn-range-slider": "^2.1.1",
+    "react-native-svg": "13.4.0",
+    "rn-range-slider": "2.1.1",
     "styled-system": "^5.1.5",
     "victory-native": "^35.5.5",
-    "@ledgerhq/crypto-icons-ui": "^0.2.1",
-    "@ledgerhq/icons-ui": "^0.3.5",
-    "@ledgerhq/ui-shared": "^0.1.10"
+    "@ledgerhq/crypto-icons-ui": "^0.2.2-nightly.0",
+    "@ledgerhq/icons-ui": "^0.4.0-nightly.1",
+    "@ledgerhq/ui-shared": "^0.2.0-nightly.0"
   },
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-native": "*",
     "@types/styled-components": "^5.3.3",
     "@types/styled-components-react-native": "^5.3.3",
-    "react": "^17.0.2",
+    "react": ">=17",
     "react-native": ">=0.64.0",
-    "react-native-reanimated": "~2.3.1",
+    "react-native-reanimated": "^2.9.1",
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.4",
+    "@babel/core": "^7.21.0",
     "@babel/generator": "^7.17.2",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-proposal-export-namespace-from": "^7.16.0",
     "@babel/preset-env": "^7.15.8",
     "@babel/runtime": "^7.17.2",
-    "@emotion/core": "^11.0.0",
-    "@expo/webpack-config": "^0.16.18",
+    "@emotion/core": "^10.3.1",
+    "@emotion/native": "^10.0.27",
+    "@expo/metro-config": "^0.7.1",
+    "@expo/webpack-config": "^18.0.1",
+    "@react-native-async-storage/async-storage": "1.17.11",
     "@react-native-community/cli-server-api": "^7.0.3",
+    "@react-native-community/datetimepicker": "6.7.3",
     "@react-native-community/eslint-config": "^3.0.1",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-backgrounds": "^6.4.19",
-    "@storybook/addon-controls": "^6.4.19",
-    "@storybook/addon-docs": "^6.4.19",
-    "@storybook/addon-essentials": "^6.4.19",
-    "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-links": "^6.4.19",
-    "@storybook/addon-measure": "^6.4.19",
-    "@storybook/addon-ondevice-actions": "^5.3.23",
-    "@storybook/addon-ondevice-knobs": "^5.3.25",
-    "@storybook/addon-outline": "^6.4.19",
-    "@storybook/addon-toolbars": "^6.4.19",
-    "@storybook/addon-viewport": "^6.4.19",
-    "@storybook/addons": "^6.4.19",
-    "@storybook/api": "^6.4.19",
-    "@storybook/components": "^6.4.19",
-    "@storybook/core-events": "^6.4.19",
-    "@storybook/react": "^6.4.19",
-    "@storybook/react-native": "^5.3.25",
-    "@storybook/theming": "^6.4.19",
+    "@react-native-community/slider": "^4.4.2",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-controls": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/addon-ondevice-actions": "6.5.0-rc.11",
+    "@storybook/addon-ondevice-backgrounds": "6.5.0-rc.11",
+    "@storybook/addon-ondevice-controls": "6.5.0-rc.11",
+    "@storybook/addon-ondevice-notes": "6.5.0-rc.11",
+    "@storybook/addon-react-native-web": "^0.0.19",
+    "@storybook/builder-webpack5": "^6.5.14",
+    "@storybook/docs-tools": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.14",
+    "@storybook/react": "^6.5.16",
+    "@storybook/react-native": "6.5.0-rc.11",
     "@svgr/core": "^5.5.0",
     "@svgr/plugin-jsx": "^5.5.0",
     "@svgr/plugin-svgo": "^5.5.0",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/node": "^17.0.31",
     "@types/prop-types": "^15.7.5",
-    "@types/react": "^17.0.39",
-    "@types/react-native": "^0.68.9",
+    "@types/react": "^17.0.53",
+    "@types/react-native": "0.71.5",
     "@types/styled-components": "^5.1.3",
     "@types/styled-components-react-native": "^5.1.3",
     "@typescript-eslint/eslint-plugin": "^5.22.0",
     "@typescript-eslint/parser": "^5.22.0",
+    "assert": "^2.0.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-module-resolver": "^4.1.0",
-    "babel-preset-expo": "^9.0.2",
+    "babel-plugin-react-docgen-typescript": "^1.5.1",
+    "babel-plugin-react-native-web": "^0.18.12",
+    "babel-preset-expo": "^9.3.0",
     "camelcase": "^6.2.1",
     "csstype": "^3.0.11",
     "eslint": "^8.10.0",
@@ -112,30 +115,33 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.2",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "expo": "~45.0.0",
-    "expo-asset": "^8.6.1",
-    "expo-cli": "^6",
-    "expo-constants": "^13.2.4",
-    "expo-font": "^10.2.0",
-    "expo-modules-core": "^0.6.5",
+    "expo": "~48.0.9",
+    "expo-asset": "^8.9.1",
+    "expo-constants": "^14.2.1",
+    "expo-font": "^11.1.1",
+    "expo-modules-core": "^1.2.2",
     "fs-extra": "^10.0.1",
     "glob": "^7.2.0",
-    "metro": "^0.67.0",
-    "metro-config": "^0.67.0",
-    "metro-minify-uglify": "^0.67.0",
-    "metro-react-native-babel-preset": "^0.67.0",
-    "metro-resolver": "^0.67.0",
-    "metro-runtime": "^0.67.0",
-    "metro-transform-worker": "^0.67.0",
+    "metro": "^0.76.0",
+    "metro-config": "^0.76.0",
+    "metro-core": "^0.76.0",
+    "metro-minify-uglify": "^0.76.0",
+    "metro-react-native-babel-preset": "^0.76.0",
+    "metro-react-native-babel-transformer": "^0.76.0",
+    "metro-resolver": "^0.76.0",
+    "metro-runtime": "^0.76.0",
+    "metro-source-map": "^0.76.0",
+    "metro-transform-worker": "^0.76.0",
+    "minimatch": "^5.1.0",
     "prettier": "^2.4.1",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
-    "react-native": "^0.68.5",
-    "react-native-gesture-handler": "^1.10.3",
-    "react-native-reanimated": "^2.8.0",
-    "react-native-web": "~0.17.5",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-is": "^18",
+    "react-native": "0.71.6",
+    "react-native-reanimated": "^2.15.0",
+    "react-native-safe-area-context": "^4.5.0",
+    "react-native-web": "~0.18.12",
     "regenerator-runtime": "^0.13.9",
     "rimraf": "^4.1.2",
     "styled-components": "^5.3.3",
@@ -143,16 +149,18 @@
     "stylelint-config-recommended": "^8.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
-    "typescript": "^4.8.3",
+    "typescript": "^4.9.5",
+    "util": "^0.12.5",
     "victory": "^35.5.5",
-    "webpack": "^4.46.0",
+    "webpack": "^5.76.1",
+    "webpack-dev-server": "^4.12.0",
     "metro-extra-config": "1.0.0"
   },
   "scripts": {
     "android": "expo start --android",
     "build": "tsc -p tsconfig.prod.json && node scripts/postBuild",
     "prebuild:storybook": "pnpm -F ui-shared -F icons-ui -F crypto-icons-ui build",
-    "build:storybook": "pnpm build-storybook -o web-build",
+    "build:storybook": "pnpm build-storybook -c .storybook-web -o web-build",
     "watch": "tsc -p tsconfig.prod.json --watch",
     "clean": "rimraf lib",
     "eject": "expo eject",
@@ -162,7 +170,7 @@
     "lint:css": "stylelint './src/**/*.{js,jsx,ts,tsx}'",
     "release": "yarn publish ./lib --access public",
     "expo": "expo start",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook  -c .storybook-web -p 6006",
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "test": "exit 0",
     "web": "expo start --web"