@cuemath/leap 3.1.7-gg1 → 3.1.8-j

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (85) hide show
  1. package/dist/assets/illustrations/illustrations.js +1 -1
  2. package/dist/assets/illustrations/illustrations.js.map +1 -1
  3. package/dist/constants/country.js +994 -2
  4. package/dist/constants/country.js.map +1 -1
  5. package/dist/features/auth/account-selector/account-selector-styled.js +9 -0
  6. package/dist/features/auth/account-selector/account-selector-styled.js.map +1 -0
  7. package/dist/features/auth/account-selector/account-selector.js +60 -36
  8. package/dist/features/auth/account-selector/account-selector.js.map +1 -1
  9. package/dist/features/auth/comps/auth-page-layout/{auth-page-layout-styles.js → auth-page-layout-styled.js} +1 -1
  10. package/dist/features/auth/comps/auth-page-layout/{auth-page-layout-styles.js.map → auth-page-layout-styled.js.map} +1 -1
  11. package/dist/features/auth/comps/auth-page-layout/auth-page-layout.js +20 -9
  12. package/dist/features/auth/comps/auth-page-layout/auth-page-layout.js.map +1 -1
  13. package/dist/features/auth/comps/auth-static-panel/auth-static-panel.js +1 -1
  14. package/dist/features/auth/comps/auth-static-panel/auth-static-panel.js.map +1 -1
  15. package/dist/features/auth/forgot-password/forgot-password-styled.js +30 -4
  16. package/dist/features/auth/forgot-password/forgot-password-styled.js.map +1 -1
  17. package/dist/features/auth/forgot-password/otp-form/otp-form.js +27 -29
  18. package/dist/features/auth/forgot-password/otp-form/otp-form.js.map +1 -1
  19. package/dist/features/auth/forgot-password/reset-password-form/reset-password-form.js +22 -27
  20. package/dist/features/auth/forgot-password/reset-password-form/reset-password-form.js.map +1 -1
  21. package/dist/features/auth/forgot-password/user-identifier-form/user-identifier-form.js +25 -28
  22. package/dist/features/auth/forgot-password/user-identifier-form/user-identifier-form.js.map +1 -1
  23. package/dist/features/auth/login/identifier-otp-form/identifier-otp-form-styled.js +17 -4
  24. package/dist/features/auth/login/identifier-otp-form/identifier-otp-form-styled.js.map +1 -1
  25. package/dist/features/auth/login/identifier-otp-form/identifier-otp-form.js +88 -79
  26. package/dist/features/auth/login/identifier-otp-form/identifier-otp-form.js.map +1 -1
  27. package/dist/features/auth/login/login-styled.js +26 -0
  28. package/dist/features/auth/login/login-styled.js.map +1 -0
  29. package/dist/features/auth/login/social-account-not-found/social-account-not-found.js +27 -21
  30. package/dist/features/auth/login/social-account-not-found/social-account-not-found.js.map +1 -1
  31. package/dist/features/auth/login/social-login-methods/social-login-methods-styled.js +9 -0
  32. package/dist/features/auth/login/social-login-methods/social-login-methods-styled.js.map +1 -0
  33. package/dist/features/auth/login/social-login-methods/social-login-methods.js +43 -34
  34. package/dist/features/auth/login/social-login-methods/social-login-methods.js.map +1 -1
  35. package/dist/features/auth/login/username-password-form/username-password-form.js +68 -71
  36. package/dist/features/auth/login/username-password-form/username-password-form.js.map +1 -1
  37. package/dist/features/auth/signup/custom-input-field/country-selector/country-list-menu.js +1 -1
  38. package/dist/features/auth/signup/custom-input-field/country-selector/country-list-menu.js.map +1 -1
  39. package/dist/features/auth/signup/signup-constants.js +6 -998
  40. package/dist/features/auth/signup/signup-constants.js.map +1 -1
  41. package/dist/features/auth/user-list/user-item/user-item.js +33 -32
  42. package/dist/features/auth/user-list/user-item/user-item.js.map +1 -1
  43. package/dist/features/auth/user-list/user-list.js +60 -51
  44. package/dist/features/auth/user-list/user-list.js.map +1 -1
  45. package/dist/features/hooks/use-viewport/use-viewport.js +21 -0
  46. package/dist/features/hooks/use-viewport/use-viewport.js.map +1 -0
  47. package/dist/features/ui/buttons/button/button-styled.js +29 -29
  48. package/dist/features/ui/buttons/button/button-styled.js.map +1 -1
  49. package/dist/features/utils/media.js +16 -0
  50. package/dist/features/utils/media.js.map +1 -0
  51. package/dist/index.d.ts +22 -71
  52. package/dist/index.js +348 -350
  53. package/dist/index.js.map +1 -1
  54. package/dist/node_modules/decode-uri-component/index.js.map +1 -0
  55. package/dist/node_modules/query-string/base.js +1 -1
  56. package/dist/node_modules/uuid/dist/esm-browser/native.js +7 -0
  57. package/dist/node_modules/uuid/dist/esm-browser/native.js.map +1 -0
  58. package/dist/node_modules/uuid/dist/esm-browser/rng.js +3 -2
  59. package/dist/node_modules/uuid/dist/esm-browser/rng.js.map +1 -1
  60. package/dist/node_modules/uuid/dist/esm-browser/stringify.js +6 -10
  61. package/dist/node_modules/uuid/dist/esm-browser/stringify.js.map +1 -1
  62. package/dist/node_modules/uuid/dist/esm-browser/v4.js +12 -9
  63. package/dist/node_modules/uuid/dist/esm-browser/v4.js.map +1 -1
  64. package/dist/static/cuemath-app-qr-code.7205ee79.svg +1 -0
  65. package/package.json +1 -1
  66. package/dist/features/ui/modals/modal-context.js +0 -13
  67. package/dist/features/ui/modals/modal-context.js.map +0 -1
  68. package/dist/features/ui/modals/modal-helpers.js +0 -17
  69. package/dist/features/ui/modals/modal-helpers.js.map +0 -1
  70. package/dist/features/ui/modals/modal-provider.js +0 -48
  71. package/dist/features/ui/modals/modal-provider.js.map +0 -1
  72. package/dist/features/ui/modals/modal-styled.js +0 -154
  73. package/dist/features/ui/modals/modal-styled.js.map +0 -1
  74. package/dist/features/ui/modals/modal.js +0 -19
  75. package/dist/features/ui/modals/modal.js.map +0 -1
  76. package/dist/features/ui/modals/use-modal-actions.js +0 -10
  77. package/dist/features/ui/modals/use-modal-actions.js.map +0 -1
  78. package/dist/features/ui/modals/use-modal-params.js +0 -10
  79. package/dist/features/ui/modals/use-modal-params.js.map +0 -1
  80. package/dist/node_modules/query-string/node_modules/decode-uri-component/index.js.map +0 -1
  81. package/dist/node_modules/uuid/dist/esm-browser/regex.js +0 -5
  82. package/dist/node_modules/uuid/dist/esm-browser/regex.js.map +0 -1
  83. package/dist/node_modules/uuid/dist/esm-browser/validate.js +0 -8
  84. package/dist/node_modules/uuid/dist/esm-browser/validate.js.map +0 -1
  85. /package/dist/node_modules/{query-string/node_modules/decode-uri-component → decode-uri-component}/index.js +0 -0
@@ -0,0 +1,9 @@
1
+ import r from "styled-components";
2
+ import o from "../../../ui/layout/flex-view.js";
3
+ const e = r(o)`
4
+ max-width: 336px;
5
+ `;
6
+ export {
7
+ e as Wrapper
8
+ };
9
+ //# sourceMappingURL=social-login-methods-styled.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"social-login-methods-styled.js","sources":["../../../../../src/features/auth/login/social-login-methods/social-login-methods-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nexport const Wrapper = styled(FlexView)`\n max-width: 336px;\n`;\n"],"names":["Wrapper","styled","FlexView"],"mappings":";;AAIa,MAAAA,IAAUC,EAAOC,CAAQ;AAAA;AAAA;"}
@@ -1,47 +1,56 @@
1
1
  import { jsxs as a, jsx as i } from "react/jsx-runtime";
2
2
  import { memo as r } from "react";
3
3
  import c from "../../../../assets/line-icons/icons/apple-icon.js";
4
- import d from "../../../../assets/line-icons/icons/google-icon.js";
4
+ import p from "../../../../assets/line-icons/icons/google-icon.js";
5
5
  import s from "../../../ui/buttons/button/button.js";
6
- import p from "../../../ui/layout/flex-view.js";
6
+ import { Wrapper as d } from "./social-login-methods-styled.js";
7
7
  const m = ({
8
8
  onGoogleLogin: n,
9
9
  onAppleLogin: t,
10
10
  loadingProvider: o
11
11
  }) => {
12
12
  const e = o === "google", l = o === "apple";
13
- return /* @__PURE__ */ a(p, { $flexGapX: 1, $flexDirection: "row", $justifyContent: "space-between", $width: 336, children: [
14
- /* @__PURE__ */ i(
15
- s,
16
- {
17
- renderAs: "secondary-dark",
18
- Icon: d,
19
- width: 160,
20
- label: "",
21
- analyticsLabel: "google_login",
22
- onClick: n,
23
- size: "small",
24
- busy: e,
25
- disabled: e
26
- }
27
- ),
28
- /* @__PURE__ */ i(
29
- s,
30
- {
31
- renderAs: "secondary-dark",
32
- size: "small",
33
- width: 160,
34
- Icon: c,
35
- label: "",
36
- analyticsLabel: "apple_login",
37
- onClick: t,
38
- busy: l,
39
- disabled: l
40
- }
41
- )
42
- ] });
43
- }, w = r(m);
13
+ return /* @__PURE__ */ a(
14
+ d,
15
+ {
16
+ $flexGapX: 1,
17
+ $flexDirection: "row",
18
+ $justifyContent: "space-between",
19
+ $width: "100%",
20
+ children: [
21
+ /* @__PURE__ */ i(
22
+ s,
23
+ {
24
+ renderAs: "secondary-dark",
25
+ Icon: p,
26
+ label: "",
27
+ analyticsLabel: "google_login",
28
+ onClick: n,
29
+ size: "small",
30
+ width: "100%",
31
+ busy: e,
32
+ disabled: e
33
+ }
34
+ ),
35
+ /* @__PURE__ */ i(
36
+ s,
37
+ {
38
+ renderAs: "secondary-dark",
39
+ size: "small",
40
+ Icon: c,
41
+ width: "100%",
42
+ label: "",
43
+ analyticsLabel: "apple_login",
44
+ onClick: t,
45
+ busy: l,
46
+ disabled: l
47
+ }
48
+ )
49
+ ]
50
+ }
51
+ );
52
+ }, L = r(m);
44
53
  export {
45
- w as default
54
+ L as default
46
55
  };
47
56
  //# sourceMappingURL=social-login-methods.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"social-login-methods.js","sources":["../../../../../src/features/auth/login/social-login-methods/social-login-methods.tsx"],"sourcesContent":["import type { ISocialLoginMethodsProps } from './social-login-methods-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport AppleIcon from '../../../../assets/line-icons/icons/apple-icon';\nimport GoogleIcon from '../../../../assets/line-icons/icons/google-icon';\nimport Button from '../../../ui/buttons/button/button';\nimport FlexView from '../../../ui/layout/flex-view';\n\nconst SocialLoginMethods: FC<ISocialLoginMethodsProps> = ({\n onGoogleLogin,\n onAppleLogin,\n loadingProvider,\n}) => {\n const isLoadingGoogle = loadingProvider === 'google';\n const isLoadingApple = loadingProvider === 'apple';\n\n return (\n <FlexView $flexGapX={1} $flexDirection=\"row\" $justifyContent=\"space-between\" $width={336}>\n <Button\n renderAs=\"secondary-dark\"\n Icon={GoogleIcon}\n width={160}\n label=\"\"\n analyticsLabel=\"google_login\"\n onClick={onGoogleLogin}\n size=\"small\"\n busy={isLoadingGoogle}\n disabled={isLoadingGoogle}\n />\n <Button\n renderAs=\"secondary-dark\"\n size=\"small\"\n width={160}\n Icon={AppleIcon}\n label=\"\"\n analyticsLabel=\"apple_login\"\n onClick={onAppleLogin}\n busy={isLoadingApple}\n disabled={isLoadingApple}\n />\n </FlexView>\n );\n};\n\nexport default memo(SocialLoginMethods);\n"],"names":["SocialLoginMethods","onGoogleLogin","onAppleLogin","loadingProvider","isLoadingGoogle","isLoadingApple","jsxs","FlexView","jsx","Button","GoogleIcon","AppleIcon","socialLoginMethods","memo"],"mappings":";;;;;;AAUA,MAAMA,IAAmD,CAAC;AAAA,EACxD,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,iBAAAC;AACF,MAAM;AACJ,QAAMC,IAAkBD,MAAoB,UACtCE,IAAiBF,MAAoB;AAGzC,SAAA,gBAAAG,EAACC,KAAS,WAAW,GAAG,gBAAe,OAAM,iBAAgB,iBAAgB,QAAQ,KACnF,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,MAAMC;AAAA,QACN,OAAO;AAAA,QACP,OAAM;AAAA,QACN,gBAAe;AAAA,QACf,SAAST;AAAA,QACT,MAAK;AAAA,QACL,MAAMG;AAAA,QACN,UAAUA;AAAA,MAAA;AAAA,IACZ;AAAA,IACA,gBAAAI;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,MAAK;AAAA,QACL,OAAO;AAAA,QACP,MAAME;AAAA,QACN,OAAM;AAAA,QACN,gBAAe;AAAA,QACf,SAAST;AAAA,QACT,MAAMG;AAAA,QACN,UAAUA;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,EAAA,CAAA;AAEJ,GAEeO,IAAAC,EAAKb,CAAkB;"}
1
+ {"version":3,"file":"social-login-methods.js","sources":["../../../../../src/features/auth/login/social-login-methods/social-login-methods.tsx"],"sourcesContent":["import type { ISocialLoginMethodsProps } from './social-login-methods-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport AppleIcon from '../../../../assets/line-icons/icons/apple-icon';\nimport GoogleIcon from '../../../../assets/line-icons/icons/google-icon';\nimport Button from '../../../ui/buttons/button/button';\nimport * as Styled from './social-login-methods-styled';\n\nconst SocialLoginMethods: FC<ISocialLoginMethodsProps> = ({\n onGoogleLogin,\n onAppleLogin,\n loadingProvider,\n}) => {\n const isLoadingGoogle = loadingProvider === 'google';\n const isLoadingApple = loadingProvider === 'apple';\n\n return (\n <Styled.Wrapper\n $flexGapX={1}\n $flexDirection=\"row\"\n $justifyContent=\"space-between\"\n $width=\"100%\"\n >\n <Button\n renderAs=\"secondary-dark\"\n Icon={GoogleIcon}\n label=\"\"\n analyticsLabel=\"google_login\"\n onClick={onGoogleLogin}\n size=\"small\"\n width=\"100%\"\n busy={isLoadingGoogle}\n disabled={isLoadingGoogle}\n />\n <Button\n renderAs=\"secondary-dark\"\n size=\"small\"\n Icon={AppleIcon}\n width=\"100%\"\n label=\"\"\n analyticsLabel=\"apple_login\"\n onClick={onAppleLogin}\n busy={isLoadingApple}\n disabled={isLoadingApple}\n />\n </Styled.Wrapper>\n );\n};\n\nexport default memo(SocialLoginMethods);\n"],"names":["SocialLoginMethods","onGoogleLogin","onAppleLogin","loadingProvider","isLoadingGoogle","isLoadingApple","jsxs","Styled.Wrapper","jsx","Button","GoogleIcon","AppleIcon","socialLoginMethods","memo"],"mappings":";;;;;;AAUA,MAAMA,IAAmD,CAAC;AAAA,EACxD,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,iBAAAC;AACF,MAAM;AACJ,QAAMC,IAAkBD,MAAoB,UACtCE,IAAiBF,MAAoB;AAGzC,SAAA,gBAAAG;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,gBAAe;AAAA,MACf,iBAAgB;AAAA,MAChB,QAAO;AAAA,MAEP,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAS;AAAA,YACT,MAAMC;AAAA,YACN,OAAM;AAAA,YACN,gBAAe;AAAA,YACf,SAAST;AAAA,YACT,MAAK;AAAA,YACL,OAAM;AAAA,YACN,MAAMG;AAAA,YACN,UAAUA;AAAA,UAAA;AAAA,QACZ;AAAA,QACA,gBAAAI;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAS;AAAA,YACT,MAAK;AAAA,YACL,MAAME;AAAA,YACN,OAAM;AAAA,YACN,OAAM;AAAA,YACN,gBAAe;AAAA,YACf,SAAST;AAAA,YACT,MAAMG;AAAA,YACN,UAAUA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEeO,IAAAC,EAAKb,CAAkB;"}
@@ -1,98 +1,95 @@
1
- import { jsxs as n, jsx as e } from "react/jsx-runtime";
1
+ import { jsx as e, jsxs as d } from "react/jsx-runtime";
2
2
  import { memo as f, useCallback as l } from "react";
3
3
  import w from "../../../ui/buttons/button/button.js";
4
- import $ from "../../../ui/buttons/text-button/text-button.js";
4
+ import C from "../../../ui/buttons/text-button/text-button.js";
5
5
  import u from "../../../ui/inputs/text-input/text-input.js";
6
- import s from "../../../ui/layout/flex-view.js";
6
+ import o from "../../../ui/layout/flex-view.js";
7
7
  import a from "../../../ui/separator/separator.js";
8
8
  import y from "../../comps/input-status-icon/input-status-icon.js";
9
- const C = ({
10
- username: i,
11
- password: m,
9
+ import { Container as $, FormContainer as k } from "../login-styled.js";
10
+ const x = ({
11
+ username: n,
12
+ password: i,
12
13
  errors: r,
13
- isLoading: d,
14
+ isLoading: m,
14
15
  onChange: t,
15
16
  onSubmit: p,
16
- onForgotPassword: h
17
+ onForgotPassword: c
17
18
  }) => {
18
- const c = d || !i.trim() || !m.trim(), g = l(
19
- (o) => {
20
- t("username", o.target.value);
19
+ const h = m || !n.trim() || !i.trim(), g = l(
20
+ (s) => {
21
+ t("username", s.target.value);
21
22
  },
22
23
  [t]
23
24
  ), b = l(
24
- (o) => {
25
- t("password", o.target.value);
25
+ (s) => {
26
+ t("password", s.target.value);
26
27
  },
27
28
  [t]
28
29
  );
29
- return /* @__PURE__ */ n(
30
- s,
30
+ return /* @__PURE__ */ e(
31
+ $,
31
32
  {
32
- $gutterX: 2,
33
+ $gutterX: 1.5,
33
34
  $gapX: 1.5,
34
35
  $alignItems: "center",
35
36
  $justifyContent: "center",
36
37
  $background: "BLACK_2",
37
- $height: 308,
38
- children: [
39
- /* @__PURE__ */ e(a, { heightX: 0.5 }),
40
- /* @__PURE__ */ n("form", { onSubmit: p, children: [
41
- /* @__PURE__ */ n(s, { $alignItems: "center", $justifyContent: "center", children: [
42
- /* @__PURE__ */ e(
43
- u,
44
- {
45
- renderAs: r.username ? "error-dark" : "primary-dark",
46
- autoFocus: !0,
47
- autoComplete: "username",
48
- label: "Username",
49
- value: i,
50
- onChange: g,
51
- width: 330,
52
- required: !0,
53
- shape: "borderLess",
54
- errorMessage: r.username
55
- }
56
- ),
57
- /* @__PURE__ */ e(a, { height: 36 }),
58
- /* @__PURE__ */ e(
59
- u,
60
- {
61
- type: "password",
62
- renderAs: r.password ? "error-dark" : "primary-dark",
63
- autoComplete: "password",
64
- label: "Password",
65
- value: m,
66
- onChange: b,
67
- width: 330,
68
- required: !0,
69
- shape: "borderLess",
70
- errorMessage: r.password,
71
- siblingElement: /* @__PURE__ */ e(y, { isError: !!r.password })
72
- }
73
- )
74
- ] }),
75
- /* @__PURE__ */ e(a, { heightX: 1.25 }),
76
- /* @__PURE__ */ e(s, { $alignItems: "flex-end", children: /* @__PURE__ */ e($, { label: "Forgot Password?", onClick: h, color: "WHITE_T_60" }) }),
77
- /* @__PURE__ */ e(a, { heightX: 2 }),
78
- /* @__PURE__ */ e(s, { $justifyContent: "center", children: /* @__PURE__ */ e(
79
- w,
38
+ children: /* @__PURE__ */ d(k, { onSubmit: p, children: [
39
+ /* @__PURE__ */ d(o, { $alignItems: "center", $justifyContent: "center", children: [
40
+ /* @__PURE__ */ e(
41
+ u,
80
42
  {
81
- size: "small",
82
- renderAs: "secondary-dark",
83
- type: "submit",
84
- label: "Log in",
85
- width: 336,
86
- busy: d,
87
- disabled: c
43
+ renderAs: r.username ? "error-dark" : "primary-dark",
44
+ autoFocus: !0,
45
+ autoComplete: "username",
46
+ label: "Username",
47
+ value: n,
48
+ width: "100%",
49
+ onChange: g,
50
+ required: !0,
51
+ shape: "borderLess",
52
+ errorMessage: r.username
88
53
  }
89
- ) })
90
- ] })
91
- ]
54
+ ),
55
+ /* @__PURE__ */ e(a, { height: 36 }),
56
+ /* @__PURE__ */ e(
57
+ u,
58
+ {
59
+ type: "password",
60
+ renderAs: r.password ? "error-dark" : "primary-dark",
61
+ autoComplete: "password",
62
+ label: "Password",
63
+ value: i,
64
+ width: "100%",
65
+ onChange: b,
66
+ required: !0,
67
+ shape: "borderLess",
68
+ errorMessage: r.password,
69
+ siblingElement: /* @__PURE__ */ e(y, { isError: !!r.password })
70
+ }
71
+ )
72
+ ] }),
73
+ /* @__PURE__ */ e(a, { heightX: 1.25 }),
74
+ /* @__PURE__ */ e(o, { $alignItems: "flex-end", children: /* @__PURE__ */ e(C, { label: "Forgot Password?", onClick: c, color: "WHITE_T_60" }) }),
75
+ /* @__PURE__ */ e(a, { heightX: 2 }),
76
+ /* @__PURE__ */ e(o, { $justifyContent: "center", children: /* @__PURE__ */ e(
77
+ w,
78
+ {
79
+ size: "small",
80
+ renderAs: "secondary-dark",
81
+ type: "submit",
82
+ label: "Log in",
83
+ width: "100%",
84
+ busy: m,
85
+ disabled: h
86
+ }
87
+ ) })
88
+ ] })
92
89
  }
93
90
  );
94
- }, A = f(C);
91
+ }, E = f(x);
95
92
  export {
96
- A as default
93
+ E as default
97
94
  };
98
95
  //# sourceMappingURL=username-password-form.js.map
@@ -1 +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;"}
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';\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 <Styled.Container\n $gutterX={1.5}\n $gapX={1.5}\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $background=\"BLACK_2\"\n >\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 </Styled.Container>\n );\n};\n\nexport default memo(UsernamePasswordForm);\n"],"names":["UsernamePasswordForm","username","password","errors","isLoading","onChange","onSubmit","onForgotPassword","isSubmitDisabled","handleUsernameChange","useCallback","e","handlePasswordChange","jsx","Styled.Container","jsxs","Styled.FormContainer","FlexView","TextInput","Separator","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;AAAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,OAAO;AAAA,MACP,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,aAAY;AAAA,MAEZ,UAAC,gBAAAC,EAAAC,GAAA,EAAqB,UAAAV,GACpB,UAAA;AAAA,QAAA,gBAAAS,EAACE,GAAS,EAAA,aAAY,UAAS,iBAAgB,UAC7C,UAAA;AAAA,UAAA,gBAAAJ;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,UAAUf,EAAO,WAAW,eAAe;AAAA,cAC3C,WAAS;AAAA,cACT,cAAa;AAAA,cACb,OAAM;AAAA,cACN,OAAOF;AAAA,cACP,OAAM;AAAA,cACN,UAAUQ;AAAA,cACV,UAAQ;AAAA,cACR,OAAM;AAAA,cACN,cAAcN,EAAO;AAAA,YAAA;AAAA,UACvB;AAAA,UACA,gBAAAU,EAACM,GAAU,EAAA,QAAQ,GAAI,CAAA;AAAA,UACvB,gBAAAN;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAUf,EAAO,WAAW,eAAe;AAAA,cAC3C,cAAa;AAAA,cACb,OAAM;AAAA,cACN,OAAOD;AAAA,cACP,OAAM;AAAA,cACN,UAAUU;AAAA,cACV,UAAQ;AAAA,cACR,OAAM;AAAA,cACN,cAAcT,EAAO;AAAA,cACrB,gBAAiB,gBAAAU,EAAAO,GAAA,EAAgB,SAAS,CAAC,CAACjB,EAAO,UAAU;AAAA,YAAA;AAAA,UAC/D;AAAA,QAAA,GACF;AAAA,QACA,gBAAAU,EAACM,GAAU,EAAA,SAAS,KAAM,CAAA;AAAA,QACzB,gBAAAN,EAAAI,GAAA,EAAS,aAAY,YACpB,UAAC,gBAAAJ,EAAAQ,GAAA,EAAW,OAAM,oBAAmB,SAASd,GAAkB,OAAM,aAAa,CAAA,GACrF;AAAA,QACA,gBAAAM,EAACM,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,QACvB,gBAAAN,EAACI,GAAS,EAAA,iBAAgB,UACxB,UAAA,gBAAAJ;AAAA,UAACS;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,UAAS;AAAA,YACT,MAAK;AAAA,YACL,OAAM;AAAA,YACN,OAAM;AAAA,YACN,MAAMlB;AAAA,YACN,UAAUI;AAAA,UAAA;AAAA,QAAA,GAEd;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN,GAEee,IAAAC,EAAKxB,CAAoB;"}
@@ -1,8 +1,8 @@
1
1
  import { jsxs as h, jsx as a } from "react/jsx-runtime";
2
2
  import { memo as k, useState as I, useRef as p, useEffect as $, useCallback as A } from "react";
3
+ import { COUNTRY_CODE_MAP as i } from "../../../../../constants/country.js";
3
4
  import b from "../../../../ui/separator/separator.js";
4
5
  import T from "../../../../ui/text/text.js";
5
- import { COUNTRY_CODE_MAP as i } from "../../signup-constants.js";
6
6
  import { MenuWrapper as y, MenuItem as X, FlagIcon as D, Instructions as M } from "./country-selector-styled.js";
7
7
  const R = ({ selectedCountry: g, onChange: u, menuVisible: w }) => {
8
8
  const [s, d] = I(""), [o, l] = I(-1), c = p(null), f = p(null), E = p([]);
@@ -1 +1 @@
1
- {"version":3,"file":"country-list-menu.js","sources":["../../../../../../src/features/auth/signup/custom-input-field/country-selector/country-list-menu.tsx"],"sourcesContent":["import type { ICountryListMenuProps } from './country-selector-types';\nimport type { FC } from 'react';\n\nimport { useState, useEffect, useRef, useCallback, memo } from 'react';\n\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport { COUNTRY_CODE_MAP } from '../../signup-constants';\nimport * as Styled from './country-selector-styled';\n\nconst CountryListMenu: FC<ICountryListMenuProps> = ({ selectedCountry, onChange, menuVisible }) => {\n const [searchTerm, setSearchTerm] = useState('');\n const [highlightedIndex, setHighlightedIndex] = useState(-1);\n const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n const menuRef = useRef<HTMLDivElement>(null);\n const itemRefs = useRef<(HTMLDivElement | null)[]>([]);\n\n useEffect(() => {\n if (highlightedIndex >= 0) {\n itemRefs.current[highlightedIndex]?.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n });\n }\n }, [highlightedIndex]);\n\n useEffect(() => {\n if (searchTerm) {\n const index = COUNTRY_CODE_MAP.findIndex(\n c =>\n c.value.toLowerCase().includes(searchTerm.toLowerCase()) || c.code.startsWith(searchTerm),\n );\n\n setHighlightedIndex(index);\n if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);\n searchTimeoutRef.current = setTimeout(() => {\n setSearchTerm('');\n }, 1000);\n }\n\n return () => {\n if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);\n };\n }, [searchTerm]);\n\n const handleKeyDown = useCallback(\n (event: globalThis.KeyboardEvent) => {\n const { key } = event;\n\n event.preventDefault();\n event.stopPropagation();\n if (key.length === 1 && /[a-zA-Z0-9\\s]/.test(key)) {\n setSearchTerm(prev => prev + key.toLowerCase());\n\n return;\n }\n\n if (key === 'ArrowDown') {\n setHighlightedIndex(prev => (prev < COUNTRY_CODE_MAP.length - 1 ? prev + 1 : 0));\n } else if (key === 'ArrowUp') {\n setHighlightedIndex(prev => (prev > 0 ? prev - 1 : COUNTRY_CODE_MAP.length - 1));\n } else if (key === 'Enter' && highlightedIndex >= 0) {\n const selectedOption = COUNTRY_CODE_MAP[highlightedIndex];\n\n selectedOption && onChange({ code: selectedOption.code, id: selectedOption.id });\n menuRef.current?.click();\n } else if (key === 'Escape') {\n setSearchTerm('');\n setHighlightedIndex(-1);\n }\n },\n [highlightedIndex, onChange],\n );\n\n useEffect(() => {\n const menuElement = menuRef.current;\n\n if (!menuElement || !menuVisible) return;\n\n menuElement.focus();\n menuElement.addEventListener('keydown', handleKeyDown);\n\n return () => {\n menuElement.removeEventListener('keydown', handleKeyDown);\n };\n }, [menuVisible, handleKeyDown, selectedCountry.id]);\n\n return (\n <Styled.MenuWrapper\n ref={menuRef}\n tabIndex={0}\n $widthX={10}\n $gapX={0.5}\n $background=\"BLACK_2\"\n $borderColor=\"BLACK_5\"\n >\n {COUNTRY_CODE_MAP.map((option, index) => {\n const { id, value, icon, code } = option;\n\n return (\n <Styled.MenuItem\n key={id}\n ref={el => (itemRefs.current[index] = el)}\n data-country-id={id}\n onClick={() => onChange({ code, id })}\n $gutterX={0.5}\n $gapX={0.75}\n $width=\"100%\"\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $flexGap={8}\n $isSelected={selectedCountry.id === id}\n $isHighlighted={highlightedIndex === index}\n >\n <Styled.FlagIcon src={icon} />\n <Text $renderAs=\"ab3\" $color=\"WHITE\">\n {value}\n </Text>\n </Styled.MenuItem>\n );\n })}\n\n <Styled.Instructions $gutterX={0.5}>\n <Separator heightX={0.5} />\n <Text $renderAs=\"ab3\" $color=\"WHITE\">\n Type to search • ↑↓ to navigate • Enter to select • Esc to clear\n </Text>\n </Styled.Instructions>\n </Styled.MenuWrapper>\n );\n};\n\nexport default memo(CountryListMenu);\n"],"names":["CountryListMenu","selectedCountry","onChange","menuVisible","searchTerm","setSearchTerm","useState","highlightedIndex","setHighlightedIndex","searchTimeoutRef","useRef","menuRef","itemRefs","useEffect","_a","index","COUNTRY_CODE_MAP","c","handleKeyDown","useCallback","event","key","prev","selectedOption","menuElement","jsxs","Styled.MenuWrapper","option","id","value","icon","code","Styled.MenuItem","el","jsx","Styled.FlagIcon","Text","Styled.Instructions","Separator","CountryListMenu$1","memo"],"mappings":"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"}
1
+ {"version":3,"file":"country-list-menu.js","sources":["../../../../../../src/features/auth/signup/custom-input-field/country-selector/country-list-menu.tsx"],"sourcesContent":["import type { ICountryListMenuProps } from './country-selector-types';\nimport type { FC } from 'react';\n\nimport { useState, useEffect, useRef, useCallback, memo } from 'react';\n\nimport { COUNTRY_CODE_MAP } from '../../../../../constants/country';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport * as Styled from './country-selector-styled';\n\nconst CountryListMenu: FC<ICountryListMenuProps> = ({ selectedCountry, onChange, menuVisible }) => {\n const [searchTerm, setSearchTerm] = useState('');\n const [highlightedIndex, setHighlightedIndex] = useState(-1);\n const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n const menuRef = useRef<HTMLDivElement>(null);\n const itemRefs = useRef<(HTMLDivElement | null)[]>([]);\n\n useEffect(() => {\n if (highlightedIndex >= 0) {\n itemRefs.current[highlightedIndex]?.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n });\n }\n }, [highlightedIndex]);\n\n useEffect(() => {\n if (searchTerm) {\n const index = COUNTRY_CODE_MAP.findIndex(\n c =>\n c.value.toLowerCase().includes(searchTerm.toLowerCase()) || c.code.startsWith(searchTerm),\n );\n\n setHighlightedIndex(index);\n if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);\n searchTimeoutRef.current = setTimeout(() => {\n setSearchTerm('');\n }, 1000);\n }\n\n return () => {\n if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);\n };\n }, [searchTerm]);\n\n const handleKeyDown = useCallback(\n (event: globalThis.KeyboardEvent) => {\n const { key } = event;\n\n event.preventDefault();\n event.stopPropagation();\n if (key.length === 1 && /[a-zA-Z0-9\\s]/.test(key)) {\n setSearchTerm(prev => prev + key.toLowerCase());\n\n return;\n }\n\n if (key === 'ArrowDown') {\n setHighlightedIndex(prev => (prev < COUNTRY_CODE_MAP.length - 1 ? prev + 1 : 0));\n } else if (key === 'ArrowUp') {\n setHighlightedIndex(prev => (prev > 0 ? prev - 1 : COUNTRY_CODE_MAP.length - 1));\n } else if (key === 'Enter' && highlightedIndex >= 0) {\n const selectedOption = COUNTRY_CODE_MAP[highlightedIndex];\n\n selectedOption && onChange({ code: selectedOption.code, id: selectedOption.id });\n menuRef.current?.click();\n } else if (key === 'Escape') {\n setSearchTerm('');\n setHighlightedIndex(-1);\n }\n },\n [highlightedIndex, onChange],\n );\n\n useEffect(() => {\n const menuElement = menuRef.current;\n\n if (!menuElement || !menuVisible) return;\n\n menuElement.focus();\n menuElement.addEventListener('keydown', handleKeyDown);\n\n return () => {\n menuElement.removeEventListener('keydown', handleKeyDown);\n };\n }, [menuVisible, handleKeyDown, selectedCountry.id]);\n\n return (\n <Styled.MenuWrapper\n ref={menuRef}\n tabIndex={0}\n $widthX={10}\n $gapX={0.5}\n $background=\"BLACK_2\"\n $borderColor=\"BLACK_5\"\n >\n {COUNTRY_CODE_MAP.map((option, index) => {\n const { id, value, icon, code } = option;\n\n return (\n <Styled.MenuItem\n key={id}\n ref={el => (itemRefs.current[index] = el)}\n data-country-id={id}\n onClick={() => onChange({ code, id })}\n $gutterX={0.5}\n $gapX={0.75}\n $width=\"100%\"\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $flexGap={8}\n $isSelected={selectedCountry.id === id}\n $isHighlighted={highlightedIndex === index}\n >\n <Styled.FlagIcon src={icon} />\n <Text $renderAs=\"ab3\" $color=\"WHITE\">\n {value}\n </Text>\n </Styled.MenuItem>\n );\n })}\n\n <Styled.Instructions $gutterX={0.5}>\n <Separator heightX={0.5} />\n <Text $renderAs=\"ab3\" $color=\"WHITE\">\n Type to search • ↑↓ to navigate • Enter to select • Esc to clear\n </Text>\n </Styled.Instructions>\n </Styled.MenuWrapper>\n );\n};\n\nexport default memo(CountryListMenu);\n"],"names":["CountryListMenu","selectedCountry","onChange","menuVisible","searchTerm","setSearchTerm","useState","highlightedIndex","setHighlightedIndex","searchTimeoutRef","useRef","menuRef","itemRefs","useEffect","_a","index","COUNTRY_CODE_MAP","c","handleKeyDown","useCallback","event","key","prev","selectedOption","menuElement","jsxs","Styled.MenuWrapper","option","id","value","icon","code","Styled.MenuItem","el","jsx","Styled.FlagIcon","Text","Styled.Instructions","Separator","CountryListMenu$1","memo"],"mappings":"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"}