@dora-cell/sdk-react 0.1.1-beta.9 → 1.0.1

package/dist/index.mjs

@@ -2,7 +2,7 @@ import { forwardRef, createElement, createContext, useState, useRef, useEffect,
 import { DoraCell } from '@dora-cell/sdk';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/shared/src/utils.js
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/shared/src/utils.js
 var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 var toCamelCase = (string) => string.replace(
   /^([A-Z])|[\s-_]+(\w)/g,
@@ -23,7 +23,7 @@ var hasA11yProp = (props) => {
   }
 };
 
-// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/defaultAttributes.js
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/defaultAttributes.js
 var defaultAttributes = {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
@@ -36,7 +36,7 @@ var defaultAttributes = {
   strokeLinejoin: "round"
 };
 
-// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/Icon.js
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/Icon.js
 var Icon = forwardRef(
   ({
     color = "currentColor",
@@ -67,7 +67,7 @@ var Icon = forwardRef(
   )
 );
 
-// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/createLucideIcon.js
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/createLucideIcon.js
 var createLucideIcon = (iconName, iconNode) => {
   const Component = forwardRef(
     ({ className, ...props }, ref) => createElement(Icon, {
@@ -85,22 +85,26 @@ var createLucideIcon = (iconName, iconNode) => {
   return Component;
 };
 
-// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/arrow-down-left.js
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/arrow-down-left.js
 var __iconNode = [
   ["path", { d: "M17 7 7 17", key: "15tmo1" }],
   ["path", { d: "M17 17H7V7", key: "1org7z" }]
 ];
 var ArrowDownLeft = createLucideIcon("arrow-down-left", __iconNode);
 
-// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/arrow-up-right.js
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/arrow-up-right.js
 var __iconNode2 = [
   ["path", { d: "M7 7h10v10", key: "1tivn9" }],
   ["path", { d: "M7 17 17 7", key: "1vkiza" }]
 ];
 var ArrowUpRight = createLucideIcon("arrow-up-right", __iconNode2);
 
-// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/delete.js
-var __iconNode3 = [
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-down.js
+var __iconNode3 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+var ChevronDown = createLucideIcon("chevron-down", __iconNode3);
+
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/delete.js
+var __iconNode4 = [
   [
     "path",
     {
@@ -111,19 +115,19 @@ var __iconNode3 = [
   ["path", { d: "m12 9 6 6", key: "anjzzh" }],
   ["path", { d: "m18 9-6 6", key: "1fp51s" }]
 ];
-var Delete = createLucideIcon("delete", __iconNode3);
+var Delete = createLucideIcon("delete", __iconNode4);
 
-// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/maximize.js
-var __iconNode4 = [
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/maximize.js
+var __iconNode5 = [
   ["path", { d: "M8 3H5a2 2 0 0 0-2 2v3", key: "1dcmit" }],
   ["path", { d: "M21 8V5a2 2 0 0 0-2-2h-3", key: "1e4gt3" }],
   ["path", { d: "M3 16v3a2 2 0 0 0 2 2h3", key: "wsl5sc" }],
   ["path", { d: "M16 21h3a2 2 0 0 0 2-2v-3", key: "18trek" }]
 ];
-var Maximize = createLucideIcon("maximize", __iconNode4);
+var Maximize = createLucideIcon("maximize", __iconNode5);
 
-// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/mic-off.js
-var __iconNode5 = [
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/mic-off.js
+var __iconNode6 = [
   ["path", { d: "M12 19v3", key: "npa21l" }],
   ["path", { d: "M15 9.34V5a3 3 0 0 0-5.68-1.33", key: "1gzdoj" }],
   ["path", { d: "M16.95 16.95A7 7 0 0 1 5 12v-2", key: "cqa7eg" }],
@@ -131,27 +135,27 @@ var __iconNode5 = [
   ["path", { d: "m2 2 20 20", key: "1ooewy" }],
   ["path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12", key: "r2i35w" }]
 ];
-var MicOff = createLucideIcon("mic-off", __iconNode5);
+var MicOff = createLucideIcon("mic-off", __iconNode6);
 
-// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/mic.js
-var __iconNode6 = [
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/mic.js
+var __iconNode7 = [
   ["path", { d: "M12 19v3", key: "npa21l" }],
   ["path", { d: "M19 10v2a7 7 0 0 1-14 0v-2", key: "1vc78b" }],
   ["rect", { x: "9", y: "2", width: "6", height: "13", rx: "3", key: "s6n7sd" }]
 ];
-var Mic = createLucideIcon("mic", __iconNode6);
+var Mic = createLucideIcon("mic", __iconNode7);
 
-// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/minimize-2.js
-var __iconNode7 = [
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/minimize-2.js
+var __iconNode8 = [
   ["path", { d: "m14 10 7-7", key: "oa77jy" }],
   ["path", { d: "M20 10h-6V4", key: "mjg0md" }],
   ["path", { d: "m3 21 7-7", key: "tjx5ai" }],
   ["path", { d: "M4 14h6v6", key: "rmj7iw" }]
 ];
-var Minimize2 = createLucideIcon("minimize-2", __iconNode7);
+var Minimize2 = createLucideIcon("minimize-2", __iconNode8);
 
-// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/phone.js
-var __iconNode8 = [
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/phone.js
+var __iconNode9 = [
   [
     "path",
     {
@@ -160,21 +164,21 @@ var __iconNode8 = [
     }
   ]
 ];
-var Phone = createLucideIcon("phone", __iconNode8);
+var Phone = createLucideIcon("phone", __iconNode9);
 
-// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/user.js
-var __iconNode9 = [
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/user.js
+var __iconNode10 = [
   ["path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2", key: "975kel" }],
   ["circle", { cx: "12", cy: "7", r: "4", key: "17ys0d" }]
 ];
-var User = createLucideIcon("user", __iconNode9);
+var User = createLucideIcon("user", __iconNode10);
 
-// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.4/node_modules/lucide-react/dist/esm/icons/x.js
-var __iconNode10 = [
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.js
+var __iconNode11 = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ];
-var X = createLucideIcon("x", __iconNode10);
+var X = createLucideIcon("x", __iconNode11);
 function CallInterface({
   isOpen = false,
   onOpenChange,
@@ -189,10 +193,10 @@ function CallInterface({
     isMuted,
     hangup,
     answerCall,
-    toggleMute
+    toggleMute,
+    callError
   } = useCall();
   const [isMinimized, setIsMinimized] = useState(false);
-  const [localMuted, setLocalMuted] = useState(false);
   const [wasConnected, setWasConnected] = useState(false);
   const [closeCountdown, setCloseCountdown] = useState(null);
   const [connectingCountdown, setConnectingCountdown] = useState(null);
@@ -202,15 +206,18 @@ function CallInterface({
   const remoteNumber = currentCall?.remoteNumber || "Unknown";
   const displayName = remoteNumber;
   useEffect(() => {
-    if (!audioRef.current) return;
-  }, [currentCall]);
+    if (currentCall && audioRef.current) {
+      const stream = currentCall.getRemoteStream();
+      if (stream && audioRef.current.srcObject !== stream) {
+        audioRef.current.srcObject = stream;
+      }
+    }
+  }, [currentCall, callStatus]);
   useEffect(() => {
     if (callStatus === "ringing" && isIncoming) {
       onOpenChange?.(true);
-      if (ringtoneRef.current) {
-        ringtoneRef.current.play().catch(() => {
-        });
-      }
+      ringtoneRef.current?.play().catch(() => {
+      });
     } else {
       if (ringtoneRef.current) {
         ringtoneRef.current.pause();
@@ -219,6 +226,9 @@ function CallInterface({
     }
   }, [callStatus, isIncoming, onOpenChange]);
   useEffect(() => {
+    if (callStatus === "connecting" || callStatus === "ringing") {
+      setWasConnected(false);
+    }
     if (callStatus === "ongoing") {
       setWasConnected(true);
     }
@@ -226,33 +236,31 @@ function CallInterface({
   useEffect(() => {
     if (isOpen && callStatus === "ended") {
       onCallEnded?.();
-      const closeDelay = wasConnected ? 1e3 : 5e3;
-      const countdownStart = Date.now();
-      const countdownInterval = setInterval(() => {
-        const elapsed = Date.now() - countdownStart;
-        const remaining = Math.max(0, closeDelay - elapsed);
-        const seconds = Math.ceil(remaining / 1e3);
-        setCloseCountdown(seconds);
+      const closeDelay = wasConnected ? 1500 : 3e3;
+      const start = Date.now();
+      const iv = setInterval(() => {
+        const remaining = Math.max(0, closeDelay - (Date.now() - start));
+        setCloseCountdown(Math.ceil(remaining / 1e3));
         if (remaining <= 0) {
-          clearInterval(countdownInterval);
+          clearInterval(iv);
           onOpenChange?.(false);
+          setIsMinimized(false);
         }
       }, 100);
-      return () => clearInterval(countdownInterval);
+      return () => clearInterval(iv);
     } else {
       setCloseCountdown(null);
     }
   }, [callStatus, isOpen, onOpenChange, wasConnected, onCallEnded]);
   useEffect(() => {
-    let interval;
-    const isConnecting = callStatus === "connecting";
-    if (isOpen && isConnecting && !isIncoming) {
+    let iv;
+    if (isOpen && callStatus === "connecting" && !isIncoming) {
       setConnectingCountdown(60);
-      interval = setInterval(() => {
+      iv = setInterval(() => {
         setConnectingCountdown((prev) => {
           if (prev === null || prev <= 0) {
-            clearInterval(interval);
-            hangup();
+            clearInterval(iv);
+            if (callStatus === "connecting") hangup();
             return 0;
           }
           return prev - 1;
@@ -261,7 +269,7 @@ function CallInterface({
     } else {
       setConnectingCountdown(null);
     }
-    return () => clearInterval(interval);
+    return () => clearInterval(iv);
   }, [callStatus, isOpen, isIncoming, hangup]);
   if (!isOpen && callStatus === "idle") return null;
   return /* @__PURE__ */ jsxs(
@@ -269,9 +277,9 @@ function CallInterface({
     {
       role: "dialog",
       "aria-label": "Call interface",
-      className: `fixed top-14 md:top-16 right-0 md:right-4 z-50 transform transition-all duration-300 ease-in-out bg-[#1E1E1E] shadow-xl  ${isOpen ? "translate-x-0" : "translate-x-[110%]"} ${isMinimized ? "w-48 h-20 rounded-2xl p-4 flex items-center justify-between" : "w-full sm:w-96 md:max-w-sm max-h-[calc(100vh-3.5rem)] md:max-h-[calc(100vh-4rem)] rounded-none md:rounded-2xl"}`,
+      className: `dora-fixed dora-top-14 md:dora-top-16 dora-right-0 md:dora-right-4 dora-z-50 dora-transform dora-transition-all dora-duration-300 dora-ease-in-out dora-bg-[#1E1E1E] dora-shadow-xl ${isOpen ? "dora-translate-x-0" : "dora-translate-x-[110%]"} ${isMinimized ? "dora-w-48 dora-h-20 dora-rounded-2xl dora-p-4 dora-flex dora-items-center dora-justify-between" : "dora-w-full sm:dora-w-96 md:dora-max-w-sm max-h-[calc(100vh-3.5rem)] md:dora-max-h-[calc(100vh-4rem)] dora-rounded-none md:dora-rounded-2xl"}`,
       children: [
-        /* @__PURE__ */ jsx("audio", { ref: audioRef, autoPlay: true, className: "hidden" }),
+        /* @__PURE__ */ jsx("audio", { ref: audioRef, autoPlay: true, className: "dora-hidden" }),
         /* @__PURE__ */ jsx(
           "audio",
           {
@@ -279,75 +287,73 @@ function CallInterface({
             src: "https://assets.mixkit.co/active_storage/sfx/2358/2358-preview.mp3",
             loop: true,
             preload: "auto",
-            className: "hidden"
+            className: "dora-hidden"
           }
         ),
-        isMinimized ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full h-full", children: [
+        isMinimized ? /* @__PURE__ */ jsxs("div", { className: "dora-flex dora-items-center dora-justify-between dora-w-full dora-h-full", children: [
           /* @__PURE__ */ jsx(
             "button",
             {
               onClick: () => setIsMinimized(false),
-              className: "w-10 h-10 rounded-full bg-[#2A2A2A] flex items-center justify-center text-slate-400 hover:text-white transition-colors",
-              "aria-label": "Maximize call interface",
+              className: "dora-w-10 dora-h-10 dora-rounded-full dora-bg-[#2A2A2A] dora-flex dora-items-center dora-justify-center dora-text-slate-400 hover:dora-text-white dora-transition-colors",
+              "aria-label": "Maximize",
               children: maximizeIcon || /* @__PURE__ */ jsx(Maximize, { size: 18 })
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
-            /* @__PURE__ */ jsx("div", { className: "w-11 h-11 rounded-full bg-white flex items-center justify-center -mr-3", children: /* @__PURE__ */ jsx("span", { className: "text-xl text-slate-900 font-bold", children: displayName.charAt(0).toUpperCase() }) }),
+          /* @__PURE__ */ jsxs("div", { className: "dora-relative dora-flex dora-items-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "dora-w-11 dora-h-11 dora-rounded-full dora-bg-white dora-flex dora-items-center dora-justify-center dora--mr-3", children: /* @__PURE__ */ jsx("span", { className: "dora-text-xl dora-text-slate-900 dora-font-bold", children: displayName.charAt(0).toUpperCase() }) }),
             /* @__PURE__ */ jsx(
               "button",
               {
                 onClick: hangup,
-                className: "w-11 h-11 rounded-full bg-red-500 text-white flex items-center justify-center shadow-lg hover:bg-red-600 transition-colors z-10",
+                className: "dora-w-11 dora-h-11 dora-rounded-full dora-bg-red-500 dora-text-white dora-flex dora-items-center dora-justify-center dora-shadow-lg hover:dora-bg-red-600 dora-transition-colors dora-z-10",
                 "aria-label": "End call",
-                children: /* @__PURE__ */ jsx(Phone, { size: 18, className: "transform rotate-135" })
+                children: /* @__PURE__ */ jsx(Phone, { size: 18, className: "dora-transform dora-rotate-[135deg]" })
               }
             )
           ] })
-        ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col py-4 md:py-6 gap-2.5 md:gap-3.5 px-3 md:px-5 relative", children: [
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "dora-flex dora-flex-col dora-py-4 md:dora-py-6 dora-gap-2.5 md:dora-gap-3.5 dora-px-3 md:dora-px-5 dora-relative", children: [
           /* @__PURE__ */ jsx(
             "button",
             {
               onClick: () => setIsMinimized(true),
-              className: "absolute top-2 right-2 text-slate-500 hover:text-white transition-colors",
+              className: "dora-absolute dora-top-2 dora-right-2 dora-text-slate-500 hover:dora-text-white dora-transition-colors",
               "aria-label": "Minimize",
               children: minimizeIcon || /* @__PURE__ */ jsx(Minimize2, { size: 16 })
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-2 items-start md:items-center", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 md:gap-4 min-w-0", children: [
-              /* @__PURE__ */ jsx("div", { className: "w-9 md:w-11 h-9 md:h-11 rounded-full bg-white flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx("span", { className: "text-lg md:text-2xl text-slate-900 font-bold", children: displayName.charAt(0).toUpperCase() }) }),
-              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx("h2", { className: "text-base md:text-xl font-normal text-white truncate", children: isIncoming ? displayName : displayName === "Unknown" ? "Outgoing Call" : displayName }),
-                /* @__PURE__ */ jsxs("p", { className: "text-slate-400 text-xs md:text-sm truncate", children: [
+          /* @__PURE__ */ jsxs("div", { className: "dora-flex dora-justify-between dora-gap-2 dora-items-start md:dora-items-center", children: [
+            /* @__PURE__ */ jsxs("div", { className: "dora-flex dora-items-center dora-gap-2.5 md:dora-gap-4 dora-min-w-0", children: [
+              /* @__PURE__ */ jsx("div", { className: "dora-w-9 md:dora-w-11 dora-h-9 md:dora-h-11 dora-rounded-full dora-bg-white dora-flex dora-items-center dora-justify-center dora-shrink-0", children: /* @__PURE__ */ jsx("span", { className: "dora-text-lg md:dora-text-2xl dora-text-slate-900 dora-font-bold", children: displayName.charAt(0).toUpperCase() }) }),
+              /* @__PURE__ */ jsxs("div", { className: "dora-min-w-0 dora-flex-1", children: [
+                /* @__PURE__ */ jsx("h2", { className: "dora-text-base md:dora-text-xl dora-font-normal dora-text-white dora-truncate", children: isIncoming ? displayName : displayName === "Unknown" ? "Outgoing Call" : displayName }),
+                /* @__PURE__ */ jsxs("p", { className: "dora-text-slate-400 dora-text-xs md:dora-text-sm dora-truncate", children: [
                   remoteNumber,
                   " \u2022",
                   " ",
-                  isMuted ? /* @__PURE__ */ jsx("span", { className: "text-xs text-[#F99578]", children: "Call mute" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  isMuted ? /* @__PURE__ */ jsx("span", { className: "dora-text-[#F99578]", children: "Call muted" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                     (callStatus === "connecting" || callStatus === "ringing") && /* @__PURE__ */ jsx("span", { children: isIncoming ? "Incoming Call..." : callStatus === "connecting" ? "Connecting..." : "Ringing..." }),
-                    callStatus === "ongoing" && /* @__PURE__ */ jsx("span", { children: "On Call" })
+                    callStatus === "ongoing" && /* @__PURE__ */ jsx("span", { children: "On Call" }),
+                    callStatus === "ended" && /* @__PURE__ */ jsx("span", { children: "Call Ended" })
                   ] })
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1.5 md:gap-3 shrink-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "dora-flex dora-items-center dora-justify-center dora-gap-1.5 md:dora-gap-3 dora-shrink-0", children: [
               isIncoming && callStatus === "ringing" && /* @__PURE__ */ jsx(
                 "button",
                 {
                   onClick: answerCall,
-                  className: "rounded-full bg-green-500 text-white hover:bg-green-600 transition-colors w-8 md:w-9 h-8 md:h-9 flex items-center justify-center shrink-0",
-                  "aria-label": "Answer call",
+                  className: "dora-rounded-full dora-bg-green-500 dora-text-white hover:dora-bg-green-600 dora-transition-colors dora-w-8 md:dora-w-9 dora-h-8 md:dora-h-9 dora-flex dora-items-center dora-justify-center dora-shrink-0",
+                  "aria-label": "Answer",
                   children: /* @__PURE__ */ jsx(Phone, { size: 18 })
                 }
               ),
               (callStatus === "ongoing" || isIncoming && callStatus === "ringing") && /* @__PURE__ */ jsx(
                 "button",
                 {
-                  onClick: () => {
-                    toggleMute();
-                    setLocalMuted((s) => !s);
-                  },
-                  className: `rounded-full transition-colors w-8 md:w-9 h-8 md:h-9 flex items-center justify-center shrink-0 bg-slate-700 hover:bg-slate-600 ${isMuted ? "text-white " : " text-slate-400 "}`,
+                  onClick: toggleMute,
+                  className: `dora-rounded-full dora-transition-colors dora-w-8 md:dora-w-9 dora-h-8 md:dora-h-9 dora-flex dora-items-center dora-justify-center dora-shrink-0 ${isMuted ? "dora-bg-slate-700 hover:dora-bg-slate-600 dora-text-white" : "dora-bg-[#2A2A2A] hover:dora-bg-[#333333] dora-text-slate-400"}`,
                   "aria-label": "Toggle mute",
                   children: isMuted ? /* @__PURE__ */ jsx(MicOff, { size: 18 }) : /* @__PURE__ */ jsx(Mic, { size: 18 })
                 }
@@ -356,31 +362,53 @@ function CallInterface({
                 "button",
                 {
                   onClick: hangup,
-                  className: "rounded-full bg-red-600 text-white hover:bg-red-700 transition-colors w-8 md:w-9 h-8 md:h-9 flex items-center justify-center shrink-0",
-                  "aria-label": isIncoming && callStatus === "ringing" ? "Decline call" : "End call",
-                  children: /* @__PURE__ */ jsx(Phone, { size: 18, className: "transform rotate-135" })
+                  className: "dora-rounded-full dora-bg-red-600 dora-text-white hover:dora-bg-red-700 dora-transition-colors dora-w-8 md:dora-w-9 dora-h-8 md:dora-h-9 dora-flex dora-items-center dora-justify-center dora-shrink-0",
+                  "aria-label": isIncoming && callStatus === "ringing" ? "Decline" : "End call",
+                  children: /* @__PURE__ */ jsx(Phone, { size: 18, className: "dora-transform dora-rotate-[135deg]" })
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex-1 border border-[#282828]" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
-            /* @__PURE__ */ jsxs("div", { className: "text-slate-400 text-xs md:text-sm font-light tracking-wide flex items-center gap-1", children: [
-              /* @__PURE__ */ jsxs("div", { children: [
-                (callStatus === "connecting" || callStatus === "ringing") && /* @__PURE__ */ jsx("span", { children: isIncoming ? "Incoming call" : "Outgoing call" }),
-                callStatus === "ongoing" && /* @__PURE__ */ jsx("span", { children: "Ongoing" }),
-                callStatus === "ended" && /* @__PURE__ */ jsx("span", { children: "Call ended" })
-              ] }),
-              (callStatus === "connecting" || callStatus === "ringing" || callStatus === "ongoing") && (isIncoming ? /* @__PURE__ */ jsx(ArrowDownLeft, { className: "inline-block ml-1 text-green-400", size: 16 }) : /* @__PURE__ */ jsx(ArrowUpRight, { className: "inline-block ml-1 text-blue-400", size: 16 }))
+          /* @__PURE__ */ jsx("div", { className: "dora-flex-1 dora-border-t dora-border-[#282828] dora-mt-2 dora-mb-2" }),
+          callError && callStatus === "ended" && /* @__PURE__ */ jsxs("div", { className: "dora-bg-red-900/20 dora-border dora-border-red-500/30 dora-rounded-lg dora-p-2 md:dora-p-3 dora-mb-2 md:dora-mb-3", children: [
+            /* @__PURE__ */ jsx("p", { className: "dora-text-red-400 dora-text-xs md:dora-text-sm dora-font-medium", children: "Call Failed" }),
+            /* @__PURE__ */ jsx("p", { className: "dora-text-red-300 dora-text-xs dora-mt-0.5 md:dora-mt-1", children: callError }),
+            closeCountdown !== null && /* @__PURE__ */ jsxs("div", { className: "dora-mt-1.5 md:dora-mt-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "dora-w-full dora-bg-red-900/30 dora-rounded-full dora-h-1.5 dora-overflow-hidden", children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "dora-bg-red-500 dora-h-full dora-transition-all dora-duration-100",
+                  style: {
+                    width: `${Math.max(
+                      0,
+                      closeCountdown / (wasConnected ? 1 : 5) * 100
+                    )}%`
+                  }
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("p", { className: "dora-text-xs dora-text-red-300 dora-mt-0.5 md:dora-mt-1 dora-text-center", children: [
+                "Closing in ",
+                closeCountdown,
+                "s"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "dora-flex dora-justify-between dora-items-center", children: [
+            /* @__PURE__ */ jsxs("div", { className: "dora-text-slate-400 dora-text-xs md:dora-text-sm dora-font-light dora-tracking-wide dora-flex dora-items-center dora-gap-1", children: [
+              (callStatus === "connecting" || callStatus === "ringing") && /* @__PURE__ */ jsx("span", { children: isIncoming ? "Incoming call" : "Outgoing call" }),
+              callStatus === "ongoing" && /* @__PURE__ */ jsx("span", { children: "Ongoing" }),
+              callStatus === "ended" && /* @__PURE__ */ jsx("span", { children: "Call ended" }),
+              (callStatus === "connecting" || callStatus === "ringing" || callStatus === "ongoing") && (isIncoming ? /* @__PURE__ */ jsx(ArrowDownLeft, { className: "dora-inline-block dora-ml-1 dora-text-green-400", size: 16 }) : /* @__PURE__ */ jsx(ArrowUpRight, { className: "dora-inline-block dora-ml-1 dora-text-blue-400", size: 16 }))
             ] }),
-            callStatus === "ongoing" && /* @__PURE__ */ jsx("div", { className: "bg-[#272727] h-6 md:h-7.5 rounded-full px-3 md:px-4.5 text-white font-normal text-xs md:text-sm flex items-center justify-center", children: /* @__PURE__ */ jsxs("span", { children: [
-              " ",
-              callDuration,
-              " "
+            callStatus === "ongoing" && /* @__PURE__ */ jsx("div", { className: "dora-bg-[#272727] dora-h-6 md:dora-h-7 dora-rounded-full dora-px-3 md:dora-px-4 dora-text-white dora-font-normal dora-text-xs md:dora-text-sm dora-flex dora-items-center dora-justify-center", children: /* @__PURE__ */ jsx("span", { children: callDuration }) }),
+            callStatus === "ended" && closeCountdown !== null && /* @__PURE__ */ jsx("div", { className: "dora-bg-[#272727] dora-h-6 md:dora-h-7 dora-rounded-full dora-px-3 md:dora-px-4 dora-text-slate-400 dora-font-normal dora-text-xs dora-flex dora-items-center dora-justify-center dora-gap-1", children: /* @__PURE__ */ jsxs("span", { children: [
+              "Closing in ",
+              closeCountdown,
+              "s"
             ] }) }),
-            (connectingCountdown !== null || callStatus === "ringing") && !isIncoming && callStatus !== "ongoing" && /* @__PURE__ */ jsxs("div", { className: "bg-[#272727] h-8 rounded-full px-3 md:px-4 text-white font-normal text-xs md:text-sm flex items-center justify-center gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-[#F99578] whitespace-nowrap", children: callStatus === "ringing" ? "Ringing..." : "Call connecting..." }),
-              callStatus === "connecting" && connectingCountdown && /* @__PURE__ */ jsxs("span", { className: "font-mono ml-1", children: [
+            (connectingCountdown !== null || callStatus === "ringing") && !isIncoming && callStatus !== "ongoing" && callStatus !== "ended" && /* @__PURE__ */ jsxs("div", { className: "dora-bg-[#272727] dora-h-8 dora-rounded-full dora-px-3 md:dora-px-4 dora-text-white dora-font-normal dora-text-xs md:dora-text-sm dora-flex dora-items-center dora-justify-center dora-gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "dora-text-[#F99578] dora-whitespace-nowrap", children: callStatus === "ringing" ? "Ringing..." : "Connecting..." }),
+              callStatus === "connecting" && connectingCountdown && /* @__PURE__ */ jsxs("span", { className: "dora-font-mono dora-ml-1 dora-text-slate-400", children: [
                 Math.floor(connectingCountdown / 60),
                 ":",
                 String(connectingCountdown % 60).padStart(2, "0")
@@ -397,42 +425,94 @@ function Dialpad({
   initialNumber = "",
   showKeys = true,
   className = "",
-  availableExtensions = [],
-  selectedExtension,
+  availableExtensions: providedExtensions,
+  selectedExtension: providedSelectedExtension,
   onExtensionChange
 }) {
   const { call, callStatus } = useCall();
+  const { isConnected } = useConnectionStatus();
+  const { extensions: fetchedExtensions, setExtension } = useExtensions();
   const [number, setNumber] = useState(initialNumber);
   const [keysVisible, setKeysVisible] = useState(showKeys);
+  const [localSelectedExt, setLocalSelectedExt] = useState("");
+  const extensions = providedExtensions?.length ? providedExtensions : fetchedExtensions.map((ext) => ({
+    label: ext.extension,
+    value: ext.extension
+  }));
+  const activeExtension = providedSelectedExtension || localSelectedExt || (extensions.length > 0 ? extensions[0].value : "");
+  useEffect(() => {
+    if (!localSelectedExt && extensions.length > 0 && !providedSelectedExtension) {
+      setLocalSelectedExt(extensions[0].value);
+    }
+  }, [extensions, providedSelectedExtension]);
   const append = (digit) => setNumber((s) => s + digit);
   const backspace = () => setNumber((s) => s.slice(0, -1));
+  const handleExtensionChange = async (ext) => {
+    setLocalSelectedExt(ext);
+    onExtensionChange?.(ext);
+    await setExtension(ext);
+  };
   const handleCall = async () => {
     if (!number || number.trim() === "") return;
     try {
-      await call(number, selectedExtension);
+      await call(number, activeExtension);
       onCallInitiated?.(number);
     } catch (e) {
       console.error("Call failed", e);
     }
   };
-  const isCallDisabled = !number || number.trim() === "" || callStatus === "ringing" || callStatus === "ongoing" || callStatus === "connecting";
-  return /* @__PURE__ */ jsxs("div", { className: `space-y-4 ${className}`, children: [
-    availableExtensions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "gap-2 bg-[#F6F7F9] rounded-lg flex items-center justify-between p-2 md:p-2.5 mb-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-xs md:text-sm text-neutral-500 font-normal whitespace-nowrap", children: "Caller ID" }),
-      /* @__PURE__ */ jsx(
-        "select",
+  const isCallDisabled = !number || number.trim() === "" || !isConnected || callStatus === "ringing" || callStatus === "ongoing" || callStatus === "connecting";
+  const keypad_icon = /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
         {
-          className: "bg-transparent text-sm font-medium outline-none",
-          value: selectedExtension,
-          onChange: (e) => onExtensionChange?.(e.target.value),
-          children: availableExtensions.map((ext) => /* @__PURE__ */ jsx("option", { value: ext.value, children: ext.label }, ext.value))
+          d: "M11.5333 3.2006C11.5339 3.50413 11.4444 3.801 11.2759 4.05352C11.1075 4.30605 10.8679 4.50284 10.5874 4.61891C10.3069 4.73499 9.99832 4.76512 9.70071 4.70548C9.40309 4.64584 9.12991 4.49911 8.91583 4.28393C8.77351 4.14156 8.66063 3.97254 8.58363 3.78654C8.50662 3.60054 8.46701 3.4012 8.46705 3.19989C8.46709 2.99858 8.50678 2.79925 8.58385 2.61328C8.66093 2.4273 8.77387 2.25834 8.91625 2.11602C9.05862 1.9737 9.22764 1.86081 9.41364 1.78381C9.59964 1.70681 9.79898 1.6672 10.0003 1.66723C10.2016 1.66727 10.4009 1.70696 10.5869 1.78404C10.7729 1.86111 10.9418 1.97406 11.0842 2.11643C11.3717 2.40393 11.5342 2.7931 11.5342 3.19977M14.5333 4.73227C14.7376 4.73703 14.9408 4.7009 15.131 4.62601C15.3211 4.55111 15.4944 4.43896 15.6406 4.29614C15.7868 4.15333 15.9029 3.98273 15.9822 3.79438C16.0616 3.60602 16.1024 3.40372 16.1024 3.19935C16.1024 2.99498 16.0616 2.79267 15.9822 2.60432C15.9029 2.41597 15.7868 2.24537 15.6406 2.10255C15.4944 1.95974 15.3211 1.84759 15.131 1.77269C14.9408 1.6978 14.7376 1.66167 14.5333 1.66643C14.1267 1.66643 13.7367 1.82798 13.4491 2.11554C13.1615 2.40309 13 2.7931 13 3.19977C13 3.60643 13.1615 3.99644 13.4491 4.284C13.7367 4.57155 14.1267 4.73227 14.5333 4.73227ZM7 3.2006C7.00061 3.50413 6.91102 3.801 6.7426 4.05352C6.57419 4.30605 6.33454 4.50284 6.05408 4.61891C5.77362 4.73499 5.46499 4.76512 5.16737 4.70548C4.86976 4.64584 4.59657 4.49911 4.3825 4.28393C4.24018 4.14161 4.12728 3.97265 4.05026 3.7867C3.97324 3.60075 3.93359 3.40145 3.93359 3.20018C3.93359 2.99891 3.97324 2.79961 4.05026 2.61366C4.12728 2.42771 4.24018 2.25875 4.3825 2.11643C4.52482 1.97411 4.69378 1.86122 4.87973 1.78419C5.06568 1.70717 5.26498 1.66753 5.46625 1.66753C5.66752 1.66753 5.86682 1.70717 6.05277 1.78419C6.23872 1.86122 6.40768 1.97411 6.55 2.11643C6.8375 2.40393 6.99917 2.7931 6.99917 3.19977M11.5333 7.7306C11.5352 7.93448 11.4964 8.1367 11.4192 8.32539C11.342 8.51409 11.2279 8.68548 11.0836 8.82952C10.9392 8.97357 10.7677 9.08737 10.5788 9.16426C10.39 9.24114 10.1877 9.27958 9.98381 9.2773C9.77993 9.27503 9.57856 9.2321 9.39148 9.15102C9.2044 9.06994 9.03538 8.95234 8.89433 8.80511C8.75327 8.65789 8.64301 8.484 8.57 8.29362C8.497 8.10325 8.46272 7.90022 8.46917 7.69643C8.48185 7.29562 8.65113 6.91575 8.94068 6.63833C9.23024 6.3609 9.617 6.20802 10.018 6.21249C10.419 6.21697 10.8022 6.37843 11.0855 6.66224C11.3688 6.94606 11.5296 7.32961 11.5333 7.7306ZM14.5333 9.2631C14.7376 9.26786 14.9408 9.23174 15.131 9.15684C15.3211 9.08194 15.4944 8.96979 15.6406 8.82698C15.7868 8.68416 15.9029 8.51356 15.9822 8.32521C16.0616 8.13686 16.1024 7.93455 16.1024 7.73018C16.1024 7.52581 16.0616 7.32351 15.9822 7.13515C15.9029 6.9468 15.7868 6.7762 15.6406 6.63339C15.4944 6.49057 15.3211 6.37842 15.131 6.30352C14.9408 6.22863 14.7376 6.1925 14.5333 6.19727C14.1267 6.19727 13.7367 6.35881 13.4491 6.64637C13.1615 6.93392 13 7.32393 13 7.7306C13 8.13726 13.1615 8.52727 13.4491 8.81483C13.7367 9.10239 14.1267 9.26393 14.5333 9.26393M7 7.7306C7.00021 8.03395 6.91038 8.33054 6.7419 8.58281C6.57341 8.83507 6.33385 9.03165 6.05356 9.14766C5.77326 9.26367 5.46485 9.29389 5.16737 9.23448C4.86989 9.17506 4.59673 9.0287 4.3825 8.81393C4.20461 8.63559 4.07342 8.41615 4.00054 8.17503C3.92766 7.93391 3.91534 7.67854 3.96468 7.43152C4.01401 7.1845 4.12347 6.95345 4.28337 6.75882C4.44328 6.56419 4.64869 6.41197 4.88144 6.31564C5.11419 6.21931 5.36709 6.18184 5.61777 6.20654C5.86845 6.23124 6.10918 6.31735 6.31865 6.45725C6.52812 6.59716 6.69988 6.78654 6.81872 7.00864C6.93756 7.23073 6.99982 7.4787 7 7.7306ZM11.5333 12.2623C11.5348 12.4893 11.4857 12.7138 11.3897 12.9196C11.2937 13.1253 11.1532 13.3071 10.9783 13.4519C10.8034 13.5967 10.5985 13.7007 10.3784 13.7566C10.1583 13.8124 9.9286 13.8186 9.70583 13.7748C9.42088 13.7191 9.1576 13.5836 8.94662 13.3841C8.73564 13.1847 8.58563 12.9294 8.51403 12.648C8.44244 12.3666 8.4522 12.0707 8.5422 11.7947C8.63219 11.5186 8.79871 11.2738 9.02238 11.0887C9.24606 10.9036 9.51769 10.7857 9.8057 10.7489C10.0937 10.7122 10.3862 10.7579 10.6493 10.8808C10.9123 11.0038 11.135 11.1989 11.2915 11.4434C11.448 11.688 11.5319 11.9719 11.5333 12.2623ZM11.5333 16.8006C11.5337 17.0274 11.4836 17.2515 11.3868 17.4567C11.29 17.6618 11.1488 17.8429 10.9735 17.9868C10.7981 18.1308 10.593 18.2339 10.3729 18.2889C10.1528 18.3439 9.92326 18.3493 9.70083 18.3048C9.40375 18.2453 9.13093 18.0992 8.91681 17.8849C8.70269 17.6705 8.55688 17.3975 8.49777 17.1004C8.43866 16.8032 8.46891 16.4952 8.58469 16.2152C8.70048 15.9353 8.89661 15.6959 9.14833 15.5273C9.37915 15.3731 9.64749 15.2845 9.92473 15.2708C10.202 15.2572 10.4777 15.3191 10.7225 15.4499C10.9673 15.5807 11.1721 15.7755 11.3149 16.0135C11.4577 16.2515 11.5332 16.523 11.5333 16.8006ZM16.0667 12.2623C16.0681 12.4893 16.019 12.7138 15.923 12.9196C15.827 13.1253 15.6865 13.3071 15.5116 13.4519C15.3367 13.5967 15.1318 13.7007 14.9117 13.7566C14.6917 13.8124 14.4619 13.8186 14.2392 13.7748C14.0165 13.7312 13.8062 13.6388 13.6236 13.5041C13.4409 13.3695 13.2904 13.1959 13.183 12.9961C13.0755 12.7962 13.0137 12.575 13.0021 12.3484C12.9905 12.1218 13.0294 11.8954 13.1158 11.6856C13.2509 11.3581 13.4952 11.0875 13.8072 10.9197C14.1193 10.7519 14.4797 10.6974 14.8274 10.7653C15.1751 10.8333 15.4886 11.0195 15.7145 11.2924C15.9404 11.5653 16.0648 11.908 16.0667 12.2623ZM7 12.2623C7.00227 12.5661 6.91412 12.8638 6.74675 13.1174C6.57939 13.371 6.34039 13.5691 6.06013 13.6864C5.77987 13.8038 5.47104 13.8352 5.1729 13.7766C4.87476 13.718 4.60079 13.572 4.38583 13.3573C4.20705 13.1796 4.07483 12.9606 4.00086 12.7196C3.9269 12.4787 3.91347 12.2232 3.96176 11.9759C4.01006 11.7285 4.11859 11.4968 4.27776 11.3014C4.43692 11.106 4.64181 10.9528 4.87428 10.8554C5.10676 10.758 5.35966 10.7194 5.61059 10.7431C5.86153 10.7668 6.10276 10.8519 6.31294 10.991C6.52313 11.1301 6.69578 11.3189 6.81561 11.5406C6.93545 11.7624 6.99878 12.0102 7 12.2623Z",
+          fill: "#677289"
         }
       )
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: `dora-space-y-4 ${className} dora-font-sans`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "dora-flex dora-items-center dora-justify-between dora-mb-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "dora-flex dora-items-center dora-gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "dora-w-8 dora-h-8 dora-rounded-lg dora-bg-emerald-500 dora-flex dora-items-center dora-justify-center dora-shadow-sm", children: /* @__PURE__ */ jsx(Phone, { size: 16, className: "dora-text-white", fill: "white" }) }),
+        /* @__PURE__ */ jsx("span", { className: "dora-text-sm dora-font-bold dora-text-zinc-900", children: "Dora Cell" })
+      ] }),
+      /* @__PURE__ */ jsx(CreditBalance, {})
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "dora-h-px dora-bg-zinc-100 dora-w-full dora-mb-4" }),
+    extensions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "dora-gap-2 dora-bg-[#F6F7F9] dora-rounded-xl dora-flex dora-items-center dora-justify-between dora-p-2.5 dora-mb-4 dora-border dora-border-zinc-100", children: [
+      /* @__PURE__ */ jsx("div", { className: "dora-text-xs md:dora-text-sm dora-text-zinc-500 dora-font-medium dora-whitespace-nowrap", children: "Caller ID" }),
+      /* @__PURE__ */ jsxs("div", { className: "dora-relative dora-flex dora-items-center", children: [
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            className: "dora-appearance-none dora-bg-white dora-px-3 dora-py-1.5 dora-rounded-lg dora-border dora-border-zinc-200 dora-text-sm dora-font-medium dora-outline-none dora-pr-8 dora-cursor-pointer hover:dora-border-emerald-500 dora-transition-colors dora-shadow-sm",
+            value: activeExtension,
+            onChange: (e) => handleExtensionChange(e.target.value),
+            children: extensions.map((ext) => /* @__PURE__ */ jsx("option", { value: ext.value, children: ext.label }, ext.value))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            size: 14,
+            className: "dora-absolute dora-right-2.5 dora-pointer-events-none dora-text-zinc-400"
+          }
+        )
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-2 md:space-y-3 bg-[#F6F7F9] p-2 md:p-2.5 rounded-lg", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 md:gap-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex items-center bg-white rounded-md px-3 h-10 border border-transparent focus-within:border-green-500 transition-colors", children: [
-          /* @__PURE__ */ jsx(User, { className: "text-gray-400 mr-2", size: 18 }),
+    /* @__PURE__ */ jsxs("div", { className: "dora-space-y-3 dora-bg-[#F6F7F9] dora-p-3 dora-rounded-xl dora-border dora-border-zinc-100", children: [
+      /* @__PURE__ */ jsxs("div", { className: "dora-flex dora-items-center dora-gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "dora-flex-1 dora-min-w-0 dora-flex dora-items-center dora-bg-white dora-rounded-xl dora-px-4 dora-h-12 dora-border dora-border-zinc-200 focus-within:dora-border-emerald-500 focus-within:dora-ring-4 focus-within:dora-ring-emerald-500/10 dora-transition-all dora-shadow-sm", children: [
+          /* @__PURE__ */ jsx(User, { className: "dora-text-zinc-400 dora-mr-2", size: 18 }),
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -440,53 +520,64 @@ function Dialpad({
               placeholder: "Enter number",
               value: number,
               onChange: (e) => setNumber(e.target.value),
-              className: "bg-transparent border-none outline-none w-full text-base"
+              className: "dora-bg-transparent dora-border-none dora-outline-none dora-w-full dora-text-base dora-text-zinc-900 dora-placeholder-zinc-400 dora-font-medium"
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           "button",
           {
             disabled: isCallDisabled,
-            className: "bg-green-500 text-white hover:bg-green-600 rounded-lg h-9 md:h-10 w-9 md:w-11 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
             onClick: handleCall,
             title: "Place Call",
-            children: /* @__PURE__ */ jsx(Phone, { size: 16, fill: "currentColor" })
+            className: "dora-bg-emerald-500 dora-text-white hover:dora-bg-emerald-600 dora-rounded-xl dora-h-12 dora-w-14 dora-flex dora-items-center dora-justify-center disabled:dora-opacity-50 disabled:dora-cursor-not-allowed dora-transition-all dora-shadow-lg dora-shadow-emerald-500/20 active:dora-scale-95",
+            children: /* @__PURE__ */ jsx(Phone, { size: 20, fill: "white", className: "dora-text-white" })
           }
-        ) })
+        )
       ] }),
-      /* @__PURE__ */ jsx("div", { children: keysVisible ? /* @__PURE__ */ jsxs("div", { className: "pt-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 mb-3", children: /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx("div", { children: keysVisible ? /* @__PURE__ */ jsxs("div", { className: "dora-pt-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "dora-flex dora-items-center dora-gap-3 dora-mb-3", children: /* @__PURE__ */ jsxs(
           "button",
           {
             onClick: () => setKeysVisible(false),
-            className: "px-2 md:px-2.5 h-8 bg-white rounded-full shadow text-neutral-500 flex items-center gap-1.5 md:gap-2 text-xs md:text-sm font-normal hover:bg-gray-50 transition-colors",
+            className: "dora-px-2 md:dora-px-2.5 dora-h-8 dora-bg-white dora-rounded-full dora-shadow dora-text-neutral-500 dora-flex dora-items-center dora-gap-1.5 md:dora-gap-2 dora-text-xs md:dora-text-sm dora-font-normal hover:dora-bg-gray-50 dora-transition-colors",
             children: [
               /* @__PURE__ */ jsx(X, { color: "red", size: 16 }),
               " Close keypad"
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2 md:gap-3", children: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "+", "0", "del"].map(
-          (d) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => d === "del" ? backspace() : append(d),
-              className: "h-10 md:h-12 bg-white rounded-xl shadow flex items-center justify-center text-base md:text-lg font-medium hover:bg-gray-50 active:bg-gray-100 transition-colors",
-              "aria-label": d === "del" ? "Delete" : `Dial ${d}`,
-              children: d === "del" ? /* @__PURE__ */ jsx(Delete, { size: 18 }) : d
-            },
-            d
-          )
-        ) })
-      ] }) : /* @__PURE__ */ jsx("div", { className: "pt-2 md:pt-3", children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: "dora-grid dora-grid-cols-3 dora-gap-2 md:dora-gap-3", children: [
+          "1",
+          "2",
+          "3",
+          "4",
+          "5",
+          "6",
+          "7",
+          "8",
+          "9",
+          "+",
+          "0",
+          "del"
+        ].map((d) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => d === "del" ? backspace() : append(d),
+            className: "dora-h-10 md:dora-h-12 dora-bg-white dora-rounded-xl dora-shadow dora-flex dora-items-center dora-justify-center dora-text-base md:dora-text-lg dora-font-medium dora-text-slate-900 hover:dora-bg-gray-50 active:dora-bg-gray-100 dora-transition-colors",
+            "aria-label": d === "del" ? "Delete" : `Dial ${d}`,
+            children: d === "del" ? /* @__PURE__ */ jsx(Delete, { size: 18 }) : d
+          },
+          d
+        )) })
+      ] }) : /* @__PURE__ */ jsx("div", { className: "dora-pt-3", children: /* @__PURE__ */ jsxs(
         "button",
         {
           onClick: () => setKeysVisible(true),
-          className: "rounded-full bg-[#EDEEF1] h-9 md:h-10 flex justify-center items-center px-3 md:px-4 w-full text-xs md:text-sm hover:bg-[#E3E4E8] transition-colors",
+          className: "dora-rounded-full dora-bg-white dora-border dora-border-zinc-200 dora-h-11 dora-flex dora-justify-center dora-items-center dora-px-5 dora-w-full dora-text-sm hover:dora-bg-zinc-50 dora-transition-all dora-shadow-sm active:dora-scale-[0.98]",
           children: [
-            /* @__PURE__ */ jsx("span", { className: "mr-2", children: "\u{1F522}" }),
-            /* @__PURE__ */ jsx("span", { className: "text-xs md:text-sm text-neutral-500 font-normal ml-1.5", children: "Open dialer" })
+            /* @__PURE__ */ jsx("span", { className: "dora-mr-2", children: keypad_icon }),
+            /* @__PURE__ */ jsx("span", { className: "dora-text-sm dora-text-zinc-600 dora-font-medium", children: "Open dialer keypad" })
           ]
         }
       ) }) })
@@ -507,6 +598,7 @@ function DoraCellProvider({
   const [callDuration, setCallDuration] = useState("00:00");
   const [isMuted, setIsMuted] = useState(false);
   const [error, setError] = useState(null);
+  const [extension, setExtension] = useState(null);
   const durationIntervalRef = useRef(null);
   useEffect(() => {
     if (!autoInitialize) return;
@@ -527,6 +619,9 @@ function DoraCellProvider({
     if (!sdk) return;
     const handleConnectionStatus = (state) => {
       setConnectionStatus(state.status);
+      if (state.extension) {
+        setExtension(state.extension);
+      }
       if (state.error) {
         setError(new Error(state.error));
       }
@@ -601,10 +696,10 @@ function DoraCellProvider({
       }
     };
   }, [callStatus, currentCall]);
-  const call = async (phoneNumber, extension) => {
+  const call = async (phoneNumber, extension2) => {
     try {
       setError(null);
-      await sdk.call(phoneNumber, { extension });
+      await sdk.call(phoneNumber, { extension: extension2 });
     } catch (err) {
       setError(err instanceof Error ? err : new Error("Failed to make call"));
       throw err;
@@ -646,7 +741,8 @@ function DoraCellProvider({
     call,
     hangup,
     toggleMute,
-    answerCall
+    answerCall,
+    extension
   };
   return /* @__PURE__ */ jsx(DoraCellContext.Provider, { value: contextValue, children });
 }
@@ -658,7 +754,7 @@ function useDoraCell() {
   return context;
 }
 function useCall() {
-  const { call, hangup, toggleMute, answerCall, callStatus, callDuration, isMuted, currentCall } = useDoraCell();
+  const { call, hangup, toggleMute, answerCall, callStatus, callDuration, isMuted, currentCall, error } = useDoraCell();
   return {
     call,
     hangup,
@@ -667,17 +763,111 @@ function useCall() {
     callStatus,
     callDuration,
     isMuted,
-    currentCall
+    currentCall,
+    callError: error?.message
   };
 }
 function useConnectionStatus() {
-  const { connectionStatus, isInitialized, error } = useDoraCell();
+  const { connectionStatus, isInitialized, error, extension } = useDoraCell();
   return {
     connectionStatus,
     isInitialized,
     isConnected: connectionStatus === "registered",
-    error
+    error,
+    extension
+  };
+}
+function useWallet() {
+  const { sdk, isInitialized } = useDoraCell();
+  const [data, setData] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const fetchData = async () => {
+    if (!sdk || !isInitialized) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const val = await sdk.getWallet();
+      setData(val);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to fetch wallet"));
+    } finally {
+      setIsLoading(false);
+    }
   };
+  useEffect(() => {
+    if (isInitialized) {
+      console.log("SDK: useWallet fetching data...");
+      fetchData();
+    }
+  }, [isInitialized, sdk]);
+  useEffect(() => {
+    if (!sdk || !isInitialized) return;
+    const handleCallEnded = () => {
+      console.log("SDK: Call ended, refreshing wallet balance in 2 seconds...");
+      setTimeout(fetchData, 2e3);
+    };
+    sdk.on("call:ended", handleCallEnded);
+    return () => {
+      sdk.off("call:ended", handleCallEnded);
+    };
+  }, [sdk, isInitialized]);
+  return {
+    balance: data?.balance ?? 0,
+    currency: data?.currency ?? "NGN",
+    isLoading,
+    error,
+    refresh: fetchData
+  };
+}
+function useExtensions() {
+  const { sdk, isInitialized } = useDoraCell();
+  const [extensions, setExtensions] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const fetchExtensions = async () => {
+    if (!sdk || !isInitialized) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await sdk.fetchExtensions();
+      setExtensions(data);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to fetch extensions"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const setExtension = async (extension) => {
+    if (!sdk) return;
+    await sdk.setExtension(extension);
+  };
+  useEffect(() => {
+    if (isInitialized) {
+      fetchExtensions();
+    }
+  }, [isInitialized, sdk]);
+  return {
+    extensions,
+    isLoading,
+    error,
+    setExtension,
+    refresh: fetchExtensions
+  };
+}
+function CreditBalance() {
+  const { balance, currency, isLoading, error } = useWallet();
+  if (error) {
+    console.warn("SDK: CreditBalance error:", error);
+  }
+  const formatted = new Intl.NumberFormat("en-NG", {
+    style: "currency",
+    currency: currency === "NGN" ? "NGN" : currency || "NGN"
+  }).format(balance);
+  return /* @__PURE__ */ jsxs("div", { className: "dora-credit-balance px-3 md:px-5 py-2 md:py-3 bg-[#F6F7F9] border border-[#EDEEF1] rounded-full text-xs md:text-sm text-slate-700 whitespace-nowrap", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs md:text-sm text-slate-500 mr-1 md:mr-2", children: "Credit balance:" }),
+    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: isLoading ? "..." : formatted })
+  ] });
 }
 /*! Bundled license information:
 
@@ -687,6 +877,7 @@ lucide-react/dist/esm/Icon.js:
 lucide-react/dist/esm/createLucideIcon.js:
 lucide-react/dist/esm/icons/arrow-down-left.js:
 lucide-react/dist/esm/icons/arrow-up-right.js:
+lucide-react/dist/esm/icons/chevron-down.js:
 lucide-react/dist/esm/icons/delete.js:
 lucide-react/dist/esm/icons/maximize.js:
 lucide-react/dist/esm/icons/mic-off.js:
@@ -704,6 +895,6 @@ lucide-react/dist/esm/lucide-react.js:
    *)
 */
 
-export { CallInterface, Dialpad, DoraCellProvider, useCall, useConnectionStatus, useDoraCell };
+export { CallInterface, CreditBalance, Dialpad, DoraCellProvider, useCall, useConnectionStatus, useDoraCell, useExtensions, useWallet };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map