vesant-sdk 1.7.1-dev.2a5fd70 → 1.7.1-dev.2f18a76

package/dist/react.mjs

@@ -924,19 +924,19 @@ var Close = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0id
 var FACE_MESSAGES = {
   idle: "Initializing camera...",
   loading: "Loading face detection...",
-  scanning: "Position your face in the circle",
+  scanning: "Position your face in the oval",
   too_far: "Face too far. Please move closer to the camera",
   too_close: "Too close. Please move back a little",
-  off_center: "Center your face in the circle",
+  off_center: "Center your face in the oval",
   ok: "Looking great! Tap the button to capture"
 };
 var FACE_COLORS = {
   idle: "#9ca3af",
-  loading: "#3b82f6",
-  scanning: "#3b82f6",
+  loading: "#ef4444",
+  scanning: "#ef4444",
   too_far: "#ef4444",
-  too_close: "#f59e0b",
-  off_center: "#f59e0b",
+  too_close: "#ef4444",
+  off_center: "#ef4444",
   ok: "#10b981"
 };
 var MEDIAPIPE_BASE = "https://cdn.jsdelivr.net/npm/@mediapipe/face_detection";
@@ -1005,7 +1005,7 @@ function loadMediaPipeFaceDetection(assetBasePath) {
 var MOBILE_UA = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
 var SESSION_EXPIRY_MS = 15 * 60 * 1e3;
 var LIVENESS_MESSAGES = [
-  "Position your face inside the circle",
+  "Position your face inside the oval",
   "Make sure your face is well lit",
   "Remove glasses or hats if possible",
   "Look straight at the camera, then tap Capture"
@@ -1652,9 +1652,10 @@ function LiveCamera({ onCapture, onCancel, message, assetBasePath }) {
   if (error) {
     return /* @__PURE__ */ React.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center", padding: 0 } }, /* @__PURE__ */ React.createElement("div", { style: errorCircleStyle }, "!"), /* @__PURE__ */ React.createElement("h3", { style: titleStyle }, "Camera unavailable"), /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, error), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement("button", { style: secondaryButtonStyle, onClick: onCancel }, "Back")));
   }
-  const detectionActive = ready && !faceDetectionFailed;
-  const liveMessage = detectionActive ? FACE_MESSAGES[faceStatus] : message;
-  const liveFaceColor = detectionActive ? FACE_COLORS[faceStatus] : void 0;
+  const detectionAvailable = !faceDetectionFailed;
+  const detectionActive = ready && detectionAvailable;
+  const liveMessage = detectionAvailable ? FACE_MESSAGES[faceStatus] : message;
+  const liveFaceColor = detectionAvailable ? FACE_COLORS[faceStatus] : void 0;
   const captureDisabled = isCaptureDisabled(ready, detectionActive, faceStatus);
   const ringPulse = detectionActive && (faceStatus === "too_far" || faceStatus === "too_close") ? "pulse 1.5s ease-in-out infinite" : void 0;
   const dynamicCircleStyle = {
@@ -1770,20 +1771,22 @@ var faceOverlayContainerStyle = {
 };
 var faceRingWrapStyle = {
   position: "relative",
-  width: "72%",
-  aspectRatio: "1 / 1"
+  height: "64%",
+  aspectRatio: "3 / 4"
 };
 var faceDashedRingStyle = {
   position: "absolute",
   inset: -6,
-  borderRadius: "50%",
-  border: "6px dashed rgba(255, 255, 255, 0.4)",
-  animation: "spin 10s linear infinite"
+  borderRadius: 9999,
+  border: "6px dashed rgba(255, 255, 255, 0.4)"
 };
 var faceCircleStyle = {
   position: "absolute",
   inset: 0,
-  borderRadius: "50%",
+  // Tailwind's `rounded-full` resolves to a very large fixed radius. On a
+  // 3:4 box that creates the normal KYC capsule/head guide with straighter
+  // sides; 50% would instead produce a mathematically perfect ellipse.
+  borderRadius: 9999,
   border: "4px solid #00bc7d",
   boxShadow: "0 0 0 1000px rgba(0, 0, 0, 0.5)"
 };