@cuemath/leap 3.1.5 → 3.1.6-j1

package/dist/features/auth/login/username-password-form/username-password-form.js

@@ -1,12 +1,13 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import { memo as f, useCallback as l } from "react";
 import w from "../../../ui/buttons/button/button.js";
-import $ from "../../../ui/buttons/text-button/text-button.js";
+import C from "../../../ui/buttons/text-button/text-button.js";
 import u from "../../../ui/inputs/text-input/text-input.js";
 import s from "../../../ui/layout/flex-view.js";
-import a from "../../../ui/separator/separator.js";
-import y from "../../comps/input-status-icon/input-status-icon.js";
-const C = ({
+import o from "../../../ui/separator/separator.js";
+import $ from "../../comps/input-status-icon/input-status-icon.js";
+import { FormContainer as y } from "../login-styled.js";
+const k = ({
   username: i,
   password: m,
   errors: r,
@@ -16,28 +17,28 @@ const C = ({
   onForgotPassword: h
 }) => {
   const c = d || !i.trim() || !m.trim(), g = l(
-    (o) => {
-      t("username", o.target.value);
+    (a) => {
+      t("username", a.target.value);
     },
     [t]
   ), b = l(
-    (o) => {
-      t("password", o.target.value);
+    (a) => {
+      t("password", a.target.value);
     },
     [t]
   );
   return /* @__PURE__ */ n(
     s,
     {
-      $gutterX: 2,
+      $gutterX: 1.5,
       $gapX: 1.5,
       $alignItems: "center",
       $justifyContent: "center",
       $background: "BLACK_2",
       $height: 308,
       children: [
-        /* @__PURE__ */ e(a, { heightX: 0.5 }),
-        /* @__PURE__ */ n("form", { onSubmit: p, children: [
+        /* @__PURE__ */ e(o, { heightX: 0.5 }),
+        /* @__PURE__ */ n(y, { onSubmit: p, children: [
           /* @__PURE__ */ n(s, { $alignItems: "center", $justifyContent: "center", children: [
             /* @__PURE__ */ e(
               u,
@@ -47,14 +48,14 @@ const C = ({
                 autoComplete: "username",
                 label: "Username",
                 value: i,
+                width: "100%",
                 onChange: g,
-                width: 330,
                 required: !0,
                 shape: "borderLess",
                 errorMessage: r.username
               }
             ),
-            /* @__PURE__ */ e(a, { height: 36 }),
+            /* @__PURE__ */ e(o, { height: 36 }),
             /* @__PURE__ */ e(
               u,
               {
@@ -63,18 +64,18 @@ const C = ({
                 autoComplete: "password",
                 label: "Password",
                 value: m,
+                width: "100%",
                 onChange: b,
-                width: 330,
                 required: !0,
                 shape: "borderLess",
                 errorMessage: r.password,
-                siblingElement: /* @__PURE__ */ e(y, { isError: !!r.password })
+                siblingElement: /* @__PURE__ */ e($, { isError: !!r.password })
               }
             )
           ] }),
-          /* @__PURE__ */ e(a, { heightX: 1.25 }),
-          /* @__PURE__ */ e(s, { $alignItems: "flex-end", children: /* @__PURE__ */ e($, { label: "Forgot Password?", onClick: h, color: "WHITE_T_60" }) }),
-          /* @__PURE__ */ e(a, { heightX: 2 }),
+          /* @__PURE__ */ e(o, { heightX: 1.25 }),
+          /* @__PURE__ */ e(s, { $alignItems: "flex-end", children: /* @__PURE__ */ e(C, { label: "Forgot Password?", onClick: h, color: "WHITE_T_60" }) }),
+          /* @__PURE__ */ e(o, { heightX: 2 }),
           /* @__PURE__ */ e(s, { $justifyContent: "center", children: /* @__PURE__ */ e(
             w,
             {
@@ -82,7 +83,7 @@ const C = ({
               renderAs: "secondary-dark",
               type: "submit",
               label: "Log in",
-              width: 336,
+              width: "100%",
               busy: d,
               disabled: c
             }
@@ -91,8 +92,8 @@ const C = ({
       ]
     }
   );
-}, A = f(C);
+}, B = f(k);
 export {
-  A as default
+  B as default
 };
 //# sourceMappingURL=username-password-form.js.map

package/dist/features/auth/login/username-password-form/username-password-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"username-password-form.js","sources":["../../../../../src/features/auth/login/username-password-form/username-password-form.tsx"],"sourcesContent":["import type { IUsernamePasswordFormProps } from './username-password-form-types';\n\nimport { type ChangeEvent, type FC, memo, useCallback } from 'react';\n\nimport Button from '../../../ui/buttons/button/button';\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport TextInput from '../../../ui/inputs/text-input/text-input';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport InputStatusIcon from '../../comps/input-status-icon/input-status-icon';\n\nconst UsernamePasswordForm: FC<IUsernamePasswordFormProps> = ({\n  username,\n  password,\n  errors,\n  isLoading,\n  onChange,\n  onSubmit,\n  onForgotPassword,\n}) => {\n  const isSubmitDisabled = isLoading || !username.trim() || !password.trim();\n\n  const handleUsernameChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      onChange('username', e.target.value);\n    },\n    [onChange],\n  );\n\n  const handlePasswordChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      onChange('password', e.target.value);\n    },\n    [onChange],\n  );\n\n  return (\n    <FlexView\n      $gutterX={2}\n      $gapX={1.5}\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      $background=\"BLACK_2\"\n      $height={308}\n    >\n      <Separator heightX={0.5} />\n      <form onSubmit={onSubmit}>\n        <FlexView $alignItems=\"center\" $justifyContent=\"center\">\n          <TextInput\n            renderAs={errors.username ? 'error-dark' : 'primary-dark'}\n            autoFocus\n            autoComplete=\"username\"\n            label=\"Username\"\n            value={username}\n            onChange={handleUsernameChange}\n            width={330}\n            required\n            shape=\"borderLess\"\n            errorMessage={errors.username}\n          />\n          <Separator height={36} />\n          <TextInput\n            type=\"password\"\n            renderAs={errors.password ? 'error-dark' : 'primary-dark'}\n            autoComplete=\"password\"\n            label=\"Password\"\n            value={password}\n            onChange={handlePasswordChange}\n            width={330}\n            required\n            shape=\"borderLess\"\n            errorMessage={errors.password}\n            siblingElement={<InputStatusIcon isError={!!errors.password} />}\n          />\n        </FlexView>\n        <Separator heightX={1.25} />\n        <FlexView $alignItems=\"flex-end\">\n          <TextButton label=\"Forgot Password?\" onClick={onForgotPassword} color=\"WHITE_T_60\" />\n        </FlexView>\n        <Separator heightX={2} />\n        <FlexView $justifyContent=\"center\">\n          <Button\n            size=\"small\"\n            renderAs=\"secondary-dark\"\n            type=\"submit\"\n            label=\"Log in\"\n            width={336}\n            busy={isLoading}\n            disabled={isSubmitDisabled}\n          />\n        </FlexView>\n      </form>\n    </FlexView>\n  );\n};\n\nexport default memo(UsernamePasswordForm);\n"],"names":["UsernamePasswordForm","username","password","errors","isLoading","onChange","onSubmit","onForgotPassword","isSubmitDisabled","handleUsernameChange","useCallback","e","handlePasswordChange","jsxs","FlexView","jsx","Separator","TextInput","InputStatusIcon","TextButton","Button","usernamePasswordForm","memo"],"mappings":";;;;;;;;AAWA,MAAMA,IAAuD,CAAC;AAAA,EAC5D,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AACF,MAAM;AACE,QAAAC,IAAmBJ,KAAa,CAACH,EAAS,UAAU,CAACC,EAAS,QAE9DO,IAAuBC;AAAA,IAC3B,CAACC,MAAqC;AAC3B,MAAAN,EAAA,YAAYM,EAAE,OAAO,KAAK;AAAA,IACrC;AAAA,IACA,CAACN,CAAQ;AAAA,EAAA,GAGLO,IAAuBF;AAAA,IAC3B,CAACC,MAAqC;AAC3B,MAAAN,EAAA,YAAYM,EAAE,OAAO,KAAK;AAAA,IACrC;AAAA,IACA,CAACN,CAAQ;AAAA,EAAA;AAIT,SAAA,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,OAAO;AAAA,MACP,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,aAAY;AAAA,MACZ,SAAS;AAAA,MAET,UAAA;AAAA,QAAC,gBAAAC,EAAAC,GAAA,EAAU,SAAS,IAAK,CAAA;AAAA,QACzB,gBAAAH,EAAC,UAAK,UAAAP,GACJ,UAAA;AAAA,UAAA,gBAAAO,EAACC,GAAS,EAAA,aAAY,UAAS,iBAAgB,UAC7C,UAAA;AAAA,YAAA,gBAAAC;AAAA,cAACE;AAAA,cAAA;AAAA,gBACC,UAAUd,EAAO,WAAW,eAAe;AAAA,gBAC3C,WAAS;AAAA,gBACT,cAAa;AAAA,gBACb,OAAM;AAAA,gBACN,OAAOF;AAAA,gBACP,UAAUQ;AAAA,gBACV,OAAO;AAAA,gBACP,UAAQ;AAAA,gBACR,OAAM;AAAA,gBACN,cAAcN,EAAO;AAAA,cAAA;AAAA,YACvB;AAAA,YACA,gBAAAY,EAACC,GAAU,EAAA,QAAQ,GAAI,CAAA;AAAA,YACvB,gBAAAD;AAAA,cAACE;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,UAAUd,EAAO,WAAW,eAAe;AAAA,gBAC3C,cAAa;AAAA,gBACb,OAAM;AAAA,gBACN,OAAOD;AAAA,gBACP,UAAUU;AAAA,gBACV,OAAO;AAAA,gBACP,UAAQ;AAAA,gBACR,OAAM;AAAA,gBACN,cAAcT,EAAO;AAAA,gBACrB,gBAAiB,gBAAAY,EAAAG,GAAA,EAAgB,SAAS,CAAC,CAACf,EAAO,UAAU;AAAA,cAAA;AAAA,YAC/D;AAAA,UAAA,GACF;AAAA,UACA,gBAAAY,EAACC,GAAU,EAAA,SAAS,KAAM,CAAA;AAAA,UACzB,gBAAAD,EAAAD,GAAA,EAAS,aAAY,YACpB,UAAC,gBAAAC,EAAAI,GAAA,EAAW,OAAM,oBAAmB,SAASZ,GAAkB,OAAM,aAAa,CAAA,GACrF;AAAA,UACA,gBAAAQ,EAACC,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,UACvB,gBAAAD,EAACD,GAAS,EAAA,iBAAgB,UACxB,UAAA,gBAAAC;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAS;AAAA,cACT,MAAK;AAAA,cACL,OAAM;AAAA,cACN,OAAO;AAAA,cACP,MAAMhB;AAAA,cACN,UAAUI;AAAA,YAAA;AAAA,UAAA,GAEd;AAAA,QAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEea,IAAAC,EAAKtB,CAAoB;"}
+{"version":3,"file":"username-password-form.js","sources":["../../../../../src/features/auth/login/username-password-form/username-password-form.tsx"],"sourcesContent":["import type { IUsernamePasswordFormProps } from './username-password-form-types';\n\nimport { type ChangeEvent, type FC, memo, useCallback } from 'react';\n\nimport Button from '../../../ui/buttons/button/button';\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport TextInput from '../../../ui/inputs/text-input/text-input';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport InputStatusIcon from '../../comps/input-status-icon/input-status-icon';\nimport * as Styled from '../login-styled';\n\nconst UsernamePasswordForm: FC<IUsernamePasswordFormProps> = ({\n  username,\n  password,\n  errors,\n  isLoading,\n  onChange,\n  onSubmit,\n  onForgotPassword,\n}) => {\n  const isSubmitDisabled = isLoading || !username.trim() || !password.trim();\n\n  const handleUsernameChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      onChange('username', e.target.value);\n    },\n    [onChange],\n  );\n\n  const handlePasswordChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      onChange('password', e.target.value);\n    },\n    [onChange],\n  );\n\n  return (\n    <FlexView\n      $gutterX={1.5}\n      $gapX={1.5}\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      $background=\"BLACK_2\"\n      $height={308}\n    >\n      <Separator heightX={0.5} />\n      <Styled.FormContainer onSubmit={onSubmit}>\n        <FlexView $alignItems=\"center\" $justifyContent=\"center\">\n          <TextInput\n            renderAs={errors.username ? 'error-dark' : 'primary-dark'}\n            autoFocus\n            autoComplete=\"username\"\n            label=\"Username\"\n            value={username}\n            width=\"100%\"\n            onChange={handleUsernameChange}\n            required\n            shape=\"borderLess\"\n            errorMessage={errors.username}\n          />\n          <Separator height={36} />\n          <TextInput\n            type=\"password\"\n            renderAs={errors.password ? 'error-dark' : 'primary-dark'}\n            autoComplete=\"password\"\n            label=\"Password\"\n            value={password}\n            width=\"100%\"\n            onChange={handlePasswordChange}\n            required\n            shape=\"borderLess\"\n            errorMessage={errors.password}\n            siblingElement={<InputStatusIcon isError={!!errors.password} />}\n          />\n        </FlexView>\n        <Separator heightX={1.25} />\n        <FlexView $alignItems=\"flex-end\">\n          <TextButton label=\"Forgot Password?\" onClick={onForgotPassword} color=\"WHITE_T_60\" />\n        </FlexView>\n        <Separator heightX={2} />\n        <FlexView $justifyContent=\"center\">\n          <Button\n            size=\"small\"\n            renderAs=\"secondary-dark\"\n            type=\"submit\"\n            label=\"Log in\"\n            width=\"100%\"\n            busy={isLoading}\n            disabled={isSubmitDisabled}\n          />\n        </FlexView>\n      </Styled.FormContainer>\n    </FlexView>\n  );\n};\n\nexport default memo(UsernamePasswordForm);\n"],"names":["UsernamePasswordForm","username","password","errors","isLoading","onChange","onSubmit","onForgotPassword","isSubmitDisabled","handleUsernameChange","useCallback","e","handlePasswordChange","jsxs","FlexView","jsx","Separator","Styled.FormContainer","TextInput","InputStatusIcon","TextButton","Button","usernamePasswordForm","memo"],"mappings":";;;;;;;;;AAYA,MAAMA,IAAuD,CAAC;AAAA,EAC5D,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AACF,MAAM;AACE,QAAAC,IAAmBJ,KAAa,CAACH,EAAS,UAAU,CAACC,EAAS,QAE9DO,IAAuBC;AAAA,IAC3B,CAACC,MAAqC;AAC3B,MAAAN,EAAA,YAAYM,EAAE,OAAO,KAAK;AAAA,IACrC;AAAA,IACA,CAACN,CAAQ;AAAA,EAAA,GAGLO,IAAuBF;AAAA,IAC3B,CAACC,MAAqC;AAC3B,MAAAN,EAAA,YAAYM,EAAE,OAAO,KAAK;AAAA,IACrC;AAAA,IACA,CAACN,CAAQ;AAAA,EAAA;AAIT,SAAA,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,OAAO;AAAA,MACP,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,aAAY;AAAA,MACZ,SAAS;AAAA,MAET,UAAA;AAAA,QAAC,gBAAAC,EAAAC,GAAA,EAAU,SAAS,IAAK,CAAA;AAAA,QACxB,gBAAAH,EAAAI,GAAA,EAAqB,UAAAX,GACpB,UAAA;AAAA,UAAA,gBAAAO,EAACC,GAAS,EAAA,aAAY,UAAS,iBAAgB,UAC7C,UAAA;AAAA,YAAA,gBAAAC;AAAA,cAACG;AAAA,cAAA;AAAA,gBACC,UAAUf,EAAO,WAAW,eAAe;AAAA,gBAC3C,WAAS;AAAA,gBACT,cAAa;AAAA,gBACb,OAAM;AAAA,gBACN,OAAOF;AAAA,gBACP,OAAM;AAAA,gBACN,UAAUQ;AAAA,gBACV,UAAQ;AAAA,gBACR,OAAM;AAAA,gBACN,cAAcN,EAAO;AAAA,cAAA;AAAA,YACvB;AAAA,YACA,gBAAAY,EAACC,GAAU,EAAA,QAAQ,GAAI,CAAA;AAAA,YACvB,gBAAAD;AAAA,cAACG;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,UAAUf,EAAO,WAAW,eAAe;AAAA,gBAC3C,cAAa;AAAA,gBACb,OAAM;AAAA,gBACN,OAAOD;AAAA,gBACP,OAAM;AAAA,gBACN,UAAUU;AAAA,gBACV,UAAQ;AAAA,gBACR,OAAM;AAAA,gBACN,cAAcT,EAAO;AAAA,gBACrB,gBAAiB,gBAAAY,EAAAI,GAAA,EAAgB,SAAS,CAAC,CAAChB,EAAO,UAAU;AAAA,cAAA;AAAA,YAC/D;AAAA,UAAA,GACF;AAAA,UACA,gBAAAY,EAACC,GAAU,EAAA,SAAS,KAAM,CAAA;AAAA,UACzB,gBAAAD,EAAAD,GAAA,EAAS,aAAY,YACpB,UAAC,gBAAAC,EAAAK,GAAA,EAAW,OAAM,oBAAmB,SAASb,GAAkB,OAAM,aAAa,CAAA,GACrF;AAAA,UACA,gBAAAQ,EAACC,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,UACvB,gBAAAD,EAACD,GAAS,EAAA,iBAAgB,UACxB,UAAA,gBAAAC;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAS;AAAA,cACT,MAAK;AAAA,cACL,OAAM;AAAA,cACN,OAAM;AAAA,cACN,MAAMjB;AAAA,cACN,UAAUI;AAAA,YAAA;AAAA,UAAA,GAEd;AAAA,QAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEec,IAAAC,EAAKvB,CAAoB;"}

package/dist/features/auth/user-list/user-item/user-item.js

@@ -1,49 +1,50 @@
-import { jsxs as h, jsx as t } from "react/jsx-runtime";
-import { memo as g, useCallback as u } from "react";
-import A from "../../../ui/avatar/avatar.js";
-import C from "../../../ui/separator/separator.js";
-import I from "../../../ui/text/text.js";
-import { AVATAR_CONFIGURATIONS as m } from "../user-list-constants.js";
-import { UserItemCard as d } from "./user-item-styled.js";
-const k = ({
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
+import { memo as u, useCallback as C } from "react";
+import A from "../../../hooks/use-viewport.js";
+import I from "../../../ui/avatar/avatar.js";
+import b from "../../../ui/separator/separator.js";
+import d from "../../../ui/text/text.js";
+import { AVATAR_CONFIGURATIONS as a } from "../user-list-constants.js";
+import { UserItemCard as k } from "./user-item-styled.js";
+const T = ({
   id: r,
-  phone: n,
-  username: s,
+  phone: s,
+  username: n,
   avatar: i,
-  index: e,
+  index: o,
   isLastItem: c,
-  onSelect: o,
-  avatarSize: l,
-  maxColumns: $,
-  cardSize: a
+  onSelect: e,
+  avatarSize: p,
+  maxColumns: l,
+  cardSize: m
 }) => {
-  const p = u(() => {
-    o(r);
-  }, [r, o]), f = i ?? m[e % m.length];
-  return /* @__PURE__ */ h(
-    d,
+  const { isCompact: $ } = A(), f = C(() => {
+    e(r);
+  }, [r, e]), h = i ?? a[o % a.length];
+  return /* @__PURE__ */ g(
+    k,
     {
-      onClick: p,
-      maxColumns: $,
-      $gutterX: 2,
-      $gapX: 2.81,
-      $width: a,
-      $height: a,
+      onClick: f,
+      maxColumns: l,
+      $gutterX: 1.5,
+      $gapX: 1.5,
+      $width: m,
+      $height: m,
       $alignItems: "center",
       $justifyContent: "center",
-      index: e,
+      index: o,
       isLastItem: c,
       $background: "BLACK_1",
       children: [
-        /* @__PURE__ */ t(A, { size: l, avatar: f }),
-        /* @__PURE__ */ t(C, { heightX: 0.5 }),
-        /* @__PURE__ */ t(I, { $color: "WHITE", $renderAs: "ab2", $align: "center", children: s || n })
+        /* @__PURE__ */ t(I, { size: p, avatar: h }),
+        /* @__PURE__ */ t(b, { heightX: 0.5 }),
+        /* @__PURE__ */ t(d, { $color: "WHITE", $renderAs: $ ? "ab3" : "ab2", $align: "center", children: n || s })
       ]
     },
     r
   );
-}, N = g(k);
+}, R = u(T);
 export {
-  N as default
+  R as default
 };
 //# sourceMappingURL=user-item.js.map

package/dist/features/auth/user-list/user-item/user-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-item.js","sources":["../../../../../src/features/auth/user-list/user-item/user-item.tsx"],"sourcesContent":["import type { IUserItemProps } from './user-item-types';\n\nimport { useCallback, type FC, memo } from 'react';\n\nimport Avatar from '../../../ui/avatar/avatar';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { AVATAR_CONFIGURATIONS } from '../user-list-constants';\nimport * as Styled from './user-item-styled';\n\nconst UserItem: FC<IUserItemProps> = ({\n  id,\n  phone,\n  username,\n  avatar,\n  index,\n  isLastItem,\n  onSelect,\n  avatarSize,\n  maxColumns,\n  cardSize,\n}) => {\n  const handleClick = useCallback(() => {\n    onSelect(id);\n  }, [id, onSelect]);\n\n  const avatarSource = avatar ?? AVATAR_CONFIGURATIONS[index % AVATAR_CONFIGURATIONS.length];\n\n  return (\n    <Styled.UserItemCard\n      key={id}\n      onClick={handleClick}\n      maxColumns={maxColumns}\n      $gutterX={2}\n      $gapX={2.81}\n      $width={cardSize}\n      $height={cardSize}\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      index={index}\n      isLastItem={isLastItem}\n      $background=\"BLACK_1\"\n    >\n      <Avatar size={avatarSize} avatar={avatarSource} />\n      <Separator heightX={0.5} />\n      <Text $color=\"WHITE\" $renderAs=\"ab2\" $align=\"center\">\n        {username || phone}\n      </Text>\n    </Styled.UserItemCard>\n  );\n};\n\nexport default memo(UserItem);\n"],"names":["UserItem","id","phone","username","avatar","index","isLastItem","onSelect","avatarSize","maxColumns","cardSize","handleClick","useCallback","avatarSource","AVATAR_CONFIGURATIONS","jsxs","Styled.UserItemCard","jsx","Avatar","Separator","Text","UserItem$1","memo"],"mappings":";;;;;;;AAUA,MAAMA,IAA+B,CAAC;AAAA,EACpC,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACE,QAAAC,IAAcC,EAAY,MAAM;AACpC,IAAAL,EAASN,CAAE;AAAA,EAAA,GACV,CAACA,GAAIM,CAAQ,CAAC,GAEXM,IAAeT,KAAUU,EAAsBT,IAAQS,EAAsB,MAAM;AAGvF,SAAA,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MAEC,SAASL;AAAA,MACT,YAAAF;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQC;AAAA,MACR,SAASA;AAAA,MACT,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,OAAAL;AAAA,MACA,YAAAC;AAAA,MACA,aAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAW,EAACC,GAAO,EAAA,MAAMV,GAAY,QAAQK,GAAc;AAAA,QAChD,gBAAAI,EAACE,GAAU,EAAA,SAAS,IAAK,CAAA;AAAA,QACzB,gBAAAF,EAACG,KAAK,QAAO,SAAQ,WAAU,OAAM,QAAO,UACzC,UAAAjB,KAAYD,EACf,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAjBKD;AAAA,EAAA;AAoBX,GAEeoB,IAAAC,EAAKtB,CAAQ;"}
+{"version":3,"file":"user-item.js","sources":["../../../../../src/features/auth/user-list/user-item/user-item.tsx"],"sourcesContent":["import type { IUserItemProps } from './user-item-types';\n\nimport { useCallback, type FC, memo } from 'react';\n\nimport useViewport from '../../../hooks/use-viewport';\nimport Avatar from '../../../ui/avatar/avatar';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { AVATAR_CONFIGURATIONS } from '../user-list-constants';\nimport * as Styled from './user-item-styled';\n\nconst UserItem: FC<IUserItemProps> = ({\n  id,\n  phone,\n  username,\n  avatar,\n  index,\n  isLastItem,\n  onSelect,\n  avatarSize,\n  maxColumns,\n  cardSize,\n}) => {\n  const { isCompact } = useViewport();\n  const handleClick = useCallback(() => {\n    onSelect(id);\n  }, [id, onSelect]);\n\n  const avatarSource = avatar ?? AVATAR_CONFIGURATIONS[index % AVATAR_CONFIGURATIONS.length];\n\n  return (\n    <Styled.UserItemCard\n      key={id}\n      onClick={handleClick}\n      maxColumns={maxColumns}\n      $gutterX={1.5}\n      $gapX={1.5}\n      $width={cardSize}\n      $height={cardSize}\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      index={index}\n      isLastItem={isLastItem}\n      $background=\"BLACK_1\"\n    >\n      <Avatar size={avatarSize} avatar={avatarSource} />\n      <Separator heightX={0.5} />\n      <Text $color=\"WHITE\" $renderAs={isCompact ? 'ab3' : 'ab2'} $align=\"center\">\n        {username || phone}\n      </Text>\n    </Styled.UserItemCard>\n  );\n};\n\nexport default memo(UserItem);\n"],"names":["UserItem","id","phone","username","avatar","index","isLastItem","onSelect","avatarSize","maxColumns","cardSize","isCompact","useViewport","handleClick","useCallback","avatarSource","AVATAR_CONFIGURATIONS","jsxs","Styled.UserItemCard","jsx","Avatar","Separator","Text","UserItem$1","memo"],"mappings":";;;;;;;;AAWA,MAAMA,IAA+B,CAAC;AAAA,EACpC,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACE,QAAA,EAAE,WAAAC,MAAcC,KAChBC,IAAcC,EAAY,MAAM;AACpC,IAAAP,EAASN,CAAE;AAAA,EAAA,GACV,CAACA,GAAIM,CAAQ,CAAC,GAEXQ,IAAeX,KAAUY,EAAsBX,IAAQW,EAAsB,MAAM;AAGvF,SAAA,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MAEC,SAASL;AAAA,MACT,YAAAJ;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQC;AAAA,MACR,SAASA;AAAA,MACT,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,OAAAL;AAAA,MACA,YAAAC;AAAA,MACA,aAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAa,EAACC,GAAO,EAAA,MAAMZ,GAAY,QAAQO,GAAc;AAAA,QAChD,gBAAAI,EAACE,GAAU,EAAA,SAAS,IAAK,CAAA;AAAA,QACzB,gBAAAF,EAACG,GAAK,EAAA,QAAO,SAAQ,WAAWX,IAAY,QAAQ,OAAO,QAAO,UAC/D,UAAAR,KAAYD,EACf,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAjBKD;AAAA,EAAA;AAoBX,GAEesB,IAAAC,EAAKxB,CAAQ;"}

package/dist/features/auth/user-list/user-list.js

@@ -1,56 +1,65 @@
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { jsxs as $, jsx as r } from "react/jsx-runtime";
 import { memo as g } from "react";
-import d from "../../../assets/line-icons/icons/plus.js";
-import u from "../../ui/layout/flex-view.js";
-import I from "./user-item/user-item.js";
-import { UserListWrapper as L, AddAccountButton as U } from "./user-list-styled.js";
-const j = ({
-  users: i,
-  onSelect: h,
-  showAddButton: s = !1,
-  onAddNew: c,
-  maxColumns: e = 5,
-  cardSize: t = 200,
-  avatarSize: a = 80
+import x from "../../../assets/line-icons/icons/plus.js";
+import I from "../../hooks/use-viewport.js";
+import L from "../../ui/layout/flex-view.js";
+import w from "./user-item/user-item.js";
+import { UserListWrapper as U, AddAccountButton as j } from "./user-list-styled.js";
+const v = ({
+  users: s,
+  onSelect: c,
+  showAddButton: i = !1,
+  onAddNew: l,
+  maxColumns: p = 5,
+  cardSize: u = 200,
+  avatarSize: h = 80
 }) => {
-  const o = i.length + (s ? 1 : 0);
-  return /* @__PURE__ */ f(L, { itemCount: o, maxColumns: e, cardWidth: t, children: [
-    i.map(({ id: m, username: p, user_avatar: l, phone: $ }, n) => /* @__PURE__ */ r(
-      I,
-      {
-        id: m,
-        onSelect: h,
-        cardSize: t,
-        index: n,
-        maxColumns: e,
-        avatarSize: a,
-        avatar: l,
-        phone: $,
-        username: p,
-        isLastItem: n === o - 1
-      },
-      m
-    )),
-    s && /* @__PURE__ */ r(
-      U,
-      {
-        isLastItem: !0,
-        index: o,
-        maxColumns: e,
-        $gutterX: 5,
-        $gapX: 5,
-        $background: "BLACK_3",
-        $width: t,
-        $height: t,
-        $alignItems: "center",
-        $justifyContent: "center",
-        onClick: c,
-        children: /* @__PURE__ */ r(u, { $width: 40, $height: 40, children: /* @__PURE__ */ r(d, { color: "WHITE", width: 40, height: 40 }) })
-      }
-    )
-  ] });
-}, X = g(j);
+  const e = s.length + (i ? 1 : 0), { isCompact: m } = I(), o = m ? 2 : p, t = m ? 180 : u;
+  return /* @__PURE__ */ $(
+    U,
+    {
+      itemCount: e,
+      maxColumns: o,
+      cardWidth: t,
+      children: [
+        s.map(({ id: n, username: d, user_avatar: C, phone: f }, a) => /* @__PURE__ */ r(
+          w,
+          {
+            id: n,
+            onSelect: c,
+            cardSize: t,
+            index: a,
+            maxColumns: o,
+            avatarSize: h,
+            avatar: C,
+            phone: f,
+            username: d,
+            isLastItem: a === e - 1
+          },
+          n
+        )),
+        i && /* @__PURE__ */ r(
+          j,
+          {
+            isLastItem: !0,
+            index: e,
+            maxColumns: o,
+            $gutterX: 5,
+            $gapX: 5,
+            $background: "BLACK_3",
+            $width: t,
+            $height: t,
+            $alignItems: "center",
+            $justifyContent: "center",
+            onClick: l,
+            children: /* @__PURE__ */ r(L, { $width: 40, $height: 40, children: /* @__PURE__ */ r(x, { color: "WHITE", width: 40, height: 40 }) })
+          }
+        )
+      ]
+    }
+  );
+}, _ = g(v);
 export {
-  X as default
+  _ as default
 };
 //# sourceMappingURL=user-list.js.map

package/dist/features/auth/user-list/user-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-list.js","sources":["../../../../src/features/auth/user-list/user-list.tsx"],"sourcesContent":["import type { IUserListProps } from './user-list-types';\n\nimport { type FC, memo } from 'react';\n\nimport PlusIcon from '../../../assets/line-icons/icons/plus';\nimport FlexView from '../../ui/layout/flex-view';\nimport UserItem from './user-item/user-item';\nimport * as Styled from './user-list-styled';\n\nconst UserList: FC<IUserListProps> = ({\n  users,\n  onSelect,\n  showAddButton = false,\n  onAddNew,\n  maxColumns = 5,\n  cardSize = 200,\n  avatarSize = 80,\n}) => {\n  const totalCards = users.length + (showAddButton ? 1 : 0);\n\n  return (\n    <Styled.UserListWrapper itemCount={totalCards} maxColumns={maxColumns} cardWidth={cardSize}>\n      {users.map(({ id, username, user_avatar: avatar, phone }, index) => (\n        <UserItem\n          key={id}\n          id={id}\n          onSelect={onSelect}\n          cardSize={cardSize}\n          index={index}\n          maxColumns={maxColumns}\n          avatarSize={avatarSize}\n          avatar={avatar}\n          phone={phone}\n          username={username}\n          isLastItem={index === totalCards - 1}\n        />\n      ))}\n\n      {showAddButton && (\n        <Styled.AddAccountButton\n          isLastItem\n          index={totalCards}\n          maxColumns={maxColumns}\n          $gutterX={5}\n          $gapX={5}\n          $background=\"BLACK_3\"\n          $width={cardSize}\n          $height={cardSize}\n          $alignItems=\"center\"\n          $justifyContent=\"center\"\n          onClick={onAddNew}\n        >\n          <FlexView $width={40} $height={40}>\n            <PlusIcon color=\"WHITE\" width={40} height={40} />\n          </FlexView>\n        </Styled.AddAccountButton>\n      )}\n    </Styled.UserListWrapper>\n  );\n};\n\nexport default memo(UserList);\n"],"names":["UserList","users","onSelect","showAddButton","onAddNew","maxColumns","cardSize","avatarSize","totalCards","jsxs","Styled.UserListWrapper","id","username","avatar","phone","index","jsx","UserItem","Styled.AddAccountButton","FlexView","PlusIcon","UserList$1","memo"],"mappings":";;;;;;AASA,MAAMA,IAA+B,CAAC;AAAA,EACpC,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AACf,MAAM;AACJ,QAAMC,IAAaP,EAAM,UAAUE,IAAgB,IAAI;AAGrD,SAAA,gBAAAM,EAACC,GAAA,EAAuB,WAAWF,GAAY,YAAAH,GAAwB,WAAWC,GAC/E,UAAA;AAAA,IAAML,EAAA,IAAI,CAAC,EAAE,IAAAU,GAAI,UAAAC,GAAU,aAAaC,GAAQ,OAAAC,KAASC,MACxD,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QAEC,IAAAN;AAAA,QACA,UAAAT;AAAA,QACA,UAAAI;AAAA,QACA,OAAAS;AAAA,QACA,YAAAV;AAAA,QACA,YAAAE;AAAA,QACA,QAAAM;AAAA,QACA,OAAAC;AAAA,QACA,UAAAF;AAAA,QACA,YAAYG,MAAUP,IAAa;AAAA,MAAA;AAAA,MAV9BG;AAAA,IAAA,CAYR;AAAA,IAEAR,KACC,gBAAAa;AAAA,MAACE;AAAAA,MAAA;AAAA,QACC,YAAU;AAAA,QACV,OAAOV;AAAA,QACP,YAAAH;AAAA,QACA,UAAU;AAAA,QACV,OAAO;AAAA,QACP,aAAY;AAAA,QACZ,QAAQC;AAAA,QACR,SAASA;AAAA,QACT,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAChB,SAASF;AAAA,QAET,UAAC,gBAAAY,EAAAG,GAAA,EAAS,QAAQ,IAAI,SAAS,IAC7B,UAAA,gBAAAH,EAACI,GAAS,EAAA,OAAM,SAAQ,OAAO,IAAI,QAAQ,GAAI,CAAA,GACjD;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,EAAA,CAAA;AAEJ,GAEeC,IAAAC,EAAKtB,CAAQ;"}
+{"version":3,"file":"user-list.js","sources":["../../../../src/features/auth/user-list/user-list.tsx"],"sourcesContent":["import type { IUserListProps } from './user-list-types';\n\nimport { type FC, memo } from 'react';\n\nimport PlusIcon from '../../../assets/line-icons/icons/plus';\nimport useViewport from '../../hooks/use-viewport';\nimport FlexView from '../../ui/layout/flex-view';\nimport UserItem from './user-item/user-item';\nimport * as Styled from './user-list-styled';\n\nconst UserList: FC<IUserListProps> = ({\n  users,\n  onSelect,\n  showAddButton = false,\n  onAddNew,\n  maxColumns = 5,\n  cardSize = 200,\n  avatarSize = 80,\n}) => {\n  const totalCards = users.length + (showAddButton ? 1 : 0);\n  const { isCompact } = useViewport();\n\n  const responsiveColumnNos = isCompact ? 2 : maxColumns;\n  const responsiveCardSize = isCompact ? 180 : cardSize;\n\n  return (\n    <Styled.UserListWrapper\n      itemCount={totalCards}\n      maxColumns={responsiveColumnNos}\n      cardWidth={responsiveCardSize}\n    >\n      {users.map(({ id, username, user_avatar: avatar, phone }, index) => (\n        <UserItem\n          key={id}\n          id={id}\n          onSelect={onSelect}\n          cardSize={responsiveCardSize}\n          index={index}\n          maxColumns={responsiveColumnNos}\n          avatarSize={avatarSize}\n          avatar={avatar}\n          phone={phone}\n          username={username}\n          isLastItem={index === totalCards - 1}\n        />\n      ))}\n\n      {showAddButton && (\n        <Styled.AddAccountButton\n          isLastItem\n          index={totalCards}\n          maxColumns={responsiveColumnNos}\n          $gutterX={5}\n          $gapX={5}\n          $background=\"BLACK_3\"\n          $width={responsiveCardSize}\n          $height={responsiveCardSize}\n          $alignItems=\"center\"\n          $justifyContent=\"center\"\n          onClick={onAddNew}\n        >\n          <FlexView $width={40} $height={40}>\n            <PlusIcon color=\"WHITE\" width={40} height={40} />\n          </FlexView>\n        </Styled.AddAccountButton>\n      )}\n    </Styled.UserListWrapper>\n  );\n};\n\nexport default memo(UserList);\n"],"names":["UserList","users","onSelect","showAddButton","onAddNew","maxColumns","cardSize","avatarSize","totalCards","isCompact","useViewport","responsiveColumnNos","responsiveCardSize","jsxs","Styled.UserListWrapper","id","username","avatar","phone","index","jsx","UserItem","Styled.AddAccountButton","FlexView","PlusIcon","UserList$1","memo"],"mappings":";;;;;;;AAUA,MAAMA,IAA+B,CAAC;AAAA,EACpC,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AACf,MAAM;AACJ,QAAMC,IAAaP,EAAM,UAAUE,IAAgB,IAAI,IACjD,EAAE,WAAAM,MAAcC,KAEhBC,IAAsBF,IAAY,IAAIJ,GACtCO,IAAqBH,IAAY,MAAMH;AAG3C,SAAA,gBAAAO;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWN;AAAA,MACX,YAAYG;AAAA,MACZ,WAAWC;AAAA,MAEV,UAAA;AAAA,QAAMX,EAAA,IAAI,CAAC,EAAE,IAAAc,GAAI,UAAAC,GAAU,aAAaC,GAAQ,OAAAC,KAASC,MACxD,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YAEC,IAAAN;AAAA,YACA,UAAAb;AAAA,YACA,UAAUU;AAAA,YACV,OAAAO;AAAA,YACA,YAAYR;AAAA,YACZ,YAAAJ;AAAA,YACA,QAAAU;AAAA,YACA,OAAAC;AAAA,YACA,UAAAF;AAAA,YACA,YAAYG,MAAUX,IAAa;AAAA,UAAA;AAAA,UAV9BO;AAAA,QAAA,CAYR;AAAA,QAEAZ,KACC,gBAAAiB;AAAA,UAACE;AAAAA,UAAA;AAAA,YACC,YAAU;AAAA,YACV,OAAOd;AAAA,YACP,YAAYG;AAAA,YACZ,UAAU;AAAA,YACV,OAAO;AAAA,YACP,aAAY;AAAA,YACZ,QAAQC;AAAA,YACR,SAASA;AAAA,YACT,aAAY;AAAA,YACZ,iBAAgB;AAAA,YAChB,SAASR;AAAA,YAET,UAAC,gBAAAgB,EAAAG,GAAA,EAAS,QAAQ,IAAI,SAAS,IAC7B,UAAA,gBAAAH,EAACI,GAAS,EAAA,OAAM,SAAQ,OAAO,IAAI,QAAQ,GAAI,CAAA,GACjD;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,GAEeC,IAAAC,EAAK1B,CAAQ;"}

package/dist/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.js

@@ -1,118 +1,118 @@
-import { useCallback as a, useRef as C, useEffect as T } from "react";
+import { useCallback as c, useRef as C, useEffect as T } from "react";
 import { CircleSoundKeyMapper as A, SWIPE_SOUND_ORDER as E } from "./constants.js";
-import { CircleSoundKey as e } from "./use-circle-sounds-enums.js";
-let I = 0;
-const r = {
-  [e.BACKGROUND]: null,
-  [e.BACKGROUND_RUSHHOUR]: null,
-  [e.TUTORIAL]: null,
-  [e.SWIPE_01]: null,
-  [e.SWIPE_02]: null,
-  [e.SWIPE_03]: null,
-  [e.SWIPE_04]: null,
-  [e.SWIPE_DOWN]: null,
-  [e.TOGGLE]: null,
-  [e.POINTS_AWARDED]: null,
-  [e.POINTS_ADDED]: null,
-  [e.GAME_CARD_CLICK]: null,
-  [e.CLOCK_IN]: null,
-  [e.CLOCK_OUT]: null,
-  [e.ACCURACY_IN]: null,
-  [e.ACCURACY_OUT]: null,
-  [e.STREAK_IN]: null,
-  [e.STREAK_OUT]: null,
-  [e.ACCURACY_INTRO]: null,
-  [e.ACCURACY_TARGET]: null,
-  [e.TIME_INTRO]: null,
-  [e.TIME_TARGET]: null,
-  [e.METER_FILL]: null
-}, f = {}, D = () => {
-  const c = a((n) => {
-    if (!r[n]) {
-      const l = new Audio(A[n]);
-      r[n] = l;
+import { CircleSoundKey as n } from "./use-circle-sounds-enums.js";
+let d = 0;
+const o = {
+  [n.BACKGROUND]: null,
+  [n.BACKGROUND_RUSHHOUR]: null,
+  [n.TUTORIAL]: null,
+  [n.SWIPE_01]: null,
+  [n.SWIPE_02]: null,
+  [n.SWIPE_03]: null,
+  [n.SWIPE_04]: null,
+  [n.SWIPE_DOWN]: null,
+  [n.TOGGLE]: null,
+  [n.POINTS_AWARDED]: null,
+  [n.POINTS_ADDED]: null,
+  [n.GAME_CARD_CLICK]: null,
+  [n.CLOCK_IN]: null,
+  [n.CLOCK_OUT]: null,
+  [n.ACCURACY_IN]: null,
+  [n.ACCURACY_OUT]: null,
+  [n.STREAK_IN]: null,
+  [n.STREAK_OUT]: null,
+  [n.ACCURACY_INTRO]: null,
+  [n.ACCURACY_TARGET]: null,
+  [n.TIME_INTRO]: null,
+  [n.TIME_TARGET]: null,
+  [n.METER_FILL]: null
+}, I = {}, D = () => {
+  const s = c((e) => {
+    if (!o[e]) {
+      const l = new Audio(A[e]);
+      o[e] = l;
     }
-  }, []), v = C(/* @__PURE__ */ new Set()), o = C({}), p = a(() => {
-    document.visibilityState === "hidden" ? Object.keys(r).forEach((n) => {
-      const l = r[n];
-      l && !l.paused && (l.pause(), v.current.add(n));
-    }) : document.visibilityState === "visible" && (v.current.forEach((n) => {
-      const l = r[n];
+  }, []), f = C(/* @__PURE__ */ new Set()), p = C({}), v = c(() => {
+    document.visibilityState === "hidden" ? Object.keys(o).forEach((e) => {
+      const l = o[e];
+      l && !l.paused && (l.pause(), f.current.add(e));
+    }) : document.visibilityState === "visible" && (f.current.forEach((e) => {
+      const l = o[e];
       l == null || l.play();
-    }), v.current.clear());
+    }), f.current.clear());
   }, []);
   T(() => {
-    document.addEventListener("visibilitychange", p);
-    const n = o.current;
+    document.addEventListener("visibilitychange", v);
+    const e = p.current;
     return () => {
-      document.removeEventListener("visibilitychange", p);
-      for (const l of Object.values(n))
+      document.removeEventListener("visibilitychange", v);
+      for (const l of Object.values(e))
         l != null && clearInterval(l);
     };
-  }, [p]);
-  const S = a(() => {
+  }, [v]);
+  const S = c(() => {
     var l;
     E.forEach((u) => {
-      c(u);
+      s(u);
     });
-    const n = E[I] || e.SWIPE_01;
-    I < E.length - 1 ? I++ : I = 0, (l = r[n]) == null || l.play();
-  }, [c]), m = a(() => {
+    const e = E[d] || n.SWIPE_01;
+    d < E.length - 1 ? d++ : d = 0, (l = o[e]) == null || l.play();
+  }, [s]), m = c(() => {
     var l;
-    return c(e.TOGGLE), (l = r[e.TOGGLE]) == null ? void 0 : l.play();
-  }, [c]), _ = a(
-    (n, l = !0, u = !1) => {
-      c(n);
-      const t = r[n];
+    return s(n.TOGGLE), (l = o[n.TOGGLE]) == null ? void 0 : l.play();
+  }, [s]), _ = c(
+    (e, l = !0, u = !1) => {
+      s(e);
+      const t = o[e];
       if (!t) return;
-      if (o.current[n] && clearInterval(o.current[n]), !t.paused && t.currentTime > 0 && !t.ended)
+      if (!t.paused && t.currentTime > 0 && !t.ended)
         return t;
       if (t.loop = u, l) {
         t.volume = 1;
-        const d = t.play();
-        f[n] = d;
+        const a = t.play();
+        I[e] = a;
         return;
       }
       t.volume = 0;
-      const s = t.play();
-      f[n] = s;
+      const r = t.play();
+      I[e] = r;
       const i = setInterval(() => {
         if (!t) {
           clearInterval(i);
           return;
         }
-        const d = t.volume || 0;
-        d < 1 ? t.volume = Math.min(d + 0.1, 1) : clearInterval(i);
+        const a = t.volume || 0;
+        a < 1 ? t.volume = Math.min(a + 0.1, 1) : clearInterval(i);
       }, 100);
-      return o.current[n] = i, t;
+      return p.current[e] = i, t;
     },
-    [c]
-  ), R = a((n, l = !0) => {
+    [s]
+  ), R = c((e, l = !0) => {
     var t;
-    const u = r[n];
-    f[n] !== void 0 && ((t = f[n]) == null || t.then(() => {
+    const u = o[e];
+    I[e] !== void 0 && ((t = I[e]) == null || t.then(() => {
       if (!u) return;
-      if (o.current[n] && clearInterval(o.current[n]), l) {
+      if (l) {
         u.pause();
         return;
       }
-      const s = setInterval(() => {
+      const r = setInterval(() => {
         if (!u) {
-          clearInterval(s);
+          clearInterval(r);
           return;
         }
         const i = u.volume || 0;
-        i - 0.1 <= 0 ? (u.volume = 0, u.pause(), clearInterval(s)) : u.volume = i - 0.1;
+        i - 0.1 <= 0 ? (u.volume = 0, u.pause(), clearInterval(r)) : u.volume = i - 0.1;
       }, 100);
-      o.current[n] = s;
-    }).catch((s) => {
-      console.log("sound not playing", s);
+      p.current[e] = r;
+    }).catch((r) => {
+      console.log("sound not playing", r);
     }));
   }, []);
   return { playSwipSound: S, play: _, stop: R, playButtonSound: m };
 };
 export {
-  r as soundMapper,
+  o as soundMapper,
   D as useCircleSounds
 };
 //# sourceMappingURL=use-circle-sounds.js.map

package/dist/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-circle-sounds.js","sources":["../../../../../src/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.ts"],"sourcesContent":["import type { TimeoutMap } from './use-circle-sound-types';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { CircleSoundKeyMapper, SWIPE_SOUND_ORDER } from './constants';\nimport { CircleSoundKey } from './use-circle-sounds-enums';\n\nlet swipeSoundIndex = 0;\n\nexport const soundMapper: Record<keyof typeof CircleSoundKeyMapper, null | HTMLAudioElement> = {\n  [CircleSoundKey.BACKGROUND]: null,\n  [CircleSoundKey.BACKGROUND_RUSHHOUR]: null,\n  [CircleSoundKey.TUTORIAL]: null,\n  [CircleSoundKey.SWIPE_01]: null,\n  [CircleSoundKey.SWIPE_02]: null,\n  [CircleSoundKey.SWIPE_03]: null,\n  [CircleSoundKey.SWIPE_04]: null,\n  [CircleSoundKey.SWIPE_DOWN]: null,\n  [CircleSoundKey.TOGGLE]: null,\n  [CircleSoundKey.POINTS_AWARDED]: null,\n  [CircleSoundKey.POINTS_ADDED]: null,\n  [CircleSoundKey.GAME_CARD_CLICK]: null,\n  [CircleSoundKey.CLOCK_IN]: null,\n  [CircleSoundKey.CLOCK_OUT]: null,\n  [CircleSoundKey.ACCURACY_IN]: null,\n  [CircleSoundKey.ACCURACY_OUT]: null,\n  [CircleSoundKey.STREAK_IN]: null,\n  [CircleSoundKey.STREAK_OUT]: null,\n  [CircleSoundKey.ACCURACY_INTRO]: null,\n  [CircleSoundKey.ACCURACY_TARGET]: null,\n  [CircleSoundKey.TIME_INTRO]: null,\n  [CircleSoundKey.TIME_TARGET]: null,\n  [CircleSoundKey.METER_FILL]: null,\n};\n\nconst soundInstancePromise: Partial<Record<keyof typeof CircleSoundKeyMapper, Promise<void>>> = {};\n\nexport const useCircleSounds = () => {\n  const loadSound = useCallback((key: CircleSoundKey) => {\n    if (!soundMapper[key]) {\n      const loadedSound = new Audio(CircleSoundKeyMapper[key]);\n\n      soundMapper[key] = loadedSound;\n    }\n  }, []);\n\n  const pausedSoundsRef = useRef<Set<CircleSoundKey>>(new Set());\n  const timeoutRefs = useRef<TimeoutMap>({});\n\n  const handleVisibilityChange = useCallback(() => {\n    if (document.visibilityState === 'hidden') {\n      (Object.keys(soundMapper) as CircleSoundKey[]).forEach(key => {\n        const sound = soundMapper[key];\n\n        if (sound && !sound.paused) {\n          sound.pause();\n          pausedSoundsRef.current.add(key);\n        }\n      });\n    } else if (document.visibilityState === 'visible') {\n      pausedSoundsRef.current.forEach(key => {\n        const sound = soundMapper[key];\n\n        sound?.play();\n      });\n      pausedSoundsRef.current.clear();\n    }\n  }, []);\n\n  useEffect(() => {\n    document.addEventListener('visibilitychange', handleVisibilityChange);\n    const timeouts = timeoutRefs.current;\n\n    return () => {\n      document.removeEventListener('visibilitychange', handleVisibilityChange);\n      for (const id of Object.values(timeouts)) {\n        if (id != null) clearInterval(id);\n      }\n    };\n  }, [handleVisibilityChange]);\n\n  const playSwipSound = useCallback(() => {\n    SWIPE_SOUND_ORDER.forEach(key => {\n      loadSound(key);\n    });\n\n    const key = SWIPE_SOUND_ORDER[swipeSoundIndex] || CircleSoundKey.SWIPE_01;\n\n    if (swipeSoundIndex < SWIPE_SOUND_ORDER.length - 1) {\n      swipeSoundIndex++;\n    } else {\n      swipeSoundIndex = 0;\n    }\n    soundMapper[key]?.play();\n  }, [loadSound]);\n\n  const playButtonSound = useCallback(() => {\n    loadSound(CircleSoundKey.TOGGLE);\n    const sound = soundMapper[CircleSoundKey.TOGGLE]?.play();\n\n    return sound;\n  }, [loadSound]);\n\n  const play = useCallback(\n    (key: CircleSoundKey, immediately: boolean = true, loop = false) => {\n      loadSound(key);\n      const soundInstance = soundMapper[key];\n\n      if (!soundInstance) return;\n\n      if (timeoutRefs.current[key]) {\n        clearInterval(timeoutRefs.current[key]);\n      }\n\n      if (!soundInstance.paused && soundInstance.currentTime > 0 && !soundInstance.ended) {\n        return soundInstance;\n      }\n\n      soundInstance.loop = loop;\n      if (immediately) {\n        soundInstance.volume = 1;\n        const promise = soundInstance.play();\n\n        soundInstancePromise[key] = promise;\n\n        return;\n      }\n\n      soundInstance.volume = 0;\n      const promise = soundInstance.play();\n\n      soundInstancePromise[key] = promise;\n\n      const intervalId = setInterval(() => {\n        if (!soundInstance) {\n          clearInterval(intervalId);\n\n          return;\n        }\n\n        const vol = soundInstance.volume || 0;\n\n        if (vol < 1) {\n          soundInstance.volume = Math.min(vol + 0.1, 1);\n        } else {\n          clearInterval(intervalId);\n        }\n      }, 100);\n\n      timeoutRefs.current[key] = intervalId;\n\n      return soundInstance;\n    },\n    [loadSound],\n  );\n\n  const stop = useCallback((key: CircleSoundKey, immediately: boolean = true) => {\n    const soundInstance = soundMapper[key];\n\n    if (soundInstancePromise[key] !== undefined) {\n      soundInstancePromise[key]\n        ?.then(() => {\n          if (!soundInstance) return;\n\n          if (timeoutRefs.current[key]) {\n            clearInterval(timeoutRefs.current[key]);\n          }\n\n          if (immediately) {\n            soundInstance.pause();\n\n            return;\n          }\n\n          const intervalId = setInterval(() => {\n            if (!soundInstance) {\n              clearInterval(intervalId);\n\n              return;\n            }\n\n            const vol = soundInstance.volume || 0;\n\n            if (vol - 0.1 <= 0) {\n              soundInstance.volume = 0;\n              soundInstance.pause();\n              clearInterval(intervalId);\n            } else {\n              soundInstance.volume = vol - 0.1;\n            }\n          }, 100);\n\n          timeoutRefs.current[key] = intervalId;\n        })\n        .catch(err => {\n          // eslint-disable-next-line no-console\n          console.log('sound not playing', err);\n        });\n    }\n  }, []);\n\n  return { playSwipSound, play, stop, playButtonSound };\n};\n"],"names":["swipeSoundIndex","soundMapper","CircleSoundKey","soundInstancePromise","useCircleSounds","loadSound","useCallback","key","loadedSound","CircleSoundKeyMapper","pausedSoundsRef","useRef","timeoutRefs","handleVisibilityChange","sound","useEffect","timeouts","id","playSwipSound","SWIPE_SOUND_ORDER","_a","playButtonSound","play","immediately","loop","soundInstance","promise","intervalId","vol","stop","err"],"mappings":"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"}
+{"version":3,"file":"use-circle-sounds.js","sources":["../../../../../src/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.ts"],"sourcesContent":["import type { TimeoutMap } from './use-circle-sound-types';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { CircleSoundKeyMapper, SWIPE_SOUND_ORDER } from './constants';\nimport { CircleSoundKey } from './use-circle-sounds-enums';\n\nlet swipeSoundIndex = 0;\n\nexport const soundMapper: Record<keyof typeof CircleSoundKeyMapper, null | HTMLAudioElement> = {\n  [CircleSoundKey.BACKGROUND]: null,\n  [CircleSoundKey.BACKGROUND_RUSHHOUR]: null,\n  [CircleSoundKey.TUTORIAL]: null,\n  [CircleSoundKey.SWIPE_01]: null,\n  [CircleSoundKey.SWIPE_02]: null,\n  [CircleSoundKey.SWIPE_03]: null,\n  [CircleSoundKey.SWIPE_04]: null,\n  [CircleSoundKey.SWIPE_DOWN]: null,\n  [CircleSoundKey.TOGGLE]: null,\n  [CircleSoundKey.POINTS_AWARDED]: null,\n  [CircleSoundKey.POINTS_ADDED]: null,\n  [CircleSoundKey.GAME_CARD_CLICK]: null,\n  [CircleSoundKey.CLOCK_IN]: null,\n  [CircleSoundKey.CLOCK_OUT]: null,\n  [CircleSoundKey.ACCURACY_IN]: null,\n  [CircleSoundKey.ACCURACY_OUT]: null,\n  [CircleSoundKey.STREAK_IN]: null,\n  [CircleSoundKey.STREAK_OUT]: null,\n  [CircleSoundKey.ACCURACY_INTRO]: null,\n  [CircleSoundKey.ACCURACY_TARGET]: null,\n  [CircleSoundKey.TIME_INTRO]: null,\n  [CircleSoundKey.TIME_TARGET]: null,\n  [CircleSoundKey.METER_FILL]: null,\n};\n\nconst soundInstancePromise: Partial<Record<keyof typeof CircleSoundKeyMapper, Promise<void>>> = {};\n\nexport const useCircleSounds = () => {\n  const loadSound = useCallback((key: CircleSoundKey) => {\n    if (!soundMapper[key]) {\n      const loadedSound = new Audio(CircleSoundKeyMapper[key]);\n\n      soundMapper[key] = loadedSound;\n    }\n  }, []);\n\n  const pausedSoundsRef = useRef<Set<CircleSoundKey>>(new Set());\n  const timeoutRefs = useRef<TimeoutMap>({});\n\n  const handleVisibilityChange = useCallback(() => {\n    if (document.visibilityState === 'hidden') {\n      (Object.keys(soundMapper) as CircleSoundKey[]).forEach(key => {\n        const sound = soundMapper[key];\n\n        if (sound && !sound.paused) {\n          sound.pause();\n          pausedSoundsRef.current.add(key);\n        }\n      });\n    } else if (document.visibilityState === 'visible') {\n      pausedSoundsRef.current.forEach(key => {\n        const sound = soundMapper[key];\n\n        sound?.play();\n      });\n      pausedSoundsRef.current.clear();\n    }\n  }, []);\n\n  useEffect(() => {\n    document.addEventListener('visibilitychange', handleVisibilityChange);\n    const timeouts = timeoutRefs.current;\n\n    return () => {\n      document.removeEventListener('visibilitychange', handleVisibilityChange);\n      for (const id of Object.values(timeouts)) {\n        if (id != null) clearInterval(id);\n      }\n    };\n  }, [handleVisibilityChange]);\n\n  const playSwipSound = useCallback(() => {\n    SWIPE_SOUND_ORDER.forEach(key => {\n      loadSound(key);\n    });\n\n    const key = SWIPE_SOUND_ORDER[swipeSoundIndex] || CircleSoundKey.SWIPE_01;\n\n    if (swipeSoundIndex < SWIPE_SOUND_ORDER.length - 1) {\n      swipeSoundIndex++;\n    } else {\n      swipeSoundIndex = 0;\n    }\n    soundMapper[key]?.play();\n  }, [loadSound]);\n\n  const playButtonSound = useCallback(() => {\n    loadSound(CircleSoundKey.TOGGLE);\n    const sound = soundMapper[CircleSoundKey.TOGGLE]?.play();\n\n    return sound;\n  }, [loadSound]);\n\n  const play = useCallback(\n    (key: CircleSoundKey, immediately: boolean = true, loop = false) => {\n      loadSound(key);\n      const soundInstance = soundMapper[key];\n\n      if (!soundInstance) return;\n\n      if (!soundInstance.paused && soundInstance.currentTime > 0 && !soundInstance.ended) {\n        return soundInstance;\n      }\n\n      soundInstance.loop = loop;\n      if (immediately) {\n        soundInstance.volume = 1;\n        const promise = soundInstance.play();\n\n        soundInstancePromise[key] = promise;\n\n        return;\n      }\n\n      soundInstance.volume = 0;\n      const promise = soundInstance.play();\n\n      soundInstancePromise[key] = promise;\n\n      const intervalId = setInterval(() => {\n        if (!soundInstance) {\n          clearInterval(intervalId);\n\n          return;\n        }\n\n        const vol = soundInstance.volume || 0;\n\n        if (vol < 1) {\n          soundInstance.volume = Math.min(vol + 0.1, 1);\n        } else {\n          clearInterval(intervalId);\n        }\n      }, 100);\n\n      timeoutRefs.current[key] = intervalId;\n\n      return soundInstance;\n    },\n    [loadSound],\n  );\n\n  const stop = useCallback((key: CircleSoundKey, immediately: boolean = true) => {\n    const soundInstance = soundMapper[key];\n\n    if (soundInstancePromise[key] !== undefined) {\n      soundInstancePromise[key]\n        ?.then(() => {\n          if (!soundInstance) return;\n\n          if (immediately) {\n            soundInstance.pause();\n\n            return;\n          }\n\n          const intervalId = setInterval(() => {\n            if (!soundInstance) {\n              clearInterval(intervalId);\n\n              return;\n            }\n\n            const vol = soundInstance.volume || 0;\n\n            if (vol - 0.1 <= 0) {\n              soundInstance.volume = 0;\n              soundInstance.pause();\n              clearInterval(intervalId);\n            } else {\n              soundInstance.volume = vol - 0.1;\n            }\n          }, 100);\n\n          timeoutRefs.current[key] = intervalId;\n        })\n        .catch(err => {\n          // eslint-disable-next-line no-console\n          console.log('sound not playing', err);\n        });\n    }\n  }, []);\n\n  return { playSwipSound, play, stop, playButtonSound };\n};\n"],"names":["swipeSoundIndex","soundMapper","CircleSoundKey","soundInstancePromise","useCircleSounds","loadSound","useCallback","key","loadedSound","CircleSoundKeyMapper","pausedSoundsRef","useRef","timeoutRefs","handleVisibilityChange","sound","useEffect","timeouts","id","playSwipSound","SWIPE_SOUND_ORDER","_a","playButtonSound","play","immediately","loop","soundInstance","promise","intervalId","vol","stop","err"],"mappings":"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"}