fcr-ui-scene 1.0.20 → 3.1.0-1

package/lib/modules/chat/util.d.ts

@@ -0,0 +1,6 @@
+import { AllowChatLevelType } from 'agora-ui-foundation/lib/components/chat-manager';
+import { RoleType } from 'agora-ui-foundation/lib/components/message-bubble';
+import { FcrUserRole } from '../../type';
+export declare const handleMessageTime: (time: number | string) => string;
+export declare const breakWord: (str?: string) => string | undefined;
+export declare const handleChatLevelChangedSystemMsg: (t: any, chatLevel: AllowChatLevelType, publisherRole: RoleType | FcrUserRole | undefined, publisherUsername: string | undefined, isSelf: boolean) => string;

package/lib/modules/chat/util.js

@@ -0,0 +1,69 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleMessageTime = exports.handleChatLevelChangedSystemMsg = exports.breakWord = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.slice.js");
+require("core-js/modules/es.date.to-string.js");
+var _type = require("../../type");
+var handleMessageTime = exports.handleMessageTime = function handleMessageTime(time) {
+  if (typeof time === 'string') {
+    return time;
+  }
+  var now = new Date();
+  var nowYear = now.getFullYear();
+  var date = new Date(time);
+  var year = date.getFullYear();
+  var month = date.getMonth() + 1;
+  var day = date.getDate();
+  var hour = date.getHours();
+  var minute = date.getMinutes();
+  var amOrPm = hour >= 12 ? 'PM' : 'AM';
+  var hh = hour % 12;
+  var mm = minute < 10 ? '0' + minute : minute;
+  if (year === nowYear) {
+    // hh:mm (ap / pm)
+    if (year === nowYear && date.getMonth() === now.getMonth() && date.getDate() === now.getDate()) {
+      return "".concat(hh, ":").concat(mm, " ").concat(amOrPm);
+    }
+    // mm-dd hh:mm (ap / pm)
+    return "".concat(month, "-").concat(day, " ").concat(hh, ":").concat(mm, " ").concat(amOrPm);
+  } else {
+    // yyyy-mm-dd hh:mm (ap / pm)
+    return "".concat(year, "-").concat(month, "-").concat(day, " ").concat(hh, ":").concat(mm, " ").concat(amOrPm);
+  }
+};
+var MAX_NAME_LENGTH = 6;
+var breakWord = exports.breakWord = function breakWord(str) {
+  if (!str) return str;
+  if (str.length <= MAX_NAME_LENGTH) {
+    return str;
+  }
+  return str.slice(0, MAX_NAME_LENGTH - 1) + '...';
+};
+var handleChatLevelChangedSystemMsg = exports.handleChatLevelChangedSystemMsg = function handleChatLevelChangedSystemMsg(t, chatLevel, publisherRole, publisherUsername, isSelf) {
+  var needMsgPrefix = chatLevel === 'everyone' || chatLevel === 'no_one';
+  var msgPrefix = '';
+  if (needMsgPrefix) {
+    msgPrefix = "".concat(publisherRole === 'union-host' || publisherRole === _type.FcrUserRole.COHOST ? t('fmt_role_cohost') : t('fmt_role_host'), " (").concat(isSelf ? t('I') : breakWord(publisherUsername), ") ");
+  }
+  var msg = msgPrefix;
+  switch (chatLevel) {
+    case 'everyone':
+      msg += t('fmt_chat_tips_freechat');
+      break;
+    case 'public':
+      msg += t('fmt_chat_tips_onlypublic');
+      break;
+    case 'private_to_manager':
+      msg += t('fmt_additional_tips_chatpermissionchange');
+      break;
+    case 'no_one':
+      msg += t('fmt_chat_tips_muteroom');
+      break;
+  }
+  return msg;
+};

package/lib/modules/connection-gateway/components/computer/index.css

@@ -0,0 +1,11 @@
+.connector-computer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+}
+.connector-computer .fcr-button {
+  margin-bottom: 15px;
+  width: 260px;
+}

package/lib/modules/connection-gateway/components/computer/index.d.ts

@@ -0,0 +1,3 @@
+import './index.css';
+declare const ConnectFromComputer: () => import("react/jsx-runtime").JSX.Element;
+export default ConnectFromComputer;

package/lib/modules/connection-gateway/components/computer/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _button = require("agora-ui-foundation/lib/components/button");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _store = require("../../store");
+require("./index.css");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var ConnectFromComputer = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    openAudioSettings = _useContext.openAudioSettings,
+    closeConnectionDialog = _useContext.closeConnectionDialog,
+    connectType = _useContext.connectType,
+    hasPstnStream = _useContext.hasPstnStream,
+    connectInfo = _useContext.connectInfo,
+    outgoingCall = _useContext.outgoingCall,
+    hasOwnPstnStream = _useContext.hasOwnPstnStream,
+    hasNeedMergedStream = _useContext.hasNeedMergedStream,
+    joinAudioByComputer = _useContext.joinAudioByComputer,
+    stopAudioByComputer = _useContext.stopAudioByComputer;
+  var transI18n = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "connector-computer",
+    children: [connectType === _store.ConnectType.NONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+      size: "XS",
+      block: true,
+      className: "var(--fcrcornerradiusround) fcr_ui_scene_ramp_brand6",
+      onClick: joinAudioByComputer,
+      children: transI18n('fmt_pstn_label_accessmethodPC')
+    }), hasPstnStream && !outgoingCall && !hasOwnPstnStream && hasNeedMergedStream && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "connector-phone-alert",
+      children: transI18n('fmt_pstn_label_alreadyin', {
+        reason1: connectInfo === null || connectInfo === void 0 ? void 0 : connectInfo.phoneUserId
+      })
+    }), connectType === _store.ConnectType.COMPUTER && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+      size: "XS",
+      styleType: "danger",
+      block: true,
+      className: "var(--fcrcornerradiusround)",
+      onClick: stopAudioByComputer,
+      children: transI18n('fmt_pstn_button_PCaudiostop')
+    }), connectType === _store.ConnectType.PHONE && hasOwnPstnStream && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      content: transI18n('fmt_pstn_tips_alreadyphone'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        size: "XS",
+        block: true,
+        type: "secondary-bordered",
+        children: transI18n('fmt_pstn_status_unconnectted')
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+      size: "XS",
+      block: true,
+      type: "link",
+      onClick: openAudioSettings,
+      children: transI18n('fmt_pstn_button_devicetest')
+    })]
+  });
+});
+var _default = exports["default"] = ConnectFromComputer;

package/lib/modules/connection-gateway/components/phone/components/callinfo/index.css

@@ -0,0 +1,36 @@
+.connector-phone-call_info {
+  color: var(--fcr_ui_scene_icontext1);
+  margin-top: 8px;
+}
+
+.connector-phone-call_info.disabled {
+  color: var(--fcr_ui_scene_icontext3);
+}
+
+.connector-phone-call_info .connector-phone-call_info-item:first-child {
+  margin-bottom: 11px;
+}
+
+.connector-phone-call_info-item {
+  height: 32px;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+
+.connector-phone-call_info .fcr-select {
+  width: 180px;
+  border-color: var(--fcr_web_ui_scene_line4);
+  background: var(--fcr_ui_scene_input2);
+}
+
+.connector-phone-call_info-label {
+  width: 62px;
+  display: block;
+  text-align: right;
+  margin-right: 12px;
+}
+
+.connector-phone-call_info.disabled .fcr-select .fcr-select__selected {
+  color: var(--fcr_ui_scene_icontext3);
+}

package/lib/modules/connection-gateway/components/phone/components/callinfo/index.d.ts

@@ -0,0 +1,10 @@
+import { FcrRoomConnectorPhoneInfo } from 'agora-edu-core/lib/room-control/room-connector-control/type';
+import { ConnectorRegion } from '../../../../store';
+import './index.css';
+declare function ConnectionInfo(props: {
+    disabled?: boolean;
+    onChange: (value: string) => void;
+    value: ConnectorRegion;
+    info: FcrRoomConnectorPhoneInfo;
+}): import("react/jsx-runtime").JSX.Element;
+export default ConnectionInfo;

package/lib/modules/connection-gateway/components/phone/components/callinfo/index.js

@@ -0,0 +1,75 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.slice.js");
+var _select = require("agora-ui-foundation/lib/components/select");
+require("./index.css");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+function ConnectionInfo(props) {
+  var _info$phoneNumberList;
+  var disabled = props.disabled,
+    value = props.value,
+    onChange = props.onChange,
+    info = props.info;
+  var transI18n = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "connector-phone_inner",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
+      className: "connector-phone-call_info ".concat(disabled && 'disabled'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+        className: "connector-phone-call_info-item",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          className: "connector-phone-call_info-label",
+          children: transI18n('fmt_pstn_label_countryregion')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_select.FcrSelect, {
+            disabled: disabled,
+            size: "small",
+            value: String(value),
+            options: [{
+              text: transI18n('fmt_PSTN_status_china'),
+              value: '1'
+            }, {
+              text: transI18n('fmt_PSTN_status_usa'),
+              value: '2'
+            }],
+            onChange: onChange
+          })
+        })]
+      }), info === null || info === void 0 || (_info$phoneNumberList = info.phoneNumberList) === null || _info$phoneNumberList === void 0 ? void 0 : _info$phoneNumberList.map(function (phoneNumber, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+          className: "connector-phone-call_info-item",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+            className: "connector-phone-call_info-label",
+            children: index === 0 ? transI18n('fmt_pstn_label_dial') : ''
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: ["+86 (", phoneNumber[0], ") ", phoneNumber.slice(1)]
+          })]
+        }, phoneNumber);
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+        className: "connector-phone-call_info-item",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          className: "connector-phone-call_info-label",
+          children: transI18n('fmt_pstn_label_meetingid')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: (info === null || info === void 0 ? void 0 : info.phoneRoomId) || '-'
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+        className: "connector-phone-call_info-item",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          className: "connector-phone-call_info-label",
+          children: transI18n('fmt_pstn_label_participantid')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          children: ["#", (info === null || info === void 0 ? void 0 : info.phoneUserId) || '-', "#"]
+        })]
+      })]
+    })
+  });
+}
+var _default = exports["default"] = ConnectionInfo;

package/lib/modules/connection-gateway/components/phone/components/calling/index.css

@@ -0,0 +1,72 @@
+.connector-phone-connecting {
+  width: 305px;
+  height: 100px;
+  border-radius: var(--fcr_cornerradius_xl);
+  background: var(--fcr_ui_scene_ramp_green1);
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  flex-shrink: 0;
+}
+.connector-phone-connecting_icon {
+  margin: 13px;
+  width: 84px;
+  height: 84px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.connector-phone-connecting_icon-calling {
+  width: 50px;
+  height: 50px;
+  background: var(--fcr_ui_scene_ramp_lightgreen6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+}
+.connector-phone-connecting_content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+.connector-phone-connecting_region {
+  color: var(--fcr_ui_scene_icontext2);
+  font-size: 12px;
+  text-align: left;
+  display: block;
+  width: 129px;
+}
+.connector-phone-connecting_number {
+  font-size: 20px;
+  color: var(--fcr_ui_scene_icontext1);
+  font-weight: 900;
+  line-height: 1;
+}
+.connector-phone-connecting_action {
+  background: var(--fcr_ui_scene_ramp_green1);
+  color: var(--fcr_ui_scene_ramp_green6);
+  border-radius: var(--fcr_cornerradius_l);
+  font-size: 12px;
+  height: 22px;
+  line-height: 22px;
+  padding: 0 10px;
+  margin: 10px 0 10px;
+}
+.connector-phone-connecting.failure {
+  background: var(--fcr_ui_scene_ramp_red1);
+}
+.connector-phone-connecting.failure .connector-phone-connecting_action {
+  color: var(--fcr_ui_scene_ramp_red6);
+  background: var(--fcr_ui_scene_ramp_red1);
+}
+.connector-phone-connecting.failure .connector-phone-connecting_icon-failure {
+  background: var(--fcr_ui_scene_ramp_red6);
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/lib/modules/connection-gateway/components/phone/components/calling/index.d.ts

@@ -0,0 +1,7 @@
+import './index.css';
+export declare const CallingPhone: (props: {
+    failure: boolean;
+    number: string;
+    region?: string;
+    reason?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/connection-gateway/components/phone/components/calling/index.js

@@ -0,0 +1,58 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CallingPhone = void 0;
+var _actionPhone = require("agora-ui-foundation/lib/components/action-phone");
+require("./index.css");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _jsxRuntime = require("react/jsx-runtime");
+var CallingPhone = exports.CallingPhone = function CallingPhone(props) {
+  var failure = props.failure,
+    number = props.number,
+    region = props.region,
+    reason = props.reason;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "connector-phone-connecting ".concat(failure ? 'failure' : ''),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "connector-phone-connecting_icon",
+      children: failure ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "connector-phone-connecting_icon-failure",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_PHONECALL3,
+          size: 32,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_white10)'
+          }
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_actionPhone.FcrActionPhone, {
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "connector-phone-connecting_icon-calling",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_PHONECALL3,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_white10)'
+            },
+            size: 32
+          })
+        }),
+        size: "medium"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "connector-phone-connecting_content",
+      children: [region && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "connector-phone-connecting_region",
+        children: region || '+86'
+      }), number && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "connector-phone-connecting_number",
+        children: number || '-'
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "connector-phone-connecting_action",
+        children: reason
+      })]
+    })]
+  });
+};

package/lib/modules/connection-gateway/components/phone/components/remeber/index.css

@@ -0,0 +1,10 @@
+.connector-phone_remember {
+  display: flex;
+  font-size: 12px;
+  align-items: center;
+  margin-bottom: 16px;
+  color: var(--fcr_ui_scene_icontext1);
+}
+.connector-phone_remember .fcr-checkbox {
+  margin-right: 4px;
+}

package/lib/modules/connection-gateway/components/phone/components/remeber/index.d.ts

@@ -0,0 +1,5 @@
+import './index.css';
+export declare const ConnectionRemember: (props: {
+    checked: boolean;
+    onChange: (state: boolean) => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/connection-gateway/components/phone/components/remeber/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ConnectionRemember = void 0;
+var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
+require("./index.css");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var ConnectionRemember = exports.ConnectionRemember = function ConnectionRemember(props) {
+  var checked = props.checked,
+    onChange = props.onChange;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+    className: "connector-phone_remember",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: checked,
+      onChange: onChange
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: (0, _i18n.transI18n)('fmt_pstn_options_rememberphone')
+    })]
+  });
+};

package/lib/modules/connection-gateway/components/phone/components/useing/index.css

@@ -0,0 +1,46 @@
+.connector-phone-using {
+  width: 376px;
+  height: 128px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--fcr_ui_scene_ramp_green1);
+  border-radius: var(--fcr_cornerradius_l);
+  flex-direction: column;
+  margin-bottom: 20px;
+  margin-top: 11px;
+  flex-shrink: 0;
+}
+.connector-phone-using.outgoing-call {
+  width: 300px;
+  height: 100px;
+}
+.connector-phone-using_number {
+  color: var(--fcr_ui_scene_ramp_green6);
+  font-size: 20px;
+  font-weight: 900;
+  line-height: 1;
+  margin-bottom: 10px;
+}
+.connector-phone-using_icon-dot {
+  background: var(--fcr_ui_scene_white10);
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 5px;
+  border-radius: 50%;
+}
+.connector-phone-using_number sub.connector-phone-using_region {
+  font-size: 12px;
+  color: var(--fcr_ui_scene_icontext3);
+  font-weight: 500;
+  margin-right: 6px;
+  vertical-align: middle;
+  bottom: inherit;
+}
+.connector-phone-using_button {
+  background: var(--fcr_ui_scene_ramp_green6);
+}
+.connector-phone-using .connector-phone_remember {
+  margin: 0;
+}

package/lib/modules/connection-gateway/components/phone/components/useing/index.d.ts

@@ -0,0 +1,3 @@
+import './index.css';
+import { FC, PropsWithChildren } from 'react';
+export declare const ConnectionUsing: FC<PropsWithChildren<{}>>;

package/lib/modules/connection-gateway/components/phone/components/useing/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ConnectionUsing = void 0;
+var _button = require("agora-ui-foundation/lib/components/button");
+require("./index.css");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _store = require("../../../../store");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var ConnectionUsing = exports.ConnectionUsing = (0, _mobxReact.observer)(function (_ref) {
+  var children = _ref.children;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    connectSession = _useContext.connectSession,
+    outgoingCall = _useContext.outgoingCall;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "connector-phone-using ".concat(outgoingCall ? 'outgoing-call' : ''),
+    children: [outgoingCall && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "connector-phone-using_number",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("sub", {
+        className: "connector-phone-using_region",
+        children: "+86"
+      }), connectSession === null || connectSession === void 0 ? void 0 : connectSession.phoneNumber]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.FcrButton, {
+      size: "XXS",
+      className: "connector-phone-using_button",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "connector-phone-using_icon-dot"
+      }), (0, _i18n.transI18n)('fmt_pstn_label_viaphone')]
+    }), children]
+  });
+});

package/lib/modules/connection-gateway/components/phone/index.css

@@ -0,0 +1,49 @@
+.connector-phone {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.connector-phone_inner {
+  display: flex;
+  flex-direction: column;
+  width: 260px;
+  align-items: center;
+}
+.connector-phone_selector {
+  margin-bottom: 20px;
+  height: 32px;
+  margin-top: 21px;
+  width: 100%;
+}
+.connector-phone_selector_errmsg {
+  color: var(--fcr_ui_scene_ramp_red6);
+  font-size: 12px;
+  text-align: right;
+}
+.connector-phone_selector .fcr-select {
+  margin-bottom: 20px;
+  border-color: var(--fcr_web_ui_scene_line4);
+  width: 260px;
+  background-color: var(--fcr_ui_scene_input2);
+}
+.connector-phone_callme-button {
+  background: var(--fcr_ui_scene_ramp_green6);
+  margin-bottom: 20px;
+}
+.connector-phone_hangup-button {
+  margin-bottom: 20px;
+}
+.connector-phone-alert {
+  background: var(--fcr_ui_scene_ramp_green1);
+  color: var(--fcr_ui_scene_ramp_green6);
+  border-radius: var(--fcr_cornerradius_l);
+  min-height: 40px;
+  line-height: 1.5;
+  width: 376px;
+  font-size: 13px;
+  text-align: center;
+  margin-bottom: 10px;
+  padding: 10px;
+}

package/lib/modules/connection-gateway/components/phone/index.d.ts

@@ -0,0 +1,3 @@
+import './index.css';
+declare const ConnectFromPhone: () => import("react/jsx-runtime").JSX.Element;
+export default ConnectFromPhone;