@cuemath/leap 2.9.12-j2 → 2.9.12-j4

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

@@ -1,38 +1,47 @@
-import { jsx as l, jsxs as c, Fragment as h } from "react/jsx-runtime";
-import { useState as C, useCallback as o } from "react";
+import { jsx as l, jsxs as c, Fragment as C } from "react/jsx-runtime";
+import { useState as u, useCallback as o } from "react";
 import i from "../../../ui/buttons/text-button/text-button.js";
 import a from "../../../ui/layout/flex-view.js";
-import u from "../../../ui/text/text.js";
-import x from "./otp-timer/otp-timer.js";
-const $ = ({
+import x from "../../../ui/text/text.js";
+import $ from "./otp-timer/otp-timer.js";
+const _ = ({
   onResendOTP: e,
   onResendVoiceOTP: r,
   timerSeconds: m = 15,
-  showVoiceOTP: s = !1
+  showVoiceOTP: s = !1,
+  disabled: n
 }) => {
-  const [n, t] = C(!1), f = o(() => {
+  const [f, t] = u(!1), p = o(() => {
     t(!0);
-  }, []), p = o(() => {
+  }, []), d = o(() => {
     e == null || e(), t(!1);
-  }, [e]), d = o(() => {
+  }, [e]), h = o(() => {
     r == null || r(), t(!1);
   }, [r]);
-  return /* @__PURE__ */ l(a, { children: n ? /* @__PURE__ */ c(a, { $flexDirection: "row", $alignItems: "center", $flexColumnGapX: 0.5, children: [
-    /* @__PURE__ */ l(i, { label: "Resend", color: "WHITE_T_60", onClick: p }),
-    s && /* @__PURE__ */ c(h, { children: [
-      /* @__PURE__ */ l(u, { $renderAs: "ub2", $color: "WHITE_T_60", children: "or" }),
+  return /* @__PURE__ */ l(a, { children: f ? /* @__PURE__ */ c(a, { $flexDirection: "row", $alignItems: "center", $flexColumnGapX: 0.5, children: [
+    /* @__PURE__ */ l(
+      i,
+      {
+        disabled: n,
+        label: "Resend",
+        color: "WHITE_T_60",
+        onClick: d
+      }
+    ),
+    s && /* @__PURE__ */ c(C, { children: [
+      /* @__PURE__ */ l(x, { $renderAs: "ub2", $color: "WHITE_T_60", children: "or" }),
       /* @__PURE__ */ l(a, { $width: 116, children: /* @__PURE__ */ l(
         i,
         {
           label: "Get code via call",
           color: "WHITE_T_60",
-          onClick: d
+          onClick: h
         }
       ) })
     ] })
-  ] }) : /* @__PURE__ */ l(x, { timerSeconds: m, onComplete: f }) });
-}, H = $;
+  ] }) : /* @__PURE__ */ l($, { timerSeconds: m, onComplete: p }) });
+}, W = _;
 export {
-  H as default
+  W as default
 };
 //# sourceMappingURL=resend-otp.js.map

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 { useState, useCallback } from 'react';\n\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport OtpTimer from './otp-timer/otp-timer';\n\nconst ResendOTP: React.FC<IOTPResendProps> = ({\n  onResendOTP,\n  onResendVoiceOTP,\n  timerSeconds = 15,\n  showVoiceOTP = false,\n}) => {\n  const [canResend, setCanResend] = useState(false);\n\n  const handleTimerComplete = useCallback(() => {\n    setCanResend(true);\n  }, []);\n\n  const handleResendClick = useCallback(() => {\n    onResendOTP?.();\n    setCanResend(false);\n  }, [onResendOTP]);\n\n  const handleVoiceResendClick = useCallback(() => {\n    onResendVoiceOTP?.();\n    setCanResend(false);\n  }, [onResendVoiceOTP]);\n\n  return (\n    <FlexView>\n      {!canResend ? (\n        <OtpTimer timerSeconds={timerSeconds} onComplete={handleTimerComplete} />\n      ) : (\n        <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexColumnGapX={0.5}>\n          <TextButton label=\"Resend\" color=\"WHITE_T_60\" onClick={handleResendClick} />\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 ResendOTP;\n"],"names":["ResendOTP","onResendOTP","onResendVoiceOTP","timerSeconds","showVoiceOTP","canResend","setCanResend","useState","handleTimerComplete","useCallback","handleResendClick","handleVoiceResendClick","FlexView","jsx","TextButton","jsxs","Fragment","Text","OtpTimer","ResendOTP$1"],"mappings":";;;;;;AASA,MAAMA,IAAuC,CAAC;AAAA,EAC5C,aAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,cAAAC,IAAe;AACjB,MAAM;AACJ,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAE1CC,IAAsBC,EAAY,MAAM;AAC5C,IAAAH,EAAa,EAAI;AAAA,EACnB,GAAG,CAAE,CAAA,GAECI,IAAoBD,EAAY,MAAM;AAC5B,IAAAR,KAAA,QAAAA,KACdK,EAAa,EAAK;AAAA,EAAA,GACjB,CAACL,CAAW,CAAC,GAEVU,IAAyBF,EAAY,MAAM;AAC5B,IAAAP,KAAA,QAAAA,KACnBI,EAAa,EAAK;AAAA,EAAA,GACjB,CAACJ,CAAgB,CAAC;AAErB,2BACGU,GACE,EAAA,UAACP,sBAGCO,GAAS,EAAA,gBAAe,OAAM,aAAY,UAAS,iBAAiB,KACnE,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAW,OAAM,UAAS,OAAM,cAAa,SAASJ,GAAmB;AAAA,IACzEN,KAEG,gBAAAW,EAAAC,GAAA,EAAA,UAAA;AAAA,MAAA,gBAAAH,EAACI,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,UAE1C,MAAA;AAAA,MACA,gBAAAJ,EAACD,GAAS,EAAA,QAAQ,KAChB,UAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,SAASH;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,IAAA,GACF;AAAA,EAAA,EAEJ,CAAA,IAlBA,gBAAAE,EAACK,KAAS,cAAAf,GAA4B,YAAYK,EAAqB,CAAA,EAoB3E,CAAA;AAEJ,GAEAW,IAAenB;"}
+{"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 { useState, useCallback } from 'react';\n\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport OtpTimer from './otp-timer/otp-timer';\n\nconst ResendOTP: React.FC<IOTPResendProps> = ({\n  onResendOTP,\n  onResendVoiceOTP,\n  timerSeconds = 15,\n  showVoiceOTP = false,\n  disabled,\n}) => {\n  const [canResend, setCanResend] = useState(false);\n\n  const handleTimerComplete = useCallback(() => {\n    setCanResend(true);\n  }, []);\n\n  const handleResendClick = useCallback(() => {\n    onResendOTP?.();\n    setCanResend(false);\n  }, [onResendOTP]);\n\n  const handleVoiceResendClick = useCallback(() => {\n    onResendVoiceOTP?.();\n    setCanResend(false);\n  }, [onResendVoiceOTP]);\n\n  return (\n    <FlexView>\n      {!canResend ? (\n        <OtpTimer timerSeconds={timerSeconds} onComplete={handleTimerComplete} />\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 ResendOTP;\n"],"names":["ResendOTP","onResendOTP","onResendVoiceOTP","timerSeconds","showVoiceOTP","disabled","canResend","setCanResend","useState","handleTimerComplete","useCallback","handleResendClick","handleVoiceResendClick","FlexView","jsx","TextButton","jsxs","Fragment","Text","OtpTimer","ResendOTP$1"],"mappings":";;;;;;AASA,MAAMA,IAAuC,CAAC;AAAA,EAC5C,aAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,cAAAC,IAAe;AAAA,EACf,UAAAC;AACF,MAAM;AACJ,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAE1CC,IAAsBC,EAAY,MAAM;AAC5C,IAAAH,EAAa,EAAI;AAAA,EACnB,GAAG,CAAE,CAAA,GAECI,IAAoBD,EAAY,MAAM;AAC5B,IAAAT,KAAA,QAAAA,KACdM,EAAa,EAAK;AAAA,EAAA,GACjB,CAACN,CAAW,CAAC,GAEVW,IAAyBF,EAAY,MAAM;AAC5B,IAAAR,KAAA,QAAAA,KACnBK,EAAa,EAAK;AAAA,EAAA,GACjB,CAACL,CAAgB,CAAC;AAErB,2BACGW,GACE,EAAA,UAACP,sBAGCO,GAAS,EAAA,gBAAe,OAAM,aAAY,UAAS,iBAAiB,KACnE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAAV;AAAA,QACA,OAAM;AAAA,QACN,OAAM;AAAA,QACN,SAASM;AAAA,MAAA;AAAA,IACX;AAAA,IACCP,KAEG,gBAAAY,EAAAC,GAAA,EAAA,UAAA;AAAA,MAAA,gBAAAH,EAACI,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,UAE1C,MAAA;AAAA,MACA,gBAAAJ,EAACD,GAAS,EAAA,QAAQ,KAChB,UAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,SAASH;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,IAAA,GACF;AAAA,EAAA,EAEJ,CAAA,IAvBA,gBAAAE,EAACK,KAAS,cAAAhB,GAA4B,YAAYM,EAAqB,CAAA,EAyB3E,CAAA;AAEJ,GAEAW,IAAepB;"}

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

@@ -0,0 +1,12 @@
+import e from "styled-components";
+const t = e.form`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-top: 8px;
+  flex: 1;
+`;
+export {
+  t as FormWrapper
+};
+//# sourceMappingURL=identifier-otp-form-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"identifier-otp-form-styled.js","sources":["../../../../../src/features/auth/login/identifier-otp-form/identifier-otp-form-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nconst FormWrapper = styled.form`\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  margin-top: 8px;\n  flex: 1;\n`;\n\nexport { FormWrapper };\n"],"names":["FormWrapper","styled"],"mappings":";AAEA,MAAMA,IAAcC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -0,0 +1,88 @@
+import { jsx as e, jsxs as d, 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";
+import s from "../../../ui/separator/separator.js";
+import u from "../../comps/input-status-icon/input-status-icon.js";
+import x from "../../comps/resend-otp/resend-otp.js";
+import { FormWrapper as F } from "./identifier-otp-form-styled.js";
+const C = ({
+  identifier: f,
+  otp: l,
+  errors: r,
+  isOtpVerified: i,
+  isLoading: a,
+  isSubmitDisabled: g,
+  showOtpInput: t,
+  onChange: m,
+  onSubmit: h,
+  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: [
+      /* @__PURE__ */ e(
+        c,
+        {
+          renderAs: r.identifier ? "error-dark" : b,
+          autoFocus: !0,
+          label: "Email or Phone",
+          value: f,
+          onChange: (o) => m("identifier", o.target.value),
+          width: 330,
+          required: !0,
+          shape: "borderLess",
+          errorMessage: r.identifier,
+          disabled: t,
+          siblingElement: /* @__PURE__ */ e(u, { isValid: t, isError: !!r.identifier })
+        }
+      ),
+      t && /* @__PURE__ */ d(k, { children: [
+        /* @__PURE__ */ e(s, { height: 36 }),
+        /* @__PURE__ */ e(
+          c,
+          {
+            type: "password",
+            renderAs: r.otp ? "error" : $,
+            autoComplete: "password",
+            label: "Verification code",
+            value: l,
+            onChange: (o) => m("otp", o.target.value),
+            width: 330,
+            required: !0,
+            shape: "borderLess",
+            errorMessage: r.otp,
+            disabled: i || l.length === 4 && a,
+            siblingElement: /* @__PURE__ */ e(
+              u,
+              {
+                isLoading: a,
+                isValid: i,
+                isError: !!r.otp
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e(s, { heightX: 1.25 }),
+        /* @__PURE__ */ e(n, { $alignItems: "flex-end", $width: "100%", children: /* @__PURE__ */ e(x, { onResendOTP: p, disabled: i }) }),
+        /* @__PURE__ */ e(s, { heightX: 2 })
+      ] })
+    ] }),
+    /* @__PURE__ */ e(
+      y,
+      {
+        size: "small",
+        renderAs: "secondary-dark",
+        type: "submit",
+        label: t ? "Log In" : "Get Verification Code",
+        width: 336,
+        busy: !t && a,
+        disabled: g
+      }
+    )
+  ] }) });
+}, P = C;
+export {
+  P as default
+};
+//# sourceMappingURL=identifier-otp-form.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,85 @@
+import { jsxs as o, 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 = ({
+  username: n,
+  password: i,
+  errors: r,
+  isProcessing: d,
+  onChange: m,
+  onSubmit: u,
+  onForgotPassword: p
+}) => {
+  const h = d || !n.trim() || !i.trim();
+  return /* @__PURE__ */ o(
+    t,
+    {
+      $gutterX: 2,
+      $gapX: 1.5,
+      $alignItems: "center",
+      $justifyContent: "center",
+      $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(
+              l,
+              {
+                renderAs: r.username ? "error-dark" : "primary-dark",
+                autoFocus: !0,
+                autoComplete: "username",
+                label: "Username",
+                value: n,
+                onChange: (s) => m("username", s.target.value),
+                width: 330,
+                required: !0,
+                shape: "borderLess",
+                errorMessage: r.username
+              }
+            ),
+            /* @__PURE__ */ e(a, { height: 36 }),
+            /* @__PURE__ */ e(
+              l,
+              {
+                type: "password",
+                renderAs: r.password ? "error-dark" : "primary-dark",
+                autoComplete: "password",
+                label: "Password",
+                value: i,
+                onChange: (s) => m("password", s.target.value),
+                width: 330,
+                required: !0,
+                shape: "borderLess",
+                errorMessage: r.password
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(a, { 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(t, { $justifyContent: "center", children: /* @__PURE__ */ e(
+            c,
+            {
+              size: "small",
+              renderAs: "secondary-dark",
+              type: "submit",
+              label: "Log in",
+              width: 336,
+              busy: d,
+              disabled: h
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}, x = b;
+export {
+  x as default
+};
+//# sourceMappingURL=username-password-form.js.map

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

@@ -0,0 +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;"}

package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.js

@@ -1,50 +1,56 @@
-import o from "styled-components";
+import t from "styled-components";
 import i from "../../../ui/layout/flex-view.js";
-const n = o(i)`
+const n = t(i)`
   position: relative;
-`, s = o(i)`
+`, s = t(i)`
   position: absolute;
   border-radius: 100%;
   top: 216px;
-  border: ${({ theme: t }) => `2px solid ${t.colors.BLACK_5}`};
-`, p = o(i)`
-  opacity: ${({ $isVisible: t }) => t ? 1 : 0};
+  border: ${({ theme: o }) => `2px solid ${o.colors.BLACK_5}`};
+`, p = t(i)`
+  opacity: ${({ $isVisible: o }) => o ? 1 : 0};
   transition: opacity 0.5s ease-in-out;
-`, a = o.div`
+`, l = t.div`
   position: relative;
 `;
-o(i)`
+t(i)`
   position: relative;
   overflow: hidden;
-  background: ${({ theme: t }) => t.colors.BLACK_2};
+  background: ${({ theme: o }) => o.colors.BLACK_2};
   border-radius: 100%;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${({ theme: t }) => t.colors.WHITE};
+  color: ${({ theme: o }) => o.colors.WHITE};
 `;
-o.div`
+t.div`
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 2;
 `;
-const l = o(i)`
+const a = t(i)`
   position: absolute;
   top: 55%;
   right: 24px;
-`, c = o(i)`
+`, c = t(i)`
   position: absolute;
   top: 55%;
   left: 24px;
+  button {
+    background-color: ${({ theme: o }) => o.colors.BLACK_1};
+    svg {
+      color: ${({ theme: o }) => o.colors.WHITE};
+    }
+  }
 `;
 export {
   s as CircularStepContainer,
   n as Container,
   p as ContentWrapper,
-  a as InputContainer,
-  l as NextButtonWrapper,
+  l as InputContainer,
+  a as NextButtonWrapper,
   c as PrevButtonWrapper
 };
 //# sourceMappingURL=circular-step-wrapper-styled.js.map

package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"circular-step-wrapper-styled.js","sources":["../../../../../src/features/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nconst Container = styled(FlexView)`\n  position: relative;\n`;\n\nconst CircularStepContainer = styled(FlexView)`\n  position: absolute;\n  border-radius: 100%;\n  top: 216px;\n  border: ${({ theme }) => `2px solid ${theme.colors.BLACK_5}`};\n`;\n\nconst ContentWrapper = styled(FlexView)<{ $isVisible: boolean }>`\n  opacity: ${({ $isVisible }) => ($isVisible ? 1 : 0)};\n  transition: opacity 0.5s ease-in-out;\n`;\n\nconst InputContainer = styled.div`\n  position: relative;\n`;\n\nconst CircularProgressContainer = styled(FlexView)<{\n  isVerticallyCentered?: boolean;\n}>`\n  position: relative;\n  overflow: hidden;\n  background: ${({ theme }) => theme.colors.BLACK_2};\n  border-radius: 100%;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ${({ theme }) => theme.colors.WHITE};\n`;\n\nexport const CircularProgress = styled.div`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n`;\n\nconst NextButtonWrapper = styled(FlexView)`\n  position: absolute;\n  top: 55%;\n  right: 24px;\n`;\nconst PrevButtonWrapper = styled(FlexView)`\n  position: absolute;\n  top: 55%;\n  left: 24px;\n`;\n\nexport {\n  NextButtonWrapper,\n  PrevButtonWrapper,\n  InputContainer,\n  Container,\n  CircularStepContainer,\n  CircularProgressContainer,\n  ContentWrapper,\n};\n"],"names":["Container","styled","FlexView","CircularStepContainer","theme","ContentWrapper","$isVisible","InputContainer","NextButtonWrapper","PrevButtonWrapper"],"mappings":";;AAIM,MAAAA,IAAYC,EAAOC,CAAQ;AAAA;AAAA,GAI3BC,IAAwBF,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,YAIjC,CAAC,EAAE,OAAAE,EAAM,MAAM,aAAaA,EAAM,OAAO,OAAO,EAAE;AAAA,GAGxDC,IAAiBJ,EAAOC,CAAQ;AAAA,aACzB,CAAC,EAAE,YAAAI,EAAA,MAAkBA,IAAa,IAAI,CAAE;AAAA;AAAA,GAI/CC,IAAiBN,EAAO;AAAA;AAAA;AAIIA,EAAOC,CAAQ;AAAA;AAAA;AAAA,gBAKjC,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMxC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAGZH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjC,MAAAO,IAAoBP,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAKnCO,IAAoBR,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"circular-step-wrapper-styled.js","sources":["../../../../../src/features/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nconst Container = styled(FlexView)`\n  position: relative;\n`;\n\nconst CircularStepContainer = styled(FlexView)`\n  position: absolute;\n  border-radius: 100%;\n  top: 216px;\n  border: ${({ theme }) => `2px solid ${theme.colors.BLACK_5}`};\n`;\n\nconst ContentWrapper = styled(FlexView)<{ $isVisible: boolean }>`\n  opacity: ${({ $isVisible }) => ($isVisible ? 1 : 0)};\n  transition: opacity 0.5s ease-in-out;\n`;\n\nconst InputContainer = styled.div`\n  position: relative;\n`;\n\nconst CircularProgressContainer = styled(FlexView)<{\n  isVerticallyCentered?: boolean;\n}>`\n  position: relative;\n  overflow: hidden;\n  background: ${({ theme }) => theme.colors.BLACK_2};\n  border-radius: 100%;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ${({ theme }) => theme.colors.WHITE};\n`;\n\nexport const CircularProgress = styled.div`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n`;\n\nconst NextButtonWrapper = styled(FlexView)`\n  position: absolute;\n  top: 55%;\n  right: 24px;\n`;\nconst PrevButtonWrapper = styled(FlexView)`\n  position: absolute;\n  top: 55%;\n  left: 24px;\n  button {\n    background-color: ${({ theme }) => theme.colors.BLACK_1};\n    svg {\n      color: ${({ theme }) => theme.colors.WHITE};\n    }\n  }\n`;\n\nexport {\n  NextButtonWrapper,\n  PrevButtonWrapper,\n  InputContainer,\n  Container,\n  CircularStepContainer,\n  CircularProgressContainer,\n  ContentWrapper,\n};\n"],"names":["Container","styled","FlexView","CircularStepContainer","theme","ContentWrapper","$isVisible","InputContainer","NextButtonWrapper","PrevButtonWrapper"],"mappings":";;AAIM,MAAAA,IAAYC,EAAOC,CAAQ;AAAA;AAAA,GAI3BC,IAAwBF,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,YAIjC,CAAC,EAAE,OAAAE,EAAM,MAAM,aAAaA,EAAM,OAAO,OAAO,EAAE;AAAA,GAGxDC,IAAiBJ,EAAOC,CAAQ;AAAA,aACzB,CAAC,EAAE,YAAAI,EAAA,MAAkBA,IAAa,IAAI,CAAE;AAAA;AAAA,GAI/CC,IAAiBN,EAAO;AAAA;AAAA;AAIIA,EAAOC,CAAQ;AAAA;AAAA;AAAA,gBAKjC,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMxC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAGZH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjC,MAAAO,IAAoBP,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAKnCO,IAAoBR,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKjB,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,eAE5C,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;"}

package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper.js

@@ -1,51 +1,53 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { forwardRef as v, useRef as f, useState as h, useCallback as k, useImperativeHandle as E, useLayoutEffect as H } from "react";
-import B from "../../../../assets/line-icons/icons/back2.js";
-import j from "../../../../assets/line-icons/icons/next2.js";
-import T from "../../../ui/animated-arc/animated-arc.js";
-import g from "../../../ui/buttons/icon-button/icon-button.js";
-import N from "../../../ui/layout/flex-view.js";
-import z from "../../../ui/lottie-animation/lottie-animation.js";
-import F from "../../../ui/separator/separator.js";
-import M from "../../../ui/text/text.js";
-import { Container as O, CircularStepContainer as P, ContentWrapper as V, InputContainer as X, PrevButtonWrapper as D, NextButtonWrapper as K } from "./circular-step-wrapper-styled.js";
-const Y = {
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { forwardRef as b, useRef as c, useState as $, useCallback as E, useEffect as H, useImperativeHandle as B, useLayoutEffect as T } from "react";
+import j from "../../../../assets/line-icons/icons/back2.js";
+import P from "../../../../assets/line-icons/icons/next2.js";
+import z from "../../../ui/animated-arc/animated-arc.js";
+import C from "../../../ui/buttons/icon-button/icon-button.js";
+import F from "../../../ui/layout/flex-view.js";
+import M from "../../../ui/lottie-animation/lottie-animation.js";
+import N from "../../../ui/separator/separator.js";
+import O from "../../../ui/text/text.js";
+import { Container as V, CircularStepContainer as X, ContentWrapper as D, InputContainer as K, PrevButtonWrapper as Y, NextButtonWrapper as _ } from "./circular-step-wrapper-styled.js";
+const q = {
   autoplay: !1,
   loop: !1,
   renderer: "canvas",
   rendererSettings: {
     preserveAspectRatio: "xMidYMin slice"
   }
-}, _ = v(
+}, G = b(
   ({
-    children: $,
-    onGoBack: C,
-    onNext: y,
-    label: i,
+    children: g,
+    onGoBack: y,
+    onNext: I,
+    label: a,
     showNext: x,
-    showPrevious: I,
-    animation: n,
-    introFrames: A,
-    outroFrames: S,
-    isNextLoading: a,
-    progressAngle: c
-  }, w) => {
-    const t = f(null), o = f(null), [s, L] = h(), [R, l] = h(!1), W = k(() => {
-      n && t.current && (t.current.playSegments(A, !0), setTimeout(() => l(!0), 500));
-    }, [n]);
-    return E(w, () => ({
-      playOutroAndFadeOut: async () => new Promise((b) => {
-        var d, m;
-        const u = () => {
-          var p;
-          b(), (p = t.current) == null || p.removeEventListener("complete", u);
+    showPrevious: A,
+    animation: r,
+    introFrames: S,
+    outroFrames: w,
+    isNextLoading: s,
+    progressAngle: l
+  }, R) => {
+    const t = c(null), o = c(null), [u, k] = $(), [v, m] = $(!1), i = c(null), L = E(() => {
+      r && t.current && (t.current.playSegments(S, !0), m(!0));
+    }, [r]);
+    return H(() => () => {
+      i.current && clearTimeout(i.current);
+    }, [r]), B(R, () => ({
+      playOutroAndFadeOut: async () => new Promise((W) => {
+        var f, p;
+        const d = () => {
+          var h;
+          W(), (h = t.current) == null || h.removeEventListener("complete", d);
         };
-        (d = t.current) == null || d.playSegments(S, !0), l(!1), (m = t.current) == null || m.addEventListener("complete", u);
+        (f = t.current) == null || f.playSegments(w, !0), i.current = setTimeout(() => m(!1), 400), (p = t.current) == null || p.addEventListener("complete", d);
       })
-    })), H(() => {
-      o.current && L(o.current.offsetHeight);
-    }, []), /* @__PURE__ */ r(
-      O,
+    })), T(() => {
+      o.current && k(o.current.offsetHeight);
+    }, []), /* @__PURE__ */ n(
+      V,
       {
         $flex: 1,
         $flexDirection: "column",
@@ -55,19 +57,19 @@ const Y = {
         $height: "100%",
         ref: o,
         children: [
-          s && /* @__PURE__ */ e(
-            z,
+          u && /* @__PURE__ */ e(
+            M,
             {
               width: 1280,
-              height: s,
-              src: n,
+              height: u,
+              src: r,
               ref: t,
-              onRender: W,
-              settings: Y
+              onRender: L,
+              settings: q
             }
           ),
-          /* @__PURE__ */ r(
-            P,
+          /* @__PURE__ */ n(
+            X,
             {
               $width: 400,
               $height: 400,
@@ -75,55 +77,55 @@ const Y = {
               $alignItems: "center",
               $justifyContent: "center",
               children: [
-                c && /* @__PURE__ */ e(
-                  T,
+                l && /* @__PURE__ */ e(
+                  z,
                   {
                     radius: 200,
                     strokeWidth: 2,
                     color: "WHITE",
-                    targetAngle: c,
+                    targetAngle: l,
                     mode: "fade",
                     duration: 1
                   }
                 ),
-                /* @__PURE__ */ r(V, { $isVisible: R, $width: "100%", children: [
-                  i ? /* @__PURE__ */ r(N, { $gutterX: 3.5, children: [
-                    /* @__PURE__ */ e(M, { $renderAs: "ab2", $color: "WHITE", $align: "center", children: i }),
-                    /* @__PURE__ */ e(F, { heightX: 1 })
+                /* @__PURE__ */ n(D, { $isVisible: v, $width: "100%", children: [
+                  a ? /* @__PURE__ */ n(F, { $gutterX: 3.5, children: [
+                    /* @__PURE__ */ e(O, { $renderAs: "ab2", $color: "WHITE", $align: "center", children: a }),
+                    /* @__PURE__ */ e(N, { heightX: 1 })
                   ] }) : null,
-                  /* @__PURE__ */ e(X, { children: $ })
+                  /* @__PURE__ */ e(K, { children: g })
                 ] })
               ]
             }
           ),
-          I && /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(
-            g,
+          A && /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ e(
+            C,
             {
-              Icon: B,
-              renderAs: "secondary",
-              analyticsLabel: "Next",
-              onClick: C,
-              disabled: a,
-              size: "regular"
+              Icon: j,
+              renderAs: "secondary-dark",
+              analyticsLabel: "Prev",
+              onClick: y,
+              disabled: s,
+              size: "small"
             }
           ) }),
-          x && /* @__PURE__ */ e(K, { children: /* @__PURE__ */ e(
-            g,
+          x && /* @__PURE__ */ e(_, { children: /* @__PURE__ */ e(
+            C,
             {
-              size: "regular",
-              Icon: j,
-              renderAs: "secondary",
+              size: "small",
+              Icon: P,
+              renderAs: "secondary-dark",
               analyticsLabel: "Next",
-              onClick: y,
-              busy: a
+              onClick: I,
+              busy: s
             }
           ) })
         ]
       }
     );
   }
-), ie = _;
+), ae = G;
 export {
-  ie as default
+  ae as default
 };
 //# sourceMappingURL=circular-step-wrapper.js.map