@lorikeetai/react-native-sdk 2.2.0-beta.1 → 2.2.0-beta.3

package/dist/voice.js

@@ -1,7 +1,274 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { AccessibilityInfo, Animated, Easing, Image, Linking, Platform, StyleSheet, Text, TouchableOpacity, View, processColor } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import Svg, { Line, Path, SvgUri } from "react-native-svg";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AudioSession, registerGlobals } from "@livekit/react-native";
 import { RemoteAudioTrack, Room, RoomEvent, Track, createLocalAudioTrack } from "livekit-client";
 
+// src/voice/call-icons.tsx
+const Icon = ({ children }) => /* @__PURE__ */ jsx(Svg, {
+	fill: "none",
+	height: 24,
+	viewBox: "0 0 24 24",
+	width: 24,
+	children
+});
+const stroke = (color) => ({
+	stroke: color,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: 2
+});
+const MicIcon = ({ color }) => /* @__PURE__ */ jsxs(Icon, { children: [
+	/* @__PURE__ */ jsx(Path, {
+		d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z",
+		...stroke(color)
+	}),
+	/* @__PURE__ */ jsx(Path, {
+		d: "M19 10v2a7 7 0 0 1-14 0v-2",
+		...stroke(color)
+	}),
+	/* @__PURE__ */ jsx(Line, {
+		x1: "12",
+		x2: "12",
+		y1: "19",
+		y2: "22",
+		...stroke(color)
+	})
+] });
+const MicOffIcon = ({ color }) => /* @__PURE__ */ jsxs(Icon, { children: [
+	/* @__PURE__ */ jsx(Line, {
+		x1: "2",
+		x2: "22",
+		y1: "2",
+		y2: "22",
+		...stroke(color)
+	}),
+	/* @__PURE__ */ jsx(Path, {
+		d: "M18.89 13.23A7.12 7.12 0 0 0 19 12v-2",
+		...stroke(color)
+	}),
+	/* @__PURE__ */ jsx(Path, {
+		d: "M5 10v2a7 7 0 0 0 12 5",
+		...stroke(color)
+	}),
+	/* @__PURE__ */ jsx(Path, {
+		d: "M15 9.34V5a3 3 0 0 0-5.68-1.33",
+		...stroke(color)
+	}),
+	/* @__PURE__ */ jsx(Path, {
+		d: "M9 9v3a3 3 0 0 0 5.12 2.12",
+		...stroke(color)
+	}),
+	/* @__PURE__ */ jsx(Line, {
+		x1: "12",
+		x2: "12",
+		y1: "19",
+		y2: "22",
+		...stroke(color)
+	})
+] });
+const PhoneOffIcon = ({ color }) => /* @__PURE__ */ jsxs(Icon, { children: [/* @__PURE__ */ jsx(Path, {
+	d: "M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.42 19.42 0 0 1-3.33-2.67m-2.67-3.34a19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91",
+	...stroke(color)
+}), /* @__PURE__ */ jsx(Line, {
+	x1: "22",
+	x2: "2",
+	y1: "2",
+	y2: "22",
+	...stroke(color)
+})] });
+const SPEAKER = "M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z";
+const Volume2Icon = ({ color }) => /* @__PURE__ */ jsxs(Icon, { children: [
+	/* @__PURE__ */ jsx(Path, {
+		d: SPEAKER,
+		...stroke(color)
+	}),
+	/* @__PURE__ */ jsx(Path, {
+		d: "M16 9a5 5 0 0 1 0 6",
+		...stroke(color)
+	}),
+	/* @__PURE__ */ jsx(Path, {
+		d: "M19.364 18.364a9 9 0 0 0 0-12.728",
+		...stroke(color)
+	})
+] });
+const VolumeXIcon = ({ color }) => /* @__PURE__ */ jsxs(Icon, { children: [
+	/* @__PURE__ */ jsx(Path, {
+		d: SPEAKER,
+		...stroke(color)
+	}),
+	/* @__PURE__ */ jsx(Line, {
+		x1: "22",
+		x2: "16",
+		y1: "9",
+		y2: "15",
+		...stroke(color)
+	}),
+	/* @__PURE__ */ jsx(Line, {
+		x1: "16",
+		x2: "22",
+		y1: "9",
+		y2: "15",
+		...stroke(color)
+	})
+] });
+/** The design system's `LorikeetLogoMark`. `color` paints the whole mark in one colour. */
+const LorikeetLogoMark = ({ color, size }) => /* @__PURE__ */ jsxs(Svg, {
+	fill: "none",
+	height: size,
+	viewBox: "-45 -20 274 274",
+	width: size,
+	children: [
+		/* @__PURE__ */ jsx(Path, {
+			d: "M112.661 179.008C152.133 154.751 173.914 119.21 161.82 96.8859L81.0549 140.608L10.1309 179.008H112.667H112.661Z",
+			fill: color !== null && color !== void 0 ? color : "#FF29E5"
+		}),
+		/* @__PURE__ */ jsx(Path, {
+			d: "M0.242676 184.284C0.242676 211.383 41.3656 233.356 92.0903 233.356C142.815 233.356 183.938 211.389 183.938 184.29H0.242676V184.284Z",
+			fill: color !== null && color !== void 0 ? color : "#4348DC"
+		}),
+		/* @__PURE__ */ jsx(Path, {
+			d: "M83.4604 133.156C84.7013 131.069 85.9155 128.94 87.0924 126.763C111.185 82.1465 111.376 35.539 87.5131 22.6682L43.8872 103.459L4.88379 175.692L83.4604 133.156Z",
+			fill: color !== null && color !== void 0 ? color : "#EA4921"
+		}),
+		/* @__PURE__ */ jsx(Path, {
+			d: "M49.0555 82.6487C46.4408 36.5522 25.5864 0.643799 0.242676 0.643799V92.4482V173.048L49.0555 82.6487Z",
+			fill: color !== null && color !== void 0 ? color : "#FACB12"
+		})
+	]
+});
+
+// src/voice/call-theme.ts
+const LIGHT = {
+	accent: "hsl(233, 69%, 55%)",
+	card: "hsl(240, 3%, 97%)",
+	control: "hsl(0, 0%, 100%)",
+	inverseText: "hsl(0, 0%, 100%)",
+	ring: "hsl(240, 31%, 94%)",
+	shell: "hsl(0, 0%, 100%)",
+	subtleText: "hsl(240, 3%, 31%)",
+	text: "hsl(240, 3%, 4%)"
+};
+const DARK = {
+	accent: "hsl(233, 68%, 65%)",
+	card: "hsl(240, 3%, 8%)",
+	control: "hsl(240, 3%, 4%)",
+	inverseText: "hsl(240, 0%, 2%)",
+	ring: "hsl(233, 69%, 15%)",
+	shell: "hsl(240, 0%, 2%)",
+	subtleText: "hsl(240, 3%, 61%)",
+	text: "hsl(240, 3%, 81%)"
+};
+const paintable = (colour) => {
+	var _processColor;
+	return colour !== void 0 && ((_processColor = processColor(colour)) !== null && _processColor !== void 0 ? _processColor : void 0) !== void 0 ? colour : void 0;
+};
+const hsl = (components) => components ? paintable(`hsl(${components})`) : void 0;
+/** `generateVoiceWidgetThemeStyle` from the web Voice Widget, for React Native. */
+function callColours(theme) {
+	var _hsl, _ref, _paintable, _hsl2, _hsl3, _ref2, _paintable2, _hsl4;
+	const base = (theme === null || theme === void 0 ? void 0 : theme.colorMode) === "dark" ? DARK : LIGHT;
+	return {
+		accent: (_hsl = hsl(theme === null || theme === void 0 ? void 0 : theme.brandColor)) !== null && _hsl !== void 0 ? _hsl : base.accent,
+		card: (_ref = (_paintable = paintable(theme === null || theme === void 0 ? void 0 : theme.headerBackground)) !== null && _paintable !== void 0 ? _paintable : hsl(theme === null || theme === void 0 ? void 0 : theme.brandAccentColor)) !== null && _ref !== void 0 ? _ref : base.card,
+		control: base.control,
+		inverseText: (_hsl2 = hsl(theme === null || theme === void 0 ? void 0 : theme.inverseTextColor)) !== null && _hsl2 !== void 0 ? _hsl2 : base.inverseText,
+		ring: (_hsl3 = hsl(theme === null || theme === void 0 ? void 0 : theme.subtleBrandColor)) !== null && _hsl3 !== void 0 ? _hsl3 : base.ring,
+		shell: (_ref2 = (_paintable2 = paintable(theme === null || theme === void 0 ? void 0 : theme.background)) !== null && _paintable2 !== void 0 ? _paintable2 : hsl(theme === null || theme === void 0 ? void 0 : theme.backgroundColor)) !== null && _ref2 !== void 0 ? _ref2 : base.shell,
+		subtleText: base.subtleText,
+		text: (_hsl4 = hsl(theme === null || theme === void 0 ? void 0 : theme.textColor)) !== null && _hsl4 !== void 0 ? _hsl4 : base.text
+	};
+}
+
+// src/voice/call-wave.tsx
+const BARS = 24;
+const PHASES = 8;
+const CYCLE_MS = 1440;
+const STAGGER_MS = 90;
+const MIN_HEIGHT = 8;
+const MAX_HEIGHT = 38;
+const STILL_HEIGHT = 20;
+const triangle = (x) => 1 - Math.abs(2 * x - 1);
+/**
+* Where one bar's height peaks and troughs as the loop runs from 0 to 1, so a
+* single animated value drives every phase.
+*/
+const phaseKeyframes = (phase) => {
+	const frames = /* @__PURE__ */ new Map([[0, triangle(phase)], [1, triangle(phase)]]);
+	for (const x of [0, .5]) frames.set((x - phase + 1) % 1, triangle(x));
+	const sorted = [...frames.entries()].sort(([a], [b]) => a - b);
+	return {
+		inputRange: sorted.map(([at]) => at),
+		outputRange: sorted.map(([, height]) => (MIN_HEIGHT + height * 30) / MAX_HEIGHT)
+	};
+};
+const useReduceMotion = () => {
+	const [reduceMotion, setReduceMotion] = useState(false);
+	useEffect(() => {
+		let mounted = true;
+		AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {
+			if (mounted) setReduceMotion(enabled);
+		});
+		const subscription = AccessibilityInfo.addEventListener("reduceMotionChanged", setReduceMotion);
+		return () => {
+			mounted = false;
+			subscription.remove();
+		};
+	}, []);
+	return reduceMotion;
+};
+function CallWave({ active, color }) {
+	const reduceMotion = useReduceMotion();
+	const progress = useRef(new Animated.Value(0)).current;
+	const animate = active && !reduceMotion;
+	useEffect(() => {
+		if (!animate) return;
+		const loop = Animated.loop(Animated.timing(progress, {
+			duration: CYCLE_MS,
+			easing: Easing.linear,
+			toValue: 1,
+			useNativeDriver: true
+		}));
+		loop.start();
+		return () => {
+			loop.stop();
+			progress.setValue(0);
+		};
+	}, [animate, progress]);
+	const scales = useMemo(() => Array.from({ length: PHASES }, (_, index) => progress.interpolate(phaseKeyframes(index * STAGGER_MS / CYCLE_MS))), [progress]);
+	const stillScale = (active ? STILL_HEIGHT : MIN_HEIGHT) / MAX_HEIGHT;
+	return /* @__PURE__ */ jsx(View, {
+		accessibilityElementsHidden: true,
+		importantForAccessibility: "no-hide-descendants",
+		style: styles$1.wave,
+		children: Array.from({ length: BARS }, (_, index) => {
+			var _scales;
+			return /* @__PURE__ */ jsx(Animated.View, { style: [
+				styles$1.bar,
+				{ backgroundColor: color },
+				{ transform: [{ scaleY: animate ? (_scales = scales[index % PHASES]) !== null && _scales !== void 0 ? _scales : stillScale : stillScale }] }
+			] }, index);
+		})
+	});
+}
+const styles$1 = StyleSheet.create({
+	bar: {
+		borderRadius: 999,
+		height: MAX_HEIGHT,
+		opacity: .45,
+		width: 3
+	},
+	wave: {
+		alignItems: "center",
+		flexDirection: "row",
+		gap: 3,
+		height: 48,
+		justifyContent: "center"
+	}
+});
+
 // src/voice/use-lorikeet-call.ts
 /** The server's `LORIKEET_AGENT_IDENTITY`. The call ends when it leaves. */
 const LORIKEET_AGENT_IDENTITY = "lorikeet-agent";
@@ -170,5 +437,332 @@ function useLorikeetCall({ getSession, onError }) {
 	};
 }
 
-export { useLorikeetCall };
+// src/voice/lorikeet-call-view.tsx
+const ERROR_MESSAGES = {
+	failed: "The call could not start. Please try again.",
+	microphone_denied: "Allow microphone access, then try again.",
+	microphone_system_denied: "Enable microphone access for your browser in system settings.",
+	not_available: "We can't start a call on this page. Please try again later."
+};
+const errorHeading = (error) => error === "not_available" ? "Calling isn't available right now" : "Something went wrong";
+const formatDuration = (seconds) => `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`;
+const statusLabel = (state, seconds) => {
+	switch (state) {
+		case "active": return formatDuration(seconds);
+		case "starting": return "Starting call";
+		case "connecting": return "Connecting";
+		case "error":
+		case "idle": return;
+	}
+};
+/** What a screen reader hears when the call state changes. The clock is left out. */
+const announcementFor = ({ ended, error, state }) => {
+	switch (state) {
+		case "active": return "Listening";
+		case "error": return `${errorHeading(error !== null && error !== void 0 ? error : "failed")}. ${ERROR_MESSAGES[error !== null && error !== void 0 ? error : "failed"]}`;
+		case "idle": return ended ? "Call ended" : void 0;
+		case "starting":
+		case "connecting": return statusLabel(state, 0);
+	}
+};
+const useCallSeconds = (state) => {
+	const [seconds, setSeconds] = useState(0);
+	useEffect(() => {
+		if (state !== "active") {
+			setSeconds(0);
+			return;
+		}
+		const interval = setInterval(() => setSeconds((value) => value + 1), 1e3);
+		return () => clearInterval(interval);
+	}, [state]);
+	return seconds;
+};
+function CallLogo({ logoUrl }) {
+	if (!logoUrl) return /* @__PURE__ */ jsx(LorikeetLogoMark, { size: 48 });
+	if (/\.svg($|[?#])/i.test(logoUrl)) return /* @__PURE__ */ jsx(SvgUri, {
+		height: 48,
+		uri: logoUrl,
+		width: 48
+	});
+	return /* @__PURE__ */ jsx(Image, {
+		resizeMode: "contain",
+		source: { uri: logoUrl },
+		style: styles.logo
+	});
+}
+function CallMessage({ call, colours }) {
+	if (call.state === "error") {
+		var _call$error;
+		const error = (_call$error = call.error) !== null && _call$error !== void 0 ? _call$error : "failed";
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Text, {
+			style: [styles.bold, { color: colours.text }],
+			children: errorHeading(error)
+		}), /* @__PURE__ */ jsx(Text, {
+			style: [styles.body, { color: colours.subtleText }],
+			children: ERROR_MESSAGES[error]
+		})] });
+	}
+	if (call.state === "active") return /* @__PURE__ */ jsx(Text, {
+		style: [styles.body, { color: colours.text }],
+		children: "Listening"
+	});
+	if (call.ended) return /* @__PURE__ */ jsxs(View, {
+		style: styles.marker,
+		children: [
+			/* @__PURE__ */ jsx(View, { style: [styles.markerRule, { backgroundColor: colours.subtleText }] }),
+			/* @__PURE__ */ jsx(Text, {
+				style: [styles.small, { color: colours.subtleText }],
+				children: "Call ended"
+			}),
+			/* @__PURE__ */ jsx(View, { style: [styles.markerRule, { backgroundColor: colours.subtleText }] })
+		]
+	});
+	return null;
+}
+function RoundButton({ children, disabled = false, label, onPress, style }) {
+	return /* @__PURE__ */ jsx(TouchableOpacity, {
+		accessibilityLabel: label,
+		accessibilityRole: "button",
+		accessibilityState: { disabled },
+		disabled,
+		onPress,
+		style: [
+			styles.roundButton,
+			style,
+			disabled && styles.disabled
+		],
+		children
+	});
+}
+function CallActions({ call, colours }) {
+	if (call.state === "idle" || call.state === "error") return /* @__PURE__ */ jsx(TouchableOpacity, {
+		accessibilityRole: "button",
+		onPress: () => void call.start(),
+		style: [styles.startButton, { backgroundColor: colours.accent }],
+		children: /* @__PURE__ */ jsx(Text, {
+			style: [styles.bold, { color: colours.inverseText }],
+			children: "Start call"
+		})
+	});
+	const inactive = call.state !== "active";
+	const control = { backgroundColor: colours.control };
+	return /* @__PURE__ */ jsxs(View, {
+		style: styles.controls,
+		children: [
+			/* @__PURE__ */ jsx(RoundButton, {
+				disabled: inactive,
+				label: call.microphoneMuted ? "Unmute microphone" : "Mute microphone",
+				onPress: () => call.setMicrophoneMuted(!call.microphoneMuted),
+				style: control,
+				children: call.microphoneMuted ? /* @__PURE__ */ jsx(MicOffIcon, { color: colours.accent }) : /* @__PURE__ */ jsx(MicIcon, { color: colours.accent })
+			}),
+			/* @__PURE__ */ jsx(RoundButton, {
+				label: "End call",
+				onPress: call.end,
+				style: { backgroundColor: colours.accent },
+				children: /* @__PURE__ */ jsx(PhoneOffIcon, { color: colours.inverseText })
+			}),
+			/* @__PURE__ */ jsx(RoundButton, {
+				disabled: inactive,
+				label: call.speakerMuted ? "Unmute speaker" : "Mute speaker",
+				onPress: () => call.setSpeakerMuted(!call.speakerMuted),
+				style: control,
+				children: call.speakerMuted ? /* @__PURE__ */ jsx(VolumeXIcon, { color: colours.accent }) : /* @__PURE__ */ jsx(Volume2Icon, { color: colours.accent })
+			})
+		]
+	});
+}
+function PoweredBy({ color }) {
+	return /* @__PURE__ */ jsxs(TouchableOpacity, {
+		accessibilityLabel: "Powered by Lorikeet",
+		accessibilityRole: "link",
+		onPress: () => void Linking.openURL("https://lorikeetcx.ai"),
+		style: styles.poweredBy,
+		children: [/* @__PURE__ */ jsx(LorikeetLogoMark, {
+			color,
+			size: 16
+		}), /* @__PURE__ */ jsx(Text, {
+			style: [styles.small, { color }],
+			children: "Powered by Lorikeet"
+		})]
+	});
+}
+/** The web Voice Widget's call screen and copy, on `useLorikeetCall`. */
+function LorikeetCallView({ customisations, getSession, onError, style }) {
+	const call = useLorikeetCall({
+		getSession,
+		onError
+	});
+	const seconds = useCallSeconds(call.state);
+	const colours = callColours(customisations === null || customisations === void 0 ? void 0 : customisations.theme);
+	const status = statusLabel(call.state, seconds);
+	const announcement = announcementFor(call);
+	const liveRegion = Platform.OS === "android" ? "polite" : void 0;
+	useEffect(() => {
+		if (Platform.OS === "ios" && announcement) AccessibilityInfo.announceForAccessibilityWithOptions(announcement, { queue: true });
+	}, [announcement]);
+	return /* @__PURE__ */ jsx(SafeAreaView, {
+		style: [
+			styles.shell,
+			{ backgroundColor: colours.shell },
+			style
+		],
+		children: /* @__PURE__ */ jsxs(View, {
+			style: styles.ringed,
+			children: [/* @__PURE__ */ jsx(View, { style: [
+				StyleSheet.absoluteFill,
+				styles.ring,
+				{ backgroundColor: colours.ring }
+			] }), /* @__PURE__ */ jsxs(View, {
+				style: [styles.card, {
+					backgroundColor: colours.card,
+					shadowColor: colours.accent
+				}],
+				children: [
+					/* @__PURE__ */ jsxs(View, {
+						style: styles.identity,
+						children: [
+							/* @__PURE__ */ jsx(CallLogo, { logoUrl: customisations === null || customisations === void 0 ? void 0 : customisations.logoUrl }),
+							/* @__PURE__ */ jsx(Text, {
+								accessibilityRole: "header",
+								numberOfLines: 1,
+								style: [styles.bold, { color: colours.text }],
+								children: (customisations === null || customisations === void 0 ? void 0 : customisations.title) || "Lorikeet AI Agent"
+							}),
+							/* @__PURE__ */ jsx(Text, {
+								accessibilityElementsHidden: !status,
+								accessibilityLiveRegion: call.state === "active" ? "none" : liveRegion,
+								style: [styles.small, { color: colours.text }],
+								children: status
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(CallWave, {
+						active: call.state === "active",
+						color: colours.accent
+					}),
+					/* @__PURE__ */ jsx(View, {
+						accessibilityLiveRegion: liveRegion,
+						style: styles.message,
+						children: /* @__PURE__ */ jsx(CallMessage, {
+							call,
+							colours
+						})
+					}),
+					/* @__PURE__ */ jsxs(View, {
+						style: styles.footer,
+						children: [/* @__PURE__ */ jsx(CallActions, {
+							call,
+							colours
+						}), (customisations === null || customisations === void 0 ? void 0 : customisations.useSubtleBranding) ? null : /* @__PURE__ */ jsx(PoweredBy, { color: colours.subtleText })]
+					})
+				]
+			})]
+		})
+	});
+}
+const styles = StyleSheet.create({
+	body: {
+		fontSize: 14,
+		lineHeight: 20,
+		textAlign: "center"
+	},
+	bold: {
+		fontSize: 14,
+		fontWeight: "600",
+		lineHeight: 20,
+		textAlign: "center"
+	},
+	card: {
+		alignItems: "center",
+		borderColor: "rgba(255, 255, 255, 0.8)",
+		borderRadius: 20,
+		borderWidth: 1,
+		elevation: 8,
+		flex: 1,
+		justifyContent: "space-between",
+		paddingHorizontal: 24,
+		paddingVertical: 32,
+		shadowOffset: {
+			height: 18,
+			width: 0
+		},
+		shadowOpacity: .28,
+		shadowRadius: 17
+	},
+	controls: {
+		alignItems: "center",
+		flexDirection: "row",
+		gap: 12
+	},
+	disabled: { opacity: .5 },
+	footer: {
+		alignItems: "center",
+		gap: 16
+	},
+	identity: {
+		alignItems: "center",
+		gap: 8,
+		maxWidth: 320
+	},
+	logo: {
+		height: 48,
+		width: 48
+	},
+	marker: {
+		alignItems: "center",
+		flexDirection: "row",
+		gap: 8,
+		width: "100%"
+	},
+	markerRule: {
+		flex: 1,
+		height: StyleSheet.hairlineWidth,
+		opacity: .4
+	},
+	message: {
+		gap: 4,
+		justifyContent: "center",
+		maxWidth: 320,
+		minHeight: 96,
+		width: "100%"
+	},
+	poweredBy: {
+		alignItems: "center",
+		flexDirection: "row",
+		gap: 2
+	},
+	ring: {
+		borderRadius: 27,
+		opacity: .8
+	},
+	ringed: {
+		flex: 1,
+		padding: 7
+	},
+	roundButton: {
+		alignItems: "center",
+		borderRadius: 24,
+		height: 48,
+		justifyContent: "center",
+		width: 48
+	},
+	shell: {
+		flex: 1,
+		padding: 16
+	},
+	small: {
+		fontSize: 12,
+		lineHeight: 16,
+		textAlign: "center"
+	},
+	startButton: {
+		borderRadius: 8,
+		justifyContent: "center",
+		minHeight: 40,
+		paddingHorizontal: 16
+	}
+});
+
+export { LorikeetCallView, useLorikeetCall };
 //# sourceMappingURL=voice.js.map