@utilitywarehouse/hearth-react-native 0.22.0 → 0.23.0-test-list

package/build/components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { View } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+import { useStyleProps } from '../../hooks';
+import { SegmentedControlContext } from './SegmentedControl.context';
+const Indicator = Animated.createAnimatedComponent(View);
+const GROUP_BORDER_WIDTH = 1;
+const SegmentedControl = ({ value: controlledValue, defaultValue, onValueChange, size = 'sm', disabled = false, children, style, ...props }) => {
+    const { computedStyles, remainingProps } = useStyleProps(props);
+    const isReducedMotion = useReducedMotion();
+    const indicatorPositionOffset = GROUP_BORDER_WIDTH;
+    const optionValues = useMemo(() => {
+        const values = [];
+        const walk = (node) => {
+            Children.forEach(node, child => {
+                if (!isValidElement(child))
+                    return;
+                const childType = child.type;
+                const childProps = child.props;
+                if (childType?.displayName === 'SegmentedControlOption' &&
+                    typeof childProps?.value === 'string') {
+                    values.push(childProps.value);
+                }
+                if (childProps?.children) {
+                    walk(childProps.children);
+                }
+            });
+        };
+        walk(children);
+        return values;
+    }, [children]);
+    const optionValuesKey = useMemo(() => optionValues.join('|'), [optionValues]);
+    const optionValuesRef = useRef(optionValues);
+    useEffect(() => {
+        optionValuesRef.current = optionValues;
+    }, [optionValues]);
+    const getInitialValue = () => {
+        if (controlledValue !== undefined)
+            return controlledValue;
+        if (defaultValue !== undefined)
+            return defaultValue;
+        return optionValues[0];
+    };
+    const [uncontrolledValue, setUncontrolledValue] = useState(getInitialValue);
+    useEffect(() => {
+        if (controlledValue !== undefined) {
+            setUncontrolledValue(controlledValue);
+        }
+    }, [controlledValue]);
+    useEffect(() => {
+        const currentOptionValues = optionValuesRef.current;
+        setUncontrolledValue(prev => {
+            if (!prev)
+                return currentOptionValues[0];
+            if (!currentOptionValues.includes(prev))
+                return currentOptionValues[0];
+            return prev;
+        });
+    }, [optionValuesKey]);
+    const currentValue = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+    const indicatorX = useSharedValue(0);
+    const indicatorWidth = useSharedValue(0);
+    const indicatorY = useSharedValue(0);
+    const indicatorHeight = useSharedValue(0);
+    const [hasIndicator, setHasIndicator] = useState(false);
+    const layoutsRef = useRef(new Map());
+    const prevValueRef = useRef(undefined);
+    const initialisedRef = useRef(false);
+    const select = useCallback((nextValue) => {
+        if (disabled)
+            return;
+        if (controlledValue === undefined) {
+            setUncontrolledValue(nextValue);
+        }
+        onValueChange?.(nextValue);
+    }, [controlledValue, disabled, onValueChange]);
+    const registerOptionLayout = useCallback((value, layout) => {
+        layoutsRef.current.set(value, layout);
+        const activeValue = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+        if (!activeValue || activeValue !== value)
+            return;
+        if (!initialisedRef.current) {
+            indicatorX.value = Math.max(0, layout.x - indicatorPositionOffset);
+            indicatorWidth.value = layout.width;
+            indicatorY.value = Math.max(0, layout.y - indicatorPositionOffset);
+            indicatorHeight.value = layout.height;
+            prevValueRef.current = activeValue;
+            initialisedRef.current = true;
+            setHasIndicator(true);
+            return;
+        }
+        if (prevValueRef.current === activeValue)
+            return;
+        const config = {
+            delay: 200,
+            duration: isReducedMotion ? 0 : 220,
+            easing: Easing.out(Easing.cubic),
+        };
+        indicatorX.value = withTiming(Math.max(0, layout.x - indicatorPositionOffset), config);
+        indicatorWidth.value = withTiming(layout.width, config);
+        indicatorY.value = withTiming(Math.max(0, layout.y - indicatorPositionOffset), config);
+        indicatorHeight.value = withTiming(layout.height, config);
+        prevValueRef.current = activeValue;
+    }, [
+        controlledValue,
+        indicatorHeight,
+        indicatorWidth,
+        indicatorX,
+        indicatorY,
+        indicatorPositionOffset,
+        isReducedMotion,
+        uncontrolledValue,
+    ]);
+    useEffect(() => {
+        if (!currentValue || !initialisedRef.current)
+            return;
+        if (prevValueRef.current === undefined || prevValueRef.current === currentValue)
+            return;
+        const layout = layoutsRef.current.get(currentValue);
+        if (!layout)
+            return;
+        const config = {
+            duration: isReducedMotion ? 0 : 220,
+            easing: Easing.out(Easing.cubic),
+        };
+        indicatorX.value = withTiming(Math.max(0, layout.x - indicatorPositionOffset), config);
+        indicatorWidth.value = withTiming(layout.width, config);
+        indicatorY.value = withTiming(Math.max(0, layout.y - indicatorPositionOffset), config);
+        indicatorHeight.value = withTiming(layout.height, config);
+        prevValueRef.current = currentValue;
+    }, [
+        currentValue,
+        indicatorHeight,
+        indicatorWidth,
+        indicatorX,
+        indicatorY,
+        indicatorPositionOffset,
+        isReducedMotion,
+        optionValuesKey,
+    ]);
+    const indicatorStyle = useAnimatedStyle(() => ({
+        transform: [{ translateX: indicatorX.value }, { translateY: indicatorY.value }],
+        width: indicatorWidth.value,
+        height: indicatorHeight.value,
+    }));
+    styles.useVariants({ disabled, size });
+    const contextValue = useMemo(() => ({
+        value: currentValue,
+        select,
+        disabled,
+        size,
+        registerOptionLayout,
+    }), [currentValue, select, disabled, size, registerOptionLayout]);
+    return (_jsx(SegmentedControlContext.Provider, { value: contextValue, children: _jsxs(View, { accessibilityRole: "radiogroup", accessibilityState: { disabled }, style: [styles.container, computedStyles, style], ...remainingProps, children: [hasIndicator ? (_jsx(Indicator, { style: [styles.indicator, styles.pointerEventsNone, indicatorStyle] })) : null, children] }) }));
+};
+SegmentedControl.displayName = 'SegmentedControl';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'flex-start',
+        gap: theme.components.segmentedControl.group.gap,
+        height: theme.components.segmentedControl.group.height,
+        borderRadius: theme.components.segmentedControl.group.borderRadius,
+        borderWidth: theme.components.segmentedControl.group.borderWidth,
+        backgroundColor: theme.color.surface.neutral.subtle,
+        borderColor: theme.color.border.strong,
+        variants: {
+            size: {
+                sm: {
+                    height: 32,
+                    padding: 2,
+                },
+                md: {
+                    height: theme.components.segmentedControl.group.height,
+                    padding: 2,
+                },
+            },
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+        },
+    },
+    indicator: {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        borderRadius: theme.components.segmentedControl.borderRadius,
+        backgroundColor: theme.color.interactive.brand.surface.strong.default,
+    },
+    pointerEventsNone: {
+        pointerEvents: 'none',
+    },
+}));
+export default SegmentedControl;

package/build/components/SegmentedControl/SegmentedControl.props.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+import type { FlexLayoutProps } from '../../types';
+export interface SegmentedControlProps extends ViewProps, FlexLayoutProps {
+    /** Controlled selected option value. */
+    value?: string;
+    /** Initial selected option value for uncontrolled mode. */
+    defaultValue?: string;
+    /** Called when selected option changes. */
+    onValueChange?: (value: string) => void;
+    /** Size variant. */
+    size?: 'sm' | 'md';
+    /** Disables all options in the control. */
+    disabled?: boolean;
+    /** SegmentedControlOption children. */
+    children: ReactNode;
+}
+export default SegmentedControlProps;

package/build/components/SegmentedControl/SegmentedControl.props.js

@@ -0,0 +1 @@
+export {};

package/build/components/SegmentedControl/SegmentedControlOption.d.ts

@@ -0,0 +1,18 @@
+import type SegmentedControlOptionProps from './SegmentedControlOption.props';
+declare const SegmentedControlOption: import("react").ForwardRefExoticComponent<SegmentedControlOptionProps & {
+    states?: {
+        active?: boolean;
+        disabled?: boolean;
+    };
+} & Omit<import("react-native").PressableProps, "children"> & {
+    tabIndex?: 0 | -1 | undefined;
+} & {
+    children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {
+        hovered?: boolean | undefined;
+        pressed?: boolean | undefined;
+        focused?: boolean | undefined;
+        focusVisible?: boolean | undefined;
+        disabled?: boolean | undefined;
+    }) => import("react").ReactNode);
+} & import("react").RefAttributes<unknown>>;
+export default SegmentedControlOption;

package/build/components/SegmentedControl/SegmentedControlOption.js

@@ -0,0 +1,144 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPressable } from '@gluestack-ui/pressable';
+import { useEffect } from 'react';
+import { Platform, Pressable, View } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { Icon } from '../Icon';
+import { useSegmentedControlContext } from './SegmentedControl.context';
+const AnimatedView = Animated.createAnimatedComponent(View);
+const SegmentedControlOptionRoot = ({ value, children, icon, accessibilityLabel, disabled = false, style, states = {}, ...props }) => {
+    const { value: selectedValue, select, disabled: allDisabled, size, registerOptionLayout, } = useSegmentedControlContext();
+    const { active = false } = states;
+    const reducedMotion = useReducedMotion();
+    const selected = selectedValue === value;
+    const isDisabled = disabled || !!allDisabled;
+    const selectedProgress = useSharedValue(selected ? 1 : 0);
+    useEffect(() => {
+        selectedProgress.value = withTiming(selected ? 1 : 0, {
+            duration: reducedMotion ? 0 : 220,
+            easing: Easing.out(Easing.cubic),
+        });
+    }, [reducedMotion, selected, selectedProgress]);
+    const regularLabelStyle = useAnimatedStyle(() => ({
+        opacity: 1 - selectedProgress.value,
+    }));
+    const selectedLabelStyle = useAnimatedStyle(() => ({
+        opacity: selectedProgress.value,
+    }));
+    styles.useVariants({ selected, disabled: isDisabled, size, active });
+    const onPress = () => {
+        if (isDisabled)
+            return;
+        select(value);
+    };
+    const accessibleLabel = typeof children === 'string' || typeof children === 'number' ? String(children) : value;
+    return (_jsx(Pressable, { ...props, accessibilityRole: "radio", accessibilityState: { checked: selected, disabled: isDisabled }, accessibilityLabel: accessibilityLabel ?? accessibleLabel, onPress: onPress, onLayout: e => registerOptionLayout(value, e.nativeEvent.layout), disabled: isDisabled, style: [styles.option, style], ...(Platform.OS === 'web'
+            ? { 'aria-label': accessibilityLabel ?? accessibleLabel }
+            : null), children: _jsxs(View, { style: styles.contentWrap, accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: [icon ? _jsx(Icon, { as: icon, size: "sm", style: styles.icon }) : null, _jsxs(View, { style: styles.labelWrap, children: [_jsx(BodyText, { size: "md", weight: "semibold", style: styles.labelSizer, accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: children }), _jsx(AnimatedView, { style: [styles.textLayer, styles.pointerEventsNone, regularLabelStyle], accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: _jsx(BodyText, { size: "md", weight: "regular", style: styles.textRegular, children: children }) }), _jsx(AnimatedView, { style: [styles.textLayer, styles.pointerEventsNone, selectedLabelStyle], accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: _jsx(BodyText, { size: "md", weight: "semibold", style: styles.textSelected, children: children }) })] })] }) }));
+};
+const SegmentedControlOption = createPressable({ Root: SegmentedControlOptionRoot });
+SegmentedControlOption.displayName = 'SegmentedControlOption';
+const styles = StyleSheet.create(theme => ({
+    option: {
+        minWidth: theme.components.segmentedControl.minWidth,
+        height: theme.components.segmentedControl.height,
+        borderRadius: theme.components.segmentedControl.borderRadius,
+        paddingHorizontal: theme.components.segmentedControl.paddingHorizontal,
+        paddingVertical: theme.components.segmentedControl.paddingVertical,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'transparent',
+        zIndex: 1,
+        variants: {
+            size: {
+                sm: {
+                    height: 28,
+                    paddingHorizontal: theme.space[150],
+                    paddingVertical: 0,
+                },
+                md: {
+                    height: 44,
+                    paddingHorizontal: theme.components.segmentedControl.paddingHorizontal,
+                    paddingVertical: theme.components.segmentedControl.paddingVertical,
+                },
+            },
+            selected: {
+                true: {
+                    backgroundColor: 'transparent',
+                    _web: {
+                        _active: {
+                            backgroundColor: theme.color.interactive.brand.surface.strong.active,
+                        },
+                    },
+                },
+                false: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
+                        },
+                        _active: {
+                            backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+                        },
+                    },
+                },
+            },
+            active: {
+                true: {
+                    backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+                },
+            },
+        },
+    },
+    contentWrap: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: theme.components.segmentedControl.gap,
+    },
+    labelWrap: {
+        position: 'relative',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    labelSizer: {
+        opacity: 0,
+    },
+    textLayer: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    pointerEventsNone: {
+        pointerEvents: 'none',
+    },
+    icon: {
+        variants: {
+            selected: {
+                true: {
+                    color: theme.color.icon.inverted,
+                },
+                false: {
+                    color: theme.color.icon.primary,
+                },
+            },
+        },
+    },
+    textRegular: {
+        color: theme.color.text.primary,
+    },
+    textSelected: {
+        color: theme.color.text.inverted,
+        variants: {
+            disabled: {
+                true: {
+                    opacity: 1,
+                },
+            },
+        },
+    },
+}));
+export default SegmentedControlOption;

package/build/components/SegmentedControl/SegmentedControlOption.props.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+export interface SegmentedControlOptionProps extends Omit<PressableProps, 'children'> {
+    /** Unique option value. */
+    value: string;
+    /** Option label/content. */
+    children: ReactNode;
+    /** Optional leading icon. */
+    icon?: ComponentType<any>;
+    /** Disables only this option. */
+    disabled?: boolean;
+    style?: ViewProps['style'];
+}
+export default SegmentedControlOptionProps;

package/build/components/SegmentedControl/SegmentedControlOption.props.js

@@ -0,0 +1 @@
+export {};

package/build/components/SegmentedControl/index.d.ts

@@ -0,0 +1,4 @@
+export { default as SegmentedControl } from './SegmentedControl';
+export type { SegmentedControlProps } from './SegmentedControl.props';
+export { default as SegmentedControlOption } from './SegmentedControlOption';
+export type { SegmentedControlOptionProps } from './SegmentedControlOption.props';

package/build/components/SegmentedControl/index.js

@@ -0,0 +1,2 @@
+export { default as SegmentedControl } from './SegmentedControl';
+export { default as SegmentedControlOption } from './SegmentedControlOption';

package/build/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,6 @@
+import type { TimePickerProps } from './TimePicker.props';
+declare const TimePicker: {
+    ({ timeZone, date, onChange, use12Hours, minuteInterval, hideFooter, style, ref, onCancel, }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TimePicker;

package/build/components/TimePicker/TimePicker.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, findNodeHandle, Platform, View as RNView } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BottomSheetModal, BottomSheetView } from '../BottomSheet';
+import { Button } from '../Button';
+import TimePickerView from './TimePickerView';
+dayjs.extend(utc);
+dayjs.extend(timezone);
+const Footer = ({ onCancel, onConfirm }) => {
+    return (_jsxs(RNView, { style: styles.footer, testID: "footer", children: [_jsx(Button, { variant: "ghost", colorScheme: "functional", onPress: onCancel, children: "Cancel" }), _jsx(Button, { variant: "ghost", colorScheme: "functional", onPress: onConfirm, children: "Ok" })] }));
+};
+const TimePicker = ({ timeZone, date, onChange, use12Hours, minuteInterval, hideFooter, style, ref, onCancel = () => { }, }) => {
+    dayjs.tz.setDefault(timeZone);
+    dayjs.locale('en');
+    const modalRef = useRef(null);
+    const pickerViewRef = useRef(null);
+    useImperativeHandle(ref, () => modalRef.current);
+    const [currentDate, setCurrentDate] = useState(() => {
+        return date ? dayjs.tz(date, timeZone) : dayjs().tz(timeZone);
+    });
+    useEffect(() => {
+        const nextDate = date ? dayjs.tz(date, timeZone) : dayjs().tz(timeZone);
+        const isSameMinute = dayjs(currentDate).isSame(nextDate, 'minute');
+        if (!isSameMinute) {
+            setCurrentDate(nextDate);
+        }
+    }, [currentDate, date, timeZone]);
+    const closeTimePicker = useCallback(() => {
+        modalRef.current?.close();
+    }, []);
+    const handleSelectDate = useCallback((selectedDate) => {
+        const newDate = dayjs.tz(selectedDate ?? currentDate, timeZone);
+        if (!dayjs(currentDate).isSame(newDate, 'minute')) {
+            setCurrentDate(newDate);
+        }
+        onChange?.({ date: newDate ? dayjs(newDate).toDate() : newDate });
+    }, [currentDate, onChange, timeZone]);
+    const handleCancel = useCallback(() => {
+        onCancel?.();
+        closeTimePicker();
+    }, [closeTimePicker, onCancel]);
+    const handleConfirm = useCallback(() => {
+        closeTimePicker();
+    }, [closeTimePicker]);
+    const handleChange = useCallback((index) => {
+        if (index > -1) {
+            setTimeout(() => {
+                AccessibilityInfo.announceForAccessibility('Time picker opened.');
+                const targetRef = pickerViewRef.current;
+                if (targetRef) {
+                    const nodeHandle = findNodeHandle(targetRef);
+                    if (nodeHandle) {
+                        AccessibilityInfo.setAccessibilityFocus(nodeHandle);
+                    }
+                }
+            }, 50);
+        }
+    }, []);
+    const contentStyle = useMemo(() => [styles.container, style], [style]);
+    return (_jsx(BottomSheetModal, { ref: modalRef, onChange: handleChange, accessible: false, enableContentPanningGesture: false, children: _jsx(BottomSheetView, { children: _jsxs(RNView, { ref: pickerViewRef, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Time picker' : undefined, importantForAccessibility: Platform.OS === 'android' ? 'yes' : 'auto', style: contentStyle, children: [_jsx(TimePickerView, { currentDate: currentDate, onSelectDate: handleSelectDate, timeZone: timeZone, use12Hours: use12Hours, minuteInterval: minuteInterval }), !hideFooter ? _jsx(Footer, { onCancel: handleCancel, onConfirm: handleConfirm }) : null] }) }) }));
+};
+TimePicker.displayName = 'TimePicker';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        backgroundColor: theme.color.background.secondary,
+        gap: theme.components.datePicker.calendar.gap,
+    },
+    footer: {
+        flexDirection: 'row',
+        gap: theme.components.datePicker.calendar.footer.gap,
+        justifyContent: 'flex-end',
+    },
+}));
+export default TimePicker;

package/build/components/TimePicker/TimePicker.props.d.ts

@@ -0,0 +1,45 @@
+import type { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+import type { Ref } from 'react';
+import type { ViewStyle } from 'react-native';
+import type { DateType, PickerOption } from '../DatePicker/DatePicker.props';
+export interface TimePickerProps {
+    /**
+     * IANA time zone identifier applied when normalising and comparing times.
+     */
+    timeZone?: string;
+    /**
+     * Controlled time value.
+     */
+    date?: DateType;
+    /**
+     * Fired whenever a time is picked.
+     */
+    onChange?: (params: {
+        date: DateType;
+    }) => void;
+    /**
+     * Display a 12-hour clock with AM/PM selector.
+     */
+    use12Hours?: boolean;
+    /**
+     * Step interval for minutes shown in the picker.
+     */
+    minuteInterval?: number;
+    /**
+     * Hide the footer actions.
+     */
+    hideFooter?: boolean;
+    /**
+     * Custom container styling for the time picker surface.
+     */
+    style?: ViewStyle;
+    /**
+     * Gives imperative access to the bottom sheet instance.
+     */
+    ref?: Ref<BottomSheetModalMethods<any>>;
+    /**
+     * Fired when the cancel action is triggered.
+     */
+    onCancel?: () => void;
+}
+export type { DateType, PickerOption };

package/build/components/TimePicker/TimePicker.props.js

@@ -0,0 +1 @@
+export {};

package/build/components/TimePicker/TimePickerView.d.ts

@@ -0,0 +1,12 @@
+import type { DateType } from './TimePicker.props';
+export type Period = 'AM' | 'PM';
+type TimePickerViewProps = {
+    currentDate: DateType;
+    onSelectDate: (date: DateType) => void;
+    timeZone?: string;
+    use12Hours?: boolean;
+    minuteInterval?: number;
+    containerHeight?: number;
+};
+declare const _default: import("react").MemoExoticComponent<({ currentDate, onSelectDate, timeZone, use12Hours, minuteInterval, }: TimePickerViewProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;