@cuemath/leap 3.2.18-mb → 3.2.19-beta-0.1

package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text.js

@@ -0,0 +1,17 @@
+import { jsx as i } from "react/jsx-runtime";
+import { memo as o, useState as l, useEffect as m } from "react";
+import { AnimatedText as c } from "./animated-text-styled.js";
+const f = ({ text: e, speed: r = 30 }) => {
+  const [s, n] = l(0);
+  return m(() => {
+    n(0);
+    const a = setInterval(() => {
+      n((t) => t >= e.length ? (clearInterval(a), t) : t + 1);
+    }, r);
+    return () => clearInterval(a);
+  }, [e, r]), /* @__PURE__ */ i(c, { $renderAs: "ab2", $color: "WHITE", children: e.slice(0, s) });
+}, T = o(f);
+export {
+  T as default
+};
+//# sourceMappingURL=animated-text.js.map

package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-text.js","sources":["../../../../../../src/features/auth/comps/animated-avatar-message/animated-text/animated-text.tsx"],"sourcesContent":["import type { IAnimatedTextProps } from './animated-text-types';\n\nimport React, { useEffect, useState, memo } from 'react';\n\nimport * as Styled from './animated-text-styled';\n\nconst AnimatedText: React.FC<IAnimatedTextProps> = ({ text, speed = 30 }) => {\n  const [visibleChars, setVisibleChars] = useState(0);\n\n  useEffect(() => {\n    setVisibleChars(0);\n\n    const interval = setInterval(() => {\n      setVisibleChars(prev => {\n        if (prev >= text.length) {\n          clearInterval(interval);\n\n          return prev;\n        }\n\n        return prev + 1;\n      });\n    }, speed);\n\n    return () => clearInterval(interval);\n  }, [text, speed]);\n\n  return (\n    <Styled.AnimatedText $renderAs=\"ab2\" $color=\"WHITE\">\n      {text.slice(0, visibleChars)}\n    </Styled.AnimatedText>\n  );\n};\n\nexport default memo(AnimatedText);\n"],"names":["AnimatedText","text","speed","visibleChars","setVisibleChars","useState","useEffect","interval","prev","jsx","Styled.AnimatedText","AnimatedText$1","memo"],"mappings":";;;AAMA,MAAMA,IAA6C,CAAC,EAAE,MAAAC,GAAM,OAAAC,IAAQ,SAAS;AAC3E,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAS,CAAC;AAElD,SAAAC,EAAU,MAAM;AACd,IAAAF,EAAgB,CAAC;AAEX,UAAAG,IAAW,YAAY,MAAM;AACjC,MAAAH,EAAgB,CAAQI,MAClBA,KAAQP,EAAK,UACf,cAAcM,CAAQ,GAEfC,KAGFA,IAAO,CACf;AAAA,OACAN,CAAK;AAED,WAAA,MAAM,cAAcK,CAAQ;AAAA,EAAA,GAClC,CAACN,GAAMC,CAAK,CAAC,GAGb,gBAAAO,EAAAC,GAAA,EAAoB,WAAU,OAAM,QAAO,SACzC,UAAKT,EAAA,MAAM,GAAGE,CAAY,EAC7B,CAAA;AAEJ,GAEeQ,IAAAC,EAAKZ,CAAY;"}

package/dist/features/auth/comps/auth-page-layout/auth-page-layout.js

@@ -1,23 +1,29 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { memo as m } from "react";
-import a from "../../../hooks/use-viewport/use-viewport.js";
-import c from "../../../ui/layout/flex-view.js";
-import { Container as h, ContentWrapper as s } from "./auth-page-layout-styled.js";
-const p = ({ leftBlock: i, rightBlock: o, isFullWidth: t }) => {
-  const { isCompact: r } = a();
-  return /* @__PURE__ */ n(h, { $width: "100%", $height: "100%", $flexDirection: "row", children: [
-    /* @__PURE__ */ e(
-      s,
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { memo as h } from "react";
+import { useTheme as a } from "styled-components";
+import s from "../../../ui/layout/flex-view.js";
+import { EDeviceType as p } from "../../../ui/theme/constants.js";
+import { Container as d, ContentWrapper as f } from "./auth-page-layout-styled.js";
+const u = ({
+  leftBlock: i,
+  rightBlock: o,
+  isFullWidth: t,
+  rightBlockBg: m = "BLACK_2"
+}) => {
+  const { device: n } = a(), e = n <= p.TABLET;
+  return /* @__PURE__ */ c(d, { $width: "100%", $height: "100%", $flexDirection: "row", children: [
+    /* @__PURE__ */ r(
+      f,
       {
-        $width: t || r ? "100%" : "50%",
+        $width: t || e ? "100%" : "50%",
         $background: "BLACK_1",
         children: i
       }
     ),
-    !r && o && !t && /* @__PURE__ */ e(c, { $width: "50%", $background: "BLACK_2", children: o })
+    !e && o && !t && /* @__PURE__ */ r(s, { $width: "50%", $background: m, children: o })
   ] });
-}, l = m(p);
+}, A = h(u);
 export {
-  l as default
+  A as default
 };
 //# sourceMappingURL=auth-page-layout.js.map

package/dist/features/auth/comps/auth-page-layout/auth-page-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"auth-page-layout.js","sources":["../../../../../src/features/auth/comps/auth-page-layout/auth-page-layout.tsx"],"sourcesContent":["import type { IAuthPageLayoutProps } from './auth-page-layout-types';\n\nimport { memo, type FC } from 'react';\n\nimport useViewport from '../../../hooks/use-viewport/use-viewport';\nimport FlexView from '../../../ui/layout/flex-view';\nimport * as Styled from './auth-page-layout-styled';\n\nconst AuthPageLayout: FC<IAuthPageLayoutProps> = ({ leftBlock, rightBlock, isFullWidth }) => {\n  const { isCompact } = useViewport();\n  const showRightBlock = !isCompact && rightBlock && !isFullWidth;\n\n  return (\n    <Styled.Container $width=\"100%\" $height=\"100%\" $flexDirection=\"row\">\n      <Styled.ContentWrapper\n        $width={isFullWidth || isCompact ? '100%' : '50%'}\n        $background=\"BLACK_1\"\n      >\n        {leftBlock}\n      </Styled.ContentWrapper>\n      {showRightBlock && (\n        <FlexView $width=\"50%\" $background=\"BLACK_2\">\n          {rightBlock}\n        </FlexView>\n      )}\n    </Styled.Container>\n  );\n};\n\nexport default memo(AuthPageLayout);\n"],"names":["AuthPageLayout","leftBlock","rightBlock","isFullWidth","isCompact","useViewport","jsxs","Styled.Container","jsx","Styled.ContentWrapper","FlexView","authPageLayout","memo"],"mappings":";;;;;AAQA,MAAMA,IAA2C,CAAC,EAAE,WAAAC,GAAW,YAAAC,GAAY,aAAAC,QAAkB;AACrF,QAAA,EAAE,WAAAC,MAAcC;AAIpB,SAAA,gBAAAC,EAACC,GAAA,EAAiB,QAAO,QAAO,SAAQ,QAAO,gBAAe,OAC5D,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,QAAQN,KAAeC,IAAY,SAAS;AAAA,QAC5C,aAAY;AAAA,QAEX,UAAAH;AAAA,MAAA;AAAA,IACH;AAAA,IATmB,CAACG,KAAaF,KAAc,CAACC,KAW7C,gBAAAK,EAAAE,GAAA,EAAS,QAAO,OAAM,aAAY,WAChC,UACHR,GAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,GAEeS,IAAAC,EAAKZ,CAAc;"}
+{"version":3,"file":"auth-page-layout.js","sources":["../../../../../src/features/auth/comps/auth-page-layout/auth-page-layout.tsx"],"sourcesContent":["import type { IAuthPageLayoutProps } from './auth-page-layout-types';\n\nimport { memo, type FC } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport { EDeviceType } from '../../../ui/theme/constants';\nimport * as Styled from './auth-page-layout-styled';\n\nconst AuthPageLayout: FC<IAuthPageLayoutProps> = ({\n  leftBlock,\n  rightBlock,\n  isFullWidth,\n  rightBlockBg = 'BLACK_2',\n}) => {\n  const { device } = useTheme();\n  const isCompact = device <= EDeviceType.TABLET;\n  const showRightBlock = !isCompact && rightBlock && !isFullWidth;\n\n  return (\n    <Styled.Container $width=\"100%\" $height=\"100%\" $flexDirection=\"row\">\n      <Styled.ContentWrapper\n        $width={isFullWidth || isCompact ? '100%' : '50%'}\n        $background=\"BLACK_1\"\n      >\n        {leftBlock}\n      </Styled.ContentWrapper>\n      {showRightBlock && (\n        <FlexView $width=\"50%\" $background={rightBlockBg}>\n          {rightBlock}\n        </FlexView>\n      )}\n    </Styled.Container>\n  );\n};\n\nexport default memo(AuthPageLayout);\n"],"names":["AuthPageLayout","leftBlock","rightBlock","isFullWidth","rightBlockBg","device","useTheme","isCompact","EDeviceType","jsxs","Styled.Container","jsx","Styled.ContentWrapper","FlexView","authPageLayout","memo"],"mappings":";;;;;;AASA,MAAMA,IAA2C,CAAC;AAAA,EAChD,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC,IAAe;AACjB,MAAM;AACE,QAAA,EAAE,QAAAC,MAAWC,KACbC,IAAYF,KAAUG,EAAY;AAItC,SAAA,gBAAAC,EAACC,GAAA,EAAiB,QAAO,QAAO,SAAQ,QAAO,gBAAe,OAC5D,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,QAAQT,KAAeI,IAAY,SAAS;AAAA,QAC5C,aAAY;AAAA,QAEX,UAAAN;AAAA,MAAA;AAAA,IACH;AAAA,IATmB,CAACM,KAAaL,KAAc,CAACC,KAW7C,gBAAAQ,EAAAE,GAAA,EAAS,QAAO,OAAM,aAAaT,GACjC,UACHF,GAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,GAEeY,IAAAC,EAAKf,CAAc;"}

package/dist/features/auth/comps/linear-progress-bar/linear-progress-bar-styled.js

@@ -0,0 +1,12 @@
+import o from "styled-components";
+import t from "../../../ui/layout/flex-view.js";
+const r = o(t)`
+  overflow: hidden;
+`, n = o(t)`
+  transition: width 0.3s ease-in-out;
+`;
+export {
+  r as Container,
+  n as Filler
+};
+//# sourceMappingURL=linear-progress-bar-styled.js.map

package/dist/features/auth/comps/linear-progress-bar/linear-progress-bar-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linear-progress-bar-styled.js","sources":["../../../../../src/features/auth/comps/linear-progress-bar/linear-progress-bar-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nexport const Container = styled(FlexView)`\n  overflow: hidden;\n`;\n\nexport const Filler = styled(FlexView)`\n  transition: width 0.3s ease-in-out;\n`;\n"],"names":["Container","styled","FlexView","Filler"],"mappings":";;AAIa,MAAAA,IAAYC,EAAOC,CAAQ;AAAA;AAAA,GAI3BC,IAASF,EAAOC,CAAQ;AAAA;AAAA;"}

package/dist/features/auth/comps/linear-progress-bar/linear-progress-bar.js

@@ -0,0 +1,34 @@
+import { jsx as e } from "react/jsx-runtime";
+import { memo as s } from "react";
+import { Container as m, Filler as h } from "./linear-progress-bar-styled.js";
+const $ = ({
+  percentage: o,
+  height: t = 8,
+  backgroundColor: a = "WHITE_T_10",
+  fillColor: i = "YELLOW_4",
+  borderRadius: r = 0
+}) => {
+  const n = Math.min(Math.max(o, 0), 100);
+  return /* @__PURE__ */ e(
+    m,
+    {
+      $width: "100%",
+      $height: t,
+      $borderRadius: r,
+      $background: a,
+      children: /* @__PURE__ */ e(
+        h,
+        {
+          $width: `${n}%`,
+          $background: i,
+          $height: "100%",
+          $borderRadius: r
+        }
+      )
+    }
+  );
+}, f = s($);
+export {
+  f as default
+};
+//# sourceMappingURL=linear-progress-bar.js.map

package/dist/features/auth/comps/linear-progress-bar/linear-progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linear-progress-bar.js","sources":["../../../../../src/features/auth/comps/linear-progress-bar/linear-progress-bar.tsx"],"sourcesContent":["import type { ILinearProgressBarProps } from './linear-progress-bar-props';\n\nimport { memo, type FC } from 'react';\n\nimport * as Styled from './linear-progress-bar-styled';\n\nconst LinearProgressBar: FC<ILinearProgressBarProps> = ({\n  percentage,\n  height = 8,\n  backgroundColor = 'WHITE_T_10',\n  fillColor = 'YELLOW_4',\n  borderRadius = 0,\n}) => {\n  const safePercentage = Math.min(Math.max(percentage, 0), 100);\n\n  return (\n    <Styled.Container\n      $width=\"100%\"\n      $height={height}\n      $borderRadius={borderRadius}\n      $background={backgroundColor}\n    >\n      <Styled.Filler\n        $width={`${safePercentage}%`}\n        $background={fillColor}\n        $height=\"100%\"\n        $borderRadius={borderRadius}\n      />\n    </Styled.Container>\n  );\n};\n\nexport default memo(LinearProgressBar);\n"],"names":["LinearProgressBar","percentage","height","backgroundColor","fillColor","borderRadius","safePercentage","jsx","Styled.Container","Styled.Filler","linearProgressBar","memo"],"mappings":";;;AAMA,MAAMA,IAAiD,CAAC;AAAA,EACtD,YAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,iBAAAC,IAAkB;AAAA,EAClB,WAAAC,IAAY;AAAA,EACZ,cAAAC,IAAe;AACjB,MAAM;AACE,QAAAC,IAAiB,KAAK,IAAI,KAAK,IAAIL,GAAY,CAAC,GAAG,GAAG;AAG1D,SAAA,gBAAAM;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,SAASN;AAAA,MACT,eAAeG;AAAA,MACf,aAAaF;AAAA,MAEb,UAAA,gBAAAI;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,QAAQ,GAAGH,CAAc;AAAA,UACzB,aAAaF;AAAA,UACb,SAAQ;AAAA,UACR,eAAeC;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA;AAAA,EAAA;AAGN,GAEeK,IAAAC,EAAKX,CAAiB;"}

package/dist/features/auth/comps/otp-input/otp-input-styled.js

@@ -0,0 +1,26 @@
+import t, { css as r } from "styled-components";
+import n from "../../../ui/layout/flex-view.js";
+const l = t(n)``, p = t.input`
+  width: 56px;
+  height: 56px;
+  font-size: 24px;
+  text-align: center;
+  font-family: 'Athletics-Light';
+  border: ${({ theme: o }) => `2px solid ${o.colors.BLACK_5}`};
+  color: ${({ theme: o }) => o.colors.WHITE};
+  background-color: ${({ theme: o }) => o.colors.BLACK_3};
+  outline: none;
+  transition: all 0.3s ease;
+  ${({ $hasError: o }) => o && r`
+      border-color: ${({ theme: e }) => e.colors.ORANGE_4};
+    `}
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+`;
+export {
+  p as InputBox,
+  l as Wrapper
+};
+//# sourceMappingURL=otp-input-styled.js.map

package/dist/features/auth/comps/otp-input/otp-input-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input-styled.js","sources":["../../../../../src/features/auth/comps/otp-input/otp-input-styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nexport const Wrapper = styled(FlexView)``;\n\nexport const InputBox = styled.input<{ $hasError: boolean }>`\n  width: 56px;\n  height: 56px;\n  font-size: 24px;\n  text-align: center;\n  font-family: 'Athletics-Light';\n  border: ${({ theme }) => `2px solid ${theme.colors.BLACK_5}`};\n  color: ${({ theme }) => theme.colors.WHITE};\n  background-color: ${({ theme }) => theme.colors.BLACK_3};\n  outline: none;\n  transition: all 0.3s ease;\n  ${({ $hasError }) =>\n    $hasError &&\n    css`\n      border-color: ${({ theme }) => theme.colors.ORANGE_4};\n    `}\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n`;\n"],"names":["Wrapper","styled","FlexView","InputBox","theme","$hasError","css"],"mappings":";;AAIa,MAAAA,IAAUC,EAAOC,CAAQ,KAEzBC,IAAWF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMnB,CAAC,EAAE,OAAAG,EAAM,MAAM,aAAaA,EAAM,OAAO,OAAO,EAAE;AAAA,WACnD,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA,sBACtB,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,IAGrD,CAAC,EAAE,WAAAC,QACHA,KACAC;AAAA,sBACkB,CAAC,EAAE,OAAAF,EAAA,MAAYA,EAAM,OAAO,QAAQ;AAAA,KACrD;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -0,0 +1,50 @@
+import { jsxs as h, jsx as a } from "react/jsx-runtime";
+import { memo as I, useRef as w, useCallback as f } from "react";
+import { LOTTIE as y } from "../../../../assets/lottie/lottie.js";
+import g from "../../../ui/lottie-animation/lottie-animation.js";
+import { Wrapper as E, InputBox as T } from "./otp-input-styled.js";
+const $ = ({
+  length: s = 4,
+  value: e,
+  onChange: c,
+  error: p,
+  isBusy: u = !1
+}) => {
+  const n = w([]), i = f(
+    (o, t) => {
+      var m;
+      const r = e.split("");
+      r[o] = t, c(r.join("")), t && o < s - 1 && ((m = n.current[o + 1]) == null || m.focus());
+    },
+    [s, c, e]
+  ), l = f(
+    (o, t) => {
+      var r;
+      o.key === "Backspace" && !e[t] && t > 0 && ((r = n.current[t - 1]) == null || r.focus());
+    },
+    [e]
+  );
+  return /* @__PURE__ */ h(E, { $flexDirection: "row", $flexColumnGapX: 1, $alignItems: "center", children: [
+    Array.from({ length: s }).map((o, t) => /* @__PURE__ */ a(
+      T,
+      {
+        type: "number",
+        maxLength: 1,
+        value: e[t] || "",
+        onChange: (r) => i(t, r.target.value),
+        onFocus: (r) => r.target.select(),
+        onKeyDown: (r) => l(r, t),
+        $hasError: !!p,
+        ref: (r) => {
+          r && (n.current[t] = r);
+        }
+      },
+      t
+    )),
+    u && /* @__PURE__ */ a(g, { src: y.SPINNER_WHITE, height: 24, width: 24 })
+  ] });
+}, R = I($);
+export {
+  R as default
+};
+//# sourceMappingURL=otp-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.js","sources":["../../../../../src/features/auth/comps/otp-input/otp-input.tsx"],"sourcesContent":["import type { IOTPInputProps } from './otp-input-types';\n\nimport { useCallback, useRef, memo } from 'react';\n\nimport { LOTTIE } from '../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport * as styled from './otp-input-styled';\n\nconst OTPInput: React.FC<IOTPInputProps> = ({\n  length = 4,\n  value,\n  onChange,\n  error,\n  isBusy = false,\n}) => {\n  const inputsRef = useRef<HTMLInputElement[]>([]);\n\n  const handleChange = useCallback(\n    (index: number, val: string) => {\n      const newValue = value.split('');\n\n      newValue[index] = val;\n      onChange(newValue.join(''));\n\n      if (val && index < length - 1) {\n        inputsRef.current[index + 1]?.focus();\n      }\n    },\n    [length, onChange, value],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {\n      if (e.key === 'Backspace' && !value[index] && index > 0) {\n        inputsRef.current[index - 1]?.focus();\n      }\n    },\n    [value],\n  );\n\n  return (\n    <styled.Wrapper $flexDirection=\"row\" $flexColumnGapX={1} $alignItems=\"center\">\n      {Array.from({ length }).map((_, index) => (\n        <styled.InputBox\n          key={index}\n          type=\"number\"\n          maxLength={1}\n          value={value[index] || ''}\n          onChange={e => handleChange(index, e.target.value)}\n          onFocus={e => e.target.select()}\n          onKeyDown={e => handleKeyDown(e, index)}\n          $hasError={!!error}\n          ref={el => {\n            if (el) inputsRef.current[index] = el;\n          }}\n        />\n      ))}\n      {isBusy && <LottieAnimation src={LOTTIE.SPINNER_WHITE} height={24} width={24} />}\n    </styled.Wrapper>\n  );\n};\n\nexport default memo(OTPInput);\n"],"names":["OTPInput","length","value","onChange","error","isBusy","inputsRef","useRef","handleChange","useCallback","index","val","newValue","_a","handleKeyDown","e","jsxs","styled.Wrapper","_","jsx","styled.InputBox","el","LottieAnimation","LOTTIE","otpInput","memo"],"mappings":";;;;;AAQA,MAAMA,IAAqC,CAAC;AAAA,EAC1C,QAAAC,IAAS;AAAA,EACT,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC,IAAS;AACX,MAAM;AACE,QAAAC,IAAYC,EAA2B,CAAA,CAAE,GAEzCC,IAAeC;AAAA,IACnB,CAACC,GAAeC,MAAgB;;AACxB,YAAAC,IAAWV,EAAM,MAAM,EAAE;AAE/B,MAAAU,EAASF,CAAK,IAAIC,GACTR,EAAAS,EAAS,KAAK,EAAE,CAAC,GAEtBD,KAAOD,IAAQT,IAAS,OAC1BY,IAAAP,EAAU,QAAQI,IAAQ,CAAC,MAA3B,QAAAG,EAA8B;AAAA,IAElC;AAAA,IACA,CAACZ,GAAQE,GAAUD,CAAK;AAAA,EAAA,GAGpBY,IAAgBL;AAAA,IACpB,CAACM,GAA0CL,MAAkB;;AACvD,MAAAK,EAAE,QAAQ,eAAe,CAACb,EAAMQ,CAAK,KAAKA,IAAQ,OACpDG,IAAAP,EAAU,QAAQI,IAAQ,CAAC,MAA3B,QAAAG,EAA8B;AAAA,IAElC;AAAA,IACA,CAACX,CAAK;AAAA,EAAA;AAIN,SAAA,gBAAAc,EAACC,GAAA,EAAe,gBAAe,OAAM,iBAAiB,GAAG,aAAY,UAClE,UAAA;AAAA,IAAM,MAAA,KAAK,EAAE,QAAAhB,EAAQ,CAAA,EAAE,IAAI,CAACiB,GAAGR,MAC9B,gBAAAS;AAAA,MAACC;AAAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,WAAW;AAAA,QACX,OAAOlB,EAAMQ,CAAK,KAAK;AAAA,QACvB,UAAU,CAAKK,MAAAP,EAAaE,GAAOK,EAAE,OAAO,KAAK;AAAA,QACjD,SAAS,CAAAA,MAAKA,EAAE,OAAO,OAAO;AAAA,QAC9B,WAAW,CAAAA,MAAKD,EAAcC,GAAGL,CAAK;AAAA,QACtC,WAAW,CAAC,CAACN;AAAA,QACb,KAAK,CAAMiB,MAAA;AACT,UAAIA,MAAIf,EAAU,QAAQI,CAAK,IAAIW;AAAA,QACrC;AAAA,MAAA;AAAA,MAVKX;AAAA,IAAA,CAYR;AAAA,IACAL,uBAAWiB,GAAgB,EAAA,KAAKC,EAAO,eAAe,QAAQ,IAAI,OAAO,GAAI,CAAA;AAAA,EAChF,EAAA,CAAA;AAEJ,GAEeC,IAAAC,EAAKzB,CAAQ;"}

package/dist/features/auth/comps/pill-button/pill-button-styled.js

@@ -0,0 +1,44 @@
+import n, { css as p } from "styled-components";
+import a from "../../../ui/layout/flex-view.js";
+import $ from "../../../ui/text/text.js";
+const T = n.button`
+  ${({ selected: o, disabled: r, width: t, height: l, borderColor: s, theme: i }) => {
+  const c = r ? i.colors.WHITE_T_10 : o ? i.colors.WHITE_1 : i.colors.BLACK_1, e = r ? i.colors.WHITE_T_15 : s;
+  return p`
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      cursor: ${r ? "not-allowed" : "pointer"};
+      transition: all 0.3s ease;
+      padding: 7.5px 16px;
+      border-radius: 40px;
+      border: 1px solid ${e};
+      width: ${t ? `${t}` : "auto"}${typeof t == "number" ? "px" : ""};
+      height: ${l ? `${l}px` : "auto"};
+      background-color: ${c};
+      &:hover {
+        background-color: ${!o && !r ? i.colors.WHITE_T_10 : void 0};
+      }
+    `;
+}}
+`, d = n(a)`
+  visibility: ${({ $showLottie: o }) => o ? "visible" : "hidden"};
+`, f = n($)`
+  transition: all 0.3s ease-in-out;
+  position: relative;
+
+  ${({ shouldOffsetLabel: o }) => `
+    left: ${o ? "0" : "-10px"};
+  `};
+
+  ${({ selected: o, disabled: r, theme: t, textColor: l }) => `
+    color: ${r ? t.colors.WHITE_T_38 : o ? t.colors.BLACK_1 : l};
+  `};
+`;
+export {
+  d as IconWrapper,
+  f as Label,
+  T as Wrapper
+};
+//# sourceMappingURL=pill-button-styled.js.map

package/dist/features/auth/comps/pill-button/pill-button-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pill-button-styled.js","sources":["../../../../../src/features/auth/comps/pill-button/pill-button-styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\nexport const Wrapper = styled.button<{\n  selected: boolean;\n  disabled: boolean;\n  width?: number | string;\n  height?: number;\n  borderColor?: string;\n}>`\n  ${({ selected, disabled, width, height, borderColor, theme }) => {\n    const defaultBgColor = disabled\n      ? theme.colors.WHITE_T_10\n      : selected\n        ? theme.colors.WHITE_1\n        : theme.colors.BLACK_1;\n\n    const borderColorVal = disabled ? theme.colors.WHITE_T_15 : borderColor;\n\n    return css`\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\n      transition: all 0.3s ease;\n      padding: 7.5px 16px;\n      border-radius: 40px;\n      border: 1px solid ${borderColorVal};\n      width: ${width ? `${width}` : 'auto'}${typeof width === 'number' ? 'px' : ''};\n      height: ${height ? `${height}px` : 'auto'};\n      background-color: ${defaultBgColor};\n      &:hover {\n        background-color: ${!selected && !disabled ? theme.colors.WHITE_T_10 : undefined};\n      }\n    `;\n  }}\n`;\n\nexport const IconWrapper = styled(FlexView)<{\n  $showLottie: boolean;\n}>`\n  visibility: ${({ $showLottie }) => ($showLottie ? 'visible' : 'hidden')};\n`;\n\nexport const Label = styled(Text)<{\n  selected: boolean;\n  disabled: boolean;\n  shouldOffsetLabel: boolean;\n  textColor: string;\n}>`\n  transition: all 0.3s ease-in-out;\n  position: relative;\n\n  ${({ shouldOffsetLabel }) => `\n    left: ${shouldOffsetLabel ? '0' : '-10px'};\n  `};\n\n  ${({ selected, disabled, theme, textColor }) => `\n    color: ${disabled ? theme.colors.WHITE_T_38 : selected ? theme.colors.BLACK_1 : textColor};\n  `};\n`;\n"],"names":["Wrapper","styled","selected","disabled","width","height","borderColor","theme","defaultBgColor","borderColorVal","css","IconWrapper","FlexView","$showLottie","Label","Text","shouldOffsetLabel","textColor"],"mappings":";;;AAKO,MAAMA,IAAUC,EAAO;AAAA,IAO1B,CAAC,EAAE,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,QAAAC,GAAQ,aAAAC,GAAa,OAAAC,QAAY;AACzD,QAAAC,IAAiBL,IACnBI,EAAM,OAAO,aACbL,IACEK,EAAM,OAAO,UACbA,EAAM,OAAO,SAEbE,IAAiBN,IAAWI,EAAM,OAAO,aAAaD;AAErD,SAAAI;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKKP,IAAW,gBAAgB,SAAS;AAAA;AAAA;AAAA;AAAA,0BAI1BM,CAAc;AAAA,eACzBL,IAAQ,GAAGA,CAAK,KAAK,MAAM,GAAG,OAAOA,KAAU,WAAW,OAAO,EAAE;AAAA,gBAClEC,IAAS,GAAGA,CAAM,OAAO,MAAM;AAAA,0BACrBG,CAAc;AAAA;AAAA,4BAEZ,CAACN,KAAY,CAACC,IAAWI,EAAM,OAAO,aAAa,MAAS;AAAA;AAAA;AAGtF,CAAC;AAAA,GAGUI,IAAcV,EAAOW,CAAQ;AAAA,gBAG1B,CAAC,EAAE,aAAAC,EAAA,MAAmBA,IAAc,YAAY,QAAS;AAAA,GAG5DC,IAAQb,EAAOc,CAAI;AAAA;AAAA;AAAA;AAAA,IAS5B,CAAC,EAAE,mBAAAC,EAAA,MAAwB;AAAA,YACnBA,IAAoB,MAAM,OAAO;AAAA,GAC1C;AAAA;AAAA,IAEC,CAAC,EAAE,UAAAd,GAAU,UAAAC,GAAU,OAAAI,GAAO,WAAAU,EAAgB,MAAA;AAAA,aACrCd,IAAWI,EAAM,OAAO,aAAaL,IAAWK,EAAM,OAAO,UAAUU,CAAS;AAAA,GAC1F;AAAA;"}

package/dist/features/auth/comps/pill-button/pill-button.js

@@ -0,0 +1,74 @@
+import { jsx as o, jsxs as b } from "react/jsx-runtime";
+import { memo as H, useState as L, useCallback as l, useEffect as M } from "react";
+import { useTheme as R } from "styled-components";
+import _ from "../../../ui/arrow-tooltip/arrow-tooltip.js";
+import j from "../../../ui/layout/flex-view.js";
+import y from "../../../ui/lottie-animation/lottie-animation.js";
+import { Wrapper as B, IconWrapper as O, Label as P } from "./pill-button-styled.js";
+const X = {
+  autoplay: !0,
+  loop: !0,
+  renderer: "canvas"
+}, k = ({
+  id: i,
+  label: d,
+  selected: t = !1,
+  disabled: e = !1,
+  animatedLabel: u = "",
+  icon: r,
+  onClick: a,
+  tooltip: c,
+  width: A
+}) => {
+  const [g, f] = L(!1), [n, v] = L(!1), { colors: h } = R(), s = !!u, $ = l(() => {
+    a(i);
+  }, [i, a]), C = l(() => f(!0), []), E = l(() => f(!1), []);
+  M(() => {
+    if (!s || e) return;
+    const T = setInterval(() => {
+      v((W) => !W);
+    }, 1e3);
+    return () => clearInterval(T);
+  }, [e, s]);
+  const m = !!r && !e && (s || t || g), I = h[n ? "YELLOW_4" : "WHITE_1"], w = h[n && !t ? "YELLOW_4" : "WHITE_1"], p = n ? u : d, x = /* @__PURE__ */ o(
+    B,
+    {
+      selected: t,
+      disabled: e,
+      onClick: $,
+      onMouseEnter: C,
+      onMouseLeave: E,
+      width: A,
+      borderColor: I,
+      children: /* @__PURE__ */ b(
+        j,
+        {
+          $flexDirection: "row",
+          $alignItems: "center",
+          $justifyContent: "center",
+          $flexColumnGapX: 0.25,
+          children: [
+            r && /* @__PURE__ */ o(O, { $widthX: 1, $heightX: 1, $showLottie: m, children: /* @__PURE__ */ o(y, { src: r, settings: X }) }),
+            /* @__PURE__ */ o(
+              P,
+              {
+                shouldOffsetLabel: m || !r,
+                selected: t,
+                disabled: e,
+                $renderAs: n ? t ? "ub3-bold" : "ub3" : t ? "ub2-bold" : "ub2",
+                textColor: w,
+                children: p
+              },
+              p
+            )
+          ]
+        }
+      )
+    }
+  );
+  return e && c ? /* @__PURE__ */ o(_, { renderAs: "primary", tooltipItem: c, position: "top", children: x }) : x;
+}, K = H(k);
+export {
+  K as default
+};
+//# sourceMappingURL=pill-button.js.map

package/dist/features/auth/comps/pill-button/pill-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pill-button.js","sources":["../../../../../src/features/auth/comps/pill-button/pill-button.tsx"],"sourcesContent":["import type { IPillButtonProps } from './pill-button-types';\n\nimport { useCallback, useEffect, useState, type FC, memo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport ArrowTooltip from '../../../ui/arrow-tooltip/arrow-tooltip';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport * as Styled from './pill-button-styled';\n\nconst lottieSettings = {\n  autoplay: true,\n  loop: true,\n  renderer: 'canvas',\n};\n\nconst PillButton: FC<IPillButtonProps> = ({\n  id,\n  label,\n  selected = false,\n  disabled = false,\n  animatedLabel = '',\n  icon,\n  onClick,\n  tooltip,\n  width,\n}) => {\n  const [isHovered, setHovered] = useState(false);\n  const [highlightPhase, setHighlightPhase] = useState(false);\n  const { colors } = useTheme();\n  const shouldAnimate = !!animatedLabel;\n\n  const handleClick = useCallback(() => {\n    onClick(id);\n  }, [id, onClick]);\n\n  const handleMouseEnter = useCallback(() => setHovered(true), []);\n  const handleMouseLeave = useCallback(() => setHovered(false), []);\n\n  useEffect(() => {\n    if (!shouldAnimate || disabled) return;\n\n    const interval = setInterval(() => {\n      setHighlightPhase(prev => !prev);\n    }, 1000);\n\n    return () => clearInterval(interval);\n  }, [disabled, shouldAnimate]);\n\n  const showLottie = !!icon && !disabled && (shouldAnimate || selected || isHovered);\n\n  const borderColor = colors[highlightPhase ? 'YELLOW_4' : 'WHITE_1'];\n  const textColor = colors[highlightPhase && !selected ? 'YELLOW_4' : 'WHITE_1'];\n  const currentLabel = highlightPhase ? animatedLabel : label;\n  const defaultTextRenderAs = selected ? 'ub2-bold' : 'ub2';\n  const textRenderAs = highlightPhase ? (selected ? 'ub3-bold' : 'ub3') : defaultTextRenderAs;\n\n  const ButtonContent = (\n    <Styled.Wrapper\n      selected={selected}\n      disabled={disabled}\n      onClick={handleClick}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      width={width}\n      borderColor={borderColor}\n    >\n      <FlexView\n        $flexDirection=\"row\"\n        $alignItems=\"center\"\n        $justifyContent=\"center\"\n        $flexColumnGapX={0.25}\n      >\n        {icon && (\n          <Styled.IconWrapper $widthX={1} $heightX={1} $showLottie={showLottie}>\n            <LottieAnimation src={icon} settings={lottieSettings} />\n          </Styled.IconWrapper>\n        )}\n        <Styled.Label\n          key={currentLabel}\n          shouldOffsetLabel={showLottie || !icon}\n          selected={selected}\n          disabled={disabled}\n          $renderAs={textRenderAs}\n          textColor={textColor}\n        >\n          {currentLabel}\n        </Styled.Label>\n      </FlexView>\n    </Styled.Wrapper>\n  );\n\n  return disabled && tooltip ? (\n    <ArrowTooltip renderAs=\"primary\" tooltipItem={tooltip} position=\"top\">\n      {ButtonContent}\n    </ArrowTooltip>\n  ) : (\n    ButtonContent\n  );\n};\n\nexport default memo(PillButton);\n"],"names":["lottieSettings","PillButton","id","label","selected","disabled","animatedLabel","icon","onClick","tooltip","width","isHovered","setHovered","useState","highlightPhase","setHighlightPhase","colors","useTheme","shouldAnimate","handleClick","useCallback","handleMouseEnter","handleMouseLeave","useEffect","interval","prev","showLottie","borderColor","textColor","currentLabel","ButtonContent","jsx","Styled.Wrapper","jsxs","FlexView","Styled.IconWrapper","LottieAnimation","Styled.Label","ArrowTooltip","pillButton","memo"],"mappings":";;;;;;;AAUA,MAAMA,IAAiB;AAAA,EACrB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AACZ,GAEMC,IAAmC,CAAC;AAAA,EACxC,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,eAAAC,IAAgB;AAAA,EAChB,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AACF,MAAM;AACJ,QAAM,CAACC,GAAWC,CAAU,IAAIC,EAAS,EAAK,GACxC,CAACC,GAAgBC,CAAiB,IAAIF,EAAS,EAAK,GACpD,EAAE,QAAAG,MAAWC,KACbC,IAAgB,CAAC,CAACZ,GAElBa,IAAcC,EAAY,MAAM;AACpC,IAAAZ,EAAQN,CAAE;AAAA,EAAA,GACT,CAACA,GAAIM,CAAO,CAAC,GAEVa,IAAmBD,EAAY,MAAMR,EAAW,EAAI,GAAG,CAAA,CAAE,GACzDU,IAAmBF,EAAY,MAAMR,EAAW,EAAK,GAAG,CAAA,CAAE;AAEhE,EAAAW,EAAU,MAAM;AACV,QAAA,CAACL,KAAiBb,EAAU;AAE1B,UAAAmB,IAAW,YAAY,MAAM;AACf,MAAAT,EAAA,CAAAU,MAAQ,CAACA,CAAI;AAAA,OAC9B,GAAI;AAEA,WAAA,MAAM,cAAcD,CAAQ;AAAA,EAAA,GAClC,CAACnB,GAAUa,CAAa,CAAC;AAE5B,QAAMQ,IAAa,CAAC,CAACnB,KAAQ,CAACF,MAAaa,KAAiBd,KAAYO,IAElEgB,IAAcX,EAAOF,IAAiB,aAAa,SAAS,GAC5Dc,IAAYZ,EAAOF,KAAkB,CAACV,IAAW,aAAa,SAAS,GACvEyB,IAAef,IAAiBR,IAAgBH,GAIhD2B,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,UAAA5B;AAAA,MACA,UAAAC;AAAA,MACA,SAASc;AAAA,MACT,cAAcE;AAAA,MACd,cAAcC;AAAA,MACd,OAAAZ;AAAA,MACA,aAAAiB;AAAA,MAEA,UAAA,gBAAAM;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,gBAAe;AAAA,UACf,aAAY;AAAA,UACZ,iBAAgB;AAAA,UAChB,iBAAiB;AAAA,UAEhB,UAAA;AAAA,YAAA3B,uBACE4B,GAAA,EAAmB,SAAS,GAAG,UAAU,GAAG,aAAaT,GACxD,4BAACU,GAAgB,EAAA,KAAK7B,GAAM,UAAUP,EAAgB,CAAA,GACxD;AAAA,YAEF,gBAAA+B;AAAA,cAACM;AAAAA,cAAA;AAAA,gBAEC,mBAAmBX,KAAc,CAACnB;AAAA,gBAClC,UAAAH;AAAA,gBACA,UAAAC;AAAA,gBACA,WA5BaS,IAAkBV,IAAW,aAAa,QADnCA,IAAW,aAAa;AAAA,gBA8B5C,WAAAwB;AAAA,gBAEC,UAAAC;AAAA,cAAA;AAAA,cAPIA;AAAA,YAQP;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIG,SAAAxB,KAAYI,IACjB,gBAAAsB,EAACO,GAAa,EAAA,UAAS,WAAU,aAAa7B,GAAS,UAAS,OAC7D,UAAAqB,EAAA,CACH,IAEAA;AAEJ,GAEeS,IAAAC,EAAKvC,CAAU;"}

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

@@ -1,65 +1,72 @@
-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";
-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";
+import { jsx as r, jsxs as n, Fragment as C } from "react/jsx-runtime";
+import { memo as g, useCallback as f } from "react";
+import w from "../../../ui/buttons/button/button.js";
+import $ from "../../../ui/buttons/text-button/text-button.js";
+import m from "../../../ui/layout/flex-view.js";
+import a from "../../../ui/text/text.js";
+import { useResendTimer as A } from "./hooks/use-resend-timer.js";
 const I = ({
-  onResendOTP: r,
-  onResendVoiceOTP: l,
-  timerSeconds: f = 15,
-  showVoiceOTP: $ = !1,
-  disabled: m,
-  renderAs: h = "text",
-  width: p
+  onResendOTP: l,
+  onResendVoiceOTP: i,
+  timerSeconds: h = 15,
+  showVoiceOTP: p = !1,
+  disabled: o,
+  renderAs: x = "text",
+  width: k,
+  textButtonColor: s = "WHITE_T_60",
+  size: d = "small"
 }) => {
-  const { canResend: o, resetTimer: t, timeLeft: s } = C({
-    initialSeconds: f
-  }), d = a(() => {
-    r == null || r(), t();
-  }, [r, t]), b = a(() => {
+  const { canResend: c, resetTimer: t, timeLeft: u } = A({
+    initialSeconds: h
+  }), b = f(() => {
     l == null || l(), t();
-  }, [l, t]);
-  return h === "submit" ? /* @__PURE__ */ e(
-    k,
-    {
-      size: "small",
-      renderAs: "secondary-dark",
-      type: "submit",
-      label: o ? "Resend" : `Resend in ${s}`,
-      width: p,
-      onClick: d,
-      disabled: !o || m
-    }
-  ) : /* @__PURE__ */ e(i, { children: o ? /* @__PURE__ */ n(i, { $flexDirection: "row", $alignItems: "center", $flexColumnGapX: 0.5, children: [
-    /* @__PURE__ */ e(
-      u,
+  }, [l, t]), _ = f(() => {
+    i == null || i(), t();
+  }, [i, t]);
+  if (x === "submit")
+    return /* @__PURE__ */ r(
+      w,
       {
-        disabled: m,
+        size: d,
+        renderAs: "secondary-dark",
+        type: "submit",
+        label: c ? "Resend" : `Resend in ${u}`,
+        width: k,
+        onClick: b,
+        disabled: !c || o
+      }
+    );
+  const e = d === "xsmall";
+  return /* @__PURE__ */ r(m, { children: c ? /* @__PURE__ */ n(m, { $flexDirection: "row", $alignItems: "center", $flexColumnGapX: 0.5, children: [
+    /* @__PURE__ */ r(
+      $,
+      {
+        disabled: o,
         label: "Resend",
-        color: "WHITE_T_60",
-        onClick: d
+        size: e ? "small" : "regular",
+        color: s,
+        onClick: b
       }
     ),
-    $ && /* @__PURE__ */ n(_, { children: [
-      /* @__PURE__ */ e(c, { $renderAs: "ub2", $color: "WHITE_T_60", children: "or" }),
-      /* @__PURE__ */ e(i, { $width: 116, children: /* @__PURE__ */ e(
-        u,
+    p && /* @__PURE__ */ n(C, { children: [
+      /* @__PURE__ */ r(a, { $renderAs: e ? "ub3" : "ub2", $color: s, children: "or" }),
+      /* @__PURE__ */ r(m, { $width: 116, children: /* @__PURE__ */ r(
+        $,
         {
           label: "Get code via call",
-          color: "WHITE_T_60",
-          onClick: b
+          size: e ? "small" : "regular",
+          color: s,
+          onClick: _
         }
       ) })
     ] })
-  ] }) : /* @__PURE__ */ e(i, { $width: 105, children: /* @__PURE__ */ n(c, { $renderAs: "ub2", $color: "WHITE_T_60", children: [
+  ] }) : /* @__PURE__ */ r(m, { $width: 105, children: /* @__PURE__ */ n(a, { $renderAs: e ? "ub3" : "ub2", $color: "WHITE_T_60", children: [
     "Resend in",
     " ",
-    /* @__PURE__ */ e(c, { $renderAs: "ub2-bold", $inline: !0, $color: "WHITE_T_60", children: s })
+    /* @__PURE__ */ r(a, { $renderAs: e ? "ub3-bold" : "ub2-bold", $inline: !0, $color: "WHITE_T_60", children: u })
   ] }) }) });
-}, j = x(I);
+}, F = g(I);
 export {
-  j as default
+  F 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 { 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;"}
+{"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  textButtonColor = 'WHITE_T_60',\n  size = 'small',\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={size}\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  const isXSmallSize = size === 'xsmall';\n\n  return (\n    <FlexView>\n      {!canResend ? (\n        <FlexView $width={105}>\n          <Text $renderAs={isXSmallSize ? 'ub3' : 'ub2'} $color=\"WHITE_T_60\">\n            Resend in{' '}\n            <Text $renderAs={isXSmallSize ? 'ub3-bold' : '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            size={isXSmallSize ? 'small' : 'regular'}\n            color={textButtonColor}\n            onClick={handleResendClick}\n          />\n          {showVoiceOTP && (\n            <>\n              <Text $renderAs={isXSmallSize ? 'ub3' : 'ub2'} $color={textButtonColor}>\n                or\n              </Text>\n              <FlexView $width={116}>\n                <TextButton\n                  label=\"Get code via call\"\n                  size={isXSmallSize ? 'small' : 'regular'}\n                  color={textButtonColor}\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","textButtonColor","size","canResend","resetTimer","timeLeft","useResendTimer","handleResendClick","useCallback","handleVoiceResendClick","jsx","Button","isXSmallSize","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;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,MAAAC,IAAO;AACT,MAAM;AACJ,QAAM,EAAE,WAAAC,GAAW,YAAAC,GAAY,UAAAC,EAAA,IAAaC,EAAe;AAAA,IACzD,gBAAgBV;AAAA,EAAA,CACjB,GAEKW,IAAoBC,EAAY,MAAM;AAC5B,IAAAd,KAAA,QAAAA,KACHU;EAAA,GACV,CAACV,GAAaU,CAAU,CAAC,GAEtBK,IAAyBD,EAAY,MAAM;AAC5B,IAAAb,KAAA,QAAAA,KACRS;EAAA,GACV,CAACT,GAAkBS,CAAU,CAAC;AAEjC,MAAIL,MAAa;AAEb,WAAA,gBAAAW;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAAT;AAAA,QACA,UAAS;AAAA,QACT,MAAK;AAAA,QACL,OAAOC,IAAY,WAAW,aAAaE,CAAQ;AAAA,QACnD,OAAAL;AAAA,QACA,SAASO;AAAA,QACT,UAAU,CAACJ,KAAaL;AAAA,MAAA;AAAA,IAAA;AAK9B,QAAMc,IAAeV,MAAS;AAE9B,SACG,gBAAAQ,EAAAG,GAAA,EACE,UAACV,IAUC,gBAAAW,EAAAD,GAAA,EAAS,gBAAe,OAAM,aAAY,UAAS,iBAAiB,KACnE,UAAA;AAAA,IAAA,gBAAAH;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,UAAAjB;AAAA,QACA,OAAM;AAAA,QACN,MAAMc,IAAe,UAAU;AAAA,QAC/B,OAAOX;AAAA,QACP,SAASM;AAAA,MAAA;AAAA,IACX;AAAA,IACCV,KAEG,gBAAAiB,EAAAE,GAAA,EAAA,UAAA;AAAA,MAAA,gBAAAN,EAACO,KAAK,WAAWL,IAAe,QAAQ,OAAO,QAAQX,GAAiB,UAExE,KAAA,CAAA;AAAA,MACA,gBAAAS,EAACG,GAAS,EAAA,QAAQ,KAChB,UAAA,gBAAAH;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,MAAMH,IAAe,UAAU;AAAA,UAC/B,OAAOX;AAAA,UACP,SAASQ;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,IAAA,GACF;AAAA,EAAA,EAEJ,CAAA,sBAhCCI,GAAS,EAAA,QAAQ,KAChB,UAAA,gBAAAC,EAACG,KAAK,WAAWL,IAAe,QAAQ,OAAO,QAAO,cAAa,UAAA;AAAA,IAAA;AAAA,IACvD;AAAA,IACV,gBAAAF,EAACO,GAAK,EAAA,WAAWL,IAAe,aAAa,YAAY,SAAO,IAAC,QAAO,cACrE,UACHP,EAAA,CAAA;AAAA,EACF,EAAA,CAAA,EACF,CAAA,EA2BJ,CAAA;AAEJ,GAEea,IAAAC,EAAK1B,CAAS;"}

package/dist/features/auth/comps/selectable-info-card/selectable-info-card-styled.js

@@ -0,0 +1,17 @@
+import e from "styled-components";
+import t from "../../../ui/layout/flex-view.js";
+const s = e(t)`
+  ${({ selected: r, theme: o }) => `
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border-width: 2px;
+
+    &:hover {
+        background-color: ${r ? void 0 : o.colors.BLACK_5};
+    }
+  `}
+`;
+export {
+  s as Wrapper
+};
+//# sourceMappingURL=selectable-info-card-styled.js.map

package/dist/features/auth/comps/selectable-info-card/selectable-info-card-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectable-info-card-styled.js","sources":["../../../../../src/features/auth/comps/selectable-info-card/selectable-info-card-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nexport const Wrapper = styled(FlexView)<{ selected: boolean }>`\n  ${({ selected, theme }) => {\n    return `\n    cursor: pointer;\n    transition: all 0.3s ease;\n    border-width: 2px;\n\n    &:hover {\n        background-color: ${!selected ? theme.colors.BLACK_5 : undefined};\n    }\n  `;\n  }}\n`;\n"],"names":["Wrapper","styled","FlexView","selected","theme"],"mappings":";;AAIa,MAAAA,IAAUC,EAAOC,CAAQ;AAAA,IAClC,CAAC,EAAE,UAAAC,GAAU,OAAAC,QACN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAMkBD,IAAkC,SAAvBC,EAAM,OAAO,OAAmB;AAAA;AAAA,GAGrE;AAAA;"}

package/dist/features/auth/comps/selectable-info-card/selectable-info-card.js

@@ -0,0 +1,67 @@
+import { jsxs as s, jsx as n } from "react/jsx-runtime";
+import { memo as d, useRef as C, useCallback as t, useMemo as b } from "react";
+import g from "../../../ui/layout/flex-view.js";
+import x from "../../../ui/lottie-animation/lottie-animation.js";
+import m from "../../../ui/text/text.js";
+import { Wrapper as I } from "./selectable-info-card-styled.js";
+const T = ({
+  id: a,
+  title: u,
+  description: c,
+  icon: i,
+  selected: r,
+  onClick: l
+}) => {
+  const e = C(null), f = t(() => {
+    l(a);
+  }, [a, l]), p = t(() => {
+    var o;
+    (o = e.current) == null || o.play();
+  }, []), $ = t(() => {
+    var o;
+    r || (o = e.current) == null || o.stop();
+  }, [r]), h = b(
+    () => ({
+      autoplay: r,
+      loop: !0,
+      renderer: "canvas"
+    }),
+    [r]
+  );
+  return /* @__PURE__ */ s(
+    I,
+    {
+      $gutterX: 1,
+      $gapX: 1,
+      $borderColor: "WHITE",
+      $flexDirection: "row",
+      $background: r ? "WHITE_1" : "BLACK_1",
+      onMouseEnter: p,
+      onMouseLeave: $,
+      onClick: f,
+      $flexColumnGapX: 0.5,
+      selected: r,
+      $alignItems: "center",
+      children: [
+        i && /* @__PURE__ */ n(
+          x,
+          {
+            src: i,
+            ref: e,
+            settings: h,
+            width: 40,
+            height: 40
+          }
+        ),
+        /* @__PURE__ */ s(g, { children: [
+          /* @__PURE__ */ n(m, { $renderAs: "ab3", $color: r ? "BLACK_1" : "WHITE", children: u }),
+          /* @__PURE__ */ n(m, { $renderAs: "ub3", $color: r ? "BLACK_T_60" : "WHITE_T_60", children: c })
+        ] })
+      ]
+    }
+  );
+}, H = d(T);
+export {
+  H as default
+};
+//# sourceMappingURL=selectable-info-card.js.map