cobrowse-agent-ui 1.0.0 → 1.1.1

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.1.1](https://github.com/cobrowseio/cobrowse-agent-ui/compare/v1.1.0...v1.1.1) (2025-02-03)
+
+## [1.1.0](https://github.com/cobrowseio/cobrowse-agent-ui/compare/v1.0.0...v1.1.0) (2024-01-17)
+
+
+### Features
+
+* Update device status styles ([#15](https://github.com/cobrowseio/cobrowse-agent-ui/issues/15)) ([3dcac2c](https://github.com/cobrowseio/cobrowse-agent-ui/commit/3dcac2c270826fba6397d54649516455e6f12612))
+
+
+### Bug Fixes
+
+* default to English dates if no locale has been set previously ([#13](https://github.com/cobrowseio/cobrowse-agent-ui/issues/13)) ([4031c25](https://github.com/cobrowseio/cobrowse-agent-ui/commit/4031c25a5da4e4fb3a169ed6960c984e233e98f2))
+
 ## [1.0.0](https://github.com/cobrowseio/cobrowse-agent-ui/compare/v0.0.2...v1.0.0) (2023-03-15)
 
 ### 0.0.2 (2023-03-15)

package/README.md

@@ -36,4 +36,4 @@ To add a new locale follow these steps:
 - Add a new entry to the `SUPPORTED_LOCALES` constant inside `src/i18n.js`.
 
 **Note:** ensure the locale code matches the ones provided by the
-[moment library](https://github.com/moment/moment/tree/develop/locale) as these are used to localize dates as well.
+[date-fns library](https://github.com/date-fns/date-fns/tree/main/src/locale) as these are used to localize dates as well.

package/dist/CodeEntry.js

@@ -1,98 +1,52 @@
-"use strict";
-
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-require("./CodeEntry.css");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return generator._invoke = function (innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; }(innerFn, self, context), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; this._invoke = function (method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); }; } function maybeInvokeDelegate(delegate, context) { var method = delegate.iterator[context.method]; if (undefined === method) { if (context.delegate = null, "throw" === context.method) { if (delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel; context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method"); } return ContinueSentinel; } var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (object) { var keys = []; for (var key in object) { keys.push(key); } return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, catch: function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
-
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+import React, { Component } from 'react';
+import './CodeEntry.css';
 var CodeEntry = /*#__PURE__*/function (_Component) {
   _inherits(CodeEntry, _Component);
-
   var _super = _createSuper(CodeEntry);
-
   function CodeEntry() {
     var _this;
-
     _classCallCheck(this, CodeEntry);
-
     _this = _super.call(this);
-
     _defineProperty(_assertThisInitialized(_this), "getCode", function () {
       return _this.state.code.join('').substr(0, 6);
     });
-
     _defineProperty(_assertThisInitialized(_this), "setDigit", function (digit, value) {
       if (digit > 5) return;
       var code = _this.state.code;
       code[digit] = value;
-
       _this.setState({
         code: _toConsumableArray(code)
       });
-
       _this.tryComplete();
     });
-
     _defineProperty(_assertThisInitialized(_this), "focus", function () {
       _this.firstDigit.focus();
     });
-
     _defineProperty(_assertThisInitialized(_this), "isEditable", function () {
       return !_this.state.validating;
     });
-
     _defineProperty(_assertThisInitialized(_this), "tryComplete", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       var code;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
@@ -103,68 +57,51 @@ var CodeEntry = /*#__PURE__*/function (_Component) {
                 _context.next = 2;
                 break;
               }
-
               return _context.abrupt("return");
-
             case 2:
               code = _this.getCode();
-
               if (!(code.length !== 6)) {
                 _context.next = 5;
                 break;
               }
-
               return _context.abrupt("return");
-
             case 5:
               _this.setState({
                 validating: true
               });
-
               _context.prev = 6;
               _context.next = 9;
               return _this.props.onCode(code);
-
             case 9:
               if (!_context.sent) {
                 _context.next = 15;
                 break;
               }
-
               _this.setState({
                 validating: false
               });
-
               _this.setState({
                 code: ['', '', '', '', '', '']
               });
-
               if (_this.firstDigit) _this.firstDigit.focus();
               _context.next = 17;
               break;
-
             case 15:
               _this.setState({
                 validating: false
               });
-
               if (_this.lastDigit) _this.lastDigit.focus();
-
             case 17:
               _context.next = 24;
               break;
-
             case 19:
               _context.prev = 19;
               _context.t0 = _context["catch"](6);
-
               _this.setState({
                 validating: false
               });
-
               if (_this.lastDigit) _this.lastDigit.focus();
               throw _context.t0;
-
             case 24:
             case "end":
               return _context.stop();
@@ -172,7 +109,6 @@ var CodeEntry = /*#__PURE__*/function (_Component) {
         }
       }, _callee, null, [[6, 19]]);
     })));
-
     _defineProperty(_assertThisInitialized(_this), "handlePaste", function (event) {
       if (!_this.isEditable()) return false;
       var clipboardData = event.clipboardData || window.clipboardData;
@@ -183,58 +119,52 @@ var CodeEntry = /*#__PURE__*/function (_Component) {
       var target = event.target;
       digits.forEach(function (value) {
         _this.setDigit(digit, value);
-
         digit += 1;
         if (target) target = target.nextSibling;
       });
       if (target) target.focus();
       return event.preventDefault();
     });
-
     _defineProperty(_assertThisInitialized(_this), "handleOnChange", function (event) {
-      var value = event.target.value.substr(-1); // validate text on any change
-
+      var value = event.target.value.substr(-1);
+      // validate text on any change
       var digit = parseInt(event.target.getAttribute('data-digit'), 10);
-
       _this.setDigit(digit, value);
-
       if (!event.repeat && /[0-9]/.test(value)) {
         event.target.value = '';
         var nextSibling = event.target.nextSibling;
         if (nextSibling) nextSibling.focus();
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
       // on backspace on empty node go back to previous
       if (event.target.value.length === 0 && event.keyCode === 8) {
-        if (event.target.previousSibling) event.target.previousSibling.focus(); // left arrow moves to previous
+        if (event.target.previousSibling) event.target.previousSibling.focus();
+        // left arrow moves to previous
       } else if (event.keyCode === 37) {
         if (event.target.previousSibling) event.target.previousSibling.focus();
-        return event.preventDefault(); // right arrow moves to next
+        return event.preventDefault();
+        // right arrow moves to next
       } else if (event.keyCode === 39) {
         if (event.target.nextSibling) event.target.nextSibling.focus();
-        return event.preventDefault(); // prevent non-numeric characters that might appear in numbers (e.g 'e')
+        return event.preventDefault();
+        // prevent non-numeric characters that might appear in numbers (e.g 'e')
         // but allow backspaces too
       } else if (!event.metaKey && !event.ctrlKey && event.keyCode !== 8 && event.keyCode !== 9 && !/^[0-9]{1}$/.test(event.key)) {
         return event.preventDefault();
       }
-
       return null;
     });
-
     _this.state = {
       validating: false,
       code: ['', '', '', '', '', '']
     };
     return _this;
   }
-
   _createClass(CodeEntry, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var keyHandlers = {
         onKeyDown: this.handleKeyDown,
         onChange: this.handleOnChange,
@@ -242,11 +172,11 @@ var CodeEntry = /*#__PURE__*/function (_Component) {
         disabled: !this.isEditable()
       };
       var invalid = !this.state.validating && this.getCode().length === 6;
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         className: "CodeEntry"
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", {
         className: invalid ? 'invalid' : ''
-      }, /*#__PURE__*/_react.default.createElement("input", _extends({
+      }, /*#__PURE__*/React.createElement("input", _extends({
         className: "bordered",
         type: "number"
       }, keyHandlers, {
@@ -255,31 +185,31 @@ var CodeEntry = /*#__PURE__*/function (_Component) {
         ref: function ref(c) {
           _this2.firstDigit = c;
         }
-      })), /*#__PURE__*/_react.default.createElement("input", _extends({
+      })), /*#__PURE__*/React.createElement("input", _extends({
         className: "bordered",
         type: "number"
       }, keyHandlers, {
         value: this.state.code[1],
         "data-digit": 1
-      })), /*#__PURE__*/_react.default.createElement("input", _extends({
+      })), /*#__PURE__*/React.createElement("input", _extends({
         className: "bordered",
         type: "number"
       }, keyHandlers, {
         value: this.state.code[2],
         "data-digit": 2
-      })), /*#__PURE__*/_react.default.createElement("input", _extends({
+      })), /*#__PURE__*/React.createElement("input", _extends({
         className: "bordered",
         type: "number"
       }, keyHandlers, {
         value: this.state.code[3],
         "data-digit": 3
-      })), /*#__PURE__*/_react.default.createElement("input", _extends({
+      })), /*#__PURE__*/React.createElement("input", _extends({
         className: "bordered",
         type: "number"
       }, keyHandlers, {
         value: this.state.code[4],
         "data-digit": 4
-      })), /*#__PURE__*/_react.default.createElement("input", _extends({
+      })), /*#__PURE__*/React.createElement("input", _extends({
         className: "bordered",
         type: "number"
       }, keyHandlers, {
@@ -291,8 +221,6 @@ var CodeEntry = /*#__PURE__*/function (_Component) {
       }))));
     }
   }]);
-
   return CodeEntry;
-}(_react.Component);
-
-exports.default = CodeEntry;
+}(Component);
+export { CodeEntry as default };

package/dist/Device.css

@@ -4,10 +4,11 @@
     border-left: 5px solid transparent;
     display: flex;
     align-items: center;
+    position: relative;
 }
 
-.Device.online {
-    border-left: 5px solid #3cc56e;
+.Device.online .device-status {
+    outline: 2px solid #C7EA30;
 }
 
 .Device .last-seen {
@@ -17,12 +18,27 @@
     white-space: nowrap;
 }
 
+.Device .device-status {
+    height: 36px;
+    width: 36px;
+    padding: 4px;
+    outline: 2px solid rgb(4 13 60 / 0.25);
+    border-radius: 100%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 .Device .platform-icon {
-    font-size: 30px;
-    max-height: 30px;
-    margin: 0px 4px;
+    /*font-size: 24px;*/
+    /*max-height: 24px;*/
+    height: 100%;
+    width: auto;
     pointer-events: none;
-    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .Device .details {

package/dist/Device.js

@@ -1,44 +1,31 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Device;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _i18n = _interopRequireDefault(require("./i18n"));
-
-var _PlatformIcon = _interopRequireDefault(require("./PlatformIcon.js"));
-
-var _deviceType = _interopRequireDefault(require("./deviceType.js"));
-
-require("./Device.css");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function Device(props) {
+import React from 'react';
+import i18n from './i18n';
+import PlatformIcon from './PlatformIcon.js';
+import deviceType from './deviceType.js';
+import './Device.css';
+export default function Device(props) {
   function renderLastSeen() {
     if (props.device.online) {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         className: "last-seen"
-      }, _i18n.default.t('Online'));
+      }, i18n.t('Online'));
     } else {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         className: "last-seen"
-      }, _i18n.default.t('Last seen {{date, dateRelative}}', {
-        date: props.device.last_active
+      }, i18n.t('Last seen {{date, dateRelative}}', {
+        date: new Date(props.device.last_active)
       }));
     }
   }
-
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     style: props.style,
     className: "Device ".concat(props.device.online ? 'online' : '', " ").concat(props.device.connectable ? 'connectable' : '')
-  }, /*#__PURE__*/_react.default.createElement(_PlatformIcon.default, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "device-status"
+  }, /*#__PURE__*/React.createElement(PlatformIcon, {
     platform: props.device.device.platform,
     className: "platform-icon"
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "details"
-  }, (0, _deviceType.default)(props.device.device), renderLastSeen()), props.children);
+  }, deviceType(props.device.device), renderLastSeen()), props.children);
 }

package/dist/PlatformIcon.js

@@ -1,118 +1,92 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = PlatformIcon;
-
-var _react = _interopRequireDefault(require("react"));
-
-require("./PlatformIcon.css");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-var IconWeb = function IconWeb(props) {
-  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M534.75 49.965c-8.945-8.945-19.694-13.422-32.261-13.422H45.681c-12.562 0-23.313 4.477-32.264 13.422C4.471 58.913 0 69.663 0 82.226v310.633c0 12.566 4.471 23.315 13.417 32.265 8.951 8.945 19.702 13.414 32.264 13.414h155.318c0 7.231-1.524 14.661-4.57 22.269-3.044 7.614-6.09 14.273-9.136 19.981-3.042 5.715-4.565 9.897-4.565 12.56 0 4.948 1.807 9.24 5.424 12.847 3.615 3.621 7.898 5.435 12.847 5.435h146.179c4.949 0 9.233-1.813 12.848-5.435 3.62-3.606 5.427-7.898 5.427-12.847 0-2.468-1.526-6.611-4.571-12.415-3.046-5.801-6.092-12.566-9.134-20.267-3.046-7.71-4.569-15.085-4.569-22.128h155.318c12.56 0 23.309-4.469 32.254-13.414 8.949-8.949 13.422-19.698 13.422-32.265V82.226c.003-12.563-4.474-23.313-13.423-32.261zm-23.123 269.803c0 2.475-.903 4.613-2.711 6.424-1.81 1.804-3.952 2.707-6.427 2.707H45.681c-2.473 0-4.615-.903-6.423-2.707-1.807-1.817-2.712-3.949-2.712-6.424V82.226c0-2.475.902-4.615 2.712-6.423 1.809-1.805 3.951-2.712 6.423-2.712h456.815c2.471 0 4.617.904 6.42 2.712 1.808 1.809 2.711 3.949 2.711 6.423v237.542z"
+import React from 'react';
+var IconGlobe = function IconGlobe(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    d: "M14.917 14.492a1.672 1.672 0 0 0-1.584-1.159H12.5v-2.5a.833.833 0 0 0-.833-.833h-5V8.333h1.666a.833.833 0 0 0 .834-.833V5.833h1.666A1.667 1.667 0 0 0 12.5 4.167v-.342a6.654 6.654 0 0 1 2.417 10.667Zm-5.75 2.116A6.657 6.657 0 0 1 3.333 10c0-.517.067-1.017.175-1.492L7.5 12.5v.833A1.667 1.667 0 0 0 9.167 15M10 1.667a8.333 8.333 0 1 0 0 16.666 8.333 8.333 0 0 0 0-16.666Z",
+    fill: "currentColor"
   }));
 };
-
-IconWeb.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 548.172 548.172",
-  xmlSpace: "preserve"
+IconGlobe.defaultProps = {
+  viewBox: "0 0 20 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
 };
-
 var IconApple = function IconApple(props) {
-  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M40.738 112.119c-25.785 44.745-9.393 112.648 19.121 153.82C74.092 286.523 88.502 305 108.239 305c.372 0 .745-.007 1.127-.022 9.273-.37 15.974-3.225 22.453-5.984 7.274-3.1 14.797-6.305 26.597-6.305 11.226 0 18.39 3.101 25.318 6.099 6.828 2.954 13.861 6.01 24.253 5.815 22.232-.414 35.882-20.352 47.925-37.941 12.567-18.365 18.871-36.196 20.998-43.01l.086-.271a2.5 2.5 0 0 0-1.328-3.066c-.032-.015-.15-.064-.183-.078-3.915-1.601-38.257-16.836-38.618-58.36-.335-33.736 25.763-51.601 30.997-54.839l.244-.152a2.498 2.498 0 0 0 .71-3.511c-18.014-26.362-45.624-30.335-56.74-30.813a50.043 50.043 0 0 0-4.95-.242c-13.056 0-25.563 4.931-35.611 8.893-6.936 2.735-12.927 5.097-17.059 5.097-4.643 0-10.668-2.391-17.645-5.159-9.33-3.703-19.905-7.899-31.1-7.899-.267 0-.53.003-.789.008-26.03.383-50.626 15.275-64.186 38.859z"
-  }), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M212.101.002c-15.763.642-34.672 10.345-45.974 23.583-9.605 11.127-18.988 29.679-16.516 48.379a2.499 2.499 0 0 0 2.284 2.164c1.064.083 2.15.125 3.232.126 15.413 0 32.04-8.527 43.395-22.257 11.951-14.498 17.994-33.104 16.166-49.77a2.515 2.515 0 0 0-2.587-2.225z"
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    d: "M14.208 16.9c-.816.792-1.708.667-2.566.292-.909-.384-1.742-.4-2.7 0-1.2.516-1.834.366-2.55-.292-4.067-4.192-3.467-10.575 1.15-10.808 1.125.058 1.908.616 2.566.666.984-.2 1.925-.775 2.975-.7 1.259.1 2.209.6 2.834 1.5-2.6 1.559-1.984 4.984.4 5.942-.475 1.25-1.092 2.492-2.117 3.408l.008-.008ZM10.025 6.042C9.9 4.183 11.408 2.65 13.142 2.5c.241 2.15-1.95 3.75-3.117 3.542Z",
+    fill: "currentColor"
   }));
 };
-
 IconApple.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 305 305",
-  xmlSpace: "preserve"
+  viewBox: "0 0 20 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
 };
-
 var IconAndroid = function IconAndroid(props) {
-  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M76.774 179.141c-9.529 0-17.614 3.323-24.26 9.969-6.646 6.646-9.97 14.621-9.97 23.929v142.914c0 9.541 3.323 17.619 9.97 24.266 6.646 6.646 14.731 9.97 24.26 9.97 9.522 0 17.558-3.323 24.101-9.97 6.53-6.646 9.804-14.725 9.804-24.266V213.039c0-9.309-3.323-17.283-9.97-23.929-6.647-6.646-14.627-9.969-23.935-9.969zM351.972 50.847 375.57 7.315c1.549-2.882.998-5.092-1.658-6.646-2.883-1.34-5.098-.661-6.646 1.989l-23.928 43.88c-21.055-9.309-43.324-13.972-66.807-13.972-23.488 0-45.759 4.664-66.806 13.972l-23.929-43.88c-1.555-2.65-3.77-3.323-6.646-1.989-2.662 1.561-3.213 3.764-1.658 6.646l23.599 43.532c-23.929 12.203-42.987 29.198-57.167 51.022-14.18 21.836-21.273 45.698-21.273 71.628h307.426c0-25.924-7.094-49.787-21.273-71.628-14.181-21.824-33.129-38.819-56.832-51.022zm-136.433 63.318c-2.552 2.558-5.6 3.831-9.143 3.831-3.55 0-6.536-1.273-8.972-3.831-2.436-2.546-3.654-5.582-3.654-9.137 0-3.543 1.218-6.585 3.654-9.137 2.436-2.546 5.429-3.819 8.972-3.819s6.591 1.273 9.143 3.819c2.546 2.558 3.825 5.594 3.825 9.137-.007 3.549-1.285 6.591-3.825 9.137zm140.086 0c-2.441 2.558-5.434 3.831-8.971 3.831-3.551 0-6.598-1.273-9.145-3.831-2.551-2.546-3.824-5.582-3.824-9.137 0-3.543 1.273-6.585 3.824-9.137 2.547-2.546 5.594-3.819 9.145-3.819 3.543 0 6.529 1.273 8.971 3.819 2.438 2.558 3.654 5.594 3.654 9.137 0 3.549-1.217 6.591-3.654 9.137zM123.971 406.804c0 10.202 3.543 18.838 10.63 25.925 7.093 7.087 15.729 10.63 25.924 10.63h24.596l.337 75.454c0 9.528 3.323 17.619 9.969 24.266s14.627 9.97 23.929 9.97c9.523 0 17.613-3.323 24.26-9.97s9.97-14.737 9.97-24.266v-75.447h45.864v75.447c0 9.528 3.322 17.619 9.969 24.266s14.73 9.97 24.26 9.97c9.523 0 17.613-3.323 24.26-9.97s9.969-14.737 9.969-24.266v-75.447h24.928c9.969 0 18.494-3.544 25.594-10.631 7.086-7.087 10.631-15.723 10.631-25.924V185.45h-305.09v221.354zM476.275 179.141c-9.309 0-17.283 3.274-23.93 9.804-6.646 6.542-9.969 14.578-9.969 24.094v142.914c0 9.541 3.322 17.619 9.969 24.266s14.627 9.97 23.93 9.97c9.523 0 17.613-3.323 24.26-9.97s9.969-14.725 9.969-24.266V213.039c0-9.517-3.322-17.552-9.969-24.094-6.647-6.53-14.737-9.804-24.26-9.804z"
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    d: "M.833 15a9.03 9.03 0 0 1 1.365-4.104 8.67 8.67 0 0 1 3.135-2.98L3.792 5.25a.45.45 0 0 1-.063-.396.501.501 0 0 1 .27-.312.439.439 0 0 1 .376-.042c.139.042.25.125.333.25L6.25 7.417a9.616 9.616 0 0 1 3.75-.75c1.306 0 2.556.25 3.75.75l1.542-2.667a.597.597 0 0 1 .333-.25.439.439 0 0 1 .375.042c.139.07.23.173.27.312a.45.45 0 0 1-.062.396l-1.541 2.667a8.661 8.661 0 0 1 3.135 2.979A9.044 9.044 0 0 1 19.167 15H.833Zm5-2.292c.292 0 .539-.1.74-.302.202-.202.302-.448.302-.74 0-.291-.1-.538-.303-.74a1.002 1.002 0 0 0-.739-.301c-.291 0-.538.1-.74.303a1.003 1.003 0 0 0-.301.739c0 .291.1.538.302.74.202.201.448.302.74.301Zm8.334 0c.291 0 .538-.1.74-.302.201-.202.302-.448.301-.74 0-.291-.1-.538-.302-.74a1.003 1.003 0 0 0-.74-.301c-.291 0-.538.1-.74.303a1.003 1.003 0 0 0-.301.739c0 .291.1.538.302.74.202.201.449.302.74.301Z",
+    fill: "currentColor"
   }));
 };
-
 IconAndroid.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 553.048 553.048",
-  xmlSpace: "preserve"
+  viewBox: "0 0 20 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
 };
-
 var IconWindows = function IconWindows(props) {
-  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M0 80v160h224V52zM256 48v192h256V16zM256 272v192l256 32V272zM0 272v160l224 28V272z"
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    d: "M5.216 8.219 16.28 6.695v10.69H5.214V8.22l.002-.002Zm0 19.563 11.065 1.525v-10.56H5.214l.002 9.035Zm12.282 1.687L32.216 31.5V18.747H17.498v10.722Zm0-22.938v10.854h14.718V4.5L17.498 6.531Z",
+    fill: "currentColor"
   }));
 };
-
 IconWindows.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 512 512",
-  xmlSpace: "preserve"
+  viewBox: "0 0 37 36",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
 };
-
 var IconDefault = function IconDefault(props) {
-  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
     style: {
       fill: "#020202"
     },
     d: "M206.759 332.99H39.225c-3.894 0-7.065-3.173-7.065-7.067V53.353c0-3.893 3.172-7.065 7.065-7.065h401.631c3.895 0 7.065 3.172 7.065 7.065v59.696c11.763 1.389 22.785 5.244 32.159 11.581V53.353c0-21.63-17.602-39.225-39.225-39.225H39.225C17.602 14.128 0 31.722 0 53.353v272.569c0 21.631 17.602 39.227 39.225 39.227h134.62v52.581h-21.229c-13.316 0-24.12 10.796-24.12 24.12 0 13.324 10.804 24.12 24.12 24.12h67.71c-8.463-11.902-13.566-26.35-13.566-42.037V332.99z"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     style: {
       fill: "#020202"
     },
     d: "M341.739 441.645v-34.742h-70.662V184.999c0-4.681 3.8-8.489 8.479-8.489h159.887c4.679 0 8.478 3.808 8.478 8.489v68.676h12.046c7.364 0 14.179 2.127 20.113 5.597v-74.273c0-22.417-18.23-40.648-40.638-40.648H279.556c-22.407 0-40.638 18.231-40.638 40.648v238.933c0 22.417 18.23 40.647 40.638 40.647h69.438c-4.428-6.359-7.255-15.22-7.255-22.934z"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     style: {
       fill: "#020202"
     },
     d: "M459.967 273.775h-77.996c-11.104 0-20.132 9.037-20.132 20.138v147.732c0 11.101 9.028 20.131 20.132 20.131h77.996c11.102 0 20.13-9.03 20.13-20.131V293.912c0-11.101-9.029-20.137-20.13-20.137zm-74.009 24.119h70.019v127.703h-70.019V297.894zm35.019 154.099c-2.215 0-4.193-.896-5.7-2.277-1.713-1.555-2.812-3.739-2.812-6.228 0-4.694 3.801-8.495 8.512-8.495 4.679 0 8.479 3.801 8.479 8.495 0 2.489-1.1 4.672-2.795 6.228-1.509 1.382-3.487 2.277-5.684 2.277z"
   }));
 };
-
 IconDefault.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 480.097 480.097",
   xmlSpace: "preserve"
 };
-
+import './PlatformIcon.css';
 function icon(platform) {
   switch (platform) {
     case 'web':
-      return IconWeb;
-
+      return IconGlobe;
     case 'ios':
       return IconApple;
-
     case 'macos':
       return IconApple;
-
     case 'android':
       return IconAndroid;
-
     case 'windows':
       return IconWindows;
-
     default:
       return IconDefault;
   }
 }
-
-function PlatformIcon(props) {
+export default function PlatformIcon(props) {
   var Icon = icon(props.platform);
-  return /*#__PURE__*/_react.default.createElement(Icon, _extends({
+  return /*#__PURE__*/React.createElement(Icon, _extends({
     fill: "currentColor"
   }, props, {
     className: "PlatformIcon ".concat(props.className || '')

package/dist/Session.js

@@ -1,55 +1,39 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Session;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _deviceType = _interopRequireDefault(require("./deviceType.js"));
-
-var _Stopwatch = _interopRequireDefault(require("./Stopwatch.js"));
-
-var _i18n = _interopRequireDefault(require("./i18n"));
-
-var _reactI18next = require("react-i18next");
-
-require("./Session.css");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function Session(props) {
+import React from 'react';
+import deviceType from './deviceType.js';
+import Stopwatch from './Stopwatch.js';
+import i18n from './i18n';
+import { Trans } from 'react-i18next';
+import './Session.css';
+export default function Session(props) {
   function openRecording() {
     if (props.openRecording) props.openRecording(props.session);
   }
-
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     style: props.style,
     onClick: props.onClick,
     className: "Session ".concat(props.className || '')
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "details"
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactI18next.Trans, {
-    i18n: _i18n.default
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Trans, {
+    i18n: i18n
+  }, /*#__PURE__*/React.createElement("span", {
     className: "device-prefix"
   }, "Connected to "), {
-    deviceType: (0, _deviceType.default)(props.session.device)
-  })), /*#__PURE__*/_react.default.createElement("div", {
+    deviceType: deviceType(props.session.device)
+  })), /*#__PURE__*/React.createElement("div", {
     className: "subdetails"
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "activated"
-  }, _i18n.default.t('{{date, dateRelative}}', {
-    date: props.session.activated
-  })), props.session.state === 'ended' && props.session.recorded ? /*#__PURE__*/_react.default.createElement("div", {
+  }, i18n.t('{{date, dateRelative}}', {
+    date: new Date(props.session.activated)
+  })), props.session.state === 'ended' && props.session.recorded ? /*#__PURE__*/React.createElement("div", {
     className: "recorded",
     onClick: openRecording
-  }, _i18n.default.t('Recorded')) : null)), props.session.state === 'ended' ? /*#__PURE__*/_react.default.createElement(_Stopwatch.default, {
+  }, i18n.t('Recorded')) : null)), props.session.state === 'ended' ? /*#__PURE__*/React.createElement(Stopwatch, {
     className: "duration",
-    start: props.session.activated,
-    end: props.session.ended || new Date()
-  }) : /*#__PURE__*/_react.default.createElement("div", {
+    start: new Date(props.session.activated),
+    end: new Date(props.session.ended || Date.now())
+  }) : /*#__PURE__*/React.createElement("div", {
     className: "active"
-  }, _i18n.default.t('Active')), props.children);
+  }, i18n.t('Active')), props.children);
 }

package/dist/SmartConnectButton.css

@@ -2,19 +2,18 @@
 .SmartConnectButton {
     margin: 3px;
     display: inline-block;
-    border: 1px solid #ddd;
-    background: #f3f3f3;
-    padding: 7px 14px;
+    background: #F6F4F8;
+    padding: 12px 16px;
     cursor: not-allowed;
-    border-radius: 100px;
+    border-radius: 4px;
     font-weight: 600;
-    color: #aaa;
-    font-size: 0.9em;
+    font-size: 1rem;
+    opacity: 0.6;
 }
 
 .SmartConnectButton.connectable {
-    border: 1px solid #3cc56e;
-    background: #3cc56e;
-    color: white;
+    background: #040D3C;
+    color: #ffffff;
     cursor: pointer;
+    opacity: 1;
 }

package/dist/SmartConnectButton.js

@@ -1,22 +1,10 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = SmartConnectButton;
-
-var _react = _interopRequireDefault(require("react"));
-
-require("./SmartConnectButton.css");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function SmartConnectButton(props) {
+import React from 'react';
+import './SmartConnectButton.css';
+export default function SmartConnectButton(props) {
   function onClick() {
     if (props.device.connectable && props.onClick) props.onClick(props.device);
   }
-
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "SmartConnectButton ".concat(props.device.online ? 'online' : '', " ").concat(props.device.connectable ? 'connectable' : ''),
     onClick: onClick
   }, props.label || 'Connect');

package/dist/Stopwatch.js

@@ -1,25 +1,15 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Stopwatch;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _moment = _interopRequireDefault(require("moment"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function Stopwatch(props) {
-  var start = (0, _moment.default)(props.start || 0);
-  var end = (0, _moment.default)(props.end || Date.now());
-  var ms = (0, _moment.default)(end).diff(start);
-
-  var delta = _moment.default.duration(ms);
-
-  return /*#__PURE__*/_react.default.createElement("div", {
+import React from 'react';
+import { differenceInMilliseconds, intervalToDuration, format } from 'date-fns';
+export default function Stopwatch(props) {
+  var start = props.start || new Date(0);
+  var end = props.end || new Date();
+  var ms = differenceInMilliseconds(end, start);
+  var duration = intervalToDuration({
+    start: start,
+    end: end
+  });
+  return /*#__PURE__*/React.createElement("div", {
     style: props.style,
     className: "Stopwatch ".concat(props.className || '')
-  }, delta.hours() > 0 ? /*#__PURE__*/_react.default.createElement("span", null, delta.hours(), /*#__PURE__*/_react.default.createElement("span", null, ":")) : null, /*#__PURE__*/_react.default.createElement("span", null, _moment.default.utc(ms).format('mm:ss')));
+  }, duration.hours > 0 ? /*#__PURE__*/React.createElement("span", null, duration.hours, /*#__PURE__*/React.createElement("span", null, ":")) : null, /*#__PURE__*/React.createElement("span", null, format(new Date(ms), 'mm:ss')));
 }

package/dist/UserIcon.js

@@ -1,17 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = UserIcon;
-
-var _react = _interopRequireDefault(require("react"));
-
-require("./UserIcon.css");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function UserIcon(props) {
+import React from 'react';
+import './UserIcon.css';
+export default function UserIcon(props) {
   function initials() {
     if (!props.user) return '';
     if (!props.user.name) return '';
@@ -20,14 +9,13 @@ function UserIcon(props) {
       return i.toUpperCase().charAt(0);
     }).join('').substr(0, 2);
   }
-
   if (!props.user) return null;
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "UserIcon ".concat(props.className || ''),
     title: props.user.name || null,
     style: {
       backgroundImage: props.user.picture ? "url(".concat(props.user.picture || '', ")") : undefined,
       backgroundColor: props.user.colour
     }
-  }, /*#__PURE__*/_react.default.createElement("span", null, initials()));
+  }, /*#__PURE__*/React.createElement("span", null, initials()));
 }

package/dist/deviceType.js

@@ -1,48 +1,30 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = deviceType;
-
-var _uaParserJs = _interopRequireDefault(require("ua-parser-js"));
-
-var _i18n = _interopRequireDefault(require("./i18n"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function deviceType(_ref) {
+import parser from 'ua-parser-js';
+import i18n from './i18n';
+export default function deviceType(_ref) {
   var platform = _ref.platform,
-      device = _ref.device;
-
+    device = _ref.device;
   var translateDevice = function translateDevice(device) {
-    return _i18n.default.t('{{device}} Device', {
+    return i18n.t('{{device}} Device', {
       device: device
     });
   };
-
   switch (platform) {
     case 'web':
       {
-        var ua = (0, _uaParserJs.default)(device);
-        return _i18n.default.t('{{browser}} on {{os}}', {
+        var ua = parser(device);
+        return i18n.t('{{browser}} on {{os}}', {
           browser: ua.browser.name,
           os: ua.os.name
         });
       }
-
     case 'ios':
       return translateDevice('iOS');
-
     case 'android':
       return translateDevice('Android');
-
     case 'windows':
       return translateDevice('Windows');
-
     case 'macos':
-      return translateDevice('Mac OS');
-
+      return translateDevice('macOS');
     default:
       return platform;
   }

package/dist/i18n.js

@@ -1,67 +1,42 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _i18next = require("i18next");
-
-var _reactI18next = require("react-i18next");
-
-var _moment = _interopRequireDefault(require("moment"));
-
-require("moment/locale/es");
-
-require("moment/locale/fr");
-
-var _translation = _interopRequireDefault(require("./locales/en-us/translation.json"));
-
-var _translation2 = _interopRequireDefault(require("./locales/es/translation.json"));
-
-var _translation3 = _interopRequireDefault(require("./locales/fr/translation.json"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+var _dateLocales;
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+import { createInstance } from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { formatDistanceToNow } from 'date-fns';
+import { enUS, es, fr } from 'date-fns/locale';
+import localeEnUS from './locales/en-us/translation.json';
+import localeEs from './locales/es/translation.json';
+import localeFr from './locales/fr/translation.json';
 var englishUS = 'en-us';
-var spanish = 'es';
-var french = 'fr';
-var SUPPORTED_LOCALES = [englishUS, spanish, french];
-var i18n = (0, _i18next.createInstance)({
+var dateLocales = (_dateLocales = {}, _defineProperty(_dateLocales, englishUS, enUS), _defineProperty(_dateLocales, "es", es), _defineProperty(_dateLocales, "fr", fr), _dateLocales);
+var i18n = createInstance({
   fallbackLng: englishUS,
   debug: process.env.NODE_ENV === 'development',
   lowerCaseLng: true,
   interpolation: {
     escapeValue: false,
     // not needed for react as it escapes by default
-    format: function format(value, _format) {
-      if (_format === 'dateRelative' && (0, _moment.default)(value).isValid()) {
-        return (0, _moment.default)(value).fromNow();
+    format: function format(value, _format, lng) {
+      if (_format === 'dateRelative' && value instanceof Date) {
+        var locale = dateLocales[lng] || enUS;
+        return formatDistanceToNow(value, {
+          addSuffix: true,
+          locale: locale
+        });
       }
     }
   },
   resources: {
     'en-us': {
-      translation: _translation.default
+      translation: localeEnUS
     },
     es: {
-      translation: _translation2.default
+      translation: localeEs
     },
     fr: {
-      translation: _translation3.default
+      translation: localeFr
     }
   }
 });
-i18n.use(_reactI18next.initReactI18next).init();
-i18n.on('languageChanged', function (language) {
-  // Fall back to US English if we don't currently support the selected language
-  if (SUPPORTED_LOCALES.indexOf(language) === -1) {
-    _moment.default.locale(englishUS);
-
-    return;
-  }
-
-  _moment.default.locale(language);
-});
-var _default = i18n;
-exports.default = _default;
+i18n.use(initReactI18next).init();
+export default i18n;

package/dist/index.js

@@ -1,55 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "CodeEntry", {
-  enumerable: true,
-  get: function get() {
-    return _CodeEntry.default;
-  }
-});
-Object.defineProperty(exports, "Device", {
-  enumerable: true,
-  get: function get() {
-    return _Device.default;
-  }
-});
-Object.defineProperty(exports, "PlatformIcon", {
-  enumerable: true,
-  get: function get() {
-    return _PlatformIcon.default;
-  }
-});
-Object.defineProperty(exports, "Session", {
-  enumerable: true,
-  get: function get() {
-    return _Session.default;
-  }
-});
-Object.defineProperty(exports, "SmartConnectButton", {
-  enumerable: true,
-  get: function get() {
-    return _SmartConnectButton.default;
-  }
-});
-Object.defineProperty(exports, "i18n", {
-  enumerable: true,
-  get: function get() {
-    return _i18n.default;
-  }
-});
-
-var _CodeEntry = _interopRequireDefault(require("./CodeEntry"));
-
-var _PlatformIcon = _interopRequireDefault(require("./PlatformIcon"));
-
-var _Device = _interopRequireDefault(require("./Device"));
-
-var _Session = _interopRequireDefault(require("./Session"));
-
-var _SmartConnectButton = _interopRequireDefault(require("./SmartConnectButton"));
-
-var _i18n = _interopRequireDefault(require("./i18n"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import CodeEntry from './CodeEntry';
+import PlatformIcon from './PlatformIcon';
+import Device from './Device';
+import Session from './Session';
+import SmartConnectButton from './SmartConnectButton';
+import i18n from './i18n';
+export { CodeEntry, PlatformIcon, Device, SmartConnectButton, Session, i18n };

package/i18next-parser.config.js

@@ -2,7 +2,9 @@ module.exports = {
   locales: ['en-us', 'es', 'fr'],
   namespaceSeparator: false,
   keySeparator: false,
-  useKeysAsDefaultValue: true,
+  defaultValue: function (locale, namespace, key, value) {
+    return key
+  },
   verbose: true,
   output: 'src/locales/$LOCALE/$NAMESPACE.json',
   lexers: {

package/icons/android.svg

@@ -1,32 +1,3 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 553.048 553.048" xml:space="preserve">
-<g>
-	<g>
-		<path d="M76.774,179.141c-9.529,0-17.614,3.323-24.26,9.969c-6.646,6.646-9.97,14.621-9.97,23.929v142.914
-			c0,9.541,3.323,17.619,9.97,24.266c6.646,6.646,14.731,9.97,24.26,9.97c9.522,0,17.558-3.323,24.101-9.97
-			c6.53-6.646,9.804-14.725,9.804-24.266V213.039c0-9.309-3.323-17.283-9.97-23.929C94.062,182.464,86.082,179.141,76.774,179.141z"
-			/>
-		<path d="M351.972,50.847L375.57,7.315c1.549-2.882,0.998-5.092-1.658-6.646c-2.883-1.34-5.098-0.661-6.646,1.989l-23.928,43.88
-			c-21.055-9.309-43.324-13.972-66.807-13.972c-23.488,0-45.759,4.664-66.806,13.972l-23.929-43.88
-			c-1.555-2.65-3.77-3.323-6.646-1.989c-2.662,1.561-3.213,3.764-1.658,6.646l23.599,43.532
-			c-23.929,12.203-42.987,29.198-57.167,51.022c-14.18,21.836-21.273,45.698-21.273,71.628h307.426
-			c0-25.924-7.094-49.787-21.273-71.628C394.623,80.045,375.675,63.05,351.972,50.847z M215.539,114.165
-			c-2.552,2.558-5.6,3.831-9.143,3.831c-3.55,0-6.536-1.273-8.972-3.831c-2.436-2.546-3.654-5.582-3.654-9.137
-			c0-3.543,1.218-6.585,3.654-9.137c2.436-2.546,5.429-3.819,8.972-3.819s6.591,1.273,9.143,3.819
-			c2.546,2.558,3.825,5.594,3.825,9.137C219.357,108.577,218.079,111.619,215.539,114.165z M355.625,114.165
-			c-2.441,2.558-5.434,3.831-8.971,3.831c-3.551,0-6.598-1.273-9.145-3.831c-2.551-2.546-3.824-5.582-3.824-9.137
-			c0-3.543,1.273-6.585,3.824-9.137c2.547-2.546,5.594-3.819,9.145-3.819c3.543,0,6.529,1.273,8.971,3.819
-			c2.438,2.558,3.654,5.594,3.654,9.137C359.279,108.577,358.062,111.619,355.625,114.165z"/>
-		<path d="M123.971,406.804c0,10.202,3.543,18.838,10.63,25.925c7.093,7.087,15.729,10.63,25.924,10.63h24.596l0.337,75.454
-			c0,9.528,3.323,17.619,9.969,24.266s14.627,9.97,23.929,9.97c9.523,0,17.613-3.323,24.26-9.97s9.97-14.737,9.97-24.266v-75.447
-			h45.864v75.447c0,9.528,3.322,17.619,9.969,24.266s14.73,9.97,24.26,9.97c9.523,0,17.613-3.323,24.26-9.97
-			s9.969-14.737,9.969-24.266v-75.447h24.928c9.969,0,18.494-3.544,25.594-10.631c7.086-7.087,10.631-15.723,10.631-25.924V185.45
-			H123.971V406.804z"/>
-		<path d="M476.275,179.141c-9.309,0-17.283,3.274-23.93,9.804c-6.646,6.542-9.969,14.578-9.969,24.094v142.914
-			c0,9.541,3.322,17.619,9.969,24.266s14.627,9.97,23.93,9.97c9.523,0,17.613-3.323,24.26-9.97s9.969-14.725,9.969-24.266V213.039
-			c0-9.517-3.322-17.552-9.969-24.094C493.888,182.415,485.798,179.141,476.275,179.141z"/>
-	</g>
-</g>
-</svg>
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.833252 15C0.958252 13.5139 1.41325 12.1458 2.19825 10.8958C2.98325 9.64583 4.02825 8.65278 5.33325 7.91667L3.79159 5.25C3.70825 5.125 3.68742 4.99306 3.72909 4.85417C3.77075 4.71528 3.86103 4.61111 3.99992 4.54167C4.11103 4.47222 4.23603 4.45833 4.37492 4.5C4.51381 4.54167 4.62492 4.625 4.70825 4.75L6.24992 7.41667C7.44436 6.91667 8.69436 6.66667 9.99992 6.66667C11.3055 6.66667 12.5555 6.91667 13.7499 7.41667L15.2916 4.75C15.3749 4.625 15.486 4.54167 15.6249 4.5C15.7638 4.45833 15.8888 4.47222 15.9999 4.54167C16.1388 4.61111 16.2291 4.71528 16.2708 4.85417C16.3124 4.99306 16.2916 5.125 16.2083 5.25L14.6666 7.91667C15.9721 8.65278 17.0171 9.64583 17.8016 10.8958C18.586 12.1458 19.041 13.5139 19.1666 15H0.833252ZM5.83325 12.7083C6.12492 12.7083 6.37159 12.6075 6.57325 12.4058C6.77492 12.2042 6.87547 11.9578 6.87492 11.6667C6.87492 11.375 6.77409 11.1283 6.57242 10.9267C6.37075 10.725 6.12436 10.6244 5.83325 10.625C5.54159 10.625 5.29492 10.7258 5.09325 10.9275C4.89159 11.1292 4.79103 11.3756 4.79159 11.6667C4.79159 11.9583 4.89242 12.205 5.09409 12.4067C5.29575 12.6083 5.54214 12.7089 5.83325 12.7083ZM14.1666 12.7083C14.4583 12.7083 14.7049 12.6075 14.9066 12.4058C15.1083 12.2042 15.2088 11.9578 15.2083 11.6667C15.2083 11.375 15.1074 11.1283 14.9058 10.9267C14.7041 10.725 14.4577 10.6244 14.1666 10.625C13.8749 10.625 13.6283 10.7258 13.4266 10.9275C13.2249 11.1292 13.1244 11.3756 13.1249 11.6667C13.1249 11.9583 13.2258 12.205 13.4274 12.4067C13.6291 12.6083 13.8755 12.7089 14.1666 12.7083Z" fill="currentColor"/>
+</svg>

package/icons/apple.svg

@@ -1,18 +1,3 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 305 305" xml:space="preserve">
-<g>
-	<path d="M40.738,112.119c-25.785,44.745-9.393,112.648,19.121,153.82C74.092,286.523,88.502,305,108.239,305
-		c0.372,0,0.745-0.007,1.127-0.022c9.273-0.37,15.974-3.225,22.453-5.984c7.274-3.1,14.797-6.305,26.597-6.305
-		c11.226,0,18.39,3.101,25.318,6.099c6.828,2.954,13.861,6.01,24.253,5.815c22.232-0.414,35.882-20.352,47.925-37.941
-		c12.567-18.365,18.871-36.196,20.998-43.01l0.086-0.271c0.405-1.211-0.167-2.533-1.328-3.066c-0.032-0.015-0.15-0.064-0.183-0.078
-		c-3.915-1.601-38.257-16.836-38.618-58.36c-0.335-33.736,25.763-51.601,30.997-54.839l0.244-0.152
-		c0.567-0.365,0.962-0.944,1.096-1.606c0.134-0.661-0.006-1.349-0.386-1.905c-18.014-26.362-45.624-30.335-56.74-30.813
-		c-1.613-0.161-3.278-0.242-4.95-0.242c-13.056,0-25.563,4.931-35.611,8.893c-6.936,2.735-12.927,5.097-17.059,5.097
-		c-4.643,0-10.668-2.391-17.645-5.159c-9.33-3.703-19.905-7.899-31.1-7.899c-0.267,0-0.53,0.003-0.789,0.008
-		C78.894,73.643,54.298,88.535,40.738,112.119z"/>
-	<path d="M212.101,0.002c-15.763,0.642-34.672,10.345-45.974,23.583c-9.605,11.127-18.988,29.679-16.516,48.379
-		c0.155,1.17,1.107,2.073,2.284,2.164c1.064,0.083,2.15,0.125,3.232,0.126c15.413,0,32.04-8.527,43.395-22.257
-		c11.951-14.498,17.994-33.104,16.166-49.77C214.544,0.921,213.395-0.049,212.101,0.002z"/>
-</g>
-</svg>
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.2084 16.9C13.3917 17.6917 12.5001 17.5667 11.6417 17.1917C10.7334 16.8083 9.90005 16.7917 8.94172 17.1917C7.74172 17.7083 7.10839 17.5583 6.39172 16.9C2.32506 12.7083 2.92506 6.325 7.54172 6.09167C8.66672 6.15 9.45006 6.70833 10.1084 6.75833C11.0917 6.55833 12.0334 5.98333 13.0834 6.05833C14.3417 6.15833 15.2917 6.65833 15.9167 7.55833C13.3167 9.11667 13.9334 12.5417 16.3167 13.5C15.8417 14.75 15.2251 15.9917 14.2001 16.9083L14.2084 16.9ZM10.0251 6.04167C9.90005 4.18333 11.4084 2.65 13.1417 2.5C13.3834 4.65 11.1917 6.25 10.0251 6.04167Z" fill="currentColor"/>
+</svg>

package/icons/globe.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.9167 14.4917C14.7001 13.8251 14.0751 13.3334 13.3334 13.3334H12.5001V10.8334C12.5001 10.6124 12.4123 10.4004 12.256 10.2442C12.0997 10.0879 11.8878 10.0001 11.6667 10.0001H6.66675V8.33341H8.33341C8.55443 8.33341 8.76639 8.24562 8.92267 8.08934C9.07895 7.93306 9.16675 7.7211 9.16675 7.50008V5.83341H10.8334C11.2754 5.83341 11.6994 5.65782 12.0119 5.34526C12.3245 5.0327 12.5001 4.60878 12.5001 4.16675V3.82508C13.4971 4.22705 14.382 4.86464 15.0788 5.68328C15.7756 6.50191 16.2637 7.4772 16.5012 8.52567C16.7387 9.57414 16.7187 10.6646 16.4427 11.7036C16.1668 12.7426 15.6432 13.6993 14.9167 14.4917ZM9.16675 16.6084C5.87508 16.2001 3.33341 13.4001 3.33341 10.0001C3.33341 9.48341 3.40008 8.98341 3.50841 8.50841L7.50008 12.5001V13.3334C7.50008 13.7754 7.67568 14.1994 7.98824 14.5119C8.3008 14.8245 8.72472 15.0001 9.16675 15.0001M10.0001 1.66675C8.90573 1.66675 7.8221 1.8823 6.81105 2.30109C5.80001 2.71987 4.88135 3.3337 4.10752 4.10752C2.54472 5.67033 1.66675 7.78994 1.66675 10.0001C1.66675 12.2102 2.54472 14.3298 4.10752 15.8926C4.88135 16.6665 5.80001 17.2803 6.81105 17.6991C7.8221 18.1179 8.90573 18.3334 10.0001 18.3334C12.2102 18.3334 14.3298 17.4554 15.8926 15.8926C17.4554 14.3298 18.3334 12.2102 18.3334 10.0001C18.3334 8.90573 18.1179 7.8221 17.6991 6.81105C17.2803 5.80001 16.6665 4.88135 15.8926 4.10752C15.1188 3.3337 14.2002 2.71987 13.1891 2.30109C12.1781 1.8823 11.0944 1.66675 10.0001 1.66675Z" fill="currentColor" />
+</svg>

package/icons/windows.svg

@@ -1,24 +1,5 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 512 512" xml:space="preserve">
-<g>
-	<g>
-		<polygon points="0,80 0,240 224,240 224,52"/>
-	</g>
-</g>
-<g>
-	<g>
-		<polygon points="256,48 256,240 512,240 512,16"/>
-	</g>
-</g>
-<g>
-	<g>
-		<polygon points="256,272 256,464 512,496 512,272"/>
-	</g>
-</g>
-<g>
-	<g>
-		<polygon points="0,272 0,432 224,460 224,272"/>
-	</g>
-</g>
-</svg>
+<svg viewBox="0 0 37 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Device Icon">
+<path id="Vector" d="M5.21561 8.2185L16.2811 6.6945V17.385H5.21411V8.22L5.21561 8.2185ZM5.21561 27.7815L16.2811 29.307V18.747H5.21411L5.21561 27.7815ZM17.4976 29.469L32.2156 31.5V18.747H17.4976V29.469ZM17.4976 6.531V17.385H32.2156V4.5L17.4976 6.531Z" fill="currentColor"/>
+</g>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cobrowse-agent-ui",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "scripts": {
     "start": "babel src --out-dir dist --watch --copy-files",
     "build": "rm -rf dist && babel src --out-dir dist --copy-files",
@@ -10,14 +10,14 @@
   },
   "main": "dist/index.js",
   "dependencies": {
-    "i18next": "^21.10.0",
-    "i18next-resources-to-backend": "^1.0.0",
-    "moment": "^2.29.4",
-    "react-i18next": "^11.18.6",
+    "date-fns": "^4.1.0",
+    "i18next": "^24.2.2",
+    "i18next-resources-to-backend": "^1.2.1",
+    "react-i18next": "^15.4.0",
     "ua-parser-js": "^1.0.33"
   },
   "peerDependencies": {
-    "react": "^18.2.0"
+    "react": "^19.0.0"
   },
   "browserslist": [
     ">0.2%",
@@ -34,7 +34,7 @@
     "babel-plugin-inline-react-svg": "^2.0.1",
     "eslint": "^8.23.1",
     "eslint-plugin-react": "^7.31.8",
-    "i18next-parser": "^6.5.0",
+    "i18next-parser": "^9.0.0",
     "standard": "^17.0.0"
   }
 }

package/icons/web.svg

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 548.172 548.172" xml:space="preserve">
-<g>
-	<path d="M534.75,49.965c-8.945-8.945-19.694-13.422-32.261-13.422H45.681c-12.562,0-23.313,4.477-32.264,13.422
-		C4.471,58.913,0,69.663,0,82.226v310.633c0,12.566,4.471,23.315,13.417,32.265c8.951,8.945,19.702,13.414,32.264,13.414h155.318
-		c0,7.231-1.524,14.661-4.57,22.269c-3.044,7.614-6.09,14.273-9.136,19.981c-3.042,5.715-4.565,9.897-4.565,12.56
-		c0,4.948,1.807,9.24,5.424,12.847c3.615,3.621,7.898,5.435,12.847,5.435h146.179c4.949,0,9.233-1.813,12.848-5.435
-		c3.62-3.606,5.427-7.898,5.427-12.847c0-2.468-1.526-6.611-4.571-12.415c-3.046-5.801-6.092-12.566-9.134-20.267
-		c-3.046-7.71-4.569-15.085-4.569-22.128h155.318c12.56,0,23.309-4.469,32.254-13.414c8.949-8.949,13.422-19.698,13.422-32.265
-		V82.226C548.176,69.663,543.699,58.913,534.75,49.965z M511.627,319.768c0,2.475-0.903,4.613-2.711,6.424
-		c-1.81,1.804-3.952,2.707-6.427,2.707H45.681c-2.473,0-4.615-0.903-6.423-2.707c-1.807-1.817-2.712-3.949-2.712-6.424V82.226
-		c0-2.475,0.902-4.615,2.712-6.423c1.809-1.805,3.951-2.712,6.423-2.712h456.815c2.471,0,4.617,0.904,6.42,2.712
-		c1.808,1.809,2.711,3.949,2.711,6.423V319.768L511.627,319.768z"/>
-</g>
-</svg>