@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/components/StepBasedScreen.js

@@ -0,0 +1,372 @@
+"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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,239 @@
+"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;