cobrowse-agent-ui 1.2.0 → 1.3.1

package/README.md

@@ -30,10 +30,10 @@ To add a new locale follow these steps:
 
 - Add a new entry to the `locales` array inside `i18next-parser.config.js`.
 - Run the `npm run i18n` command to generate a new locale file.
-- Import the new locale JSON file inside `src/i18n.js` and add it to the `resources` object (in the i18n instance
+- Import the new locale JSON file inside `lib/i18n.js` and add it to the `resources` object (in the i18n instance
   configuration) keyed by the locale key.
-- Import the relevant `moment` locale inside `src/i18n.js`.
-- Add a new entry to the `SUPPORTED_LOCALES` constant inside `src/i18n.js`.
+- Import the relevant `date-fns` locale inside `lib/i18n.js`.
+- Add a new entry to the `SUPPORTED_LOCALES` constant inside `lib/i18n.js`.
 
 **Note:** ensure the locale code matches the ones provided by the
 [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/cobrowse-agent-ui.css

@@ -0,0 +1 @@
+.PlatformIcon-module__root__ogAvA{width:.9rem;height:.9rem;vertical-align:middle}.Device-module__root__UZx82{padding:6px;display:flex;align-items:center;position:relative;gap:12px}.Device-module__online__1AxAp .Device-module__deviceStatus__0yCZg{outline:2px solid #c7ea30}.Device-module__lastSeen__6lPw2{font-size:.85rem;color:#777;white-space:nowrap}.Device-module__deviceStatus__0yCZg{height:36px;width:36px;padding:4px;outline:2px solid rgba(4,13,60,.25);border-radius:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:transparent}.Device-module__platformIcon__Y-uEy{height:100%;width:auto;pointer-events:none;display:flex;align-items:center;justify-content:center;color:inherit}.Device-module__details__hiywz{display:flex;flex-direction:column;gap:2px;flex:1;color:inherit}.Session-module__root__cORao{appearance:none;border:none;background:none;padding:6px;display:flex;align-items:center;flex-wrap:wrap;gap:12px;text-align:start;font-size:1rem;font-family:inherit;line-height:inherit;outline:none}.Session-module__clickable__ZEtjv{cursor:pointer;width:100%}.Session-module__root__cORao:focus-visible{outline:2px solid #040d3c;outline-offset:2px}.Session-module__details__oye-t{flex:1;display:flex;flex-direction:column;gap:4px}.Session-module__subdetails__rorhH{display:flex;align-items:baseline;color:#777;gap:12px}.Session-module__recorded__aV5Ih{text-transform:uppercase;font-size:10px;margin-inline-start:3px;letter-spacing:.05rem;color:#0b1220;cursor:pointer}.Session-module__active__1c1v0{color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;background-color:#3cc56e;padding:1px 6px;border-radius:4px;display:inline-block}.Session-module__activated__g-IUA{font-size:.9rem;white-space:nowrap}.Session-module__recorded__aV5Ih:before{content:"";width:8px;height:8px;margin-inline-end:4px;background:red;border-radius:100%;display:inline-block}.Session-module__duration__2WYUC{font-weight:700;font-size:12px;color:inherit}.SmartConnectButton-module__root__11QZi{appearance:none;border:none;display:inline-block;background:#f6f4f8;padding:12px 16px;cursor:not-allowed;border-radius:4px;font-weight:600;font-size:1rem;font-family:inherit;line-height:inherit;opacity:.6;transition:background .15s ease,color .15s ease,transform .12s ease,opacity .12s ease;outline:none}.SmartConnectButton-module__connectable__9zFuL{background:#040d3c;color:#fff;cursor:pointer;opacity:1}.SmartConnectButton-module__root__11QZi:focus-visible{outline:2px solid #040d3c;outline-offset:2px}.SmartConnectButton-module__root__11QZi:active.SmartConnectButton-module__connectable__9zFuL{transform:translateY(1px)}.RefreshButton-module__root__2r6Po{padding:4px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;color:#6f7780;cursor:pointer}.RefreshButton-module__icon__ZMGzA{width:18px;height:18px;transition:transform .2s ease-out}.RefreshButton-module__icon__ZMGzA:hover{transform:rotate(25deg)}@keyframes Loader-module__spin__HaoIa{to{transform:rotate(360deg)}}.Loader-module__root__CuLMw{display:flex;justify-content:center}.Loader-module__icon__vaPyL{width:50px;height:50px;animation:Loader-module__spin__HaoIa 2s linear infinite;color:#040d3c}.CodeEntry-module__root__CEZCb{text-align:center;white-space:nowrap;display:inline-flex;align-items:center;gap:10px;border:none;margin:0;padding:0;min-inline-size:0}.CodeEntry-module__legend__GN0ge{padding:0;display:contents}.CodeEntry-module__digits__aob60{display:inline-flex;align-items:center}.CodeEntry-module__input__Mp3LR{font-size:1rem;width:1.6rem;height:2rem;margin:.2rem;text-align:center;border-radius:4px;border:1px solid #dfe3f0;background:#fff;color:#0b1220;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease;appearance:textfield}.CodeEntry-module__input__Mp3LR:nth-of-type(3){margin-inline-end:.6rem}.CodeEntry-module__input__Mp3LR[type=number]::-webkit-outer-spin-button,.CodeEntry-module__input__Mp3LR[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.CodeEntry-module__input__Mp3LR:focus{border-color:#040d3c;box-shadow:0 0 0 3px #040d3c29;outline:none}@keyframes CodeEntry-module__shake__0xLiW{10%,90%{transform:translate3d(-2px,0,0)}20%,80%{transform:translate3d(3px,0,0)}30%,50%,70%{transform:translate3d(-7px,0,0)}40%,60%{transform:translate3d(7px,0,0)}}.CodeEntry-module__invalid__0fo6R{animation:CodeEntry-module__shake__0xLiW .6s cubic-bezier(.16,.07,.19,.97) both;transform:translateZ(0)}.ExternalLink-module__root__7-WiY{position:absolute;right:10px;display:flex;align-items:center;gap:4px;text-decoration:none;color:var(--text-color-base)}.ExternalLink-module__root__7-WiY:hover{text-decoration:underline}.ExternalLink-module__root__7-WiY:visited{color:#0e0c26;color:var(--text-color-base)}.UserIcon-module__root__-NL30{color:#fff;display:inline-flex;align-items:center;justify-content:center;text-align:center;background-size:cover;background-position:center;padding:16px;border-radius:50%;width:1.5rem;height:1.5rem;border:1px solid #ddd;flex:0 0 auto;white-space:nowrap}.Tabs-module__root__vrPV-{--tab-text-color: #6f7780;--tab-active-color: #040d3c;--tab-border-color: #d7dce2;--tab-focus-outline-color: #040d3c;width:100%;display:flex;flex-direction:column;gap:10px}.Tabs-module__header__ZVkH2{display:flex;align-items:center;border-bottom:1px solid var(--tab-border-color);gap:12px}.Tabs-module__tabList__thjbJ{display:flex;margin:0}.Tabs-module__tab__HyAQH{position:relative;margin-bottom:-1px;padding:10px;border:none;background:transparent;color:var(--tab-text-color);font-size:14px;font-weight:600;border-bottom:2px solid transparent;cursor:pointer;transition:color .3s,border .3s}.Tabs-module__tabHover__yC8x3{color:var(--tab-active-color)}.Tabs-module__tab__HyAQH:focus-visible{outline:2px solid var(--tab-focus-outline-color);outline-offset:2px}.Tabs-module__tabActive__4FIE-{color:var(--tab-active-color);border-bottom:2px solid var(--tab-active-color)}.Tabs-module__refresh__MV7Wh{margin-inline-start:auto}

package/dist/cobrowse-agent-ui.d.ts

@@ -0,0 +1,114 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { CSSProperties } from 'react';
+import { Device as Device_2 } from 'cobrowse-agent-sdk';
+import { DeviceInfo as DeviceInfo_2 } from 'cobrowse-agent-sdk';
+import { ElementType } from 'react';
+import { ForwardedRef } from 'react';
+import { i18n as i18n_2 } from 'i18next';
+import { JSX } from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { Session as Session_2 } from 'cobrowse-agent-sdk';
+import { SVGProps } from 'react';
+
+declare interface BaseSessionProps<TSession extends SessionData = SessionData> {
+    session: TSession;
+    className?: string;
+    children?: ReactNode;
+}
+
+export declare const CodeEntry: ({ ref, className, inputClassName, focusOnRender, onCode, label, children }: CodeEntryProps) => JSX.Element;
+
+declare interface CodeEntryHandle {
+    clear: () => void;
+    focus: (index: number) => void;
+}
+
+export declare interface CodeEntryProps {
+    ref?: ForwardedRef<CodeEntryHandle>;
+    className?: string;
+    inputClassName?: string;
+    focusOnRender?: boolean;
+    onCode?: (code: string) => Promise<boolean> | boolean;
+    label?: ReactNode | false;
+    children?: ReactNode;
+}
+
+declare const DEFAULT_TAG: "div";
+
+export declare const Device: <T extends DeviceData = DeviceData>({ style, className, device, children }: DeviceProps<T>) => JSX.Element;
+
+export declare type DeviceData = Pick<Device_2, 'id' | 'online' | 'connectable' | 'last_active'> & {
+    device: DeviceInfo;
+};
+
+declare type DeviceInfo = Pick<DeviceInfo_2, 'platform' | 'device'>;
+
+export declare interface DeviceProps<T extends DeviceData = DeviceData> {
+    style?: CSSProperties;
+    className?: string;
+    device: T;
+    children?: ReactNode;
+}
+
+export declare const ExternalLink: ({ href, children }: ExternalLinkProps) => JSX.Element;
+
+export declare interface ExternalLinkProps {
+    href: string;
+    children?: ReactNode;
+}
+
+export declare const i18n: i18n_2;
+
+export declare const Loader: ({ children }: LoaderProps) => JSX.Element;
+
+export declare interface LoaderProps {
+    children?: ReactNode;
+}
+
+export declare const PlatformIcon: ({ platform, className, ...props }: PlatformIconProps) => JSX.Element;
+
+declare interface PlatformIconProps extends SVGProps<SVGSVGElement> {
+    platform: DeviceInfo_2['platform'];
+    className?: string;
+}
+
+declare type PropsOf<T extends ElementType> = ComponentPropsWithoutRef<T>;
+
+export declare const RefreshButton: ({ className, children, ...props }: RefreshButtonProps) => JSX.Element;
+
+export declare interface RefreshButtonProps extends ComponentPropsWithoutRef<'button'> {
+}
+
+export declare const Session: <TSession extends SessionData = SessionData, TElement extends ElementType = "div">({ as, session, onClick, className, children, ...props }: SessionProps<TSession, TElement>) => JSX.Element;
+
+export declare type SessionData = Pick<Session_2, 'id' | 'state' | 'recorded' | 'activated' | 'ended'> & {
+    device: DeviceInfo;
+};
+
+export declare type SessionProps<TSession extends SessionData = SessionData, TElement extends ElementType = typeof DEFAULT_TAG> = BaseSessionProps<TSession> & Omit<PropsOf<TElement>, 'onClick'> & {
+    as?: TElement;
+    onClick?: (session: TSession) => void;
+};
+
+export declare const SmartConnectButton: <T extends DeviceData = DeviceData>({ device, onClick: onClickCallback, className, children, ...props }: SmartConnectButtonProps<T>) => JSX.Element;
+
+export declare interface SmartConnectButtonProps<T extends DeviceData = DeviceData> extends Omit<ComponentPropsWithoutRef<'button'>, 'onClick'> {
+    device: T;
+    onClick?: (device: T) => void;
+    children?: ReactNode;
+}
+
+export declare const UserIcon: ({ user, className }: UserIconProps) => JSX.Element | null;
+
+declare interface UserIconProps {
+    user?: UserIconUser;
+    className?: string;
+}
+
+declare interface UserIconUser {
+    name?: string;
+    picture?: string;
+    colour?: string;
+}
+
+export { }

package/dist/cobrowse-agent-ui.js

@@ -0,0 +1,194 @@
+var G = Object.defineProperty;
+var S = Object.getOwnPropertySymbols;
+var Z = Object.prototype.hasOwnProperty, q = Object.prototype.propertyIsEnumerable;
+var N = (t, o, n) => o in t ? G(t, o, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[o] = n, P = (t, o) => {
+  for (var n in o || (o = {}))
+    Z.call(o, n) && N(t, n, o[n]);
+  if (S)
+    for (var n of S(o))
+      q.call(o, n) && N(t, n, o[n]);
+  return t;
+};
+var A = (t, o, n) => new Promise((d, f) => {
+  var g = (a) => {
+    try {
+      p(n.next(a));
+    } catch (h) {
+      f(h);
+    }
+  }, k = (a) => {
+    try {
+      p(n.throw(a));
+    } catch (h) {
+      f(h);
+    }
+  }, p = (a) => a.done ? d(a.value) : Promise.resolve(a.value).then(g, k);
+  p((n = n.apply(t, o)).next());
+});
+import { jsxs as R, jsx as _ } from "react/jsx-runtime";
+import * as T from "react";
+import { useState as M, useRef as z, useImperativeHandle as J, useCallback as m, useEffect as Q } from "react";
+import { useTranslation as X } from "react-i18next";
+import $ from "clsx";
+import { P as tt, D as et, S as nt, a as ot, R as rt, L as st, i as ct } from "./index-CB-5iZZ3.js";
+const it = "CodeEntry-module__root__CEZCb", at = "CodeEntry-module__legend__GN0ge", lt = "CodeEntry-module__digits__aob60", ut = "CodeEntry-module__input__Mp3LR", dt = "CodeEntry-module__invalid__0fo6R", I = {
+  root: it,
+  legend: at,
+  digits: lt,
+  input: ut,
+  invalid: dt
+}, l = 6, x = Array(l).fill(""), ft = "Backspace", b = "ArrowLeft", mt = "ArrowRight", B = (t, o) => t.findIndex((n) => n === o), U = (t, o) => {
+  var n;
+  (n = t[Math.max(B(t, o) - 1, 0)]) == null || n.focus();
+}, w = (t, o) => {
+  var n;
+  (n = t[Math.min(B(t, o) + 1, l - 1)]) == null || n.focus();
+}, gt = (t, o, n) => {
+  const d = getComputedStyle(o).direction === "rtl";
+  (n === b ? !d : d) ? U(t, o) : w(t, o);
+}, pt = ({ ref: t, className: o, inputClassName: n, focusOnRender: d = !1, onCode: f, label: g, children: k }) => {
+  const { t: p } = X(), [a, h] = M(!1), [E, D] = M(x), c = z([]);
+  J(t, () => ({
+    clear() {
+      D(x);
+    },
+    focus(r) {
+      var e;
+      (e = c.current[r]) == null || e.focus();
+    }
+  }), []);
+  const L = m(() => E.join("").substring(0, l), [E]), j = m(() => {
+    var s;
+    const r = E.findIndex((i) => i === ""), e = r === -1 ? l - 1 : r;
+    (s = c.current[e]) == null || s.focus();
+  }, [E]), K = m((r) => A(null, null, function* () {
+    h(!0);
+    try {
+      (yield f == null ? void 0 : f(r)) ? (D(x), c.current[0] && setTimeout(() => {
+        var s;
+        return (s = c.current[0]) == null ? void 0 : s.focus();
+      }, 0)) : setTimeout(() => {
+        var s;
+        return (s = c.current[l - 1]) == null ? void 0 : s.focus();
+      }, 0);
+    } catch (e) {
+      throw c.current[l - 1] && setTimeout(() => {
+        var s;
+        return (s = c.current[l - 1]) == null ? void 0 : s.focus();
+      }, 0), e;
+    } finally {
+      h(!1);
+    }
+  }), [f]);
+  Q(() => {
+    const r = L();
+    r.length === l && K(r);
+  }, [L, K]);
+  const v = m((r, e) => {
+    r > l - 1 || D((s) => {
+      const i = [...s];
+      return i[r] = e, i;
+    });
+  }, []), F = m((r) => {
+    var y, C;
+    if (a)
+      return;
+    const { clipboardData: e } = r, s = e.getData("Text");
+    if (!/^[0-9]+$/.test(s)) {
+      r.preventDefault();
+      return;
+    }
+    const i = s.split("");
+    let u = s.length === l ? 0 : parseInt((y = r.currentTarget.getAttribute("data-digit")) != null ? y : "0", 10);
+    i.forEach((W) => {
+      v(u, W), u += 1;
+    }), (C = c.current[Math.min(u, l - 1)]) == null || C.focus(), r.preventDefault();
+  }, [v, a]), Y = m((r) => {
+    var y, C;
+    const { target: e, target: { value: s } } = r, i = parseInt((y = e.getAttribute("data-digit")) != null ? y : "0", 10), u = (C = s.match(/[0-9]/g)) != null ? C : [];
+    if (u.length === 0) {
+      v(i, "");
+      return;
+    }
+    u.length === 1 && (v(i, u[0]), w(c.current, e));
+  }, [v]), H = m((r) => {
+    const { key: e, currentTarget: s, metaKey: i, ctrlKey: u } = r;
+    s.value.length === 0 && e === ft ? U(c.current, s) : e === b || e === mt ? (gt(c.current, s, e), r.preventDefault()) : !i && !u && e.length === 1 && !/^[0-9]$/.test(e) && r.preventDefault();
+  }, []), O = m((r) => {
+    const { currentTarget: e, repeat: s } = r, { value: i } = e;
+    !s && /[0-9]/.test(i) && w(c.current, e);
+  }, []), V = !a && L().length === l;
+  return /* @__PURE__ */ R(
+    "fieldset",
+    {
+      className: $(I.root, o),
+      children: [
+        g !== !1 && /* @__PURE__ */ _(
+          "legend",
+          {
+            className: I.legend,
+            onClick: j,
+            children: /* @__PURE__ */ _("span", { children: g != null ? g : p("Support code") })
+          }
+        ),
+        /* @__PURE__ */ R("div", { className: $(I.digits, V && I.invalid), role: "group", children: [
+          E.map((r, e) => /* @__PURE__ */ _(
+            "input",
+            {
+              inputMode: "numeric",
+              className: $(I.input, n),
+              disabled: a,
+              onKeyDown: H,
+              onKeyUp: O,
+              onChange: Y,
+              onPaste: F,
+              value: r,
+              "data-digit": e,
+              ref: (s) => {
+                c.current[e] = s;
+              },
+              autoFocus: d && e === 0,
+              "aria-label": p("Digit {{digit}}", { digit: e + 1 })
+            },
+            e
+          )),
+          k
+        ] })
+      ]
+    }
+  );
+}, ht = (t) => /* @__PURE__ */ T.createElement("svg", P({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", width: 14, height: 14, "aria-hidden": "true" }, t), /* @__PURE__ */ T.createElement("path", { d: "M15 3h6v6" }), /* @__PURE__ */ T.createElement("path", { d: "M10 14 21 3" }), /* @__PURE__ */ T.createElement("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })), _t = "ExternalLink-module__root__7-WiY", Et = {
+  root: _t
+}, vt = ({ href: t, children: o }) => /* @__PURE__ */ R("a", { className: Et.root, href: t, target: "_blank", rel: "noopener noreferrer", children: [
+  o,
+  /* @__PURE__ */ _(ht, {})
+] }), yt = "UserIcon-module__root__-NL30", Ct = {
+  root: yt
+}, It = ({ user: t, className: o }) => {
+  const n = () => !(t != null && t.name) || t.picture ? "" : t.name.trim().split(/\s+/).map((d) => d.toUpperCase().charAt(0)).join("").slice(0, 2);
+  return t ? /* @__PURE__ */ _(
+    "div",
+    {
+      className: $(Ct.root, o),
+      title: t.name,
+      style: {
+        backgroundImage: t.picture ? `url(${t.picture || ""})` : void 0,
+        backgroundColor: t.colour
+      },
+      children: /* @__PURE__ */ _("span", { children: n() })
+    }
+  ) : null;
+}, Rt = pt, wt = vt, Kt = tt, St = et, Nt = nt, Pt = ot, At = It, Mt = rt, bt = st, Bt = ct;
+export {
+  Rt as CodeEntry,
+  St as Device,
+  wt as ExternalLink,
+  bt as Loader,
+  Kt as PlatformIcon,
+  Mt as RefreshButton,
+  Nt as Session,
+  Pt as SmartConnectButton,
+  At as UserIcon,
+  Bt as i18n
+};
+//# sourceMappingURL=cobrowse-agent-ui.js.map

package/dist/cobrowse-agent-ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cobrowse-agent-ui.js","sources":["../lib/components/CodeEntry/index.tsx","../lib/icons/external-link.svg?react","../lib/components/ExternalLink/index.tsx","../lib/components/UserIcon/index.tsx","../lib/main.ts"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type ForwardedRef,\n  type ReactNode,\n  type ClipboardEvent,\n  type ChangeEvent,\n  type KeyboardEvent\n} from 'react'\nimport { useTranslation } from 'react-i18next'\nimport clsx from 'clsx'\nimport styles from './CodeEntry.module.css'\n\nexport interface CodeEntryHandle {\n  clear: () => void\n  focus: (index: number) => void\n}\n\nexport interface CodeEntryProps {\n  ref?: ForwardedRef<CodeEntryHandle>\n  className?: string\n  inputClassName?: string\n  focusOnRender?: boolean\n  onCode?: (code: string) => Promise<boolean> | boolean\n  label?: ReactNode | false\n  children?: ReactNode\n}\n\nconst CODE_LENGTH = 6\nconst EMTPY_STATE = Array<string>(CODE_LENGTH).fill('')\nconst KEY_BACKSPACE = 'Backspace'\nconst KEY_ARROW_LEFT = 'ArrowLeft'\nconst KEY_ARROW_RIGHT = 'ArrowRight'\n\nconst getElementIndex = (refsArr: Array<HTMLInputElement | null>, elem: HTMLInputElement) =>\n  refsArr.findIndex((el) => el === elem)\n\nconst focusPreviousInput = (refsArr: Array<HTMLInputElement | null>, elem: HTMLInputElement) => {\n  refsArr[Math.max(getElementIndex(refsArr, elem) - 1, 0)]?.focus()\n}\n\nconst focusNextInput = (refsArr: Array<HTMLInputElement | null>, elem: HTMLInputElement) => {\n  refsArr[Math.min(getElementIndex(refsArr, elem) + 1, CODE_LENGTH - 1)]?.focus()\n}\n\nconst moveFocusForArrowKey = (\n  refsArr: Array<HTMLInputElement | null>,\n  elem: HTMLInputElement,\n  key: typeof KEY_ARROW_LEFT | typeof KEY_ARROW_RIGHT\n) => {\n  const isRTL = getComputedStyle(elem).direction === 'rtl'\n  const movesToPrevious = key === KEY_ARROW_LEFT ? !isRTL : isRTL\n\n  if (movesToPrevious) {\n    focusPreviousInput(refsArr, elem)\n  } else {\n    focusNextInput(refsArr, elem)\n  }\n}\n\nconst CodeEntry = ({ ref, className, inputClassName, focusOnRender = false, onCode, label, children }: CodeEntryProps) => {\n  const { t } = useTranslation()\n  const [validating, setValidating] = useState(false)\n  const [code, setCode] = useState(EMTPY_STATE)\n  const refs = useRef<Array<HTMLInputElement | null>>([])\n\n  useImperativeHandle(ref, () => ({\n    clear () {\n      setCode(EMTPY_STATE)\n    },\n    focus (index) {\n      refs.current[index]?.focus()\n    }\n  }), [])\n\n  const getCode = useCallback(() => code.join('').substring(0, CODE_LENGTH), [code])\n\n  const focusFirstEmptyInput = useCallback(() => {\n    const firstEmptyIndex = code.findIndex((digit) => digit === '')\n    const targetIndex = firstEmptyIndex === -1 ? CODE_LENGTH - 1 : firstEmptyIndex\n\n    refs.current[targetIndex]?.focus()\n  }, [code])\n\n  const tryComplete = useCallback(async (codeValue: string) => {\n    setValidating(true)\n\n    try {\n      const isValid = await onCode?.(codeValue)\n\n      if (isValid) {\n        setCode(EMTPY_STATE)\n\n        if (refs.current[0]) {\n          setTimeout(() => refs.current[0]?.focus(), 0)\n        }\n      } else {\n        setTimeout(() => refs.current[CODE_LENGTH - 1]?.focus(), 0)\n      }\n    } catch (e) {\n      if (refs.current[CODE_LENGTH - 1]) {\n        setTimeout(() => refs.current[CODE_LENGTH - 1]?.focus(), 0)\n      }\n\n      throw e\n    } finally {\n      setValidating(false)\n    }\n  }, [onCode])\n\n  // Run the tryComplete function when the code state changes\n  useEffect(() => {\n    const code = getCode()\n\n    if (code.length !== CODE_LENGTH) {\n      return\n    }\n\n    void tryComplete(code)\n  }, [getCode, tryComplete])\n\n  const setDigit = useCallback((digit: number, value: string) => {\n    if (digit > (CODE_LENGTH - 1)) {\n      return\n    }\n\n    setCode((code) => {\n      const updatedCode = [...code]\n\n      updatedCode[digit] = value\n\n      return updatedCode\n    })\n  }, [])\n\n  const handlePaste = useCallback((event: ClipboardEvent<HTMLInputElement>) => {\n    if (validating) {\n      return\n    }\n\n    const { clipboardData } = event\n    const pastedData = clipboardData.getData('Text')\n\n    // Exit early if the pasted data contains anything other than just digits\n    if (!/^[0-9]+$/.test(pastedData)) {\n      event.preventDefault()\n\n      return\n    }\n\n    const digits = pastedData.split('')\n    // Start pasting from the first digit if the clipboard holds a full code,\n    // otherwise just paste from the currently selected input onwards\n    let digit = pastedData.length === CODE_LENGTH\n      ? 0\n      : parseInt(event.currentTarget.getAttribute('data-digit') ?? '0', 10)\n\n    digits.forEach((value) => {\n      setDigit(digit, value)\n\n      digit += 1\n    })\n\n    refs.current[Math.min(digit, CODE_LENGTH - 1)]?.focus()\n\n    event.preventDefault()\n  }, [setDigit, validating])\n\n  const handleOnChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n    const { target, target: { value } } = event\n    const digit = parseInt(target.getAttribute('data-digit') ?? '0', 10)\n    const digits = value.match(/[0-9]/g) ?? []\n\n    if (digits.length === 0) {\n      setDigit(digit, '')\n\n      return\n    }\n\n    if (digits.length === 1) {\n      setDigit(digit, digits[0])\n      focusNextInput(refs.current, target)\n    }\n  }, [setDigit])\n\n  const handleKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) => {\n    const { key, currentTarget, metaKey, ctrlKey } = event\n\n    // On backspace on empty node go back to previous\n    if (currentTarget.value.length === 0 && key === KEY_BACKSPACE) {\n      focusPreviousInput(refs.current, currentTarget)\n    } else if (key === KEY_ARROW_LEFT || key === KEY_ARROW_RIGHT) {\n      // Move focus according to visual direction\n      moveFocusForArrowKey(refs.current, currentTarget, key)\n      event.preventDefault()\n    } else if (!metaKey && !ctrlKey && key.length === 1 && !/^[0-9]$/.test(key)) {\n      // Prevent non-numeric characters that might appear in numbers (e.g 'e')\n      // but allow backspaces too\n      event.preventDefault()\n    }\n  }, [])\n\n  const handleKeyUp = useCallback((event: KeyboardEvent<HTMLInputElement>) => {\n    const { currentTarget, repeat } = event\n    const { value } = currentTarget\n\n    if (!repeat && /[0-9]/.test(value)) {\n      focusNextInput(refs.current, currentTarget)\n    }\n  }, [])\n\n  const invalid = !validating && getCode().length === CODE_LENGTH\n\n  return (\n    <fieldset\n      className={clsx(styles.root, className)}\n    >\n      {label !== false && (\n        <legend\n          className={styles.legend}\n          onClick={focusFirstEmptyInput}\n        >\n          <span>{label ?? t('Support code')}</span>\n        </legend>\n      )}\n      <div className={clsx(styles.digits, invalid && styles.invalid)} role='group'>\n        {code.map((value, index) => (\n          <input\n            key={index}\n            inputMode='numeric'\n            className={clsx(styles.input, inputClassName)}\n            disabled={validating}\n            onKeyDown={handleKeyDown}\n            onKeyUp={handleKeyUp}\n            onChange={handleOnChange}\n            onPaste={handlePaste}\n            value={value}\n            data-digit={index}\n            ref={(el) => { refs.current[index] = el }}\n            autoFocus={focusOnRender && index === 0}\n            aria-label={t('Digit {{digit}}', { digit: index + 1 })}\n          />\n        ))}\n        {children}\n      </div>\n    </fieldset>\n  )\n}\n\nexport default CodeEntry\n","import * as React from \"react\";\nconst SvgExternalLink = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", viewBox: \"0 0 24 24\", fill: \"none\", stroke: \"currentColor\", strokeWidth: 2, strokeLinecap: \"round\", strokeLinejoin: \"round\", width: 14, height: 14, \"aria-hidden\": \"true\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M15 3h6v6\" }), /* @__PURE__ */ React.createElement(\"path\", { d: \"M10 14 21 3\" }), /* @__PURE__ */ React.createElement(\"path\", { d: \"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" }));\nexport default SvgExternalLink;\n","import type { ReactNode } from 'react'\nimport IconExternalLink from '@/icons/external-link.svg?react'\nimport styles from './ExternalLink.module.css'\n\nexport interface ExternalLinkProps {\n  href: string\n  children?: ReactNode\n}\n\nconst ExternalLink = ({ href, children }: ExternalLinkProps) => (\n  <a className={styles.root} href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n    {children}\n    <IconExternalLink />\n  </a>\n)\n\nexport default ExternalLink\n","import clsx from 'clsx'\nimport styles from './UserIcon.module.css'\n\nexport interface UserIconUser {\n  name?: string\n  picture?: string\n  colour?: string\n}\n\nexport interface UserIconProps {\n  user?: UserIconUser\n  className?: string\n}\n\nconst UserIcon = ({ user, className }: UserIconProps) => {\n  const initials = (): string => {\n    if (!user?.name || user.picture) return ''\n\n    return user.name\n      .trim()\n      .split(/\\s+/)\n      .map(part => part.toUpperCase().charAt(0))\n      .join('')\n      .slice(0, 2)\n  }\n\n  if (!user) return null\n\n  return (\n    <div\n      className={clsx(styles.root, className)}\n      title={user.name}\n      style={{\n        backgroundImage: user.picture ? `url(${user.picture || ''})` : undefined,\n        backgroundColor: user.colour\n      }}\n    >\n      <span>{initials()}</span>\n    </div>\n  )\n}\n\nexport default UserIcon\n","import CodeEntryComponent from '@/components/CodeEntry'\nimport ExternalLinkComponent from '@/components/ExternalLink'\nimport PlatformIconComponent from '@/components/PlatformIcon'\nimport DeviceComponent from '@/components/Device'\nimport SessionComponent from '@/components/Session'\nimport SmartConnectButtonComponent from '@/components/SmartConnectButton'\nimport UserIconComponent from '@/components/UserIcon'\nimport RefreshButtonComponent from '@/components/RefreshButton'\nimport LoaderComponent from '@/components/Loader'\nimport i18nInstance from '@/i18n'\n\nexport type { CodeEntryProps } from '@/components/CodeEntry'\nexport type { ExternalLinkProps } from '@/components/ExternalLink'\nexport type { DeviceData, DeviceProps } from '@/components/Device'\nexport type { SessionData, SessionProps } from '@/components/Session'\nexport type { SmartConnectButtonProps } from '@/components/SmartConnectButton'\nexport type { RefreshButtonProps } from '@/components/RefreshButton'\nexport type { LoaderProps } from '@/components/Loader'\n\nexport const CodeEntry = CodeEntryComponent\nexport const ExternalLink = ExternalLinkComponent\nexport const PlatformIcon = PlatformIconComponent\nexport const Device = DeviceComponent\nexport const Session = SessionComponent\nexport const SmartConnectButton = SmartConnectButtonComponent\nexport const UserIcon = UserIconComponent\nexport const RefreshButton = RefreshButtonComponent\nexport const Loader = LoaderComponent\nexport const i18n = i18nInstance\n"],"names":["CODE_LENGTH","EMTPY_STATE","KEY_BACKSPACE","KEY_ARROW_LEFT","KEY_ARROW_RIGHT","getElementIndex","refsArr","elem","el","focusPreviousInput","_a","focusNextInput","moveFocusForArrowKey","key","isRTL","CodeEntry","ref","className","inputClassName","focusOnRender","onCode","label","children","t","useTranslation","validating","setValidating","useState","code","setCode","refs","useRef","useImperativeHandle","index","getCode","useCallback","focusFirstEmptyInput","firstEmptyIndex","digit","targetIndex","tryComplete","codeValue","__async","useEffect","setDigit","value","updatedCode","handlePaste","event","clipboardData","pastedData","digits","_b","handleOnChange","target","handleKeyDown","currentTarget","metaKey","ctrlKey","handleKeyUp","repeat","invalid","jsxs","clsx","styles","jsx","SvgExternalLink","props","React","__spreadValues","ExternalLink","href","IconExternalLink","UserIcon","user","initials","part","CodeEntryComponent","ExternalLinkComponent","PlatformIcon","PlatformIconComponent","Device","DeviceComponent","Session","SessionComponent","SmartConnectButton","SmartConnectButtonComponent","UserIconComponent","RefreshButton","RefreshButtonComponent","Loader","LoaderComponent","i18n","i18nInstance"],"mappings":"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"}