@tavus/cvi-ui 0.0.1-beta.3 → 0.0.1-beta.4

package/dist/index.js

@@ -1489,11 +1489,11 @@ function requireSnippet () {
 	return snippet;
 }
 
-var type$s;
+var type$u;
 var hasRequiredType;
 
 function requireType () {
-	if (hasRequiredType) return type$s;
+	if (hasRequiredType) return type$u;
 	hasRequiredType = 1;
 
 	var YAMLException = requireException();
@@ -1559,8 +1559,8 @@ function requireType () {
 	  }
 	}
 
-	type$s = Type;
-	return type$s;
+	type$u = Type;
+	return type$u;
 }
 
 var schema;
@@ -217864,7 +217864,7 @@ const wrapAnsi256 = (offset = 0) => code => `\u001B[${38 + offset};5;${code}m`;
 
 const wrapAnsi16m = (offset = 0) => (red, green, blue) => `\u001B[${38 + offset};2;${red};${green};${blue}m`;
 
-const styles$t = {
+const styles$v = {
 	modifier: {
 		reset: [0, 0],
 		// 21 isn't widely supported and 22 does the same thing
@@ -217923,49 +217923,49 @@ const styles$t = {
 	},
 };
 
-Object.keys(styles$t.modifier);
-const foregroundColorNames = Object.keys(styles$t.color);
-const backgroundColorNames = Object.keys(styles$t.bgColor);
+Object.keys(styles$v.modifier);
+const foregroundColorNames = Object.keys(styles$v.color);
+const backgroundColorNames = Object.keys(styles$v.bgColor);
 [...foregroundColorNames, ...backgroundColorNames];
 
 function assembleStyles() {
 	const codes = new Map();
 
-	for (const [groupName, group] of Object.entries(styles$t)) {
+	for (const [groupName, group] of Object.entries(styles$v)) {
 		for (const [styleName, style] of Object.entries(group)) {
-			styles$t[styleName] = {
+			styles$v[styleName] = {
 				open: `\u001B[${style[0]}m`,
 				close: `\u001B[${style[1]}m`,
 			};
 
-			group[styleName] = styles$t[styleName];
+			group[styleName] = styles$v[styleName];
 
 			codes.set(style[0], style[1]);
 		}
 
-		Object.defineProperty(styles$t, groupName, {
+		Object.defineProperty(styles$v, groupName, {
 			value: group,
 			enumerable: false,
 		});
 	}
 
-	Object.defineProperty(styles$t, 'codes', {
+	Object.defineProperty(styles$v, 'codes', {
 		value: codes,
 		enumerable: false,
 	});
 
-	styles$t.color.close = '\u001B[39m';
-	styles$t.bgColor.close = '\u001B[49m';
+	styles$v.color.close = '\u001B[39m';
+	styles$v.bgColor.close = '\u001B[49m';
 
-	styles$t.color.ansi = wrapAnsi16();
-	styles$t.color.ansi256 = wrapAnsi256();
-	styles$t.color.ansi16m = wrapAnsi16m();
-	styles$t.bgColor.ansi = wrapAnsi16(ANSI_BACKGROUND_OFFSET);
-	styles$t.bgColor.ansi256 = wrapAnsi256(ANSI_BACKGROUND_OFFSET);
-	styles$t.bgColor.ansi16m = wrapAnsi16m(ANSI_BACKGROUND_OFFSET);
+	styles$v.color.ansi = wrapAnsi16();
+	styles$v.color.ansi256 = wrapAnsi256();
+	styles$v.color.ansi16m = wrapAnsi16m();
+	styles$v.bgColor.ansi = wrapAnsi16(ANSI_BACKGROUND_OFFSET);
+	styles$v.bgColor.ansi256 = wrapAnsi256(ANSI_BACKGROUND_OFFSET);
+	styles$v.bgColor.ansi16m = wrapAnsi16m(ANSI_BACKGROUND_OFFSET);
 
 	// From https://github.com/Qix-/color-convert/blob/3f0e0d4e92e235796ccb17f6e85c72094a651f49/conversions.js
-	Object.defineProperties(styles$t, {
+	Object.defineProperties(styles$v, {
 		rgbToAnsi256: {
 			value(red, green, blue) {
 				// We use the extended greyscale palette here, with the exception of
@@ -218015,7 +218015,7 @@ function assembleStyles() {
 			enumerable: false,
 		},
 		hexToAnsi256: {
-			value: hex => styles$t.rgbToAnsi256(...styles$t.hexToRgb(hex)),
+			value: hex => styles$v.rgbToAnsi256(...styles$v.hexToRgb(hex)),
 			enumerable: false,
 		},
 		ansi256ToAnsi: {
@@ -218064,16 +218064,16 @@ function assembleStyles() {
 			enumerable: false,
 		},
 		rgbToAnsi: {
-			value: (red, green, blue) => styles$t.ansi256ToAnsi(styles$t.rgbToAnsi256(red, green, blue)),
+			value: (red, green, blue) => styles$v.ansi256ToAnsi(styles$v.rgbToAnsi256(red, green, blue)),
 			enumerable: false,
 		},
 		hexToAnsi: {
-			value: hex => styles$t.ansi256ToAnsi(styles$t.hexToAnsi256(hex)),
+			value: hex => styles$v.ansi256ToAnsi(styles$v.hexToAnsi256(hex)),
 			enumerable: false,
 		},
 	});
 
-	return styles$t;
+	return styles$v;
 }
 
 const ansiStyles = assembleStyles();
@@ -218155,7 +218155,7 @@ const levelMapping = [
 	'ansi16m',
 ];
 
-const styles$s = Object.create(null);
+const styles$u = Object.create(null);
 
 const applyOptions = (object, options = {}) => {
 	if (options.level && !(Number.isInteger(options.level) && options.level >= 0 && options.level <= 3)) {
@@ -218183,7 +218183,7 @@ function createChalk(options) {
 Object.setPrototypeOf(createChalk.prototype, Function.prototype);
 
 for (const [styleName, style] of Object.entries(ansiStyles)) {
-	styles$s[styleName] = {
+	styles$u[styleName] = {
 		get() {
 			const builder = createBuilder(this, createStyler(style.open, style.close, this[STYLER]), this[IS_EMPTY]);
 			Object.defineProperty(this, styleName, {value: builder});
@@ -218192,7 +218192,7 @@ for (const [styleName, style] of Object.entries(ansiStyles)) {
 	};
 }
 
-styles$s.visible = {
+styles$u.visible = {
 	get() {
 		const builder = createBuilder(this, this[STYLER], true);
 		Object.defineProperty(this, 'visible', {value: builder});
@@ -218223,7 +218223,7 @@ const getModelAnsi = (model, level, type, ...arguments_) => {
 const usedModels = ['rgb', 'hex', 'ansi256'];
 
 for (const model of usedModels) {
-	styles$s[model] = {
+	styles$u[model] = {
 		get() {
 			const {level} = this;
 			return function (...arguments_) {
@@ -218234,7 +218234,7 @@ for (const model of usedModels) {
 	};
 
 	const bgModel = 'bg' + model[0].toUpperCase() + model.slice(1);
-	styles$s[bgModel] = {
+	styles$u[bgModel] = {
 		get() {
 			const {level} = this;
 			return function (...arguments_) {
@@ -218246,7 +218246,7 @@ for (const model of usedModels) {
 }
 
 const proto = Object.defineProperties(() => {}, {
-	...styles$s,
+	...styles$u,
 	level: {
 		enumerable: true,
 		get() {
@@ -218328,7 +218328,7 @@ const applyStyle = (self, string) => {
 	return openAll + string + closeAll;
 };
 
-Object.defineProperties(createChalk.prototype, styles$s);
+Object.defineProperties(createChalk.prototype, styles$u);
 
 const chalk = createChalk();
 createChalk({level: stderrColor ? stderrColor.level : 0});
@@ -232514,163 +232514,182 @@ function requirePrompts () {
 var promptsExports = requirePrompts();
 var prompts = /*@__PURE__*/getDefaultExportFromCjs$1(promptsExports);
 
-var type$r = "components";
-var content$r = "import React, { useCallback, useRef, memo } from \"react\";\nimport { useActiveSpeakerId } from \"@daily-co/daily-react\";\nimport { useAudioLevelObserver } from \"@daily-co/daily-react\";\nimport styles from \"./audio-wave.module.css\";\n\nexport const AudioWave = memo(({ id }: { id: string }) => {\n\tconst activeSpeakerId = useActiveSpeakerId();\n\tconst isActiveSpeaker = activeSpeakerId === id;\n\n\tconst leftBarRef = useRef<HTMLDivElement>(null);\n\tconst centerBarRef = useRef<HTMLDivElement>(null);\n\tconst rightBarRef = useRef<HTMLDivElement>(null);\n\tconst animationFrameRef = useRef<number | undefined>(undefined);\n\n\tuseAudioLevelObserver(\n\t\tid,\n\t\tuseCallback((volume) => {\n\t\t\t// Cancel any pending animation frame to prevent accumulation\n\t\t\tif (animationFrameRef.current) {\n\t\t\t\tcancelAnimationFrame(animationFrameRef.current);\n\t\t\t}\n\n\t\t\t// Use requestAnimationFrame to batch DOM updates\n\t\t\tanimationFrameRef.current = requestAnimationFrame(() => {\n\t\t\t\tconst scaledVolume = Number(Math.max(0.01, volume).toFixed(2));\n\t\t\t\tif (leftBarRef.current && centerBarRef.current && rightBarRef.current) {\n\t\t\t\t\tleftBarRef.current.style.height = `${20 + scaledVolume * 40}%`;\n\t\t\t\t\tcenterBarRef.current.style.height = `${20 + scaledVolume * 130}%`;\n\t\t\t\t\trightBarRef.current.style.height = `${20 + scaledVolume * 40}%`;\n\t\t\t\t}\n\t\t\t});\n\t\t}, []),\n\t);\n\n\treturn (\n\t\t<div className={styles.container}>\n\t\t\t<div className={styles.waveContainer}>\n\t\t\t\t<div\n\t\t\t\t\tref={leftBarRef}\n\t\t\t\t\tclassName={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}\n\t\t\t\t/>\n\t\t\t\t<div\n\t\t\t\t\tref={centerBarRef}\n\t\t\t\t\tclassName={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}\n\t\t\t\t/>\n\t\t\t\t<div\n\t\t\t\t\tref={rightBarRef}\n\t\t\t\t\tclassName={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nAudioWave.displayName = 'AudioWave';\n";
-var styles$r = ".container {\n\toverflow: hidden;\n\tborder: 1px solid white;\n\twidth: 1.5rem;\n\theight: 1.5rem;\n\tborder-radius: 9999px;\n\twill-change: transform;\n\ttransform: translateZ(0);\n}\n\n.waveContainer {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 0.125rem;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.bar {\n\twidth: 0.25rem;\n\theight: 0.25rem;\n\tbackground-color: white;\n\tborder-radius: 9999px;\n\ttransition: height 200ms ease-out;\n\twill-change: height;\n\ttransform: translateZ(0);\n}\n\n.barInactive {\n\twidth: 0.25rem !important;\n\theight: 0.25rem !important;\n}\n";
+var type$t = "components";
+var content$t = "import React, { useCallback, useRef, memo } from \"react\";\nimport { useActiveSpeakerId } from \"@daily-co/daily-react\";\nimport { useAudioLevelObserver } from \"@daily-co/daily-react\";\nimport styles from \"./audio-wave.module.css\";\n\nexport const AudioWave = memo(({ id }: { id: string }) => {\n\tconst activeSpeakerId = useActiveSpeakerId();\n\tconst isActiveSpeaker = activeSpeakerId === id;\n\n\tconst leftBarRef = useRef<HTMLDivElement>(null);\n\tconst centerBarRef = useRef<HTMLDivElement>(null);\n\tconst rightBarRef = useRef<HTMLDivElement>(null);\n\tconst animationFrameRef = useRef<number | undefined>(undefined);\n\n\tuseAudioLevelObserver(\n\t\tid,\n\t\tuseCallback((volume) => {\n\t\t\t// Cancel any pending animation frame to prevent accumulation\n\t\t\tif (animationFrameRef.current) {\n\t\t\t\tcancelAnimationFrame(animationFrameRef.current);\n\t\t\t}\n\n\t\t\t// Use requestAnimationFrame to batch DOM updates\n\t\t\tanimationFrameRef.current = requestAnimationFrame(() => {\n\t\t\t\tconst scaledVolume = Number(Math.max(0.01, volume).toFixed(2));\n\t\t\t\tif (leftBarRef.current && centerBarRef.current && rightBarRef.current) {\n\t\t\t\t\tleftBarRef.current.style.height = `${20 + scaledVolume * 40}%`;\n\t\t\t\t\tcenterBarRef.current.style.height = `${20 + scaledVolume * 130}%`;\n\t\t\t\t\trightBarRef.current.style.height = `${20 + scaledVolume * 40}%`;\n\t\t\t\t}\n\t\t\t});\n\t\t}, []),\n\t);\n\n\treturn (\n\t\t<div className={styles.container}>\n\t\t\t<div className={styles.waveContainer}>\n\t\t\t\t<div\n\t\t\t\t\tref={leftBarRef}\n\t\t\t\t\tclassName={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}\n\t\t\t\t/>\n\t\t\t\t<div\n\t\t\t\t\tref={centerBarRef}\n\t\t\t\t\tclassName={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}\n\t\t\t\t/>\n\t\t\t\t<div\n\t\t\t\t\tref={rightBarRef}\n\t\t\t\t\tclassName={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nAudioWave.displayName = 'AudioWave';\n";
+var styles$t = ".container {\n\toverflow: hidden;\n\tborder: 1px solid white;\n\twidth: 1.5rem;\n\theight: 1.5rem;\n\tborder-radius: 9999px;\n\twill-change: transform;\n\ttransform: translateZ(0);\n}\n\n.waveContainer {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 0.125rem;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.bar {\n\twidth: 0.25rem;\n\theight: 0.25rem;\n\tbackground-color: white;\n\tborder-radius: 9999px;\n\ttransition: height 200ms ease-out;\n\twill-change: height;\n\ttransform: translateZ(0);\n}\n\n.barInactive {\n\twidth: 0.25rem !important;\n\theight: 0.25rem !important;\n}\n";
 var audioWave$1 = {
+	type: type$t,
+	content: content$t,
+	styles: styles$t
+};
+
+var type$s = "components";
+var content$s = "import React, { useEffect, useCallback } from \"react\";\nimport {\n\tDailyAudio,\n\tDailyVideo,\n\tuseDevices,\n\tuseLocalSessionId,\n\tuseMeetingState,\n\tuseScreenVideoTrack,\n\tuseVideoTrack\n} from \"@daily-co/daily-react\";\nimport { MicSelectBtn, CameraSelectBtn, ScreenShareButton } from '../device-select'\nimport { useLocalScreenshare } from \"../../hooks/use-local-screenshare\";\nimport { useReplicaIDs } from \"../../hooks/use-replica-ids\";\nimport { useCVICall } from \"../../hooks/use-cvi-call\";\nimport { AudioWave } from \"../audio-wave\";\n\nimport styles from \"./conversation.module.css\";\n\ninterface ConversationProps {\n\tonLeave: () => void;\n\tconversationUrl: string;\n}\n\nconst VideoPreview = React.memo(({ id }: { id: string }) => {\n\tconst videoState = useVideoTrack(id);\n\tconst widthVideo = videoState.track?.getSettings()?.width;\n\tconst heightVideo = videoState.track?.getSettings()?.height;\n\tconst isVertical = widthVideo && heightVideo ? widthVideo < heightVideo : false;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.previewVideoContainer} ${isVertical ? styles.previewVideoContainerVertical : ''} ${videoState.isOff ? styles.previewVideoContainerHidden : ''}`}\n\t\t>\n\t\t\t<DailyVideo\n\t\t\t\tautomirror\n\t\t\t\tsessionId={id}\n\t\t\t\ttype=\"video\"\n\t\t\t\tclassName={`${styles.previewVideo} ${isVertical ? styles.previewVideoVertical : ''} ${videoState.isOff ? styles.previewVideoHidden : ''}`}\n\t\t\t/>\n\t\t\t<div className={styles.audioWaveContainer}>\n\t\t\t\t<AudioWave id={id} />\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nconst PreviewVideos = React.memo(() => {\n\tconst localId = useLocalSessionId();\n\tconst { isScreenSharing } = useLocalScreenshare();\n\tconst replicaIds = useReplicaIDs();\n\tconst replicaId = replicaIds[0];\n\n\treturn (\n\t\t<>\n\t\t\t{isScreenSharing && (\n\t\t\t\t<VideoPreview id={replicaId} />\n\t\t\t)}\n\t\t\t<VideoPreview id={localId} />\n\t\t</>\n\t);\n});\n\nconst MainVideo = React.memo(() => {\n\tconst replicaIds = useReplicaIDs();\n\tconst localId = useLocalSessionId();\n\tconst videoState = useVideoTrack(replicaIds[0]);\n\tconst screenVideoState = useScreenVideoTrack(localId);\n\tconst isScreenSharing = !screenVideoState.isOff;\n\t// This is one-to-one call, so we can use the first replica id\n\tconst replicaId = replicaIds[0];\n\n\tif (!replicaId) {\n\t\treturn (\n\t\t\t<div className={styles.waitingContainer}>\n\t\t\t\t<p>Connecting...</p>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Switching between replica video and screen sharing video\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.mainVideoContainer} ${isScreenSharing ? styles.mainVideoContainerScreenSharing : ''}`}\n\t\t>\n\t\t\t<DailyVideo\n\t\t\t\tautomirror\n\t\t\t\tsessionId={isScreenSharing ? localId : replicaId}\n\t\t\t\ttype={isScreenSharing ? \"screenVideo\" : \"video\"}\n\t\t\t\tclassName={`${styles.mainVideo}\n\t\t\t\t${isScreenSharing ? styles.mainVideoScreenSharing : ''}\n\t\t\t\t${videoState.isOff ? styles.mainVideoHidden : ''}`}\n\t\t\t/>\n\t\t</div>\n\t);\n});\n\nexport const Conversation = React.memo(({ onLeave, conversationUrl }: ConversationProps) => {\n\tconst { joinCall, leaveCall } = useCVICall();\n\tconst meetingState = useMeetingState();\n\tconst { hasMicError } = useDevices()\n\n\tuseEffect(() => {\n\t\tif (meetingState === 'error') {\n\t\t\tonLeave();\n\t\t}\n\t}, [meetingState, onLeave]);\n\n\t// Initialize call when conversation is available\n\tuseEffect(() => {\n\t\tjoinCall({ url: conversationUrl });\n\t}, []);\n\n\tconst handleLeave = useCallback(() => {\n\t\tleaveCall();\n\t\tonLeave();\n\t}, [leaveCall, onLeave]);\n\n\treturn (\n\t\t<div className={styles.container}>\n\t\t\t<div className={styles.videoContainer}>\n\t\t\t\t{\n\t\t\t\t\thasMicError && (\n\t\t\t\t\t\t<div className={styles.errorContainer}>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\tCamera or microphone access denied. Please check your settings and try again.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t{/* Main video */}\n\t\t\t\t<div className={styles.mainVideoContainer}>\n\t\t\t\t\t<MainVideo />\n\t\t\t\t</div>\n\n\t\t\t\t{/* Self view */}\n\t\t\t\t<div className={styles.selfViewContainer}>\n\t\t\t\t\t<PreviewVideos />\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div className={styles.footer}>\n\t\t\t\t<div className={styles.footerControls}>\n\t\t\t\t\t<MicSelectBtn />\n\t\t\t\t\t<CameraSelectBtn />\n\t\t\t\t\t<ScreenShareButton />\n\t\t\t\t\t<button type=\"button\" className={styles.leaveButton} onClick={handleLeave}>\n\t\t\t\t\t\t<span className={styles.leaveButtonIcon}>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\taria-label=\"Leave Call\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\td=\"M18 6L6 18M6 6L18 18\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<DailyAudio />\n\t\t</div>\n\t);\n});\n";
+var styles$s = ".container {\n\tposition: relative;\n\twidth: 100%;\n\ttext-align: center;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\taspect-ratio: 9/16;\n\toverflow: hidden;\n\tborder-radius: 0.5rem;\n\tmax-height: 90vh;\n  background: linear-gradient(135deg, #4b5563 0%, #1f2937 100%);\n\tbackground-size: 400% 400%;\n\tanimation: gradient 15s ease infinite;\n}\n\n@media (min-width: 768px) {\n\t.container {\n\t\taspect-ratio: 16/9;\n\t}\n}\n\n.errorContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: rgba(248, 250, 252, 0.08);\n\tcolor: white;\n\theight: 100%;\n\tfont-size: 1.5rem;\n\tfont-weight: 600;\n\ttext-align: center;\n}\n\n.videoContainer {\n\tposition: relative;\n\tz-index: 5;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.footer {\n\tposition: absolute;\n\tbottom: 1.5rem;\n\tleft: 0;\n\tright: 0;\n\tz-index: 20;\n}\n\n.footerControls {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 16px;\n}\n\n.leaveButton {\n\tbackground: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);\n\tcolor: white;\n\tborder: none;\n\tfont-size: 16px;\n\tcursor: pointer;\n\ttransition: all 0.3s ease;\n\theight: 3rem;\n\twidth: 3rem;\n\tborder-radius: 9999px;\n\tbackground-color: #ef4444;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.leaveButton:hover {\n\topacity: 0.8;\n}\n\n.leaveButtonIcon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* ReplicaVideo styles */\n.mainVideoContainer {\n\tbackground: transparent;\n\twidth: 100%;\n\theight: 100%;\n\tposition: relative;\n}\n\n.mainVideoContainerScreenSharing {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.mainVideo {\n\tposition: absolute;\n\tinset: 0;\n\tobject-position: center;\n\tobject-fit: cover !important;\n\theight: 100%;\n\twidth: 100%;\n\ttransition: all 0.3s ease;\n}\n\n.mainVideoScreenSharing {\n\tobject-fit: contain !important;\n}\n\n.mainVideoHidden {\n\tdisplay: none;\n}\n\n/* PreviewVideo styles */\n.previewVideoContainer {\n\tposition: relative;\n\tbackground: rgba(2, 6, 23, 0.3);\n\taspect-ratio: 16/9;\n\twidth: 11rem;\n\tborder-radius: 1rem;\n\toverflow: hidden;\n\tmax-height: 120px;\n\tz-index: 10;\n}\n\n@media (min-width: 768px) {\n\t.previewVideoContainer {\n\t\tmax-height: 100%;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.previewVideoContainer {\n\t\twidth: 17.875rem;\n\t}\n}\n\n.previewVideoContainerVertical {\n\theight: 40.5rem;\n\twidth: 6rem;\n}\n\n.previewVideoContainerHidden {\n\tbackground: transparent;\n\tdisplay: none;\n}\n\n.previewVideo {\n\twidth: 100%;\n\theight: auto;\n\tmax-height: 120px;\n}\n\n@media (min-width: 768px) {\n\t.previewVideo {\n\t\tmax-height: 100%;\n\t}\n}\n\n.previewVideoVertical {\n\theight: 40.5rem;\n\twidth: 6rem;\n\tobject-fit: cover;\n}\n\n.previewVideoHidden {\n\tdisplay: none;\n}\n\n/* Main video container */\n.mainVideoContainer {\n\twidth: 100%;\n\theight: 100%;\n}\n\n/* Self view container */\n.selfViewContainer {\n\tposition: absolute;\n\tbottom: 5rem;\n\tleft: 1rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-direction: column;\n\tgap: 0.75rem;\n}\n\n@media (min-width: 768px) {\n\t.selfViewContainer {\n\t\tbottom: 1rem;\n\t}\n}\n\n/* Waiting message container */\n/* Start of Selection */\n.waitingContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: transparent;\n\tcolor: white;\n\theight: 100%;\n\tfont-size: 1.5rem;\n\tfont-weight: 600;\n}\n\n@keyframes gradient {\n\t0% {\n\t\tbackground-position: 0% 50%;\n\t}\n\t50% {\n\t\tbackground-position: 100% 50%;\n\t}\n\t100% {\n\t\tbackground-position: 0% 50%;\n\t}\n}\n/* End of Selection */\n\n.audioWaveContainer {\n\tposition: absolute;\n\tbottom: 0.5rem;\n\tright: 0.5rem;\n}\n";
+var componentsDependencies$7 = [
+	"device-select",
+	"use-local-screenshare",
+	"use-replica-ids",
+	"use-cvi-call",
+	"audio-wave",
+	"cvi-provider"
+];
+var conversation01$1 = {
+	type: type$s,
+	content: content$s,
+	styles: styles$s,
+	componentsDependencies: componentsDependencies$7
+};
+
+var type$r = "components";
+var content$r = "import { DailyProvider } from \"@daily-co/daily-react\";\n\nexport const CVIProvider = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <DailyProvider>\n      {children}\n    </DailyProvider>\n  )\n}\n";
+var styles$r = "";
+var cviProvider$1 = {
 	type: type$r,
 	content: content$r,
 	styles: styles$r
 };
 
 var type$q = "components";
-var content$q = "import React, { memo } from \"react\";\nimport { useDevices } from \"@daily-co/daily-react\";\nimport { useLocalCamera } from \"../../hooks/use-local-camera\";\nimport { useLocalMicrophone } from \"../../hooks/use-local-microphone\";\nimport { useLocalScreenshare } from \"../../hooks/use-local-screenshare\";\nimport styles from \"./controls.module.css\";\n\nexport const SelectDevice = ({\n  value,\n  devices,\n  disabled,\n  onChange,\n}: {\n  value: string | undefined;\n  devices: { device: MediaDeviceInfo }[];\n  disabled: boolean;\n  onChange: (value: string) => void;\n}) => {\n  return (\n    <div className={styles.selectDeviceContainer}>\n      <select\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        disabled={disabled}\n        className={styles.selectDevice}\n      >\n        {devices.map(({ device }) => (\n          <option key={device.deviceId} value={device.deviceId}>\n            {device.label}\n          </option>\n        ))}\n      </select>\n      <span className={styles.selectArrow}>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M4 6L8 10L12 6\" stroke=\"#fff\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      </span>\n    </div>\n  );\n};\n\nexport const MicrophoneButton = memo(() => {\n  const { onToggleMicrophone, isMicReady, isMicMuted } = useLocalMicrophone();\n  const { microphones, currentMic, setMicrophone } = useDevices();\n\n  return (\n    <div className={styles.deviceButtonContainer}>\n      <button\n        type=\"button\"\n        onClick={onToggleMicrophone}\n        disabled={!isMicReady}\n        className={styles.deviceButton}\n      >\n        <span className={styles.deviceButtonIcon}>\n          {isMicMuted || !isMicReady ? (\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              role=\"img\"\n              aria-label=\"Microphone Muted\"\n            >\n              <path\n                d=\"M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 18.1339 14.0992 18.1339 14.0992M12 18V21\"\n                stroke=\"#020617\"\n                strokeWidth=\"1.66667\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n              <rect\n                x=\"1.30225\"\n                y=\"3\"\n                width=\"26\"\n                height=\"2.24738\"\n                rx=\"1.12369\"\n                transform=\"rotate(30 1.30225 3)\"\n                fill=\"#020617\"\n              />\n              <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M9 9.39031V11C9 11.7956 9.31607 12.5587 9.87868 13.1213C10.4413 13.6839 11.2044 14 12 14C12.7956 14 13.5587 13.6839 14.1213 13.1213C14.2829 12.9597 14.4242 12.7816 14.5435 12.5908L9 9.39031ZM15 7.71466V6C15 5.20435 14.6839 4.44129 14.1213 3.87868C13.5587 3.31607 12.7956 3 12 3C11.2044 3 10.4413 3.31607 9.87868 3.87868C9.69528 4.06208 9.53807 4.26678 9.40948 4.48697L15 7.71466Z\"\n                fill=\"#020617\"\n              />\n              <path\n                d=\"M9 9.39031L9.41667 8.66862C9.15883 8.51976 8.84117 8.51976 8.58333 8.66862C8.3255 8.81748 8.16667 9.09259 8.16667 9.39031H9ZM9.87868 13.1213L9.28942 13.7106H9.28942L9.87868 13.1213ZM14.1213 13.1213L14.7106 13.7106L14.7106 13.7106L14.1213 13.1213ZM14.5435 12.5908L15.25 13.0327C15.3699 12.841 15.4068 12.6088 15.3521 12.3894C15.2974 12.17 15.156 11.9822 14.9601 11.8692L14.5435 12.5908ZM15 7.71466L14.5833 8.43635C14.8412 8.58521 15.1588 8.58521 15.4167 8.43635C15.6745 8.28749 15.8333 8.01238 15.8333 7.71466H15ZM14.1213 3.87868L14.7106 3.28942L14.7106 3.28942L14.1213 3.87868ZM9.87868 3.87868L9.28942 3.28942L9.28942 3.28942L9.87868 3.87868ZM9.40948 4.48697L8.68988 4.06671C8.57806 4.25818 8.54715 4.48633 8.604 4.70065C8.66086 4.91497 8.80078 5.09779 8.99281 5.20866L9.40948 4.48697ZM9.83333 11V9.39031H8.16667V11H9.83333ZM10.4679 12.5321C10.0616 12.1257 9.83333 11.5746 9.83333 11H8.16667C8.16667 12.0167 8.57053 12.9917 9.28942 13.7106L10.4679 12.5321ZM12 13.1667C11.4254 13.1667 10.8743 12.9384 10.4679 12.5321L9.28942 13.7106C10.0083 14.4295 10.9833 14.8333 12 14.8333V13.1667ZM13.5321 12.5321C13.1257 12.9384 12.5746 13.1667 12 13.1667V14.8333C13.0167 14.8333 13.9917 14.4295 14.7106 13.7106L13.5321 12.5321ZM13.837 12.149C13.7508 12.2867 13.6488 12.4153 13.5321 12.5321L14.7106 13.7106C14.917 13.5041 15.0976 13.2764 15.25 13.0327L13.837 12.149ZM14.9601 11.8692L9.41667 8.66862L8.58333 10.112L14.1268 13.3125L14.9601 11.8692ZM14.1667 6V7.71466H15.8333V6H14.1667ZM13.5321 4.46794C13.9384 4.87426 14.1667 5.42536 14.1667 6H15.8333C15.8333 4.98334 15.4295 4.00831 14.7106 3.28942L13.5321 4.46794ZM12 3.83333C12.5746 3.83333 13.1257 4.06161 13.5321 4.46794L14.7106 3.28942C13.9917 2.57053 13.0167 2.16667 12 2.16667V3.83333ZM10.4679 4.46794C10.8743 4.06161 11.4254 3.83333 12 3.83333V2.16667C10.9833 2.16667 10.0083 2.57053 9.28942 3.28942L10.4679 4.46794ZM10.1291 4.90724C10.2219 4.74824 10.3354 4.60042 10.4679 4.46794L9.28942 3.28942C9.05511 3.52374 8.85421 3.78533 8.68988 4.06671L10.1291 4.90724ZM8.99281 5.20866L14.5833 8.43635L15.4167 6.99298L9.82615 3.76529L8.99281 5.20866Z\"\n                fill=\"#020617\"\n              />\n            </svg>\n          ) : (\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              role=\"img\"\n              aria-label=\"Microphone\"\n            >\n              <path\n                d=\"M9 6C9 5.20435 9.31607 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3C12.7956 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6V11C15 11.7956 14.6839 12.5587 14.1213 13.1213C13.5587 13.6839 12.7956 14 12 14C11.2044 14 10.4413 13.6839 9.87868 13.1213C9.31607 12.5587 9 11.7956 9 11V6Z\"\n                fill=\"#020617\"\n                stroke=\"#020617\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n              <path\n                d=\"M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 19 12.8565 19 11V10M12 18V21\"\n                stroke=\"#020617\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          )}\n        </span>\n        <span className={styles.srOnly}>Microphone</span>\n      </button>\n      <SelectDevice\n        value={currentMic?.device?.deviceId}\n        devices={microphones || []}\n        disabled={!isMicReady}\n        onChange={(val) => setMicrophone(val)}\n      />\n    </div>\n  );\n});\n\nMicrophoneButton.displayName = \"MicrophoneButton\";\n\nexport const CameraButton = memo(() => {\n  const { onToggleCamera, isCamReady, isCamMuted } = useLocalCamera();\n  const { currentCam, cameras, setCamera } = useDevices();\n\n\n  return (\n    <div className={styles.deviceButtonContainer}>\n      <button\n        type=\"button\"\n        onClick={onToggleCamera}\n        disabled={!isCamReady || !currentCam}\n        className={styles.deviceButton}\n      >\n        <span className={styles.deviceButtonIcon}>\n          {isCamMuted ? (\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              role=\"img\"\n              aria-label=\"Camera Muted\"\n            >\n              <g clipPath=\"url(#clip0_7082_14220)\">\n                <path\n                  fillRule=\"evenodd\"\n                  clipRule=\"evenodd\"\n                  d=\"M3.19874 5.60093C3.08628 5.68537 2.97928 5.77808 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V15.048C17.7787 14.8204 17.5304 14.6189 17.2595 14.4485L3.19874 5.60093ZM22 12.655V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H8.7412L22 12.655Z\"\n                  fill=\"#020617\"\n                />\n                <rect\n                  x=\"0.777222\"\n                  y=\"2.64844\"\n                  width=\"26.7988\"\n                  height=\"2.24738\"\n                  rx=\"1.12369\"\n                  transform=\"rotate(30 0.777222 2.64844)\"\n                  fill=\"#020617\"\n                />\n              </g>\n              <defs>\n                <clipPath id=\"clip0_7082_14220\">\n                  <rect width=\"24\" height=\"24\" fill=\"white\" />\n                </clipPath>\n              </defs>\n            </svg>\n          ) : (\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              role=\"img\"\n              aria-label=\"Camera\"\n            >\n              <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M5 5C4.20435 5 3.44129 5.31607 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V14.414L20.293 16.707C20.4329 16.8468 20.611 16.942 20.805 16.9806C20.9989 17.0192 21.2 16.9993 21.3827 16.9237C21.5654 16.848 21.7215 16.7199 21.8314 16.5555C21.9413 16.391 22 16.1978 22 16V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H5Z\"\n                fill=\"#020617\"\n              />\n            </svg>\n          )}\n        </span>\n        <span className={styles.srOnly}>Camera</span>\n      </button>\n      <SelectDevice\n        value={currentCam?.device?.deviceId}\n        devices={cameras || []}\n        disabled={!isCamReady}\n        onChange={(val) => setCamera(val)}\n      />\n    </div>\n  );\n});\n\nCameraButton.displayName = \"CameraButton\";\n\nexport const ScreenShareButton = memo(() => {\n  const { onToggleScreenshare, isScreenSharing } = useLocalScreenshare();\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onToggleScreenshare}\n      className={`${styles.deviceButtonContainer} ${styles.screenShareButton}`}\n    >\n      <span>\n        {isScreenSharing ? (\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            role=\"img\"\n            aria-label=\"Screen Share\"\n          >\n            <path\n              d=\"M21.0008 19C21.2557 19.0003 21.5009 19.0979 21.6862 19.2728C21.8715 19.4478 21.9831 19.687 21.998 19.9414C22.013 20.1958 21.9302 20.4464 21.7666 20.6418C21.603 20.8373 21.3709 20.9629 21.1178 20.993L21.0008 21H3.00085C2.74597 20.9997 2.50081 20.9021 2.31548 20.7272C2.13014 20.5522 2.01861 20.313 2.00367 20.0586C1.98874 19.8042 2.07152 19.5536 2.23511 19.3582C2.3987 19.1627 2.63075 19.0371 2.88385 19.007L3.00085 19H21.0008ZM19.0008 4C19.5054 3.99984 19.9914 4.19041 20.3614 4.5335C20.7314 4.87659 20.958 5.34684 20.9958 5.85L21.0008 6V16C21.001 16.5046 20.8104 16.9906 20.4673 17.3605C20.1243 17.7305 19.654 17.9572 19.1508 17.995L19.0008 18H5.00085C4.49627 18.0002 4.01028 17.8096 3.6403 17.4665C3.27032 17.1234 3.04369 16.6532 3.00585 16.15L3.00085 16V6C3.00069 5.49542 3.19125 5.00943 3.53434 4.63945C3.87743 4.26947 4.34769 4.04284 4.85085 4.005L5.00085 4H19.0008Z\"\n              fill=\"#2D65FF\"\n            />\n          </svg>\n        ) : (\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            role=\"img\"\n            aria-label=\"Screen Share\"\n          >\n            <path\n              d=\"M20.9999 19C21.2547 19.0003 21.4999 19.0979 21.6852 19.2728C21.8706 19.4478 21.9821 19.687 21.997 19.9414C22.012 20.1958 21.9292 20.4464 21.7656 20.6418C21.602 20.8373 21.37 20.9629 21.1169 20.993L20.9999 21H2.99987C2.74499 20.9997 2.49984 20.9021 2.3145 20.7272C2.12916 20.5522 2.01763 20.313 2.0027 20.0586C1.98776 19.8042 2.07054 19.5536 2.23413 19.3582C2.39772 19.1627 2.62977 19.0371 2.88287 19.007L2.99987 19H20.9999ZM18.9999 4C19.5044 3.99984 19.9904 4.19041 20.3604 4.5335C20.7304 4.87659 20.957 5.34684 20.9949 5.85L20.9999 6V16C21 16.5046 20.8095 16.9906 20.4664 17.3605C20.1233 17.7305 19.653 17.9572 19.1499 17.995L18.9999 18H4.99987C4.49529 18.0002 4.0093 17.8096 3.63932 17.4665C3.26934 17.1234 3.04271 16.6532 3.00487 16.15L2.99987 16V6C2.99971 5.49542 3.19028 5.00943 3.53337 4.63945C3.87646 4.26947 4.34671 4.04284 4.84987 4.005L4.99987 4H18.9999Z\"\n              fill=\"white\"\n            />\n          </svg>\n        )}\n      </span>\n    </button>\n  );\n});\n\nScreenShareButton.displayName = \"ScreenShareButton\";";
+var content$q = "import React, { memo } from \"react\";\nimport { useDevices } from \"@daily-co/daily-react\";\nimport { useLocalCamera } from \"../../hooks/use-local-camera\";\nimport { useLocalMicrophone } from \"../../hooks/use-local-microphone\";\nimport { useLocalScreenshare } from \"../../hooks/use-local-screenshare\";\nimport styles from \"./device-select.module.css\";\n\nexport const SelectDevice = ({\n  value,\n  devices,\n  disabled,\n  onChange,\n}: {\n  value: string | undefined;\n  devices: { device: MediaDeviceInfo }[];\n  disabled: boolean;\n  onChange: (value: string) => void;\n}) => {\n  return (\n    <div className={styles.selectDeviceContainer}>\n      <select\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        disabled={disabled}\n        className={styles.selectDevice}\n      >\n        {devices.map(({ device }) => (\n          <option key={device.deviceId} value={device.deviceId}>\n            {device.label}\n          </option>\n        ))}\n      </select>\n      <span className={styles.selectArrow}>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M4 6L8 10L12 6\" stroke=\"#fff\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      </span>\n    </div>\n  );\n};\n\nexport const MicSelectBtn = memo(() => {\n  const { onToggleMicrophone, isMicReady, isMicMuted } = useLocalMicrophone();\n  const { microphones, currentMic, setMicrophone } = useDevices();\n\n  return (\n    <div className={styles.deviceButtonContainer}>\n      <button\n        type=\"button\"\n        onClick={onToggleMicrophone}\n        disabled={!isMicReady}\n        className={styles.deviceButton}\n      >\n        <span className={styles.deviceButtonIcon}>\n          {isMicMuted || !isMicReady ? (\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              role=\"img\"\n              aria-label=\"Microphone Muted\"\n            >\n              <path\n                d=\"M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 18.1339 14.0992 18.1339 14.0992M12 18V21\"\n                stroke=\"#020617\"\n                strokeWidth=\"1.66667\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n              <rect\n                x=\"1.30225\"\n                y=\"3\"\n                width=\"26\"\n                height=\"2.24738\"\n                rx=\"1.12369\"\n                transform=\"rotate(30 1.30225 3)\"\n                fill=\"#020617\"\n              />\n              <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M9 9.39031V11C9 11.7956 9.31607 12.5587 9.87868 13.1213C10.4413 13.6839 11.2044 14 12 14C12.7956 14 13.5587 13.6839 14.1213 13.1213C14.2829 12.9597 14.4242 12.7816 14.5435 12.5908L9 9.39031ZM15 7.71466V6C15 5.20435 14.6839 4.44129 14.1213 3.87868C13.5587 3.31607 12.7956 3 12 3C11.2044 3 10.4413 3.31607 9.87868 3.87868C9.69528 4.06208 9.53807 4.26678 9.40948 4.48697L15 7.71466Z\"\n                fill=\"#020617\"\n              />\n              <path\n                d=\"M9 9.39031L9.41667 8.66862C9.15883 8.51976 8.84117 8.51976 8.58333 8.66862C8.3255 8.81748 8.16667 9.09259 8.16667 9.39031H9ZM9.87868 13.1213L9.28942 13.7106H9.28942L9.87868 13.1213ZM14.1213 13.1213L14.7106 13.7106L14.7106 13.7106L14.1213 13.1213ZM14.5435 12.5908L15.25 13.0327C15.3699 12.841 15.4068 12.6088 15.3521 12.3894C15.2974 12.17 15.156 11.9822 14.9601 11.8692L14.5435 12.5908ZM15 7.71466L14.5833 8.43635C14.8412 8.58521 15.1588 8.58521 15.4167 8.43635C15.6745 8.28749 15.8333 8.01238 15.8333 7.71466H15ZM14.1213 3.87868L14.7106 3.28942L14.7106 3.28942L14.1213 3.87868ZM9.87868 3.87868L9.28942 3.28942L9.28942 3.28942L9.87868 3.87868ZM9.40948 4.48697L8.68988 4.06671C8.57806 4.25818 8.54715 4.48633 8.604 4.70065C8.66086 4.91497 8.80078 5.09779 8.99281 5.20866L9.40948 4.48697ZM9.83333 11V9.39031H8.16667V11H9.83333ZM10.4679 12.5321C10.0616 12.1257 9.83333 11.5746 9.83333 11H8.16667C8.16667 12.0167 8.57053 12.9917 9.28942 13.7106L10.4679 12.5321ZM12 13.1667C11.4254 13.1667 10.8743 12.9384 10.4679 12.5321L9.28942 13.7106C10.0083 14.4295 10.9833 14.8333 12 14.8333V13.1667ZM13.5321 12.5321C13.1257 12.9384 12.5746 13.1667 12 13.1667V14.8333C13.0167 14.8333 13.9917 14.4295 14.7106 13.7106L13.5321 12.5321ZM13.837 12.149C13.7508 12.2867 13.6488 12.4153 13.5321 12.5321L14.7106 13.7106C14.917 13.5041 15.0976 13.2764 15.25 13.0327L13.837 12.149ZM14.9601 11.8692L9.41667 8.66862L8.58333 10.112L14.1268 13.3125L14.9601 11.8692ZM14.1667 6V7.71466H15.8333V6H14.1667ZM13.5321 4.46794C13.9384 4.87426 14.1667 5.42536 14.1667 6H15.8333C15.8333 4.98334 15.4295 4.00831 14.7106 3.28942L13.5321 4.46794ZM12 3.83333C12.5746 3.83333 13.1257 4.06161 13.5321 4.46794L14.7106 3.28942C13.9917 2.57053 13.0167 2.16667 12 2.16667V3.83333ZM10.4679 4.46794C10.8743 4.06161 11.4254 3.83333 12 3.83333V2.16667C10.9833 2.16667 10.0083 2.57053 9.28942 3.28942L10.4679 4.46794ZM10.1291 4.90724C10.2219 4.74824 10.3354 4.60042 10.4679 4.46794L9.28942 3.28942C9.05511 3.52374 8.85421 3.78533 8.68988 4.06671L10.1291 4.90724ZM8.99281 5.20866L14.5833 8.43635L15.4167 6.99298L9.82615 3.76529L8.99281 5.20866Z\"\n                fill=\"#020617\"\n              />\n            </svg>\n          ) : (\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              role=\"img\"\n              aria-label=\"Microphone\"\n            >\n              <path\n                d=\"M9 6C9 5.20435 9.31607 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3C12.7956 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6V11C15 11.7956 14.6839 12.5587 14.1213 13.1213C13.5587 13.6839 12.7956 14 12 14C11.2044 14 10.4413 13.6839 9.87868 13.1213C9.31607 12.5587 9 11.7956 9 11V6Z\"\n                fill=\"#020617\"\n                stroke=\"#020617\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n              <path\n                d=\"M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 19 12.8565 19 11V10M12 18V21\"\n                stroke=\"#020617\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          )}\n        </span>\n        <span className={styles.srOnly}>Microphone</span>\n      </button>\n      <SelectDevice\n        value={currentMic?.device?.deviceId}\n        devices={microphones || []}\n        disabled={!isMicReady}\n        onChange={(val) => setMicrophone(val)}\n      />\n    </div>\n  );\n});\n\nMicSelectBtn.displayName = \"MicSelectBtn\";\n\nexport const CameraSelectBtn = memo(() => {\n  const { onToggleCamera, isCamReady, isCamMuted } = useLocalCamera();\n  const { currentCam, cameras, setCamera } = useDevices();\n\n\n  return (\n    <div className={styles.deviceButtonContainer}>\n      <button\n        type=\"button\"\n        onClick={onToggleCamera}\n        disabled={!isCamReady || !currentCam}\n        className={styles.deviceButton}\n      >\n        <span className={styles.deviceButtonIcon}>\n          {isCamMuted ? (\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              role=\"img\"\n              aria-label=\"Camera Muted\"\n            >\n              <g clipPath=\"url(#clip0_7082_14220)\">\n                <path\n                  fillRule=\"evenodd\"\n                  clipRule=\"evenodd\"\n                  d=\"M3.19874 5.60093C3.08628 5.68537 2.97928 5.77808 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V15.048C17.7787 14.8204 17.5304 14.6189 17.2595 14.4485L3.19874 5.60093ZM22 12.655V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H8.7412L22 12.655Z\"\n                  fill=\"#020617\"\n                />\n                <rect\n                  x=\"0.777222\"\n                  y=\"2.64844\"\n                  width=\"26.7988\"\n                  height=\"2.24738\"\n                  rx=\"1.12369\"\n                  transform=\"rotate(30 0.777222 2.64844)\"\n                  fill=\"#020617\"\n                />\n              </g>\n              <defs>\n                <clipPath id=\"clip0_7082_14220\">\n                  <rect width=\"24\" height=\"24\" fill=\"white\" />\n                </clipPath>\n              </defs>\n            </svg>\n          ) : (\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              role=\"img\"\n              aria-label=\"Camera\"\n            >\n              <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M5 5C4.20435 5 3.44129 5.31607 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V14.414L20.293 16.707C20.4329 16.8468 20.611 16.942 20.805 16.9806C20.9989 17.0192 21.2 16.9993 21.3827 16.9237C21.5654 16.848 21.7215 16.7199 21.8314 16.5555C21.9413 16.391 22 16.1978 22 16V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H5Z\"\n                fill=\"#020617\"\n              />\n            </svg>\n          )}\n        </span>\n        <span className={styles.srOnly}>Camera</span>\n      </button>\n      <SelectDevice\n        value={currentCam?.device?.deviceId}\n        devices={cameras || []}\n        disabled={!isCamReady}\n        onChange={(val) => setCamera(val)}\n      />\n    </div>\n  );\n});\n\nCameraSelectBtn.displayName = \"CameraSelectBtn\";\n\nexport const ScreenShareButton = memo(() => {\n  const { onToggleScreenshare, isScreenSharing } = useLocalScreenshare();\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onToggleScreenshare}\n      className={`${styles.deviceButtonContainer} ${styles.screenShareButton}`}\n    >\n      <span>\n        {isScreenSharing ? (\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            role=\"img\"\n            aria-label=\"Screen Share\"\n          >\n            <path\n              d=\"M21.0008 19C21.2557 19.0003 21.5009 19.0979 21.6862 19.2728C21.8715 19.4478 21.9831 19.687 21.998 19.9414C22.013 20.1958 21.9302 20.4464 21.7666 20.6418C21.603 20.8373 21.3709 20.9629 21.1178 20.993L21.0008 21H3.00085C2.74597 20.9997 2.50081 20.9021 2.31548 20.7272C2.13014 20.5522 2.01861 20.313 2.00367 20.0586C1.98874 19.8042 2.07152 19.5536 2.23511 19.3582C2.3987 19.1627 2.63075 19.0371 2.88385 19.007L3.00085 19H21.0008ZM19.0008 4C19.5054 3.99984 19.9914 4.19041 20.3614 4.5335C20.7314 4.87659 20.958 5.34684 20.9958 5.85L21.0008 6V16C21.001 16.5046 20.8104 16.9906 20.4673 17.3605C20.1243 17.7305 19.654 17.9572 19.1508 17.995L19.0008 18H5.00085C4.49627 18.0002 4.01028 17.8096 3.6403 17.4665C3.27032 17.1234 3.04369 16.6532 3.00585 16.15L3.00085 16V6C3.00069 5.49542 3.19125 5.00943 3.53434 4.63945C3.87743 4.26947 4.34769 4.04284 4.85085 4.005L5.00085 4H19.0008Z\"\n              fill=\"#2D65FF\"\n            />\n          </svg>\n        ) : (\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            role=\"img\"\n            aria-label=\"Screen Share\"\n          >\n            <path\n              d=\"M20.9999 19C21.2547 19.0003 21.4999 19.0979 21.6852 19.2728C21.8706 19.4478 21.9821 19.687 21.997 19.9414C22.012 20.1958 21.9292 20.4464 21.7656 20.6418C21.602 20.8373 21.37 20.9629 21.1169 20.993L20.9999 21H2.99987C2.74499 20.9997 2.49984 20.9021 2.3145 20.7272C2.12916 20.5522 2.01763 20.313 2.0027 20.0586C1.98776 19.8042 2.07054 19.5536 2.23413 19.3582C2.39772 19.1627 2.62977 19.0371 2.88287 19.007L2.99987 19H20.9999ZM18.9999 4C19.5044 3.99984 19.9904 4.19041 20.3604 4.5335C20.7304 4.87659 20.957 5.34684 20.9949 5.85L20.9999 6V16C21 16.5046 20.8095 16.9906 20.4664 17.3605C20.1233 17.7305 19.653 17.9572 19.1499 17.995L18.9999 18H4.99987C4.49529 18.0002 4.0093 17.8096 3.63932 17.4665C3.26934 17.1234 3.04271 16.6532 3.00487 16.15L2.99987 16V6C2.99971 5.49542 3.19028 5.00943 3.53337 4.63945C3.87646 4.26947 4.34671 4.04284 4.84987 4.005L4.99987 4H18.9999Z\"\n              fill=\"white\"\n            />\n          </svg>\n        )}\n      </span>\n    </button>\n  );\n});\n\nScreenShareButton.displayName = \"ScreenShareButton\";";
 var styles$q = "/* SelectDevice styles */\n.selectDevice {\n\theight: 3rem;\n\twidth: 5.5rem;\n\tborder-radius: 9999px;\n\tbackground-color: rgba(255, 255, 255, 0.2);\n\tpadding: 0 0.75rem;\n\tborder: 1px solid rgba(255, 255, 255, 0.2);\n\tbackdrop-filter: blur(10px);\n\tcolor: transparent;\n\tpadding-right: 2rem; /* space for arrow */\n\tbox-sizing: border-box;\n\t-webkit-appearance: none;\n\t-moz-appearance: none;\n\tappearance: none;\n\tcursor: pointer;\n}\n\n.selectDevice::-ms-expand {\n\tdisplay: none;\n}\n\n.selectDevice option {\n\tcolor: transparent;\n\tbackground-color: transparent;\n}\n\n.selectDevice:focus {\n\toutline: none;\n}\n\n/* Device button container styles */\n.deviceButtonContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 9999px;\n\tbackdrop-filter: blur(4px);\n}\n\n/* Device button styles */\n.deviceButton {\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n\tz-index: 10;\n\theight: 3rem;\n\twidth: 3rem;\n\tborder-radius: 9999px;\n\tbackground-color: white;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder: 1px solid transparent;\n\tcursor: pointer;\n}\n\n.deviceButtonIcon {\n\tdisplay: flex;\n}\n\n.deviceButton:disabled {\n\topacity: 0.5;\n}\n\n/* Screen reader only text */\n.srOnly {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tpadding: 0;\n\tmargin: -1px;\n\toverflow: hidden;\n\tclip: rect(0, 0, 0, 0);\n\twhite-space: nowrap;\n\tborder-width: 0;\n}\n\n/* Controls container */\n.controlsContainer {\n\tdisplay: flex;\n\tgap: 1rem;\n\tjustify-content: center;\n\talign-items: center;\n}\n\n.selectDeviceContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.selectArrow {\n\tposition: absolute;\n\tright: 1rem;\n\tpointer-events: none;\n\tdisplay: flex;\n\talign-items: center;\n\theight: 100%;\n}\n\n.screenShareButton {\n\tcursor: pointer;\n\tposition: relative;\n\theight: 3rem;\n\twidth: 3rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 9999px;\n\tbackdrop-filter: blur(4px);\n\tbackground-color: rgba(255, 255, 255, 0.2);\n\tborder: 1px solid rgba(255, 255, 255, 0.2);\n}\n";
-var componentsDependencies$5 = [
+var componentsDependencies$6 = [
 	"use-local-camera",
 	"use-local-microphone",
 	"use-local-screenshare"
 ];
-var controls$1 = {
+var deviceSelect$1 = {
 	type: type$q,
 	content: content$q,
 	styles: styles$q,
-	componentsDependencies: componentsDependencies$5
+	componentsDependencies: componentsDependencies$6
 };
 
 var type$p = "components";
-var content$p = "import React, { useEffect } from \"react\";\nimport {\n\tDailyAudio,\n\tDailyVideo,\n\tuseDaily,\n\tuseDevices,\n\tuseLocalSessionId,\n\tuseMeetingState,\n\tuseScreenVideoTrack,\n\tuseVideoTrack\n} from \"@daily-co/daily-react\";\nimport { MicrophoneButton, CameraButton, ScreenShareButton } from '../controls'\nimport { useLocalScreenshare } from \"../../hooks/use-local-screenshare\";\nimport { useReplicaIDs } from \"../../hooks/use-replica-ids\";\nimport { AudioWave } from \"../audio-wave\";\n\nimport styles from \"./conversation.module.css\";\n\ninterface ConversationData {\n\tconversation_id: string;\n\tconversation_name: string;\n\tstatus: 'active' | 'ended' | 'error';\n\tconversation_url: string;\n\treplica_id: string | null;\n\tpersona_id: string | null;\n\tcreated_at: string;\n}\n\ninterface ConversationProps {\n\tonLeave: () => void;\n\tconversation: ConversationData;\n}\n\nconst VideoPreview = React.memo(({ id }: { id: string }) => {\n\tconst videoState = useVideoTrack(id);\n\tconst widthVideo = videoState.track?.getSettings()?.width;\n\tconst heightVideo = videoState.track?.getSettings()?.height;\n\tconst isVertical = widthVideo && heightVideo ? widthVideo < heightVideo : false;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.previewVideoContainer} ${isVertical ? styles.previewVideoContainerVertical : ''} ${videoState.isOff ? styles.previewVideoContainerHidden : ''}`}\n\t\t>\n\t\t\t<DailyVideo\n\t\t\t\tautomirror\n\t\t\t\tsessionId={id}\n\t\t\t\ttype=\"video\"\n\t\t\t\tclassName={`${styles.previewVideo} ${isVertical ? styles.previewVideoVertical : ''} ${videoState.isOff ? styles.previewVideoHidden : ''}`}\n\t\t\t/>\n\t\t\t<div className={styles.audioWaveContainer}>\n\t\t\t\t<AudioWave id={id} />\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nconst PreviewVideos = React.memo(() => {\n\tconst localId = useLocalSessionId();\n\tconst { isScreenSharing } = useLocalScreenshare();\n\tconst replicaIds = useReplicaIDs();\n\tconst replicaId = replicaIds[0];\n\n\treturn (\n\t\t<>\n\t\t\t{isScreenSharing && (\n\t\t\t\t<VideoPreview id={replicaId} />\n\t\t\t)}\n\t\t\t<VideoPreview id={localId} />\n\t\t</>\n\t);\n});\n\nconst MainVideo = React.memo(() => {\n\tconst replicaIds = useReplicaIDs();\n\tconst localId = useLocalSessionId();\n\tconst videoState = useVideoTrack(replicaIds[0]);\n\tconst screenVideoState = useScreenVideoTrack(localId);\n\tconst isScreenSharing = !screenVideoState.isOff;\n\t// This is one to one call, so we can use the first replica id\n\tconst replicaId = replicaIds[0];\n\n\tif (!replicaId) {\n\t\treturn (\n\t\t\t<div className={styles.waitingContainer}>\n\t\t\t\t<p>Connecting...</p>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Switching between replica video and screen sharing video\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.mainVideoContainer} ${isScreenSharing ? styles.mainVideoContainerScreenSharing : ''}`}\n\t\t>\n\t\t\t<DailyVideo\n\t\t\t\tautomirror\n\t\t\t\tsessionId={isScreenSharing ? localId : replicaId}\n\t\t\t\ttype={isScreenSharing ? \"screenVideo\" : \"video\"}\n\t\t\t\tclassName={`${styles.mainVideo} \n\t\t\t\t${isScreenSharing ? styles.mainVideoScreenSharing : ''} \n\t\t\t\t${videoState.isOff ? styles.mainVideoHidden : ''}`}\n\t\t\t/>\n\t\t</div>\n\t);\n});\n\nexport const Conversation = React.memo(({ onLeave, conversation }: ConversationProps) => {\n\tconst daily = useDaily();\n\tconst meetingState = useMeetingState();\n\tconst { hasMicError } = useDevices()\n\n\tuseEffect(() => {\n\t\tif (meetingState === 'error') {\n\t\t\tonLeave();\n\t\t}\n\t}, [meetingState, onLeave]);\n\n\t// Initialize call when conversation is available\n\tuseEffect(() => {\n\t\tif (conversation?.conversation_url) {\n\t\t\tdaily?.join({\n\t\t\t\turl: conversation.conversation_url,\n\t\t\t});\n\t\t}\n\t}, [conversation, daily]);\n\n\treturn (\n\t\t<div className={styles.container}>\n\t\t\t<div className={styles.videoContainer}>\n\t\t\t\t{\n\t\t\t\t\thasMicError && (\n\t\t\t\t\t\t<div className={styles.errorContainer}>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\tCamera or microphone access denied. Please check your settings and try again.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t{/* Main video */}\n\t\t\t\t<div className={styles.mainVideoContainer}>\n\t\t\t\t\t<MainVideo />\n\t\t\t\t</div>\n\n\t\t\t\t{/* Self view */}\n\t\t\t\t<div className={styles.selfViewContainer}>\n\t\t\t\t\t<PreviewVideos />\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div className={styles.footer}>\n\t\t\t\t<div className={styles.footerControls}>\n\t\t\t\t\t<MicrophoneButton />\n\t\t\t\t\t<CameraButton />\n\t\t\t\t\t<ScreenShareButton />\n\t\t\t\t\t<button type=\"button\" className={styles.leaveButton} onClick={onLeave}>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Leave Call\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M18 6L6 18M6 6L18 18\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<DailyAudio />\n\t\t</div>\n\t);\n});\n";
-var styles$p = ".container {\n\tposition: relative;\n\twidth: 100%;\n\ttext-align: center;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\taspect-ratio: 9/16;\n\toverflow: hidden;\n\tborder-radius: 0.5rem;\n\tmax-height: 90vh;\n\tbackground: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);\n\tbackground-size: 400% 400%;\n\tanimation: gradient 15s ease infinite;\n}\n\n@media (min-width: 768px) {\n\t.container {\n\t\taspect-ratio: 16/9;\n\t}\n}\n\n.errorContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: rgba(248, 250, 252, 0.08);\n\tcolor: white;\n\theight: 100%;\n\tfont-size: 1.5rem;\n\tfont-weight: 600;\n\ttext-align: center;\n}\n\n.videoContainer {\n\tposition: relative;\n\tz-index: 5;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.footer {\n\tposition: absolute;\n\tbottom: 1.5rem;\n\tleft: 0;\n\tright: 0;\n\tz-index: 20;\n}\n\n.footerControls {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 16px;\n}\n\n.leaveButton {\n\tbackground: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);\n\tcolor: white;\n\tborder: none;\n\tfont-size: 16px;\n\tcursor: pointer;\n\ttransition: all 0.3s ease;\n\theight: 3rem;\n\twidth: 3rem;\n\tborder-radius: 9999px;\n\tbackground-color: #ef4444;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.leaveButton:hover {\n\topacity: 0.8;\n}\n\n/* ReplicaVideo styles */\n.mainVideoContainer {\n\tbackground: transparent;\n\twidth: 100%;\n\theight: 100%;\n\tposition: relative;\n}\n\n.mainVideoContainerScreenSharing {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.mainVideo {\n\tposition: absolute;\n\tinset: 0;\n\tobject-position: center;\n\tobject-fit: cover !important;\n\theight: 100%;\n\twidth: 100%;\n\ttransition: all 0.3s ease;\n}\n\n.mainVideoScreenSharing {\n\tobject-fit: contain !important;\n}\n\n.mainVideoHidden {\n\tdisplay: none;\n}\n\n/* PreviewVideo styles */\n.previewVideoContainer {\n\tposition: relative;\n\tbackground: rgba(2, 6, 23, 0.3);\n\taspect-ratio: 16/9;\n\twidth: 11rem;\n\tborder-radius: 1rem;\n\toverflow: hidden;\n\tmax-height: 120px;\n\tz-index: 10;\n}\n\n@media (min-width: 768px) {\n\t.previewVideoContainer {\n\t\tmax-height: 100%;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.previewVideoContainer {\n\t\twidth: 17.875rem;\n\t}\n}\n\n.previewVideoContainerVertical {\n\theight: 40.5rem;\n\twidth: 6rem;\n}\n\n.previewVideoContainerHidden {\n\tbackground: transparent;\n\tdisplay: none;\n}\n\n.previewVideo {\n\twidth: 100%;\n\theight: auto;\n\tmax-height: 120px;\n}\n\n@media (min-width: 768px) {\n\t.previewVideo {\n\t\tmax-height: 100%;\n\t}\n}\n\n.previewVideoVertical {\n\theight: 40.5rem;\n\twidth: 6rem;\n\tobject-fit: cover;\n}\n\n.previewVideoHidden {\n\tdisplay: none;\n}\n\n/* Main video container */\n.mainVideoContainer {\n\twidth: 100%;\n\theight: 100%;\n}\n\n/* Self view container */\n.selfViewContainer {\n\tposition: absolute;\n\tbottom: 5rem;\n\tleft: 1rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-direction: column;\n\tgap: 0.75rem;\n}\n\n@media (min-width: 768px) {\n\t.selfViewContainer {\n\t\tbottom: 1rem;\n\t}\n}\n\n/* Waiting message container */\n/* Start of Selection */\n.waitingContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: transparent;\n\tcolor: white;\n\theight: 100%;\n\tfont-size: 1.5rem;\n\tfont-weight: 600;\n}\n\n@keyframes gradient {\n\t0% {\n\t\tbackground-position: 0% 50%;\n\t}\n\t50% {\n\t\tbackground-position: 100% 50%;\n\t}\n\t100% {\n\t\tbackground-position: 0% 50%;\n\t}\n}\n/* End of Selection */\n\n.audioWaveContainer {\n\tposition: absolute;\n\tbottom: 0.5rem;\n\tright: 0.5rem;\n}\n";
-var componentsDependencies$4 = [
-	"controls",
-	"use-local-screenshare",
-	"use-replica-ids",
-	"audio-wave"
+var content$p = "import React, { memo, useEffect } from \"react\";\nimport {\n  DailyVideo,\n  useDaily,\n} from \"@daily-co/daily-react\";\nimport { CameraSelectBtn, MicSelectBtn } from \"../device-select\";\nimport { useStartHaircheck } from \"../../hooks/use-start-haircheck\";\nimport { useLocalCamera } from \"../../hooks/use-local-camera\";\n\nimport styles from \"./hair-check.module.css\";\n\nconst JoinBtn = ({\n  onClick,\n  disabled,\n  className,\n  loading,\n}: {\n  loading?: boolean;\n  onClick: () => void;\n  disabled?: boolean;\n  className?: string;\n}) => {\n  return (\n    <button\n      className={`${styles.buttonJoin} ${className || ''}`}\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled || loading}\n    >\n      <div className={styles.buttonJoinInner}>\n        {loading ? \"Joining...\" : \"Join Video Chat\"}\n      </div>\n    </button>\n  );\n};\n\nexport const HairCheck = memo(({\n  isJoinBtnLoading = false,\n  onJoin,\n  onCancel,\n}: {\n  isJoinBtnLoading?: boolean;\n  onJoin: () => void;\n  onCancel?: () => void;\n}) => {\n  const daily = useDaily();\n  const { localSessionId, isCamMuted } = useLocalCamera();\n\n  const { isPermissionsPrompt,\n    isPermissionsLoading,\n    isPermissionsGranted,\n    isPermissionsDenied,\n    requestPermissions\n  } = useStartHaircheck();\n\n  useEffect(() => {\n    requestPermissions();\n  }, []);\n\n  const onCancelHairCheck = () => {\n    if (daily) {\n      daily.leave();\n    }\n    onCancel?.();\n  };\n\n  const getDescription = () => {\n    if (isPermissionsPrompt) {\n      return \"Make sure your camera and mic are ready!\";\n    }\n    if (isPermissionsLoading) {\n      return \"Getting your camera and mic ready...\";\n    }\n    if (isPermissionsDenied) {\n      return \"Camera and mic access denied. Allow permissions to continue.\";\n    }\n    return \"You're all set! Your device is ready.\";\n  };\n  return (\n    <div className={styles.haircheckBlock}>\n      {isPermissionsGranted && !isCamMuted ? (\n        <DailyVideo\n          type=\"video\"\n          sessionId={localSessionId}\n          mirror\n          className={styles.dailyVideo}\n        />\n      ) : (\n        <div className={styles.haircheckUserPlaceholder}>\n          <span className={styles.haircheckUserIcon}>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"88\"\n              height=\"89\"\n              viewBox=\"0 0 88 89\"\n              fill=\"none\"\n              aria-label=\"Haircheck User\"\n              role=\"img\"\n            >\n              <path\n                d=\"M44 48.6406C17.952 48.6406 8.80005 61.8406 8.80005 70.6406V83.8406H79.2001V70.6406C79.2001 61.8406 70.0481 48.6406 44 48.6406Z\"\n                fill=\"url(#paint0_linear_7135_21737)\"\n              />\n              <path\n                d=\"M44 44.2406C54.9352 44.2406 63.7999 35.3759 63.7999 24.4406C63.7999 13.5054 54.9352 4.64062 44 4.64062C33.0647 4.64062 24.2 13.5054 24.2 24.4406C24.2 35.3759 33.0647 44.2406 44 44.2406Z\"\n                fill=\"url(#paint1_linear_7135_21737)\"\n              />\n              <defs>\n                <linearGradient\n                  id=\"paint0_linear_7135_21737\"\n                  x1=\"36.5001\"\n                  y1=\"43\"\n                  x2=\"44.0001\"\n                  y2=\"97.5\"\n                  gradientUnits=\"userSpaceOnUse\"\n                >\n                  <stop stopColor=\"white\" />\n                  <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n                </linearGradient>\n                <linearGradient\n                  id=\"paint1_linear_7135_21737\"\n                  x1=\"44\"\n                  y1=\"4.64062\"\n                  x2=\"44\"\n                  y2=\"44.2406\"\n                  gradientUnits=\"userSpaceOnUse\"\n                >\n                  <stop stopColor=\"white\" />\n                  <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n                </linearGradient>\n              </defs>\n            </svg>\n          </span>\n        </div>\n      )}\n\n      <div className={styles.haircheckSidebar}>\n        <div className={styles.haircheckSidebarContent}>\n          {isPermissionsDenied ?\n            <button\n              type=\"button\"\n              onClick={onCancelHairCheck}\n              className={`${styles.buttonCancel} ${styles.buttonJoinMobile}`}\n            >\n              Cancel\n            </button> :\n            <JoinBtn\n              loading={isJoinBtnLoading}\n              disabled={!isPermissionsGranted}\n              className={styles.buttonJoinMobile}\n              onClick={onJoin}\n            />\n          }\n          <div />\n          <div className={styles.haircheckContent}>\n            <div className={styles.haircheckDescription}>\n              {getDescription()}\n            </div>\n            {isPermissionsDenied ?\n              <button\n                type=\"button\"\n                onClick={onCancelHairCheck}\n                className={`${styles.buttonCancel} ${styles.buttonJoinDesktop}`}\n              >\n                Cancel\n              </button> :\n              <JoinBtn\n                loading={isJoinBtnLoading}\n                disabled={!isPermissionsGranted}\n                className={styles.buttonJoinDesktop}\n                onClick={onJoin}\n              />}\n          </div>\n          <div className={styles.haircheckControls}>\n            <MicSelectBtn />\n            <CameraSelectBtn />\n          </div>\n        </div>\n      </div>\n    </div >\n  );\n});\n\nHairCheck.displayName = \"HairCheck\";\n";
+var styles$p = "/* Button Component */\n/* Start of Selection */\n.buttonCancel {\n\tpadding: 1rem;\n\tborder: 1px solid rgba(255, 255, 255, 0.1);\n\tbackground-color: rgba(239, 68, 68, 0.8);\n\tborder-radius: 9999px;\n\tcolor: white;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: all 0.2s;\n\toutline: none;\n}\n\n.buttonCancel:hover {\n\tbackground-color: rgba(239, 68, 68, 1);\n}\n/* End of Selection */\n\n/* ButtonJoin Component */\n.buttonJoin {\n\tpadding: 5px;\n\tborder: 1px solid rgba(255, 255, 255, 0.1);\n\tbackground-color: rgba(255, 255, 255, 0.1);\n\tborder-radius: 9999px;\n\tcolor: white;\n\theight: 3.625rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: 500;\n\tcursor: pointer;\n}\n\n.buttonJoinInner {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground-color: #32c75c;\n\tborder-radius: 9999px;\n\tpadding: 1rem;\n\tbox-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n\theight: 3rem;\n\ttransition: background-color 0.2s;\n\tfont-weight: 500;\n\tmin-width: 8.5rem;\n}\n\n.buttonJoin:hover .buttonJoinInner {\n\tbackground-color: rgba(62, 192, 97, 0.9);\n}\n\n.buttonJoin:disabled .buttonJoinInner {\n\tbackground-color: rgba(34, 197, 94, 0.5);\n\tcursor: not-allowed;\n}\n\n.buttonJoinDesktop {\n\tdisplay: none;\n}\n\n@media (min-width: 768px) {\n\t.buttonJoinDesktop {\n\t\tdisplay: flex;\n\t}\n}\n\n.buttonJoinMobile {\n\tposition: absolute;\n\ttop: -5.125rem;\n\tleft: 50%;\n\ttransform: translateX(-50%);\n\tz-index: 20;\n}\n\n@media (min-width: 768px) {\n\t.buttonJoinMobile {\n\t\tdisplay: none;\n\t}\n}\n\n/* HaircheckScreen Component */\n.haircheckBlock {\n\tposition: relative;\n\twidth: 100%;\n\ttext-align: center;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\taspect-ratio: 9/16;\n\toverflow: hidden;\n\tborder-radius: 0.5rem;\n\tmax-height: 90vh;\n}\n\n@media (min-width: 768px) {\n\t.haircheckBlock {\n\t\taspect-ratio: 16/9;\n\t}\n}\n\n.dailyVideo {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover !important;\n\tposition: absolute;\n\tinset: 0;\n\ttransition: opacity 0.3s ease-in-out;\n}\n\n.haircheckUserPlaceholder {\n\tposition: absolute;\n\tinset: 0;\n  background: linear-gradient(135deg, #4b5563 0%, #1f2937 100%);\n\tz-index: 5;\n\tpointer-events: none;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.haircheckUserIcon {\n\twidth: 12.5rem;\n\theight: 12.5rem;\n\tborder-radius: 9999px;\n\tbackground-color: rgba(255, 255, 255, 0.1);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.haircheckSidebar {\n\tposition: absolute;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\twidth: 100%;\n\tbackground-color: rgba(2, 6, 23, 0.45);\n\tbackdrop-filter: blur(20px);\n\tborder-left: 1px solid rgba(255, 255, 255, 0.2);\n\tz-index: 5;\n}\n\n@media (min-width: 768px) {\n\t.haircheckSidebar {\n\t\tleft: auto;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: 17.5rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.haircheckSidebar {\n\t\twidth: 23rem;\n\t}\n}\n\n.haircheckSidebarContent {\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 1.5rem 1.25rem;\n\tgap: 1.5rem;\n\twidth: 100%;\n\theight: 100%;\n}\n\n@media (min-width: 768px) {\n\t.haircheckSidebarContent {\n\t\tpadding: 1rem 1.25rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.haircheckSidebarContent {\n\t\tpadding: 2rem 1.25rem;\n\t}\n}\n\n.haircheckContent {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 2rem;\n}\n\n.haircheckDescription {\n\tcolor: #ffffff;\n\tfont-size: 1.125rem;\n\tfont-weight: 500;\n}\n\n@media (min-width: 768px) {\n\t.haircheckDescription {\n\t\tfont-size: 1.25rem;\n\t}\n}\n\n.haircheckControls {\n\tdisplay: flex;\n\talign-items: flex-end;\n\tjustify-content: space-between;\n\tgap: 1rem;\n}\n";
+var componentsDependencies$5 = [
+	"device-select",
+	"use-start-haircheck",
+	"use-local-camera",
+	"cvi-provider"
 ];
-var conversation01$1 = {
+var hairCheck01$1 = {
 	type: type$p,
 	content: content$p,
 	styles: styles$p,
-	componentsDependencies: componentsDependencies$4
+	componentsDependencies: componentsDependencies$5
 };
 
 var type$o = "components";
-var content$o = "import { DailyProvider } from \"@daily-co/daily-react\";\n\nexport const CVIProvider = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <DailyProvider>\n      {children}\n    </DailyProvider>\n  )\n}\n";
-var styles$o = "";
-var cviProvider$1 = {
+var content$o = "import React, { memo } from \"react\";\nimport { useLocalCamera } from \"../../hooks/use-local-camera\";\nimport { useLocalMicrophone } from \"../../hooks/use-local-microphone\";\nimport { useLocalScreenshare } from \"../../hooks/use-local-screenshare\";\n\nimport styles from \"./media-controls.module.css\";\n\nexport const MicToggleButton = memo(() => {\n  const { onToggleMicrophone, isMicReady, isMicMuted } = useLocalMicrophone();\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onToggleMicrophone}\n      disabled={!isMicReady}\n      className={styles.deviceButton}\n    >\n      <span className={styles.deviceButtonIcon}>\n        {isMicMuted || !isMicReady ? (\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            role=\"img\"\n            aria-label=\"Microphone Muted\"\n          >\n            <path\n              d=\"M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 18.1339 14.0992 18.1339 14.0992M12 18V21\"\n              stroke=\"#020617\"\n              strokeWidth=\"1.66667\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n            <rect\n              x=\"1.30225\"\n              y=\"3\"\n              width=\"26\"\n              height=\"2.24738\"\n              rx=\"1.12369\"\n              transform=\"rotate(30 1.30225 3)\"\n              fill=\"#020617\"\n            />\n            <path\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n              d=\"M9 9.39031V11C9 11.7956 9.31607 12.5587 9.87868 13.1213C10.4413 13.6839 11.2044 14 12 14C12.7956 14 13.5587 13.6839 14.1213 13.1213C14.2829 12.9597 14.4242 12.7816 14.5435 12.5908L9 9.39031ZM15 7.71466V6C15 5.20435 14.6839 4.44129 14.1213 3.87868C13.5587 3.31607 12.7956 3 12 3C11.2044 3 10.4413 3.31607 9.87868 3.87868C9.69528 4.06208 9.53807 4.26678 9.40948 4.48697L15 7.71466Z\"\n              fill=\"#020617\"\n            />\n            <path\n              d=\"M9 9.39031L9.41667 8.66862C9.15883 8.51976 8.84117 8.51976 8.58333 8.66862C8.3255 8.81748 8.16667 9.09259 8.16667 9.39031H9ZM9.87868 13.1213L9.28942 13.7106H9.28942L9.87868 13.1213ZM14.1213 13.1213L14.7106 13.7106L14.7106 13.7106L14.1213 13.1213ZM14.5435 12.5908L15.25 13.0327C15.3699 12.841 15.4068 12.6088 15.3521 12.3894C15.2974 12.17 15.156 11.9822 14.9601 11.8692L14.5435 12.5908ZM15 7.71466L14.5833 8.43635C14.8412 8.58521 15.1588 8.58521 15.4167 8.43635C15.6745 8.28749 15.8333 8.01238 15.8333 7.71466H15ZM14.1213 3.87868L14.7106 3.28942L14.7106 3.28942L14.1213 3.87868ZM9.87868 3.87868L9.28942 3.28942L9.28942 3.28942L9.87868 3.87868ZM9.40948 4.48697L8.68988 4.06671C8.57806 4.25818 8.54715 4.48633 8.604 4.70065C8.66086 4.91497 8.80078 5.09779 8.99281 5.20866L9.40948 4.48697ZM9.83333 11V9.39031H8.16667V11H9.83333ZM10.4679 12.5321C10.0616 12.1257 9.83333 11.5746 9.83333 11H8.16667C8.16667 12.0167 8.57053 12.9917 9.28942 13.7106L10.4679 12.5321ZM12 13.1667C11.4254 13.1667 10.8743 12.9384 10.4679 12.5321L9.28942 13.7106C10.0083 14.4295 10.9833 14.8333 12 14.8333V13.1667ZM13.5321 12.5321C13.1257 12.9384 12.5746 13.1667 12 13.1667V14.8333C13.0167 14.8333 13.9917 14.4295 14.7106 13.7106L13.5321 12.5321ZM13.837 12.149C13.7508 12.2867 13.6488 12.4153 13.5321 12.5321L14.7106 13.7106C14.917 13.5041 15.0976 13.2764 15.25 13.0327L13.837 12.149ZM14.9601 11.8692L9.41667 8.66862L8.58333 10.112L14.1268 13.3125L14.9601 11.8692ZM14.1667 6V7.71466H15.8333V6H14.1667ZM13.5321 4.46794C13.9384 4.87426 14.1667 5.42536 14.1667 6H15.8333C15.8333 4.98334 15.4295 4.00831 14.7106 3.28942L13.5321 4.46794ZM12 3.83333C12.5746 3.83333 13.1257 4.06161 13.5321 4.46794L14.7106 3.28942C13.9917 2.57053 13.0167 2.16667 12 2.16667V3.83333ZM10.4679 4.46794C10.8743 4.06161 11.4254 3.83333 12 3.83333V2.16667C10.9833 2.16667 10.0083 2.57053 9.28942 3.28942L10.4679 4.46794ZM10.1291 4.90724C10.2219 4.74824 10.3354 4.60042 10.4679 4.46794L9.28942 3.28942C9.05511 3.52374 8.85421 3.78533 8.68988 4.06671L10.1291 4.90724ZM8.99281 5.20866L14.5833 8.43635L15.4167 6.99298L9.82615 3.76529L8.99281 5.20866Z\"\n              fill=\"#020617\"\n            />\n          </svg>\n        ) : (\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            role=\"img\"\n            aria-label=\"Microphone\"\n          >\n            <path\n              d=\"M9 6C9 5.20435 9.31607 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3C12.7956 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6V11C15 11.7956 14.6839 12.5587 14.1213 13.1213C13.5587 13.6839 12.7956 14 12 14C11.2044 14 10.4413 13.6839 9.87868 13.1213C9.31607 12.5587 9 11.7956 9 11V6Z\"\n              fill=\"#020617\"\n              stroke=\"#020617\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n            <path\n              d=\"M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 19 12.8565 19 11V10M12 18V21\"\n              stroke=\"#020617\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        )}\n      </span>\n      <span className={styles.srOnly}>Microphone</span>\n    </button>\n  );\n});\n\nMicToggleButton.displayName = \"MicToggleButton\";\n\nexport const CameraToggleButton = memo(() => {\n  const { onToggleCamera, isCamReady, isCamMuted } = useLocalCamera();\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onToggleCamera}\n      disabled={!isCamReady}\n      className={styles.deviceButton}\n    >\n      <span className={styles.deviceButtonIcon}>\n        {isCamMuted ? (\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            role=\"img\"\n            aria-label=\"Camera Muted\"\n          >\n            <g clipPath=\"url(#clip0_7082_14220)\">\n              <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M3.19874 5.60093C3.08628 5.68537 2.97928 5.77808 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V15.048C17.7787 14.8204 17.5304 14.6189 17.2595 14.4485L3.19874 5.60093ZM22 12.655V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H8.7412L22 12.655Z\"\n                fill=\"#020617\"\n              />\n              <rect\n                x=\"0.777222\"\n                y=\"2.64844\"\n                width=\"26.7988\"\n                height=\"2.24738\"\n                rx=\"1.12369\"\n                transform=\"rotate(30 0.777222 2.64844)\"\n                fill=\"#020617\"\n              />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_7082_14220\">\n                <rect width=\"24\" height=\"24\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        ) : (\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            role=\"img\"\n            aria-label=\"Camera\"\n          >\n            <path\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n              d=\"M5 5C4.20435 5 3.44129 5.31607 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V14.414L20.293 16.707C20.4329 16.8468 20.611 16.942 20.805 16.9806C20.9989 17.0192 21.2 16.9993 21.3827 16.9237C21.5654 16.848 21.7215 16.7199 21.8314 16.5555C21.9413 16.391 22 16.1978 22 16V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H5Z\"\n              fill=\"#020617\"\n            />\n          </svg>\n        )}\n      </span>\n      <span className={styles.srOnly}>Camera</span>\n    </button>\n  );\n});\n\nCameraToggleButton.displayName = \"CameraToggleButton\";\n\nexport const ScreenShareButton = memo(() => {\n  const { onToggleScreenshare, isScreenSharing } = useLocalScreenshare();\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onToggleScreenshare}\n      className={`${styles.deviceButtonContainer} ${styles.screenShareButton}`}\n    >\n      <span>\n        {isScreenSharing ? (\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            role=\"img\"\n            aria-label=\"Screen Share\"\n          >\n            <path\n              d=\"M21.0008 19C21.2557 19.0003 21.5009 19.0979 21.6862 19.2728C21.8715 19.4478 21.9831 19.687 21.998 19.9414C22.013 20.1958 21.9302 20.4464 21.7666 20.6418C21.603 20.8373 21.3709 20.9629 21.1178 20.993L21.0008 21H3.00085C2.74597 20.9997 2.50081 20.9021 2.31548 20.7272C2.13014 20.5522 2.01861 20.313 2.00367 20.0586C1.98874 19.8042 2.07152 19.5536 2.23511 19.3582C2.3987 19.1627 2.63075 19.0371 2.88385 19.007L3.00085 19H21.0008ZM19.0008 4C19.5054 3.99984 19.9914 4.19041 20.3614 4.5335C20.7314 4.87659 20.958 5.34684 20.9958 5.85L21.0008 6V16C21.001 16.5046 20.8104 16.9906 20.4673 17.3605C20.1243 17.7305 19.654 17.9572 19.1508 17.995L19.0008 18H5.00085C4.49627 18.0002 4.01028 17.8096 3.6403 17.4665C3.27032 17.1234 3.04369 16.6532 3.00585 16.15L3.00085 16V6C3.00069 5.49542 3.19125 5.00943 3.53434 4.63945C3.87743 4.26947 4.34769 4.04284 4.85085 4.005L5.00085 4H19.0008Z\"\n              fill=\"#2D65FF\"\n            />\n          </svg>\n        ) : (\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            role=\"img\"\n            aria-label=\"Screen Share\"\n          >\n            <path\n              d=\"M20.9999 19C21.2547 19.0003 21.4999 19.0979 21.6852 19.2728C21.8706 19.4478 21.9821 19.687 21.997 19.9414C22.012 20.1958 21.9292 20.4464 21.7656 20.6418C21.602 20.8373 21.37 20.9629 21.1169 20.993L20.9999 21H2.99987C2.74499 20.9997 2.49984 20.9021 2.3145 20.7272C2.12916 20.5522 2.01763 20.313 2.0027 20.0586C1.98776 19.8042 2.07054 19.5536 2.23413 19.3582C2.39772 19.1627 2.62977 19.0371 2.88287 19.007L2.99987 19H20.9999ZM18.9999 4C19.5044 3.99984 19.9904 4.19041 20.3604 4.5335C20.7304 4.87659 20.957 5.34684 20.9949 5.85L20.9999 6V16C21 16.5046 20.8095 16.9906 20.4664 17.3605C20.1233 17.7305 19.653 17.9572 19.1499 17.995L18.9999 18H4.99987C4.49529 18.0002 4.0093 17.8096 3.63932 17.4665C3.26934 17.1234 3.04271 16.6532 3.00487 16.15L2.99987 16V6C2.99971 5.49542 3.19028 5.00943 3.53337 4.63945C3.87646 4.26947 4.34671 4.04284 4.84987 4.005L4.99987 4H18.9999Z\"\n              fill=\"white\"\n            />\n          </svg>\n        )}\n      </span>\n    </button>\n  );\n});\n\nScreenShareButton.displayName = \"ScreenShareButton\";";
+var styles$o = "/* Device button styles */\n.deviceButton {\n  position: relative;\n  z-index: 10;\n  height: 3rem;\n  width: 3rem;\n  border-radius: 9999px;\n  background-color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid transparent;\n  cursor: pointer;\n}\n\n.deviceButtonIcon {\n  display: flex;\n}\n\n.deviceButton:disabled {\n  opacity: 0.5;\n}\n\n/* Screen reader only text */\n.srOnly {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n.screenShareButton {\n\tcursor: pointer;\n\tposition: relative;\n\theight: 3rem;\n\twidth: 3rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 9999px;\n\tbackdrop-filter: blur(4px);\n\tbackground-color: rgba(255, 255, 255, 0.2);\n\tborder: 1px solid rgba(255, 255, 255, 0.2);\n}";
+var componentsDependencies$4 = [
+	"use-local-camera",
+	"use-local-microphone",
+	"use-local-screenshare"
+];
+var mediaControls$1 = {
 	type: type$o,
 	content: content$o,
-	styles: styles$o
+	styles: styles$o,
+	componentsDependencies: componentsDependencies$4
 };
 
-var type$n = "components";
-var content$n = "import React, { memo, useEffect } from \"react\";\nimport {\n  DailyVideo,\n  useDaily,\n} from \"@daily-co/daily-react\";\nimport { CameraButton, MicrophoneButton } from \"../controls\";\nimport { useStartHaircheck } from \"../../hooks/use-start-haircheck\";\nimport { useLocalCamera } from \"../../hooks/use-local-camera\";\n\nimport styles from \"./hair-check.module.css\";\n\nconst JoinBtn = ({\n  onClick,\n  disabled,\n  className,\n  loading,\n}: {\n  loading?: boolean;\n  onClick: () => void;\n  disabled?: boolean;\n  className?: string;\n}) => {\n  return (\n    <button\n      className={`${styles.buttonJoin} ${className || ''}`}\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled || loading}\n    >\n      <div className={styles.buttonJoinInner}>\n        {loading ? \"Joining...\" : \"Join Video Chat\"}\n      </div>\n    </button>\n  );\n};\n\nexport const HairCheck = memo(({\n  isJoinBtnLoading = false,\n  onJoin,\n  onCancel,\n}: {\n  isJoinBtnLoading?: boolean;\n  onJoin: () => void;\n  onCancel?: () => void;\n}) => {\n  const daily = useDaily();\n  const { localSessionId, isCamMuted } = useLocalCamera();\n\n  const { isPermissionsPrompt,\n    isPermissionsLoading,\n    isPermissionsGranted,\n    isPermissionsDenied,\n    requestPermissions\n  } = useStartHaircheck();\n\n  useEffect(() => {\n    requestPermissions();\n  }, []);\n\n  const onCancelHairCheck = () => {\n    if (daily) {\n      daily.leave();\n    }\n    onCancel?.();\n  };\n\n  const getDescription = () => {\n    if (isPermissionsPrompt) {\n      return \"Make sure your camera and mic are ready!\";\n    }\n    if (isPermissionsLoading) {\n      return \"Getting your camera and mic ready...\";\n    }\n    if (isPermissionsDenied) {\n      return \"Camera and mic access denied. Allow permissions to continue.\";\n    }\n    return \"You're all set! Your device is ready.\";\n  };\n  return (\n    <div className={styles.haircheckBlock}>\n      {isPermissionsGranted && !isCamMuted ? (\n        <DailyVideo\n          type=\"video\"\n          sessionId={localSessionId}\n          mirror\n          className={styles.dailyVideo}\n        />\n      ) : (\n        <div className={styles.haircheckUserPlaceholder}>\n          <span className={styles.haircheckUserIcon}>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"88\"\n              height=\"89\"\n              viewBox=\"0 0 88 89\"\n              fill=\"none\"\n              aria-label=\"Haircheck User\"\n              role=\"img\"\n            >\n              <path\n                d=\"M44 48.6406C17.952 48.6406 8.80005 61.8406 8.80005 70.6406V83.8406H79.2001V70.6406C79.2001 61.8406 70.0481 48.6406 44 48.6406Z\"\n                fill=\"url(#paint0_linear_7135_21737)\"\n              />\n              <path\n                d=\"M44 44.2406C54.9352 44.2406 63.7999 35.3759 63.7999 24.4406C63.7999 13.5054 54.9352 4.64062 44 4.64062C33.0647 4.64062 24.2 13.5054 24.2 24.4406C24.2 35.3759 33.0647 44.2406 44 44.2406Z\"\n                fill=\"url(#paint1_linear_7135_21737)\"\n              />\n              <defs>\n                <linearGradient\n                  id=\"paint0_linear_7135_21737\"\n                  x1=\"36.5001\"\n                  y1=\"43\"\n                  x2=\"44.0001\"\n                  y2=\"97.5\"\n                  gradientUnits=\"userSpaceOnUse\"\n                >\n                  <stop stopColor=\"white\" />\n                  <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n                </linearGradient>\n                <linearGradient\n                  id=\"paint1_linear_7135_21737\"\n                  x1=\"44\"\n                  y1=\"4.64062\"\n                  x2=\"44\"\n                  y2=\"44.2406\"\n                  gradientUnits=\"userSpaceOnUse\"\n                >\n                  <stop stopColor=\"white\" />\n                  <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n                </linearGradient>\n              </defs>\n            </svg>\n          </span>\n        </div>\n      )}\n\n      <div className={styles.haircheckSidebar}>\n        <div className={styles.haircheckSidebarContent}>\n          {isPermissionsDenied ?\n            <button\n              type=\"button\"\n              onClick={onCancelHairCheck}\n              className={`${styles.buttonCancel} ${styles.buttonJoinMobile}`}\n            >\n              Cancel\n            </button> :\n            <JoinBtn\n              loading={isJoinBtnLoading}\n              disabled={!isPermissionsGranted}\n              className={styles.buttonJoinMobile}\n              onClick={onJoin}\n            />\n          }\n          <div />\n          <div className={styles.haircheckContent}>\n            <div className={styles.haircheckDescription}>\n              {getDescription()}\n            </div>\n            {isPermissionsDenied ?\n              <button\n                type=\"button\"\n                onClick={onCancelHairCheck}\n                className={`${styles.buttonCancel} ${styles.buttonJoinDesktop}`}\n              >\n                Cancel\n              </button> :\n              <JoinBtn\n                loading={isJoinBtnLoading}\n                disabled={!isPermissionsGranted}\n                className={styles.buttonJoinDesktop}\n                onClick={onJoin}\n              />}\n          </div>\n          <div className={styles.haircheckControls}>\n            <MicrophoneButton />\n            <CameraButton />\n          </div>\n        </div>\n      </div>\n    </div >\n  );\n});\n\nHairCheck.displayName = \"HairCheck\";\n";
-var styles$n = "/* Button Component */\n/* Start of Selection */\n.buttonCancel {\n\tpadding: 1rem;\n\tborder: 1px solid rgba(255, 255, 255, 0.1);\n\tbackground-color: rgba(239, 68, 68, 0.8);\n\tborder-radius: 9999px;\n\tcolor: white;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: all 0.2s;\n\toutline: none;\n}\n\n.buttonCancel:hover {\n\tbackground-color: rgba(239, 68, 68, 1);\n}\n/* End of Selection */\n\n/* ButtonJoin Component */\n.buttonJoin {\n\tpadding: 5px;\n\tborder: 1px solid rgba(255, 255, 255, 0.1);\n\tbackground-color: rgba(255, 255, 255, 0.1);\n\tborder-radius: 9999px;\n\tcolor: white;\n\theight: 3.625rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: 500;\n\tcursor: pointer;\n}\n\n.buttonJoinInner {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground-color: #32c75c;\n\tborder-radius: 9999px;\n\tpadding: 1rem;\n\tbox-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n\theight: 3rem;\n\ttransition: background-color 0.2s;\n\tfont-weight: 500;\n\tmin-width: 8.5rem;\n}\n\n.buttonJoin:hover .buttonJoinInner {\n\tbackground-color: rgba(62, 192, 97, 0.9);\n}\n\n.buttonJoin:disabled .buttonJoinInner {\n\tbackground-color: rgba(34, 197, 94, 0.5);\n\tcursor: not-allowed;\n}\n\n.buttonJoinDesktop {\n\tdisplay: none;\n}\n\n@media (min-width: 768px) {\n\t.buttonJoinDesktop {\n\t\tdisplay: flex;\n\t}\n}\n\n.buttonJoinMobile {\n\tposition: absolute;\n\ttop: -5.125rem;\n\tleft: 50%;\n\ttransform: translateX(-50%);\n\tz-index: 20;\n}\n\n@media (min-width: 768px) {\n\t.buttonJoinMobile {\n\t\tdisplay: none;\n\t}\n}\n\n/* HaircheckScreen Component */\n.haircheckBlock {\n\tposition: relative;\n\twidth: 100%;\n\ttext-align: center;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\taspect-ratio: 9/16;\n\toverflow: hidden;\n\tborder-radius: 0.5rem;\n\tmax-height: 90vh;\n}\n\n@media (min-width: 768px) {\n\t.haircheckBlock {\n\t\taspect-ratio: 16/9;\n\t}\n}\n\n.dailyVideo {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover !important;\n\tposition: absolute;\n\tinset: 0;\n\ttransition: opacity 0.3s ease-in-out;\n}\n\n.haircheckUserPlaceholder {\n\tposition: absolute;\n\tinset: 0;\n\tbackground-color: #334155;\n\tz-index: 5;\n\tpointer-events: none;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.haircheckUserIcon {\n\twidth: 12.5rem;\n\theight: 12.5rem;\n\tborder-radius: 9999px;\n\tbackground-color: rgba(255, 255, 255, 0.1);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.haircheckSidebar {\n\tposition: absolute;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\twidth: 100%;\n\tbackground-color: rgba(2, 6, 23, 0.45);\n\tbackdrop-filter: blur(20px);\n\tborder-left: 1px solid rgba(255, 255, 255, 0.2);\n\tz-index: 5;\n}\n\n@media (min-width: 768px) {\n\t.haircheckSidebar {\n\t\tleft: auto;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: 17.5rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.haircheckSidebar {\n\t\twidth: 23rem;\n\t}\n}\n\n.haircheckSidebarContent {\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 1.5rem 1.25rem;\n\tgap: 1.5rem;\n\twidth: 100%;\n\theight: 100%;\n}\n\n@media (min-width: 768px) {\n\t.haircheckSidebarContent {\n\t\tpadding: 1rem 1.25rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.haircheckSidebarContent {\n\t\tpadding: 2rem 1.25rem;\n\t}\n}\n\n.haircheckContent {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 2rem;\n}\n\n.haircheckDescription {\n\tcolor: #ffffff;\n\tfont-size: 1.125rem;\n\tfont-weight: 500;\n}\n\n@media (min-width: 768px) {\n\t.haircheckDescription {\n\t\tfont-size: 1.25rem;\n\t}\n}\n\n.haircheckControls {\n\tdisplay: flex;\n\talign-items: flex-end;\n\tjustify-content: space-between;\n\tgap: 1rem;\n}\n";
-var componentsDependencies$3 = [
-	"controls",
-	"use-start-haircheck",
-	"use-local-camera"
-];
-var hairCheck01$1 = {
+var type$n = "hooks";
+var content$n = "import { useCallback } from \"react\";\nimport { useAppMessage, useDailyEvent } from \"@daily-co/daily-react\";\n\ntype AppMessageUtterance = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.utterance\",\n  \"conversation_id\": string,\n  \"inference_id\": string,\n  \"properties\": {\n    \"role\": \"user\" | \"replica\",\n    \"speech\": string,\n    \"visual_context\": string\n  }\n}\n\ntype AppMessageToolCall<T> = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.tool_call\",\n  \"conversation_id\": string,\n  \"inference_id\": string,\n  \"properties\": T\n}\n\ntype AppMessagePerceptionToolCall<T> = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.perception_tool_call\",\n  \"conversation_id\": string,\n  \"properties\": T\n}\n\ntype AppMessagePerceptionAnalysis = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.perception_analysis\",\n  \"conversation_id\": string,\n  \"properties\": {\n    \"analysis\": string\n  }\n}\n\ntype AppMessageReplicaStartedSpeaking = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.replica.started_speaking\",\n  \"inference_id\": string\n}\n\ntype AppMessageReplicaStoppedSpeaking = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.replica.stopped_speaking\",\n  \"inference_id\": string\n}\n\ntype AppMessageUserStartedSpeaking = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.user.started_speaking\",\n  \"inference_id\": string\n}\n\ntype AppMessageUserStoppedSpeaking = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.user.stopped_speaking\",\n  \"inference_id\": string\n}\n\ntype AppMessageReplicaInterrupted = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.replica_interrupted\",\n  \"conversation_id\": string,\n  \"inference_id\": string\n}\n\ntype AppMessage<T> = {\n  data: AppMessageUtterance |\n  AppMessageToolCall<T> |\n  AppMessagePerceptionToolCall<T> |\n  AppMessagePerceptionAnalysis |\n  AppMessageReplicaStartedSpeaking |\n  AppMessageReplicaStoppedSpeaking |\n  AppMessageUserStartedSpeaking |\n  AppMessageUserStoppedSpeaking |\n  AppMessageReplicaInterrupted\n};\n\nexport function useObservableEvent<T>(callback: (event: AppMessage<T>['data']) => void): void {\n  return useDailyEvent(\n    \"app-message\",\n    useCallback(\n      (event: AppMessage<T>) => {\n        callback(event.data);\n      },\n      [callback],\n    ),\n  )\n}\n\ntype AppMessageEcho = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.echo\",\n  \"conversation_id\": string,\n  \"properties\": {\n    \"modality\": \"audio\" | \"text\",\n    \"text\"?: string,\n    \"audio\"?: string,\n    \"sample_rate\"?: number,\n    \"inference_id\"?: string,\n    \"done\"?: boolean\n  }\n}\n\ntype AppMessageRespond = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.respond\",\n  \"conversation_id\": string,\n  \"properties\": {\n    \"text\": string\n  }\n}\n\ntype AppMessageInterrupt = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.interrupt\",\n  \"conversation_id\": string\n}\n\ntype AppMessageOverwriteLlmContext = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.overwrite_llm_context\",\n  \"conversation_id\": string,\n  \"properties\": {\n    \"context\": string\n  }\n}\n\ntype AppMessageAppendLlmContext = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.append_llm_context\",\n  \"conversation_id\": string,\n  \"properties\": {\n    \"context\": string\n  }\n}\n\ntype Sensitivity = \"superlow\" | \"verylow\" | \"low\" | \"medium\" | \"high\" | \"auto\"\n\ntype AppMessageSensitivity = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.sensitivity\",\n  \"conversation_id\": string,\n  \"properties\": {\n    \"participant_pause_sensitivity\": Sensitivity,\n    \"participant_interrupt_sensitivity\": Sensitivity\n  }\n}\n\ntype SendAppMessageProps =\n  AppMessageEcho |\n  AppMessageRespond |\n  AppMessageInterrupt |\n  AppMessageOverwriteLlmContext |\n  AppMessageAppendLlmContext |\n  AppMessageSensitivity\n\nexport function useSendAppMessage(): (message: SendAppMessageProps) => void {\n  const sendAppMessage = useAppMessage();\n\n  return useCallback((message: SendAppMessageProps) => {\n    sendAppMessage(message, '*');\n  }, [sendAppMessage]);\n}";
+var styles$n = "";
+var cviEventsHooks$1 = {
 	type: type$n,
 	content: content$n,
-	styles: styles$n,
-	componentsDependencies: componentsDependencies$3
+	styles: styles$n
 };
 
 var type$m = "hooks";
-var content$m = "import { useCallback } from \"react\";\nimport { useAppMessage, useDailyEvent } from \"@daily-co/daily-react\";\n\ntype AppMessageUtterance = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.utterance\",\n  \"conversation_id\": string,\n  \"inference_id\": string,\n  \"properties\": {\n    \"role\": \"user\" | \"replica\",\n    \"speech\": string,\n    \"visual_context\": string\n  }\n}\n\ntype AppMessageToolCall<T> = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.tool_call\",\n  \"conversation_id\": string,\n  \"inference_id\": string,\n  \"properties\": T\n}\n\ntype AppMessagePerceptionToolCall<T> = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.perception_tool_call\",\n  \"conversation_id\": string,\n  \"properties\": T\n}\n\ntype AppMessagePerceptionAnalysis = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.perception_analysis\",\n  \"conversation_id\": string,\n  \"properties\": {\n    \"analysis\": string\n  }\n}\n\ntype AppMessageReplicaStartedSpeaking = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.replica.started_speaking\",\n  \"inference_id\": string\n}\n\ntype AppMessageReplicaStoppedSpeaking = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.replica.stopped_speaking\",\n  \"inference_id\": string\n}\n\ntype AppMessageUserStartedSpeaking = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.user.started_speaking\",\n  \"inference_id\": string\n}\n\ntype AppMessageUserStoppedSpeaking = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.user.stopped_speaking\",\n  \"inference_id\": string\n}\n\ntype AppMessageReplicaInterrupted = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.replica_interrupted\",\n  \"conversation_id\": string,\n  \"inference_id\": string\n}\n\ntype AppMessage<T> = {\n  data: AppMessageUtterance |\n  AppMessageToolCall<T> |\n  AppMessagePerceptionToolCall<T> |\n  AppMessagePerceptionAnalysis |\n  AppMessageReplicaStartedSpeaking |\n  AppMessageReplicaStoppedSpeaking |\n  AppMessageUserStartedSpeaking |\n  AppMessageUserStoppedSpeaking |\n  AppMessageReplicaInterrupted\n};\n\nexport function useObservableEvent<T>(callback: (event: AppMessage<T>['data']) => void): void {\n  return useDailyEvent(\n    \"app-message\",\n    useCallback(\n      (event: AppMessage<T>) => {\n        callback(event.data);\n      },\n      [callback],\n    ),\n  )\n}\n\ntype AppMessageEcho = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.echo\",\n  \"conversation_id\": string,\n  \"properties\": {\n    \"modality\": \"audio\" | \"text\",\n    \"text\": string,\n    \"audio\": string,\n    \"sample_rate\": number,\n    \"inference_id\": string,\n    \"done\": boolean\n  }\n}\n\ntype AppMessageRespond = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.respond\",\n  \"conversation_id\": string,\n  \"properties\": {\n    \"text\": string\n  }\n}\n\ntype AppMessageInterrupt = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.interrupt\",\n  \"conversation_id\": string\n}\n\ntype AppMessageOverwriteLlmContext = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.overwrite_llm_context\",\n  \"conversation_id\": string,\n  \"properties\": {\n    \"context\": string\n  }\n}\n\ntype AppMessageAppendLlmContext = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.append_llm_context\",\n  \"conversation_id\": string,\n  \"properties\": {\n    \"context\": string\n  }\n}\n\ntype Sensitivity = \"superlow\" | \"verylow\" | \"low\" | \"medium\" | \"high\" | \"auto\"\n\ntype AppMessageSensitivity = {\n  \"message_type\": \"conversation\",\n  \"event_type\": \"conversation.sensitivity\",\n  \"conversation_id\": string,\n  \"properties\": {\n    \"participant_pause_sensitivity\": Sensitivity,\n    \"participant_interrupt_sensitivity\": Sensitivity\n  }\n}\n\ntype SendAppMessageProps =\n  AppMessageEcho |\n  AppMessageRespond |\n  AppMessageInterrupt |\n  AppMessageOverwriteLlmContext |\n  AppMessageAppendLlmContext |\n  AppMessageSensitivity\n\nexport function useSendAppMessage(): (message: SendAppMessageProps) => void {\n  const sendAppMessage = useAppMessage();\n\n  return useCallback((message: SendAppMessageProps) => {\n    sendAppMessage({ msg: message }, '*');\n  }, [sendAppMessage]);\n}";
+var content$m = "import { useCallback } from 'react';\nimport { useDaily } from '@daily-co/daily-react';\n\nexport const useCVICall = (): {\n\tjoinCall: (props: { url: string }) => void;\n\tleaveCall: () => void;\n} => {\n\tconst daily = useDaily();\n\n\tconst joinCall = useCallback(\n\t\t({ url }: { url: string }) => {\n\t\t\tdaily?.join({\n\t\t\t\turl: url,\n\t\t\t\tinputSettings: {\n\t\t\t\t\taudio: {\n\t\t\t\t\t\tprocessor: {\n\t\t\t\t\t\t\ttype: \"noise-cancellation\",\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t});\n\t\t},\n\t\t[daily]\n\t);\n\n\tconst leaveCall = useCallback(() => {\n\t\tdaily?.leave();\n\t}, [daily]);\n\n\treturn { joinCall, leaveCall };\n};\n";
 var styles$m = "";
-var cviEventsHooks$1 = {
+var useCviCall$1 = {
 	type: type$m,
 	content: content$m,
 	styles: styles$m
 };
 
 var type$l = "hooks";
-var content$l = "import { useCallback } from 'react';\nimport { useDaily } from '@daily-co/daily-react';\n\nexport const useCVICall = (): {\n\tjoinCall: (props: { url: string }) => void;\n\tleaveCall: () => void;\n} => {\n\tconst daily = useDaily();\n\n\tconst joinCall = useCallback(\n\t\t({ url }: { url: string }) => {\n\t\t\tdaily?.join({\n\t\t\t\turl: url,\n\t\t\t});\n\t\t},\n\t\t[daily]\n\t);\n\n\tconst leaveCall = useCallback(() => {\n\t\tdaily?.leave();\n\t}, [daily]);\n\n\treturn { joinCall, leaveCall };\n};\n";
+var content$l = "import { useCallback, useMemo } from 'react';\nimport { useDaily, useDevices, useLocalSessionId, useVideoTrack } from '@daily-co/daily-react';\n\nexport const useLocalCamera = (): {\n\tisCamReady: boolean;\n\tisCamMuted: boolean;\n\tlocalSessionId: string;\n\tonToggleCamera: () => void;\n} => {\n\tconst daily = useDaily();\n\tconst localSessionId = useLocalSessionId();\n\tconst { isOff: isCamMuted } = useVideoTrack(localSessionId);\n\tconst { camState } = useDevices();\n\tconst isCamReady = useMemo(() => camState === 'granted', [camState]);\n\n\tconst onToggleCamera = useCallback(() => {\n\t\tdaily?.setLocalVideo(isCamMuted);\n\t}, [daily, isCamMuted]);\n\n\treturn {\n\t\tisCamReady,\n\t\tisCamMuted,\n\t\tlocalSessionId,\n\t\tonToggleCamera,\n\t};\n};\n";
 var styles$l = "";
-var useCviCall$1 = {
+var useLocalCamera$1 = {
 	type: type$l,
 	content: content$l,
 	styles: styles$l
 };
 
 var type$k = "hooks";
-var content$k = "import { useCallback, useMemo } from 'react';\nimport { useDaily, useDevices, useLocalSessionId, useVideoTrack } from '@daily-co/daily-react';\n\nexport const useLocalCamera = (): {\n\tisCamReady: boolean;\n\tisCamMuted: boolean;\n\tlocalSessionId: string;\n\tonToggleCamera: () => void;\n} => {\n\tconst daily = useDaily();\n\tconst localSessionId = useLocalSessionId();\n\tconst { isOff: isCamMuted } = useVideoTrack(localSessionId);\n\tconst { camState } = useDevices();\n\tconst isCamReady = useMemo(() => camState === 'granted', [camState]);\n\n\tconst onToggleCamera = useCallback(() => {\n\t\tdaily?.setLocalVideo(isCamMuted);\n\t}, [daily, isCamMuted]);\n\n\treturn {\n\t\tisCamReady,\n\t\tisCamMuted,\n\t\tlocalSessionId,\n\t\tonToggleCamera,\n\t};\n};\n";
+var content$k = "import { useCallback, useMemo } from 'react';\nimport { useAudioTrack, useDaily, useDevices, useLocalSessionId } from '@daily-co/daily-react';\n\nexport const useLocalMicrophone = (): {\n\tisMicReady: boolean;\n\tisMicMuted: boolean;\n\tlocalSessionId: string;\n\tonToggleMicrophone: () => void;\n} => {\n\tconst daily = useDaily();\n\tconst localSessionId = useLocalSessionId();\n\tconst { isOff: isMicMuted } = useAudioTrack(localSessionId);\n\tconst { micState } = useDevices();\n\tconst isMicReady = useMemo(() => micState === 'granted', [micState]);\n\n\tconst onToggleMicrophone = useCallback(() => {\n\t\tdaily?.setLocalAudio(isMicMuted);\n\t}, [daily, isMicMuted]);\n\n\treturn {\n\t\tisMicReady,\n\t\tisMicMuted,\n\t\tlocalSessionId,\n\t\tonToggleMicrophone,\n\t};\n};\n";
 var styles$k = "";
-var useLocalCamera$1 = {
+var useLocalMicrophone$1 = {
 	type: type$k,
 	content: content$k,
 	styles: styles$k
 };
 
 var type$j = "hooks";
-var content$j = "import { useCallback, useMemo } from 'react';\nimport { useAudioTrack, useDaily, useDevices, useLocalSessionId } from '@daily-co/daily-react';\n\nexport const useLocalMicrophone = (): {\n\tisMicReady: boolean;\n\tisMicMuted: boolean;\n\tlocalSessionId: string;\n\tonToggleMicrophone: () => void;\n} => {\n\tconst daily = useDaily();\n\tconst localSessionId = useLocalSessionId();\n\tconst { isOff: isMicMuted } = useAudioTrack(localSessionId);\n\tconst { micState } = useDevices();\n\tconst isMicReady = useMemo(() => micState === 'granted', [micState]);\n\n\tconst onToggleMicrophone = useCallback(() => {\n\t\tdaily?.setLocalAudio(isMicMuted);\n\t}, [daily, isMicMuted]);\n\n\treturn {\n\t\tisMicReady,\n\t\tisMicMuted,\n\t\tlocalSessionId,\n\t\tonToggleMicrophone,\n\t};\n};\n";
+var content$j = "import { useCallback } from 'react';\nimport { useDaily, useLocalSessionId, useScreenVideoTrack } from '@daily-co/daily-react';\n\nexport const useLocalScreenshare = (): {\n\tisScreenSharing: boolean;\n\tlocalSessionId: string;\n\tonToggleScreenshare: () => void;\n} => {\n\tconst daily = useDaily();\n\tconst localSessionId = useLocalSessionId();\n\tconst { isOff } = useScreenVideoTrack(localSessionId);\n\tconst isScreenSharing = !isOff;\n\n\tconst onToggleScreenshare = useCallback(() => {\n\t\tif (isScreenSharing) {\n\t\t\tdaily?.stopScreenShare();\n\t\t} else {\n\t\t\tdaily?.startScreenShare({\n\t\t\t\tdisplayMediaOptions: {\n\t\t\t\t\taudio: false,\n\t\t\t\t\tselfBrowserSurface: 'exclude',\n\t\t\t\t\tsurfaceSwitching: 'include',\n\t\t\t\t\tvideo: {\n\t\t\t\t\t\twidth: 1920,\n\t\t\t\t\t\theight: 1080,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\t}, [daily, isScreenSharing]);\n\n\treturn {\n\t\tisScreenSharing,\n\t\tlocalSessionId,\n\t\tonToggleScreenshare,\n\t};\n};\n";
 var styles$j = "";
-var useLocalMicrophone$1 = {
+var useLocalScreenshare$1 = {
 	type: type$j,
 	content: content$j,
 	styles: styles$j
 };
 
 var type$i = "hooks";
-var content$i = "import { useCallback } from 'react';\nimport { useDaily, useLocalSessionId, useScreenVideoTrack } from '@daily-co/daily-react';\n\nexport const useLocalScreenshare = (): {\n\tisScreenSharing: boolean;\n\tlocalSessionId: string;\n\tonToggleScreenshare: () => void;\n} => {\n\tconst daily = useDaily();\n\tconst localSessionId = useLocalSessionId();\n\tconst { isOff } = useScreenVideoTrack(localSessionId);\n\tconst isScreenSharing = !isOff;\n\n\tconst onToggleScreenshare = useCallback(() => {\n\t\tif (isScreenSharing) {\n\t\t\tdaily?.stopScreenShare();\n\t\t} else {\n\t\t\tdaily?.startScreenShare({\n\t\t\t\tdisplayMediaOptions: {\n\t\t\t\t\taudio: false,\n\t\t\t\t\tselfBrowserSurface: 'exclude',\n\t\t\t\t\tsurfaceSwitching: 'include',\n\t\t\t\t\tvideo: {\n\t\t\t\t\t\twidth: 1920,\n\t\t\t\t\t\theight: 1080,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\t}, [daily, isScreenSharing]);\n\n\treturn {\n\t\tisScreenSharing,\n\t\tlocalSessionId,\n\t\tonToggleScreenshare,\n\t};\n};\n";
+var content$i = "import { useParticipantIds } from '@daily-co/daily-react';\n\nexport const useRemoteParticipantIDs = (): string[] => {\n\tconst remoteParticipantIds = useParticipantIds({ filter: 'remote' });\n\n\treturn remoteParticipantIds;\n};\n";
 var styles$i = "";
-var useLocalScreenshare$1 = {
+var useRemoteParticipantIds$1 = {
 	type: type$i,
 	content: content$i,
 	styles: styles$i
 };
 
 var type$h = "hooks";
-var content$h = "import { useParticipantIds } from '@daily-co/daily-react';\n\nexport const useRemoteParticipantIDs = (): string[] => {\n\tconst remoteParticipantIds = useParticipantIds({ filter: 'remote' });\n\n\treturn remoteParticipantIds;\n};\n";
+var content$h = "import { useParticipantIds } from '@daily-co/daily-react';\n\nexport const useReplicaIDs = (): string[] => {\n\tconst replicasIDs = useParticipantIds({\n\t\tfilter: (participant) => participant.user_id.includes('tavus-replica'),\n\t});\n\n\treturn replicasIDs;\n};\n";
 var styles$h = "";
-var useRemoteParticipantIds$1 = {
+var useReplicaIds$1 = {
 	type: type$h,
 	content: content$h,
 	styles: styles$h
 };
 
 var type$g = "hooks";
-var content$g = "import { useParticipantIds } from '@daily-co/daily-react';\n\nexport const useReplicaIDs = (): string[] => {\n\tconst replicasIDs = useParticipantIds({\n\t\tfilter: (participant) => participant.user_id.includes('tavus-replica'),\n\t});\n\n\treturn replicasIDs;\n};\n";
+var content$g = "import { useCallback } from 'react';\nimport { useDaily } from '@daily-co/daily-react';\nimport type { DailyDeviceInfos } from '@daily-co/daily-js';\n\nexport const useRequestPermissions = (): (() => Promise<DailyDeviceInfos>) => {\n\tconst daily = useDaily();\n\n\tconst requestPermissions = useCallback(async () => {\n\t\treturn await daily!.startCamera({\n\t\t\tstartVideoOff: false,\n\t\t\tstartAudioOff: false,\n\t\t\taudioSource: 'default',\n\t\t\tinputSettings: {\n\t\t\t\taudio: {\n\t\t\t\t\tprocessor: {\n\t\t\t\t\t\ttype: 'noise-cancellation',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}, [daily]);\n\n\treturn requestPermissions;\n};\n";
 var styles$g = "";
-var useReplicaIds$1 = {
-	type: type$g,
-	content: content$g,
-	styles: styles$g
-};
-
-var type$f = "hooks";
-var content$f = "import { useCallback } from 'react';\nimport { useDaily } from '@daily-co/daily-react';\nimport type { DailyDeviceInfos } from '@daily-co/daily-js';\n\nexport const useRequestPermissions = (): (() => Promise<DailyDeviceInfos>) => {\n\tconst daily = useDaily();\n\n\tconst requestPermissions = useCallback(async () => {\n\t\treturn await daily!.startCamera({\n\t\t\tstartVideoOff: false,\n\t\t\tstartAudioOff: false,\n\t\t\taudioSource: 'default',\n\t\t\tinputSettings: {\n\t\t\t\taudio: {\n\t\t\t\t\tprocessor: {\n\t\t\t\t\t\ttype: 'noise-cancellation',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}, [daily]);\n\n\treturn requestPermissions;\n};\n";
-var styles$f = "";
 var dependencies = [
 	"@daily-co/daily-js"
 ];
 var useRequestPermissions$1 = {
-	type: type$f,
-	content: content$f,
-	styles: styles$f,
+	type: type$g,
+	content: content$g,
+	styles: styles$g,
 	dependencies: dependencies
 };
 
-var type$e = "hooks";
-var content$e = "import { useCallback, useEffect, useMemo, useState } from 'react';\nimport { useDaily, useDevices } from '@daily-co/daily-react';\n\nexport const useStartHaircheck = (): {\n\tisPermissionsPrompt: boolean;\n\tisPermissionsLoading: boolean;\n\tisPermissionsGranted: boolean;\n\tisPermissionsDenied: boolean;\n\trequestPermissions: () => void;\n} => {\n\tconst daily = useDaily();\n\tconst { micState } = useDevices();\n\n\tconst [permissionState, setPermissionState] = useState<PermissionState | null>(null);\n\n\tuseEffect(() => {\n\t\tnavigator.permissions\n\t\t\t.query({ name: 'microphone' as PermissionName })\n\t\t\t.then((permissionStatus) => {\n\t\t\t\tsetPermissionState(permissionStatus.state);\n\t\t\t\tpermissionStatus.onchange = () => {\n\t\t\t\t\tsetPermissionState(permissionStatus.state);\n\t\t\t\t};\n\t\t\t});\n\t}, []);\n\n\tconst requestPermissions = useCallback(() => {\n\t\tif (!daily) return;\n\t\tdaily.startCamera({\n\t\t\tstartVideoOff: false,\n\t\t\tstartAudioOff: false,\n\t\t\taudioSource: 'default',\n\t\t\tinputSettings: {\n\t\t\t\taudio: {\n\t\t\t\t\tprocessor: {\n\t\t\t\t\t\ttype: 'noise-cancellation',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}, [daily]);\n\n\tconst isPermissionsPrompt = useMemo(() => {\n\t\treturn permissionState === 'prompt';\n\t}, [permissionState]);\n\n\tconst isPermissionsLoading = useMemo(() => {\n\t\treturn (permissionState === null || permissionState === 'granted') && micState === 'idle';\n\t}, [permissionState, micState]);\n\n\tconst isPermissionsGranted = useMemo(() => {\n\t\treturn permissionState === 'granted';\n\t}, [permissionState]);\n\n\tconst isPermissionsDenied = useMemo(() => {\n\t\treturn permissionState === 'denied';\n\t}, [permissionState]);\n\n\treturn {\n\t\tisPermissionsPrompt,\n\t\tisPermissionsLoading,\n\t\tisPermissionsGranted,\n\t\tisPermissionsDenied,\n\t\trequestPermissions,\n\t};\n};\n";
-var styles$e = "";
+var type$f = "hooks";
+var content$f = "import { useCallback, useEffect, useMemo, useState } from 'react';\nimport { useDaily, useDevices } from '@daily-co/daily-react';\n\nexport const useStartHaircheck = (): {\n\tisPermissionsPrompt: boolean;\n\tisPermissionsLoading: boolean;\n\tisPermissionsGranted: boolean;\n\tisPermissionsDenied: boolean;\n\trequestPermissions: () => void;\n} => {\n\tconst daily = useDaily();\n\tconst { micState } = useDevices();\n\n\tconst [permissionState, setPermissionState] = useState<PermissionState | null>(null);\n\n\tuseEffect(() => {\n\t\tnavigator.permissions\n\t\t\t.query({ name: 'microphone' as PermissionName })\n\t\t\t.then((permissionStatus) => {\n\t\t\t\tsetPermissionState(permissionStatus.state);\n\t\t\t\tpermissionStatus.onchange = () => {\n\t\t\t\t\tsetPermissionState(permissionStatus.state);\n\t\t\t\t};\n\t\t\t});\n\t}, []);\n\n\tconst requestPermissions = useCallback(() => {\n\t\tif (!daily) return;\n\t\tdaily.startCamera({\n\t\t\tstartVideoOff: false,\n\t\t\tstartAudioOff: false,\n\t\t\taudioSource: 'default',\n\t\t\tinputSettings: {\n\t\t\t\taudio: {\n\t\t\t\t\tprocessor: {\n\t\t\t\t\t\ttype: 'noise-cancellation',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}, [daily]);\n\n\tconst isPermissionsPrompt = useMemo(() => {\n\t\treturn permissionState === 'prompt';\n\t}, [permissionState]);\n\n\tconst isPermissionsLoading = useMemo(() => {\n\t\treturn (permissionState === null || permissionState === 'granted') && micState === 'idle';\n\t}, [permissionState, micState]);\n\n\tconst isPermissionsGranted = useMemo(() => {\n\t\treturn permissionState === 'granted';\n\t}, [permissionState]);\n\n\tconst isPermissionsDenied = useMemo(() => {\n\t\treturn permissionState === 'denied';\n\t}, [permissionState]);\n\n\treturn {\n\t\tisPermissionsPrompt,\n\t\tisPermissionsLoading,\n\t\tisPermissionsGranted,\n\t\tisPermissionsDenied,\n\t\trequestPermissions,\n\t};\n};\n";
+var styles$f = "";
 var useStartHaircheck$1 = {
-	type: type$e,
-	content: content$e,
-	styles: styles$e
+	type: type$f,
+	content: content$f,
+	styles: styles$f
 };
 
 var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     "audio-wave": audioWave$1,
-    controls: controls$1,
     "conversation-01": conversation01$1,
     "cvi-events-hooks": cviEventsHooks$1,
     "cvi-provider": cviProvider$1,
+    "device-select": deviceSelect$1,
     "hair-check-01": hairCheck01$1,
+    "media-controls": mediaControls$1,
     "use-cvi-call": useCviCall$1,
     "use-local-camera": useLocalCamera$1,
     "use-local-microphone": useLocalMicrophone$1,
@@ -232681,64 +232700,82 @@ var index$1 = /*#__PURE__*/Object.freeze({
     "use-start-haircheck": useStartHaircheck$1
 });
 
-var type$d = "components";
-var content$d = "import React, { useCallback, useRef, memo } from 'react';\nimport { useActiveSpeakerId } from '@daily-co/daily-react';\nimport { useAudioLevelObserver } from '@daily-co/daily-react';\nimport styles from './audio-wave.module.css';\n\nexport const AudioWave = memo(({ id }) => {\n\tconst activeSpeakerId = useActiveSpeakerId();\n\tconst isActiveSpeaker = activeSpeakerId === id;\n\n\tconst leftBarRef = useRef(null);\n\tconst centerBarRef = useRef(null);\n\tconst rightBarRef = useRef(null);\n\tconst animationFrameRef = useRef(undefined);\n\n\tuseAudioLevelObserver(\n\t\tid,\n\t\tuseCallback((volume) => {\n\t\t\t// Cancel any pending animation frame to prevent accumulation\n\t\t\tif (animationFrameRef.current) {\n\t\t\t\tcancelAnimationFrame(animationFrameRef.current);\n\t\t\t}\n\n\t\t\t// Use requestAnimationFrame to batch DOM updates\n\t\t\tanimationFrameRef.current = requestAnimationFrame(() => {\n\t\t\t\tconst scaledVolume = Number(Math.max(0.01, volume).toFixed(2));\n\t\t\t\tif (leftBarRef.current && centerBarRef.current && rightBarRef.current) {\n\t\t\t\t\tleftBarRef.current.style.height = `${20 + scaledVolume * 40}%`;\n\t\t\t\t\tcenterBarRef.current.style.height = `${20 + scaledVolume * 130}%`;\n\t\t\t\t\trightBarRef.current.style.height = `${20 + scaledVolume * 40}%`;\n\t\t\t\t}\n\t\t\t});\n\t\t}, [])\n\t);\n\n\treturn (\n\t\t<div className={styles.container}>\n\t\t\t<div className={styles.waveContainer}>\n\t\t\t\t<div\n\t\t\t\t\tref={leftBarRef}\n\t\t\t\t\tclassName={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}\n\t\t\t\t/>\n\n\t\t\t\t<div\n\t\t\t\t\tref={centerBarRef}\n\t\t\t\t\tclassName={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}\n\t\t\t\t/>\n\n\t\t\t\t<div\n\t\t\t\t\tref={rightBarRef}\n\t\t\t\t\tclassName={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nAudioWave.displayName = 'AudioWave';\n";
-var styles$d = ".container {\n\toverflow: hidden;\n\tborder: 1px solid white;\n\twidth: 1.5rem;\n\theight: 1.5rem;\n\tborder-radius: 9999px;\n\twill-change: transform;\n\ttransform: translateZ(0);\n}\n\n.waveContainer {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 0.125rem;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.bar {\n\twidth: 0.25rem;\n\theight: 0.25rem;\n\tbackground-color: white;\n\tborder-radius: 9999px;\n\ttransition: height 200ms ease-out;\n\twill-change: height;\n\ttransform: translateZ(0);\n}\n\n.barInactive {\n\twidth: 0.25rem !important;\n\theight: 0.25rem !important;\n}\n";
+var type$e = "components";
+var content$e = "import React, { useCallback, useRef, memo } from 'react';\nimport { useActiveSpeakerId } from '@daily-co/daily-react';\nimport { useAudioLevelObserver } from '@daily-co/daily-react';\nimport styles from './audio-wave.module.css';\n\nexport const AudioWave = memo(({ id }) => {\n\tconst activeSpeakerId = useActiveSpeakerId();\n\tconst isActiveSpeaker = activeSpeakerId === id;\n\n\tconst leftBarRef = useRef(null);\n\tconst centerBarRef = useRef(null);\n\tconst rightBarRef = useRef(null);\n\tconst animationFrameRef = useRef(undefined);\n\n\tuseAudioLevelObserver(\n\t\tid,\n\t\tuseCallback((volume) => {\n\t\t\t// Cancel any pending animation frame to prevent accumulation\n\t\t\tif (animationFrameRef.current) {\n\t\t\t\tcancelAnimationFrame(animationFrameRef.current);\n\t\t\t}\n\n\t\t\t// Use requestAnimationFrame to batch DOM updates\n\t\t\tanimationFrameRef.current = requestAnimationFrame(() => {\n\t\t\t\tconst scaledVolume = Number(Math.max(0.01, volume).toFixed(2));\n\t\t\t\tif (leftBarRef.current && centerBarRef.current && rightBarRef.current) {\n\t\t\t\t\tleftBarRef.current.style.height = `${20 + scaledVolume * 40}%`;\n\t\t\t\t\tcenterBarRef.current.style.height = `${20 + scaledVolume * 130}%`;\n\t\t\t\t\trightBarRef.current.style.height = `${20 + scaledVolume * 40}%`;\n\t\t\t\t}\n\t\t\t});\n\t\t}, [])\n\t);\n\n\treturn (\n\t\t<div className={styles.container}>\n\t\t\t<div className={styles.waveContainer}>\n\t\t\t\t<div\n\t\t\t\t\tref={leftBarRef}\n\t\t\t\t\tclassName={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}\n\t\t\t\t/>\n\n\t\t\t\t<div\n\t\t\t\t\tref={centerBarRef}\n\t\t\t\t\tclassName={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}\n\t\t\t\t/>\n\n\t\t\t\t<div\n\t\t\t\t\tref={rightBarRef}\n\t\t\t\t\tclassName={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nAudioWave.displayName = 'AudioWave';\n";
+var styles$e = ".container {\n\toverflow: hidden;\n\tborder: 1px solid white;\n\twidth: 1.5rem;\n\theight: 1.5rem;\n\tborder-radius: 9999px;\n\twill-change: transform;\n\ttransform: translateZ(0);\n}\n\n.waveContainer {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 0.125rem;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.bar {\n\twidth: 0.25rem;\n\theight: 0.25rem;\n\tbackground-color: white;\n\tborder-radius: 9999px;\n\ttransition: height 200ms ease-out;\n\twill-change: height;\n\ttransform: translateZ(0);\n}\n\n.barInactive {\n\twidth: 0.25rem !important;\n\theight: 0.25rem !important;\n}\n";
 var audioWave = {
+	type: type$e,
+	content: content$e,
+	styles: styles$e
+};
+
+var type$d = "components";
+var content$d = "import React, { useEffect, useCallback } from 'react';\nimport {\n\tDailyAudio,\n\tDailyVideo,\n\tuseDevices,\n\tuseLocalSessionId,\n\tuseMeetingState,\n\tuseScreenVideoTrack,\n\tuseVideoTrack,\n} from '@daily-co/daily-react';\nimport { MicSelectBtn, CameraSelectBtn, ScreenShareButton } from '../device-select';\nimport { useLocalScreenshare } from '../../hooks/use-local-screenshare';\nimport { useReplicaIDs } from '../../hooks/use-replica-ids';\nimport { useCVICall } from '../../hooks/use-cvi-call';\nimport { AudioWave } from '../audio-wave';\n\nimport styles from './conversation.module.css';\n\nconst VideoPreview = React.memo(({ id }) => {\n\tconst videoState = useVideoTrack(id);\n\tconst widthVideo = videoState.track?.getSettings()?.width;\n\tconst heightVideo = videoState.track?.getSettings()?.height;\n\tconst isVertical = widthVideo && heightVideo ? widthVideo < heightVideo : false;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.previewVideoContainer} ${isVertical ? styles.previewVideoContainerVertical : ''} ${videoState.isOff ? styles.previewVideoContainerHidden : ''}`}\n\t\t>\n\t\t\t<DailyVideo\n\t\t\t\tautomirror\n\t\t\t\tsessionId={id}\n\t\t\t\ttype=\"video\"\n\t\t\t\tclassName={`${styles.previewVideo} ${isVertical ? styles.previewVideoVertical : ''} ${videoState.isOff ? styles.previewVideoHidden : ''}`}\n\t\t\t/>\n\n\t\t\t<div className={styles.audioWaveContainer}>\n\t\t\t\t<AudioWave id={id} />\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nconst PreviewVideos = React.memo(() => {\n\tconst localId = useLocalSessionId();\n\tconst { isScreenSharing } = useLocalScreenshare();\n\tconst replicaIds = useReplicaIDs();\n\tconst replicaId = replicaIds[0];\n\n\treturn (\n\t\t<>\n\t\t\t{isScreenSharing && <VideoPreview id={replicaId} />}\n\t\t\t<VideoPreview id={localId} />\n\t\t</>\n\t);\n});\n\nconst MainVideo = React.memo(() => {\n\tconst replicaIds = useReplicaIDs();\n\tconst localId = useLocalSessionId();\n\tconst videoState = useVideoTrack(replicaIds[0]);\n\tconst screenVideoState = useScreenVideoTrack(localId);\n\tconst isScreenSharing = !screenVideoState.isOff;\n\t// This is one-to-one call, so we can use the first replica id\n\tconst replicaId = replicaIds[0];\n\n\tif (!replicaId) {\n\t\treturn (\n\t\t\t<div className={styles.waitingContainer}>\n\t\t\t\t<p>Connecting...</p>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Switching between replica video and screen sharing video\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.mainVideoContainer} ${isScreenSharing ? styles.mainVideoContainerScreenSharing : ''}`}\n\t\t>\n\t\t\t<DailyVideo\n\t\t\t\tautomirror\n\t\t\t\tsessionId={isScreenSharing ? localId : replicaId}\n\t\t\t\ttype={isScreenSharing ? 'screenVideo' : 'video'}\n\t\t\t\tclassName={`${styles.mainVideo}\n\t\t\t\t${isScreenSharing ? styles.mainVideoScreenSharing : ''}\n\t\t\t\t${videoState.isOff ? styles.mainVideoHidden : ''}`}\n\t\t\t/>\n\t\t</div>\n\t);\n});\n\nexport const Conversation = React.memo(({ onLeave, conversationUrl }) => {\n\tconst { joinCall, leaveCall } = useCVICall();\n\tconst meetingState = useMeetingState();\n\tconst { hasMicError } = useDevices();\n\n\tuseEffect(() => {\n\t\tif (meetingState === 'error') {\n\t\t\tonLeave();\n\t\t}\n\t}, [meetingState, onLeave]);\n\n\t// Initialize call when conversation is available\n\tuseEffect(() => {\n\t\tjoinCall({ url: conversationUrl });\n\t}, []);\n\n\tconst handleLeave = useCallback(() => {\n\t\tleaveCall();\n\t\tonLeave();\n\t}, [leaveCall, onLeave]);\n\n\treturn (\n\t\t<div className={styles.container}>\n\t\t\t<div className={styles.videoContainer}>\n\t\t\t\t{hasMicError && (\n\t\t\t\t\t<div className={styles.errorContainer}>\n\t\t\t\t\t\t<p>Camera or microphone access denied. Please check your settings and try again.</p>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{/* Main video */}\n\t\t\t\t<div className={styles.mainVideoContainer}>\n\t\t\t\t\t<MainVideo />\n\t\t\t\t</div>\n\n\t\t\t\t{/* Self view */}\n\t\t\t\t<div className={styles.selfViewContainer}>\n\t\t\t\t\t<PreviewVideos />\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div className={styles.footer}>\n\t\t\t\t<div className={styles.footerControls}>\n\t\t\t\t\t<MicSelectBtn />\n\t\t\t\t\t<CameraSelectBtn />\n\t\t\t\t\t<ScreenShareButton />\n\t\t\t\t\t<button type=\"button\" className={styles.leaveButton} onClick={handleLeave}>\n\t\t\t\t\t\t<span className={styles.leaveButtonIcon}>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\taria-label=\"Leave Call\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\td=\"M18 6L6 18M6 6L18 18\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<DailyAudio />\n\t\t</div>\n\t);\n});\n";
+var styles$d = ".container {\n\tposition: relative;\n\twidth: 100%;\n\ttext-align: center;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\taspect-ratio: 9/16;\n\toverflow: hidden;\n\tborder-radius: 0.5rem;\n\tmax-height: 90vh;\n  background: linear-gradient(135deg, #4b5563 0%, #1f2937 100%);\n\tbackground-size: 400% 400%;\n\tanimation: gradient 15s ease infinite;\n}\n\n@media (min-width: 768px) {\n\t.container {\n\t\taspect-ratio: 16/9;\n\t}\n}\n\n.errorContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: rgba(248, 250, 252, 0.08);\n\tcolor: white;\n\theight: 100%;\n\tfont-size: 1.5rem;\n\tfont-weight: 600;\n\ttext-align: center;\n}\n\n.videoContainer {\n\tposition: relative;\n\tz-index: 5;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.footer {\n\tposition: absolute;\n\tbottom: 1.5rem;\n\tleft: 0;\n\tright: 0;\n\tz-index: 20;\n}\n\n.footerControls {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 16px;\n}\n\n.leaveButton {\n\tbackground: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);\n\tcolor: white;\n\tborder: none;\n\tfont-size: 16px;\n\tcursor: pointer;\n\ttransition: all 0.3s ease;\n\theight: 3rem;\n\twidth: 3rem;\n\tborder-radius: 9999px;\n\tbackground-color: #ef4444;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.leaveButton:hover {\n\topacity: 0.8;\n}\n\n.leaveButtonIcon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* ReplicaVideo styles */\n.mainVideoContainer {\n\tbackground: transparent;\n\twidth: 100%;\n\theight: 100%;\n\tposition: relative;\n}\n\n.mainVideoContainerScreenSharing {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.mainVideo {\n\tposition: absolute;\n\tinset: 0;\n\tobject-position: center;\n\tobject-fit: cover !important;\n\theight: 100%;\n\twidth: 100%;\n\ttransition: all 0.3s ease;\n}\n\n.mainVideoScreenSharing {\n\tobject-fit: contain !important;\n}\n\n.mainVideoHidden {\n\tdisplay: none;\n}\n\n/* PreviewVideo styles */\n.previewVideoContainer {\n\tposition: relative;\n\tbackground: rgba(2, 6, 23, 0.3);\n\taspect-ratio: 16/9;\n\twidth: 11rem;\n\tborder-radius: 1rem;\n\toverflow: hidden;\n\tmax-height: 120px;\n\tz-index: 10;\n}\n\n@media (min-width: 768px) {\n\t.previewVideoContainer {\n\t\tmax-height: 100%;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.previewVideoContainer {\n\t\twidth: 17.875rem;\n\t}\n}\n\n.previewVideoContainerVertical {\n\theight: 40.5rem;\n\twidth: 6rem;\n}\n\n.previewVideoContainerHidden {\n\tbackground: transparent;\n\tdisplay: none;\n}\n\n.previewVideo {\n\twidth: 100%;\n\theight: auto;\n\tmax-height: 120px;\n}\n\n@media (min-width: 768px) {\n\t.previewVideo {\n\t\tmax-height: 100%;\n\t}\n}\n\n.previewVideoVertical {\n\theight: 40.5rem;\n\twidth: 6rem;\n\tobject-fit: cover;\n}\n\n.previewVideoHidden {\n\tdisplay: none;\n}\n\n/* Main video container */\n.mainVideoContainer {\n\twidth: 100%;\n\theight: 100%;\n}\n\n/* Self view container */\n.selfViewContainer {\n\tposition: absolute;\n\tbottom: 5rem;\n\tleft: 1rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-direction: column;\n\tgap: 0.75rem;\n}\n\n@media (min-width: 768px) {\n\t.selfViewContainer {\n\t\tbottom: 1rem;\n\t}\n}\n\n/* Waiting message container */\n/* Start of Selection */\n.waitingContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: transparent;\n\tcolor: white;\n\theight: 100%;\n\tfont-size: 1.5rem;\n\tfont-weight: 600;\n}\n\n@keyframes gradient {\n\t0% {\n\t\tbackground-position: 0% 50%;\n\t}\n\t50% {\n\t\tbackground-position: 100% 50%;\n\t}\n\t100% {\n\t\tbackground-position: 0% 50%;\n\t}\n}\n/* End of Selection */\n\n.audioWaveContainer {\n\tposition: absolute;\n\tbottom: 0.5rem;\n\tright: 0.5rem;\n}\n";
+var componentsDependencies$3 = [
+	"device-select",
+	"use-local-screenshare",
+	"use-replica-ids",
+	"use-cvi-call",
+	"audio-wave",
+	"cvi-provider"
+];
+var conversation01 = {
 	type: type$d,
 	content: content$d,
-	styles: styles$d
+	styles: styles$d,
+	componentsDependencies: componentsDependencies$3
 };
 
 var type$c = "components";
-var content$c = "import React, { memo } from 'react';\nimport { useDevices } from '@daily-co/daily-react';\nimport { useLocalCamera } from '../../hooks/use-local-camera';\nimport { useLocalMicrophone } from '../../hooks/use-local-microphone';\nimport { useLocalScreenshare } from '../../hooks/use-local-screenshare';\nimport styles from './controls.module.css';\n\nexport const SelectDevice = ({ value, devices, disabled, onChange }) => {\n\treturn (\n\t\t<div className={styles.selectDeviceContainer}>\n\t\t\t<select\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={(e) => onChange(e.target.value)}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tclassName={styles.selectDevice}\n\t\t\t>\n\t\t\t\t{devices.map(({ device }) => (\n\t\t\t\t\t<option key={device.deviceId} value={device.deviceId}>\n\t\t\t\t\t\t{device.label}\n\t\t\t\t\t</option>\n\t\t\t\t))}\n\t\t\t</select>\n\t\t\t<span className={styles.selectArrow}>\n\t\t\t\t<svg\n\t\t\t\t\twidth=\"16\"\n\t\t\t\t\theight=\"16\"\n\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M4 6L8 10L12 6\"\n\t\t\t\t\t\tstroke=\"#fff\"\n\t\t\t\t\t\tstrokeWidth=\"1.5\"\n\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t</span>\n\t\t</div>\n\t);\n};\n\nexport const MicrophoneButton = memo(() => {\n\tconst { onToggleMicrophone, isMicReady, isMicMuted } = useLocalMicrophone();\n\tconst { microphones, currentMic, setMicrophone } = useDevices();\n\n\treturn (\n\t\t<div className={styles.deviceButtonContainer}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={onToggleMicrophone}\n\t\t\t\tdisabled={!isMicReady}\n\t\t\t\tclassName={styles.deviceButton}\n\t\t\t>\n\t\t\t\t<span className={styles.deviceButtonIcon}>\n\t\t\t\t\t{isMicMuted || !isMicReady ? (\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Microphone Muted\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 18.1339 14.0992 18.1339 14.0992M12 18V21\"\n\t\t\t\t\t\t\t\tstroke=\"#020617\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"1.66667\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\tx=\"1.30225\"\n\t\t\t\t\t\t\t\ty=\"3\"\n\t\t\t\t\t\t\t\twidth=\"26\"\n\t\t\t\t\t\t\t\theight=\"2.24738\"\n\t\t\t\t\t\t\t\trx=\"1.12369\"\n\t\t\t\t\t\t\t\ttransform=\"rotate(30 1.30225 3)\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\td=\"M9 9.39031V11C9 11.7956 9.31607 12.5587 9.87868 13.1213C10.4413 13.6839 11.2044 14 12 14C12.7956 14 13.5587 13.6839 14.1213 13.1213C14.2829 12.9597 14.4242 12.7816 14.5435 12.5908L9 9.39031ZM15 7.71466V6C15 5.20435 14.6839 4.44129 14.1213 3.87868C13.5587 3.31607 12.7956 3 12 3C11.2044 3 10.4413 3.31607 9.87868 3.87868C9.69528 4.06208 9.53807 4.26678 9.40948 4.48697L15 7.71466Z\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M9 9.39031L9.41667 8.66862C9.15883 8.51976 8.84117 8.51976 8.58333 8.66862C8.3255 8.81748 8.16667 9.09259 8.16667 9.39031H9ZM9.87868 13.1213L9.28942 13.7106H9.28942L9.87868 13.1213ZM14.1213 13.1213L14.7106 13.7106L14.7106 13.7106L14.1213 13.1213ZM14.5435 12.5908L15.25 13.0327C15.3699 12.841 15.4068 12.6088 15.3521 12.3894C15.2974 12.17 15.156 11.9822 14.9601 11.8692L14.5435 12.5908ZM15 7.71466L14.5833 8.43635C14.8412 8.58521 15.1588 8.58521 15.4167 8.43635C15.6745 8.28749 15.8333 8.01238 15.8333 7.71466H15ZM14.1213 3.87868L14.7106 3.28942L14.7106 3.28942L14.1213 3.87868ZM9.87868 3.87868L9.28942 3.28942L9.28942 3.28942L9.87868 3.87868ZM9.40948 4.48697L8.68988 4.06671C8.57806 4.25818 8.54715 4.48633 8.604 4.70065C8.66086 4.91497 8.80078 5.09779 8.99281 5.20866L9.40948 4.48697ZM9.83333 11V9.39031H8.16667V11H9.83333ZM10.4679 12.5321C10.0616 12.1257 9.83333 11.5746 9.83333 11H8.16667C8.16667 12.0167 8.57053 12.9917 9.28942 13.7106L10.4679 12.5321ZM12 13.1667C11.4254 13.1667 10.8743 12.9384 10.4679 12.5321L9.28942 13.7106C10.0083 14.4295 10.9833 14.8333 12 14.8333V13.1667ZM13.5321 12.5321C13.1257 12.9384 12.5746 13.1667 12 13.1667V14.8333C13.0167 14.8333 13.9917 14.4295 14.7106 13.7106L13.5321 12.5321ZM13.837 12.149C13.7508 12.2867 13.6488 12.4153 13.5321 12.5321L14.7106 13.7106C14.917 13.5041 15.0976 13.2764 15.25 13.0327L13.837 12.149ZM14.9601 11.8692L9.41667 8.66862L8.58333 10.112L14.1268 13.3125L14.9601 11.8692ZM14.1667 6V7.71466H15.8333V6H14.1667ZM13.5321 4.46794C13.9384 4.87426 14.1667 5.42536 14.1667 6H15.8333C15.8333 4.98334 15.4295 4.00831 14.7106 3.28942L13.5321 4.46794ZM12 3.83333C12.5746 3.83333 13.1257 4.06161 13.5321 4.46794L14.7106 3.28942C13.9917 2.57053 13.0167 2.16667 12 2.16667V3.83333ZM10.4679 4.46794C10.8743 4.06161 11.4254 3.83333 12 3.83333V2.16667C10.9833 2.16667 10.0083 2.57053 9.28942 3.28942L10.4679 4.46794ZM10.1291 4.90724C10.2219 4.74824 10.3354 4.60042 10.4679 4.46794L9.28942 3.28942C9.05511 3.52374 8.85421 3.78533 8.68988 4.06671L10.1291 4.90724ZM8.99281 5.20866L14.5833 8.43635L15.4167 6.99298L9.82615 3.76529L8.99281 5.20866Z\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Microphone\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M9 6C9 5.20435 9.31607 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3C12.7956 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6V11C15 11.7956 14.6839 12.5587 14.1213 13.1213C13.5587 13.6839 12.7956 14 12 14C11.2044 14 10.4413 13.6839 9.87868 13.1213C9.31607 12.5587 9 11.7956 9 11V6Z\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t\tstroke=\"#020617\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 19 12.8565 19 11V10M12 18V21\"\n\t\t\t\t\t\t\t\tstroke=\"#020617\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t\t<span className={styles.srOnly}>Microphone</span>\n\t\t\t</button>\n\t\t\t<SelectDevice\n\t\t\t\tvalue={currentMic?.device?.deviceId}\n\t\t\t\tdevices={microphones || []}\n\t\t\t\tdisabled={!isMicReady}\n\t\t\t\tonChange={(val) => setMicrophone(val)}\n\t\t\t/>\n\t\t</div>\n\t);\n});\n\nMicrophoneButton.displayName = 'MicrophoneButton';\n\nexport const CameraButton = memo(() => {\n\tconst { onToggleCamera, isCamReady, isCamMuted } = useLocalCamera();\n\tconst { currentCam, cameras, setCamera } = useDevices();\n\n\treturn (\n\t\t<div className={styles.deviceButtonContainer}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={onToggleCamera}\n\t\t\t\tdisabled={!isCamReady || !currentCam}\n\t\t\t\tclassName={styles.deviceButton}\n\t\t\t>\n\t\t\t\t<span className={styles.deviceButtonIcon}>\n\t\t\t\t\t{isCamMuted ? (\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Camera Muted\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<g clipPath=\"url(#clip0_7082_14220)\">\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\td=\"M3.19874 5.60093C3.08628 5.68537 2.97928 5.77808 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V15.048C17.7787 14.8204 17.5304 14.6189 17.2595 14.4485L3.19874 5.60093ZM22 12.655V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H8.7412L22 12.655Z\"\n\t\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\t\tx=\"0.777222\"\n\t\t\t\t\t\t\t\t\ty=\"2.64844\"\n\t\t\t\t\t\t\t\t\twidth=\"26.7988\"\n\t\t\t\t\t\t\t\t\theight=\"2.24738\"\n\t\t\t\t\t\t\t\t\trx=\"1.12369\"\n\t\t\t\t\t\t\t\t\ttransform=\"rotate(30 0.777222 2.64844)\"\n\t\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t<defs>\n\t\t\t\t\t\t\t\t<clipPath id=\"clip0_7082_14220\">\n\t\t\t\t\t\t\t\t\t<rect width=\"24\" height=\"24\" fill=\"white\" />\n\t\t\t\t\t\t\t\t</clipPath>\n\t\t\t\t\t\t\t</defs>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Camera\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\td=\"M5 5C4.20435 5 3.44129 5.31607 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V14.414L20.293 16.707C20.4329 16.8468 20.611 16.942 20.805 16.9806C20.9989 17.0192 21.2 16.9993 21.3827 16.9237C21.5654 16.848 21.7215 16.7199 21.8314 16.5555C21.9413 16.391 22 16.1978 22 16V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H5Z\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t\t<span className={styles.srOnly}>Camera</span>\n\t\t\t</button>\n\t\t\t<SelectDevice\n\t\t\t\tvalue={currentCam?.device?.deviceId}\n\t\t\t\tdevices={cameras || []}\n\t\t\t\tdisabled={!isCamReady}\n\t\t\t\tonChange={(val) => setCamera(val)}\n\t\t\t/>\n\t\t</div>\n\t);\n});\n\nCameraButton.displayName = 'CameraButton';\n\nexport const ScreenShareButton = memo(() => {\n\tconst { onToggleScreenshare, isScreenSharing } = useLocalScreenshare();\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tonClick={onToggleScreenshare}\n\t\t\tclassName={`${styles.deviceButtonContainer} ${styles.screenShareButton}`}\n\t\t>\n\t\t\t<span>\n\t\t\t\t{isScreenSharing ? (\n\t\t\t\t\t<svg\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\taria-label=\"Screen Share\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M21.0008 19C21.2557 19.0003 21.5009 19.0979 21.6862 19.2728C21.8715 19.4478 21.9831 19.687 21.998 19.9414C22.013 20.1958 21.9302 20.4464 21.7666 20.6418C21.603 20.8373 21.3709 20.9629 21.1178 20.993L21.0008 21H3.00085C2.74597 20.9997 2.50081 20.9021 2.31548 20.7272C2.13014 20.5522 2.01861 20.313 2.00367 20.0586C1.98874 19.8042 2.07152 19.5536 2.23511 19.3582C2.3987 19.1627 2.63075 19.0371 2.88385 19.007L3.00085 19H21.0008ZM19.0008 4C19.5054 3.99984 19.9914 4.19041 20.3614 4.5335C20.7314 4.87659 20.958 5.34684 20.9958 5.85L21.0008 6V16C21.001 16.5046 20.8104 16.9906 20.4673 17.3605C20.1243 17.7305 19.654 17.9572 19.1508 17.995L19.0008 18H5.00085C4.49627 18.0002 4.01028 17.8096 3.6403 17.4665C3.27032 17.1234 3.04369 16.6532 3.00585 16.15L3.00085 16V6C3.00069 5.49542 3.19125 5.00943 3.53434 4.63945C3.87743 4.26947 4.34769 4.04284 4.85085 4.005L5.00085 4H19.0008Z\"\n\t\t\t\t\t\t\tfill=\"#2D65FF\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</svg>\n\t\t\t\t) : (\n\t\t\t\t\t<svg\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\taria-label=\"Screen Share\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M20.9999 19C21.2547 19.0003 21.4999 19.0979 21.6852 19.2728C21.8706 19.4478 21.9821 19.687 21.997 19.9414C22.012 20.1958 21.9292 20.4464 21.7656 20.6418C21.602 20.8373 21.37 20.9629 21.1169 20.993L20.9999 21H2.99987C2.74499 20.9997 2.49984 20.9021 2.3145 20.7272C2.12916 20.5522 2.01763 20.313 2.0027 20.0586C1.98776 19.8042 2.07054 19.5536 2.23413 19.3582C2.39772 19.1627 2.62977 19.0371 2.88287 19.007L2.99987 19H20.9999ZM18.9999 4C19.5044 3.99984 19.9904 4.19041 20.3604 4.5335C20.7304 4.87659 20.957 5.34684 20.9949 5.85L20.9999 6V16C21 16.5046 20.8095 16.9906 20.4664 17.3605C20.1233 17.7305 19.653 17.9572 19.1499 17.995L18.9999 18H4.99987C4.49529 18.0002 4.0093 17.8096 3.63932 17.4665C3.26934 17.1234 3.04271 16.6532 3.00487 16.15L2.99987 16V6C2.99971 5.49542 3.19028 5.00943 3.53337 4.63945C3.87646 4.26947 4.34671 4.04284 4.84987 4.005L4.99987 4H18.9999Z\"\n\t\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</svg>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t</button>\n\t);\n});\n\nScreenShareButton.displayName = 'ScreenShareButton';\n";
-var styles$c = "/* SelectDevice styles */\n.selectDevice {\n\theight: 3rem;\n\twidth: 5.5rem;\n\tborder-radius: 9999px;\n\tbackground-color: rgba(255, 255, 255, 0.2);\n\tpadding: 0 0.75rem;\n\tborder: 1px solid rgba(255, 255, 255, 0.2);\n\tbackdrop-filter: blur(10px);\n\tcolor: transparent;\n\tpadding-right: 2rem; /* space for arrow */\n\tbox-sizing: border-box;\n\t-webkit-appearance: none;\n\t-moz-appearance: none;\n\tappearance: none;\n\tcursor: pointer;\n}\n\n.selectDevice::-ms-expand {\n\tdisplay: none;\n}\n\n.selectDevice option {\n\tcolor: transparent;\n\tbackground-color: transparent;\n}\n\n.selectDevice:focus {\n\toutline: none;\n}\n\n/* Device button container styles */\n.deviceButtonContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 9999px;\n\tbackdrop-filter: blur(4px);\n}\n\n/* Device button styles */\n.deviceButton {\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n\tz-index: 10;\n\theight: 3rem;\n\twidth: 3rem;\n\tborder-radius: 9999px;\n\tbackground-color: white;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder: 1px solid transparent;\n\tcursor: pointer;\n}\n\n.deviceButtonIcon {\n\tdisplay: flex;\n}\n\n.deviceButton:disabled {\n\topacity: 0.5;\n}\n\n/* Screen reader only text */\n.srOnly {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tpadding: 0;\n\tmargin: -1px;\n\toverflow: hidden;\n\tclip: rect(0, 0, 0, 0);\n\twhite-space: nowrap;\n\tborder-width: 0;\n}\n\n/* Controls container */\n.controlsContainer {\n\tdisplay: flex;\n\tgap: 1rem;\n\tjustify-content: center;\n\talign-items: center;\n}\n\n.selectDeviceContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.selectArrow {\n\tposition: absolute;\n\tright: 1rem;\n\tpointer-events: none;\n\tdisplay: flex;\n\talign-items: center;\n\theight: 100%;\n}\n\n.screenShareButton {\n\tcursor: pointer;\n\tposition: relative;\n\theight: 3rem;\n\twidth: 3rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 9999px;\n\tbackdrop-filter: blur(4px);\n\tbackground-color: rgba(255, 255, 255, 0.2);\n\tborder: 1px solid rgba(255, 255, 255, 0.2);\n}\n";
-var componentsDependencies$2 = [
-	"use-local-camera",
-	"use-local-microphone",
-	"use-local-screenshare"
-];
-var controls = {
+var content$c = "import { DailyProvider } from '@daily-co/daily-react';\n\nexport const CVIProvider = ({ children }) => {\n\treturn <DailyProvider>{children}</DailyProvider>;\n};\n";
+var styles$c = "";
+var cviProvider = {
 	type: type$c,
 	content: content$c,
-	styles: styles$c,
-	componentsDependencies: componentsDependencies$2
+	styles: styles$c
 };
 
 var type$b = "components";
-var content$b = "import React, { useEffect } from 'react';\nimport {\n\tDailyAudio,\n\tDailyVideo,\n\tuseDaily,\n\tuseDevices,\n\tuseLocalSessionId,\n\tuseMeetingState,\n\tuseScreenVideoTrack,\n\tuseVideoTrack,\n} from '@daily-co/daily-react';\nimport { MicrophoneButton, CameraButton, ScreenShareButton } from '../controls';\nimport { useLocalScreenshare } from '../../hooks/use-local-screenshare';\nimport { useReplicaIDs } from '../../hooks/use-replica-ids';\nimport { AudioWave } from '../audio-wave';\n\nimport styles from './conversation.module.css';\n\nconst VideoPreview = React.memo(({ id }) => {\n\tconst videoState = useVideoTrack(id);\n\tconst widthVideo = videoState.track?.getSettings()?.width;\n\tconst heightVideo = videoState.track?.getSettings()?.height;\n\tconst isVertical = widthVideo && heightVideo ? widthVideo < heightVideo : false;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.previewVideoContainer} ${isVertical ? styles.previewVideoContainerVertical : ''} ${videoState.isOff ? styles.previewVideoContainerHidden : ''}`}\n\t\t>\n\t\t\t<DailyVideo\n\t\t\t\tautomirror\n\t\t\t\tsessionId={id}\n\t\t\t\ttype=\"video\"\n\t\t\t\tclassName={`${styles.previewVideo} ${isVertical ? styles.previewVideoVertical : ''} ${videoState.isOff ? styles.previewVideoHidden : ''}`}\n\t\t\t/>\n\n\t\t\t<div className={styles.audioWaveContainer}>\n\t\t\t\t<AudioWave id={id} />\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nconst PreviewVideos = React.memo(() => {\n\tconst localId = useLocalSessionId();\n\tconst { isScreenSharing } = useLocalScreenshare();\n\tconst replicaIds = useReplicaIDs();\n\tconst replicaId = replicaIds[0];\n\n\treturn (\n\t\t<>\n\t\t\t{isScreenSharing && <VideoPreview id={replicaId} />}\n\t\t\t<VideoPreview id={localId} />\n\t\t</>\n\t);\n});\n\nconst MainVideo = React.memo(() => {\n\tconst replicaIds = useReplicaIDs();\n\tconst localId = useLocalSessionId();\n\tconst videoState = useVideoTrack(replicaIds[0]);\n\tconst screenVideoState = useScreenVideoTrack(localId);\n\tconst isScreenSharing = !screenVideoState.isOff;\n\t// This is one to one call, so we can use the first replica id\n\tconst replicaId = replicaIds[0];\n\n\tif (!replicaId) {\n\t\treturn (\n\t\t\t<div className={styles.waitingContainer}>\n\t\t\t\t<p>Connecting...</p>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Switching between replica video and screen sharing video\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.mainVideoContainer} ${isScreenSharing ? styles.mainVideoContainerScreenSharing : ''}`}\n\t\t>\n\t\t\t<DailyVideo\n\t\t\t\tautomirror\n\t\t\t\tsessionId={isScreenSharing ? localId : replicaId}\n\t\t\t\ttype={isScreenSharing ? 'screenVideo' : 'video'}\n\t\t\t\tclassName={`${styles.mainVideo} \n\t\t\t\t${isScreenSharing ? styles.mainVideoScreenSharing : ''} \n\t\t\t\t${videoState.isOff ? styles.mainVideoHidden : ''}`}\n\t\t\t/>\n\t\t</div>\n\t);\n});\n\nexport const Conversation = React.memo(({ onLeave, conversation }) => {\n\tconst daily = useDaily();\n\tconst meetingState = useMeetingState();\n\tconst { hasMicError } = useDevices();\n\n\tuseEffect(() => {\n\t\tif (meetingState === 'error') {\n\t\t\tonLeave();\n\t\t}\n\t}, [meetingState, onLeave]);\n\n\t// Initialize call when conversation is available\n\tuseEffect(() => {\n\t\tif (conversation?.conversation_url) {\n\t\t\tdaily?.join({\n\t\t\t\turl: conversation.conversation_url,\n\t\t\t});\n\t\t}\n\t}, [conversation, daily]);\n\n\treturn (\n\t\t<div className={styles.container}>\n\t\t\t<div className={styles.videoContainer}>\n\t\t\t\t{hasMicError && (\n\t\t\t\t\t<div className={styles.errorContainer}>\n\t\t\t\t\t\t<p>Camera or microphone access denied. Please check your settings and try again.</p>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{/* Main video */}\n\t\t\t\t<div className={styles.mainVideoContainer}>\n\t\t\t\t\t<MainVideo />\n\t\t\t\t</div>\n\n\t\t\t\t{/* Self view */}\n\t\t\t\t<div className={styles.selfViewContainer}>\n\t\t\t\t\t<PreviewVideos />\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div className={styles.footer}>\n\t\t\t\t<div className={styles.footerControls}>\n\t\t\t\t\t<MicrophoneButton />\n\t\t\t\t\t<CameraButton />\n\t\t\t\t\t<ScreenShareButton />\n\t\t\t\t\t<button type=\"button\" className={styles.leaveButton} onClick={onLeave}>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Leave Call\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M18 6L6 18M6 6L18 18\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<DailyAudio />\n\t\t</div>\n\t);\n});\n";
-var styles$b = ".container {\n\tposition: relative;\n\twidth: 100%;\n\ttext-align: center;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\taspect-ratio: 9/16;\n\toverflow: hidden;\n\tborder-radius: 0.5rem;\n\tmax-height: 90vh;\n\tbackground: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);\n\tbackground-size: 400% 400%;\n\tanimation: gradient 15s ease infinite;\n}\n\n@media (min-width: 768px) {\n\t.container {\n\t\taspect-ratio: 16/9;\n\t}\n}\n\n.errorContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: rgba(248, 250, 252, 0.08);\n\tcolor: white;\n\theight: 100%;\n\tfont-size: 1.5rem;\n\tfont-weight: 600;\n\ttext-align: center;\n}\n\n.videoContainer {\n\tposition: relative;\n\tz-index: 5;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.footer {\n\tposition: absolute;\n\tbottom: 1.5rem;\n\tleft: 0;\n\tright: 0;\n\tz-index: 20;\n}\n\n.footerControls {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 16px;\n}\n\n.leaveButton {\n\tbackground: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);\n\tcolor: white;\n\tborder: none;\n\tfont-size: 16px;\n\tcursor: pointer;\n\ttransition: all 0.3s ease;\n\theight: 3rem;\n\twidth: 3rem;\n\tborder-radius: 9999px;\n\tbackground-color: #ef4444;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.leaveButton:hover {\n\topacity: 0.8;\n}\n\n/* ReplicaVideo styles */\n.mainVideoContainer {\n\tbackground: transparent;\n\twidth: 100%;\n\theight: 100%;\n\tposition: relative;\n}\n\n.mainVideoContainerScreenSharing {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.mainVideo {\n\tposition: absolute;\n\tinset: 0;\n\tobject-position: center;\n\tobject-fit: cover !important;\n\theight: 100%;\n\twidth: 100%;\n\ttransition: all 0.3s ease;\n}\n\n.mainVideoScreenSharing {\n\tobject-fit: contain !important;\n}\n\n.mainVideoHidden {\n\tdisplay: none;\n}\n\n/* PreviewVideo styles */\n.previewVideoContainer {\n\tposition: relative;\n\tbackground: rgba(2, 6, 23, 0.3);\n\taspect-ratio: 16/9;\n\twidth: 11rem;\n\tborder-radius: 1rem;\n\toverflow: hidden;\n\tmax-height: 120px;\n\tz-index: 10;\n}\n\n@media (min-width: 768px) {\n\t.previewVideoContainer {\n\t\tmax-height: 100%;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.previewVideoContainer {\n\t\twidth: 17.875rem;\n\t}\n}\n\n.previewVideoContainerVertical {\n\theight: 40.5rem;\n\twidth: 6rem;\n}\n\n.previewVideoContainerHidden {\n\tbackground: transparent;\n\tdisplay: none;\n}\n\n.previewVideo {\n\twidth: 100%;\n\theight: auto;\n\tmax-height: 120px;\n}\n\n@media (min-width: 768px) {\n\t.previewVideo {\n\t\tmax-height: 100%;\n\t}\n}\n\n.previewVideoVertical {\n\theight: 40.5rem;\n\twidth: 6rem;\n\tobject-fit: cover;\n}\n\n.previewVideoHidden {\n\tdisplay: none;\n}\n\n/* Main video container */\n.mainVideoContainer {\n\twidth: 100%;\n\theight: 100%;\n}\n\n/* Self view container */\n.selfViewContainer {\n\tposition: absolute;\n\tbottom: 5rem;\n\tleft: 1rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-direction: column;\n\tgap: 0.75rem;\n}\n\n@media (min-width: 768px) {\n\t.selfViewContainer {\n\t\tbottom: 1rem;\n\t}\n}\n\n/* Waiting message container */\n/* Start of Selection */\n.waitingContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: transparent;\n\tcolor: white;\n\theight: 100%;\n\tfont-size: 1.5rem;\n\tfont-weight: 600;\n}\n\n@keyframes gradient {\n\t0% {\n\t\tbackground-position: 0% 50%;\n\t}\n\t50% {\n\t\tbackground-position: 100% 50%;\n\t}\n\t100% {\n\t\tbackground-position: 0% 50%;\n\t}\n}\n/* End of Selection */\n\n.audioWaveContainer {\n\tposition: absolute;\n\tbottom: 0.5rem;\n\tright: 0.5rem;\n}\n";
-var componentsDependencies$1 = [
-	"controls",
-	"use-local-screenshare",
-	"use-replica-ids",
-	"audio-wave"
+var content$b = "import React, { memo } from 'react';\nimport { useDevices } from '@daily-co/daily-react';\nimport { useLocalCamera } from '../../hooks/use-local-camera';\nimport { useLocalMicrophone } from '../../hooks/use-local-microphone';\nimport { useLocalScreenshare } from '../../hooks/use-local-screenshare';\nimport styles from './device-select.module.css';\n\nexport const SelectDevice = ({ value, devices, disabled, onChange }) => {\n\treturn (\n\t\t<div className={styles.selectDeviceContainer}>\n\t\t\t<select\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={(e) => onChange(e.target.value)}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tclassName={styles.selectDevice}\n\t\t\t>\n\t\t\t\t{devices.map(({ device }) => (\n\t\t\t\t\t<option key={device.deviceId} value={device.deviceId}>\n\t\t\t\t\t\t{device.label}\n\t\t\t\t\t</option>\n\t\t\t\t))}\n\t\t\t</select>\n\t\t\t<span className={styles.selectArrow}>\n\t\t\t\t<svg\n\t\t\t\t\twidth=\"16\"\n\t\t\t\t\theight=\"16\"\n\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M4 6L8 10L12 6\"\n\t\t\t\t\t\tstroke=\"#fff\"\n\t\t\t\t\t\tstrokeWidth=\"1.5\"\n\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t</span>\n\t\t</div>\n\t);\n};\n\nexport const MicSelectBtn = memo(() => {\n\tconst { onToggleMicrophone, isMicReady, isMicMuted } = useLocalMicrophone();\n\tconst { microphones, currentMic, setMicrophone } = useDevices();\n\n\treturn (\n\t\t<div className={styles.deviceButtonContainer}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={onToggleMicrophone}\n\t\t\t\tdisabled={!isMicReady}\n\t\t\t\tclassName={styles.deviceButton}\n\t\t\t>\n\t\t\t\t<span className={styles.deviceButtonIcon}>\n\t\t\t\t\t{isMicMuted || !isMicReady ? (\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Microphone Muted\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 18.1339 14.0992 18.1339 14.0992M12 18V21\"\n\t\t\t\t\t\t\t\tstroke=\"#020617\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"1.66667\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\tx=\"1.30225\"\n\t\t\t\t\t\t\t\ty=\"3\"\n\t\t\t\t\t\t\t\twidth=\"26\"\n\t\t\t\t\t\t\t\theight=\"2.24738\"\n\t\t\t\t\t\t\t\trx=\"1.12369\"\n\t\t\t\t\t\t\t\ttransform=\"rotate(30 1.30225 3)\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\td=\"M9 9.39031V11C9 11.7956 9.31607 12.5587 9.87868 13.1213C10.4413 13.6839 11.2044 14 12 14C12.7956 14 13.5587 13.6839 14.1213 13.1213C14.2829 12.9597 14.4242 12.7816 14.5435 12.5908L9 9.39031ZM15 7.71466V6C15 5.20435 14.6839 4.44129 14.1213 3.87868C13.5587 3.31607 12.7956 3 12 3C11.2044 3 10.4413 3.31607 9.87868 3.87868C9.69528 4.06208 9.53807 4.26678 9.40948 4.48697L15 7.71466Z\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M9 9.39031L9.41667 8.66862C9.15883 8.51976 8.84117 8.51976 8.58333 8.66862C8.3255 8.81748 8.16667 9.09259 8.16667 9.39031H9ZM9.87868 13.1213L9.28942 13.7106H9.28942L9.87868 13.1213ZM14.1213 13.1213L14.7106 13.7106L14.7106 13.7106L14.1213 13.1213ZM14.5435 12.5908L15.25 13.0327C15.3699 12.841 15.4068 12.6088 15.3521 12.3894C15.2974 12.17 15.156 11.9822 14.9601 11.8692L14.5435 12.5908ZM15 7.71466L14.5833 8.43635C14.8412 8.58521 15.1588 8.58521 15.4167 8.43635C15.6745 8.28749 15.8333 8.01238 15.8333 7.71466H15ZM14.1213 3.87868L14.7106 3.28942L14.7106 3.28942L14.1213 3.87868ZM9.87868 3.87868L9.28942 3.28942L9.28942 3.28942L9.87868 3.87868ZM9.40948 4.48697L8.68988 4.06671C8.57806 4.25818 8.54715 4.48633 8.604 4.70065C8.66086 4.91497 8.80078 5.09779 8.99281 5.20866L9.40948 4.48697ZM9.83333 11V9.39031H8.16667V11H9.83333ZM10.4679 12.5321C10.0616 12.1257 9.83333 11.5746 9.83333 11H8.16667C8.16667 12.0167 8.57053 12.9917 9.28942 13.7106L10.4679 12.5321ZM12 13.1667C11.4254 13.1667 10.8743 12.9384 10.4679 12.5321L9.28942 13.7106C10.0083 14.4295 10.9833 14.8333 12 14.8333V13.1667ZM13.5321 12.5321C13.1257 12.9384 12.5746 13.1667 12 13.1667V14.8333C13.0167 14.8333 13.9917 14.4295 14.7106 13.7106L13.5321 12.5321ZM13.837 12.149C13.7508 12.2867 13.6488 12.4153 13.5321 12.5321L14.7106 13.7106C14.917 13.5041 15.0976 13.2764 15.25 13.0327L13.837 12.149ZM14.9601 11.8692L9.41667 8.66862L8.58333 10.112L14.1268 13.3125L14.9601 11.8692ZM14.1667 6V7.71466H15.8333V6H14.1667ZM13.5321 4.46794C13.9384 4.87426 14.1667 5.42536 14.1667 6H15.8333C15.8333 4.98334 15.4295 4.00831 14.7106 3.28942L13.5321 4.46794ZM12 3.83333C12.5746 3.83333 13.1257 4.06161 13.5321 4.46794L14.7106 3.28942C13.9917 2.57053 13.0167 2.16667 12 2.16667V3.83333ZM10.4679 4.46794C10.8743 4.06161 11.4254 3.83333 12 3.83333V2.16667C10.9833 2.16667 10.0083 2.57053 9.28942 3.28942L10.4679 4.46794ZM10.1291 4.90724C10.2219 4.74824 10.3354 4.60042 10.4679 4.46794L9.28942 3.28942C9.05511 3.52374 8.85421 3.78533 8.68988 4.06671L10.1291 4.90724ZM8.99281 5.20866L14.5833 8.43635L15.4167 6.99298L9.82615 3.76529L8.99281 5.20866Z\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Microphone\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M9 6C9 5.20435 9.31607 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3C12.7956 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6V11C15 11.7956 14.6839 12.5587 14.1213 13.1213C13.5587 13.6839 12.7956 14 12 14C11.2044 14 10.4413 13.6839 9.87868 13.1213C9.31607 12.5587 9 11.7956 9 11V6Z\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t\tstroke=\"#020617\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 19 12.8565 19 11V10M12 18V21\"\n\t\t\t\t\t\t\t\tstroke=\"#020617\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t\t<span className={styles.srOnly}>Microphone</span>\n\t\t\t</button>\n\t\t\t<SelectDevice\n\t\t\t\tvalue={currentMic?.device?.deviceId}\n\t\t\t\tdevices={microphones || []}\n\t\t\t\tdisabled={!isMicReady}\n\t\t\t\tonChange={(val) => setMicrophone(val)}\n\t\t\t/>\n\t\t</div>\n\t);\n});\n\nMicSelectBtn.displayName = 'MicSelectBtn';\n\nexport const CameraSelectBtn = memo(() => {\n\tconst { onToggleCamera, isCamReady, isCamMuted } = useLocalCamera();\n\tconst { currentCam, cameras, setCamera } = useDevices();\n\n\treturn (\n\t\t<div className={styles.deviceButtonContainer}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={onToggleCamera}\n\t\t\t\tdisabled={!isCamReady || !currentCam}\n\t\t\t\tclassName={styles.deviceButton}\n\t\t\t>\n\t\t\t\t<span className={styles.deviceButtonIcon}>\n\t\t\t\t\t{isCamMuted ? (\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Camera Muted\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<g clipPath=\"url(#clip0_7082_14220)\">\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\td=\"M3.19874 5.60093C3.08628 5.68537 2.97928 5.77808 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V15.048C17.7787 14.8204 17.5304 14.6189 17.2595 14.4485L3.19874 5.60093ZM22 12.655V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H8.7412L22 12.655Z\"\n\t\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\t\tx=\"0.777222\"\n\t\t\t\t\t\t\t\t\ty=\"2.64844\"\n\t\t\t\t\t\t\t\t\twidth=\"26.7988\"\n\t\t\t\t\t\t\t\t\theight=\"2.24738\"\n\t\t\t\t\t\t\t\t\trx=\"1.12369\"\n\t\t\t\t\t\t\t\t\ttransform=\"rotate(30 0.777222 2.64844)\"\n\t\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t<defs>\n\t\t\t\t\t\t\t\t<clipPath id=\"clip0_7082_14220\">\n\t\t\t\t\t\t\t\t\t<rect width=\"24\" height=\"24\" fill=\"white\" />\n\t\t\t\t\t\t\t\t</clipPath>\n\t\t\t\t\t\t\t</defs>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Camera\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\td=\"M5 5C4.20435 5 3.44129 5.31607 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V14.414L20.293 16.707C20.4329 16.8468 20.611 16.942 20.805 16.9806C20.9989 17.0192 21.2 16.9993 21.3827 16.9237C21.5654 16.848 21.7215 16.7199 21.8314 16.5555C21.9413 16.391 22 16.1978 22 16V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H5Z\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t\t<span className={styles.srOnly}>Camera</span>\n\t\t\t</button>\n\t\t\t<SelectDevice\n\t\t\t\tvalue={currentCam?.device?.deviceId}\n\t\t\t\tdevices={cameras || []}\n\t\t\t\tdisabled={!isCamReady}\n\t\t\t\tonChange={(val) => setCamera(val)}\n\t\t\t/>\n\t\t</div>\n\t);\n});\n\nCameraSelectBtn.displayName = 'CameraSelectBtn';\n\nexport const ScreenShareButton = memo(() => {\n\tconst { onToggleScreenshare, isScreenSharing } = useLocalScreenshare();\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tonClick={onToggleScreenshare}\n\t\t\tclassName={`${styles.deviceButtonContainer} ${styles.screenShareButton}`}\n\t\t>\n\t\t\t<span>\n\t\t\t\t{isScreenSharing ? (\n\t\t\t\t\t<svg\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\taria-label=\"Screen Share\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M21.0008 19C21.2557 19.0003 21.5009 19.0979 21.6862 19.2728C21.8715 19.4478 21.9831 19.687 21.998 19.9414C22.013 20.1958 21.9302 20.4464 21.7666 20.6418C21.603 20.8373 21.3709 20.9629 21.1178 20.993L21.0008 21H3.00085C2.74597 20.9997 2.50081 20.9021 2.31548 20.7272C2.13014 20.5522 2.01861 20.313 2.00367 20.0586C1.98874 19.8042 2.07152 19.5536 2.23511 19.3582C2.3987 19.1627 2.63075 19.0371 2.88385 19.007L3.00085 19H21.0008ZM19.0008 4C19.5054 3.99984 19.9914 4.19041 20.3614 4.5335C20.7314 4.87659 20.958 5.34684 20.9958 5.85L21.0008 6V16C21.001 16.5046 20.8104 16.9906 20.4673 17.3605C20.1243 17.7305 19.654 17.9572 19.1508 17.995L19.0008 18H5.00085C4.49627 18.0002 4.01028 17.8096 3.6403 17.4665C3.27032 17.1234 3.04369 16.6532 3.00585 16.15L3.00085 16V6C3.00069 5.49542 3.19125 5.00943 3.53434 4.63945C3.87743 4.26947 4.34769 4.04284 4.85085 4.005L5.00085 4H19.0008Z\"\n\t\t\t\t\t\t\tfill=\"#2D65FF\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</svg>\n\t\t\t\t) : (\n\t\t\t\t\t<svg\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\taria-label=\"Screen Share\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M20.9999 19C21.2547 19.0003 21.4999 19.0979 21.6852 19.2728C21.8706 19.4478 21.9821 19.687 21.997 19.9414C22.012 20.1958 21.9292 20.4464 21.7656 20.6418C21.602 20.8373 21.37 20.9629 21.1169 20.993L20.9999 21H2.99987C2.74499 20.9997 2.49984 20.9021 2.3145 20.7272C2.12916 20.5522 2.01763 20.313 2.0027 20.0586C1.98776 19.8042 2.07054 19.5536 2.23413 19.3582C2.39772 19.1627 2.62977 19.0371 2.88287 19.007L2.99987 19H20.9999ZM18.9999 4C19.5044 3.99984 19.9904 4.19041 20.3604 4.5335C20.7304 4.87659 20.957 5.34684 20.9949 5.85L20.9999 6V16C21 16.5046 20.8095 16.9906 20.4664 17.3605C20.1233 17.7305 19.653 17.9572 19.1499 17.995L18.9999 18H4.99987C4.49529 18.0002 4.0093 17.8096 3.63932 17.4665C3.26934 17.1234 3.04271 16.6532 3.00487 16.15L2.99987 16V6C2.99971 5.49542 3.19028 5.00943 3.53337 4.63945C3.87646 4.26947 4.34671 4.04284 4.84987 4.005L4.99987 4H18.9999Z\"\n\t\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</svg>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t</button>\n\t);\n});\n\nScreenShareButton.displayName = 'ScreenShareButton';\n";
+var styles$b = "/* SelectDevice styles */\n.selectDevice {\n\theight: 3rem;\n\twidth: 5.5rem;\n\tborder-radius: 9999px;\n\tbackground-color: rgba(255, 255, 255, 0.2);\n\tpadding: 0 0.75rem;\n\tborder: 1px solid rgba(255, 255, 255, 0.2);\n\tbackdrop-filter: blur(10px);\n\tcolor: transparent;\n\tpadding-right: 2rem; /* space for arrow */\n\tbox-sizing: border-box;\n\t-webkit-appearance: none;\n\t-moz-appearance: none;\n\tappearance: none;\n\tcursor: pointer;\n}\n\n.selectDevice::-ms-expand {\n\tdisplay: none;\n}\n\n.selectDevice option {\n\tcolor: transparent;\n\tbackground-color: transparent;\n}\n\n.selectDevice:focus {\n\toutline: none;\n}\n\n/* Device button container styles */\n.deviceButtonContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 9999px;\n\tbackdrop-filter: blur(4px);\n}\n\n/* Device button styles */\n.deviceButton {\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n\tz-index: 10;\n\theight: 3rem;\n\twidth: 3rem;\n\tborder-radius: 9999px;\n\tbackground-color: white;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder: 1px solid transparent;\n\tcursor: pointer;\n}\n\n.deviceButtonIcon {\n\tdisplay: flex;\n}\n\n.deviceButton:disabled {\n\topacity: 0.5;\n}\n\n/* Screen reader only text */\n.srOnly {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tpadding: 0;\n\tmargin: -1px;\n\toverflow: hidden;\n\tclip: rect(0, 0, 0, 0);\n\twhite-space: nowrap;\n\tborder-width: 0;\n}\n\n/* Controls container */\n.controlsContainer {\n\tdisplay: flex;\n\tgap: 1rem;\n\tjustify-content: center;\n\talign-items: center;\n}\n\n.selectDeviceContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.selectArrow {\n\tposition: absolute;\n\tright: 1rem;\n\tpointer-events: none;\n\tdisplay: flex;\n\talign-items: center;\n\theight: 100%;\n}\n\n.screenShareButton {\n\tcursor: pointer;\n\tposition: relative;\n\theight: 3rem;\n\twidth: 3rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 9999px;\n\tbackdrop-filter: blur(4px);\n\tbackground-color: rgba(255, 255, 255, 0.2);\n\tborder: 1px solid rgba(255, 255, 255, 0.2);\n}\n";
+var componentsDependencies$2 = [
+	"use-local-camera",
+	"use-local-microphone",
+	"use-local-screenshare"
 ];
-var conversation01 = {
+var deviceSelect = {
 	type: type$b,
 	content: content$b,
 	styles: styles$b,
-	componentsDependencies: componentsDependencies$1
+	componentsDependencies: componentsDependencies$2
 };
 
 var type$a = "components";
-var content$a = "import { DailyProvider } from '@daily-co/daily-react';\n\nexport const CVIProvider = ({ children }) => {\n\treturn <DailyProvider>{children}</DailyProvider>;\n};\n";
-var styles$a = "";
-var cviProvider = {
+var content$a = "import React, { memo, useEffect } from 'react';\nimport { DailyVideo, useDaily } from '@daily-co/daily-react';\nimport { CameraSelectBtn, MicSelectBtn } from '../device-select';\nimport { useStartHaircheck } from '../../hooks/use-start-haircheck';\nimport { useLocalCamera } from '../../hooks/use-local-camera';\n\nimport styles from './hair-check.module.css';\n\nconst JoinBtn = ({ onClick, disabled, className, loading }) => {\n\treturn (\n\t\t<button\n\t\t\tclassName={`${styles.buttonJoin} ${className || ''}`}\n\t\t\ttype=\"button\"\n\t\t\tonClick={onClick}\n\t\t\tdisabled={disabled || loading}\n\t\t>\n\t\t\t<div className={styles.buttonJoinInner}>{loading ? 'Joining...' : 'Join Video Chat'}</div>\n\t\t</button>\n\t);\n};\n\nexport const HairCheck = memo(({ isJoinBtnLoading = false, onJoin, onCancel }) => {\n\tconst daily = useDaily();\n\tconst { localSessionId, isCamMuted } = useLocalCamera();\n\n\tconst {\n\t\tisPermissionsPrompt,\n\t\tisPermissionsLoading,\n\t\tisPermissionsGranted,\n\t\tisPermissionsDenied,\n\t\trequestPermissions,\n\t} = useStartHaircheck();\n\n\tuseEffect(() => {\n\t\trequestPermissions();\n\t}, []);\n\n\tconst onCancelHairCheck = () => {\n\t\tif (daily) {\n\t\t\tdaily.leave();\n\t\t}\n\t\tonCancel?.();\n\t};\n\n\tconst getDescription = () => {\n\t\tif (isPermissionsPrompt) {\n\t\t\treturn 'Make sure your camera and mic are ready!';\n\t\t}\n\t\tif (isPermissionsLoading) {\n\t\t\treturn 'Getting your camera and mic ready...';\n\t\t}\n\t\tif (isPermissionsDenied) {\n\t\t\treturn 'Camera and mic access denied. Allow permissions to continue.';\n\t\t}\n\t\treturn \"You're all set! Your device is ready.\";\n\t};\n\treturn (\n\t\t<div className={styles.haircheckBlock}>\n\t\t\t{isPermissionsGranted && !isCamMuted ? (\n\t\t\t\t<DailyVideo type=\"video\" sessionId={localSessionId} mirror className={styles.dailyVideo} />\n\t\t\t) : (\n\t\t\t\t<div className={styles.haircheckUserPlaceholder}>\n\t\t\t\t\t<span className={styles.haircheckUserIcon}>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"88\"\n\t\t\t\t\t\t\theight=\"89\"\n\t\t\t\t\t\t\tviewBox=\"0 0 88 89\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\taria-label=\"Haircheck User\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M44 48.6406C17.952 48.6406 8.80005 61.8406 8.80005 70.6406V83.8406H79.2001V70.6406C79.2001 61.8406 70.0481 48.6406 44 48.6406Z\"\n\t\t\t\t\t\t\t\tfill=\"url(#paint0_linear_7135_21737)\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M44 44.2406C54.9352 44.2406 63.7999 35.3759 63.7999 24.4406C63.7999 13.5054 54.9352 4.64062 44 4.64062C33.0647 4.64062 24.2 13.5054 24.2 24.4406C24.2 35.3759 33.0647 44.2406 44 44.2406Z\"\n\t\t\t\t\t\t\t\tfill=\"url(#paint1_linear_7135_21737)\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<defs>\n\t\t\t\t\t\t\t\t<linearGradient\n\t\t\t\t\t\t\t\t\tid=\"paint0_linear_7135_21737\"\n\t\t\t\t\t\t\t\t\tx1=\"36.5001\"\n\t\t\t\t\t\t\t\t\ty1=\"43\"\n\t\t\t\t\t\t\t\t\tx2=\"44.0001\"\n\t\t\t\t\t\t\t\t\ty2=\"97.5\"\n\t\t\t\t\t\t\t\t\tgradientUnits=\"userSpaceOnUse\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<stop stopColor=\"white\" />\n\t\t\t\t\t\t\t\t\t<stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n\t\t\t\t\t\t\t\t</linearGradient>\n\t\t\t\t\t\t\t\t<linearGradient\n\t\t\t\t\t\t\t\t\tid=\"paint1_linear_7135_21737\"\n\t\t\t\t\t\t\t\t\tx1=\"44\"\n\t\t\t\t\t\t\t\t\ty1=\"4.64062\"\n\t\t\t\t\t\t\t\t\tx2=\"44\"\n\t\t\t\t\t\t\t\t\ty2=\"44.2406\"\n\t\t\t\t\t\t\t\t\tgradientUnits=\"userSpaceOnUse\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<stop stopColor=\"white\" />\n\t\t\t\t\t\t\t\t\t<stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n\t\t\t\t\t\t\t\t</linearGradient>\n\t\t\t\t\t\t\t</defs>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<div className={styles.haircheckSidebar}>\n\t\t\t\t<div className={styles.haircheckSidebarContent}>\n\t\t\t\t\t{isPermissionsDenied ? (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tonClick={onCancelHairCheck}\n\t\t\t\t\t\t\tclassName={`${styles.buttonCancel} ${styles.buttonJoinMobile}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<JoinBtn\n\t\t\t\t\t\t\tloading={isJoinBtnLoading}\n\t\t\t\t\t\t\tdisabled={!isPermissionsGranted}\n\t\t\t\t\t\t\tclassName={styles.buttonJoinMobile}\n\t\t\t\t\t\t\tonClick={onJoin}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<div />\n\t\t\t\t\t<div className={styles.haircheckContent}>\n\t\t\t\t\t\t<div className={styles.haircheckDescription}>{getDescription()}</div>\n\t\t\t\t\t\t{isPermissionsDenied ? (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={onCancelHairCheck}\n\t\t\t\t\t\t\t\tclassName={`${styles.buttonCancel} ${styles.buttonJoinDesktop}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<JoinBtn\n\t\t\t\t\t\t\t\tloading={isJoinBtnLoading}\n\t\t\t\t\t\t\t\tdisabled={!isPermissionsGranted}\n\t\t\t\t\t\t\t\tclassName={styles.buttonJoinDesktop}\n\t\t\t\t\t\t\t\tonClick={onJoin}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className={styles.haircheckControls}>\n\t\t\t\t\t\t<MicSelectBtn />\n\t\t\t\t\t\t<CameraSelectBtn />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nHairCheck.displayName = 'HairCheck';\n";
+var styles$a = "/* Button Component */\n/* Start of Selection */\n.buttonCancel {\n\tpadding: 1rem;\n\tborder: 1px solid rgba(255, 255, 255, 0.1);\n\tbackground-color: rgba(239, 68, 68, 0.8);\n\tborder-radius: 9999px;\n\tcolor: white;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: all 0.2s;\n\toutline: none;\n}\n\n.buttonCancel:hover {\n\tbackground-color: rgba(239, 68, 68, 1);\n}\n/* End of Selection */\n\n/* ButtonJoin Component */\n.buttonJoin {\n\tpadding: 5px;\n\tborder: 1px solid rgba(255, 255, 255, 0.1);\n\tbackground-color: rgba(255, 255, 255, 0.1);\n\tborder-radius: 9999px;\n\tcolor: white;\n\theight: 3.625rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: 500;\n\tcursor: pointer;\n}\n\n.buttonJoinInner {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground-color: #32c75c;\n\tborder-radius: 9999px;\n\tpadding: 1rem;\n\tbox-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n\theight: 3rem;\n\ttransition: background-color 0.2s;\n\tfont-weight: 500;\n\tmin-width: 8.5rem;\n}\n\n.buttonJoin:hover .buttonJoinInner {\n\tbackground-color: rgba(62, 192, 97, 0.9);\n}\n\n.buttonJoin:disabled .buttonJoinInner {\n\tbackground-color: rgba(34, 197, 94, 0.5);\n\tcursor: not-allowed;\n}\n\n.buttonJoinDesktop {\n\tdisplay: none;\n}\n\n@media (min-width: 768px) {\n\t.buttonJoinDesktop {\n\t\tdisplay: flex;\n\t}\n}\n\n.buttonJoinMobile {\n\tposition: absolute;\n\ttop: -5.125rem;\n\tleft: 50%;\n\ttransform: translateX(-50%);\n\tz-index: 20;\n}\n\n@media (min-width: 768px) {\n\t.buttonJoinMobile {\n\t\tdisplay: none;\n\t}\n}\n\n/* HaircheckScreen Component */\n.haircheckBlock {\n\tposition: relative;\n\twidth: 100%;\n\ttext-align: center;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\taspect-ratio: 9/16;\n\toverflow: hidden;\n\tborder-radius: 0.5rem;\n\tmax-height: 90vh;\n}\n\n@media (min-width: 768px) {\n\t.haircheckBlock {\n\t\taspect-ratio: 16/9;\n\t}\n}\n\n.dailyVideo {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover !important;\n\tposition: absolute;\n\tinset: 0;\n\ttransition: opacity 0.3s ease-in-out;\n}\n\n.haircheckUserPlaceholder {\n\tposition: absolute;\n\tinset: 0;\n  background: linear-gradient(135deg, #4b5563 0%, #1f2937 100%);\n\tz-index: 5;\n\tpointer-events: none;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.haircheckUserIcon {\n\twidth: 12.5rem;\n\theight: 12.5rem;\n\tborder-radius: 9999px;\n\tbackground-color: rgba(255, 255, 255, 0.1);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.haircheckSidebar {\n\tposition: absolute;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\twidth: 100%;\n\tbackground-color: rgba(2, 6, 23, 0.45);\n\tbackdrop-filter: blur(20px);\n\tborder-left: 1px solid rgba(255, 255, 255, 0.2);\n\tz-index: 5;\n}\n\n@media (min-width: 768px) {\n\t.haircheckSidebar {\n\t\tleft: auto;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: 17.5rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.haircheckSidebar {\n\t\twidth: 23rem;\n\t}\n}\n\n.haircheckSidebarContent {\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 1.5rem 1.25rem;\n\tgap: 1.5rem;\n\twidth: 100%;\n\theight: 100%;\n}\n\n@media (min-width: 768px) {\n\t.haircheckSidebarContent {\n\t\tpadding: 1rem 1.25rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.haircheckSidebarContent {\n\t\tpadding: 2rem 1.25rem;\n\t}\n}\n\n.haircheckContent {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 2rem;\n}\n\n.haircheckDescription {\n\tcolor: #ffffff;\n\tfont-size: 1.125rem;\n\tfont-weight: 500;\n}\n\n@media (min-width: 768px) {\n\t.haircheckDescription {\n\t\tfont-size: 1.25rem;\n\t}\n}\n\n.haircheckControls {\n\tdisplay: flex;\n\talign-items: flex-end;\n\tjustify-content: space-between;\n\tgap: 1rem;\n}\n";
+var componentsDependencies$1 = [
+	"device-select",
+	"use-start-haircheck",
+	"use-local-camera",
+	"cvi-provider"
+];
+var hairCheck01 = {
 	type: type$a,
 	content: content$a,
-	styles: styles$a
+	styles: styles$a,
+	componentsDependencies: componentsDependencies$1
 };
 
 var type$9 = "components";
-var content$9 = "import React, { memo, useEffect } from 'react';\nimport { DailyVideo, useDaily } from '@daily-co/daily-react';\nimport { CameraButton, MicrophoneButton } from '../controls';\nimport { useStartHaircheck } from '../../hooks/use-start-haircheck';\nimport { useLocalCamera } from '../../hooks/use-local-camera';\n\nimport styles from './hair-check.module.css';\n\nconst JoinBtn = ({ onClick, disabled, className, loading }) => {\n\treturn (\n\t\t<button\n\t\t\tclassName={`${styles.buttonJoin} ${className || ''}`}\n\t\t\ttype=\"button\"\n\t\t\tonClick={onClick}\n\t\t\tdisabled={disabled || loading}\n\t\t>\n\t\t\t<div className={styles.buttonJoinInner}>{loading ? 'Joining...' : 'Join Video Chat'}</div>\n\t\t</button>\n\t);\n};\n\nexport const HairCheck = memo(({ isJoinBtnLoading = false, onJoin, onCancel }) => {\n\tconst daily = useDaily();\n\tconst { localSessionId, isCamMuted } = useLocalCamera();\n\n\tconst {\n\t\tisPermissionsPrompt,\n\t\tisPermissionsLoading,\n\t\tisPermissionsGranted,\n\t\tisPermissionsDenied,\n\t\trequestPermissions,\n\t} = useStartHaircheck();\n\n\tuseEffect(() => {\n\t\trequestPermissions();\n\t}, []);\n\n\tconst onCancelHairCheck = () => {\n\t\tif (daily) {\n\t\t\tdaily.leave();\n\t\t}\n\t\tonCancel?.();\n\t};\n\n\tconst getDescription = () => {\n\t\tif (isPermissionsPrompt) {\n\t\t\treturn 'Make sure your camera and mic are ready!';\n\t\t}\n\t\tif (isPermissionsLoading) {\n\t\t\treturn 'Getting your camera and mic ready...';\n\t\t}\n\t\tif (isPermissionsDenied) {\n\t\t\treturn 'Camera and mic access denied. Allow permissions to continue.';\n\t\t}\n\t\treturn \"You're all set! Your device is ready.\";\n\t};\n\treturn (\n\t\t<div className={styles.haircheckBlock}>\n\t\t\t{isPermissionsGranted && !isCamMuted ? (\n\t\t\t\t<DailyVideo type=\"video\" sessionId={localSessionId} mirror className={styles.dailyVideo} />\n\t\t\t) : (\n\t\t\t\t<div className={styles.haircheckUserPlaceholder}>\n\t\t\t\t\t<span className={styles.haircheckUserIcon}>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"88\"\n\t\t\t\t\t\t\theight=\"89\"\n\t\t\t\t\t\t\tviewBox=\"0 0 88 89\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\taria-label=\"Haircheck User\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M44 48.6406C17.952 48.6406 8.80005 61.8406 8.80005 70.6406V83.8406H79.2001V70.6406C79.2001 61.8406 70.0481 48.6406 44 48.6406Z\"\n\t\t\t\t\t\t\t\tfill=\"url(#paint0_linear_7135_21737)\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M44 44.2406C54.9352 44.2406 63.7999 35.3759 63.7999 24.4406C63.7999 13.5054 54.9352 4.64062 44 4.64062C33.0647 4.64062 24.2 13.5054 24.2 24.4406C24.2 35.3759 33.0647 44.2406 44 44.2406Z\"\n\t\t\t\t\t\t\t\tfill=\"url(#paint1_linear_7135_21737)\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<defs>\n\t\t\t\t\t\t\t\t<linearGradient\n\t\t\t\t\t\t\t\t\tid=\"paint0_linear_7135_21737\"\n\t\t\t\t\t\t\t\t\tx1=\"36.5001\"\n\t\t\t\t\t\t\t\t\ty1=\"43\"\n\t\t\t\t\t\t\t\t\tx2=\"44.0001\"\n\t\t\t\t\t\t\t\t\ty2=\"97.5\"\n\t\t\t\t\t\t\t\t\tgradientUnits=\"userSpaceOnUse\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<stop stopColor=\"white\" />\n\t\t\t\t\t\t\t\t\t<stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n\t\t\t\t\t\t\t\t</linearGradient>\n\t\t\t\t\t\t\t\t<linearGradient\n\t\t\t\t\t\t\t\t\tid=\"paint1_linear_7135_21737\"\n\t\t\t\t\t\t\t\t\tx1=\"44\"\n\t\t\t\t\t\t\t\t\ty1=\"4.64062\"\n\t\t\t\t\t\t\t\t\tx2=\"44\"\n\t\t\t\t\t\t\t\t\ty2=\"44.2406\"\n\t\t\t\t\t\t\t\t\tgradientUnits=\"userSpaceOnUse\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<stop stopColor=\"white\" />\n\t\t\t\t\t\t\t\t\t<stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n\t\t\t\t\t\t\t\t</linearGradient>\n\t\t\t\t\t\t\t</defs>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<div className={styles.haircheckSidebar}>\n\t\t\t\t<div className={styles.haircheckSidebarContent}>\n\t\t\t\t\t{isPermissionsDenied ? (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tonClick={onCancelHairCheck}\n\t\t\t\t\t\t\tclassName={`${styles.buttonCancel} ${styles.buttonJoinMobile}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<JoinBtn\n\t\t\t\t\t\t\tloading={isJoinBtnLoading}\n\t\t\t\t\t\t\tdisabled={!isPermissionsGranted}\n\t\t\t\t\t\t\tclassName={styles.buttonJoinMobile}\n\t\t\t\t\t\t\tonClick={onJoin}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<div />\n\t\t\t\t\t<div className={styles.haircheckContent}>\n\t\t\t\t\t\t<div className={styles.haircheckDescription}>{getDescription()}</div>\n\t\t\t\t\t\t{isPermissionsDenied ? (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={onCancelHairCheck}\n\t\t\t\t\t\t\t\tclassName={`${styles.buttonCancel} ${styles.buttonJoinDesktop}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<JoinBtn\n\t\t\t\t\t\t\t\tloading={isJoinBtnLoading}\n\t\t\t\t\t\t\t\tdisabled={!isPermissionsGranted}\n\t\t\t\t\t\t\t\tclassName={styles.buttonJoinDesktop}\n\t\t\t\t\t\t\t\tonClick={onJoin}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className={styles.haircheckControls}>\n\t\t\t\t\t\t<MicrophoneButton />\n\t\t\t\t\t\t<CameraButton />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nHairCheck.displayName = 'HairCheck';\n";
-var styles$9 = "/* Button Component */\n/* Start of Selection */\n.buttonCancel {\n\tpadding: 1rem;\n\tborder: 1px solid rgba(255, 255, 255, 0.1);\n\tbackground-color: rgba(239, 68, 68, 0.8);\n\tborder-radius: 9999px;\n\tcolor: white;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: all 0.2s;\n\toutline: none;\n}\n\n.buttonCancel:hover {\n\tbackground-color: rgba(239, 68, 68, 1);\n}\n/* End of Selection */\n\n/* ButtonJoin Component */\n.buttonJoin {\n\tpadding: 5px;\n\tborder: 1px solid rgba(255, 255, 255, 0.1);\n\tbackground-color: rgba(255, 255, 255, 0.1);\n\tborder-radius: 9999px;\n\tcolor: white;\n\theight: 3.625rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: 500;\n\tcursor: pointer;\n}\n\n.buttonJoinInner {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground-color: #32c75c;\n\tborder-radius: 9999px;\n\tpadding: 1rem;\n\tbox-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n\theight: 3rem;\n\ttransition: background-color 0.2s;\n\tfont-weight: 500;\n\tmin-width: 8.5rem;\n}\n\n.buttonJoin:hover .buttonJoinInner {\n\tbackground-color: rgba(62, 192, 97, 0.9);\n}\n\n.buttonJoin:disabled .buttonJoinInner {\n\tbackground-color: rgba(34, 197, 94, 0.5);\n\tcursor: not-allowed;\n}\n\n.buttonJoinDesktop {\n\tdisplay: none;\n}\n\n@media (min-width: 768px) {\n\t.buttonJoinDesktop {\n\t\tdisplay: flex;\n\t}\n}\n\n.buttonJoinMobile {\n\tposition: absolute;\n\ttop: -5.125rem;\n\tleft: 50%;\n\ttransform: translateX(-50%);\n\tz-index: 20;\n}\n\n@media (min-width: 768px) {\n\t.buttonJoinMobile {\n\t\tdisplay: none;\n\t}\n}\n\n/* HaircheckScreen Component */\n.haircheckBlock {\n\tposition: relative;\n\twidth: 100%;\n\ttext-align: center;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\taspect-ratio: 9/16;\n\toverflow: hidden;\n\tborder-radius: 0.5rem;\n\tmax-height: 90vh;\n}\n\n@media (min-width: 768px) {\n\t.haircheckBlock {\n\t\taspect-ratio: 16/9;\n\t}\n}\n\n.dailyVideo {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover !important;\n\tposition: absolute;\n\tinset: 0;\n\ttransition: opacity 0.3s ease-in-out;\n}\n\n.haircheckUserPlaceholder {\n\tposition: absolute;\n\tinset: 0;\n\tbackground-color: #334155;\n\tz-index: 5;\n\tpointer-events: none;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.haircheckUserIcon {\n\twidth: 12.5rem;\n\theight: 12.5rem;\n\tborder-radius: 9999px;\n\tbackground-color: rgba(255, 255, 255, 0.1);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.haircheckSidebar {\n\tposition: absolute;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\twidth: 100%;\n\tbackground-color: rgba(2, 6, 23, 0.45);\n\tbackdrop-filter: blur(20px);\n\tborder-left: 1px solid rgba(255, 255, 255, 0.2);\n\tz-index: 5;\n}\n\n@media (min-width: 768px) {\n\t.haircheckSidebar {\n\t\tleft: auto;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: 17.5rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.haircheckSidebar {\n\t\twidth: 23rem;\n\t}\n}\n\n.haircheckSidebarContent {\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 1.5rem 1.25rem;\n\tgap: 1.5rem;\n\twidth: 100%;\n\theight: 100%;\n}\n\n@media (min-width: 768px) {\n\t.haircheckSidebarContent {\n\t\tpadding: 1rem 1.25rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.haircheckSidebarContent {\n\t\tpadding: 2rem 1.25rem;\n\t}\n}\n\n.haircheckContent {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 2rem;\n}\n\n.haircheckDescription {\n\tcolor: #ffffff;\n\tfont-size: 1.125rem;\n\tfont-weight: 500;\n}\n\n@media (min-width: 768px) {\n\t.haircheckDescription {\n\t\tfont-size: 1.25rem;\n\t}\n}\n\n.haircheckControls {\n\tdisplay: flex;\n\talign-items: flex-end;\n\tjustify-content: space-between;\n\tgap: 1rem;\n}\n";
+var content$9 = "import React, { memo } from 'react';\nimport { useLocalCamera } from '../../hooks/use-local-camera';\nimport { useLocalMicrophone } from '../../hooks/use-local-microphone';\nimport { useLocalScreenshare } from '../../hooks/use-local-screenshare';\n\nimport styles from './media-controls.module.css';\n\nexport const MicToggleButton = memo(() => {\n\tconst { onToggleMicrophone, isMicReady, isMicMuted } = useLocalMicrophone();\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tonClick={onToggleMicrophone}\n\t\t\tdisabled={!isMicReady}\n\t\t\tclassName={styles.deviceButton}\n\t\t>\n\t\t\t<span className={styles.deviceButtonIcon}>\n\t\t\t\t{isMicMuted || !isMicReady ? (\n\t\t\t\t\t<svg\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\taria-label=\"Microphone Muted\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 18.1339 14.0992 18.1339 14.0992M12 18V21\"\n\t\t\t\t\t\t\tstroke=\"#020617\"\n\t\t\t\t\t\t\tstrokeWidth=\"1.66667\"\n\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\tx=\"1.30225\"\n\t\t\t\t\t\t\ty=\"3\"\n\t\t\t\t\t\t\twidth=\"26\"\n\t\t\t\t\t\t\theight=\"2.24738\"\n\t\t\t\t\t\t\trx=\"1.12369\"\n\t\t\t\t\t\t\ttransform=\"rotate(30 1.30225 3)\"\n\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\td=\"M9 9.39031V11C9 11.7956 9.31607 12.5587 9.87868 13.1213C10.4413 13.6839 11.2044 14 12 14C12.7956 14 13.5587 13.6839 14.1213 13.1213C14.2829 12.9597 14.4242 12.7816 14.5435 12.5908L9 9.39031ZM15 7.71466V6C15 5.20435 14.6839 4.44129 14.1213 3.87868C13.5587 3.31607 12.7956 3 12 3C11.2044 3 10.4413 3.31607 9.87868 3.87868C9.69528 4.06208 9.53807 4.26678 9.40948 4.48697L15 7.71466Z\"\n\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M9 9.39031L9.41667 8.66862C9.15883 8.51976 8.84117 8.51976 8.58333 8.66862C8.3255 8.81748 8.16667 9.09259 8.16667 9.39031H9ZM9.87868 13.1213L9.28942 13.7106H9.28942L9.87868 13.1213ZM14.1213 13.1213L14.7106 13.7106L14.7106 13.7106L14.1213 13.1213ZM14.5435 12.5908L15.25 13.0327C15.3699 12.841 15.4068 12.6088 15.3521 12.3894C15.2974 12.17 15.156 11.9822 14.9601 11.8692L14.5435 12.5908ZM15 7.71466L14.5833 8.43635C14.8412 8.58521 15.1588 8.58521 15.4167 8.43635C15.6745 8.28749 15.8333 8.01238 15.8333 7.71466H15ZM14.1213 3.87868L14.7106 3.28942L14.7106 3.28942L14.1213 3.87868ZM9.87868 3.87868L9.28942 3.28942L9.28942 3.28942L9.87868 3.87868ZM9.40948 4.48697L8.68988 4.06671C8.57806 4.25818 8.54715 4.48633 8.604 4.70065C8.66086 4.91497 8.80078 5.09779 8.99281 5.20866L9.40948 4.48697ZM9.83333 11V9.39031H8.16667V11H9.83333ZM10.4679 12.5321C10.0616 12.1257 9.83333 11.5746 9.83333 11H8.16667C8.16667 12.0167 8.57053 12.9917 9.28942 13.7106L10.4679 12.5321ZM12 13.1667C11.4254 13.1667 10.8743 12.9384 10.4679 12.5321L9.28942 13.7106C10.0083 14.4295 10.9833 14.8333 12 14.8333V13.1667ZM13.5321 12.5321C13.1257 12.9384 12.5746 13.1667 12 13.1667V14.8333C13.0167 14.8333 13.9917 14.4295 14.7106 13.7106L13.5321 12.5321ZM13.837 12.149C13.7508 12.2867 13.6488 12.4153 13.5321 12.5321L14.7106 13.7106C14.917 13.5041 15.0976 13.2764 15.25 13.0327L13.837 12.149ZM14.9601 11.8692L9.41667 8.66862L8.58333 10.112L14.1268 13.3125L14.9601 11.8692ZM14.1667 6V7.71466H15.8333V6H14.1667ZM13.5321 4.46794C13.9384 4.87426 14.1667 5.42536 14.1667 6H15.8333C15.8333 4.98334 15.4295 4.00831 14.7106 3.28942L13.5321 4.46794ZM12 3.83333C12.5746 3.83333 13.1257 4.06161 13.5321 4.46794L14.7106 3.28942C13.9917 2.57053 13.0167 2.16667 12 2.16667V3.83333ZM10.4679 4.46794C10.8743 4.06161 11.4254 3.83333 12 3.83333V2.16667C10.9833 2.16667 10.0083 2.57053 9.28942 3.28942L10.4679 4.46794ZM10.1291 4.90724C10.2219 4.74824 10.3354 4.60042 10.4679 4.46794L9.28942 3.28942C9.05511 3.52374 8.85421 3.78533 8.68988 4.06671L10.1291 4.90724ZM8.99281 5.20866L14.5833 8.43635L15.4167 6.99298L9.82615 3.76529L8.99281 5.20866Z\"\n\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</svg>\n\t\t\t\t) : (\n\t\t\t\t\t<svg\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\taria-label=\"Microphone\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M9 6C9 5.20435 9.31607 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3C12.7956 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6V11C15 11.7956 14.6839 12.5587 14.1213 13.1213C13.5587 13.6839 12.7956 14 12 14C11.2044 14 10.4413 13.6839 9.87868 13.1213C9.31607 12.5587 9 11.7956 9 11V6Z\"\n\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\tstroke=\"#020617\"\n\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 19 12.8565 19 11V10M12 18V21\"\n\t\t\t\t\t\t\tstroke=\"#020617\"\n\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</svg>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t\t<span className={styles.srOnly}>Microphone</span>\n\t\t</button>\n\t);\n});\n\nMicToggleButton.displayName = 'MicToggleButton';\n\nexport const CameraToggleButton = memo(() => {\n\tconst { onToggleCamera, isCamReady, isCamMuted } = useLocalCamera();\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tonClick={onToggleCamera}\n\t\t\tdisabled={!isCamReady}\n\t\t\tclassName={styles.deviceButton}\n\t\t>\n\t\t\t<span className={styles.deviceButtonIcon}>\n\t\t\t\t{isCamMuted ? (\n\t\t\t\t\t<svg\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\taria-label=\"Camera Muted\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<g clipPath=\"url(#clip0_7082_14220)\">\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\td=\"M3.19874 5.60093C3.08628 5.68537 2.97928 5.77808 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V15.048C17.7787 14.8204 17.5304 14.6189 17.2595 14.4485L3.19874 5.60093ZM22 12.655V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H8.7412L22 12.655Z\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\tx=\"0.777222\"\n\t\t\t\t\t\t\t\ty=\"2.64844\"\n\t\t\t\t\t\t\t\twidth=\"26.7988\"\n\t\t\t\t\t\t\t\theight=\"2.24738\"\n\t\t\t\t\t\t\t\trx=\"1.12369\"\n\t\t\t\t\t\t\t\ttransform=\"rotate(30 0.777222 2.64844)\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</g>\n\t\t\t\t\t\t<defs>\n\t\t\t\t\t\t\t<clipPath id=\"clip0_7082_14220\">\n\t\t\t\t\t\t\t\t<rect width=\"24\" height=\"24\" fill=\"white\" />\n\t\t\t\t\t\t\t</clipPath>\n\t\t\t\t\t\t</defs>\n\t\t\t\t\t</svg>\n\t\t\t\t) : (\n\t\t\t\t\t<svg\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\taria-label=\"Camera\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\td=\"M5 5C4.20435 5 3.44129 5.31607 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V14.414L20.293 16.707C20.4329 16.8468 20.611 16.942 20.805 16.9806C20.9989 17.0192 21.2 16.9993 21.3827 16.9237C21.5654 16.848 21.7215 16.7199 21.8314 16.5555C21.9413 16.391 22 16.1978 22 16V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H5Z\"\n\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</svg>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t\t<span className={styles.srOnly}>Camera</span>\n\t\t</button>\n\t);\n});\n\nCameraToggleButton.displayName = 'CameraToggleButton';\n\nexport const ScreenShareButton = memo(() => {\n\tconst { onToggleScreenshare, isScreenSharing } = useLocalScreenshare();\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tonClick={onToggleScreenshare}\n\t\t\tclassName={`${styles.deviceButtonContainer} ${styles.screenShareButton}`}\n\t\t>\n\t\t\t<span>\n\t\t\t\t{isScreenSharing ? (\n\t\t\t\t\t<svg\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\taria-label=\"Screen Share\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M21.0008 19C21.2557 19.0003 21.5009 19.0979 21.6862 19.2728C21.8715 19.4478 21.9831 19.687 21.998 19.9414C22.013 20.1958 21.9302 20.4464 21.7666 20.6418C21.603 20.8373 21.3709 20.9629 21.1178 20.993L21.0008 21H3.00085C2.74597 20.9997 2.50081 20.9021 2.31548 20.7272C2.13014 20.5522 2.01861 20.313 2.00367 20.0586C1.98874 19.8042 2.07152 19.5536 2.23511 19.3582C2.3987 19.1627 2.63075 19.0371 2.88385 19.007L3.00085 19H21.0008ZM19.0008 4C19.5054 3.99984 19.9914 4.19041 20.3614 4.5335C20.7314 4.87659 20.958 5.34684 20.9958 5.85L21.0008 6V16C21.001 16.5046 20.8104 16.9906 20.4673 17.3605C20.1243 17.7305 19.654 17.9572 19.1508 17.995L19.0008 18H5.00085C4.49627 18.0002 4.01028 17.8096 3.6403 17.4665C3.27032 17.1234 3.04369 16.6532 3.00585 16.15L3.00085 16V6C3.00069 5.49542 3.19125 5.00943 3.53434 4.63945C3.87743 4.26947 4.34769 4.04284 4.85085 4.005L5.00085 4H19.0008Z\"\n\t\t\t\t\t\t\tfill=\"#2D65FF\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</svg>\n\t\t\t\t) : (\n\t\t\t\t\t<svg\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\taria-label=\"Screen Share\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M20.9999 19C21.2547 19.0003 21.4999 19.0979 21.6852 19.2728C21.8706 19.4478 21.9821 19.687 21.997 19.9414C22.012 20.1958 21.9292 20.4464 21.7656 20.6418C21.602 20.8373 21.37 20.9629 21.1169 20.993L20.9999 21H2.99987C2.74499 20.9997 2.49984 20.9021 2.3145 20.7272C2.12916 20.5522 2.01763 20.313 2.0027 20.0586C1.98776 19.8042 2.07054 19.5536 2.23413 19.3582C2.39772 19.1627 2.62977 19.0371 2.88287 19.007L2.99987 19H20.9999ZM18.9999 4C19.5044 3.99984 19.9904 4.19041 20.3604 4.5335C20.7304 4.87659 20.957 5.34684 20.9949 5.85L20.9999 6V16C21 16.5046 20.8095 16.9906 20.4664 17.3605C20.1233 17.7305 19.653 17.9572 19.1499 17.995L18.9999 18H4.99987C4.49529 18.0002 4.0093 17.8096 3.63932 17.4665C3.26934 17.1234 3.04271 16.6532 3.00487 16.15L2.99987 16V6C2.99971 5.49542 3.19028 5.00943 3.53337 4.63945C3.87646 4.26947 4.34671 4.04284 4.84987 4.005L4.99987 4H18.9999Z\"\n\t\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</svg>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t</button>\n\t);\n});\n\nScreenShareButton.displayName = 'ScreenShareButton';\n";
+var styles$9 = "/* Device button styles */\n.deviceButton {\n  position: relative;\n  z-index: 10;\n  height: 3rem;\n  width: 3rem;\n  border-radius: 9999px;\n  background-color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid transparent;\n  cursor: pointer;\n}\n\n.deviceButtonIcon {\n  display: flex;\n}\n\n.deviceButton:disabled {\n  opacity: 0.5;\n}\n\n/* Screen reader only text */\n.srOnly {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n.screenShareButton {\n\tcursor: pointer;\n\tposition: relative;\n\theight: 3rem;\n\twidth: 3rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 9999px;\n\tbackdrop-filter: blur(4px);\n\tbackground-color: rgba(255, 255, 255, 0.2);\n\tborder: 1px solid rgba(255, 255, 255, 0.2);\n}";
 var componentsDependencies = [
-	"controls",
-	"use-start-haircheck",
-	"use-local-camera"
+	"use-local-camera",
+	"use-local-microphone",
+	"use-local-screenshare"
 ];
-var hairCheck01 = {
+var mediaControls = {
 	type: type$9,
 	content: content$9,
 	styles: styles$9,
@@ -232746,7 +232783,7 @@ var hairCheck01 = {
 };
 
 var type$8 = "hooks";
-var content$8 = "import { useCallback } from 'react';\nimport { useAppMessage, useDailyEvent } from '@daily-co/daily-react';\n\nexport function useObservableEvent(callback) {\n\treturn useDailyEvent(\n\t\t'app-message',\n\t\tuseCallback(\n\t\t\t(event) => {\n\t\t\t\tcallback(event.data);\n\t\t\t},\n\t\t\t[callback]\n\t\t)\n\t);\n}\n\nexport function useSendAppMessage() {\n\tconst sendAppMessage = useAppMessage();\n\n\treturn useCallback(\n\t\t(message) => {\n\t\t\tsendAppMessage({ msg: message }, '*');\n\t\t},\n\t\t[sendAppMessage]\n\t);\n}\n";
+var content$8 = "import { useCallback } from 'react';\nimport { useAppMessage, useDailyEvent } from '@daily-co/daily-react';\n\nexport function useObservableEvent(callback) {\n\treturn useDailyEvent(\n\t\t'app-message',\n\t\tuseCallback(\n\t\t\t(event) => {\n\t\t\t\tcallback(event.data);\n\t\t\t},\n\t\t\t[callback]\n\t\t)\n\t);\n}\n\nexport function useSendAppMessage() {\n\tconst sendAppMessage = useAppMessage();\n\n\treturn useCallback(\n\t\t(message) => {\n\t\t\tsendAppMessage(message, '*');\n\t\t},\n\t\t[sendAppMessage]\n\t);\n}\n";
 var styles$8 = "";
 var cviEventsHooks = {
 	type: type$8,
@@ -232755,7 +232792,7 @@ var cviEventsHooks = {
 };
 
 var type$7 = "hooks";
-var content$7 = "import { useCallback } from 'react';\nimport { useDaily } from '@daily-co/daily-react';\n\nexport const useCVICall = () => {\n\tconst daily = useDaily();\n\n\tconst joinCall = useCallback(\n\t\t({ url }) => {\n\t\t\tdaily?.join({\n\t\t\t\turl: url,\n\t\t\t});\n\t\t},\n\t\t[daily]\n\t);\n\n\tconst leaveCall = useCallback(() => {\n\t\tdaily?.leave();\n\t}, [daily]);\n\n\treturn { joinCall, leaveCall };\n};\n";
+var content$7 = "import { useCallback } from 'react';\nimport { useDaily } from '@daily-co/daily-react';\n\nexport const useCVICall = () => {\n\tconst daily = useDaily();\n\n\tconst joinCall = useCallback(\n\t\t({ url }) => {\n\t\t\tdaily?.join({\n\t\t\t\turl: url,\n\t\t\t\tinputSettings: {\n\t\t\t\t\taudio: {\n\t\t\t\t\t\tprocessor: {\n\t\t\t\t\t\t\ttype: 'noise-cancellation',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t});\n\t\t},\n\t\t[daily]\n\t);\n\n\tconst leaveCall = useCallback(() => {\n\t\tdaily?.leave();\n\t}, [daily]);\n\n\treturn { joinCall, leaveCall };\n};\n";
 var styles$7 = "";
 var useCviCall = {
 	type: type$7,
@@ -232829,11 +232866,12 @@ var useStartHaircheck = {
 var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
     "audio-wave": audioWave,
-    controls: controls,
     "conversation-01": conversation01,
     "cvi-events-hooks": cviEventsHooks,
     "cvi-provider": cviProvider,
+    "device-select": deviceSelect,
     "hair-check-01": hairCheck01,
+    "media-controls": mediaControls,
     "use-cvi-call": useCviCall,
     "use-local-camera": useLocalCamera,
     "use-local-microphone": useLocalMicrophone,
@@ -232852,10 +232890,11 @@ var templates = /*#__PURE__*/Object.freeze({
 
 const components = [
     { name: 'audio-wave', path: 'components/audio-wave' },
-    { name: 'controls', path: 'components/controls' },
     { name: 'conversation-01', path: 'components/conversation-01' },
     { name: 'cvi-provider', path: 'components/cvi-provider' },
+    { name: 'device-select', path: 'components/device-select' },
     { name: 'hair-check-01', path: 'components/hair-check-01' },
+    { name: 'media-controls', path: 'components/media-controls' },
     { name: 'cvi-events-hooks', path: 'hooks/cvi-events-hooks' },
     { name: 'use-cvi-call', path: 'hooks/use-cvi-call' },
     { name: 'use-local-camera', path: 'hooks/use-local-camera' },
@@ -237519,7 +237558,7 @@ const info = new Command()
     console.log(await getConfig(opts.cwd));
 });
 
-var version = "0.0.1-beta.2";
+var version = "0.0.1-beta.3";
 var packageJson = {
 	version: version};