@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/components/HelperText.js

@@ -0,0 +1,119 @@
+"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 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const styles_1 = require("../styles");
+// Helper function for text color
+const getTextColor = (colors, disabled, type) => {
+    if (type === 'error') {
+        return colors.error;
+    }
+    if (disabled) {
+        return `${colors.secondaryText}80`; // Add opacity
+    }
+    return colors.secondaryText;
+};
+/**
+ * Helper text is used in conjunction with input elements to provide additional hints for the user.
+ */
+const HelperText = ({ style, type = 'info', visible = true, theme: themeProp = 'light', onLayout, padding = 'normal', disabled, maxFontSizeMultiplier = 1.5, ...rest }) => {
+    const colors = (0, styles_1.useThemeColors)(themeProp);
+    const { current: shown } = React.useRef(new react_native_1.Animated.Value(visible ? 1 : 0));
+    let { current: textHeight } = React.useRef(0);
+    React.useEffect(() => {
+        if (visible) {
+            // show text
+            react_native_1.Animated.timing(shown, {
+                toValue: 1,
+                duration: 150,
+                useNativeDriver: true,
+            }).start();
+        }
+        else {
+            // hide text
+            react_native_1.Animated.timing(shown, {
+                toValue: 0,
+                duration: 180,
+                useNativeDriver: true,
+            }).start();
+        }
+    }, [visible]);
+    const handleTextLayout = (e) => {
+        onLayout?.(e);
+        textHeight = e.nativeEvent.layout.height;
+    };
+    // Get text color based on type and disabled state
+    const getTextColor = () => {
+        if (type === 'error') {
+            return colors.error;
+        }
+        if (disabled) {
+            return `${colors.secondaryText}80`; // Add opacity
+        }
+        return colors.secondaryText;
+    };
+    const textColor = getTextColor();
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.Text, { onLayout: handleTextLayout, style: [
+            styles.text,
+            padding !== 'none' ? styles.padding : {},
+            {
+                color: textColor,
+                opacity: shown,
+                transform: visible && type === 'error'
+                    ? [
+                        {
+                            translateY: shown.interpolate({
+                                inputRange: [0, 1],
+                                outputRange: [-textHeight / 2, 0],
+                            }),
+                        },
+                    ]
+                    : [],
+            },
+            style,
+        ], maxFontSizeMultiplier: maxFontSizeMultiplier, ...rest, children: rest.children }));
+};
+const styles = react_native_1.StyleSheet.create({
+    text: {
+        fontSize: 12,
+        paddingVertical: 4,
+    },
+    padding: {
+        paddingHorizontal: 12,
+    },
+});
+exports.default = HelperText;

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

@@ -0,0 +1,59 @@
+import type * as React from 'react';
+import { type ImageSourcePropType } from 'react-native';
+import type { ThemeProp } from './types';
+type IconSourceBase = string | ImageSourcePropType;
+export type IconSource = IconSourceBase | Readonly<{
+    source: IconSourceBase;
+    direction: 'rtl' | 'ltr' | 'auto';
+}> | ((props: IconProps & {
+    color: string;
+}) => React.ReactNode);
+type IconProps = {
+    /**
+     * Size of icon.
+     */
+    size: number;
+    allowFontScaling?: boolean;
+    style?: any;
+};
+export declare const isValidIcon: (source: any) => boolean;
+export declare const isEqualIcon: (a: any, b: any) => boolean;
+export type Props = IconProps & {
+    /**
+     * Icon to display.
+     */
+    source: any;
+    /**
+     * Color of the icon.
+     */
+    color?: string;
+    /**
+     * TestID used for testing purposes
+     */
+    testID?: string;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+};
+/**
+ * An icon component which renders icon from vector library.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Icon, MD3Colors } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <Icon
+ *     source="camera"
+ *     color={MD3Colors.error50}
+ *     size={20}
+ *   />
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+declare const Icon: ({ source, color, size, theme: themeOverrides, testID, ...rest }: Props) => any;
+export default Icon;

package/src/ui/components/Icon.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isEqualIcon = exports.isValidIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const vector_icons_1 = require("@expo/vector-icons");
+const theming_1 = require("./theming");
+// MaterialCommunityIcon accessibility props - simplified
+const accessibilityProps = {};
+const isImageSource = (source) => 
+// source is an object with uri
+(typeof source === 'object' &&
+    source !== null &&
+    Object.prototype.hasOwnProperty.call(source, 'uri') &&
+    typeof source.uri === 'string') ||
+    // source is a module, e.g. - require('image')
+    typeof source === 'number' ||
+    // image url on web
+    (react_native_1.Platform.OS === 'web' &&
+        typeof source === 'string' &&
+        (source.startsWith('data:image') ||
+            /\.(bmp|jpg|jpeg|png|gif|svg)$/.test(source)));
+const getIconId = (source) => {
+    if (typeof source === 'object' &&
+        source !== null &&
+        Object.prototype.hasOwnProperty.call(source, 'uri') &&
+        typeof source.uri === 'string') {
+        return source.uri;
+    }
+    return source;
+};
+const isValidIcon = (source) => typeof source === 'string' ||
+    typeof source === 'function' ||
+    isImageSource(source);
+exports.isValidIcon = isValidIcon;
+const isEqualIcon = (a, b) => a === b || getIconId(a) === getIconId(b);
+exports.isEqualIcon = isEqualIcon;
+/**
+ * An icon component which renders icon from vector library.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Icon, MD3Colors } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <Icon
+ *     source="camera"
+ *     color={MD3Colors.error50}
+ *     size={20}
+ *   />
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+const Icon = ({ source, color, size, theme: themeOverrides, testID, ...rest }) => {
+    const theme = (0, theming_1.useInternalTheme)(themeOverrides);
+    const direction = typeof source === 'object' && source.direction && source.source
+        ? source.direction === 'auto'
+            ? react_native_1.I18nManager.getConstants().isRTL
+                ? 'rtl'
+                : 'ltr'
+            : source.direction
+        : null;
+    const s = typeof source === 'object' && source.direction && source.source
+        ? source.source
+        : source;
+    const iconColor = color || (theme.isV3 ? theme.colors.onSurface : (theme.colors.text || theme.colors.onSurface));
+    if (isImageSource(s)) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.Image, { ...rest, testID: testID, source: s, style: [
+                {
+                    transform: [{ scaleX: direction === 'rtl' ? -1 : 1 }],
+                },
+                {
+                    width: size,
+                    height: size,
+                    tintColor: color,
+                    resizeMode: "contain",
+                },
+            ], ...accessibilityProps, accessibilityIgnoresInvertColors: true }));
+    }
+    if (typeof s === 'string') {
+        // String icons - use MaterialCommunityIcons from @expo/vector-icons
+        // This is the default icon library used by react-native-paper
+        const styleArray = Array.isArray(rest.style)
+            ? rest.style
+            : rest.style
+                ? [rest.style]
+                : [];
+        return ((0, jsx_runtime_1.jsx)(vector_icons_1.MaterialCommunityIcons
+        // biome-ignore lint/suspicious/noExplicitAny: MaterialCommunityIcons name expects literal union; dynamic icon names require cast
+        , { 
+            // biome-ignore lint/suspicious/noExplicitAny: MaterialCommunityIcons name expects literal union; dynamic icon names require cast
+            name: s, size: size, color: iconColor, style: [
+                {
+                    transform: [{ scaleX: direction === 'rtl' ? -1 : 1 }],
+                },
+                ...styleArray,
+                // biome-ignore lint/suspicious/noExplicitAny: style array type incompatibility with MaterialCommunityIcons style prop
+            ], testID: testID, ...accessibilityProps }));
+    }
+    if (typeof s === 'function') {
+        return s({ color: iconColor, size, direction, testID });
+    }
+    return null;
+};
+exports.default = Icon;

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

@@ -0,0 +1,98 @@
+import type * as React from 'react';
+import { type GestureResponderEvent, type StyleProp, type ViewStyle, type View, type Animated, type ColorValue } from 'react-native';
+import type { $RemoveChildren, ThemeProp } from "../types";
+import { type IconSource } from '../Icon';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
+type IconButtonMode = 'outlined' | 'contained' | 'contained-tonal';
+export type Props = Omit<$RemoveChildren<typeof TouchableRipple>, 'style'> & {
+    /**
+     * Icon to display.
+     */
+    icon: IconSource;
+    /**
+     * @supported Available in v5.x with theme version 3
+     * Mode of the icon button. By default there is no specified mode - only pressable icon will be rendered.
+     */
+    mode?: IconButtonMode;
+    /**
+     * @renamed Renamed from 'color' to 'iconColor' in v5.x
+     * Color of the icon.
+     */
+    iconColor?: string;
+    /**
+     * Background color of the icon container.
+     */
+    containerColor?: string;
+    /**
+     * Color of the ripple effect.
+     */
+    rippleColor?: ColorValue;
+    /**
+     * @supported Available in v5.x with theme version 3
+     * Whether icon button is selected. A selected button receives alternative combination of icon and container colors.
+     */
+    selected?: boolean;
+    /**
+     * Size of the icon.
+     */
+    size?: number;
+    /**
+     * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch.
+     */
+    disabled?: boolean;
+    /**
+     * Whether an icon change is animated.
+     */
+    animated?: boolean;
+    /**
+     * Accessibility label for the button. This is read by the screen reader when the user taps the button.
+     */
+    accessibilityLabel?: string;
+    /**
+     * Style of button's inner content.
+     * Use this prop to apply custom height and width or to set a custom padding`.
+     */
+    contentStyle?: StyleProp<ViewStyle>;
+    /**
+     * Function to execute on press.
+     */
+    onPress?: (e: GestureResponderEvent) => void;
+    style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    ref?: React.RefObject<View>;
+    /**
+     * TestID used for testing purposes
+     */
+    testID?: string;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+    /**
+     * Whether to show a loading indicator.
+     */
+    loading?: boolean;
+};
+/**
+ * An icon button is a button which displays only an icon without a label.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { IconButton, MD3Colors } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <IconButton
+ *     icon="camera"
+ *     iconColor={MD3Colors.error50}
+ *     size={20}
+ *     onPress={() => console.log('Pressed')}
+ *   />
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ *
+ * @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
+ */
+declare const IconButton: import("../utils/forwardRef").ForwardRefComponent<View, Props>;
+export default IconButton;

package/src/ui/components/IconButton/IconButton.js

@@ -0,0 +1,90 @@
+"use strict";
+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_native_1 = require("react-native");
+const utils_1 = require("./utils");
+const theming_1 = require("../theming");
+const forwardRef_1 = require("../utils/forwardRef");
+const bloom_1 = require("@oxyhq/bloom");
+const CrossFadeIcon_1 = __importDefault(require("../CrossFadeIcon"));
+const Icon_1 = __importDefault(require("../Icon"));
+const Surface_1 = __importDefault(require("../Surface"));
+const TouchableRipple_1 = __importDefault(require("../TouchableRipple/TouchableRipple"));
+const PADDING = 8;
+/**
+ * An icon button is a button which displays only an icon without a label.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { IconButton, MD3Colors } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <IconButton
+ *     icon="camera"
+ *     iconColor={MD3Colors.error50}
+ *     size={20}
+ *     onPress={() => console.log('Pressed')}
+ *   />
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ *
+ * @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
+ */
+const IconButton = (0, forwardRef_1.forwardRef)(({ icon, iconColor: customIconColor, containerColor: customContainerColor, rippleColor: customRippleColor, size = 24, accessibilityLabel, disabled, onPress, selected = false, animated = false, mode, style, theme: themeOverrides, testID = 'icon-button', loading = false, contentStyle, ...rest }, ref) => {
+    const theme = (0, theming_1.useInternalTheme)(themeOverrides);
+    const { isV3 } = theme;
+    const IconComponent = animated ? CrossFadeIcon_1.default : Icon_1.default;
+    const { iconColor, rippleColor, backgroundColor, borderColor } = (0, utils_1.getIconButtonColor)({
+        theme,
+        disabled,
+        selected,
+        mode,
+        customIconColor,
+        customContainerColor,
+        customRippleColor,
+    });
+    const buttonSize = isV3 ? size + 2 * PADDING : size * 1.5;
+    const { borderWidth = isV3 && mode === 'outlined' && !selected ? 1 : 0, borderRadius = buttonSize / 2, } = (react_native_1.StyleSheet.flatten(style) || {});
+    const borderStyles = {
+        borderWidth,
+        borderRadius,
+        borderColor,
+    };
+    return ((0, jsx_runtime_1.jsx)(Surface_1.default, { ref: ref, testID: `${testID}-container`, style: [
+            {
+                backgroundColor,
+                width: buttonSize,
+                height: buttonSize,
+            },
+            styles.container,
+            borderStyles,
+            !isV3 && disabled && styles.disabled,
+            style,
+        ], container: true, ...(isV3 && { elevation: 0 }), children: (0, jsx_runtime_1.jsx)(TouchableRipple_1.default, { borderless: true, centered: true, onPress: onPress, rippleColor: rippleColor, accessibilityLabel: accessibilityLabel, style: [styles.touchable, contentStyle], 
+            // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
+            accessibilityTraits: disabled ? ['button', 'disabled'] : 'button', accessibilityComponentType: "button", accessibilityRole: "button", accessibilityState: { disabled }, disabled: disabled, hitSlop: TouchableRipple_1.default.supported
+                ? { top: 10, left: 10, bottom: 10, right: 10 }
+                : { top: 6, left: 6, bottom: 6, right: 6 }, testID: testID, ...rest, children: loading ? ((0, jsx_runtime_1.jsx)(bloom_1.Loading, { iconSize: size, color: iconColor })) : ((0, jsx_runtime_1.jsx)(IconComponent, { color: iconColor, source: icon, size: size })) }) }));
+});
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        overflow: 'hidden',
+        margin: 6,
+        elevation: 0,
+    },
+    touchable: {
+        flexGrow: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    disabled: {
+        opacity: 0.32,
+    },
+});
+exports.default = IconButton;

package/src/ui/components/IconButton/utils.d.ts

@@ -0,0 +1,18 @@
+import type { ColorValue } from 'react-native';
+import type { InternalTheme } from "../types";
+type IconButtonMode = 'outlined' | 'contained' | 'contained-tonal';
+export declare const getIconButtonColor: ({ theme, disabled, mode, selected, customIconColor, customContainerColor, customRippleColor, }: {
+    theme: InternalTheme;
+    disabled?: boolean;
+    selected?: boolean;
+    mode?: IconButtonMode;
+    customIconColor?: string;
+    customContainerColor?: string;
+    customRippleColor?: ColorValue;
+}) => {
+    iconColor: string;
+    backgroundColor: string | undefined;
+    rippleColor: ColorValue;
+    borderColor: string | undefined;
+};
+export {};

package/src/ui/components/IconButton/utils.js

@@ -0,0 +1,119 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getIconButtonColor = void 0;
+const color_1 = __importDefault(require("color"));
+const getBorderColor = ({ theme, disabled, }) => {
+    if (theme.isV3) {
+        if (disabled) {
+            return theme.colors.surfaceDisabled;
+        }
+        return theme.colors.outline;
+    }
+    return undefined;
+};
+const getBackgroundColor = ({ theme, isMode, disabled, selected, customContainerColor, }) => {
+    if (theme.isV3) {
+        if (disabled) {
+            if (isMode('contained') || isMode('contained-tonal')) {
+                return theme.colors.surfaceDisabled;
+            }
+        }
+        if (typeof customContainerColor !== 'undefined') {
+            return customContainerColor;
+        }
+        if (isMode('contained')) {
+            if (selected) {
+                return theme.colors.primary;
+            }
+            return theme.colors.surfaceVariant;
+        }
+        if (isMode('contained-tonal')) {
+            if (selected) {
+                return theme.colors.secondaryContainer;
+            }
+            return theme.colors.surfaceVariant;
+        }
+        if (isMode('outlined')) {
+            if (selected) {
+                return theme.colors.inverseSurface;
+            }
+        }
+    }
+    if (typeof customContainerColor !== 'undefined') {
+        return customContainerColor;
+    }
+    return undefined;
+};
+const getIconColor = ({ theme, isMode, disabled, selected, customIconColor, }) => {
+    if (theme.isV3) {
+        if (disabled) {
+            return theme.colors.onSurfaceDisabled;
+        }
+        if (typeof customIconColor !== 'undefined') {
+            return customIconColor;
+        }
+        if (isMode('contained')) {
+            if (selected) {
+                return theme.colors.onPrimary;
+            }
+            return theme.colors.primary;
+        }
+        if (isMode('contained-tonal')) {
+            if (selected) {
+                return theme.colors.onSecondaryContainer;
+            }
+            return theme.colors.onSurfaceVariant;
+        }
+        if (isMode('outlined')) {
+            if (selected) {
+                return theme.colors.inverseOnSurface;
+            }
+            return theme.colors.onSurfaceVariant;
+        }
+        if (selected) {
+            return theme.colors.primary;
+        }
+        return theme.colors.onSurfaceVariant;
+    }
+    if (typeof customIconColor !== 'undefined') {
+        return customIconColor;
+    }
+    return theme.colors.text || theme.colors.onSurface;
+};
+const getRippleColor = ({ theme, iconColor, customRippleColor, }) => {
+    if (customRippleColor) {
+        return customRippleColor;
+    }
+    if (theme.isV3) {
+        return (0, color_1.default)(iconColor).alpha(0.12).rgb().string();
+    }
+    return (0, color_1.default)(iconColor).alpha(0.32).rgb().string();
+};
+const getIconButtonColor = ({ theme, disabled, mode, selected, customIconColor, customContainerColor, customRippleColor, }) => {
+    const isMode = (modeToCompare) => {
+        return mode === modeToCompare;
+    };
+    const baseIconColorProps = {
+        theme,
+        isMode,
+        disabled,
+        selected,
+    };
+    const iconColor = getIconColor({
+        ...baseIconColorProps,
+        customIconColor,
+    });
+    return {
+        iconColor,
+        backgroundColor: getBackgroundColor({
+            ...baseIconColorProps,
+            customContainerColor,
+        }),
+        rippleColor: getRippleColor({ theme, iconColor, customRippleColor }),
+        borderColor: getBorderColor({ theme, disabled }),
+    };
+};
+exports.getIconButtonColor = getIconButtonColor;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface LoadingStateProps {
+    message?: string;
+    color?: string;
+    size?: 'small' | 'large';
+}
+declare const _default: React.NamedExoticComponent<LoadingStateProps>;
+export default _default;

package/src/ui/components/LoadingState.js

@@ -0,0 +1,29 @@
+"use strict";
+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_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+/**
+ * Reusable loading state component
+ * Provides consistent loading indicators across screens
+ */
+const LoadingState = ({ message, color, size = 'large', }) => {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.container, children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: size, color: color }), message && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.message, color ? { color } : undefined], children: message }))] }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 40,
+        gap: 12,
+    },
+    message: {
+        marginTop: 12,
+        fontSize: 16,
+        textAlign: 'center',
+    },
+});
+exports.default = react_1.default.memo(LoadingState);

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

@@ -0,0 +1,28 @@
+import type React from 'react';
+import type { ViewStyle } from 'react-native';
+interface OxyLogoProps {
+    width?: number;
+    height?: number;
+    style?: ViewStyle;
+    /**
+     * Primary fill color for the logo
+     * If not provided, the theme's primary color will be used
+     */
+    fillColor?: string;
+    /**
+     * Secondary fill color for the inner glow effect
+     * If not provided, a lighter shade of the fillColor will be used
+     */
+    secondaryFillColor?: string;
+    /**
+     * Theme to use for the logo colors
+     * @default 'light'
+     */
+    theme?: 'light' | 'dark';
+}
+/**
+ * SVG logo component for Oxy
+ * This component renders the Oxy logo as an SVG and uses theme colors by default
+ */
+export declare const OxyLogo: React.FC<OxyLogoProps>;
+export default OxyLogo;