@ledgerhq/native-ui 0.7.4-monorepo.4 → 0.7.6

package/README.md

@@ -86,10 +86,10 @@ import { useFonts } from "expo-font";
 */
 function FontProvider({ children }) {
   const [fontsLoaded] = useFonts({
-    "HMAlphaMono-Medium": require("@ledgerhq/native-ui/lib/assets/fonts/alpha/HMAlphaMono-Medium.otf"),
-    "Inter-Medium": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Medium.otf"),
-    "Inter-SemiBold": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-SemiBold.otf"),
-    "Inter-Bold": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Bold.otf"),
+    "HMAlphaMono-Medium": require("@ledgerhq/native-ui/assets/fonts/alpha/HMAlphaMono-Medium.otf"),
+    "Inter-Medium": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-Medium.otf"),
+    "Inter-SemiBold": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-SemiBold.otf"),
+    "Inter-Bold": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-Bold.otf"),
   });
 
   if (!fontsLoaded) {
@@ -107,8 +107,8 @@ Add the paths in the `react-native.config.js` file:
 ```js
 module.exports = {
   assets: [
-    "node_modules/@ledgerhq/native-ui/lib/assets/fonts/alpha",
-    "node_modules/@ledgerhq/native-ui/lib/assets/fonts/inter",
+    "node_modules/@ledgerhq/native-ui/assets/fonts/alpha",
+    "node_modules/@ledgerhq/native-ui/assets/fonts/inter",
   ],
 };
 ```
@@ -138,10 +138,10 @@ function Logo() {
 
 function FontProvider({ children }) {
   const [fontsLoaded] = useFonts({
-    "HMAlphaMono-Medium": require("@ledgerhq/native-ui/lib/assets/fonts/alpha/HMAlphaMono-Medium.otf"),
-    "Inter-Medium": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Medium.otf"),
-    "Inter-SemiBold": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-SemiBold.otf"),
-    "Inter-Bold": require("@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Bold.otf"),
+    "HMAlphaMono-Medium": require("@ledgerhq/native-ui/assets/fonts/alpha/HMAlphaMono-Medium.otf"),
+    "Inter-Medium": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-Medium.otf"),
+    "Inter-SemiBold": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-SemiBold.otf"),
+    "Inter-Bold": require("@ledgerhq/native-ui/assets/fonts/inter/Inter-Bold.otf"),
   });
 
   if (!fontsLoaded) {

package/components/ChartCard/index.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+declare const ChartCard: ({ Header, Footer, range, isLoading, refreshChart, chartData, currencyColor, margin, xAxisFormatter, ranges, yAxisFormatter, valueFormatter, }: {
+    Header?: React.ReactNode;
+    Footer?: React.ReactNode;
+    range: string;
+    isLoading?: boolean | undefined;
+    refreshChart: (request: any) => void;
+    chartData: any;
+    currencyColor: string;
+    margin: number;
+    xAxisFormatter?: ((value: number) => string) | undefined;
+    ranges: {
+        label: string;
+        value: string;
+    }[];
+    yAxisFormatter: (value: number) => string;
+    valueFormatter: (value: number) => string;
+}) => JSX.Element;
+export default ChartCard;

package/components/ChartCard/index.js

@@ -0,0 +1,25 @@
+import React, { useCallback } from "react";
+import { useTheme } from "styled-components/native";
+import { Flex, GraphTabs, InfiniteLoader, Transitions } from "../index";
+import Chart from "../chart";
+const ChartCard = ({ Header, Footer, range, isLoading, refreshChart, chartData, currencyColor, margin = 0, xAxisFormatter, ranges, yAxisFormatter, valueFormatter, }) => {
+    const { colors } = useTheme();
+    const rangesLabels = ranges.map(({ label }) => label);
+    const activeRangeIndex = ranges.findIndex((r) => r.value === range);
+    const setRange = useCallback((index) => {
+        var _a;
+        if (isLoading)
+            return;
+        const newRange = (_a = ranges[index]) === null || _a === void 0 ? void 0 : _a.value;
+        if (range !== newRange)
+            refreshChart({ range: newRange });
+    }, [isLoading, range, ranges, refreshChart]);
+    return (React.createElement(Flex, { margin: margin, padding: 6, borderRadius: 2, bg: "neutral.c30" },
+        Header,
+        React.createElement(Flex, { mt: 6, height: 100, alignItems: "center", justifyContent: "center" }, chartData && chartData.length > 0 ? (React.createElement(Transitions.Fade, { status: "entering", duration: 400 },
+            React.createElement(Chart, { data: chartData, backgroundColor: colors.neutral.c30, color: currencyColor, valueKey: "value", xAxisFormatter: xAxisFormatter, yAxisFormatter: yAxisFormatter, valueFormatter: valueFormatter, disableTooltips: false }))) : (React.createElement(InfiniteLoader, { size: 32 }))),
+        React.createElement(Flex, { mt: 70 },
+            React.createElement(GraphTabs, { activeIndex: activeRangeIndex, activeBg: "neutral.c30", onChange: setRange, labels: rangesLabels })),
+        Footer));
+};
+export default ChartCard;

package/{lib/components → components}/Form/Input/BaseInput/index.d.ts

@@ -47,7 +47,7 @@ export declare type InputProps<T = string> = Omit<CommonProps, "value" | "onChan
      */
     containerStyle?: StyleProp<ViewStyle>;
 };
-export declare const InputRenderLeftContainer: 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>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Background<import("styled-system").TLengthStyledSystem>> & {
+export declare const InputRenderLeftContainer: 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;
@@ -58,8 +58,8 @@ export declare const InputRenderLeftContainer: import("styled-components").Style
     alignItems: string;
     flexDirection: string;
     pl: string;
-}, "alignItems" | "flexDirection" | "pl">;
-export declare const InputRenderRightContainer: 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>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Background<import("styled-system").TLengthStyledSystem>> & {
+}, "pl" | "alignItems" | "flexDirection">;
+export declare const InputRenderRightContainer: 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;
@@ -70,7 +70,7 @@ export declare const InputRenderRightContainer: import("styled-components").Styl
     alignItems: string;
     flexDirection: string;
     pr: string;
-}, "alignItems" | "flexDirection" | "pr">;
+}, "pr" | "alignItems" | "flexDirection">;
 declare function Input<T = string>(props: InputProps<T>, ref?: any): JSX.Element;
 declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
     /**

package/{lib/components → components}/Layout/Box/index.d.ts

@@ -1,6 +1,6 @@
 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>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Background<import("styled-system").TLengthStyledSystem>> & {
+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;

package/{lib/components → components}/Layout/Collapse/Accordion/index.js

@@ -11,7 +11,6 @@ const Accordion = ({ collapsed = false, children, title, onPress, }) => {
     };
     const style = useAnimatedStyle(() => {
         return {
-            // @ts-expect-error https://github.com/software-mansion/react-native-reanimated/issues/2971
             maxHeight: withTiming(animationHeight.value, config),
         };
     });

package/{lib/components → components}/Layout/Flex/index.d.ts

@@ -1,7 +1,7 @@
 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>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Background<import("styled-system").TLengthStyledSystem>> & {
+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;

package/{lib/components → components}/Loader/InfiniteLoader/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="styled-components-react-native" />
 import React from "react";
 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>>, CSS.Property.Height<import("styled-system").TLengthStyledSystem>>, never>;
+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>;
 export declare type Props = React.ComponentProps<typeof Loader> & {
     color?: string;
 };

package/{lib/components → components}/Navigation/SlideIndicator/index.js

@@ -37,7 +37,6 @@ function SlideIndicator({ slidesLength, activeIndex = 0, onChange }) {
         return size;
     }, [activeIndex, slidesLength]);
     const animatedStyles = useAnimatedStyle(() => ({
-        // @ts-expect-error https://github.com/software-mansion/react-native-reanimated/issues/2971
         width: withTiming(activeSize.value, config),
     }));
     return (React.createElement(Container, null,

package/{lib/components → components}/Tabs/TemplateTabs/index.d.ts

@@ -22,7 +22,7 @@ export declare type TabsProps = BaseTabsProps & {
     activeColor?: string;
     activeBg?: string;
 };
-export declare const TabsContainer: 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>>, CSS.Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, CSS.Property.Background<import("styled-system").TLengthStyledSystem>> & {
+export declare const TabsContainer: 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;

package/components/chart/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { Item } from "./types";
+export declare type ChartProps = {
+    data: Array<Item>;
+    backgroundColor: string;
+    color: string;
+    valueKey?: string;
+    height?: number;
+    xAxisFormatter?: (timestamp: number) => string;
+    yAxisFormatter: (n: number) => string;
+    valueFormatter: (n: number) => string;
+    disableTooltips: boolean;
+};
+declare const Chart: ({ data, backgroundColor, color, yAxisFormatter, valueFormatter, valueKey, height, xAxisFormatter, disableTooltips, }: ChartProps) => JSX.Element;
+export default Chart;

package/components/chart/index.js

@@ -0,0 +1,68 @@
+import React, { useMemo, useCallback } from "react";
+import { useTheme } from "styled-components/native";
+import { Defs, LinearGradient, Stop } from "react-native-svg";
+import { VictoryLine, VictoryChart, VictoryAxis, VictoryArea, VictoryTooltip, VictoryVoronoiContainer, } from "victory-native";
+import { Flex } from "../index";
+import { hex } from "../../styles/helpers";
+const sortByDate = (a, b) => {
+    if (a.date.getTime() < b.date.getTime())
+        return -1;
+    if (a.date.getTime() > b.date.getTime())
+        return 1;
+    return 0;
+};
+const Chart = ({ data, backgroundColor, color, yAxisFormatter, valueFormatter, valueKey = "value", height = 200, xAxisFormatter = (timestamp) => `${new Date(timestamp).toLocaleDateString()}`, disableTooltips = false, }) => {
+    const theme = useTheme();
+    const sortData = useMemo(() => data.sort(sortByDate), [data]);
+    const labelFormatted = useCallback(({ datum }) => {
+        const valueFormatted = valueFormatter(datum[valueKey]);
+        return valueFormatted === "-" ? "0" : valueFormatted;
+    }, [valueKey, valueFormatter]);
+    const domainValues = useMemo(() => {
+        const counterValues = data.map((d) => d[valueKey]);
+        return {
+            min: Math.min(...counterValues) * 0.8,
+            max: Math.max(...counterValues) * 1.2, // 1.2 So the maximum value of the yAxis is a bit bigger than the max value displayed
+        };
+    }, [data, valueKey]);
+    const yAxisStyle = useMemo(() => ({
+        grid: {
+            stroke: theme.colors.neutral.c40,
+            strokeDasharray: "4 4",
+        },
+        axisLabel: { display: "none" },
+        axis: { display: "none" },
+        ticks: { display: "none" },
+        tickLabels: {
+            fill: theme.colors.neutral.c80,
+            fontSize: 12,
+        },
+    }), [theme]);
+    const xAxisStyle = useMemo(() => ({
+        axis: {
+            stroke: theme.colors.neutral.c40,
+            strokeDasharray: "4 4",
+        },
+        tickLabels: {
+            fill: theme.colors.neutral.c80,
+            fontSize: 12,
+        },
+        grid: { display: "none" },
+    }), [theme]);
+    return (React.createElement(Flex, { justifyContent: "center", alignItems: "center" },
+        React.createElement(VictoryChart, { scale: { x: "time" }, height: height, domainPadding: { y: 5 }, padding: { top: 30, left: 60, right: 35, bottom: 35 }, maxDomain: { y: domainValues.max }, minDomain: { y: domainValues.min }, containerComponent: React.createElement(VictoryVoronoiContainer, { disable: disableTooltips, voronoiBlacklist: ["victory-area"], labels: labelFormatted, labelComponent: React.createElement(VictoryTooltip, { centerOffset: { y: -10 }, renderInPortal: false, constrainToVisibleArea: true, style: {
+                        fill: color,
+                    }, flyoutPadding: 7, flyoutStyle: {
+                        fill: backgroundColor,
+                        stroke: color,
+                    } }) }) },
+            React.createElement(VictoryAxis, { dependentAxis: true, crossAxis: true, tickFormat: yAxisFormatter, style: yAxisStyle }),
+            React.createElement(VictoryAxis, { crossAxis: false, tickFormat: xAxisFormatter, style: xAxisStyle }),
+            React.createElement(Defs, null,
+                React.createElement(LinearGradient, { id: "chartGradient", x1: "0.5", x2: "0.5", y1: "0", y2: "1" },
+                    React.createElement(Stop, { stopColor: hex(color), stopOpacity: "0.15" }),
+                    React.createElement(Stop, { offset: "1", stopColor: hex(theme.colors.neutral.c00), stopOpacity: "0" }))),
+            React.createElement(VictoryArea, { name: "victory-area", data: sortData, interpolation: "monotoneX", sortKey: "date", x: "date", y: valueKey, style: { data: { fill: `url(#chartGradient)` } }, standalone: false }),
+            React.createElement(VictoryLine, { data: sortData, interpolation: "monotoneX", x: "date", y: valueKey, style: { data: { stroke: color } } }))));
+};
+export default Chart;