@cuemath/leap 2.9.12-j4 → 2.9.12-j6

package/dist/features/auth/login/identifier-otp-form/identifier-otp-form.js

@@ -1,4 +1,4 @@
-import { jsx as e, jsxs as d, Fragment as k } from "react/jsx-runtime";
+import { jsx as e, jsxs as o, Fragment as k } from "react/jsx-runtime";
 import y from "../../../ui/buttons/button/button.js";
 import c from "../../../ui/inputs/text-input/text-input.js";
 import n from "../../../ui/layout/flex-view.js";
@@ -19,8 +19,8 @@ const C = ({
   onSendOtp: p
 }) => {
   const b = t ? "success-dark" : "primary-dark", $ = i ? "success-dark" : "primary-dark";
-  return /* @__PURE__ */ e(n, { $gutterX: 2, $gapX: 1.5, $background: "BLACK_2", $height: 308, children: /* @__PURE__ */ d(F, { onSubmit: h, children: [
-    /* @__PURE__ */ d(n, { $alignItems: "center", $justifyContent: "center", children: [
+  return /* @__PURE__ */ e(n, { $gutterX: 2, $gapX: 1.5, $background: "BLACK_2", $height: 308, children: /* @__PURE__ */ o(F, { onSubmit: h, children: [
+    /* @__PURE__ */ o(n, { $alignItems: "center", $justifyContent: "center", children: [
       /* @__PURE__ */ e(
         c,
         {
@@ -28,7 +28,7 @@ const C = ({
           autoFocus: !0,
           label: "Email or Phone",
           value: f,
-          onChange: (o) => m("identifier", o.target.value),
+          onChange: (d) => m("identifier", d.target.value),
           width: 330,
           required: !0,
           shape: "borderLess",
@@ -37,17 +37,17 @@ const C = ({
           siblingElement: /* @__PURE__ */ e(u, { isValid: t, isError: !!r.identifier })
         }
       ),
-      t && /* @__PURE__ */ d(k, { children: [
+      t && /* @__PURE__ */ o(k, { children: [
         /* @__PURE__ */ e(s, { height: 36 }),
         /* @__PURE__ */ e(
           c,
           {
             type: "password",
-            renderAs: r.otp ? "error" : $,
+            renderAs: r.otp ? "error-dark" : $,
             autoComplete: "password",
             label: "Verification code",
             value: l,
-            onChange: (o) => m("otp", o.target.value),
+            onChange: (d) => m("otp", d.target.value),
             width: 330,
             required: !0,
             shape: "borderLess",

package/dist/features/auth/login/identifier-otp-form/identifier-otp-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"identifier-otp-form.js","sources":["../../../../../src/features/auth/login/identifier-otp-form/identifier-otp-form.tsx"],"sourcesContent":["// In @cuemath/leap/src/components/IdentifierOtpForm.tsx\n\nimport type { IIdentifierOtpFormProps } from './identifier-otp-form-types';\n\nimport React, { type ChangeEvent } from 'react';\n\nimport Button from '../../../ui/buttons/button/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 ResendOTP from '../../comps/resend-otp/resend-otp';\nimport * as Styled from './identifier-otp-form-styled';\n\nconst IdentifierOtpForm: React.FC<IIdentifierOtpFormProps> = ({\n  identifier,\n  otp,\n  errors,\n  isOtpVerified,\n  isLoading,\n  isSubmitDisabled,\n  showOtpInput,\n  onChange,\n  onSubmit,\n  onSendOtp,\n}) => {\n  const identifierStatusVariant = showOtpInput ? 'success-dark' : 'primary-dark';\n  const otpStatusVariant = isOtpVerified ? 'success-dark' : 'primary-dark';\n\n  return (\n    <FlexView $gutterX={2} $gapX={1.5} $background=\"BLACK_2\" $height={308}>\n      <Styled.FormWrapper onSubmit={onSubmit}>\n        <FlexView $alignItems=\"center\" $justifyContent=\"center\">\n          <TextInput\n            renderAs={errors.identifier ? 'error-dark' : identifierStatusVariant}\n            autoFocus\n            label=\"Email or Phone\"\n            value={identifier}\n            onChange={(e: ChangeEvent<HTMLInputElement>) => onChange('identifier', e.target.value)}\n            width={330}\n            required\n            shape=\"borderLess\"\n            errorMessage={errors.identifier}\n            disabled={showOtpInput}\n            siblingElement={\n              <InputStatusIcon isValid={showOtpInput} isError={!!errors.identifier} />\n            }\n          />\n          {showOtpInput && (\n            <>\n              <Separator height={36} />\n              <TextInput\n                type=\"password\"\n                renderAs={errors.otp ? 'error' : otpStatusVariant}\n                autoComplete=\"password\"\n                label=\"Verification code\"\n                value={otp}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => onChange('otp', e.target.value)}\n                width={330}\n                required\n                shape=\"borderLess\"\n                errorMessage={errors.otp}\n                disabled={isOtpVerified || (otp.length === 4 && isLoading)}\n                siblingElement={\n                  <InputStatusIcon\n                    isLoading={isLoading}\n                    isValid={isOtpVerified}\n                    isError={!!errors.otp}\n                  />\n                }\n              />\n              <Separator heightX={1.25} />\n              <FlexView $alignItems=\"flex-end\" $width=\"100%\">\n                <ResendOTP onResendOTP={onSendOtp} disabled={isOtpVerified} />\n              </FlexView>\n              <Separator heightX={2} />\n            </>\n          )}\n        </FlexView>\n        <Button\n          size=\"small\"\n          renderAs=\"secondary-dark\"\n          type=\"submit\"\n          label={showOtpInput ? 'Log In' : 'Get Verification Code'}\n          width={336}\n          busy={!showOtpInput && isLoading}\n          disabled={isSubmitDisabled}\n        />\n      </Styled.FormWrapper>\n    </FlexView>\n  );\n};\n\nexport default IdentifierOtpForm;\n"],"names":["IdentifierOtpForm","identifier","otp","errors","isOtpVerified","isLoading","isSubmitDisabled","showOtpInput","onChange","onSubmit","onSendOtp","identifierStatusVariant","otpStatusVariant","jsx","FlexView","jsxs","Styled.FormWrapper","TextInput","e","InputStatusIcon","Fragment","Separator","ResendOTP","Button","IdentifierOtpForm$1"],"mappings":";;;;;;;;AAcA,MAAMA,IAAuD,CAAC;AAAA,EAC5D,YAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,MAAM;AACE,QAAAC,IAA0BJ,IAAe,iBAAiB,gBAC1DK,IAAmBR,IAAgB,iBAAiB;AAE1D,SACG,gBAAAS,EAAAC,GAAA,EAAS,UAAU,GAAG,OAAO,KAAK,aAAY,WAAU,SAAS,KAChE,UAAA,gBAAAC,EAACC,GAAA,EAAmB,UAAAP,GAClB,UAAA;AAAA,IAAA,gBAAAM,EAACD,GAAS,EAAA,aAAY,UAAS,iBAAgB,UAC7C,UAAA;AAAA,MAAA,gBAAAD;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,UAAUd,EAAO,aAAa,eAAeQ;AAAA,UAC7C,WAAS;AAAA,UACT,OAAM;AAAA,UACN,OAAOV;AAAA,UACP,UAAU,CAACiB,MAAqCV,EAAS,cAAcU,EAAE,OAAO,KAAK;AAAA,UACrF,OAAO;AAAA,UACP,UAAQ;AAAA,UACR,OAAM;AAAA,UACN,cAAcf,EAAO;AAAA,UACrB,UAAUI;AAAA,UACV,kCACGY,GAAgB,EAAA,SAASZ,GAAc,SAAS,CAAC,CAACJ,EAAO,YAAY;AAAA,QAAA;AAAA,MAE1E;AAAA,MACCI,KAEG,gBAAAQ,EAAAK,GAAA,EAAA,UAAA;AAAA,QAAC,gBAAAP,EAAAQ,GAAA,EAAU,QAAQ,GAAI,CAAA;AAAA,QACvB,gBAAAR;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,UAAUd,EAAO,MAAM,UAAUS;AAAA,YACjC,cAAa;AAAA,YACb,OAAM;AAAA,YACN,OAAOV;AAAA,YACP,UAAU,CAACgB,MAAqCV,EAAS,OAAOU,EAAE,OAAO,KAAK;AAAA,YAC9E,OAAO;AAAA,YACP,UAAQ;AAAA,YACR,OAAM;AAAA,YACN,cAAcf,EAAO;AAAA,YACrB,UAAUC,KAAkBF,EAAI,WAAW,KAAKG;AAAA,YAChD,gBACE,gBAAAQ;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,WAAAd;AAAA,gBACA,SAASD;AAAA,gBACT,SAAS,CAAC,CAACD,EAAO;AAAA,cAAA;AAAA,YACpB;AAAA,UAAA;AAAA,QAEJ;AAAA,QACA,gBAAAU,EAACQ,GAAU,EAAA,SAAS,KAAM,CAAA;AAAA,QACzB,gBAAAR,EAAAC,GAAA,EAAS,aAAY,YAAW,QAAO,QACtC,UAAC,gBAAAD,EAAAS,GAAA,EAAU,aAAaZ,GAAW,UAAUN,EAAe,CAAA,GAC9D;AAAA,QACA,gBAAAS,EAACQ,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,MAAA,GACzB;AAAA,IAAA,GAEJ;AAAA,IACA,gBAAAR;AAAA,MAACU;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAS;AAAA,QACT,MAAK;AAAA,QACL,OAAOhB,IAAe,WAAW;AAAA,QACjC,OAAO;AAAA,QACP,MAAM,CAACA,KAAgBF;AAAA,QACvB,UAAUC;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,GAEAkB,IAAexB;"}
+{"version":3,"file":"identifier-otp-form.js","sources":["../../../../../src/features/auth/login/identifier-otp-form/identifier-otp-form.tsx"],"sourcesContent":["// In @cuemath/leap/src/components/IdentifierOtpForm.tsx\n\nimport type { IIdentifierOtpFormProps } from './identifier-otp-form-types';\n\nimport React, { type ChangeEvent } from 'react';\n\nimport Button from '../../../ui/buttons/button/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 ResendOTP from '../../comps/resend-otp/resend-otp';\nimport * as Styled from './identifier-otp-form-styled';\n\nconst IdentifierOtpForm: React.FC<IIdentifierOtpFormProps> = ({\n  identifier,\n  otp,\n  errors,\n  isOtpVerified,\n  isLoading,\n  isSubmitDisabled,\n  showOtpInput,\n  onChange,\n  onSubmit,\n  onSendOtp,\n}) => {\n  const identifierStatusVariant = showOtpInput ? 'success-dark' : 'primary-dark';\n  const otpStatusVariant = isOtpVerified ? 'success-dark' : 'primary-dark';\n\n  return (\n    <FlexView $gutterX={2} $gapX={1.5} $background=\"BLACK_2\" $height={308}>\n      <Styled.FormWrapper onSubmit={onSubmit}>\n        <FlexView $alignItems=\"center\" $justifyContent=\"center\">\n          <TextInput\n            renderAs={errors.identifier ? 'error-dark' : identifierStatusVariant}\n            autoFocus\n            label=\"Email or Phone\"\n            value={identifier}\n            onChange={(e: ChangeEvent<HTMLInputElement>) => onChange('identifier', e.target.value)}\n            width={330}\n            required\n            shape=\"borderLess\"\n            errorMessage={errors.identifier}\n            disabled={showOtpInput}\n            siblingElement={\n              <InputStatusIcon isValid={showOtpInput} isError={!!errors.identifier} />\n            }\n          />\n          {showOtpInput && (\n            <>\n              <Separator height={36} />\n              <TextInput\n                type=\"password\"\n                renderAs={errors.otp ? 'error-dark' : otpStatusVariant}\n                autoComplete=\"password\"\n                label=\"Verification code\"\n                value={otp}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => onChange('otp', e.target.value)}\n                width={330}\n                required\n                shape=\"borderLess\"\n                errorMessage={errors.otp}\n                disabled={isOtpVerified || (otp.length === 4 && isLoading)}\n                siblingElement={\n                  <InputStatusIcon\n                    isLoading={isLoading}\n                    isValid={isOtpVerified}\n                    isError={!!errors.otp}\n                  />\n                }\n              />\n              <Separator heightX={1.25} />\n              <FlexView $alignItems=\"flex-end\" $width=\"100%\">\n                <ResendOTP onResendOTP={onSendOtp} disabled={isOtpVerified} />\n              </FlexView>\n              <Separator heightX={2} />\n            </>\n          )}\n        </FlexView>\n        <Button\n          size=\"small\"\n          renderAs=\"secondary-dark\"\n          type=\"submit\"\n          label={showOtpInput ? 'Log In' : 'Get Verification Code'}\n          width={336}\n          busy={!showOtpInput && isLoading}\n          disabled={isSubmitDisabled}\n        />\n      </Styled.FormWrapper>\n    </FlexView>\n  );\n};\n\nexport default IdentifierOtpForm;\n"],"names":["IdentifierOtpForm","identifier","otp","errors","isOtpVerified","isLoading","isSubmitDisabled","showOtpInput","onChange","onSubmit","onSendOtp","identifierStatusVariant","otpStatusVariant","jsx","FlexView","jsxs","Styled.FormWrapper","TextInput","e","InputStatusIcon","Fragment","Separator","ResendOTP","Button","IdentifierOtpForm$1"],"mappings":";;;;;;;;AAcA,MAAMA,IAAuD,CAAC;AAAA,EAC5D,YAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,MAAM;AACE,QAAAC,IAA0BJ,IAAe,iBAAiB,gBAC1DK,IAAmBR,IAAgB,iBAAiB;AAE1D,SACG,gBAAAS,EAAAC,GAAA,EAAS,UAAU,GAAG,OAAO,KAAK,aAAY,WAAU,SAAS,KAChE,UAAA,gBAAAC,EAACC,GAAA,EAAmB,UAAAP,GAClB,UAAA;AAAA,IAAA,gBAAAM,EAACD,GAAS,EAAA,aAAY,UAAS,iBAAgB,UAC7C,UAAA;AAAA,MAAA,gBAAAD;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,UAAUd,EAAO,aAAa,eAAeQ;AAAA,UAC7C,WAAS;AAAA,UACT,OAAM;AAAA,UACN,OAAOV;AAAA,UACP,UAAU,CAACiB,MAAqCV,EAAS,cAAcU,EAAE,OAAO,KAAK;AAAA,UACrF,OAAO;AAAA,UACP,UAAQ;AAAA,UACR,OAAM;AAAA,UACN,cAAcf,EAAO;AAAA,UACrB,UAAUI;AAAA,UACV,kCACGY,GAAgB,EAAA,SAASZ,GAAc,SAAS,CAAC,CAACJ,EAAO,YAAY;AAAA,QAAA;AAAA,MAE1E;AAAA,MACCI,KAEG,gBAAAQ,EAAAK,GAAA,EAAA,UAAA;AAAA,QAAC,gBAAAP,EAAAQ,GAAA,EAAU,QAAQ,GAAI,CAAA;AAAA,QACvB,gBAAAR;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,UAAUd,EAAO,MAAM,eAAeS;AAAA,YACtC,cAAa;AAAA,YACb,OAAM;AAAA,YACN,OAAOV;AAAA,YACP,UAAU,CAACgB,MAAqCV,EAAS,OAAOU,EAAE,OAAO,KAAK;AAAA,YAC9E,OAAO;AAAA,YACP,UAAQ;AAAA,YACR,OAAM;AAAA,YACN,cAAcf,EAAO;AAAA,YACrB,UAAUC,KAAkBF,EAAI,WAAW,KAAKG;AAAA,YAChD,gBACE,gBAAAQ;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,WAAAd;AAAA,gBACA,SAASD;AAAA,gBACT,SAAS,CAAC,CAACD,EAAO;AAAA,cAAA;AAAA,YACpB;AAAA,UAAA;AAAA,QAEJ;AAAA,QACA,gBAAAU,EAACQ,GAAU,EAAA,SAAS,KAAM,CAAA;AAAA,QACzB,gBAAAR,EAAAC,GAAA,EAAS,aAAY,YAAW,QAAO,QACtC,UAAC,gBAAAD,EAAAS,GAAA,EAAU,aAAaZ,GAAW,UAAUN,EAAe,CAAA,GAC9D;AAAA,QACA,gBAAAS,EAACQ,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,MAAA,GACzB;AAAA,IAAA,GAEJ;AAAA,IACA,gBAAAR;AAAA,MAACU;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAS;AAAA,QACT,MAAK;AAAA,QACL,OAAOhB,IAAe,WAAW;AAAA,QACjC,OAAO;AAAA,QACP,MAAM,CAACA,KAAgBF;AAAA,QACvB,UAAUC;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,GAEAkB,IAAexB;"}

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

@@ -1,20 +1,21 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import c from "../../../ui/buttons/button/button.js";
 import g from "../../../ui/buttons/text-button/text-button.js";
 import l from "../../../ui/inputs/text-input/text-input.js";
 import t from "../../../ui/layout/flex-view.js";
-import a from "../../../ui/separator/separator.js";
-const b = ({
+import s from "../../../ui/separator/separator.js";
+import b from "../../comps/input-status-icon/input-status-icon.js";
+const f = ({
   username: n,
   password: i,
   errors: r,
-  isProcessing: d,
-  onChange: m,
+  isLoading: m,
+  onChange: d,
   onSubmit: u,
   onForgotPassword: p
 }) => {
-  const h = d || !n.trim() || !i.trim();
-  return /* @__PURE__ */ o(
+  const h = m || !n.trim() || !i.trim();
+  return /* @__PURE__ */ a(
     t,
     {
       $gutterX: 2,
@@ -24,9 +25,9 @@ const b = ({
       $background: "BLACK_2",
       $height: 308,
       children: [
-        /* @__PURE__ */ e(a, { heightX: 0.5 }),
-        /* @__PURE__ */ o("form", { onSubmit: u, children: [
-          /* @__PURE__ */ o(t, { $alignItems: "center", $justifyContent: "center", children: [
+        /* @__PURE__ */ e(s, { heightX: 0.5 }),
+        /* @__PURE__ */ a("form", { onSubmit: u, children: [
+          /* @__PURE__ */ a(t, { $alignItems: "center", $justifyContent: "center", children: [
             /* @__PURE__ */ e(
               l,
               {
@@ -35,14 +36,14 @@ const b = ({
                 autoComplete: "username",
                 label: "Username",
                 value: n,
-                onChange: (s) => m("username", s.target.value),
+                onChange: (o) => d("username", o.target.value),
                 width: 330,
                 required: !0,
                 shape: "borderLess",
                 errorMessage: r.username
               }
             ),
-            /* @__PURE__ */ e(a, { height: 36 }),
+            /* @__PURE__ */ e(s, { height: 36 }),
             /* @__PURE__ */ e(
               l,
               {
@@ -51,17 +52,18 @@ const b = ({
                 autoComplete: "password",
                 label: "Password",
                 value: i,
-                onChange: (s) => m("password", s.target.value),
+                onChange: (o) => d("password", o.target.value),
                 width: 330,
                 required: !0,
                 shape: "borderLess",
-                errorMessage: r.password
+                errorMessage: r.password,
+                siblingElement: /* @__PURE__ */ e(b, { isError: !!r.password })
               }
             )
           ] }),
-          /* @__PURE__ */ e(a, { heightX: 1.25 }),
+          /* @__PURE__ */ e(s, { heightX: 1.25 }),
           /* @__PURE__ */ e(t, { $alignItems: "flex-end", children: /* @__PURE__ */ e(g, { label: "Forgot Password?", onClick: p, color: "WHITE_T_60" }) }),
-          /* @__PURE__ */ e(a, { heightX: 2 }),
+          /* @__PURE__ */ e(s, { heightX: 2 }),
           /* @__PURE__ */ e(t, { $justifyContent: "center", children: /* @__PURE__ */ e(
             c,
             {
@@ -70,7 +72,7 @@ const b = ({
               type: "submit",
               label: "Log in",
               width: 336,
-              busy: d,
+              busy: m,
               disabled: h
             }
           ) })
@@ -78,8 +80,8 @@ const b = ({
       ]
     }
   );
-}, x = b;
+}, j = f;
 export {
-  x as default
+  j 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 } 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';\n\nconst UsernamePasswordForm: FC<IUsernamePasswordFormProps> = ({\n  username,\n  password,\n  errors,\n  isProcessing,\n  onChange,\n  onSubmit,\n  onForgotPassword,\n}) => {\n  const isSubmitDisabled = isProcessing || !username.trim() || !password.trim();\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={(e: ChangeEvent<HTMLInputElement>) => onChange('username', e.target.value)}\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={(e: ChangeEvent<HTMLInputElement>) => onChange('password', e.target.value)}\n            width={330}\n            required\n            shape=\"borderLess\"\n            errorMessage={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={isProcessing}\n            disabled={isSubmitDisabled}\n          />\n        </FlexView>\n      </form>\n    </FlexView>\n  );\n};\n\nexport default UsernamePasswordForm;\n"],"names":["UsernamePasswordForm","username","password","errors","isProcessing","onChange","onSubmit","onForgotPassword","isSubmitDisabled","jsxs","FlexView","jsx","Separator","TextInput","e","TextButton","Button","UsernamePasswordForm$1"],"mappings":";;;;;;AAUA,MAAMA,IAAuD,CAAC;AAAA,EAC5D,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AACF,MAAM;AACE,QAAAC,IAAmBJ,KAAgB,CAACH,EAAS,UAAU,CAACC,EAAS;AAGrE,SAAA,gBAAAO;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,UAAAH,GACJ,UAAA;AAAA,UAAA,gBAAAG,EAACC,GAAS,EAAA,aAAY,UAAS,iBAAgB,UAC7C,UAAA;AAAA,YAAA,gBAAAC;AAAA,cAACE;AAAA,cAAA;AAAA,gBACC,UAAUV,EAAO,WAAW,eAAe;AAAA,gBAC3C,WAAS;AAAA,gBACT,cAAa;AAAA,gBACb,OAAM;AAAA,gBACN,OAAOF;AAAA,gBACP,UAAU,CAACa,MAAqCT,EAAS,YAAYS,EAAE,OAAO,KAAK;AAAA,gBACnF,OAAO;AAAA,gBACP,UAAQ;AAAA,gBACR,OAAM;AAAA,gBACN,cAAcX,EAAO;AAAA,cAAA;AAAA,YACvB;AAAA,YACA,gBAAAQ,EAACC,GAAU,EAAA,QAAQ,GAAI,CAAA;AAAA,YACvB,gBAAAD;AAAA,cAACE;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,UAAUV,EAAO,WAAW,eAAe;AAAA,gBAC3C,cAAa;AAAA,gBACb,OAAM;AAAA,gBACN,OAAOD;AAAA,gBACP,UAAU,CAACY,MAAqCT,EAAS,YAAYS,EAAE,OAAO,KAAK;AAAA,gBACnF,OAAO;AAAA,gBACP,UAAQ;AAAA,gBACR,OAAM;AAAA,gBACN,cAAcX,EAAO;AAAA,cAAA;AAAA,YACvB;AAAA,UAAA,GACF;AAAA,UACA,gBAAAQ,EAACC,GAAU,EAAA,SAAS,KAAM,CAAA;AAAA,UACzB,gBAAAD,EAAAD,GAAA,EAAS,aAAY,YACpB,UAAC,gBAAAC,EAAAI,GAAA,EAAW,OAAM,oBAAmB,SAASR,GAAkB,OAAM,aAAa,CAAA,GACrF;AAAA,UACA,gBAAAI,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,MAAMZ;AAAA,cACN,UAAUI;AAAA,YAAA;AAAA,UAAA,GAEd;AAAA,QAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEAS,IAAejB;"}
+{"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 } 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  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={(e: ChangeEvent<HTMLInputElement>) => onChange('username', e.target.value)}\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={(e: ChangeEvent<HTMLInputElement>) => onChange('password', e.target.value)}\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 UsernamePasswordForm;\n"],"names":["UsernamePasswordForm","username","password","errors","isLoading","onChange","onSubmit","onForgotPassword","isSubmitDisabled","jsxs","FlexView","jsx","Separator","TextInput","e","InputStatusIcon","TextButton","Button","UsernamePasswordForm$1"],"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;AAGlE,SAAA,gBAAAO;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,UAAAH,GACJ,UAAA;AAAA,UAAA,gBAAAG,EAACC,GAAS,EAAA,aAAY,UAAS,iBAAgB,UAC7C,UAAA;AAAA,YAAA,gBAAAC;AAAA,cAACE;AAAA,cAAA;AAAA,gBACC,UAAUV,EAAO,WAAW,eAAe;AAAA,gBAC3C,WAAS;AAAA,gBACT,cAAa;AAAA,gBACb,OAAM;AAAA,gBACN,OAAOF;AAAA,gBACP,UAAU,CAACa,MAAqCT,EAAS,YAAYS,EAAE,OAAO,KAAK;AAAA,gBACnF,OAAO;AAAA,gBACP,UAAQ;AAAA,gBACR,OAAM;AAAA,gBACN,cAAcX,EAAO;AAAA,cAAA;AAAA,YACvB;AAAA,YACA,gBAAAQ,EAACC,GAAU,EAAA,QAAQ,GAAI,CAAA;AAAA,YACvB,gBAAAD;AAAA,cAACE;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,UAAUV,EAAO,WAAW,eAAe;AAAA,gBAC3C,cAAa;AAAA,gBACb,OAAM;AAAA,gBACN,OAAOD;AAAA,gBACP,UAAU,CAACY,MAAqCT,EAAS,YAAYS,EAAE,OAAO,KAAK;AAAA,gBACnF,OAAO;AAAA,gBACP,UAAQ;AAAA,gBACR,OAAM;AAAA,gBACN,cAAcX,EAAO;AAAA,gBACrB,gBAAiB,gBAAAQ,EAAAI,GAAA,EAAgB,SAAS,CAAC,CAACZ,EAAO,UAAU;AAAA,cAAA;AAAA,YAC/D;AAAA,UAAA,GACF;AAAA,UACA,gBAAAQ,EAACC,GAAU,EAAA,SAAS,KAAM,CAAA;AAAA,UACzB,gBAAAD,EAAAD,GAAA,EAAS,aAAY,YACpB,UAAC,gBAAAC,EAAAK,GAAA,EAAW,OAAM,oBAAmB,SAAST,GAAkB,OAAM,aAAa,CAAA,GACrF;AAAA,UACA,gBAAAI,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,OAAO;AAAA,cACP,MAAMb;AAAA,cACN,UAAUI;AAAA,YAAA;AAAA,UAAA,GAEd;AAAA,QAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEAU,IAAelB;"}

package/dist/features/auth/signup/custom-input-field/{phone-input/country-selector → country-selector}/country-code-button.js

@@ -1,8 +1,8 @@
 import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import n from "../../../../../../assets/line-icons/icons/chevron-down.js";
-import i from "../../../../../ui/layout/flex-view.js";
-import d from "../../../../../ui/text/text.js";
-import { CountryCodeButton as $ } from "../phone-input-styled.js";
+import n from "../../../../../assets/line-icons/icons/chevron-down.js";
+import i from "../../../../ui/layout/flex-view.js";
+import d from "../../../../ui/text/text.js";
+import { CountryCodeButton as $ } from "./country-selector-styled.js";
 const C = ({
   value: t,
   menuVisible: e

package/dist/features/auth/signup/custom-input-field/country-selector/country-code-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"country-code-button.js","sources":["../../../../../../src/features/auth/signup/custom-input-field/country-selector/country-code-button.tsx"],"sourcesContent":["import type { FC } from 'react';\n\nimport ChevronDownIcon from '../../../../../assets/line-icons/icons/chevron-down';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport * as Styled from './country-selector-styled';\n\nconst CountryCodeButton: FC<{ value?: string; menuVisible?: boolean }> = ({\n  value,\n  menuVisible,\n}) => {\n  return (\n    <Styled.CountryCodeButton\n      $background=\"BLACK_5\"\n      $borderRadius={4}\n      $gutterX={0.5}\n      $gap={5}\n      $alignItems=\"center\"\n      $justifyContent=\"space-between\"\n      $borderColor={menuVisible ? 'WHITE_T_38' : 'BLACK_5'}\n      $flexDirection=\"row\"\n      $flexGap={2}\n    >\n      <Text $renderAs=\"ab1\" $color=\"WHITE\">\n        +{value}\n      </Text>\n      <FlexView $width={20}>\n        <ChevronDownIcon width={20} height={20} color=\"WHITE\" />\n      </FlexView>\n    </Styled.CountryCodeButton>\n  );\n};\n\nexport default CountryCodeButton;\n"],"names":["CountryCodeButton","value","menuVisible","jsxs","Styled.CountryCodeButton","Text","jsx","FlexView","ChevronDownIcon"],"mappings":";;;;;AAOA,MAAMA,IAAmE,CAAC;AAAA,EACxE,OAAAC;AAAA,EACA,aAAAC;AACF,MAEI,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,aAAY;AAAA,IACZ,eAAe;AAAA,IACf,UAAU;AAAA,IACV,MAAM;AAAA,IACN,aAAY;AAAA,IACZ,iBAAgB;AAAA,IAChB,cAAcF,IAAc,eAAe;AAAA,IAC3C,gBAAe;AAAA,IACf,UAAU;AAAA,IAEV,UAAA;AAAA,MAAA,gBAAAC,EAACE,GAAK,EAAA,WAAU,OAAM,QAAO,SAAQ,UAAA;AAAA,QAAA;AAAA,QACjCJ;AAAA,MAAA,GACJ;AAAA,MACC,gBAAAK,EAAAC,GAAA,EAAS,QAAQ,IAChB,UAAC,gBAAAD,EAAAE,GAAA,EAAgB,OAAO,IAAI,QAAQ,IAAI,OAAM,QAAQ,CAAA,GACxD;AAAA,IAAA;AAAA,EAAA;AAAA;"}

package/dist/features/auth/signup/custom-input-field/country-selector/country-list-menu.js

@@ -0,0 +1,29 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import $ from "../../../../ui/text/text.js";
+import { COUNTRY_CODE_MAP as a } from "../../signup-constants.js";
+import { MenuWrapper as m, MenuItem as p, FlagIcon as s } from "./country-selector-styled.js";
+const x = ({ selectedCountry: o, onChange: t }) => /* @__PURE__ */ e(m, { $widthX: 10, $gapX: 0.5, $background: "BLACK_2", $borderColor: "BLACK_5", children: a.map((n) => {
+  const { id: r, value: i, icon: c, code: d } = n;
+  return /* @__PURE__ */ l(
+    p,
+    {
+      $gutterX: 0.5,
+      $gapX: 0.75,
+      onClick: () => t({ code: d, id: r }),
+      $width: "100%",
+      $flexDirection: "row",
+      $alignItems: "center",
+      $flexGap: 8,
+      $isSelected: o.id === r,
+      children: [
+        /* @__PURE__ */ e(s, { src: c }),
+        /* @__PURE__ */ e($, { $renderAs: "ab3", $color: "WHITE", children: i })
+      ]
+    },
+    r
+  );
+}) });
+export {
+  x as default
+};
+//# sourceMappingURL=country-list-menu.js.map

package/dist/features/auth/signup/custom-input-field/country-selector/country-list-menu.js.map

@@ -0,0 +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 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 }) => {\n  return (\n    <Styled.MenuWrapper $widthX={10} $gapX={0.5} $background={'BLACK_2'} $borderColor={'BLACK_5'}>\n      {COUNTRY_CODE_MAP.map(option => {\n        const { id, value, icon, code } = option;\n\n        return (\n          <Styled.MenuItem\n            key={id}\n            $gutterX={0.5}\n            $gapX={0.75}\n            onClick={() => onChange({ code, id })}\n            $width=\"100%\"\n            $flexDirection=\"row\"\n            $alignItems=\"center\"\n            $flexGap={8}\n            $isSelected={selectedCountry.id === id}\n          >\n            <Styled.FlagIcon src={icon} />\n            <Text $renderAs=\"ab3\" $color={'WHITE'}>\n              {value}\n            </Text>\n          </Styled.MenuItem>\n        );\n      })}\n    </Styled.MenuWrapper>\n  );\n};\n\nexport default CountryListMenu;\n"],"names":["CountryListMenu","selectedCountry","onChange","jsx","Styled.MenuWrapper","COUNTRY_CODE_MAP","option","id","value","icon","code","jsxs","Styled.MenuItem","Styled.FlagIcon","Text"],"mappings":";;;;AAOA,MAAMA,IAA6C,CAAC,EAAE,iBAAAC,GAAiB,UAAAC,QAElE,gBAAAC,EAAAC,GAAA,EAAmB,SAAS,IAAI,OAAO,KAAK,aAAa,WAAW,cAAc,WAChF,UAAAC,EAAiB,IAAI,CAAUC,MAAA;AAC9B,QAAM,EAAE,IAAAC,GAAI,OAAAC,GAAO,MAAAC,GAAM,MAAAC,MAASJ;AAGhC,SAAA,gBAAAK;AAAA,IAACC;AAAAA,IAAA;AAAA,MAEC,UAAU;AAAA,MACV,OAAO;AAAA,MACP,SAAS,MAAMV,EAAS,EAAE,MAAAQ,GAAM,IAAAH,GAAI;AAAA,MACpC,QAAO;AAAA,MACP,gBAAe;AAAA,MACf,aAAY;AAAA,MACZ,UAAU;AAAA,MACV,aAAaN,EAAgB,OAAOM;AAAA,MAEpC,UAAA;AAAA,QAAA,gBAAAJ,EAACU,GAAA,EAAgB,KAAKJ,EAAM,CAAA;AAAA,0BAC3BK,GAAK,EAAA,WAAU,OAAM,QAAQ,SAC3B,UACHN,GAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAbKD;AAAA,EAAA;AAgBV,CAAA,EACH,CAAA;"}

package/dist/features/auth/signup/custom-input-field/{phone-input/phone-input-styled.js → country-selector/country-selector-styled.js}

@@ -22,8 +22,8 @@ const i = r(o)`
 `;
 export {
   s as CountryCodeButton,
-  d as Icon,
+  d as FlagIcon,
   c as MenuItem,
   i as MenuWrapper
 };
-//# sourceMappingURL=phone-input-styled.js.map
+//# sourceMappingURL=country-selector-styled.js.map

package/dist/features/auth/signup/custom-input-field/country-selector/country-selector-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"country-selector-styled.js","sources":["../../../../../../src/features/auth/signup/custom-input-field/country-selector/country-selector-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../../ui/layout/flex-view';\n\nexport const MenuWrapper = styled(FlexView)`\n  border-radius: 2px;\n  max-height: 220px;\n  overflow-y: scroll;\n  width: 271px;\n`;\n\nexport const MenuItem = styled(FlexView)<{ $isSelected: boolean }>(({ theme, $isSelected }) => {\n  return `\n      cursor: pointer;\n      background: ${$isSelected ? theme.colors.BLACK_5 : 'transparent'};\n      &:hover {\n            background: ${theme.colors.BLACK_5};\n      }\n   `;\n});\n\nexport const FlagIcon = styled.img`\n  width: 20px;\n  height: 20px;\n`;\n\nexport const CountryCodeButton = styled(FlexView)`\n  cursor: pointer;\n  padding-right: 4px;\n  max-width: 100px;\n  min-width: 80px;\n`;\n"],"names":["MenuWrapper","styled","FlexView","MenuItem","theme","$isSelected","FlagIcon","CountryCodeButton"],"mappings":";;AAIa,MAAAA,IAAcC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAO7BC,IAAWF,EAAOC,CAAQ,EAA4B,CAAC,EAAE,OAAAE,GAAO,aAAAC,QACpE;AAAA;AAAA,oBAEWA,IAAcD,EAAM,OAAO,UAAU,aAAa;AAAA;AAAA,0BAE5CA,EAAM,OAAO,OAAO;AAAA;AAAA,IAG7C,GAEYE,IAAWL,EAAO;AAAA;AAAA;AAAA,GAKlBM,IAAoBN,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/auth/signup/custom-input-field/country-selector/country-selector.js

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useState as s, useCallback as u } from "react";
+import f from "../../../../ui/context-menu/context-menu.js";
+import l from "../../../../ui/layout/flex-view.js";
+import c from "./country-code-button.js";
+import d from "./country-list-menu.js";
+const V = ({ value: t, onChange: n }) => {
+  const [o, r] = s(!1), i = u((m) => {
+    r(m);
+  }, []);
+  return !t || !n ? null : /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(
+    f,
+    {
+      startLeft: !0,
+      targetElement: /* @__PURE__ */ e(c, { value: t == null ? void 0 : t.code, menuVisible: o }),
+      menuElement: /* @__PURE__ */ e(d, { onChange: n, selectedCountry: t }),
+      menuOffset: 5,
+      menuZIndex: 1,
+      onMenuVisibilityChange: i
+    }
+  ) });
+};
+export {
+  V as default
+};
+//# sourceMappingURL=country-selector.js.map

package/dist/features/auth/signup/custom-input-field/country-selector/country-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"country-selector.js","sources":["../../../../../../src/features/auth/signup/custom-input-field/country-selector/country-selector.tsx"],"sourcesContent":["import type { IPhoneCountrySelectorProps } from './country-selector-types';\n\nimport { useCallback, useState, type FC } from 'react';\n\nimport ContextMenu from '../../../../ui/context-menu/context-menu';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport CountryCodeButton from './country-code-button';\nimport CountryListMenu from './country-list-menu';\n\nconst PhoneCountrySelector: FC<IPhoneCountrySelectorProps> = ({ value, onChange }) => {\n  const [menuVisible, setMenuVisible] = useState(false);\n\n  const handleMenuVisibility = useCallback((visible: boolean) => {\n    setMenuVisible(visible);\n  }, []);\n\n  if (!value || !onChange) return null;\n\n  return (\n    <FlexView>\n      <ContextMenu\n        startLeft\n        targetElement={<CountryCodeButton value={value?.code} menuVisible={menuVisible} />}\n        menuElement={<CountryListMenu onChange={onChange} selectedCountry={value} />}\n        menuOffset={5}\n        menuZIndex={1}\n        onMenuVisibilityChange={handleMenuVisibility}\n      />\n    </FlexView>\n  );\n};\n\nexport default PhoneCountrySelector;\n"],"names":["PhoneCountrySelector","value","onChange","menuVisible","setMenuVisible","useState","handleMenuVisibility","useCallback","visible","FlexView","jsx","ContextMenu","CountryCodeButton","CountryListMenu"],"mappings":";;;;;;AASA,MAAMA,IAAuD,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAAe;AACpF,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAE9CC,IAAuBC,EAAY,CAACC,MAAqB;AAC7D,IAAAJ,EAAeI,CAAO;AAAA,EACxB,GAAG,CAAE,CAAA;AAEL,SAAI,CAACP,KAAS,CAACC,IAAiB,yBAG7BO,GACC,EAAA,UAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAS;AAAA,MACT,eAAgB,gBAAAD,EAAAE,GAAA,EAAkB,OAAOX,KAAA,gBAAAA,EAAO,MAAM,aAAAE,GAA0B;AAAA,MAChF,aAAa,gBAAAO,EAACG,GAAgB,EAAA,UAAAX,GAAoB,iBAAiBD,GAAO;AAAA,MAC1E,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,wBAAwBK;AAAA,IAAA;AAAA,EAE5B,EAAA,CAAA;AAEJ;"}

package/dist/features/auth/signup/custom-input-field/custom-input-field-styled.js

@@ -1,6 +1,5 @@
 import o from "styled-components";
-import e from "../../../ui/layout/flex-view.js";
-const r = o.input`
+const e = o.input`
   width: 100%;
   max-width: 330px;
   padding: 0;
@@ -25,14 +24,7 @@ const r = o.input`
     -webkit-appearance: none;
   }
 `;
-o(e)`
-  width: 100%;
-`;
-const p = o(e)`
-  position: relative;
-`;
 export {
-  r as CustomInput,
-  p as PasswordInputWrapper
+  e as CustomInput
 };
 //# sourceMappingURL=custom-input-field-styled.js.map

package/dist/features/auth/signup/custom-input-field/custom-input-field-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"custom-input-field-styled.js","sources":["../../../../../src/features/auth/signup/custom-input-field/custom-input-field-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nexport const CustomInput = styled.input<{ color: string; align?: string; textTransform?: string }>`\n  width: 100%;\n  max-width: 330px;\n  padding: 0;\n  line-height: 40px;\n  text-transform: ${({ textTransform }) => textTransform || 'none'};\n  border: none;\n  outline: none;\n  background-color: transparent;\n  font-size: 32px;\n  text-align: ${({ align }) => align ?? 'center'};\n  caret-color: ${({ theme }) => theme.colors.WHITE};\n  color: ${({ theme }) => theme.colors.WHITE};\n  font-family: 'Athletics-Light';\n  color: ${({ color }) => color};\n\n  &::placeholder {\n    font-family: 'Athletics-Light';\n    font-size: 32px;\n  }\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n`;\n\nexport const CountryCodeSelector = styled(FlexView)`\n  width: 100%;\n`;\n\nexport const PasswordInputWrapper = styled(FlexView)`\n  position: relative;\n`;\n"],"names":["CustomInput","styled","textTransform","align","theme","color","FlexView","PasswordInputWrapper"],"mappings":";;AAIO,MAAMA,IAAcC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKd,CAAC,EAAE,eAAAC,QAAoBA,KAAiB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKlD,CAAC,EAAE,OAAAC,QAAYA,KAAS,QAAQ;AAAA,iBAC/B,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA,WACvC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA,WAEjC,CAAC,EAAE,OAAAC,EAAM,MAAMA,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYIJ,EAAOK,CAAQ;AAAA;AAAA;AAIrC,MAAAC,IAAuBN,EAAOK,CAAQ;AAAA;AAAA;"}
+{"version":3,"file":"custom-input-field-styled.js","sources":["../../../../../src/features/auth/signup/custom-input-field/custom-input-field-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const CustomInput = styled.input<{ color: string; align?: string; textTransform?: string }>`\n  width: 100%;\n  max-width: 330px;\n  padding: 0;\n  line-height: 40px;\n  text-transform: ${({ textTransform }) => textTransform || 'none'};\n  border: none;\n  outline: none;\n  background-color: transparent;\n  font-size: 32px;\n  text-align: ${({ align }) => align ?? 'center'};\n  caret-color: ${({ theme }) => theme.colors.WHITE};\n  color: ${({ theme }) => theme.colors.WHITE};\n  font-family: 'Athletics-Light';\n  color: ${({ color }) => color};\n\n  &::placeholder {\n    font-family: 'Athletics-Light';\n    font-size: 32px;\n  }\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n`;\n"],"names":["CustomInput","styled","textTransform","align","theme","color"],"mappings":";AAEO,MAAMA,IAAcC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKd,CAAC,EAAE,eAAAC,QAAoBA,KAAiB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKlD,CAAC,EAAE,OAAAC,QAAYA,KAAS,QAAQ;AAAA,iBAC/B,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA,WACvC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA,WAEjC,CAAC,EAAE,OAAAC,EAAM,MAAMA,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/auth/signup/custom-input-field/custom-input-field.js

@@ -1,85 +1,81 @@
-import { jsx as o, jsxs as W } from "react/jsx-runtime";
-import { useState as y, useCallback as x, useMemo as $ } from "react";
-import { useTheme as D } from "styled-components";
-import E from "../../../../assets/line-icons/icons/eye.js";
-import F from "../../../../assets/line-icons/icons/striked-eye.js";
-import H from "../../../ui/buttons/clickable/clickable.js";
-import P from "../../../ui/layout/flex-view.js";
-import { CustomInput as j, PasswordInputWrapper as G } from "./custom-input-field-styled.js";
+import { jsx as s, jsxs as F } from "react/jsx-runtime";
+import { useState as P, useCallback as V, useMemo as u } from "react";
+import { useTheme as j } from "styled-components";
+import k from "../../../ui/layout/flex-view.js";
+import v from "./country-selector/country-selector.js";
+import { CustomInput as G } from "./custom-input-field-styled.js";
 import { InputWrapper as K } from "./input-wrapper/input-wrapper.js";
-const R = ({
-  value: n,
-  onChange: c,
-  error: i,
-  helperText: b,
+import R from "./password-toggle/password-toggle.js";
+const S = ({
+  value: a,
+  onChange: m,
+  error: n,
+  helperText: p,
   onEnter: r,
-  isLoading: g,
-  isValid: p,
-  type: t = "text",
-  placeholder: u,
-  actionElement: k,
-  maxLength: m,
-  width: a,
-  textTransform: d,
-  textAlign: f = "center"
+  isLoading: c,
+  isValid: l,
+  type: o = "text",
+  placeholder: f,
+  actionElement: d,
+  maxLength: h,
+  width: w,
+  textTransform: x,
+  textAlign: g = "center",
+  selectedCountry: C,
+  onCountryChange: I
 }) => {
-  const s = D(), [l, T] = y(!1), w = x(
+  const t = j(), [i, T] = P(!1), $ = V(
     (e) => {
       e.key === "Enter" && (r == null || r());
     },
     [r]
-  ), h = $(() => t === "password" ? l ? "text" : "password" : t, [t, l]), I = $(() => i ? s.colors.RED : p ? s.colors.GREEN_4 : s.colors.WHITE, [i, p, s.colors]), C = x(
-    () => /* @__PURE__ */ o(
-      j,
-      {
-        value: n,
-        onChange: (e) => c(e.target.value),
-        autoFocus: !0,
-        placeholder: u,
-        color: I,
-        autoCapitalize: "none",
-        textTransform: d,
-        type: h,
-        onKeyDown: w,
-        maxLength: m,
-        align: f
-      }
-    ),
-    [
-      w,
-      I,
-      h,
-      m,
-      c,
-      u,
-      f,
-      d,
-      n
-    ]
-  );
-  return /* @__PURE__ */ o(
+  ), b = u(() => o === "password" ? i ? "text" : "password" : o === "phone" ? "number" : o, [o, i]), D = u(() => n ? t.colors.RED : l ? t.colors.GREEN_4 : t.colors.WHITE, [n, l, t.colors]);
+  return /* @__PURE__ */ s(
     K,
     {
-      helperText: i || b,
-      isLoading: g,
-      actionElement: k,
-      children: t === "password" ? /* @__PURE__ */ W(
-        G,
+      helperText: n || p,
+      isLoading: c,
+      actionElement: d,
+      children: /* @__PURE__ */ F(
+        k,
         {
-          $width: a ?? 220,
+          $width: w ?? "100%",
+          $flex: 1,
           $alignItems: "center",
           $flexDirection: "row",
           $flexGapX: 0.5,
           children: [
-            C(),
-            /* @__PURE__ */ o(H, { label: "password-toggle", onClick: () => T((e) => !e), children: l ? /* @__PURE__ */ o(E, { color: "WHITE", width: 24, height: 24 }) : /* @__PURE__ */ o(F, { color: "WHITE", width: 24, height: 24 }) })
+            o === "phone" && /* @__PURE__ */ s(v, { onChange: I, value: C }),
+            /* @__PURE__ */ s(
+              G,
+              {
+                value: a,
+                onChange: (e) => m(e.target.value),
+                autoFocus: !0,
+                placeholder: f,
+                color: D,
+                autoCapitalize: "none",
+                textTransform: x,
+                type: b,
+                onKeyDown: $,
+                maxLength: h,
+                align: g
+              }
+            ),
+            o === "password" && /* @__PURE__ */ s(
+              R,
+              {
+                isVisible: i,
+                onToggle: () => T((e) => !e)
+              }
+            )
           ]
         }
-      ) : /* @__PURE__ */ o(P, { $width: a ?? "100%", $flex: 1, children: C() })
+      )
     }
   );
-}, B = R;
+}, q = S;
 export {
-  B as default
+  q as default
 };
 //# sourceMappingURL=custom-input-field.js.map

package/dist/features/auth/signup/custom-input-field/custom-input-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"custom-input-field.js","sources":["../../../../../src/features/auth/signup/custom-input-field/custom-input-field.tsx"],"sourcesContent":["import type { ICustomInputFieldProps } from './custom-input-field-types';\n\nimport { useCallback, useMemo, useState, type FC, type KeyboardEvent } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport EyeIcon from '../../../../assets/line-icons/icons/eye';\nimport StrikedEyeIcon from '../../../../assets/line-icons/icons/striked-eye';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport FlexView from '../../../ui/layout/flex-view';\nimport * as Styled from './custom-input-field-styled';\nimport { InputWrapper } from './input-wrapper/input-wrapper';\n\nconst CustomInputField: FC<ICustomInputFieldProps> = ({\n  value,\n  onChange,\n  error,\n  helperText,\n  onEnter,\n  isLoading,\n  isValid,\n  type = 'text',\n  placeholder,\n  actionElement,\n  maxLength,\n  width,\n  textTransform,\n  textAlign = 'center',\n}) => {\n  const theme = useTheme();\n  const [isPasswordVisible, setIsPasswordVisible] = useState(false);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter') {\n        onEnter?.();\n      }\n    },\n    [onEnter],\n  );\n\n  const inputType = useMemo(() => {\n    if (type === 'password') return isPasswordVisible ? 'text' : 'password';\n\n    return type;\n  }, [type, isPasswordVisible]);\n\n  const inputColor = useMemo(() => {\n    if (error) return theme.colors.RED;\n\n    if (isValid) return theme.colors.GREEN_4;\n\n    return theme.colors.WHITE;\n  }, [error, isValid, theme.colors]);\n\n  const renderInput = useCallback(\n    () => (\n      <Styled.CustomInput\n        value={value}\n        onChange={event => onChange(event.target.value)}\n        autoFocus\n        placeholder={placeholder}\n        color={inputColor}\n        autoCapitalize=\"none\"\n        textTransform={textTransform}\n        type={inputType}\n        onKeyDown={handleKeyDown}\n        maxLength={maxLength}\n        align={textAlign}\n      />\n    ),\n    [\n      handleKeyDown,\n      inputColor,\n      inputType,\n      maxLength,\n      onChange,\n      placeholder,\n      textAlign,\n      textTransform,\n      value,\n    ],\n  );\n\n  return (\n    <InputWrapper\n      helperText={error || helperText}\n      isLoading={isLoading}\n      actionElement={actionElement}\n    >\n      {type === 'password' ? (\n        <Styled.PasswordInputWrapper\n          $width={width ?? 220}\n          $alignItems=\"center\"\n          $flexDirection=\"row\"\n          $flexGapX={0.5}\n        >\n          {renderInput()}\n          <Clickable label=\"password-toggle\" onClick={() => setIsPasswordVisible(prev => !prev)}>\n            {isPasswordVisible ? (\n              <EyeIcon color=\"WHITE\" width={24} height={24} />\n            ) : (\n              <StrikedEyeIcon color=\"WHITE\" width={24} height={24} />\n            )}\n          </Clickable>\n        </Styled.PasswordInputWrapper>\n      ) : (\n        <FlexView $width={width ?? '100%'} $flex={1}>\n          {renderInput()}\n        </FlexView>\n      )}\n    </InputWrapper>\n  );\n};\n\nexport default CustomInputField;\n"],"names":["CustomInputField","value","onChange","error","helperText","onEnter","isLoading","isValid","type","placeholder","actionElement","maxLength","width","textTransform","textAlign","theme","useTheme","isPasswordVisible","setIsPasswordVisible","useState","handleKeyDown","useCallback","event","inputType","useMemo","inputColor","renderInput","jsx","Styled.CustomInput","InputWrapper","jsxs","Styled.PasswordInputWrapper","Clickable","prev","EyeIcon","StrikedEyeIcon","FlexView","CustomInputField$1"],"mappings":";;;;;;;;;AAYA,MAAMA,IAA+C,CAAC;AAAA,EACpD,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC,IAAY;AACd,MAAM;AACJ,QAAMC,IAAQC,KACR,CAACC,GAAmBC,CAAoB,IAAIC,EAAS,EAAK,GAE1DC,IAAgBC;AAAA,IACpB,CAACC,MAA2C;AACtC,MAAAA,EAAM,QAAQ,YACNjB,KAAA,QAAAA;AAAA,IAEd;AAAA,IACA,CAACA,CAAO;AAAA,EAAA,GAGJkB,IAAYC,EAAQ,MACpBhB,MAAS,aAAmBS,IAAoB,SAAS,aAEtDT,GACN,CAACA,GAAMS,CAAiB,CAAC,GAEtBQ,IAAaD,EAAQ,MACrBrB,IAAcY,EAAM,OAAO,MAE3BR,IAAgBQ,EAAM,OAAO,UAE1BA,EAAM,OAAO,OACnB,CAACZ,GAAOI,GAASQ,EAAM,MAAM,CAAC,GAE3BW,IAAcL;AAAA,IAClB,MACE,gBAAAM;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,OAAA3B;AAAA,QACA,UAAU,CAAAqB,MAASpB,EAASoB,EAAM,OAAO,KAAK;AAAA,QAC9C,WAAS;AAAA,QACT,aAAAb;AAAA,QACA,OAAOgB;AAAA,QACP,gBAAe;AAAA,QACf,eAAAZ;AAAA,QACA,MAAMU;AAAA,QACN,WAAWH;AAAA,QACX,WAAAT;AAAA,QACA,OAAOG;AAAA,MAAA;AAAA,IACT;AAAA,IAEF;AAAA,MACEM;AAAA,MACAK;AAAA,MACAF;AAAA,MACAZ;AAAA,MACAT;AAAA,MACAO;AAAA,MACAK;AAAA,MACAD;AAAA,MACAZ;AAAA,IACF;AAAA,EAAA;AAIA,SAAA,gBAAA0B;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,YAAY1B,KAASC;AAAA,MACrB,WAAAE;AAAA,MACA,eAAAI;AAAA,MAEC,gBAAS,aACR,gBAAAoB;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,QAAQnB,KAAS;AAAA,UACjB,aAAY;AAAA,UACZ,gBAAe;AAAA,UACf,WAAW;AAAA,UAEV,UAAA;AAAA,YAAYc,EAAA;AAAA,YACZ,gBAAAC,EAAAK,GAAA,EAAU,OAAM,mBAAkB,SAAS,MAAMd,EAAqB,CAAAe,MAAQ,CAACA,CAAI,GACjF,UAAAhB,IACE,gBAAAU,EAAAO,GAAA,EAAQ,OAAM,SAAQ,OAAO,IAAI,QAAQ,GAAI,CAAA,IAE9C,gBAAAP,EAACQ,GAAe,EAAA,OAAM,SAAQ,OAAO,IAAI,QAAQ,GAAI,CAAA,GAEzD;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,sBAECC,GAAS,EAAA,QAAQxB,KAAS,QAAQ,OAAO,GACvC,UAAAc,EACH,EAAA,CAAA;AAAA,IAAA;AAAA,EAAA;AAIR,GAEAW,IAAerC;"}
+{"version":3,"file":"custom-input-field.js","sources":["../../../../../src/features/auth/signup/custom-input-field/custom-input-field.tsx"],"sourcesContent":["import type { ICustomInputFieldProps } from './custom-input-field-types';\n\nimport { useCallback, useMemo, useState, type FC, type KeyboardEvent } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport PhoneCountrySelector from './country-selector/country-selector';\nimport * as Styled from './custom-input-field-styled';\nimport { InputWrapper } from './input-wrapper/input-wrapper';\nimport PasswordToggleIcon from './password-toggle/password-toggle';\n\nconst CustomInputField: FC<ICustomInputFieldProps> = ({\n  value,\n  onChange,\n  error,\n  helperText,\n  onEnter,\n  isLoading,\n  isValid,\n  type = 'text',\n  placeholder,\n  actionElement,\n  maxLength,\n  width,\n  textTransform,\n  textAlign = 'center',\n  selectedCountry,\n  onCountryChange,\n}) => {\n  const theme = useTheme();\n  const [isPasswordVisible, setIsPasswordVisible] = useState(false);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter') {\n        onEnter?.();\n      }\n    },\n    [onEnter],\n  );\n\n  const inputType = useMemo(() => {\n    if (type === 'password') return isPasswordVisible ? 'text' : 'password';\n\n    if (type === 'phone') return 'number';\n\n    return type;\n  }, [type, isPasswordVisible]);\n\n  const inputColor = useMemo(() => {\n    if (error) return theme.colors.RED;\n\n    if (isValid) return theme.colors.GREEN_4;\n\n    return theme.colors.WHITE;\n  }, [error, isValid, theme.colors]);\n\n  return (\n    <InputWrapper\n      helperText={error || helperText}\n      isLoading={isLoading}\n      actionElement={actionElement}\n    >\n      <FlexView\n        $width={width ?? '100%'}\n        $flex={1}\n        $alignItems=\"center\"\n        $flexDirection=\"row\"\n        $flexGapX={0.5}\n      >\n        {type === 'phone' && (\n          <PhoneCountrySelector onChange={onCountryChange} value={selectedCountry} />\n        )}\n        <Styled.CustomInput\n          value={value}\n          onChange={event => onChange(event.target.value)}\n          autoFocus\n          placeholder={placeholder}\n          color={inputColor}\n          autoCapitalize=\"none\"\n          textTransform={textTransform}\n          type={inputType}\n          onKeyDown={handleKeyDown}\n          maxLength={maxLength}\n          align={textAlign}\n        />\n        {type === 'password' && (\n          <PasswordToggleIcon\n            isVisible={isPasswordVisible}\n            onToggle={() => setIsPasswordVisible(prev => !prev)}\n          />\n        )}\n      </FlexView>\n    </InputWrapper>\n  );\n};\n\nexport default CustomInputField;\n"],"names":["CustomInputField","value","onChange","error","helperText","onEnter","isLoading","isValid","type","placeholder","actionElement","maxLength","width","textTransform","textAlign","selectedCountry","onCountryChange","theme","useTheme","isPasswordVisible","setIsPasswordVisible","useState","handleKeyDown","useCallback","event","inputType","useMemo","inputColor","jsx","InputWrapper","jsxs","FlexView","PhoneCountrySelector","Styled.CustomInput","PasswordToggleIcon","prev","CustomInputField$1"],"mappings":";;;;;;;;AAWA,MAAMA,IAA+C,CAAC;AAAA,EACpD,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,iBAAAC;AAAA,EACA,iBAAAC;AACF,MAAM;AACJ,QAAMC,IAAQC,KACR,CAACC,GAAmBC,CAAoB,IAAIC,EAAS,EAAK,GAE1DC,IAAgBC;AAAA,IACpB,CAACC,MAA2C;AACtC,MAAAA,EAAM,QAAQ,YACNnB,KAAA,QAAAA;AAAA,IAEd;AAAA,IACA,CAACA,CAAO;AAAA,EAAA,GAGJoB,IAAYC,EAAQ,MACpBlB,MAAS,aAAmBW,IAAoB,SAAS,aAEzDX,MAAS,UAAgB,WAEtBA,GACN,CAACA,GAAMW,CAAiB,CAAC,GAEtBQ,IAAaD,EAAQ,MACrBvB,IAAcc,EAAM,OAAO,MAE3BV,IAAgBU,EAAM,OAAO,UAE1BA,EAAM,OAAO,OACnB,CAACd,GAAOI,GAASU,EAAM,MAAM,CAAC;AAG/B,SAAA,gBAAAW;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,YAAY1B,KAASC;AAAA,MACrB,WAAAE;AAAA,MACA,eAAAI;AAAA,MAEA,UAAA,gBAAAoB;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,QAAQnB,KAAS;AAAA,UACjB,OAAO;AAAA,UACP,aAAY;AAAA,UACZ,gBAAe;AAAA,UACf,WAAW;AAAA,UAEV,UAAA;AAAA,YAAAJ,MAAS,WACP,gBAAAoB,EAAAI,GAAA,EAAqB,UAAUhB,GAAiB,OAAOD,GAAiB;AAAA,YAE3E,gBAAAa;AAAA,cAACK;AAAAA,cAAA;AAAA,gBACC,OAAAhC;AAAA,gBACA,UAAU,CAAAuB,MAAStB,EAASsB,EAAM,OAAO,KAAK;AAAA,gBAC9C,WAAS;AAAA,gBACT,aAAAf;AAAA,gBACA,OAAOkB;AAAA,gBACP,gBAAe;AAAA,gBACf,eAAAd;AAAA,gBACA,MAAMY;AAAA,gBACN,WAAWH;AAAA,gBACX,WAAAX;AAAA,gBACA,OAAOG;AAAA,cAAA;AAAA,YACT;AAAA,YACCN,MAAS,cACR,gBAAAoB;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,WAAWf;AAAA,gBACX,UAAU,MAAMC,EAAqB,CAAAe,MAAQ,CAACA,CAAI;AAAA,cAAA;AAAA,YACpD;AAAA,UAAA;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,EAAA;AAGN,GAEAC,IAAepC;"}

package/dist/features/auth/signup/custom-input-field/password-toggle/password-toggle.js

@@ -0,0 +1,9 @@
+import { jsx as o } from "react/jsx-runtime";
+import t from "../../../../../assets/line-icons/icons/eye.js";
+import e from "../../../../../assets/line-icons/icons/striked-eye.js";
+import l from "../../../../ui/buttons/clickable/clickable.js";
+const h = ({ isVisible: i, onToggle: r }) => /* @__PURE__ */ o(l, { label: "toggle-password-visibility", onClick: r, children: i ? /* @__PURE__ */ o(t, { color: "WHITE", width: 24, height: 24 }) : /* @__PURE__ */ o(e, { color: "WHITE", width: 24, height: 24 }) });
+export {
+  h as default
+};
+//# sourceMappingURL=password-toggle.js.map

package/dist/features/auth/signup/custom-input-field/password-toggle/password-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-toggle.js","sources":["../../../../../../src/features/auth/signup/custom-input-field/password-toggle/password-toggle.tsx"],"sourcesContent":["import type { IPasswordToggleProps } from './password-toggle-types';\nimport type { FC } from 'react';\n\nimport EyeIcon from '../../../../../assets/line-icons/icons/eye';\nimport StrikedEyeIcon from '../../../../../assets/line-icons/icons/striked-eye';\nimport Clickable from '../../../../ui/buttons/clickable/clickable';\n\nconst PasswordToggleIcon: FC<IPasswordToggleProps> = ({ isVisible, onToggle }) => (\n  <Clickable label=\"toggle-password-visibility\" onClick={onToggle}>\n    {isVisible ? (\n      <EyeIcon color=\"WHITE\" width={24} height={24} />\n    ) : (\n      <StrikedEyeIcon color=\"WHITE\" width={24} height={24} />\n    )}\n  </Clickable>\n);\n\nexport default PasswordToggleIcon;\n"],"names":["PasswordToggleIcon","isVisible","onToggle","jsx","Clickable","EyeIcon","StrikedEyeIcon"],"mappings":";;;;AAOA,MAAMA,IAA+C,CAAC,EAAE,WAAAC,GAAW,UAAAC,EAAS,MACzE,gBAAAC,EAAAC,GAAA,EAAU,OAAM,8BAA6B,SAASF,GACpD,cACE,gBAAAC,EAAAE,GAAA,EAAQ,OAAM,SAAQ,OAAO,IAAI,QAAQ,GAAA,CAAI,IAE9C,gBAAAF,EAACG,GAAe,EAAA,OAAM,SAAQ,OAAO,IAAI,QAAQ,IAAI,EAEzD,CAAA;"}

package/dist/index.d.ts

@@ -1117,12 +1117,14 @@ declare interface ICustomInputFieldProps {
     actionElement?: ReactNode;
     isLoading?: boolean;
     isValid?: boolean;
-    type?: 'text' | 'password' | 'number';
+    type?: 'text' | 'password' | 'number' | 'phone';
     placeholder?: string;
     maxLength?: number;
     width?: number;
     textTransform?: string;
     textAlign?: string;
+    onCountryChange?: (option: TSelectedCountry) => void;
+    selectedCountry?: TSelectedCountry;
 }
 
 declare interface ICustomVideoProps extends React_2.DetailedHTMLProps<React_2.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement> {
@@ -2285,11 +2287,6 @@ declare interface IPerfectHitsProps {
     value: number;
 }
 
-declare interface IPhoneInputProps extends ICustomInputFieldProps {
-    onCountryChange: (option: TSelectedCountry) => void;
-    selectedCountry: TSelectedCountry;
-}
-
 declare interface IPlaceholder {
     text?: string;
     marks?: string;
@@ -3328,7 +3325,7 @@ declare interface IUsernamePasswordFormProps {
         username: string;
         password: string;
     };
-    isProcessing: boolean;
+    isLoading: boolean;
     onChange: (key: 'username' | 'password', value: string) => void;
     onSubmit: (e: FormEvent<HTMLFormElement>) => void;
     onForgotPassword: () => void;
@@ -3976,8 +3973,6 @@ export declare const PercentileInput: React_2.ForwardRefExoticComponent<IPercent
 
 export declare const PerfectHits: NamedExoticComponent<IPerfectHitsProps>;
 
-export declare const PhoneInput: FC<IPhoneInputProps>;
-
 /**
  ** Global/Platform specific events that needs to be tracked goes here
  ** Naming convention needs to be snake_case