@oxyhq/services 6.9.15 → 6.9.17

package/src/ui/components/StepBasedScreen.js

@@ -1,372 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-const styles_1 = require("../styles");
-const fonts_1 = require("../styles/fonts");
-const spacing_1 = require("../constants/spacing");
-const react_native_safe_area_context_1 = require("react-native-safe-area-context");
-// Individual animated progress dot
-const AnimatedProgressDot = ({ isActive, colors, styles }) => {
-    const width = (0, react_native_reanimated_1.useSharedValue)(isActive ? 12 : 6);
-    const backgroundColor = (0, react_native_reanimated_1.useSharedValue)(isActive ? colors.primary : colors.border);
-    (0, react_1.useEffect)(() => {
-        width.value = (0, react_native_reanimated_1.withTiming)(isActive ? 12 : 6, { duration: 300 });
-        backgroundColor.value = (0, react_native_reanimated_1.withTiming)(isActive ? colors.primary : colors.border, { duration: 300 });
-    }, [isActive, colors.primary, colors.border, width, backgroundColor]);
-    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
-        width: width.value,
-        backgroundColor: backgroundColor.value,
-    }));
-    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
-            styles.progressDot,
-            animatedStyle,
-        ] }));
-};
-// Progress indicator component
-const ProgressIndicator = ({ currentStep, totalSteps, colors, styles }) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.progressContainer, children: Array.from({ length: totalSteps }, (_, index) => ((0, jsx_runtime_1.jsx)(AnimatedProgressDot
-    // biome-ignore lint/suspicious/noArrayIndexKey: progress dots are static and have no stable IDs
-    , { isActive: currentStep === index, colors: colors, styles: styles }, index))) }));
-// Step container - animations are now handled by router
-const StepBasedScreen = ({ steps, initialStep = 0, showProgressIndicator = true, enableAnimations = true, onStepChange, onComplete, stepData = [], navigate, goBack, onAuthenticated, theme, oxyServices, stepControllerRef, currentScreen, // Current screen name for router-based step navigation
-getNavigationProps, // Optional callback to extract navigation props from screen state
- }) => {
-    // ========================================================================
-    // State Management
-    // ========================================================================
-    // Router now handles step navigation - we just track step data
-    const [state, setState] = (0, react_1.useState)({
-        stepData: [...stepData],
-    });
-    // Current step comes from router via initialStep prop
-    const currentStep = initialStep ?? 0;
-    // ========================================================================
-    // Computed Values
-    // ========================================================================
-    // Narrow theme type with default value
-    const themeValue = (theme === 'light' || theme === 'dark') ? theme : 'light';
-    const themeString = typeof theme === 'string' ? theme : 'light';
-    const colors = (0, styles_1.useThemeColors)(themeValue);
-    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
-    const styles = (0, react_1.useMemo)(() => ({
-        ...(0, styles_1.createAuthStyles)(colors, themeString),
-        // Additional styles for step components
-        modernHeader: {
-            alignItems: 'flex-start',
-            width: '100%',
-            marginBottom: 24,
-        },
-        modernTitle: {
-            fontFamily: fonts_1.fontFamilies.interBold,
-            fontWeight: react_native_1.Platform.OS === 'web' ? 'bold' : undefined,
-            fontSize: 42,
-            lineHeight: 50.4, // 42 * 1.2
-            marginBottom: 12,
-            textAlign: 'left',
-        },
-        modernSubtitle: {
-            fontSize: 18,
-            lineHeight: 24,
-            textAlign: 'left',
-            opacity: 0.8,
-        },
-        modernInputContainer: {
-            width: '100%',
-        },
-        button: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            paddingVertical: 18,
-            paddingHorizontal: 32,
-            borderRadius: 16,
-            marginVertical: 8,
-            gap: 8,
-            width: '100%',
-            ...react_native_1.Platform.select({
-                web: {
-                    boxShadow: '0 4px 8px rgba(0,0,0,0.3)',
-                },
-                default: {
-                    shadowOffset: { width: 0, height: 4 },
-                    shadowOpacity: 0.3,
-                    shadowRadius: 8,
-                    elevation: 6,
-                }
-            }),
-        },
-        buttonText: {
-            color: '#FFFFFF',
-            fontSize: 16,
-            fontWeight: '600',
-            letterSpacing: 0.5,
-        },
-        footerText: {
-            fontSize: 14,
-            lineHeight: 20,
-        },
-        footerTextContainer: {
-            flexDirection: 'row',
-            justifyContent: 'center',
-            marginTop: 16,
-        },
-        linkText: {
-            fontSize: 14,
-            lineHeight: 20,
-            fontWeight: '600',
-            textDecorationLine: 'underline',
-        },
-        progressContainer: {
-            flexDirection: 'row',
-            width: '100%',
-            justifyContent: 'center',
-            marginTop: 24, // Space for bottom sheet handle (~20px) + small buffer
-            marginBottom: 0, // BottomSheet handles all bottom spacing
-        },
-        progressDot: {
-            height: 6,
-            width: 6,
-            borderRadius: 3,
-            marginHorizontal: 3,
-            backgroundColor: colors.border,
-        },
-    }), [colors, themeString]);
-    // ========================================================================
-    // Animation Values (removed - router handles animations now)
-    // ========================================================================
-    // ========================================================================
-    // Refs for Callbacks
-    // ========================================================================
-    const onStepChangeRef = (0, react_1.useRef)(onStepChange);
-    const onCompleteRef = (0, react_1.useRef)(onComplete);
-    onStepChangeRef.current = onStepChange;
-    onCompleteRef.current = onComplete;
-    // ========================================================================
-    // Effects
-    // ========================================================================
-    (0, react_1.useEffect)(() => {
-        setState(prevState => ({
-            ...prevState,
-            stepData: [...stepData],
-        }));
-    }, [stepData]);
-    // ========================================================================
-    // Step Data Management
-    // ========================================================================
-    const updateStepData = (0, react_1.useCallback)((stepIndex, data) => {
-        setState(prev => {
-            const nextStepData = prev.stepData.slice();
-            nextStepData[stepIndex] = data;
-            return {
-                ...prev,
-                stepData: nextStepData,
-            };
-        });
-    }, []);
-    // ========================================================================
-    // Step Change Effects
-    // ========================================================================
-    // Router handles all step navigation - we just respond to prop changes
-    (0, react_1.useEffect)(() => {
-        // Validate step
-        if (currentStep < 0 || currentStep >= steps.length) {
-            if (__DEV__) {
-                console.warn('StepBasedScreen: invalid step', currentStep);
-            }
-            return;
-        }
-        // Call onEnter for current step
-        const currentStepConfig = steps[currentStep];
-        currentStepConfig?.onEnter?.();
-        // Notify parent of step change
-        onStepChangeRef.current?.(currentStep, steps.length);
-        // Cleanup: call onExit when step changes
-        return () => {
-            if (currentStepConfig?.onExit) {
-                currentStepConfig.onExit();
-            }
-        };
-    }, [currentStep, steps]);
-    // ========================================================================
-    // Step Navigation
-    // ========================================================================
-    // All step navigation is now handled by router - these functions use router's navigate/goBack
-    const nextStep = (0, react_1.useCallback)(() => {
-        const currentStepConfig = steps[currentStep];
-        if (currentStepConfig?.canProceed) {
-            const stepData = state.stepData[currentStep];
-            if (!currentStepConfig.canProceed(stepData)) {
-                return; // Step validation failed
-            }
-        }
-        if (currentStep < steps.length - 1) {
-            const nextStepIndex = currentStep + 1;
-            // Extract props to preserve them across navigation
-            const navigationProps = { initialStep: nextStepIndex };
-            // Use extraction callback if provided
-            if (getNavigationProps) {
-                const extractedProps = getNavigationProps();
-                Object.assign(navigationProps, extractedProps);
-            }
-            else {
-                // Fallback: Extract props from stepData
-                const step0Data = (stepData[0] || {});
-                const currentStepData = (stepData[currentStep] || {});
-                if (step0Data.username || currentStepData.username) {
-                    navigationProps.username = step0Data.username || currentStepData.username;
-                }
-                if (step0Data.userProfile || currentStepData.userProfile) {
-                    navigationProps.userProfile = step0Data.userProfile || currentStepData.userProfile;
-                }
-                if (step0Data.email || currentStepData.email) {
-                    navigationProps.email = step0Data.email || currentStepData.email;
-                }
-            }
-            // Router handles step navigation with animations
-            if (currentScreen && navigate && typeof currentScreen === 'string') {
-                navigate(currentScreen, navigationProps);
-            }
-        }
-        else {
-            // Final step - call onComplete
-            onCompleteRef.current?.(state.stepData);
-        }
-    }, [currentStep, steps, currentScreen, navigate, state.stepData, getNavigationProps, stepData]);
-    const prevStep = (0, react_1.useCallback)(() => {
-        // Use router's goBack - it handles step navigation automatically
-        if (currentStep > 0 && typeof goBack === 'function') {
-            goBack();
-        }
-        else if (typeof goBack === 'function') {
-            // On first step, goBack will check screen history or close
-            goBack();
-        }
-    }, [currentStep, goBack]);
-    const goToStep = (0, react_1.useCallback)((stepIndex) => {
-        if (stepIndex < 0 || stepIndex >= steps.length || stepIndex === currentStep)
-            return;
-        // Extract props to preserve state
-        const navigationProps = { initialStep: stepIndex };
-        if (getNavigationProps) {
-            const extractedProps = getNavigationProps();
-            Object.assign(navigationProps, extractedProps);
-        }
-        else {
-            const step0Data = (stepData[0] || {});
-            if (step0Data.username)
-                navigationProps.username = step0Data.username;
-            if (step0Data.userProfile)
-                navigationProps.userProfile = step0Data.userProfile;
-            if (step0Data.email)
-                navigationProps.email = step0Data.email;
-        }
-        // Router handles step navigation with animations
-        if (currentScreen && navigate && typeof currentScreen === 'string') {
-            navigate(currentScreen, navigationProps);
-        }
-    }, [currentStep, steps, currentScreen, navigate, stepData, getNavigationProps]);
-    // ========================================================================
-    // Step Controller Exposure
-    // ========================================================================
-    (0, react_1.useEffect)(() => {
-        if (!stepControllerRef || typeof stepControllerRef !== 'object' || !('current' in stepControllerRef))
-            return;
-        stepControllerRef.current = {
-            canGoBack: () => currentStep > 0,
-            goBack: prevStep,
-        };
-        return () => {
-            if (stepControllerRef && typeof stepControllerRef === 'object' && 'current' in stepControllerRef) {
-                stepControllerRef.current = null;
-            }
-        };
-    }, [currentStep, prevStep, stepControllerRef]);
-    // ========================================================================
-    // Step Component & Props
-    // ========================================================================
-    const currentStepConfig = steps[currentStep];
-    const CurrentStepComponent = currentStepConfig?.component;
-    const updateCurrentStepData = (0, react_1.useCallback)((data) => updateStepData(currentStep, data), [currentStep, updateStepData]);
-    const stepProps = (0, react_1.useMemo)(() => ({
-        ...currentStepConfig?.props,
-        // Common props
-        colors,
-        styles,
-        theme,
-        navigate,
-        goBack,
-        onAuthenticated,
-        oxyServices,
-        // Step navigation
-        nextStep,
-        prevStep,
-        goToStep,
-        currentStep: currentStep,
-        totalSteps: steps.length,
-        // Step data - spread the step data properties directly as props
-        ...state.stepData[currentStep],
-        // Step data management
-        updateStepData: updateCurrentStepData,
-        allStepData: state.stepData,
-    }), [
-        currentStepConfig?.props,
-        colors,
-        styles,
-        theme,
-        navigate,
-        goBack,
-        onAuthenticated,
-        oxyServices,
-        nextStep,
-        prevStep,
-        goToStep,
-        currentStep,
-        state.stepData,
-        steps.length,
-        updateCurrentStepData,
-    ]);
-    // Pure content wrapper - all layout is handled by BottomSheetRouter
-    // This component only renders content, no layout calculations
-    // Add safe area insets to bottom padding so content doesn't sit under safe area
-    const contentStyle = (0, react_1.useMemo)(() => ({
-        ...spacing_1.screenContentStyle,
-        paddingBottom: spacing_1.screenContentStyle.paddingBottom + insets.bottom,
-    }), [insets.bottom]);
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: contentStyle, children: [showProgressIndicator && steps.length > 1 && ((0, jsx_runtime_1.jsx)(ProgressIndicator, { currentStep: currentStep, totalSteps: steps.length, colors: colors, styles: styles })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.stepContainer, children: CurrentStepComponent && ((0, jsx_runtime_1.jsx)(CurrentStepComponent, { ...stepProps })) })] }));
-};
-exports.default = StepBasedScreen;

package/src/ui/components/Surface.d.ts

@@ -1,75 +0,0 @@
-import * as React from 'react';
-import { Animated, type StyleProp, type View, type ViewStyle } from 'react-native';
-import type { ThemeProp } from './types';
-type Elevation = 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
-export type Props = Omit<React.ComponentPropsWithRef<typeof View>, 'style'> & {
-    /**
-     * Content of the `Surface`.
-     */
-    children: React.ReactNode;
-    style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-    /**
-     * @supported Available in v5.x with theme version 3
-     * Changes shadows and background on iOS and Android.
-     * Used to create UI hierarchy between components.
-     *
-     * Note: If `mode` is set to `flat`, Surface doesn't have a shadow.
-     *
-     * Note: In version 2 the `elevation` prop was accepted via `style` prop i.e. `style={{ elevation: 4 }}`.
-     * It's no longer supported with theme version 3 and you should use `elevation` property instead.
-     */
-    elevation?: Elevation;
-    /**
-     * @supported Available in v5.x with theme version 3
-     * Mode of the Surface.
-     * - `elevated` - Surface with a shadow and background color corresponding to set `elevation` value.
-     * - `flat` - Surface without a shadow, with the background color corresponding to set `elevation` value.
-     */
-    mode?: 'flat' | 'elevated';
-    /**
-     * @optional
-     */
-    theme?: ThemeProp;
-    /**
-     * TestID used for testing purposes
-     */
-    testID?: string;
-    ref?: React.RefObject<View>;
-    /**
-     * @internal
-     */
-    container?: boolean;
-};
-/**
- * Surface is a basic container that can give depth to an element with elevation shadow.
- * On dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.
- * See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.
- * Overlay and shadow can be applied by specifying the `elevation` property both on Android and iOS.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Surface, Text } from 'react-native-paper';
- * import { StyleSheet } from 'react-native';
- *
- * const MyComponent = () => (
- *   <Surface style={styles.surface} elevation={4}>
- *      <Text>Surface</Text>
- *   </Surface>
- * );
- *
- * export default MyComponent;
- *
- * const styles = StyleSheet.create({
- *   surface: {
- *     padding: 8,
- *     height: 80,
- *     width: 80,
- *     alignItems: 'center',
- *     justifyContent: 'center',
- *   },
- * });
- * ```
- */
-declare const Surface: import("./utils/forwardRef").ForwardRefComponent<View, Props>;
-export default Surface;

package/src/ui/components/Surface.js

@@ -1,239 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const React = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const theming_1 = require("./theming");
-const overlay_1 = __importStar(require("./styles/overlay"));
-const shadow_1 = __importDefault(require("./styles/shadow"));
-const forwardRef_1 = require("./utils/forwardRef");
-const splitStyles_1 = require("./utils/splitStyles");
-const MD2Surface = (0, forwardRef_1.forwardRef)(({ style, theme: overrideTheme, ...rest }, ref) => {
-    const { elevation = 4 } = (react_native_1.StyleSheet.flatten(style) || {});
-    const { dark: isDarkTheme, mode, colors } = (0, theming_1.useInternalTheme)(overrideTheme);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { ref: ref, ...rest, style: [
-            {
-                backgroundColor: isDarkTheme && mode === 'adaptive'
-                    ? (0, overlay_1.default)(elevation, colors?.surface)
-                    : colors?.surface,
-            },
-            elevation ? (0, shadow_1.default)(elevation) : null,
-            style,
-        ] }));
-});
-const outerLayerStyleProperties = [
-    'position',
-    'alignSelf',
-    'top',
-    'right',
-    'bottom',
-    'left',
-    'start',
-    'end',
-    'flex',
-    'flexShrink',
-    'flexGrow',
-    'width',
-    'height',
-    'transform',
-    'opacity',
-];
-const shadowColor = '#000';
-const iOSShadowOutputRanges = [
-    {
-        shadowOpacity: 0.15,
-        height: [0, 1, 2, 4, 6, 8],
-        shadowRadius: [0, 3, 6, 8, 10, 12],
-    },
-    {
-        shadowOpacity: 0.3,
-        height: [0, 1, 1, 1, 2, 4],
-        shadowRadius: [0, 1, 2, 3, 3, 4],
-    },
-];
-const inputRange = [0, 1, 2, 3, 4, 5];
-function getStyleForShadowLayer(elevation, layer) {
-    if ((0, overlay_1.isAnimatedValue)(elevation)) {
-        return {
-            shadowColor,
-            shadowOpacity: elevation.interpolate({
-                inputRange: [0, 1],
-                outputRange: [0, iOSShadowOutputRanges[layer].shadowOpacity],
-                extrapolate: 'clamp',
-            }),
-            shadowOffset: {
-                width: 0,
-                height: elevation.interpolate({
-                    inputRange,
-                    outputRange: iOSShadowOutputRanges[layer].height,
-                }),
-            },
-            shadowRadius: elevation.interpolate({
-                inputRange,
-                outputRange: iOSShadowOutputRanges[layer].shadowRadius,
-            }),
-        };
-    }
-    return {
-        shadowColor,
-        shadowOpacity: elevation ? iOSShadowOutputRanges[layer].shadowOpacity : 0,
-        shadowOffset: {
-            width: 0,
-            height: iOSShadowOutputRanges[layer].height[elevation],
-        },
-        shadowRadius: iOSShadowOutputRanges[layer].shadowRadius[elevation],
-    };
-}
-const SurfaceIOS = (0, forwardRef_1.forwardRef)(({ elevation, style, backgroundColor, testID, children, mode = 'elevated', container, ...props }, ref) => {
-    const [outerLayerViewStyles, innerLayerViewStyles] = React.useMemo(() => {
-        const flattenedStyles = (react_native_1.StyleSheet.flatten(style) || {});
-        const [filteredStyles, outerLayerStyles, borderRadiusStyles] = (0, splitStyles_1.splitStyles)(flattenedStyles, (style) => outerLayerStyleProperties.includes(style) ||
-            style.startsWith('margin'), (style) => style.startsWith('border') && style.endsWith('Radius'));
-        if (process.env.NODE_ENV !== 'production' &&
-            filteredStyles.overflow === 'hidden' &&
-            elevation !== 0) {
-            console.warn('When setting overflow to hidden on Surface the shadow will not be displayed correctly. Wrap the content of your component in a separate View with the overflow style.');
-        }
-        const bgColor = flattenedStyles.backgroundColor || backgroundColor;
-        const isElevated = mode === 'elevated';
-        const outerLayerViewStyles = {
-            ...(isElevated && getStyleForShadowLayer(elevation, 0)),
-            ...outerLayerStyles,
-            ...borderRadiusStyles,
-            backgroundColor: bgColor,
-        };
-        const innerLayerViewStyles = {
-            ...(isElevated && getStyleForShadowLayer(elevation, 1)),
-            ...filteredStyles,
-            ...borderRadiusStyles,
-            flex: flattenedStyles.height || (!container && flattenedStyles.flex)
-                ? 1
-                : undefined,
-            backgroundColor: bgColor,
-        };
-        return [outerLayerViewStyles, innerLayerViewStyles];
-    }, [style, elevation, backgroundColor, mode, container]);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { ref: ref, style: outerLayerViewStyles, testID: `${testID}-outer-layer`, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { ...props, style: innerLayerViewStyles, testID: testID, children: children }) }));
-});
-/**
- * Surface is a basic container that can give depth to an element with elevation shadow.
- * On dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.
- * See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.
- * Overlay and shadow can be applied by specifying the `elevation` property both on Android and iOS.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Surface, Text } from 'react-native-paper';
- * import { StyleSheet } from 'react-native';
- *
- * const MyComponent = () => (
- *   <Surface style={styles.surface} elevation={4}>
- *      <Text>Surface</Text>
- *   </Surface>
- * );
- *
- * export default MyComponent;
- *
- * const styles = StyleSheet.create({
- *   surface: {
- *     padding: 8,
- *     height: 80,
- *     width: 80,
- *     alignItems: 'center',
- *     justifyContent: 'center',
- *   },
- * });
- * ```
- */
-const Surface = (0, forwardRef_1.forwardRef)(({ elevation = 1, children, theme: overridenTheme, style, testID = 'surface', mode = 'elevated', ...props }, ref) => {
-    const theme = (0, theming_1.useInternalTheme)(overridenTheme);
-    if (!theme.isV3)
-        return ((0, jsx_runtime_1.jsx)(MD2Surface, { ...props, theme: theme, style: style, ref: ref, children: children }));
-    const { colors } = theme;
-    const inputRange = [0, 1, 2, 3, 4, 5];
-    const backgroundColor = (() => {
-        if ((0, overlay_1.isAnimatedValue)(elevation)) {
-            return elevation.interpolate({
-                inputRange,
-                outputRange: inputRange.map((elevation) => {
-                    return colors.elevation?.[`level${elevation}`];
-                }),
-            });
-        }
-        return colors.elevation?.[`level${elevation}`];
-    })();
-    const isElevated = mode === 'elevated';
-    if (react_native_1.Platform.OS === 'web') {
-        const { pointerEvents = 'auto' } = props;
-        return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { ...props, pointerEvents: pointerEvents, ref: ref, testID: testID, style: [
-                { backgroundColor },
-                elevation && isElevated ? (0, shadow_1.default)(elevation, theme.isV3) : null,
-                style,
-            ], children: children }));
-    }
-    if (react_native_1.Platform.OS === 'android') {
-        const elevationLevel = [0, 3, 6, 9, 12, 15];
-        const getElevationAndroid = () => {
-            if ((0, overlay_1.isAnimatedValue)(elevation)) {
-                return elevation.interpolate({
-                    inputRange,
-                    outputRange: elevationLevel,
-                });
-            }
-            return elevationLevel[elevation];
-        };
-        const { margin, padding, transform, borderRadius } = (react_native_1.StyleSheet.flatten(style) || {});
-        const outerLayerStyles = { margin, padding, transform, borderRadius };
-        const sharedStyle = [{ backgroundColor }, style];
-        return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { ...props, testID: testID, ref: ref, style: [
-                {
-                    backgroundColor,
-                    transform,
-                },
-                outerLayerStyles,
-                sharedStyle,
-                isElevated && {
-                    elevation: getElevationAndroid(),
-                },
-            ], children: children }));
-    }
-    return ((0, jsx_runtime_1.jsx)(SurfaceIOS, { ...props, ref: ref, elevation: elevation, backgroundColor: backgroundColor, style: style, testID: testID, mode: mode, children: children }));
-});
-exports.default = Surface;