callix-dialer-widget 1.0.3 → 1.0.5

package/dist-widget/callix-dialer.es.js

@@ -54817,668 +54817,8 @@ function ActiveCallSummary({
     ] })
   ] }) });
 }
-function FaMicrophoneSlash(props) {
-  return GenIcon({ "attr": { "viewBox": "0 0 640 512" }, "child": [{ "tag": "path", "attr": { "d": "M633.82 458.1l-157.8-121.96C488.61 312.13 496 285.01 496 256v-48c0-8.84-7.16-16-16-16h-16c-8.84 0-16 7.16-16 16v48c0 17.92-3.96 34.8-10.72 50.2l-26.55-20.52c3.1-9.4 5.28-19.22 5.28-29.67V96c0-53.02-42.98-96-96-96s-96 42.98-96 96v45.36L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.36 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.41-6.97 4.16-17.02-2.82-22.45zM400 464h-56v-33.77c11.66-1.6 22.85-4.54 33.67-8.31l-50.11-38.73c-6.71.4-13.41.87-20.35.2-55.85-5.45-98.74-48.63-111.18-101.85L144 241.31v6.85c0 89.64 63.97 169.55 152 181.69V464h-56c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16z" }, "child": [] }] })(props);
-}
-function FaMicrophone(props) {
-  return GenIcon({ "attr": { "viewBox": "0 0 352 512" }, "child": [{ "tag": "path", "attr": { "d": "M176 352c53.02 0 96-42.98 96-96V96c0-53.02-42.98-96-96-96S80 42.98 80 96v160c0 53.02 42.98 96 96 96zm160-160h-16c-8.84 0-16 7.16-16 16v48c0 74.8-64.49 134.82-140.79 127.38C96.71 376.89 48 317.11 48 250.3V208c0-8.84-7.16-16-16-16H16c-8.84 0-16 7.16-16 16v40.16c0 89.64 63.97 169.55 152 181.69V464H96c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-33.77C285.71 418.47 352 344.9 352 256v-48c0-8.84-7.16-16-16-16z" }, "child": [] }] })(props);
-}
-function FaPause(props) {
-  return GenIcon({ "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z" }, "child": [] }] })(props);
-}
-function FaPhoneSlash(props) {
-  return GenIcon({ "attr": { "viewBox": "0 0 640 512" }, "child": [{ "tag": "path", "attr": { "d": "M268.2 381.4l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48c-10.7 4.6-16.5 16.1-13.9 27.5l24 104c2.5 10.8 12.1 18.6 23.4 18.6 100.7 0 193.7-32.4 269.7-86.9l-80-61.8c-10.9 6.5-22.1 12.7-33.6 18.1zm365.6 76.7L475.1 335.5C537.9 256.4 576 156.9 576 48c0-11.2-7.7-20.9-18.6-23.4l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-12.2 26.1-27.9 50.3-46 72.8L45.5 3.4C38.5-2 28.5-.8 23 6.2L3.4 31.4c-5.4 7-4.2 17 2.8 22.4l588.4 454.7c7 5.4 17 4.2 22.5-2.8l19.6-25.3c5.4-6.8 4.1-16.9-2.9-22.3z" }, "child": [] }] })(props);
-}
-function FaPhone(props) {
-  return GenIcon({ "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z" }, "child": [] }] })(props);
-}
-function FaPlay(props) {
-  return GenIcon({ "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" }, "child": [] }] })(props);
-}
-function FaVolumeDown(props) {
-  return GenIcon({ "attr": { "viewBox": "0 0 384 512" }, "child": [{ "tag": "path", "attr": { "d": "M215.03 72.04L126.06 161H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V89.02c0-21.47-25.96-31.98-40.97-16.98zm123.2 108.08c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 229.28 336 242.62 336 257c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.87z" }, "child": [] }] })(props);
-}
-function FaVolumeMute(props) {
-  return GenIcon({ "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zM461.64 256l45.64-45.64c6.3-6.3 6.3-16.52 0-22.82l-22.82-22.82c-6.3-6.3-16.52-6.3-22.82 0L416 210.36l-45.64-45.64c-6.3-6.3-16.52-6.3-22.82 0l-22.82 22.82c-6.3 6.3-6.3 16.52 0 22.82L370.36 256l-45.63 45.63c-6.3 6.3-6.3 16.52 0 22.82l22.82 22.82c6.3 6.3 16.52 6.3 22.82 0L416 301.64l45.64 45.64c6.3 6.3 16.52 6.3 22.82 0l22.82-22.82c6.3-6.3 6.3-16.52 0-22.82L461.64 256z" }, "child": [] }] })(props);
-}
-function FaVolumeOff(props) {
-  return GenIcon({ "attr": { "viewBox": "0 0 256 512" }, "child": [{ "tag": "path", "attr": { "d": "M215 71l-89 89H24a24 24 0 0 0-24 24v144a24 24 0 0 0 24 24h102.06L215 441c15 15 41 4.47 41-17V88c0-21.47-26-32-41-17z" }, "child": [] }] })(props);
-}
-function FaVolumeUp(props) {
-  return GenIcon({ "attr": { "viewBox": "0 0 576 512" }, "child": [{ "tag": "path", "attr": { "d": "M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zm233.32-51.08c-11.17-7.33-26.18-4.24-33.51 6.95-7.34 11.17-4.22 26.18 6.95 33.51 66.27 43.49 105.82 116.6 105.82 195.58 0 78.98-39.55 152.09-105.82 195.58-11.17 7.32-14.29 22.34-6.95 33.5 7.04 10.71 21.93 14.56 33.51 6.95C528.27 439.58 576 351.33 576 256S528.27 72.43 448.35 19.97zM480 256c0-63.53-32.06-121.94-85.77-156.24-11.19-7.14-26.03-3.82-33.12 7.46s-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.54 480 256zm-141.77-76.87c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.86z" }, "child": [] }] })(props);
-}
-function AudioControls() {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-4 w-full max-w-md mx-auto mt-4 ", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(AudioInputControls, {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(AudioOutputControls, {})
-  ] });
-}
-function AudioInputControls() {
-  const [isMuted, setMute] = clientSdkReactExports.useCallOperatorAudioInputMuted();
-  function toggleMute() {
-    setMute(!isMuted);
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-4 p-4 bg-gray-100 rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "button",
-    {
-      type: "button",
-      onClick: toggleMute,
-      className: `p-3 rounded-full ${isMuted ? "bg-red-500 text-white" : "bg-gray-200"}`,
-      "aria-label": isMuted ? "Unmute" : "Mute",
-      children: isMuted ? /* @__PURE__ */ jsxRuntimeExports.jsx(FaMicrophoneSlash, { className: "h-6 w-6" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(FaMicrophone, { className: "h-6 w-6" })
-    }
-  ) });
-}
-function AudioOutputControls() {
-  const [isMuted, setMute] = clientSdkReactExports.useCallOperatorAudioOutputMuted();
-  const [volume, setVolume] = clientSdkReactExports.useCallOperatorAudioOutputVolume();
-  const handleVolumeChange = (e) => {
-    const newVolume = parseFloat(e.target.value);
-    setVolume(newVolume);
-  };
-  const toggleMute = () => {
-    setMute(!isMuted);
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center w-full gap-4 p-4 bg-gray-100 rounded-lg", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: toggleMute,
-        className: `p-3 rounded-full ${isMuted ? "bg-red-500 text-white" : "bg-gray-200"}`,
-        "aria-label": isMuted ? "Unmute" : "Mute",
-        children: isMuted ? /* @__PURE__ */ jsxRuntimeExports.jsx(FaVolumeMute, { className: "h-6 w-6" }) : volume > 0.5 ? /* @__PURE__ */ jsxRuntimeExports.jsx(FaVolumeUp, { className: "h-6 w-6" }) : volume > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(FaVolumeDown, { className: "h-6 w-6" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(FaVolumeOff, { className: "h-6 w-6" })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: "output-volume-control", className: "block text-sm font-medium mb-1", children: [
-        "Output: ",
-        Math.round(volume * 100),
-        "%"
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "input",
-        {
-          type: "range",
-          id: "output-volume-control",
-          min: "0",
-          max: "1",
-          step: "0.01",
-          value: volume,
-          onChange: handleVolumeChange,
-          className: "w-full"
-        }
-      )
-    ] })
-  ] });
-}
-function CallButtons({ isConnected }) {
-  const currentCall = clientSdkReactExports.useCallOperatorCurrentCall();
-  const { answer, reject, hangup, hold, unhold } = clientSdkReactExports.useCallOperatorCurrentCallControls();
-  const [onHold, setOnHold] = useState(false);
-  const isIncoming = (currentCall == null ? void 0 : currentCall.direction) === "incoming";
-  function toggleHold() {
-    const newOnHold = !onHold;
-    setOnHold(newOnHold);
-    if (newOnHold) {
-      hold();
-    } else {
-      unhold();
-    }
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-4 justify-center", children: isConnected ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: toggleHold,
-        className: `px-6 py-3 flex items-center gap-2 ${onHold ? "bg-blue-500 hover:bg-blue-600" : "bg-yellow-500 hover:bg-yellow-600"} text-white rounded-lg transition-colors`,
-        children: [
-          onHold ? /* @__PURE__ */ jsxRuntimeExports.jsx(FaPlay, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(FaPause, {}),
-          onHold ? "Unhold" : "Hold"
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => hangup(),
-        className: "px-6 py-3 flex items-center gap-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(FaPhoneSlash, {}),
-          "Hang Up"
-        ]
-      }
-    )
-  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    isIncoming && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => answer(),
-        className: "px-6 py-3 flex items-center gap-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(FaPhone, {}),
-          "Answer"
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => reject(),
-        className: "px-6 py-3 flex items-center gap-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(FaPhoneSlash, {}),
-          "Reject"
-        ]
-      }
-    )
-  ] }) });
-}
-function CallDetails({ call }) {
-  if (!call) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white shadow-md rounded-lg p-6 max-w-md mx-auto", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold mb-2", children: "Call Details" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "flex justify-between", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "Call ID:" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs", children: call.id })
-      ] }),
-      call.data.callUuid && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "flex justify-between", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "UUID:" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs", children: call.data.callUuid })
-      ] }),
-      call.data.protocol && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "flex justify-between", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "Protocol:" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs", children: call.data.protocol })
-      ] })
-    ] })
-  ] });
-}
-function CallManagerAfterCall() {
-  const { finishAfterCall } = clientSdkReactExports.useCallOperatorControls();
-  const [callResult, setCallResult] = useState("success");
-  const [qualificationId, setQualificationId] = useState(null);
-  function handleFinishAfterCall() {
-    if (qualificationId != null) {
-      finishAfterCall({
-        result: callResult,
-        qualificationId
-      });
-    }
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col items-center justify-center p-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 p-8 rounded-lg shadow-sm text-center", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-medium mb-2", children: "Call Ended" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center mb-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mr-2", children: "Call Result:" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ToggleButton,
-          {
-            label: "Success",
-            isEnabled: callResult === "success",
-            enabledClasses: "bg-green-500 text-white",
-            disabledClasses: "bg-gray-300 text-gray-700",
-            onEnable: () => {
-              setCallResult("success");
-              setQualificationId(null);
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ToggleButton,
-          {
-            label: "Discard",
-            isEnabled: callResult === "failure",
-            enabledClasses: "bg-red-500 text-white",
-            disabledClasses: "bg-gray-300 text-gray-700",
-            onEnable: () => {
-              setCallResult("failure");
-              setQualificationId(null);
-            }
-          }
-        )
-      ] })
-    ] }),
-    callResult === "success" && /* @__PURE__ */ jsxRuntimeExports.jsx(SuccessQualificationSelector, { onSelect: setQualificationId }),
-    callResult === "failure" && /* @__PURE__ */ jsxRuntimeExports.jsx(DiscardQualificationSelector, { onSelect: setQualificationId }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
-      {
-        type: "button",
-        className: "mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700",
-        onClick: handleFinishAfterCall,
-        children: "Finish After Call"
-      }
-    )
-  ] }) });
-}
-function ToggleButton(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "button",
-    {
-      type: "button",
-      className: `p-2 ${props.classes ?? ""} ${props.isEnabled ? props.enabledClasses : props.disabledClasses}`,
-      onClick: props.isEnabled ? void 0 : props.onEnable,
-      children: props.label
-    }
-  );
-}
-function Selector(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "select",
-    {
-      className: "w-full p-2 border border-gray-300 rounded",
-      onChange: (e) => props.onSelect(Number(e.target.value)),
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "-- Select Option --" }),
-        props.options.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: option.id, children: option.name }, option.id))
-      ]
-    }
-  );
-}
-function SuccessQualificationSelector(props) {
-  const successQualifications = clientSdkReactExports.useCallOperatorSuccessQualifications();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-medium mb-2", children: "Select Qualification" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Selector, { options: successQualifications, onSelect: props.onSelect })
-  ] });
-}
-function DiscardQualificationSelector(props) {
-  const discardQualifications = clientSdkReactExports.useCallOperatorDiscardQualifications();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-medium mb-2", children: "Select Qualification" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Selector, { options: discardQualifications, onSelect: props.onSelect })
-  ] });
-}
-function CallTimer({ call }) {
-  const [duration, setDuration] = useState(0);
-  useEffect(() => {
-    if (!call) {
-      setDuration(0);
-      return;
-    }
-    setDuration(call.currentDurationSeconds);
-    const timer = setInterval(() => {
-      if (call) {
-        setDuration(call.currentDurationSeconds);
-      }
-    }, 1e3);
-    return () => clearInterval(timer);
-  }, [call]);
-  const formatTime = (seconds) => {
-    const mins = Math.floor(seconds / 60);
-    const secs = seconds % 60;
-    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-2xl font-bold text-center py-4", children: formatTime(duration) });
-}
-const validatePhoneNumber = (phoneNumber) => {
-  if (!phoneNumber) {
-    return "Phone number is required";
-  }
-  const isValid2 = isValidPhoneNumber(phoneNumber, "BR");
-  if (!isValid2) {
-    return "Invalid phone number";
-  }
-  return null;
-};
-function ManualCallPanel() {
-  const { makeManualCall } = clientSdkReactExports.useCallOperatorControls();
-  const operatorState = clientSdkReactExports.useCallOperatorState();
-  const [phoneNumber, setPhoneNumber] = useState("");
-  const [isCalling, setIsCalling] = useState(false);
-  const [error2, setError] = useState(null);
-  useEffect(() => {
-    if ((operatorState == null ? void 0 : operatorState.state) === "callRinging" || (operatorState == null ? void 0 : operatorState.state) === "callInProgress") {
-      setIsCalling(false);
-      setPhoneNumber("");
-    }
-  }, [operatorState == null ? void 0 : operatorState.state]);
-  const handleCall = useCallback(() => {
-    const phoneNumberTrimmed = phoneNumber.trim();
-    const err = validatePhoneNumber(phoneNumberTrimmed);
-    setError(err);
-    if (err) {
-      return;
-    }
-    try {
-      setIsCalling(true);
-      makeManualCall(phoneNumberTrimmed);
-    } catch (e) {
-      console.error(e);
-      setError("Failed to start call");
-      setIsCalling(false);
-    }
-  }, [phoneNumber, makeManualCall]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "manual-call-number", className: "block text-sm font-medium text-gray-700 mb-1", children: "Phone Number" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "input",
-        {
-          id: "manual-call-number",
-          type: "tel",
-          inputMode: "tel",
-          autoComplete: "tel",
-          placeholder: "e.g. +5511999999999",
-          className: "w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
-          value: phoneNumber,
-          onChange: (e) => {
-            setPhoneNumber(e.target.value);
-            if (error2) setError(null);
-          },
-          onKeyDown: (e) => {
-            if (e.key === "Enter") {
-              e.preventDefault();
-              handleCall();
-            }
-          },
-          disabled: isCalling
-        }
-      ),
-      error2 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-red-600", children: error2 })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: handleCall,
-        disabled: isCalling || !!validatePhoneNumber(phoneNumber),
-        className: "w-full flex justify-center items-center gap-2 rounded-md bg-blue-600 px-4 py-2 text-white font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
-        children: isCalling ? "Calling..." : "Call"
-      }
-    )
-  ] });
-}
-function RingingAnimation() {
-  const [visible, setVisible] = useState(true);
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setVisible((prev) => !prev);
-    }, 500);
-    return () => {
-      clearInterval(interval);
-    };
-  }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center my-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        className: `absolute inset-0 rounded-full bg-green-500 opacity-30 ${visible ? "scale-150" : "scale-100"} transition-transform duration-500`
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative z-10 w-12 h-12 bg-green-500 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        fill: "none",
-        viewBox: "0 0 24 24",
-        stroke: "currentColor",
-        className: "w-6 h-6 text-white",
-        "aria-hidden": "true",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("title", { children: "Phone" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "path",
-            {
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              strokeWidth: 2,
-              d: "M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
-            }
-          )
-        ]
-      }
-    ) })
-  ] }) });
-}
-function CallManager() {
-  const callOperatorState = clientSdkReactExports.useCallOperatorState();
-  console.log("callOperatorState", callOperatorState);
-  if (!callOperatorState) {
-    return null;
-  }
-  if (callOperatorState.state === "starting") {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col items-center justify-center p-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 p-8 rounded-lg shadow-sm text-center", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-medium mb-2", children: "Initializing Call Operator" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600", children: "Please wait..." })
-    ] }) });
-  }
-  if (callOperatorState.state === "idle") {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col items-center justify-center p-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 p-8 rounded-lg shadow-sm w-full max-w-md space-y-6", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center space-y-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-medium", children: "No Active Call" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600", children: "You can place a manual outbound call below." })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(ManualCallPanel, {})
-    ] }) });
-  }
-  if (callOperatorState.state === "onBreak") {
-    const serviceBreak = callOperatorState.break;
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col items-center justify-center p-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 p-8 rounded-lg shadow-sm text-center", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-medium mb-2", children: "On Break" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600", children: "You are currently on break." }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-gray-600", children: [
-        "Break: ",
-        serviceBreak.name,
-        " (",
-        serviceBreak.id,
-        ")"
-      ] })
-    ] }) });
-  }
-  if (callOperatorState.state === "callRinging") {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-6 w-full max-w-lg mx-auto p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white shadow-lg rounded-lg overflow-hidden", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-blue-600 text-white p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold text-center", children: "Incoming Call" }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6 space-y-6", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(RingingAnimation, {}),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CallButtons, { isConnected: false }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CallDetails, { call: callOperatorState.call })
-      ] })
-    ] }) });
-  }
-  if (callOperatorState.state === "manualCallSetup" || callOperatorState.state === "manualCallRinging") {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-6 w-full max-w-lg mx-auto p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white shadow-lg rounded-lg overflow-hidden", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-blue-600 text-white p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold text-center", children: "Call in Progress" }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6 space-y-6", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CallTimer, { call: callOperatorState.call }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CallButtons, { isConnected: false }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CallDetails, { call: callOperatorState.call })
-      ] })
-    ] }) });
-  }
-  if (callOperatorState.state === "callInProgress") {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-6 w-full max-w-lg mx-auto p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white shadow-lg rounded-lg overflow-hidden", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-blue-600 text-white p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold text-center", children: "Call in Progress" }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6 space-y-6", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CallTimer, { call: callOperatorState.call }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CallButtons, { isConnected: true }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AudioControls, {}),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CallDetails, { call: callOperatorState.call }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CallInfoDisplay, {})
-      ] })
-    ] }) });
-  }
-  if (callOperatorState.state === "afterCall") {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(CallManagerAfterCall, {});
-  }
-  if (callOperatorState.state === "error") {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col items-center justify-center p-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-red-50 p-8 rounded-lg shadow-sm text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-medium mb-2", children: "Error" }) }) });
-  }
-  if (callOperatorState.state === "offline") {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col items-center justify-center p-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 p-8 rounded-lg shadow-sm text-center", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-medium mb-2", children: "Offline" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600", children: "You are currently offline. Please check your connection." })
-    ] }) });
-  }
-}
-function InlineDialer({
-  isAuthenticated,
-  username,
-  onLogin,
-  onLogout,
-  isLoadingSession,
-  sessionError
-}) {
-  const [inputUsername, setInputUsername] = useState(username ?? "");
-  const [hasBlurred, setHasBlurred] = useState(false);
-  const isInputInvalid = hasBlurred && !inputUsername.trim();
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setHasBlurred(true);
-    if (inputUsername.trim()) {
-      await onLogin(inputUsername);
-    }
-  };
-  if (!isAuthenticated) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        className: tw`
-          w-full max-w-md mx-auto
-          rounded-2xl border border-slate-200
-          bg-white shadow-lg
-          p-6
-        `,
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`mb-6 text-center`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                className: tw`
-              inline-flex h-16 w-16 items-center justify-center
-              rounded-2xl bg-primary/10 text-primary
-              mb-3
-            `,
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiUser, { className: tw`text-2xl` })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: tw`text-xl font-bold text-slate-800 mb-1`, children: "Callix Dialer" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm text-slate-500`, children: "Faça login para iniciar" })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: handleSubmit, className: tw`space-y-4`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-2`, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "label",
-                {
-                  htmlFor: "inline-username",
-                  className: tw`flex items-center gap-2 text-sm font-medium text-slate-700`,
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(FiUser, { className: tw`text-base text-primary` }),
-                    "Usuário"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "input",
-                {
-                  id: "inline-username",
-                  type: "text",
-                  placeholder: "Digite seu usuário Callix",
-                  className: tw`
-                w-full rounded-xl border border-slate-200
-                bg-white px-4 py-3 text-base shadow-inner
-                focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/40
-              `,
-                  value: inputUsername,
-                  onChange: (e) => setInputUsername(e.target.value),
-                  onBlur: () => setHasBlurred(true),
-                  disabled: isLoadingSession
-                }
-              ),
-              isInputInvalid && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-xs text-red-500`, children: "Informe um usuário para continuar." }),
-              sessionError && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-xs text-red-500`, children: sessionError })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "button",
-              {
-                type: "submit",
-                disabled: isLoadingSession,
-                className: tw`
-              flex w-full items-center justify-center gap-2
-              rounded-xl bg-primary px-4 py-3 text-white
-              shadow-lg transition hover:bg-primaryDark
-              disabled:cursor-not-allowed disabled:opacity-60
-            `,
-                children: [
-                  isLoadingSession && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "span",
-                    {
-                      className: tw`
-                  inline-flex h-4 w-4 animate-spin rounded-full
-                  border-2 border-white/40 border-t-white
-                `
-                    }
-                  ),
-                  "Entrar"
-                ]
-              }
-            )
-          ] })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "div",
-    {
-      className: tw`
-        w-full max-w-md mx-auto
-        rounded-2xl border border-slate-200
-        bg-white shadow-lg
-        overflow-hidden
-      `,
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            className: tw`
-          bg-gradient-to-r from-primary to-primaryDark
-          px-5 py-4 text-white
-        `,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center justify-between`, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-3`, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "span",
-                  {
-                    className: tw`
-                inline-flex h-10 w-10 items-center justify-center
-                rounded-xl bg-white/15 shadow-inner
-              `,
-                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiUser, { className: tw`text-lg` })
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm font-semibold`, children: username }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-xs text-white/70`, children: "Operador" })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: onLogout,
-                  className: tw`
-              rounded-lg p-2 text-white/80 transition
-              hover:bg-white/15 hover:text-white
-            `,
-                  "aria-label": "Sair",
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiLogOut, { className: tw`text-base` })
-                }
-              )
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`p-4`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CallManager, {}) })
-      ]
-    }
-  );
+function InlineDialer(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`w-full`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`[&>div]:!static [&>div]:!transform-none`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FloatingDialer, { ...props }) }) });
 }
 class CallixDialerWidget {
   constructor(options) {