@dora-cell/sdk-react 1.0.1 → 2.0.0

package/dist/index.mjs

@@ -187,6 +187,7 @@ function CallInterface({
   minimizeIcon
 }) {
   const {
+    sdk,
     callStatus,
     currentCall,
     callDuration,
@@ -206,13 +207,28 @@ function CallInterface({
   const remoteNumber = currentCall?.remoteNumber || "Unknown";
   const displayName = remoteNumber;
   useEffect(() => {
-    if (currentCall && audioRef.current) {
-      const stream = currentCall.getRemoteStream();
-      if (stream && audioRef.current.srcObject !== stream) {
+    if (!currentCall || !sdk || !audioRef.current) return;
+    const updateStream = (stream) => {
+      if (audioRef.current && stream && audioRef.current.srcObject !== stream) {
+        console.log("SDK UI: Attaching new remote stream to audio element");
         audioRef.current.srcObject = stream;
+        audioRef.current.play().catch((err) => {
+          console.warn("SDK UI: Auto-play failed, user interaction might be needed:", err);
+        });
       }
-    }
-  }, [currentCall, callStatus]);
+    };
+    const handleStream = (call, stream) => {
+      if (call.id === currentCall.id) {
+        updateStream(stream);
+      }
+    };
+    const initialStream = currentCall.getRemoteStream ? currentCall.getRemoteStream() : null;
+    if (initialStream) updateStream(initialStream);
+    sdk.on("call:stream", handleStream);
+    return () => {
+      sdk.off("call:stream", handleStream);
+    };
+  }, [currentCall, sdk, callStatus]);
   useEffect(() => {
     if (callStatus === "ringing" && isIncoming) {
       onOpenChange?.(true);
@@ -434,17 +450,22 @@ function Dialpad({
   const { extensions: fetchedExtensions, setExtension } = useExtensions();
   const [number, setNumber] = useState(initialNumber);
   const [keysVisible, setKeysVisible] = useState(showKeys);
-  const [localSelectedExt, setLocalSelectedExt] = useState("");
+  const [localSelectedExt, setLocalSelectedExt] = useState(providedSelectedExtension || "");
   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) {
+    if (providedSelectedExtension && providedSelectedExtension !== localSelectedExt) {
+      setLocalSelectedExt(providedSelectedExtension);
+    }
+  }, [providedSelectedExtension]);
+  useEffect(() => {
+    if (!localSelectedExt && extensions.length > 0) {
       setLocalSelectedExt(extensions[0].value);
     }
-  }, [extensions, providedSelectedExtension]);
+  }, [extensions, localSelectedExt]);
+  const activeExtension = localSelectedExt || (extensions.length > 0 ? extensions[0].value : "");
   const append = (digit) => setNumber((s) => s + digit);
   const backspace = () => setNumber((s) => s.slice(0, -1));
   const handleExtensionChange = async (ext) => {
@@ -474,45 +495,42 @@ function Dialpad({
         "path",
         {
           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"
+          fill: "currentColor"
         }
       )
     }
   );
-  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" })
-      ] }),
+  return /* @__PURE__ */ jsxs("div", { className: `dora-bg-white dora-rounded-3xl ${className} dora-font-sans dora-relative dora-z-10`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "dora-flex dora-items-center dora-justify-between dora-mb-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "dora-bg-emerald-500 dora-text-white dora-px-3 dora-py-1.5 dora-rounded-lg dora-text-xs md:dora-text-sm dora-font-semibold dora-shadow-sm", 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: "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__ */ jsxs("div", { className: "dora-bg-zinc-50 dora-p-6 dora-rounded-3xl dora-border dora-border-zinc-100 dora-shadow-inner", children: [
+      /* @__PURE__ */ jsxs("div", { className: "dora-flex dora-items-center dora-justify-between dora-mb-5", children: [
+        /* @__PURE__ */ jsx("span", { className: "dora-text-zinc-500 dora-font-medium dora-text-sm dora-tracking-tight", children: "Caller ID" }),
+        /* @__PURE__ */ jsxs("div", { className: "dora-relative", children: [
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              disabled: extensions.length === 0,
+              className: "dora-appearance-none dora-bg-white dora-border dora-border-zinc-200 dora-rounded-xl dora-px-4 dora-py-2 dora-text-sm dora-font-semibold dora-text-zinc-900 dora-min-w-[170px] dora-pr-10 dora-outline-none focus:dora-border-emerald-500 dora-transition-all dora-shadow-sm disabled:dora-opacity-50",
+              value: activeExtension,
+              onChange: (e) => handleExtensionChange(e.target.value),
+              children: extensions.length > 0 ? extensions.map((ext) => /* @__PURE__ */ jsx("option", { value: ext.value, children: ext.label }, ext.value)) : /* @__PURE__ */ jsx("option", { children: "Loading..." })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              size: 18,
+              className: "dora-absolute dora-right-4 dora-top-1/2 dora-transform dora--translate-y-1/2 dora-text-zinc-500 dora-pointer-events-none"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "dora-flex dora-items-center dora-gap-3 dora-mb-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "dora-flex-1 dora-bg-white dora-border dora-border-zinc-200 dora-rounded-xl dora-flex dora-items-center dora-px-4 dora-h-12 dora-shadow-sm focus-within:dora-border-emerald-500 dora-transition-all", children: [
+          /* @__PURE__ */ jsx(User, { size: 18, className: "dora-text-zinc-300 dora-mr-2" }),
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -520,7 +538,7 @@ function Dialpad({
               placeholder: "Enter number",
               value: number,
               onChange: (e) => setNumber(e.target.value),
-              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"
+              className: "dora-bg-transparent dora-border-none dora-outline-none dora-w-full dora-text-base dora-text-zinc-900 dora-font-medium dora-placeholder-zinc-300"
             }
           )
         ] }),
@@ -529,25 +547,24 @@ function Dialpad({
           {
             disabled: isCallDisabled,
             onClick: handleCall,
-            title: "Place Call",
-            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",
+            className: "dora-bg-emerald-500 dora-text-white dora-w-12 dora-h-12 dora-rounded-xl dora-flex dora-items-center dora-justify-center dora-shadow-lg dora-shadow-emerald-500/20 hover:dora-bg-emerald-600 active:dora-scale-95 dora-transition-all disabled:dora-opacity-50",
             children: /* @__PURE__ */ jsx(Phone, { size: 20, fill: "white", className: "dora-text-white" })
           }
         )
       ] }),
-      /* @__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(
+      /* @__PURE__ */ jsx("div", { className: "dora-space-y-5", children: keysVisible ? /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "dora-flex dora-mb-5", children: /* @__PURE__ */ jsxs(
           "button",
           {
             onClick: () => setKeysVisible(false),
-            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",
+            className: "dora-flex dora-items-center dora-gap-2 dora-px-4 dora-py-2 dora-bg-white dora-border dora-border-zinc-200 dora-rounded-full dora-text-xs dora-font-semibold dora-text-zinc-600 hover:dora-bg-zinc-50 dora-transition-colors dora-shadow-sm active:dora-scale-95",
             children: [
-              /* @__PURE__ */ jsx(X, { color: "red", size: 16 }),
-              " Close keypad"
+              /* @__PURE__ */ jsx(X, { size: 16, className: "dora-text-red-500" }),
+              "Close"
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx("div", { className: "dora-grid dora-grid-cols-3 dora-gap-2 md:dora-gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "dora-grid dora-grid-cols-3 dora-gap-4", children: [
           "1",
           "2",
           "3",
@@ -564,20 +581,19 @@ function Dialpad({
           "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
+            className: "dora-h-12 dora-bg-white dora-rounded-xl dora-flex dora-items-center dora-justify-center dora-text-lg dora-font-semibold dora-text-zinc-900 dora-shadow-sm border dora-border-zinc-50 hover:dora-bg-zinc-50 active:dora-scale-95 dora-transition-all",
+            children: d === "del" ? /* @__PURE__ */ jsx(Delete, { size: 18, className: "dora-text-zinc-500" }) : d
           },
           d
         )) })
-      ] }) : /* @__PURE__ */ jsx("div", { className: "dora-pt-3", children: /* @__PURE__ */ jsxs(
+      ] }) : /* @__PURE__ */ jsx("div", { className: "dora-flex dora-justify-center", children: /* @__PURE__ */ jsxs(
         "button",
         {
           onClick: () => setKeysVisible(true),
-          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]",
+          className: "dora-flex dora-items-center dora-gap-2 dora-px-4 dora-py-2 dora-bg-white dora-border dora-border-zinc-200 dora-rounded-full dora-text-xs dora-font-semibold dora-text-zinc-500 hover:dora-bg-zinc-50 dora-transition-all active:dora-scale-95 dora-shadow-sm",
           children: [
-            /* @__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" })
+            /* @__PURE__ */ jsx("span", { className: "dora-transform dora-scale-90", children: keypad_icon }),
+            "Open dialer"
           ]
         }
       ) }) })
@@ -722,9 +738,9 @@ function DoraCellProvider({
       setIsMuted(true);
     }
   };
-  const answerCall = () => {
+  const answerCall = async () => {
     try {
-      sdk.answerCall();
+      await sdk.answerCall();
     } catch (err) {
       setError(err instanceof Error ? err : new Error("Failed to answer call"));
     }
@@ -754,8 +770,9 @@ function useDoraCell() {
   return context;
 }
 function useCall() {
-  const { call, hangup, toggleMute, answerCall, callStatus, callDuration, isMuted, currentCall, error } = useDoraCell();
+  const { sdk, call, hangup, toggleMute, answerCall, callStatus, callDuration, isMuted, currentCall, error } = useDoraCell();
   return {
+    sdk,
     call,
     hangup,
     toggleMute,
@@ -864,9 +881,9 @@ function CreditBalance() {
     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 })
+  return /* @__PURE__ */ jsxs("div", { className: "dora-credit-balance dora-px-4 dora-py-2 dora-bg-zinc-100 dora-border dora-border-zinc-200 dora-rounded-full dora-text-sm dora-text-zinc-600 dora-whitespace-nowrap dora-flex dora-items-center dora-shadow-sm", children: [
+    /* @__PURE__ */ jsx("span", { className: "dora-text-xs dora-text-zinc-500 dora-mr-2", children: "Credit balance:" }),
+    /* @__PURE__ */ jsx("span", { className: "dora-font-bold dora-text-zinc-800", children: isLoading ? "..." : formatted })
   ] });
 }
 /*! Bundled license information: