@streamlayer/react-ui 0.98.1 → 0.100.0

package/lib/ui/gamification/vote/styles.js

@@ -1,30 +1,36 @@
 import { styled as s } from "@linaria/react";
 import { SDKScrollContainer as o } from "../../app/styles.js";
+import { ShowIn as n } from "../../show-in/index.js";
 const l = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c14ielyq",
   propsAsIs: !1
-}), n = () => o, a = /* @__PURE__ */ s(n())({
+}), t = () => o, i = /* @__PURE__ */ s(t())({
   name: "QuestionScrollContainer",
   class: "q1tlqx57",
   propsAsIs: !0
-}), c = /* @__PURE__ */ s("div")({
+}), p = /* @__PURE__ */ s("div")({
   name: "Content",
   class: "c1hq58md",
   propsAsIs: !1
-}), i = /* @__PURE__ */ s("div")({
+}), m = /* @__PURE__ */ s("div")({
   name: "Title",
   class: "t1c8nxcx",
   propsAsIs: !1
-}), r = /* @__PURE__ */ s("div")({
+}), C = /* @__PURE__ */ s("div")({
   name: "Options",
   class: "oiozuc3",
   propsAsIs: !1
+}), e = () => n, A = /* @__PURE__ */ s(e())({
+  name: "AlertContainer",
+  class: "apnc44r",
+  propsAsIs: !0
 });
 export {
+  A as AlertContainer,
   l as Container,
-  c as Content,
-  r as Options,
-  a as QuestionScrollContainer,
-  i as Title
+  p as Content,
+  C as Options,
+  i as QuestionScrollContainer,
+  m as Title
 };

package/lib/ui/gamification/vote/twitter-details/index.js

@@ -1,20 +1,10 @@
-import { jsxs as r, jsx as i } from "react/jsx-runtime";
-import { TwitterContent as o } from "../../../questions/twitter/index.js";
-import { Container as m, Quote as e } from "./styles.js";
-import "../../../video-player/index.js";
-import "@linaria/core";
-import "react";
-import "../../../icons/index.js";
-import "@linaria/react";
-import "../../../video-player/styles.js";
-import "../../../questions/twitter/account/index.js";
-import "../../../../utils/common.js";
-import "../../../questions/twitter/account/styles.js";
-import "../../../questions/twitter/styles.js";
-const C = (t) => /* @__PURE__ */ r(m, { children: [
-  t.title && /* @__PURE__ */ i(e, { children: t.title }),
-  /* @__PURE__ */ i(o, { ...t, isDetail: !0 })
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { TwitterContent as r } from "../../../questions/twitter/index.js";
+import { Container as o, Quote as n } from "./styles.js";
+const a = (t) => /* @__PURE__ */ i(o, { children: [
+  t.title && /* @__PURE__ */ e(n, { children: t.title }),
+  /* @__PURE__ */ e(r, { ...t, isDetail: !0 })
 ] });
 export {
-  C as TwitterDetails
+  a as TwitterDetails
 };

package/lib/ui/gamification/vote/vote-option/index.js

@@ -1,18 +1,15 @@
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import { useState as j, useLayoutEffect as U } from "react";
-import { QuestionImages as a, QuestionType as o, QuestionStatus as S } from "@streamlayer/sdk-web-types";
-import { AnimatedCounter as $ } from "../../../animated-counter/index.js";
-import { IconDefault as y, IconContainer as F, IconWrap as M, IconCircle as W, ButtonContainer as z, ButtonPct as G, ButtonBody as H, Title as J, Pts as K, Indicators as X, CheckIcon as Y, Percentage as Z } from "./styles.js";
-import "react-countup";
-import "@linaria/react";
-import "../../../icons/index.js";
-const E = {
-  [a.CENTERED]: (t) => /* @__PURE__ */ e(y, { alt: "option-icon", src: t }),
-  [a.TRANSPARENT]: (t) => /* @__PURE__ */ e(F, { children: /* @__PURE__ */ e(M, { style: { backgroundImage: `url(${t})` } }) }),
-  [a.ROUNDED]: (t) => /* @__PURE__ */ e(W, { alt: "option-icon", src: t }),
+import { QuestionImages as a, QuestionType as o, QuestionStatus as p } from "@streamlayer/sdk-web-types";
+import { AnimatedCounter as W } from "../../../animated-counter/index.js";
+import { IconDefault as $, IconContainer as y, IconWrap as F, IconCircle as M, ButtonContainer as z, ButtonPctWrap as G, ButtonPct as H, ButtonBody as J, Title as K, Pts as X, Indicators as Y, CheckIcon as Z, Percentage as _ } from "./styles.js";
+const h = {
+  [a.CENTERED]: (t) => /* @__PURE__ */ e($, { alt: "option-icon", src: t }),
+  [a.TRANSPARENT]: (t) => /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(F, { style: { backgroundImage: `url(${t})` } }) }),
+  [a.ROUNDED]: (t) => /* @__PURE__ */ e(M, { alt: "option-icon", src: t }),
   [a.NONE]: () => null,
   [a.UNSET]: () => null
-}, _ = ({ questionType: t, hasCorrectAnswer: c, correct: n, youVoted: r, questionVoted: i }) => {
+}, q = ({ questionType: t, hasCorrectAnswer: c, correct: n, youVoted: r, questionVoted: i }) => {
   if (t === o.POLL && r)
     return "correct";
   if (t === o.PREDICTION) {
@@ -22,14 +19,14 @@ const E = {
       return "correct";
   }
   return t === o.TRIVIA && i && r ? n ? "correct" : "incorrect" : "unset";
-}, q = ({
+}, tt = ({
   questionType: t,
   questionVoted: c,
   correct: n,
   hasCorrectAnswer: r,
   questionStatus: i
-}) => t === o.TRIVIA ? c && n : t === o.PREDICTION ? c && n && r || i === S.RESOLVED && n : !1, at = (t) => {
-  var N;
+}) => t === o.TRIVIA ? c && n : t === o.PREDICTION ? c && n && r || i === p.RESOLVED && n : !1, ct = (t) => {
+  var S;
   const {
     // option props
     id: c,
@@ -40,58 +37,58 @@ const E = {
     // extra props
     onVote: w,
     markThatVoted: A,
-    onPercentsAnimated: m,
-    youSelected: h,
+    onPercentsAnimated: f,
+    youSelected: E,
     questionVoted: s,
     imageMode: C,
     answerTimeExpired: O,
-    questionStatus: p,
+    questionStatus: P,
     isLoading: g,
     questionType: d,
     correct: k,
     hasCorrectAnswer: v,
     votedAfterQuestionClosed: x,
-    enteredAnActiveQuestion: P,
-    marketClosed: f
-  } = t, [L, R] = j(0), I = _(t), Q = q({ questionType: d, questionVoted: s, correct: k, hasCorrectAnswer: v, questionStatus: p }), u = f && d === o.PREDICTION, T = s || u, B = d === o.PREDICTION && !s && !f, V = s && !h && I !== "incorrect";
+    enteredAnActiveQuestion: R,
+    marketClosed: I
+  } = t, [L, T] = j(0), m = q(t), B = tt({ questionType: d, questionVoted: s, correct: k, hasCorrectAnswer: v, questionStatus: P }), u = I && d === o.PREDICTION, N = s || u, Q = d === o.PREDICTION && !s && !I, V = s && !E && m !== "incorrect";
   return U(() => {
-    R(0), requestAnimationFrame(() => {
-      R(i);
+    T(0), requestAnimationFrame(() => {
+      T(i);
     });
   }, [i]), /* @__PURE__ */ l(
     z,
     {
       value: c,
-      "data-selected": h,
-      "data-answer-state": I,
-      disabled: s || g || O || u && !P || u && P && x,
+      "data-selected": E,
+      "data-answer-state": m,
+      disabled: s || g || O || u && !R || u && R && x,
       "data-is-not-checked": V,
       onClick: (b) => {
         A(
-          d === o.PREDICTION ? f : p === S.RESOLVED
+          d === o.PREDICTION ? I : P === p.RESOLVED
         ), w(b);
       },
       children: [
-        /* @__PURE__ */ e(
-          G,
+        /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(
+          H,
           {
-            "data-answer-state": I,
-            style: { width: `${T ? L : 0}%` },
+            "data-answer-state": m,
+            style: { width: `${N ? L : 0}%` },
             onTransitionEnd: () => {
-              u || m == null || m();
+              u || f == null || f();
             }
           }
-        ),
-        /* @__PURE__ */ l(H, { children: [
-          n && C && ((N = E[C]) == null ? void 0 : N.call(E, n)),
-          /* @__PURE__ */ e(J, { children: r }),
-          B && /* @__PURE__ */ l("div", { children: [
+        ) }),
+        /* @__PURE__ */ l(J, { children: [
+          n && C && ((S = h[C]) == null ? void 0 : S.call(h, n)),
+          /* @__PURE__ */ e(K, { children: r }),
+          Q && /* @__PURE__ */ l("div", { children: [
             D,
-            /* @__PURE__ */ e(K, { children: "pts" })
+            /* @__PURE__ */ e(X, { children: "pts" })
           ] }),
-          T && /* @__PURE__ */ l(X, { children: [
-            Q && /* @__PURE__ */ e(Y, { name: "selected" }),
-            /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e($, { value: i, suffix: "%" }) })
+          N && /* @__PURE__ */ l(Y, { children: [
+            B && /* @__PURE__ */ e(Z, { name: "selected" }),
+            /* @__PURE__ */ e(_, { children: /* @__PURE__ */ e(W, { value: i, suffix: "%" }) })
           ] })
         ] })
       ]
@@ -99,5 +96,5 @@ const E = {
   );
 };
 export {
-  at as VotingOption
+  ct as VotingOption
 };

package/lib/ui/gamification/vote/vote-option/styles.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export declare const ButtonContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const ButtonPctWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ButtonPct: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ButtonBody: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
 export declare const IconContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/gamification/vote/vote-option/styles.js

@@ -1,72 +1,75 @@
 import { styled as s } from "@linaria/react";
 import { SvgIcon as o } from "../../../icons/index.js";
-import "react/jsx-runtime";
-import "react";
-const I = /* @__PURE__ */ s("button")({
+const r = /* @__PURE__ */ s("button")({
   name: "ButtonContainer",
   class: "b1b6dl8t",
   propsAsIs: !1
-}), i = /* @__PURE__ */ s("div")({
-  name: "ButtonPct",
+}), l = /* @__PURE__ */ s("div")({
+  name: "ButtonPctWrap",
   class: "b4iik8i",
   propsAsIs: !1
-}), m = /* @__PURE__ */ s("span")({
-  name: "ButtonBody",
+}), I = /* @__PURE__ */ s("div")({
+  name: "ButtonPct",
   class: "b1gq1lnf",
   propsAsIs: !1
-}), f = /* @__PURE__ */ s("div")({
+}), i = /* @__PURE__ */ s("span")({
+  name: "ButtonBody",
+  class: "b1j65z51",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ s("div")({
   name: "IconContainer",
-  class: "i1j65z51",
+  class: "i19tpfua",
   propsAsIs: !1
 }), u = /* @__PURE__ */ s("div")({
   name: "IconWrap",
-  class: "i19tpfua",
+  class: "i1tubmma",
   propsAsIs: !1
 }), n = /* @__PURE__ */ s("img")({
   name: "Icon",
-  class: "i1tubmma",
+  class: "i1grrgwj",
   propsAsIs: !1
-}), t = () => n, A = /* @__PURE__ */ s(t())({
+}), t = () => n, f = /* @__PURE__ */ s(t())({
   name: "IconDefault",
-  class: "i1grrgwj",
+  class: "ibemyq8",
   propsAsIs: !0
-}), a = () => n, d = /* @__PURE__ */ s(a())({
+}), a = () => n, A = /* @__PURE__ */ s(a())({
   name: "IconCircle",
-  class: "ibemyq8",
+  class: "i1dceht",
   propsAsIs: !0
-}), b = /* @__PURE__ */ s("span")({
+}), d = /* @__PURE__ */ s("span")({
   name: "Title",
-  class: "t1dceht",
+  class: "t116q4vq",
   propsAsIs: !1
 }), B = /* @__PURE__ */ s("span")({
   name: "Indicators",
-  class: "i116q4vq",
+  class: "i17ajcu2",
   propsAsIs: !1
-}), C = /* @__PURE__ */ s("span")({
+}), b = /* @__PURE__ */ s("span")({
   name: "Pts",
-  class: "p17ajcu2",
+  class: "pu9kmlb",
   propsAsIs: !1
-}), g = /* @__PURE__ */ s("span")({
+}), C = /* @__PURE__ */ s("span")({
   name: "Percentage",
-  class: "pu9kmlb",
+  class: "p1j2j0s0",
   propsAsIs: !1
 }), c = () => o, P = /* @__PURE__ */ s(c())({
   name: "CheckIcon",
-  class: "c1j2j0s0",
+  class: "c1mzj1sj",
   propsAsIs: !0
 });
 export {
-  m as ButtonBody,
-  I as ButtonContainer,
-  i as ButtonPct,
+  i as ButtonBody,
+  r as ButtonContainer,
+  I as ButtonPct,
+  l as ButtonPctWrap,
   P as CheckIcon,
   n as Icon,
-  d as IconCircle,
-  f as IconContainer,
-  A as IconDefault,
+  A as IconCircle,
+  m as IconContainer,
+  f as IconDefault,
   u as IconWrap,
   B as Indicators,
-  g as Percentage,
-  C as Pts,
-  b as Title
+  C as Percentage,
+  b as Pts,
+  d as Title
 };

package/lib/ui/gamification/vote/win-bar/index.js

@@ -1,55 +1,47 @@
-import { jsx as r, jsxs as n, Fragment as C } from "react/jsx-runtime";
-import { QuestionType as t } from "@streamlayer/sdk-web-types";
-import { AnimatedCounter as P } from "../../../animated-counter/index.js";
-import { Timer as s } from "../../../timer/index.js";
-import { ShowInContainer as I, WinBarContainer as f, Content as u, Title as O, WinIcon as T, Points as j, PointsCount as x, PointsUnits as y } from "./styles.js";
-import "react-countup";
-import "@linaria/react";
-import "react";
-import "react-countdown-circle-timer";
-import "../../../theme/constants.js";
-import "../../../icons/index.js";
-import "../../../show-in/index.js";
-import "@linaria/core";
-const F = ({
-  title: e,
-  points: o,
-  isPlayingTimer: m,
-  isTimer: a,
+import { jsx as n, jsxs as e, Fragment as P } from "react/jsx-runtime";
+import { QuestionType as i } from "@streamlayer/sdk-web-types";
+import { AnimatedCounter as s } from "../../../animated-counter/index.js";
+import { Timer as I } from "../../../timer/index.js";
+import { ShowInContainer as f, WinBarContainer as p, Content as u, Title as O, WinIcon as T, Points as j, PointsCount as x, PointsUnits as y } from "./styles.js";
+const b = ({
+  title: o,
+  points: t,
+  isPlayingTimer: a,
+  isTimer: m,
   animatePoints: c,
-  questionType: i,
+  questionType: r,
   timerDuration: d,
   votedInCurrentRender: l,
-  percentsAnimated: p,
-  onTimerExpired: h
-}) => /* @__PURE__ */ r(
-  I,
+  percentsAnimated: h,
+  onTimerExpired: C
+}) => /* @__PURE__ */ n(
+  f,
   {
-    enabled: i === t.PREDICTION && l,
-    animate: p,
-    children: /* @__PURE__ */ n(
-      f,
+    enabled: r === i.PREDICTION && l,
+    animate: h,
+    children: /* @__PURE__ */ e(
+      p,
       {
         style: {
-          justifyContent: i === t.PREDICTION ? "center" : "space-between"
+          justifyContent: r === i.PREDICTION ? "center" : "space-between"
         },
         children: [
-          /* @__PURE__ */ n(u, { children: [
-            e && /* @__PURE__ */ r(O, { children: e }),
-            o !== void 0 && i !== t.POLL && /* @__PURE__ */ n(C, { children: [
-              /* @__PURE__ */ r(T, { name: "icon-trophy" }),
-              /* @__PURE__ */ n(j, { children: [
-                /* @__PURE__ */ r(x, { children: c ? /* @__PURE__ */ r(P, { value: o, delay: 0.3 }) : o }),
-                /* @__PURE__ */ r(y, { children: "PTS" })
+          /* @__PURE__ */ e(u, { children: [
+            o && /* @__PURE__ */ n(O, { children: o }),
+            t !== void 0 && r !== i.POLL && /* @__PURE__ */ e(P, { children: [
+              /* @__PURE__ */ n(T, { name: "icon-trophy" }),
+              /* @__PURE__ */ e(j, { children: [
+                /* @__PURE__ */ n(x, { children: c ? /* @__PURE__ */ n(s, { value: t, delay: 0.3 }) : t }),
+                /* @__PURE__ */ n(y, { children: "PTS" })
               ] })
             ] })
           ] }),
-          a && i !== t.PREDICTION && /* @__PURE__ */ r(s, { isPlaying: m, onTimerExpired: h, duration: d })
+          m && r !== i.PREDICTION && /* @__PURE__ */ n(I, { isPlaying: a, onTimerExpired: C, duration: d })
         ]
       }
     )
   }
 );
 export {
-  F as WinBar
+  b as WinBar
 };

package/lib/ui/gamification/vote/win-bar/styles.js

@@ -1,49 +1,46 @@
 import { styled as s } from "@linaria/react";
 import { SvgIcon as n } from "../../../icons/index.js";
 import { GrowingShowIn as o } from "../../../show-in/index.js";
-import "react/jsx-runtime";
-import "react";
-import "@linaria/core";
-const t = () => o, m = /* @__PURE__ */ s(t())({
+const t = () => o, c = /* @__PURE__ */ s(t())({
   name: "ShowInContainer",
   class: "sie6cqo",
   propsAsIs: !0
-}), I = /* @__PURE__ */ s("div")({
+}), r = /* @__PURE__ */ s("div")({
   name: "WinBarContainer",
   class: "wgizw4u",
   propsAsIs: !1
-}), f = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ s("div")({
   name: "Content",
   class: "c1l3ucjp",
   propsAsIs: !1
-}), w = /* @__PURE__ */ s("div")({
+}), m = /* @__PURE__ */ s("div")({
   name: "Title",
   class: "tx7j799",
   propsAsIs: !1
-}), i = () => n, A = /* @__PURE__ */ s(i())({
+}), a = () => n, I = /* @__PURE__ */ s(a())({
   name: "WinIcon",
   class: "w4lwuj0",
   propsAsIs: !0
-}), C = /* @__PURE__ */ s("div")({
+}), f = /* @__PURE__ */ s("div")({
   name: "Points",
   class: "po9i64o",
   propsAsIs: !1
-}), u = /* @__PURE__ */ s("span")({
+}), w = /* @__PURE__ */ s("span")({
   name: "PointsCount",
   class: "pe5g05h",
   propsAsIs: !1
-}), d = /* @__PURE__ */ s("span")({
+}), A = /* @__PURE__ */ s("span")({
   name: "PointsUnits",
   class: "p1hdtpmb",
   propsAsIs: !1
 });
 export {
-  f as Content,
-  C as Points,
-  u as PointsCount,
-  d as PointsUnits,
-  m as ShowInContainer,
-  w as Title,
-  I as WinBarContainer,
-  A as WinIcon
+  l as Content,
+  f as Points,
+  w as PointsCount,
+  A as PointsUnits,
+  c as ShowInContainer,
+  m as Title,
+  r as WinBarContainer,
+  I as WinIcon
 };

package/lib/ui/login/demo.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import '@streamlayer/sdk-web-anonymous-auth';
 export declare const LoginComponent: React.FC<{
     sdk: StreamLayerSDK;
 }>;

package/lib/ui/login/demo.js

@@ -1,26 +1,14 @@
 import { jsx as r } from "react/jsx-runtime";
-import { useStore as m } from "@nanostores/react";
+import { useStore as e } from "@nanostores/react";
 import "@streamlayer/sdk-web-anonymous-auth";
-import { Login as n } from "./index.js";
-import "react";
-import "react-auth-code-input";
-import "react-phone-number-input";
-import "../timer/index.js";
-import "@linaria/react";
-import "react-countdown-circle-timer";
-import "../theme/constants.js";
-import "../../utils/login.js";
-import "@connectrpc/connect";
-import "@connectrpc/connect-web";
-import "@streamlayer/sl-eslib/users/users_connect";
-import "./styles.js";
-const j = ({ sdk: o }) => m(o.getUserStore()).data ? /* @__PURE__ */ r("button", { onClick: o.logout, children: "logout" }) : /* @__PURE__ */ r(n, { login: async (i) => {
+import { Login as i } from "./index.js";
+const c = ({ sdk: o }) => e(o.getUserStore()).data ? /* @__PURE__ */ r("button", { onClick: o.logout, children: "logout" }) : /* @__PURE__ */ r(i, { login: async (n) => {
   try {
-    await o.authorizationBypass("streamlayer:streamlayer", i);
+    await o.authorizationBypass("streamlayer:streamlayer", n);
   } catch (t) {
     throw console.log("login err", t), t;
   }
 }, anonymousLogin: o.anonymousAuthorization, host: o.host });
 export {
-  j as LoginComponent
+  c as LoginComponent
 };

package/lib/ui/login/index.js

@@ -1,60 +1,54 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { useState as a } from "react";
 import w from "react-auth-code-input";
 import P, { isValidPhoneNumber as F, formatPhoneNumberIntl as v } from "react-phone-number-input";
 import { Timer as D } from "../timer/index.js";
 import { requestLoginCode as I, register as k, login as S } from "../../utils/login.js";
-import { Panel as q, Form as u, FormTitle as p, FormDescription as d, FormInputContainer as x, FormSubmit as m, Digits as E } from "./styles.js";
-import "@linaria/react";
-import "react-countdown-circle-timer";
-import "../theme/constants.js";
-import "@connectrpc/connect";
-import "@connectrpc/connect-web";
-import "@streamlayer/sl-eslib/users/users_connect";
-const O = ({ login: s, anonymousLogin: h, host: c }) => {
-  const [n, g] = a(""), [i, b] = a(""), [l, f] = a(""), y = async (o) => {
-    o.preventDefault();
+import { Panel as q, Form as m, FormTitle as p, FormDescription as d, FormInputContainer as x, FormSubmit as s, Digits as E } from "./styles.js";
+const z = ({ login: h, anonymousLogin: u, host: c }) => {
+  const [o, g] = a(""), [i, b] = a(""), [l, f] = a(""), y = async (t) => {
+    t.preventDefault();
     try {
-      const r = n.replaceAll("+", "");
+      const n = o.replaceAll("+", "");
       try {
-        await I(c, r);
+        await I(c, n);
       } catch {
-        await k(c, r);
+        await k(c, n);
       }
-      b(r);
-    } catch (r) {
-      window.alert(r);
+      b(n);
+    } catch (n) {
+      window.alert(n);
     }
-  }, C = async (o) => {
-    if (o.preventDefault(), i && l)
+  }, C = async (t) => {
+    if (t.preventDefault(), i && l)
       try {
-        const r = await S(c, i, l);
-        r && s ? await s(r) : console.log("token", r);
-      } catch (r) {
-        window.alert(r);
+        const n = await S(c, i, l);
+        n && h ? await h(n) : console.log("token", n);
+      } catch (n) {
+        window.alert(n);
       }
   };
-  return /* @__PURE__ */ t(q, { children: [
-    !i && /* @__PURE__ */ t("div", { children: [
-      /* @__PURE__ */ t(u, { onSubmit: y, children: [
+  return /* @__PURE__ */ r(q, { children: [
+    !i && /* @__PURE__ */ r("div", { children: [
+      /* @__PURE__ */ r(m, { onSubmit: y, children: [
         /* @__PURE__ */ e(p, { children: "Enter your phone number" }),
         /* @__PURE__ */ e(d, { children: "Enter your phone up for number to log in or sign an account." }),
-        /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(P, { value: n, onChange: (o) => g(`${o}`) }) }),
-        /* @__PURE__ */ e(m, { disabled: !F(n), type: "submit", children: "request code" })
+        /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(P, { value: o, onChange: (t) => g(`${t}`) }) }),
+        /* @__PURE__ */ e(s, { disabled: !F(o), type: "submit", children: "request code" })
       ] }),
-      h && /* @__PURE__ */ e(m, { style: { display: "block", margin: "auto" }, onClick: h, children: "anonymous login" })
+      u && /* @__PURE__ */ e(s, { style: { display: "block", margin: "auto" }, onClick: u, children: "anonymous login" })
     ] }),
-    i && /* @__PURE__ */ t(u, { onSubmit: C, children: [
+    i && /* @__PURE__ */ r(m, { onSubmit: C, children: [
       /* @__PURE__ */ e(p, { children: "Enter Verification Code" }),
-      /* @__PURE__ */ t(d, { children: [
+      /* @__PURE__ */ r(d, { children: [
         "Please enter the verification code ",
         /* @__PURE__ */ e("br", {}),
         "sent to ",
-        /* @__PURE__ */ e("b", { children: v(n) })
+        /* @__PURE__ */ e("b", { children: v(o) })
       ] }),
       /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(w, { autoFocus: !0, allowedCharacters: "numeric", length: 4, onChange: f }) }),
-      /* @__PURE__ */ e(m, { disabled: l.length !== 4, type: "submit", children: "login" }),
-      /* @__PURE__ */ t(d, { children: [
+      /* @__PURE__ */ e(s, { disabled: l.length !== 4, type: "submit", children: "login" }),
+      /* @__PURE__ */ r(d, { children: [
         "Didn't get 59 the code? ",
         /* @__PURE__ */ e("br", {}),
         "Resend Code in",
@@ -64,5 +58,5 @@ const O = ({ login: s, anonymousLogin: h, host: c }) => {
   ] });
 };
 export {
-  O as Login
+  z as Login
 };