@dora-cell/sdk-react 1.0.1 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.d.mts +2 -1
  2. package/dist/index.d.ts +2 -1
  3. package/dist/index.js +81 -64
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +81 -64
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +1 -1
  8. package/package.json +2 -2
package/dist/index.d.mts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import React from 'react';
3
- import { DoraCellConfig, CallStatus, Call, ConnectionStatus, DoraCell } from '@dora-cell/sdk';
3
+ import { DoraCellConfig, DoraCell, CallStatus, Call, ConnectionStatus } from '@dora-cell/sdk';
4
4
 
5
5
  interface CallInterfaceProps {
6
6
  isOpen?: boolean;
@@ -54,6 +54,7 @@ declare function useDoraCell(): DoraCellContextValue;
54
54
  * Hook for making calls
55
55
  */
56
56
  declare function useCall(): {
57
+ sdk: DoraCell | null;
57
58
  call: (phoneNumber: string, extension?: string) => Promise<void>;
58
59
  hangup: () => void;
59
60
  toggleMute: () => void;
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import React from 'react';
3
- import { DoraCellConfig, CallStatus, Call, ConnectionStatus, DoraCell } from '@dora-cell/sdk';
3
+ import { DoraCellConfig, DoraCell, CallStatus, Call, ConnectionStatus } from '@dora-cell/sdk';
4
4
 
5
5
  interface CallInterfaceProps {
6
6
  isOpen?: boolean;
@@ -54,6 +54,7 @@ declare function useDoraCell(): DoraCellContextValue;
54
54
  * Hook for making calls
55
55
  */
56
56
  declare function useCall(): {
57
+ sdk: DoraCell | null;
57
58
  call: (phoneNumber: string, extension?: string) => Promise<void>;
58
59
  hangup: () => void;
59
60
  toggleMute: () => void;
package/dist/index.js CHANGED
@@ -189,6 +189,7 @@ function CallInterface({
189
189
  minimizeIcon
190
190
  }) {
191
191
  const {
192
+ sdk,
192
193
  callStatus,
193
194
  currentCall,
194
195
  callDuration,
@@ -208,13 +209,28 @@ function CallInterface({
208
209
  const remoteNumber = currentCall?.remoteNumber || "Unknown";
209
210
  const displayName = remoteNumber;
210
211
  react.useEffect(() => {
211
- if (currentCall && audioRef.current) {
212
- const stream = currentCall.getRemoteStream();
213
- if (stream && audioRef.current.srcObject !== stream) {
212
+ if (!currentCall || !sdk || !audioRef.current) return;
213
+ const updateStream = (stream) => {
214
+ if (audioRef.current && stream && audioRef.current.srcObject !== stream) {
215
+ console.log("SDK UI: Attaching new remote stream to audio element");
214
216
  audioRef.current.srcObject = stream;
217
+ audioRef.current.play().catch((err) => {
218
+ console.warn("SDK UI: Auto-play failed, user interaction might be needed:", err);
219
+ });
215
220
  }
216
- }
217
- }, [currentCall, callStatus]);
221
+ };
222
+ const handleStream = (call, stream) => {
223
+ if (call.id === currentCall.id) {
224
+ updateStream(stream);
225
+ }
226
+ };
227
+ const initialStream = currentCall.getRemoteStream ? currentCall.getRemoteStream() : null;
228
+ if (initialStream) updateStream(initialStream);
229
+ sdk.on("call:stream", handleStream);
230
+ return () => {
231
+ sdk.off("call:stream", handleStream);
232
+ };
233
+ }, [currentCall, sdk, callStatus]);
218
234
  react.useEffect(() => {
219
235
  if (callStatus === "ringing" && isIncoming) {
220
236
  onOpenChange?.(true);
@@ -436,17 +452,22 @@ function Dialpad({
436
452
  const { extensions: fetchedExtensions, setExtension } = useExtensions();
437
453
  const [number, setNumber] = react.useState(initialNumber);
438
454
  const [keysVisible, setKeysVisible] = react.useState(showKeys);
439
- const [localSelectedExt, setLocalSelectedExt] = react.useState("");
455
+ const [localSelectedExt, setLocalSelectedExt] = react.useState(providedSelectedExtension || "");
440
456
  const extensions = providedExtensions?.length ? providedExtensions : fetchedExtensions.map((ext) => ({
441
457
  label: ext.extension,
442
458
  value: ext.extension
443
459
  }));
444
- const activeExtension = providedSelectedExtension || localSelectedExt || (extensions.length > 0 ? extensions[0].value : "");
445
460
  react.useEffect(() => {
446
- if (!localSelectedExt && extensions.length > 0 && !providedSelectedExtension) {
461
+ if (providedSelectedExtension && providedSelectedExtension !== localSelectedExt) {
462
+ setLocalSelectedExt(providedSelectedExtension);
463
+ }
464
+ }, [providedSelectedExtension]);
465
+ react.useEffect(() => {
466
+ if (!localSelectedExt && extensions.length > 0) {
447
467
  setLocalSelectedExt(extensions[0].value);
448
468
  }
449
- }, [extensions, providedSelectedExtension]);
469
+ }, [extensions, localSelectedExt]);
470
+ const activeExtension = localSelectedExt || (extensions.length > 0 ? extensions[0].value : "");
450
471
  const append = (digit) => setNumber((s) => s + digit);
451
472
  const backspace = () => setNumber((s) => s.slice(0, -1));
452
473
  const handleExtensionChange = async (ext) => {
@@ -476,45 +497,42 @@ function Dialpad({
476
497
  "path",
477
498
  {
478
499
  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",
479
- fill: "#677289"
500
+ fill: "currentColor"
480
501
  }
481
502
  )
482
503
  }
483
504
  );
484
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `dora-space-y-4 ${className} dora-font-sans`, children: [
485
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-flex dora-items-center dora-justify-between dora-mb-2", children: [
486
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-flex dora-items-center dora-gap-2", children: [
487
- /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Phone, { size: 16, className: "dora-text-white", fill: "white" }) }),
488
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dora-text-sm dora-font-bold dora-text-zinc-900", children: "Dora Cell" })
489
- ] }),
505
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `dora-bg-white dora-rounded-3xl ${className} dora-font-sans dora-relative dora-z-10`, children: [
506
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-flex dora-items-center dora-justify-between dora-mb-6", children: [
507
+ /* @__PURE__ */ jsxRuntime.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" }),
490
508
  /* @__PURE__ */ jsxRuntime.jsx(CreditBalance, {})
491
509
  ] }),
492
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-h-px dora-bg-zinc-100 dora-w-full dora-mb-4" }),
493
- extensions.length > 0 && /* @__PURE__ */ jsxRuntime.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: [
494
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-text-xs md:dora-text-sm dora-text-zinc-500 dora-font-medium dora-whitespace-nowrap", children: "Caller ID" }),
495
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-relative dora-flex dora-items-center", children: [
496
- /* @__PURE__ */ jsxRuntime.jsx(
497
- "select",
498
- {
499
- 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",
500
- value: activeExtension,
501
- onChange: (e) => handleExtensionChange(e.target.value),
502
- children: extensions.map((ext) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: ext.value, children: ext.label }, ext.value))
503
- }
504
- ),
505
- /* @__PURE__ */ jsxRuntime.jsx(
506
- ChevronDown,
507
- {
508
- size: 14,
509
- className: "dora-absolute dora-right-2.5 dora-pointer-events-none dora-text-zinc-400"
510
- }
511
- )
512
- ] })
513
- ] }),
514
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-space-y-3 dora-bg-[#F6F7F9] dora-p-3 dora-rounded-xl dora-border dora-border-zinc-100", children: [
515
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-flex dora-items-center dora-gap-3", children: [
516
- /* @__PURE__ */ jsxRuntime.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: [
517
- /* @__PURE__ */ jsxRuntime.jsx(User, { className: "dora-text-zinc-400 dora-mr-2", size: 18 }),
510
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-bg-zinc-50 dora-p-6 dora-rounded-3xl dora-border dora-border-zinc-100 dora-shadow-inner", children: [
511
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-flex dora-items-center dora-justify-between dora-mb-5", children: [
512
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dora-text-zinc-500 dora-font-medium dora-text-sm dora-tracking-tight", children: "Caller ID" }),
513
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-relative", children: [
514
+ /* @__PURE__ */ jsxRuntime.jsx(
515
+ "select",
516
+ {
517
+ disabled: extensions.length === 0,
518
+ 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",
519
+ value: activeExtension,
520
+ onChange: (e) => handleExtensionChange(e.target.value),
521
+ children: extensions.length > 0 ? extensions.map((ext) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: ext.value, children: ext.label }, ext.value)) : /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Loading..." })
522
+ }
523
+ ),
524
+ /* @__PURE__ */ jsxRuntime.jsx(
525
+ ChevronDown,
526
+ {
527
+ size: 18,
528
+ 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"
529
+ }
530
+ )
531
+ ] })
532
+ ] }),
533
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-flex dora-items-center dora-gap-3 dora-mb-6", children: [
534
+ /* @__PURE__ */ jsxRuntime.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: [
535
+ /* @__PURE__ */ jsxRuntime.jsx(User, { size: 18, className: "dora-text-zinc-300 dora-mr-2" }),
518
536
  /* @__PURE__ */ jsxRuntime.jsx(
519
537
  "input",
520
538
  {
@@ -522,7 +540,7 @@ function Dialpad({
522
540
  placeholder: "Enter number",
523
541
  value: number,
524
542
  onChange: (e) => setNumber(e.target.value),
525
- 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"
543
+ 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"
526
544
  }
527
545
  )
528
546
  ] }),
@@ -531,25 +549,24 @@ function Dialpad({
531
549
  {
532
550
  disabled: isCallDisabled,
533
551
  onClick: handleCall,
534
- title: "Place Call",
535
- 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",
552
+ 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",
536
553
  children: /* @__PURE__ */ jsxRuntime.jsx(Phone, { size: 20, fill: "white", className: "dora-text-white" })
537
554
  }
538
555
  )
539
556
  ] }),
540
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: keysVisible ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-pt-3", children: [
541
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-flex dora-items-center dora-gap-3 dora-mb-3", children: /* @__PURE__ */ jsxRuntime.jsxs(
557
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-space-y-5", children: keysVisible ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
558
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-flex dora-mb-5", children: /* @__PURE__ */ jsxRuntime.jsxs(
542
559
  "button",
543
560
  {
544
561
  onClick: () => setKeysVisible(false),
545
- 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",
562
+ 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",
546
563
  children: [
547
- /* @__PURE__ */ jsxRuntime.jsx(X, { color: "red", size: 16 }),
548
- " Close keypad"
564
+ /* @__PURE__ */ jsxRuntime.jsx(X, { size: 16, className: "dora-text-red-500" }),
565
+ "Close"
549
566
  ]
550
567
  }
551
568
  ) }),
552
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-grid dora-grid-cols-3 dora-gap-2 md:dora-gap-3", children: [
569
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-grid dora-grid-cols-3 dora-gap-4", children: [
553
570
  "1",
554
571
  "2",
555
572
  "3",
@@ -566,20 +583,19 @@ function Dialpad({
566
583
  "button",
567
584
  {
568
585
  onClick: () => d === "del" ? backspace() : append(d),
569
- 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",
570
- "aria-label": d === "del" ? "Delete" : `Dial ${d}`,
571
- children: d === "del" ? /* @__PURE__ */ jsxRuntime.jsx(Delete, { size: 18 }) : d
586
+ 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",
587
+ children: d === "del" ? /* @__PURE__ */ jsxRuntime.jsx(Delete, { size: 18, className: "dora-text-zinc-500" }) : d
572
588
  },
573
589
  d
574
590
  )) })
575
- ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-pt-3", children: /* @__PURE__ */ jsxRuntime.jsxs(
591
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-flex dora-justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
576
592
  "button",
577
593
  {
578
594
  onClick: () => setKeysVisible(true),
579
- 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]",
595
+ 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",
580
596
  children: [
581
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dora-mr-2", children: keypad_icon }),
582
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dora-text-sm dora-text-zinc-600 dora-font-medium", children: "Open dialer keypad" })
597
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dora-transform dora-scale-90", children: keypad_icon }),
598
+ "Open dialer"
583
599
  ]
584
600
  }
585
601
  ) }) })
@@ -724,9 +740,9 @@ function DoraCellProvider({
724
740
  setIsMuted(true);
725
741
  }
726
742
  };
727
- const answerCall = () => {
743
+ const answerCall = async () => {
728
744
  try {
729
- sdk$1.answerCall();
745
+ await sdk$1.answerCall();
730
746
  } catch (err) {
731
747
  setError(err instanceof Error ? err : new Error("Failed to answer call"));
732
748
  }
@@ -756,8 +772,9 @@ function useDoraCell() {
756
772
  return context;
757
773
  }
758
774
  function useCall() {
759
- const { call, hangup, toggleMute, answerCall, callStatus, callDuration, isMuted, currentCall, error } = useDoraCell();
775
+ const { sdk, call, hangup, toggleMute, answerCall, callStatus, callDuration, isMuted, currentCall, error } = useDoraCell();
760
776
  return {
777
+ sdk,
761
778
  call,
762
779
  hangup,
763
780
  toggleMute,
@@ -866,9 +883,9 @@ function CreditBalance() {
866
883
  style: "currency",
867
884
  currency: currency === "NGN" ? "NGN" : currency || "NGN"
868
885
  }).format(balance);
869
- return /* @__PURE__ */ jsxRuntime.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: [
870
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs md:text-sm text-slate-500 mr-1 md:mr-2", children: "Credit balance:" }),
871
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: isLoading ? "..." : formatted })
886
+ return /* @__PURE__ */ jsxRuntime.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: [
887
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dora-text-xs dora-text-zinc-500 dora-mr-2", children: "Credit balance:" }),
888
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dora-font-bold dora-text-zinc-800", children: isLoading ? "..." : formatted })
872
889
  ] });
873
890
  }
874
891
  /*! Bundled license information: