@swan-io/lake 1.0.0

package/src/components/ChoicePicker.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { breakpoints, negativeSpacings, spacings } from "../constants/design";
+import { useResponsive } from "../hooks/useResponsive";
+import { LakeButton } from "./LakeButton";
+import { LakeRadio } from "./LakeRadio";
+import { Pressable } from "./Pressable";
+import { Space } from "./Space";
+import { Tile } from "./Tile";
+const styles = StyleSheet.create({
+    root: {
+        alignSelf: "stretch",
+        alignItems: "stretch",
+        flexGrow: 1,
+        overflow: "hidden",
+        marginHorizontal: negativeSpacings[12],
+    },
+    container: {
+        alignSelf: "stretch",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        alignItems: "stretch",
+        justifyContent: "center",
+    },
+    mobileContainer: {
+        flexWrap: "nowrap",
+        justifyContent: "flex-start",
+        transitionProperty: "transform",
+        transitionDuration: "300ms",
+        transitionTimingFunction: "ease-in-out",
+    },
+    item: {
+        flexGrow: 0,
+        flexBasis: "33.333%",
+        maxWidth: 300,
+        padding: spacings[12],
+        transform: [{ translateZ: 0 }],
+        animationKeyframes: {
+            from: {
+                opacity: 0,
+                transform: [{ translateZ: 0 }, { translateX: 50 }],
+            },
+            to: {
+                opacity: 1,
+                transform: [{ translateZ: 0 }, { translateX: 0 }],
+            },
+        },
+        animationDuration: "200ms",
+        animationFillMode: "backwards",
+        animationTimingFunction: "ease-in-out",
+    },
+    itemLarge: {
+        flexBasis: "50%",
+        maxWidth: "none",
+    },
+    itemSmallViewport: {
+        width: "100%",
+        flexBasis: "auto",
+        maxWidth: "none",
+    },
+    tileContents: {
+        alignItems: "center",
+        alignSelf: "stretch",
+        flexGrow: 1,
+    },
+    tileRenderedContents: {
+        alignItems: "center",
+        alignSelf: "stretch",
+        flexGrow: 1,
+    },
+    leftButton: {
+        position: "absolute",
+        top: "50%",
+        left: negativeSpacings[24],
+        transform: [{ translateY: "-50%" }],
+    },
+    rightButton: {
+        position: "absolute",
+        top: "50%",
+        right: negativeSpacings[24],
+        transform: [{ translateY: "-50%" }],
+    },
+});
+const identity = (x) => x;
+export const ChoicePicker = ({ items, getId = identity, large = false, renderItem, value, onChange, }) => {
+    const { desktop } = useResponsive(breakpoints.medium);
+    const [index, setIndex] = useState(0);
+    return (_jsxs(View, { children: [_jsx(View, { style: styles.root, children: _jsx(View, { style: [
+                        styles.container,
+                        !desktop && styles.mobileContainer,
+                        !desktop && { transform: [{ translateX: `-${100 * index}%` }] },
+                    ], children: items.map((item, index) => (_jsx(Pressable, { style: [
+                            styles.item,
+                            large && styles.itemLarge,
+                            !desktop && styles.itemSmallViewport,
+                            { animationDelay: `${200 + 100 * index}ms` },
+                        ], onPress: () => onChange(item), children: ({ hovered }) => (_jsx(Tile, { hovered: hovered, selected: value != null && getId(item) === getId(value), flexGrow: 1, children: _jsxs(View, { style: styles.tileContents, children: [_jsx(View, { style: styles.tileRenderedContents, children: renderItem(item) }), _jsx(Space, { height: 24 }), _jsx(LakeRadio, { value: value != null && getId(item) === getId(value) })] }) })) }, String(index)))) }) }), !desktop && (_jsx(View, { style: styles.leftButton, children: _jsx(LakeButton, { icon: "chevron-left-filled", mode: "secondary", forceBackground: true, onPress: () => setIndex(Math.max(0, index - 1)), disabled: index === 0 }) })), !desktop && (_jsx(View, { style: styles.rightButton, children: _jsx(LakeButton, { icon: "chevron-right-filled", mode: "secondary", forceBackground: true, onPress: () => setIndex(Math.min(items.length - 1, index + 1)), disabled: index === items.length - 1 }) }))] }));
+};

package/src/components/Combobox.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { IconName } from "./Icon";
+type Props<I extends {
+    value: string;
+    disabled?: boolean;
+}> = {
+    value: string;
+    items: I[];
+    ListFooterComponent?: ReactNode;
+    onValueChange: (value: string) => void;
+    onSelectItem: (value: I) => void;
+    renderItem: (item: I) => ReactNode | null;
+    size?: "large" | "small";
+    icon?: IconName;
+    label?: string;
+    placeholder?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    error?: string;
+    style?: StyleProp<ViewStyle>;
+};
+export declare const Combobox: (<I extends {
+    value: string;
+    disabled?: boolean | undefined;
+}>(props: Props<I>) => JSX.Element | null) & {
+    displayName?: string | undefined;
+};
+export {};

package/src/components/Combobox.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo as reactMemo, useCallback, useEffect, useId, useRef, useState, } from "react";
+import isEqual from "react-fast-compare";
+import { ActivityIndicator, FlatList, Pressable, StyleSheet, Text, View, } from "react-native";
+import { match } from "ts-pattern";
+import { colors } from "../constants/colors";
+import { spacings } from "../constants/design";
+import { typography } from "../constants/typography";
+import { useDisclosure } from "../hooks/useDisclosure";
+import { useResponsive } from "../hooks/useResponsive";
+import { isNotNullish, isNullish } from "../utils/nullish";
+import { Icon } from "./Icon";
+import { Input } from "./Input";
+import { LakeTextInput } from "./LakeTextInput";
+import { Popover, VIEWPORT_WIDTH_THRESHOLD } from "./Popover";
+const ELEMENT_HEIGHT = 72;
+const NB_SUGGESTION_DISPLAYED = 3.5;
+const styles = StyleSheet.create({
+    inputWithLeftIcon: {
+        paddingLeft: 48,
+    },
+    icon: {
+        position: "absolute",
+        left: 16,
+        top: 14,
+    },
+    iconWithLabel: {
+        top: 42,
+    },
+    list: {
+        maxHeight: ELEMENT_HEIGHT * NB_SUGGESTION_DISPLAYED,
+    },
+    loading: {
+        height: ELEMENT_HEIGHT * NB_SUGGESTION_DISPLAYED,
+        left: 16,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    item: {
+        flexShrink: 1,
+        flexGrow: 1,
+        height: ELEMENT_HEIGHT,
+        justifyContent: "center",
+        paddingHorizontal: 16,
+        paddingVertical: 0,
+        transitionProperty: "background-color",
+        transitionDuration: "200ms",
+    },
+    hoveredItem: {
+        backgroundColor: colors.gray[3],
+    },
+    pressedItem: {
+        backgroundColor: colors.gray[10],
+    },
+    itemText: {
+        ...typography.bodyLarge,
+    },
+    mobileInput: {
+        padding: spacings[16],
+    },
+});
+const isReactText = (node) => ["string", "number"].includes(typeof node);
+const getItemLayout = (_data, index) => ({
+    length: ELEMENT_HEIGHT,
+    offset: ELEMENT_HEIGHT * index,
+    index,
+});
+const memo = reactMemo;
+export const Combobox = memo(({ value, items, ListFooterComponent, onValueChange, onSelectItem, renderItem, size, icon, label, placeholder, loading = false, disabled = false, error, style, }) => {
+    const isFirstRender = useRef(true);
+    const ref = useRef(null);
+    const mobileInputRef = useRef(null);
+    const listRef = useRef(null);
+    const [visible, { open, close }] = useDisclosure(false);
+    const [focusedIndex, setFocusedIndex] = useState();
+    const { desktop } = useResponsive(VIEWPORT_WIDTH_THRESHOLD);
+    const suggestionsId = useId();
+    const handleFocus = useCallback((event) => {
+        if (!desktop) {
+            event.preventDefault();
+            open();
+        }
+        else {
+            if (items.length > 0) {
+                open();
+            }
+        }
+    }, [items, open, desktop]);
+    const handleKeyPress = useCallback((event) => {
+        match(event.nativeEvent.key)
+            .with("ArrowDown", () => {
+            event.preventDefault();
+            setFocusedIndex(prevIndex => {
+                const nextIndex = isNotNullish(prevIndex) ? prevIndex + 1 : 0;
+                const maxIndex = items.length - 1;
+                return Math.min(nextIndex, maxIndex);
+            });
+        })
+            .with("ArrowUp", () => {
+            event.preventDefault();
+            setFocusedIndex(prevIndex => {
+                const maxIndex = items.length - 1;
+                const previousIndex = isNotNullish(prevIndex) ? prevIndex - 1 : maxIndex;
+                return Math.max(previousIndex, 0);
+            });
+        })
+            .with("Escape", () => {
+            event.preventDefault();
+            close();
+        })
+            .with("Enter", () => {
+            event.preventDefault();
+            if (isNullish(focusedIndex)) {
+                return;
+            }
+            const item = items[focusedIndex];
+            if (item) {
+                onSelectItem(item);
+                close();
+            }
+        })
+            .otherwise(() => { });
+    }, [items, focusedIndex, onSelectItem, close]);
+    useEffect(() => {
+        isFirstRender.current = false;
+        return () => {
+            isFirstRender.current = true;
+        };
+    }, []);
+    // Auto open/close popover depending on value on items
+    useEffect(() => {
+        // avoid to open popover on first render
+        if (isFirstRender.current) {
+            return;
+        }
+        if (value.length > 0 && items.length > 0) {
+            open();
+        }
+        // we want to run this effect only when items or value changed
+    }, [items.length, value.length]); // eslint-disable-line react-hooks/exhaustive-deps
+    // reset focused suggestion when the number of suggestions change
+    useEffect(() => {
+        setFocusedIndex(prevFocusedIndex => {
+            const maxIndex = items.length - 1;
+            if (isNotNullish(prevFocusedIndex) && prevFocusedIndex > maxIndex) {
+                return maxIndex;
+            }
+            if (items.length === 0) {
+                return undefined;
+            }
+            return prevFocusedIndex;
+        });
+    }, [items.length]);
+    // scroll automatically in suggestion list if user use keyboard navigation
+    useEffect(() => {
+        if (isNotNullish(focusedIndex)) {
+            const position = focusedIndex + 1 - NB_SUGGESTION_DISPLAYED;
+            // avoid negative value for first indexes
+            const index = Math.max(0, position);
+            listRef.current?.scrollToIndex({
+                animated: true,
+                index,
+            });
+        }
+    }, [focusedIndex]);
+    useEffect(() => {
+        if (visible) {
+            mobileInputRef.current?.focus();
+        }
+    }, [visible]);
+    return (_jsxs(View, { style: style, children: [_jsx(Input, { ref: ref, accessibilityControls: visible ? suggestionsId : "", accessibilityExpanded: visible, inputStyle: icon || loading ? styles.inputWithLeftIcon : undefined, returnKeyType: "search", role: "combobox", label: label, placeholder: placeholder, value: value, size: size, disabled: disabled, error: error, onValueChange: onValueChange, onFocus: handleFocus, onKeyPress: handleKeyPress }), icon ? (_jsx(Icon, { name: icon, color: colors.gray[50], size: 20, style: [styles.icon, isNotNullish(label) && styles.iconWithLabel] })) : null, _jsxs(Popover, { id: suggestionsId, role: "listbox", matchReferenceWidth: true, onDismiss: close, referenceRef: ref, autoFocus: false, returnFocus: false, visible: visible && (!desktop || loading || items.length > 0), underlay: false, children: [!desktop && (_jsx(View, { style: styles.mobileInput, children: _jsx(LakeTextInput, { ref: mobileInputRef, accessibilityControls: visible ? suggestionsId : "", accessibilityExpanded: visible, returnKeyType: "search", placeholder: placeholder, value: value, disabled: disabled, error: error, onChangeText: onValueChange, onKeyPress: handleKeyPress }) })), _jsxs(View, { style: styles.list, children: [loading ? (_jsx(View, { style: styles.loading, children: _jsx(ActivityIndicator, { color: colors.gray[70], size: 20 }) })) : (_jsx(FlatList, { ref: listRef, keyExtractor: item => item.value, getItemLayout: getItemLayout, accessibilityRole: "list", data: items, extraData: focusedIndex, renderItem: ({ item, index }) => {
+                                    const rendered = renderItem(item);
+                                    return (_jsx(Pressable, { accessibilityRole: "listitem", disabled: item.disabled, style: ({ hovered, pressed, focused }) => [
+                                            styles.item,
+                                            (hovered || focused || index === focusedIndex) && styles.hoveredItem,
+                                            pressed && styles.pressedItem,
+                                        ], onPress: () => {
+                                            onSelectItem(item);
+                                            close();
+                                        }, children: isReactText(rendered) ? (_jsx(Text, { numberOfLines: 1, selectable: false, style: styles.itemText, children: rendered })) : (rendered) }));
+                                } })), ListFooterComponent] })] })] }));
+}, isEqual);

package/src/components/FailureIcon.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { StyleProp, ViewStyle } from "react-native";
+type Props = {
+    size: number;
+    style?: StyleProp<ViewStyle>;
+};
+export declare const FailureIcon: ({ size, style }: Props) => JSX.Element;
+export {};

package/src/components/FailureIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { colors } from "../constants/colors";
+import { Path, Svg } from "./Svg";
+export const FailureIcon = ({ size, style }) => (_jsx(Svg, { viewBox: "0 0 24 24", style: [{ height: size, width: size }, style], children: _jsx(Path, { d: "M12 0a12 12 0 110 24 12 12 0 010-24zM8.9 7.57A.95.95 0 007.58 8.9l3.08 3.1-3.1 3.1a.95.95 0 101.35 1.33L12 13.34l3.1 3.1a.95.95 0 101.33-1.35L13.34 12l3.1-3.1a.95.95 0 10-1.35-1.33L12 10.66z", fill: colors.red[100] }) }));

package/src/components/FileTile.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+type Props = {
+    variant?: "none" | "pending" | "verified" | "refused";
+    name: string;
+    url?: string;
+    onRemove?: () => void;
+    title?: string;
+    description?: string;
+};
+export declare const FileTile: ({ variant, name, url, onRemove, title, description }: Props) => JSX.Element;
+export {};

package/src/components/FileTile.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet } from "react-native";
+import { match } from "ts-pattern";
+import { commonStyles } from "../constants/commonStyles";
+import { backgroundColor, colors, shadows, spacings } from "../constants/design";
+import { getIconNameFromFilename } from "../utils/file";
+import { isNotNullish, isNotNullishOrEmpty } from "../utils/nullish";
+import { Box } from "./Box";
+import { LakeAlert } from "./LakeAlert";
+import { LakeButton } from "./LakeButton";
+import { LakeText } from "./LakeText";
+import { Space } from "./Space";
+import { Tag } from "./Tag";
+const styles = StyleSheet.create({
+    base: {
+        backgroundColor: backgroundColor.accented,
+        borderRadius: 8,
+        boxShadow: shadows.tile,
+        overflow: "hidden",
+    },
+    content: {
+        height: 56,
+        paddingLeft: spacings[20],
+        paddingRight: spacings[8],
+    },
+});
+export const FileTile = ({ variant = "none", name, url, onRemove, title, description }) => (_jsxs(Box, { style: styles.base, children: [_jsxs(Box, { alignItems: "center", direction: "row", style: styles.content, children: [_jsx(Tag, { icon: getIconNameFromFilename(name), iconSize: 20, color: match(variant)
+                        .with("none", "pending", () => "shakespear")
+                        .with("verified", () => "positive")
+                        .with("refused", () => "negative")
+                        .exhaustive() }), _jsx(Space, { width: 16 }), _jsx(LakeText, { numberOfLines: 1, color: colors.gray[700], style: commonStyles.fill, children: name }), _jsx(Space, { width: 12 }), isNotNullishOrEmpty(url) && (_jsx(LakeButton, { mode: "tertiary", size: "small", icon: "open-filled", onPress: () => {
+                        window.open(url, "_blank");
+                    } })), isNotNullish(onRemove) && (_jsx(LakeButton, { mode: "tertiary", size: "small", icon: "delete-regular", color: "negative", onPress: onRemove }))] }), variant !== "none" && (_jsx(LakeAlert, { anchored: true, title: title, variant: match(variant)
+                .with("pending", () => "info")
+                .with("verified", () => "success")
+                .with("refused", () => "error")
+                .exhaustive(), children: description }))] }));

package/src/components/Fill.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { SpacingValue } from "./Space";
+type Props = {
+    minHeight?: SpacingValue;
+    minWidth?: SpacingValue;
+};
+export declare const Fill: ({ minHeight, minWidth }: Props) => JSX.Element;
+export {};

package/src/components/Fill.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet, View } from "react-native";
+import { isNotNullish } from "../utils/nullish";
+import { spacingValues } from "./Space";
+const baseStyle = {
+    flexGrow: 1,
+    flexShrink: 1,
+};
+const rawHeightStyles = {};
+const rawWidthStyles = {};
+spacingValues.forEach(value => {
+    rawHeightStyles[value] = { ...baseStyle, minHeight: value };
+    rawWidthStyles[value] = { ...baseStyle, minWidth: value };
+});
+const styles = StyleSheet.create({
+    base: baseStyle,
+});
+const heightStyles = StyleSheet.create(rawHeightStyles);
+const widthStyles = StyleSheet.create(rawWidthStyles);
+export const Fill = ({ minHeight, minWidth }) => (_jsx(View, { focusable: false, pointerEvents: "none", style: [
+        styles.base,
+        isNotNullish(minHeight) && heightStyles[minHeight],
+        isNotNullish(minWidth) && widthStyles[minWidth],
+    ] }));

package/src/components/FilterChooser.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare function FilterChooser<FilterName extends string>({ filters, openFilters, label, title, availableFilters, large, onAddFilter, }: {
+    filters: Partial<{
+        [K in FilterName]: string | string[] | undefined;
+    }>;
+    openFilters: FilterName[];
+    label: string;
+    title: string;
+    availableFilters: {
+        label: string;
+        name: FilterName;
+    }[];
+    large?: boolean;
+    onAddFilter: (filterName: FilterName) => void;
+}): JSX.Element;

package/src/components/FilterChooser.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef } from "react";
+import { FlatList, Pressable, StyleSheet, Text, View } from "react-native";
+import { colors } from "../constants/design";
+import { typography } from "../constants/typography";
+import { useDisclosure } from "../hooks/useDisclosure";
+import { Box } from "./Box";
+import { Icon } from "./Icon";
+import { LakeButton } from "./LakeButton";
+import { Popover } from "./Popover";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    selected: {
+        color: colors.gray[500],
+    },
+    list: {
+        paddingVertical: 20,
+        marginVertical: 4,
+        width: 250,
+        overflow: "hidden",
+    },
+    item: {
+        display: "flex",
+        paddingHorizontal: 24,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingVertical: 8,
+    },
+    itemHovered: {
+        backgroundColor: colors.gray[50],
+    },
+    availableFiltersTitle: {
+        ...typography.bodyLarge,
+        color: colors.current.primary,
+        paddingHorizontal: 24,
+    },
+    filterName: {
+        ...typography.bodySmall,
+    },
+});
+export function FilterChooser({ filters, openFilters, label, title, availableFilters, large = true, onAddFilter, }) {
+    const inputRef = useRef(null);
+    const [visible, { close, toggle }] = useDisclosure(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { direction: "row", justifyContent: "start", alignItems: "center", children: _jsx(LakeButton, { size: "small", mode: "secondary", color: "gray", onPress: toggle, ref: inputRef, icon: large ? "chevron-down-filled" : "filter-filled", iconPosition: "end", accessibilityLabel: label, children: large ? label : null }) }), _jsx(Popover, { role: "listbox", matchReferenceMinWidth: true, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsxs(View, { style: styles.list, children: [_jsx(Text, { style: styles.availableFiltersTitle, children: title }), _jsx(Space, { height: 8 }), _jsx(FlatList, { accessibilityRole: "list", data: availableFilters, keyExtractor: (_, index) => `filter-item-${index}`, renderItem: ({ item }) => {
+                                const isSet = Boolean(filters[item.name]) || openFilters.includes(item.name);
+                                return (_jsxs(Pressable, { style: ({ hovered }) => [styles.item, hovered && styles.itemHovered], accessibilityRole: "button", disabled: isSet, onPress: () => {
+                                        onAddFilter(item.name);
+                                        close();
+                                    }, children: [_jsx(Text, { style: [styles.filterName, isSet && styles.selected], children: item.label }), isSet && _jsx(Icon, { color: colors.positive[500], name: "checkmark-filled", size: 14 })] }));
+                            } })] }) })] }));
+}

package/src/components/Filters.d.ts

@@ -0,0 +1,57 @@
+import { ComponentProps } from "react";
+import { ValidatorResult } from "react-ux-form";
+import { Rifm } from "rifm";
+import { Simplify } from "type-fest";
+type Item<T> = {
+    label: string;
+    value: T;
+};
+type RifmProps = Required<Pick<ComponentProps<typeof Rifm>, "accept" | "append" | "format" | "mask">>;
+export type FilterCheckboxDef<T> = {
+    type: "checkbox";
+    label: string;
+    items: Item<T>[];
+    submitText: string;
+    checkAllLabel?: string;
+};
+export type FilterRadioDef<T> = {
+    type: "radio";
+    label: string;
+    items: Item<T>[];
+};
+export type FilterDateDef = {
+    type: "date";
+    label: string;
+    submitText: string;
+    noValueText: string;
+    dateFormat: string;
+    rifmProps: RifmProps;
+    validate?: (value: string) => ValidatorResult;
+};
+export type FilterInputDef = {
+    type: "input";
+    label: string;
+    submitText: string;
+    noValueText: string;
+    placeholder?: string;
+    validate?: (value: string) => ValidatorResult;
+};
+type Filter<T> = FilterCheckboxDef<T> | FilterRadioDef<T> | FilterDateDef | FilterInputDef;
+type ExtractFilterValue<T extends Filter<unknown>> = T extends {
+    type: "checkbox";
+} ? T["items"][number]["value"][] | undefined : T extends {
+    type: "radio";
+} ? T["items"][number]["value"] | undefined : string | undefined;
+type FiltersDefinition = Record<string, Filter<unknown>>;
+export type FiltersState<T extends FiltersDefinition> = Simplify<{
+    [K in keyof T]: Simplify<ExtractFilterValue<T[K]>>;
+}>;
+type FiltersStackProps<Definition extends FiltersDefinition, State extends FiltersState<Definition> = FiltersState<Definition>> = {
+    definition: Definition;
+    filters: State;
+    openedFilters: (keyof Definition)[];
+    onChangeOpened: (value: (keyof Definition)[]) => void;
+    onChangeFilters: (value: State) => void;
+};
+export declare const FiltersStack: <T extends FiltersDefinition>({ filters, openedFilters, definition, onChangeOpened, onChangeFilters, }: FiltersStackProps<T, { [K in keyof T]: ExtractFilterValue<T[K]> extends infer T_2 ? { [KeyType_2 in keyof T_2]: ExtractFilterValue<T[K]>[KeyType_2]; } : never; } extends infer T_1 ? { [KeyType_1 in keyof T_1]: { [K in keyof T]: ExtractFilterValue<T[K]> extends infer T_2 ? { [KeyType_2 in keyof T_2]: ExtractFilterValue<T[K]>[KeyType_2]; } : never; }[KeyType_1]; } : never>) => JSX.Element | null;
+export {};