@oxyhq/services 5.16.23 → 5.16.24

package/lib/commonjs/ui/components/StepBasedScreen.js

@@ -0,0 +1,397 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _styles = require("../styles");
+var _spacing = require("../constants/spacing");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Individual animated progress dot
+const AnimatedProgressDot = ({
+  isActive,
+  colors,
+  styles
+}) => {
+  const width = (0, _reactNativeReanimated.useSharedValue)(isActive ? 12 : 6);
+  const backgroundColor = (0, _reactNativeReanimated.useSharedValue)(isActive ? colors.primary : colors.border);
+  (0, _react.useEffect)(() => {
+    width.value = (0, _reactNativeReanimated.withTiming)(isActive ? 12 : 6, {
+      duration: 300
+    });
+    backgroundColor.value = (0, _reactNativeReanimated.withTiming)(isActive ? colors.primary : colors.border, {
+      duration: 300
+    });
+  }, [isActive, colors.primary, colors.border, width, backgroundColor]);
+  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    width: width.value,
+    backgroundColor: backgroundColor.value
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+    style: [styles.progressDot, animatedStyle]
+  });
+};
+
+// Progress indicator component
+const ProgressIndicator = ({
+  currentStep,
+  totalSteps,
+  colors,
+  styles
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  style: styles.progressContainer,
+  children: Array.from({
+    length: totalSteps
+  }, (_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedProgressDot, {
+    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.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.useThemeColors)(themeValue);
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const styles = (0, _react.useMemo)(() => ({
+    ...(0, _styles.createAuthStyles)(colors, themeString),
+    // Additional styles for step components
+    modernHeader: {
+      alignItems: 'flex-start',
+      width: '100%',
+      marginBottom: 24
+    },
+    modernTitle: {
+      fontFamily: _reactNative.Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+      fontWeight: _reactNative.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%',
+      ..._reactNative.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, theme]);
+
+  // ========================================================================
+  // Animation Values (removed - router handles animations now)
+  // ========================================================================
+
+  // ========================================================================
+  // Refs for Callbacks
+  // ========================================================================
+  const onStepChangeRef = (0, _react.useRef)(onStepChange);
+  const onCompleteRef = (0, _react.useRef)(onComplete);
+  onStepChangeRef.current = onStepChange;
+  onCompleteRef.current = onComplete;
+
+  // ========================================================================
+  // Effects
+  // ========================================================================
+  (0, _react.useEffect)(() => {
+    setState(prevState => ({
+      ...prevState,
+      stepData: [...stepData]
+    }));
+  }, [stepData]);
+
+  // ========================================================================
+  // Step Data Management
+  // ========================================================================
+  const updateStepData = (0, _react.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.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.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.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.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.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.useCallback)(data => updateStepData(currentStep, data), [currentStep, updateStepData]);
+  const stepProps = (0, _react.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.useMemo)(() => ({
+    ..._spacing.screenContentStyle,
+    paddingBottom: _spacing.screenContentStyle.paddingBottom + insets.bottom
+  }), [insets.bottom]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: contentStyle,
+    children: [showProgressIndicator && steps.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressIndicator, {
+      currentStep: currentStep,
+      totalSteps: steps.length,
+      colors: colors,
+      styles: styles
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.stepContainer,
+      children: CurrentStepComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(CurrentStepComponent, {
+        ...stepProps
+      })
+    })]
+  });
+};
+var _default = exports.default = StepBasedScreen;
+//# sourceMappingURL=StepBasedScreen.js.map

package/lib/commonjs/ui/components/StepBasedScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_styles","_spacing","_reactNativeSafeAreaContext","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AnimatedProgressDot","isActive","colors","styles","width","useSharedValue","backgroundColor","primary","border","useEffect","value","withTiming","duration","animatedStyle","useAnimatedStyle","jsx","View","style","progressDot","ProgressIndicator","currentStep","totalSteps","progressContainer","children","Array","from","length","_","index","StepBasedScreen","steps","initialStep","showProgressIndicator","enableAnimations","onStepChange","onComplete","stepData","navigate","goBack","onAuthenticated","theme","oxyServices","stepControllerRef","currentScreen","getNavigationProps","state","setState","useState","themeValue","themeString","useThemeColors","insets","useSafeAreaInsets","useMemo","createAuthStyles","modernHeader","alignItems","marginBottom","modernTitle","fontFamily","Platform","OS","fontWeight","undefined","fontSize","lineHeight","textAlign","modernSubtitle","opacity","modernInputContainer","button","flexDirection","justifyContent","paddingVertical","paddingHorizontal","borderRadius","marginVertical","gap","select","web","boxShadow","shadowOffset","height","shadowOpacity","shadowRadius","elevation","buttonText","color","letterSpacing","footerText","footerTextContainer","marginTop","linkText","textDecorationLine","marginHorizontal","onStepChangeRef","useRef","onCompleteRef","current","prevState","updateStepData","useCallback","stepIndex","data","prev","nextStepData","slice","__DEV__","console","warn","currentStepConfig","onEnter","onExit","nextStep","canProceed","nextStepIndex","navigationProps","extractedProps","assign","step0Data","currentStepData","username","userProfile","email","prevStep","goToStep","canGoBack","CurrentStepComponent","component","updateCurrentStepData","stepProps","props","allStepData","contentStyle","screenContentStyle","paddingBottom","bottom","jsxs","stepContainer","_default","exports"],"sourceRoot":"../../../../src","sources":["ui/components/StepBasedScreen.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/ui/components/Surface.js

@@ -0,0 +1,258 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _theming = require("./theming");
+var _overlay = _interopRequireWildcard(require("./styles/overlay"));
+var _shadow = _interopRequireDefault(require("./styles/shadow"));
+var _forwardRef = require("./utils/forwardRef");
+var _splitStyles = require("./utils/splitStyles");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const MD2Surface = (0, _forwardRef.forwardRef)(({
+  style,
+  theme: overrideTheme,
+  ...rest
+}, ref) => {
+  const {
+    elevation = 4
+  } = _reactNative.StyleSheet.flatten(style) || {};
+  const {
+    dark: isDarkTheme,
+    mode,
+    colors
+  } = (0, _theming.useInternalTheme)(overrideTheme);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    ref: ref,
+    ...rest,
+    style: [{
+      backgroundColor: isDarkTheme && mode === 'adaptive' ? (0, _overlay.default)(elevation, colors?.surface) : colors?.surface
+    }, elevation ? (0, _shadow.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.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.forwardRef)(({
+  elevation,
+  style,
+  backgroundColor,
+  testID,
+  children,
+  mode = 'elevated',
+  container,
+  ...props
+}, ref) => {
+  const [outerLayerViewStyles, innerLayerViewStyles] = React.useMemo(() => {
+    const flattenedStyles = _reactNative.StyleSheet.flatten(style) || {};
+    const [filteredStyles, outerLayerStyles, borderRadiusStyles] = (0, _splitStyles.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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    ref: ref,
+    style: outerLayerViewStyles,
+    testID: `${testID}-outer-layer`,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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.forwardRef)(({
+  elevation = 1,
+  children,
+  theme: overridenTheme,
+  style,
+  testID = 'surface',
+  mode = 'elevated',
+  ...props
+}, ref) => {
+  const theme = (0, _theming.useInternalTheme)(overridenTheme);
+  if (!theme.isV3) return /*#__PURE__*/(0, _jsxRuntime.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.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 (_reactNative.Platform.OS === 'web') {
+    const {
+      pointerEvents = 'auto'
+    } = props;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      ...props,
+      pointerEvents: pointerEvents,
+      ref: ref,
+      testID: testID,
+      style: [{
+        backgroundColor
+      }, elevation && isElevated ? (0, _shadow.default)(elevation, theme.isV3) : null, style],
+      children: children
+    });
+  }
+  if (_reactNative.Platform.OS === 'android') {
+    const elevationLevel = [0, 3, 6, 9, 12, 15];
+    const getElevationAndroid = () => {
+      if ((0, _overlay.isAnimatedValue)(elevation)) {
+        return elevation.interpolate({
+          inputRange,
+          outputRange: elevationLevel
+        });
+      }
+      return elevationLevel[elevation];
+    };
+    const {
+      margin,
+      padding,
+      transform,
+      borderRadius
+    } = _reactNative.StyleSheet.flatten(style) || {};
+    const outerLayerStyles = {
+      margin,
+      padding,
+      transform,
+      borderRadius
+    };
+    const sharedStyle = [{
+      backgroundColor
+    }, style];
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      ...props,
+      testID: testID,
+      ref: ref,
+      style: [{
+        backgroundColor,
+        transform
+      }, outerLayerStyles, sharedStyle, isElevated && {
+        elevation: getElevationAndroid()
+      }],
+      children: children
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SurfaceIOS, {
+    ...props,
+    ref: ref,
+    elevation: elevation,
+    backgroundColor: backgroundColor,
+    style: style,
+    testID: testID,
+    mode: mode,
+    children: children
+  });
+});
+var _default = exports.default = Surface;
+//# sourceMappingURL=Surface.js.map