@cuemath/leap 3.0.11-j6 → 3.0.11-j8

package/dist/features/auth/comps/resend-otp/resend-otp.js

@@ -1,4 +1,4 @@
-import { jsx as r, jsxs as n, Fragment as _ } from "react/jsx-runtime";
+import { jsx as e, jsxs as n, Fragment as _ } from "react/jsx-runtime";
 import { memo as x, useCallback as a } from "react";
 import k from "../../../ui/buttons/button/button.js";
 import u from "../../../ui/buttons/text-button/text-button.js";
@@ -6,34 +6,34 @@ import i from "../../../ui/layout/flex-view.js";
 import c from "../../../ui/text/text.js";
 import { useResendTimer as C } from "./hooks/use-resend-timer.js";
 const I = ({
-  onResendOTP: e,
+  onResendOTP: r,
   onResendVoiceOTP: l,
   timerSeconds: f = 15,
   showVoiceOTP: $ = !1,
   disabled: m,
-  renderAs: h = "submit",
-  width: b
+  renderAs: h = "text",
+  width: p
 }) => {
   const { canResend: o, resetTimer: t, timeLeft: s } = C({
     initialSeconds: f
   }), d = a(() => {
-    e == null || e(), t();
-  }, [e, t]), p = a(() => {
+    r == null || r(), t();
+  }, [r, t]), b = a(() => {
     l == null || l(), t();
   }, [l, t]);
-  return h === "submit" ? /* @__PURE__ */ r(
+  return h === "submit" ? /* @__PURE__ */ e(
     k,
     {
       size: "small",
       renderAs: "secondary-dark",
       type: "submit",
       label: o ? "Resend" : `Resend in ${s}`,
-      width: b,
+      width: p,
       onClick: d,
       disabled: !o || m
     }
-  ) : /* @__PURE__ */ r(i, { children: o ? /* @__PURE__ */ n(i, { $flexDirection: "row", $alignItems: "center", $flexColumnGapX: 0.5, children: [
-    /* @__PURE__ */ r(
+  ) : /* @__PURE__ */ e(i, { children: o ? /* @__PURE__ */ n(i, { $flexDirection: "row", $alignItems: "center", $flexColumnGapX: 0.5, children: [
+    /* @__PURE__ */ e(
       u,
       {
         disabled: m,
@@ -43,20 +43,20 @@ const I = ({
       }
     ),
     $ && /* @__PURE__ */ n(_, { children: [
-      /* @__PURE__ */ r(c, { $renderAs: "ub2", $color: "WHITE_T_60", children: "or" }),
-      /* @__PURE__ */ r(i, { $width: 116, children: /* @__PURE__ */ r(
+      /* @__PURE__ */ e(c, { $renderAs: "ub2", $color: "WHITE_T_60", children: "or" }),
+      /* @__PURE__ */ e(i, { $width: 116, children: /* @__PURE__ */ e(
         u,
         {
           label: "Get code via call",
           color: "WHITE_T_60",
-          onClick: p
+          onClick: b
         }
       ) })
     ] })
-  ] }) : /* @__PURE__ */ r(i, { $width: 105, children: /* @__PURE__ */ n(c, { $renderAs: "ub2", $color: "WHITE_T_60", children: [
+  ] }) : /* @__PURE__ */ e(i, { $width: 105, children: /* @__PURE__ */ n(c, { $renderAs: "ub2", $color: "WHITE_T_60", children: [
     "Resend in",
     " ",
-    /* @__PURE__ */ r(c, { $renderAs: "ub2-bold", $inline: !0, $color: "WHITE_T_60", children: s })
+    /* @__PURE__ */ e(c, { $renderAs: "ub2-bold", $inline: !0, $color: "WHITE_T_60", children: s })
   ] }) }) });
 }, j = x(I);
 export {

package/dist/features/auth/comps/resend-otp/resend-otp.js.map

@@ -1 +1 @@
-{"version":3,"file":"resend-otp.js","sources":["../../../../../src/features/auth/comps/resend-otp/resend-otp.tsx"],"sourcesContent":["import type { IOTPResendProps } from './resend-otp-types';\n\nimport { useCallback, memo } from 'react';\n\nimport Button from '../../../ui/buttons/button/button';\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport { useResendTimer } from './hooks/use-resend-timer';\n\nconst ResendOTP: React.FC<IOTPResendProps> = ({\n  onResendOTP,\n  onResendVoiceOTP,\n  timerSeconds = 15,\n  showVoiceOTP = false,\n  disabled,\n  renderAs = 'submit',\n  width,\n}) => {\n  const { canResend, resetTimer, timeLeft } = useResendTimer({\n    initialSeconds: timerSeconds,\n  });\n\n  const handleResendClick = useCallback(() => {\n    onResendOTP?.();\n    resetTimer();\n  }, [onResendOTP, resetTimer]);\n\n  const handleVoiceResendClick = useCallback(() => {\n    onResendVoiceOTP?.();\n    resetTimer();\n  }, [onResendVoiceOTP, resetTimer]);\n\n  if (renderAs === 'submit') {\n    return (\n      <Button\n        size=\"small\"\n        renderAs=\"secondary-dark\"\n        type=\"submit\"\n        label={canResend ? 'Resend' : `Resend in ${timeLeft}`}\n        width={width}\n        onClick={handleResendClick}\n        disabled={!canResend || disabled}\n      />\n    );\n  }\n\n  return (\n    <FlexView>\n      {!canResend ? (\n        <FlexView $width={105}>\n          <Text $renderAs=\"ub2\" $color=\"WHITE_T_60\">\n            Resend in{' '}\n            <Text $renderAs=\"ub2-bold\" $inline $color=\"WHITE_T_60\">\n              {timeLeft}\n            </Text>\n          </Text>\n        </FlexView>\n      ) : (\n        <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexColumnGapX={0.5}>\n          <TextButton\n            disabled={disabled}\n            label=\"Resend\"\n            color=\"WHITE_T_60\"\n            onClick={handleResendClick}\n          />\n          {showVoiceOTP && (\n            <>\n              <Text $renderAs=\"ub2\" $color=\"WHITE_T_60\">\n                or\n              </Text>\n              <FlexView $width={116}>\n                <TextButton\n                  label=\"Get code via call\"\n                  color=\"WHITE_T_60\"\n                  onClick={handleVoiceResendClick}\n                />\n              </FlexView>\n            </>\n          )}\n        </FlexView>\n      )}\n    </FlexView>\n  );\n};\n\nexport default memo(ResendOTP);\n"],"names":["ResendOTP","onResendOTP","onResendVoiceOTP","timerSeconds","showVoiceOTP","disabled","renderAs","width","canResend","resetTimer","timeLeft","useResendTimer","handleResendClick","useCallback","handleVoiceResendClick","jsx","Button","FlexView","jsxs","TextButton","Fragment","Text","ResendOtp","memo"],"mappings":";;;;;;;AAUA,MAAMA,IAAuC,CAAC;AAAA,EAC5C,aAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,cAAAC,IAAe;AAAA,EACf,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,OAAAC;AACF,MAAM;AACJ,QAAM,EAAE,WAAAC,GAAW,YAAAC,GAAY,UAAAC,EAAA,IAAaC,EAAe;AAAA,IACzD,gBAAgBR;AAAA,EAAA,CACjB,GAEKS,IAAoBC,EAAY,MAAM;AAC5B,IAAAZ,KAAA,QAAAA,KACHQ;EAAA,GACV,CAACR,GAAaQ,CAAU,CAAC,GAEtBK,IAAyBD,EAAY,MAAM;AAC5B,IAAAX,KAAA,QAAAA,KACRO;EAAA,GACV,CAACP,GAAkBO,CAAU,CAAC;AAEjC,SAAIH,MAAa,WAEb,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAS;AAAA,MACT,MAAK;AAAA,MACL,OAAOR,IAAY,WAAW,aAAaE,CAAQ;AAAA,MACnD,OAAAH;AAAA,MACA,SAASK;AAAA,MACT,UAAU,CAACJ,KAAaH;AAAA,IAAA;AAAA,EAAA,IAM3B,gBAAAU,EAAAE,GAAA,EACE,UAACT,IAUC,gBAAAU,EAAAD,GAAA,EAAS,gBAAe,OAAM,aAAY,UAAS,iBAAiB,KACnE,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,UAAAd;AAAA,QACA,OAAM;AAAA,QACN,OAAM;AAAA,QACN,SAASO;AAAA,MAAA;AAAA,IACX;AAAA,IACCR,KAEG,gBAAAc,EAAAE,GAAA,EAAA,UAAA;AAAA,MAAA,gBAAAL,EAACM,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,UAE1C,MAAA;AAAA,MACA,gBAAAN,EAACE,GAAS,EAAA,QAAQ,KAChB,UAAA,gBAAAF;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,SAASL;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,IAAA,GACF;AAAA,EAAA,EAEJ,CAAA,IA9BC,gBAAAC,EAAAE,GAAA,EAAS,QAAQ,KAChB,UAAC,gBAAAC,EAAAG,GAAA,EAAK,WAAU,OAAM,QAAO,cAAa,UAAA;AAAA,IAAA;AAAA,IAC9B;AAAA,IACV,gBAAAN,EAACM,KAAK,WAAU,YAAW,SAAO,IAAC,QAAO,cACvC,UACHX,EAAA,CAAA;AAAA,EACF,EAAA,CAAA,EACF,CAAA,EAyBJ,CAAA;AAEJ,GAEeY,IAAAC,EAAKvB,CAAS;"}
+{"version":3,"file":"resend-otp.js","sources":["../../../../../src/features/auth/comps/resend-otp/resend-otp.tsx"],"sourcesContent":["import type { IOTPResendProps } from './resend-otp-types';\n\nimport { useCallback, memo } from 'react';\n\nimport Button from '../../../ui/buttons/button/button';\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport { useResendTimer } from './hooks/use-resend-timer';\n\nconst ResendOTP: React.FC<IOTPResendProps> = ({\n  onResendOTP,\n  onResendVoiceOTP,\n  timerSeconds = 15,\n  showVoiceOTP = false,\n  disabled,\n  renderAs = 'text',\n  width,\n}) => {\n  const { canResend, resetTimer, timeLeft } = useResendTimer({\n    initialSeconds: timerSeconds,\n  });\n\n  const handleResendClick = useCallback(() => {\n    onResendOTP?.();\n    resetTimer();\n  }, [onResendOTP, resetTimer]);\n\n  const handleVoiceResendClick = useCallback(() => {\n    onResendVoiceOTP?.();\n    resetTimer();\n  }, [onResendVoiceOTP, resetTimer]);\n\n  if (renderAs === 'submit') {\n    return (\n      <Button\n        size=\"small\"\n        renderAs=\"secondary-dark\"\n        type=\"submit\"\n        label={canResend ? 'Resend' : `Resend in ${timeLeft}`}\n        width={width}\n        onClick={handleResendClick}\n        disabled={!canResend || disabled}\n      />\n    );\n  }\n\n  return (\n    <FlexView>\n      {!canResend ? (\n        <FlexView $width={105}>\n          <Text $renderAs=\"ub2\" $color=\"WHITE_T_60\">\n            Resend in{' '}\n            <Text $renderAs=\"ub2-bold\" $inline $color=\"WHITE_T_60\">\n              {timeLeft}\n            </Text>\n          </Text>\n        </FlexView>\n      ) : (\n        <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexColumnGapX={0.5}>\n          <TextButton\n            disabled={disabled}\n            label=\"Resend\"\n            color=\"WHITE_T_60\"\n            onClick={handleResendClick}\n          />\n          {showVoiceOTP && (\n            <>\n              <Text $renderAs=\"ub2\" $color=\"WHITE_T_60\">\n                or\n              </Text>\n              <FlexView $width={116}>\n                <TextButton\n                  label=\"Get code via call\"\n                  color=\"WHITE_T_60\"\n                  onClick={handleVoiceResendClick}\n                />\n              </FlexView>\n            </>\n          )}\n        </FlexView>\n      )}\n    </FlexView>\n  );\n};\n\nexport default memo(ResendOTP);\n"],"names":["ResendOTP","onResendOTP","onResendVoiceOTP","timerSeconds","showVoiceOTP","disabled","renderAs","width","canResend","resetTimer","timeLeft","useResendTimer","handleResendClick","useCallback","handleVoiceResendClick","jsx","Button","FlexView","jsxs","TextButton","Fragment","Text","ResendOtp","memo"],"mappings":";;;;;;;AAUA,MAAMA,IAAuC,CAAC;AAAA,EAC5C,aAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,cAAAC,IAAe;AAAA,EACf,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,OAAAC;AACF,MAAM;AACJ,QAAM,EAAE,WAAAC,GAAW,YAAAC,GAAY,UAAAC,EAAA,IAAaC,EAAe;AAAA,IACzD,gBAAgBR;AAAA,EAAA,CACjB,GAEKS,IAAoBC,EAAY,MAAM;AAC5B,IAAAZ,KAAA,QAAAA,KACHQ;EAAA,GACV,CAACR,GAAaQ,CAAU,CAAC,GAEtBK,IAAyBD,EAAY,MAAM;AAC5B,IAAAX,KAAA,QAAAA,KACRO;EAAA,GACV,CAACP,GAAkBO,CAAU,CAAC;AAEjC,SAAIH,MAAa,WAEb,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAS;AAAA,MACT,MAAK;AAAA,MACL,OAAOR,IAAY,WAAW,aAAaE,CAAQ;AAAA,MACnD,OAAAH;AAAA,MACA,SAASK;AAAA,MACT,UAAU,CAACJ,KAAaH;AAAA,IAAA;AAAA,EAAA,IAM3B,gBAAAU,EAAAE,GAAA,EACE,UAACT,IAUC,gBAAAU,EAAAD,GAAA,EAAS,gBAAe,OAAM,aAAY,UAAS,iBAAiB,KACnE,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,UAAAd;AAAA,QACA,OAAM;AAAA,QACN,OAAM;AAAA,QACN,SAASO;AAAA,MAAA;AAAA,IACX;AAAA,IACCR,KAEG,gBAAAc,EAAAE,GAAA,EAAA,UAAA;AAAA,MAAA,gBAAAL,EAACM,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,UAE1C,MAAA;AAAA,MACA,gBAAAN,EAACE,GAAS,EAAA,QAAQ,KAChB,UAAA,gBAAAF;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,SAASL;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,IAAA,GACF;AAAA,EAAA,EAEJ,CAAA,IA9BC,gBAAAC,EAAAE,GAAA,EAAS,QAAQ,KAChB,UAAC,gBAAAC,EAAAG,GAAA,EAAK,WAAU,OAAM,QAAO,cAAa,UAAA;AAAA,IAAA;AAAA,IAC9B;AAAA,IACV,gBAAAN,EAACM,KAAK,WAAU,YAAW,SAAO,IAAC,QAAO,cACvC,UACHX,EAAA,CAAA;AAAA,EACF,EAAA,CAAA,EACF,CAAA,EAyBJ,CAAA;AAEJ,GAEeY,IAAAC,EAAKvB,CAAS;"}

package/dist/features/auth/forgot-password/otp-form/otp-form.js

@@ -1,21 +1,21 @@
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { memo as l, useCallback as p } from "react";
+import { memo as p, useCallback as l } from "react";
 import f from "../../../ui/inputs/text-input/text-input.js";
 import o from "../../../ui/layout/flex-view.js";
 import g from "../../comps/input-status-icon/input-status-icon.js";
-import h from "../../comps/resend-otp/resend-otp.js";
-const $ = ({
+import b from "../../comps/resend-otp/resend-otp.js";
+const h = ({
   onSubmit: a,
   onChange: r,
   value: i,
   error: t,
-  isProcessing: s,
-  isValid: n = !1,
+  isProcessing: n,
+  isValid: s = !1,
   helperText: m
 }) => {
-  const d = p(
-    (u) => {
-      r("otp", u.target.value);
+  const u = l(
+    (d) => {
+      r("otp", d.target.value);
     },
     [r]
   );
@@ -32,34 +32,35 @@ const $ = ({
         /* @__PURE__ */ e(
           f,
           {
-            renderAs: t ? "error-dark" : n ? "success-dark" : "primary-dark",
+            renderAs: t ? "error-dark" : s ? "success-dark" : "primary-dark",
             autoFocus: !0,
             label: "Verification code",
             value: i,
-            onChange: d,
+            onChange: u,
             width: 330,
             required: !0,
             shape: "borderLess",
+            type: "number",
             errorMessage: t,
-            siblingElement: /* @__PURE__ */ e(g, { isError: !!t, isValid: n, isLoading: s }),
+            siblingElement: /* @__PURE__ */ e(g, { isError: !!t, isValid: s, isLoading: n }),
             helperText: m
           }
         ),
         /* @__PURE__ */ e(
-          h,
+          b,
           {
             renderAs: "submit",
             timerSeconds: 15,
             onResendOTP: a,
             width: 336,
-            disabled: s
+            disabled: n
           }
         )
       ] })
     }
   );
-}, F = l($);
+}, y = p(h);
 export {
-  F as default
+  y as default
 };
 //# sourceMappingURL=otp-form.js.map

package/dist/features/auth/forgot-password/otp-form/otp-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"otp-form.js","sources":["../../../../../src/features/auth/forgot-password/otp-form/otp-form.tsx"],"sourcesContent":["import type { ISingleFieldFormProps } from '../forgot-password-types';\n\nimport { type ChangeEvent, memo, useCallback } from 'react';\n\nimport TextInput from '../../../ui/inputs/text-input/text-input';\nimport FlexView from '../../../ui/layout/flex-view';\nimport InputStatusIcon from '../../comps/input-status-icon/input-status-icon';\nimport ResendOtp from '../../comps/resend-otp/resend-otp';\n\nconst OTPForm = ({\n  onSubmit,\n  onChange,\n  value,\n  error,\n  isProcessing,\n  isValid = false,\n  helperText,\n}: ISingleFieldFormProps) => {\n  const handleOTPChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      onChange('otp', e.target.value);\n    },\n    [onChange],\n  );\n\n  const statusVariant = isValid ? 'success-dark' : 'primary-dark';\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      <FlexView $alignItems=\"center\" $justifyContent=\"space-between\" $flex={1}>\n        <TextInput\n          renderAs={error ? 'error-dark' : statusVariant}\n          autoFocus\n          label=\"Verification code\"\n          value={value}\n          onChange={handleOTPChange}\n          width={330}\n          required\n          shape=\"borderLess\"\n          errorMessage={error}\n          siblingElement={\n            <InputStatusIcon isError={!!error} isValid={isValid} isLoading={isProcessing} />\n          }\n          helperText={helperText}\n        />\n        <ResendOtp\n          renderAs=\"submit\"\n          timerSeconds={15}\n          onResendOTP={onSubmit}\n          width={336}\n          disabled={isProcessing}\n        />\n      </FlexView>\n    </FlexView>\n  );\n};\n\nexport default memo(OTPForm);\n"],"names":["OTPForm","onSubmit","onChange","value","error","isProcessing","isValid","helperText","handleOTPChange","useCallback","e","jsx","FlexView","TextInput","InputStatusIcon","ResendOtp","otpForm","memo"],"mappings":";;;;;;AASA,MAAMA,IAAU,CAAC;AAAA,EACf,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,YAAAC;AACF,MAA6B;AAC3B,QAAMC,IAAkBC;AAAA,IACtB,CAACC,MAAqC;AAC3B,MAAAR,EAAA,OAAOQ,EAAE,OAAO,KAAK;AAAA,IAChC;AAAA,IACA,CAACR,CAAQ;AAAA,EAAA;AAMT,SAAA,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,OAAO;AAAA,MACP,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,aAAY;AAAA,MACZ,SAAS;AAAA,MAET,4BAACA,GAAS,EAAA,aAAY,UAAS,iBAAgB,iBAAgB,OAAO,GACpE,UAAA;AAAA,QAAA,gBAAAD;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,UAAUT,IAAQ,eAbJE,IAAU,iBAAiB;AAAA,YAczC,WAAS;AAAA,YACT,OAAM;AAAA,YACN,OAAAH;AAAA,YACA,UAAUK;AAAA,YACV,OAAO;AAAA,YACP,UAAQ;AAAA,YACR,OAAM;AAAA,YACN,cAAcJ;AAAA,YACd,kCACGU,GAAgB,EAAA,SAAS,CAAC,CAACV,GAAO,SAAAE,GAAkB,WAAWD,GAAc;AAAA,YAEhF,YAAAE;AAAA,UAAA;AAAA,QACF;AAAA,QACA,gBAAAI;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,UAAS;AAAA,YACT,cAAc;AAAA,YACd,aAAad;AAAA,YACb,OAAO;AAAA,YACP,UAAUI;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN,GAEeW,IAAAC,EAAKjB,CAAO;"}
+{"version":3,"file":"otp-form.js","sources":["../../../../../src/features/auth/forgot-password/otp-form/otp-form.tsx"],"sourcesContent":["import type { ISingleFieldFormProps } from '../forgot-password-types';\n\nimport { type ChangeEvent, memo, useCallback } from 'react';\n\nimport TextInput from '../../../ui/inputs/text-input/text-input';\nimport FlexView from '../../../ui/layout/flex-view';\nimport InputStatusIcon from '../../comps/input-status-icon/input-status-icon';\nimport ResendOtp from '../../comps/resend-otp/resend-otp';\n\nconst OTPForm = ({\n  onSubmit,\n  onChange,\n  value,\n  error,\n  isProcessing,\n  isValid = false,\n  helperText,\n}: ISingleFieldFormProps) => {\n  const handleOTPChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      onChange('otp', e.target.value);\n    },\n    [onChange],\n  );\n\n  const statusVariant = isValid ? 'success-dark' : 'primary-dark';\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      <FlexView $alignItems=\"center\" $justifyContent=\"space-between\" $flex={1}>\n        <TextInput\n          renderAs={error ? 'error-dark' : statusVariant}\n          autoFocus\n          label=\"Verification code\"\n          value={value}\n          onChange={handleOTPChange}\n          width={330}\n          required\n          shape=\"borderLess\"\n          type=\"number\"\n          errorMessage={error}\n          siblingElement={\n            <InputStatusIcon isError={!!error} isValid={isValid} isLoading={isProcessing} />\n          }\n          helperText={helperText}\n        />\n        <ResendOtp\n          renderAs=\"submit\"\n          timerSeconds={15}\n          onResendOTP={onSubmit}\n          width={336}\n          disabled={isProcessing}\n        />\n      </FlexView>\n    </FlexView>\n  );\n};\n\nexport default memo(OTPForm);\n"],"names":["OTPForm","onSubmit","onChange","value","error","isProcessing","isValid","helperText","handleOTPChange","useCallback","e","jsx","FlexView","TextInput","InputStatusIcon","ResendOtp","otpForm","memo"],"mappings":";;;;;;AASA,MAAMA,IAAU,CAAC;AAAA,EACf,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,YAAAC;AACF,MAA6B;AAC3B,QAAMC,IAAkBC;AAAA,IACtB,CAACC,MAAqC;AAC3B,MAAAR,EAAA,OAAOQ,EAAE,OAAO,KAAK;AAAA,IAChC;AAAA,IACA,CAACR,CAAQ;AAAA,EAAA;AAMT,SAAA,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,OAAO;AAAA,MACP,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,aAAY;AAAA,MACZ,SAAS;AAAA,MAET,4BAACA,GAAS,EAAA,aAAY,UAAS,iBAAgB,iBAAgB,OAAO,GACpE,UAAA;AAAA,QAAA,gBAAAD;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,UAAUT,IAAQ,eAbJE,IAAU,iBAAiB;AAAA,YAczC,WAAS;AAAA,YACT,OAAM;AAAA,YACN,OAAAH;AAAA,YACA,UAAUK;AAAA,YACV,OAAO;AAAA,YACP,UAAQ;AAAA,YACR,OAAM;AAAA,YACN,MAAK;AAAA,YACL,cAAcJ;AAAA,YACd,kCACGU,GAAgB,EAAA,SAAS,CAAC,CAACV,GAAO,SAAAE,GAAkB,WAAWD,GAAc;AAAA,YAEhF,YAAAE;AAAA,UAAA;AAAA,QACF;AAAA,QACA,gBAAAI;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,UAAS;AAAA,YACT,cAAc;AAAA,YACd,aAAad;AAAA,YACb,OAAO;AAAA,YACP,UAAUI;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN,GAEeW,IAAAC,EAAKjB,CAAO;"}

package/dist/features/auth/forgot-password/reset-password-form/reset-password-form.js

@@ -47,6 +47,7 @@ const y = ({
               value: o.password,
               onChange: f,
               width: 330,
+              autoFocus: !0,
               required: !0,
               shape: "borderLess",
               errorMessage: s.password,

package/dist/features/auth/forgot-password/reset-password-form/reset-password-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"reset-password-form.js","sources":["../../../../../src/features/auth/forgot-password/reset-password-form/reset-password-form.tsx"],"sourcesContent":["import type { IResetPasswordFormProps } from './reset-password-form-types';\n\nimport { type ChangeEvent, memo, useCallback } 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 * as Styled from '../forgot-password-styled';\n\nconst ResetPasswordForm = ({\n  onSubmit,\n  onChange,\n  formData,\n  errors,\n  isSubmitDisabled,\n  isProcessing,\n  isValid = false,\n}: IResetPasswordFormProps) => {\n  const isConfirmPasswordValid = isValid && formData.password === formData.confirmPassword;\n\n  const handlePasswordChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      onChange('password', e.target.value);\n    },\n    [onChange],\n  );\n\n  const handleConfirmPasswordChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      onChange('confirmPassword', 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      <Styled.FormWrapper onSubmit={onSubmit}>\n        <FlexView>\n          <TextInput\n            type={'password'}\n            renderAs={errors.password ? 'error-dark' : 'primary-dark'}\n            autoComplete=\"new-password\"\n            label=\"New Password\"\n            value={formData.password}\n            onChange={handlePasswordChange}\n            width={330}\n            required\n            shape=\"borderLess\"\n            errorMessage={errors.password}\n            siblingElement={\n              <InputStatusIcon isError={!!errors.password} isValid={isValid} isLoading={false} />\n            }\n          />\n          <Separator height={36} />\n          <TextInput\n            type=\"password\"\n            renderAs={errors.confirmPassword ? 'error-dark' : 'primary-dark'}\n            autoComplete=\"new-password\"\n            label=\"Re-enter Password\"\n            value={formData.confirmPassword}\n            onChange={handleConfirmPasswordChange}\n            width={330}\n            required\n            shape=\"borderLess\"\n            errorMessage={errors.confirmPassword}\n            siblingElement={\n              <InputStatusIcon\n                isError={!!errors.confirmPassword}\n                isValid={isConfirmPasswordValid}\n                isLoading={false}\n              />\n            }\n          />\n        </FlexView>\n        <Button\n          size=\"small\"\n          renderAs=\"secondary-dark\"\n          type=\"submit\"\n          label=\"Continue\"\n          width={336}\n          busy={isProcessing}\n          disabled={isSubmitDisabled}\n        />\n      </Styled.FormWrapper>\n    </FlexView>\n  );\n};\n\nexport default memo(ResetPasswordForm);\n"],"names":["ResetPasswordForm","onSubmit","onChange","formData","errors","isSubmitDisabled","isProcessing","isValid","isConfirmPasswordValid","handlePasswordChange","useCallback","e","handleConfirmPasswordChange","jsx","FlexView","jsxs","Styled.FormWrapper","TextInput","InputStatusIcon","Separator","Button","resetPasswordForm","memo"],"mappings":";;;;;;;;AAWA,MAAMA,IAAoB,CAAC;AAAA,EACzB,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC,IAAU;AACZ,MAA+B;AAC7B,QAAMC,IAAyBD,KAAWJ,EAAS,aAAaA,EAAS,iBAEnEM,IAAuBC;AAAA,IAC3B,CAACC,MAAqC;AAC3B,MAAAT,EAAA,YAAYS,EAAE,OAAO,KAAK;AAAA,IACrC;AAAA,IACA,CAACT,CAAQ;AAAA,EAAA,GAGLU,IAA8BF;AAAA,IAClC,CAACC,MAAqC;AAC3B,MAAAT,EAAA,mBAAmBS,EAAE,OAAO,KAAK;AAAA,IAC5C;AAAA,IACA,CAACT,CAAQ;AAAA,EAAA;AAIT,SAAA,gBAAAW;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,OAAO;AAAA,MACP,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,aAAY;AAAA,MACZ,SAAS;AAAA,MAET,UAAC,gBAAAC,EAAAC,GAAA,EAAmB,UAAAf,GAClB,UAAA;AAAA,QAAA,gBAAAc,EAACD,GACC,EAAA,UAAA;AAAA,UAAA,gBAAAD;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN,UAAUb,EAAO,WAAW,eAAe;AAAA,cAC3C,cAAa;AAAA,cACb,OAAM;AAAA,cACN,OAAOD,EAAS;AAAA,cAChB,UAAUM;AAAA,cACV,OAAO;AAAA,cACP,UAAQ;AAAA,cACR,OAAM;AAAA,cACN,cAAcL,EAAO;AAAA,cACrB,gBACG,gBAAAS,EAAAK,GAAA,EAAgB,SAAS,CAAC,CAACd,EAAO,UAAU,SAAAG,GAAkB,WAAW,GAAO,CAAA;AAAA,YAAA;AAAA,UAErF;AAAA,UACA,gBAAAM,EAACM,GAAU,EAAA,QAAQ,GAAI,CAAA;AAAA,UACvB,gBAAAN;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAUb,EAAO,kBAAkB,eAAe;AAAA,cAClD,cAAa;AAAA,cACb,OAAM;AAAA,cACN,OAAOD,EAAS;AAAA,cAChB,UAAUS;AAAA,cACV,OAAO;AAAA,cACP,UAAQ;AAAA,cACR,OAAM;AAAA,cACN,cAAcR,EAAO;AAAA,cACrB,gBACE,gBAAAS;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBACC,SAAS,CAAC,CAACd,EAAO;AAAA,kBAClB,SAASI;AAAA,kBACT,WAAW;AAAA,gBAAA;AAAA,cACb;AAAA,YAAA;AAAA,UAEJ;AAAA,QAAA,GACF;AAAA,QACA,gBAAAK;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,UAAS;AAAA,YACT,MAAK;AAAA,YACL,OAAM;AAAA,YACN,OAAO;AAAA,YACP,MAAMd;AAAA,YACN,UAAUD;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN,GAEegB,IAAAC,EAAKtB,CAAiB;"}
+{"version":3,"file":"reset-password-form.js","sources":["../../../../../src/features/auth/forgot-password/reset-password-form/reset-password-form.tsx"],"sourcesContent":["import type { IResetPasswordFormProps } from './reset-password-form-types';\n\nimport { type ChangeEvent, memo, useCallback } 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 * as Styled from '../forgot-password-styled';\n\nconst ResetPasswordForm = ({\n  onSubmit,\n  onChange,\n  formData,\n  errors,\n  isSubmitDisabled,\n  isProcessing,\n  isValid = false,\n}: IResetPasswordFormProps) => {\n  const isConfirmPasswordValid = isValid && formData.password === formData.confirmPassword;\n\n  const handlePasswordChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      onChange('password', e.target.value);\n    },\n    [onChange],\n  );\n\n  const handleConfirmPasswordChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      onChange('confirmPassword', 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      <Styled.FormWrapper onSubmit={onSubmit}>\n        <FlexView>\n          <TextInput\n            type={'password'}\n            renderAs={errors.password ? 'error-dark' : 'primary-dark'}\n            autoComplete=\"new-password\"\n            label=\"New Password\"\n            value={formData.password}\n            onChange={handlePasswordChange}\n            width={330}\n            autoFocus\n            required\n            shape=\"borderLess\"\n            errorMessage={errors.password}\n            siblingElement={\n              <InputStatusIcon isError={!!errors.password} isValid={isValid} isLoading={false} />\n            }\n          />\n          <Separator height={36} />\n          <TextInput\n            type=\"password\"\n            renderAs={errors.confirmPassword ? 'error-dark' : 'primary-dark'}\n            autoComplete=\"new-password\"\n            label=\"Re-enter Password\"\n            value={formData.confirmPassword}\n            onChange={handleConfirmPasswordChange}\n            width={330}\n            required\n            shape=\"borderLess\"\n            errorMessage={errors.confirmPassword}\n            siblingElement={\n              <InputStatusIcon\n                isError={!!errors.confirmPassword}\n                isValid={isConfirmPasswordValid}\n                isLoading={false}\n              />\n            }\n          />\n        </FlexView>\n        <Button\n          size=\"small\"\n          renderAs=\"secondary-dark\"\n          type=\"submit\"\n          label=\"Continue\"\n          width={336}\n          busy={isProcessing}\n          disabled={isSubmitDisabled}\n        />\n      </Styled.FormWrapper>\n    </FlexView>\n  );\n};\n\nexport default memo(ResetPasswordForm);\n"],"names":["ResetPasswordForm","onSubmit","onChange","formData","errors","isSubmitDisabled","isProcessing","isValid","isConfirmPasswordValid","handlePasswordChange","useCallback","e","handleConfirmPasswordChange","jsx","FlexView","jsxs","Styled.FormWrapper","TextInput","InputStatusIcon","Separator","Button","resetPasswordForm","memo"],"mappings":";;;;;;;;AAWA,MAAMA,IAAoB,CAAC;AAAA,EACzB,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC,IAAU;AACZ,MAA+B;AAC7B,QAAMC,IAAyBD,KAAWJ,EAAS,aAAaA,EAAS,iBAEnEM,IAAuBC;AAAA,IAC3B,CAACC,MAAqC;AAC3B,MAAAT,EAAA,YAAYS,EAAE,OAAO,KAAK;AAAA,IACrC;AAAA,IACA,CAACT,CAAQ;AAAA,EAAA,GAGLU,IAA8BF;AAAA,IAClC,CAACC,MAAqC;AAC3B,MAAAT,EAAA,mBAAmBS,EAAE,OAAO,KAAK;AAAA,IAC5C;AAAA,IACA,CAACT,CAAQ;AAAA,EAAA;AAIT,SAAA,gBAAAW;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,OAAO;AAAA,MACP,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,aAAY;AAAA,MACZ,SAAS;AAAA,MAET,UAAC,gBAAAC,EAAAC,GAAA,EAAmB,UAAAf,GAClB,UAAA;AAAA,QAAA,gBAAAc,EAACD,GACC,EAAA,UAAA;AAAA,UAAA,gBAAAD;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN,UAAUb,EAAO,WAAW,eAAe;AAAA,cAC3C,cAAa;AAAA,cACb,OAAM;AAAA,cACN,OAAOD,EAAS;AAAA,cAChB,UAAUM;AAAA,cACV,OAAO;AAAA,cACP,WAAS;AAAA,cACT,UAAQ;AAAA,cACR,OAAM;AAAA,cACN,cAAcL,EAAO;AAAA,cACrB,gBACG,gBAAAS,EAAAK,GAAA,EAAgB,SAAS,CAAC,CAACd,EAAO,UAAU,SAAAG,GAAkB,WAAW,GAAO,CAAA;AAAA,YAAA;AAAA,UAErF;AAAA,UACA,gBAAAM,EAACM,GAAU,EAAA,QAAQ,GAAI,CAAA;AAAA,UACvB,gBAAAN;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAUb,EAAO,kBAAkB,eAAe;AAAA,cAClD,cAAa;AAAA,cACb,OAAM;AAAA,cACN,OAAOD,EAAS;AAAA,cAChB,UAAUS;AAAA,cACV,OAAO;AAAA,cACP,UAAQ;AAAA,cACR,OAAM;AAAA,cACN,cAAcR,EAAO;AAAA,cACrB,gBACE,gBAAAS;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBACC,SAAS,CAAC,CAACd,EAAO;AAAA,kBAClB,SAASI;AAAA,kBACT,WAAW;AAAA,gBAAA;AAAA,cACb;AAAA,YAAA;AAAA,UAEJ;AAAA,QAAA,GACF;AAAA,QACA,gBAAAK;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,UAAS;AAAA,YACT,MAAK;AAAA,YACL,OAAM;AAAA,YACN,OAAO;AAAA,YACP,MAAMd;AAAA,YACN,UAAUD;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN,GAEegB,IAAAC,EAAKtB,CAAiB;"}

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

@@ -1,5 +1,5 @@
-import { jsx as e, jsxs as n, Fragment as C } from "react/jsx-runtime";
-import { memo as F, useCallback as c } from "react";
+import { jsx as e, jsxs as n, Fragment as x } from "react/jsx-runtime";
+import { memo as C, useCallback as c } from "react";
 import E from "../../../ui/buttons/button/button.js";
 import u from "../../../ui/inputs/text-input/text-input.js";
 import s from "../../../ui/layout/flex-view.js";
@@ -12,7 +12,7 @@ const S = ({
   otp: m,
   errors: r,
   isOtpVerified: i,
-  isLoading: d,
+  isLoading: o,
   isSubmitDisabled: h,
   showOtpInput: t,
   onChange: a,
@@ -20,13 +20,13 @@ const S = ({
   onSendOtp: b
 }) => {
   const k = t ? "success-dark" : "primary-dark", $ = i ? "success-dark" : "primary-dark", y = c(
-    (o) => {
-      a("identifier", o.target.value);
+    (d) => {
+      a("identifier", d.target.value);
     },
     [a]
-  ), x = c(
-    (o) => {
-      a("otp", o.target.value);
+  ), F = c(
+    (d) => {
+      a("otp", d.target.value);
     },
     [a]
   );
@@ -48,7 +48,7 @@ const S = ({
           siblingElement: /* @__PURE__ */ e(p, { isValid: t, isError: !!r.identifier })
         }
       ),
-      t && /* @__PURE__ */ n(C, { children: [
+      t && /* @__PURE__ */ n(x, { children: [
         /* @__PURE__ */ e(l, { height: 36 }),
         /* @__PURE__ */ e(
           u,
@@ -58,16 +58,17 @@ const S = ({
             autoComplete: "password",
             label: "Verification code",
             value: m,
-            onChange: x,
+            onChange: F,
             width: 330,
             required: !0,
+            autoFocus: !0,
             shape: "borderLess",
             errorMessage: r.otp,
-            disabled: i || m.length === 4 && d,
+            disabled: i || m.length === 4 && o,
             siblingElement: /* @__PURE__ */ e(
               p,
               {
-                isLoading: d,
+                isLoading: o,
                 isValid: i,
                 isError: !!r.otp
               }
@@ -87,12 +88,12 @@ const S = ({
         type: "submit",
         label: t ? "Log In" : "Get Verification Code",
         width: 336,
-        busy: !t && d,
+        busy: !t && o,
         disabled: h
       }
     )
   ] }) });
-}, P = F(S);
+}, P = C(S);
 export {
   P as default
 };

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, memo, useCallback } 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  const handleIdentifierChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      onChange('identifier', e.target.value);\n    },\n    [onChange],\n  );\n\n  const handleOtpChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      onChange('otp', e.target.value);\n    },\n    [onChange],\n  );\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={handleIdentifierChange}\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={handleOtpChange}\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 memo(IdentifierOtpForm);\n"],"names":["IdentifierOtpForm","identifier","otp","errors","isOtpVerified","isLoading","isSubmitDisabled","showOtpInput","onChange","onSubmit","onSendOtp","identifierStatusVariant","otpStatusVariant","handleIdentifierChange","useCallback","e","handleOtpChange","jsx","FlexView","jsxs","Styled.FormWrapper","TextInput","InputStatusIcon","Fragment","Separator","ResendOTP","Button","identifierOtpForm","memo"],"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,gBAEpDS,IAAyBC;AAAA,IAC7B,CAACC,MAAqC;AAC3B,MAAAP,EAAA,cAAcO,EAAE,OAAO,KAAK;AAAA,IACvC;AAAA,IACA,CAACP,CAAQ;AAAA,EAAA,GAGLQ,IAAkBF;AAAA,IACtB,CAACC,MAAqC;AAC3B,MAAAP,EAAA,OAAOO,EAAE,OAAO,KAAK;AAAA,IAChC;AAAA,IACA,CAACP,CAAQ;AAAA,EAAA;AAGX,SACG,gBAAAS,EAAAC,GAAA,EAAS,UAAU,GAAG,OAAO,KAAK,aAAY,WAAU,SAAS,KAChE,UAAA,gBAAAC,EAACC,GAAA,EAAmB,UAAAX,GAClB,UAAA;AAAA,IAAA,gBAAAU,EAACD,GAAS,EAAA,aAAY,UAAS,iBAAgB,UAC7C,UAAA;AAAA,MAAA,gBAAAD;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,UAAUlB,EAAO,aAAa,eAAeQ;AAAA,UAC7C,WAAS;AAAA,UACT,OAAM;AAAA,UACN,OAAOV;AAAA,UACP,UAAUY;AAAA,UACV,OAAO;AAAA,UACP,UAAQ;AAAA,UACR,OAAM;AAAA,UACN,cAAcV,EAAO;AAAA,UACrB,UAAUI;AAAA,UACV,kCACGe,GAAgB,EAAA,SAASf,GAAc,SAAS,CAAC,CAACJ,EAAO,YAAY;AAAA,QAAA;AAAA,MAE1E;AAAA,MACCI,KAEG,gBAAAY,EAAAI,GAAA,EAAA,UAAA;AAAA,QAAC,gBAAAN,EAAAO,GAAA,EAAU,QAAQ,GAAI,CAAA;AAAA,QACvB,gBAAAP;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,UAAUlB,EAAO,MAAM,eAAeS;AAAA,YACtC,cAAa;AAAA,YACb,OAAM;AAAA,YACN,OAAOV;AAAA,YACP,UAAUc;AAAA,YACV,OAAO;AAAA,YACP,UAAQ;AAAA,YACR,OAAM;AAAA,YACN,cAAcb,EAAO;AAAA,YACrB,UAAUC,KAAkBF,EAAI,WAAW,KAAKG;AAAA,YAChD,gBACE,gBAAAY;AAAA,cAACK;AAAA,cAAA;AAAA,gBACC,WAAAjB;AAAA,gBACA,SAASD;AAAA,gBACT,SAAS,CAAC,CAACD,EAAO;AAAA,cAAA;AAAA,YACpB;AAAA,UAAA;AAAA,QAEJ;AAAA,QACA,gBAAAc,EAACO,GAAU,EAAA,SAAS,KAAM,CAAA;AAAA,QACzB,gBAAAP,EAAAC,GAAA,EAAS,aAAY,YAAW,QAAO,QACtC,UAAC,gBAAAD,EAAAQ,GAAA,EAAU,aAAaf,GAAW,UAAUN,EAAe,CAAA,GAC9D;AAAA,QACA,gBAAAa,EAACO,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,MAAA,GACzB;AAAA,IAAA,GAEJ;AAAA,IACA,gBAAAP;AAAA,MAACS;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAS;AAAA,QACT,MAAK;AAAA,QACL,OAAOnB,IAAe,WAAW;AAAA,QACjC,OAAO;AAAA,QACP,MAAM,CAACA,KAAgBF;AAAA,QACvB,UAAUC;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,GAEeqB,IAAAC,EAAK5B,CAAiB;"}
+{"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, memo, useCallback } 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  const handleIdentifierChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      onChange('identifier', e.target.value);\n    },\n    [onChange],\n  );\n\n  const handleOtpChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      onChange('otp', e.target.value);\n    },\n    [onChange],\n  );\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={handleIdentifierChange}\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={handleOtpChange}\n                width={330}\n                required\n                autoFocus\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 memo(IdentifierOtpForm);\n"],"names":["IdentifierOtpForm","identifier","otp","errors","isOtpVerified","isLoading","isSubmitDisabled","showOtpInput","onChange","onSubmit","onSendOtp","identifierStatusVariant","otpStatusVariant","handleIdentifierChange","useCallback","e","handleOtpChange","jsx","FlexView","jsxs","Styled.FormWrapper","TextInput","InputStatusIcon","Fragment","Separator","ResendOTP","Button","identifierOtpForm","memo"],"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,gBAEpDS,IAAyBC;AAAA,IAC7B,CAACC,MAAqC;AAC3B,MAAAP,EAAA,cAAcO,EAAE,OAAO,KAAK;AAAA,IACvC;AAAA,IACA,CAACP,CAAQ;AAAA,EAAA,GAGLQ,IAAkBF;AAAA,IACtB,CAACC,MAAqC;AAC3B,MAAAP,EAAA,OAAOO,EAAE,OAAO,KAAK;AAAA,IAChC;AAAA,IACA,CAACP,CAAQ;AAAA,EAAA;AAGX,SACG,gBAAAS,EAAAC,GAAA,EAAS,UAAU,GAAG,OAAO,KAAK,aAAY,WAAU,SAAS,KAChE,UAAA,gBAAAC,EAACC,GAAA,EAAmB,UAAAX,GAClB,UAAA;AAAA,IAAA,gBAAAU,EAACD,GAAS,EAAA,aAAY,UAAS,iBAAgB,UAC7C,UAAA;AAAA,MAAA,gBAAAD;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,UAAUlB,EAAO,aAAa,eAAeQ;AAAA,UAC7C,WAAS;AAAA,UACT,OAAM;AAAA,UACN,OAAOV;AAAA,UACP,UAAUY;AAAA,UACV,OAAO;AAAA,UACP,UAAQ;AAAA,UACR,OAAM;AAAA,UACN,cAAcV,EAAO;AAAA,UACrB,UAAUI;AAAA,UACV,kCACGe,GAAgB,EAAA,SAASf,GAAc,SAAS,CAAC,CAACJ,EAAO,YAAY;AAAA,QAAA;AAAA,MAE1E;AAAA,MACCI,KAEG,gBAAAY,EAAAI,GAAA,EAAA,UAAA;AAAA,QAAC,gBAAAN,EAAAO,GAAA,EAAU,QAAQ,GAAI,CAAA;AAAA,QACvB,gBAAAP;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,UAAUlB,EAAO,MAAM,eAAeS;AAAA,YACtC,cAAa;AAAA,YACb,OAAM;AAAA,YACN,OAAOV;AAAA,YACP,UAAUc;AAAA,YACV,OAAO;AAAA,YACP,UAAQ;AAAA,YACR,WAAS;AAAA,YACT,OAAM;AAAA,YACN,cAAcb,EAAO;AAAA,YACrB,UAAUC,KAAkBF,EAAI,WAAW,KAAKG;AAAA,YAChD,gBACE,gBAAAY;AAAA,cAACK;AAAA,cAAA;AAAA,gBACC,WAAAjB;AAAA,gBACA,SAASD;AAAA,gBACT,SAAS,CAAC,CAACD,EAAO;AAAA,cAAA;AAAA,YACpB;AAAA,UAAA;AAAA,QAEJ;AAAA,QACA,gBAAAc,EAACO,GAAU,EAAA,SAAS,KAAM,CAAA;AAAA,QACzB,gBAAAP,EAAAC,GAAA,EAAS,aAAY,YAAW,QAAO,QACtC,UAAC,gBAAAD,EAAAQ,GAAA,EAAU,aAAaf,GAAW,UAAUN,EAAe,CAAA,GAC9D;AAAA,QACA,gBAAAa,EAACO,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,MAAA,GACzB;AAAA,IAAA,GAEJ;AAAA,IACA,gBAAAP;AAAA,MAACS;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAS;AAAA,QACT,MAAK;AAAA,QACL,OAAOnB,IAAe,WAAW;AAAA,QACjC,OAAO;AAAA,QACP,MAAM,CAACA,KAAgBF;AAAA,QACvB,UAAUC;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,GAEeqB,IAAAC,EAAK5B,CAAiB;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "3.0.11-j6",
+  "version": "3.0.11-j8",
   "type": "module",
   "files": [
     "dist"