@cuemath/leap 3.2.31 → 3.2.32-m

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

@@ -1,115 +1,93 @@
-import { jsxs as _, jsx as a } from "react/jsx-runtime";
-import { memo as D, useRef as c, useState as y, useCallback as E, useImperativeHandle as O, useMemo as S, useEffect as f } from "react";
-import { LOTTIE as j } from "../../../../assets/lottie/lottie.js";
-import C from "../../../ui/layout/flex-view.js";
-import X from "../../../ui/lottie-animation/lottie-animation.js";
-import { ANIMATION_SEGMENTS as T, FADE_TIMEOUT as R } from "./animated-avatar-message-constants.js";
-import { Wrapper as k, MessageWrapper as B } from "./animated-avatar-message-styled.js";
-import G from "./animated-text/animated-text.js";
-const K = {
+import { jsxs as b, jsx as l } from "react/jsx-runtime";
+import { memo as N, useRef as T, useState as $, useCallback as R, useImperativeHandle as V, useMemo as _, useEffect as o } from "react";
+import { LOTTIE as O } from "../../../../assets/lottie/lottie.js";
+import x from "../../../ui/layout/flex-view.js";
+import j from "../../../ui/lottie-animation/lottie-animation.js";
+import { ANIMATION_SEGMENTS as E, FADE_TIMEOUT as L } from "./animated-avatar-message-constants.js";
+import { Wrapper as C, MessageWrapper as D } from "./animated-avatar-message-styled.js";
+import F from "./animated-text/animated-text.js";
+const X = {
   autoplay: !1,
   loop: !1,
   renderer: "canvas"
-}, U = ({
-  message: p,
-  confirmationMessage: r,
-  onShowContent: s,
-  confirmationFrames: $,
-  completionFrames: o,
-  isConfirmationVisible: d,
-  ref: b,
-  height: N = "auto",
-  idleFrames: A
+}, k = ({
+  message: n,
+  confirmationMessage: e,
+  onShowContent: t,
+  confirmationFrames: c,
+  isConfirmationVisible: m,
+  ref: M,
+  height: h = "auto"
 }) => {
-  const l = c(null), u = c(null), [v, n] = y(!1), [I, x] = y(!1), [h, M] = y(d), g = c(!1), m = c(A), i = E(() => {
-    const e = l.current;
-    if (!e) return;
-    e.removeEventListener("complete", i), e.setLoop(!0);
-    const t = g.current && m.current ? m.current : T.IDLE;
-    e.playSegments(t, !0);
-  }, []), P = E(() => {
-    const e = l.current;
-    if (!e) return;
-    e.playSegments(T.INITIAL, !0);
-    const t = () => {
-      e.removeEventListener("complete", t), n(!0), s(!0), e.playSegments(T.FINAL, !0), e.addEventListener("complete", i);
+  const r = T(null), u = T(null), [p, i] = $(!1), [f, d] = $(m), v = R(() => {
+    var a, A;
+    (a = r.current) == null || a.playSegments(E.INITIAL, !0);
+    const s = () => {
+      var g, I;
+      (g = r.current) == null || g.removeEventListener("complete", s), i(!0), t(!0), (I = r.current) == null || I.playSegments(E.FINAL, !0);
     };
-    e.addEventListener("complete", t);
-  }, [s, i]), L = E(
-    (e) => {
-      const t = l.current;
-      t && (t.setLoop(!1), t.playSegments(e, !0), t.addEventListener("complete", i));
-    },
-    [i]
-  );
-  O(
-    b,
+    (A = r.current) == null || A.addEventListener("complete", s);
+  }, [t]);
+  V(
+    M,
     () => ({
-      fadeOutMessageAndPlayCompletion: () => new Promise((e) => {
-        s(!1), x(!1), o && I && (g.current = !1, L(o)), u.current = setTimeout(() => {
-          n(!1), e();
-        }, R);
+      fadeOutMessage: () => new Promise((s) => {
+        t(!1), u.current = setTimeout(() => {
+          i(!1), s();
+        }, L);
       }),
-      playConfirmationFrames: () => new Promise((e) => {
-        I || (o && x(!0), g.current = !!m.current, L($)), r && n(!1), u.current = setTimeout(() => {
-          r && M(!0), n(!0), e();
-        }, R);
+      playConfirmationFrames: () => new Promise((s) => {
+        var a;
+        (a = r.current) == null || a.playSegments(c, !0), e && i(!1), u.current = setTimeout(() => {
+          e && d(!0), i(!0), s();
+        }, L);
       })
     }),
-    [
-      o,
-      $,
-      r,
-      I,
-      s,
-      L
-    ]
+    [c, e, t]
   );
-  const V = S(() => h && r ? r : p, [h, r, p]);
-  return f(() => {
-    m.current = A;
-  }, [A]), f(() => () => {
+  const y = _(() => f && e ? e : n, [f, e, n]);
+  return o(() => () => {
     u.current && clearTimeout(u.current);
-  }, []), f(() => {
-    M(d);
-  }, [d]), f(() => {
-    n(!0), s(!0);
-  }, [p, s]), /* @__PURE__ */ _(
-    k,
+  }, []), o(() => {
+    d(m);
+  }, [m]), o(() => {
+    i(!0), t(!0);
+  }, [n, t]), /* @__PURE__ */ b(
+    C,
     {
       $flexDirection: "row",
       $justifyContent: "flex-start",
       $alignItems: "center",
       $flexColumnGapX: 0.5,
-      $height: N,
+      $height: h,
       children: [
-        /* @__PURE__ */ a(C, { $width: 147, $height: 147, children: /* @__PURE__ */ a(
-          X,
+        /* @__PURE__ */ l(x, { $width: 80, $height: 80, children: /* @__PURE__ */ l(
+          j,
           {
-            width: 147,
-            height: 147,
-            src: j.ANIMATED_AVATAR,
-            ref: l,
-            onRender: P,
-            settings: K
+            width: 80,
+            height: 80,
+            src: O.ANIMATED_AVATAR,
+            ref: r,
+            onRender: v,
+            settings: X
           }
         ) }),
-        v && /* @__PURE__ */ a(C, { $flex: 1, children: /* @__PURE__ */ a(
-          B,
+        p && /* @__PURE__ */ l(x, { $flex: 1, children: /* @__PURE__ */ l(
+          D,
           {
             $gutterX: 1,
             $gapX: 0.5,
             $background: "BLACK_3",
             $borderColor: "BLACK_5",
-            isVisible: v,
-            children: /* @__PURE__ */ a(G, { text: V, speed: 20 })
+            isVisible: p,
+            children: /* @__PURE__ */ l(F, { text: y, speed: 20 })
           }
         ) })
       ]
     }
   );
-}, Y = D(U);
+}, U = N(k);
 export {
-  Y as default
+  U as default
 };
 //# sourceMappingURL=animated-avatar-message.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"animated-avatar-message.js","sources":["../../../../../src/features/auth/comps/animated-avatar-message/animated-avatar-message.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport type { IAnimatedAvatarMessageProps } from './animated-avatar-message-types';\n\nimport {\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  useState,\n  useEffect,\n  type FC,\n  useMemo,\n  memo,\n} from 'react';\n\nimport { LOTTIE } from '../../../../assets/lottie/lottie';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport { ANIMATION_SEGMENTS, FADE_TIMEOUT } from './animated-avatar-message-constants';\nimport * as Styled from './animated-avatar-message-styled';\nimport AnimatedText from './animated-text/animated-text';\n\nconst animationSettings = {\n  autoplay: false,\n  loop: false,\n  renderer: 'canvas',\n};\n\nconst AnimatedAvatarMessage: FC<IAnimatedAvatarMessageProps> = ({\n  message,\n  confirmationMessage,\n  onShowContent,\n  confirmationFrames,\n  completionFrames,\n  isConfirmationVisible,\n  ref,\n  height = 'auto',\n  idleFrames,\n}) => {\n  const animationRef = useRef<ILottieAnimationRef | null>(null);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const [isMessageVisible, setIsMessageVisible] = useState(false);\n  const [isConfirmationAnimationPlayed, setIsConfirmationAnimationPlayed] = useState(false);\n  const [isConfirmationMessageVisible, setIsConfirmationMessageVisible] =\n    useState(isConfirmationVisible);\n  const shouldUseCustomIdleFrames = useRef(false);\n  const idleFramesRef = useRef(idleFrames);\n\n  const playIdleLoop = useCallback(() => {\n    const animation = animationRef.current;\n\n    if (!animation) return;\n\n    animation.removeEventListener('complete', playIdleLoop);\n    animation.setLoop(true);\n\n    const idleSegment =\n      shouldUseCustomIdleFrames.current && idleFramesRef.current\n        ? idleFramesRef.current\n        : ANIMATION_SEGMENTS.IDLE;\n\n    animation.playSegments(idleSegment, true);\n  }, []);\n\n  const handleLottieRender = useCallback(() => {\n    const animation = animationRef.current;\n\n    if (!animation) return;\n\n    animation.playSegments(ANIMATION_SEGMENTS.INITIAL, true);\n\n    const onComplete = () => {\n      animation.removeEventListener('complete', onComplete);\n      setIsMessageVisible(true);\n      onShowContent(true);\n      animation.playSegments(ANIMATION_SEGMENTS.FINAL, true);\n      animation.addEventListener('complete', playIdleLoop);\n    };\n\n    animation.addEventListener('complete', onComplete);\n  }, [onShowContent, playIdleLoop]);\n\n  const playAnimation = useCallback(\n    (frames: [number, number]) => {\n      const animation = animationRef.current;\n\n      if (!animation) return;\n\n      animation.setLoop(false);\n      animation.playSegments(frames, true);\n      animation.addEventListener('complete', playIdleLoop);\n    },\n    [playIdleLoop],\n  );\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      fadeOutMessageAndPlayCompletion: () =>\n        new Promise<void>(resolve => {\n          onShowContent(false);\n          setIsConfirmationAnimationPlayed(false);\n          if (completionFrames && isConfirmationAnimationPlayed) {\n            shouldUseCustomIdleFrames.current = false;\n            playAnimation(completionFrames);\n          }\n          timeoutRef.current = setTimeout(() => {\n            setIsMessageVisible(false);\n            resolve();\n          }, FADE_TIMEOUT);\n        }),\n\n      playConfirmationFrames: () =>\n        new Promise<void>(resolve => {\n          if (!isConfirmationAnimationPlayed) {\n            if (completionFrames) {\n              setIsConfirmationAnimationPlayed(true);\n            }\n            shouldUseCustomIdleFrames.current = !!idleFramesRef.current;\n            playAnimation(confirmationFrames);\n          }\n\n          if (confirmationMessage) {\n            setIsMessageVisible(false);\n          }\n          timeoutRef.current = setTimeout(() => {\n            if (confirmationMessage) {\n              setIsConfirmationMessageVisible(true);\n            }\n            setIsMessageVisible(true);\n            resolve();\n          }, FADE_TIMEOUT);\n        }),\n    }),\n    [\n      completionFrames,\n      confirmationFrames,\n      confirmationMessage,\n      isConfirmationAnimationPlayed,\n      onShowContent,\n      playAnimation,\n    ],\n  );\n\n  const displayMessage = useMemo(() => {\n    return isConfirmationMessageVisible && confirmationMessage ? confirmationMessage : message;\n  }, [isConfirmationMessageVisible, confirmationMessage, message]);\n\n  useEffect(() => {\n    idleFramesRef.current = idleFrames;\n  }, [idleFrames]);\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    setIsConfirmationMessageVisible(isConfirmationVisible);\n  }, [isConfirmationVisible]);\n\n  useEffect(() => {\n    setIsMessageVisible(true);\n    onShowContent(true);\n  }, [message, onShowContent]);\n\n  return (\n    <Styled.Wrapper\n      $flexDirection=\"row\"\n      $justifyContent=\"flex-start\"\n      $alignItems=\"center\"\n      $flexColumnGapX={0.5}\n      $height={height}\n    >\n      <FlexView $width={147} $height={147}>\n        <LottieAnimation\n          width={147}\n          height={147}\n          src={LOTTIE.ANIMATED_AVATAR}\n          ref={animationRef}\n          onRender={handleLottieRender}\n          settings={animationSettings}\n        />\n      </FlexView>\n      {isMessageVisible && (\n        <FlexView $flex={1}>\n          <Styled.MessageWrapper\n            $gutterX={1}\n            $gapX={0.5}\n            $background=\"BLACK_3\"\n            $borderColor=\"BLACK_5\"\n            isVisible={isMessageVisible}\n          >\n            <AnimatedText text={displayMessage} speed={20} />\n          </Styled.MessageWrapper>\n        </FlexView>\n      )}\n    </Styled.Wrapper>\n  );\n};\n\nexport default memo(AnimatedAvatarMessage);\n"],"names":["animationSettings","AnimatedAvatarMessage","message","confirmationMessage","onShowContent","confirmationFrames","completionFrames","isConfirmationVisible","ref","height","idleFrames","animationRef","useRef","timeoutRef","isMessageVisible","setIsMessageVisible","useState","isConfirmationAnimationPlayed","setIsConfirmationAnimationPlayed","isConfirmationMessageVisible","setIsConfirmationMessageVisible","shouldUseCustomIdleFrames","idleFramesRef","playIdleLoop","useCallback","animation","idleSegment","ANIMATION_SEGMENTS","handleLottieRender","onComplete","playAnimation","frames","useImperativeHandle","resolve","FADE_TIMEOUT","displayMessage","useMemo","useEffect","jsxs","Styled.Wrapper","jsx","FlexView","LottieAnimation","LOTTIE","Styled.MessageWrapper","AnimatedText","animatedAvatarMessage","memo"],"mappings":"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"}
+{"version":3,"file":"animated-avatar-message.js","sources":["../../../../../src/features/auth/comps/animated-avatar-message/animated-avatar-message.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport type { IAnimatedAvatarMessageProps } from './animated-avatar-message-types';\n\nimport {\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  useState,\n  useEffect,\n  type FC,\n  useMemo,\n  memo,\n} from 'react';\n\nimport { LOTTIE } from '../../../../assets/lottie/lottie';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport { ANIMATION_SEGMENTS, FADE_TIMEOUT } from './animated-avatar-message-constants';\nimport * as Styled from './animated-avatar-message-styled';\nimport AnimatedText from './animated-text/animated-text';\n\nconst animationSettings = {\n  autoplay: false,\n  loop: false,\n  renderer: 'canvas',\n};\n\nconst AnimatedAvatarMessage: FC<IAnimatedAvatarMessageProps> = ({\n  message,\n  confirmationMessage,\n  onShowContent,\n  confirmationFrames,\n  isConfirmationVisible,\n  ref,\n  height = 'auto',\n}) => {\n  const animationRef = useRef<ILottieAnimationRef | null>(null);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const [isMessageVisible, setIsMessageVisible] = useState(false);\n  const [isConfirmationMessageVisible, setIsConfirmationMessageVisible] =\n    useState(isConfirmationVisible);\n\n  const handleLottieRender = useCallback(() => {\n    animationRef.current?.playSegments(ANIMATION_SEGMENTS.INITIAL, true);\n    const onComplete = () => {\n      animationRef.current?.removeEventListener('complete', onComplete);\n      setIsMessageVisible(true);\n      onShowContent(true);\n\n      animationRef.current?.playSegments(ANIMATION_SEGMENTS.FINAL, true);\n    };\n\n    animationRef.current?.addEventListener('complete', onComplete);\n  }, [onShowContent]);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      fadeOutMessage: () =>\n        new Promise<void>(resolve => {\n          onShowContent(false);\n          timeoutRef.current = setTimeout(() => {\n            setIsMessageVisible(false);\n            resolve();\n          }, FADE_TIMEOUT);\n        }),\n\n      playConfirmationFrames: () =>\n        new Promise<void>(resolve => {\n          animationRef.current?.playSegments(confirmationFrames, true);\n          if (confirmationMessage) {\n            setIsMessageVisible(false);\n          }\n          timeoutRef.current = setTimeout(() => {\n            if (confirmationMessage) {\n              setIsConfirmationMessageVisible(true);\n            }\n            setIsMessageVisible(true);\n            resolve();\n          }, FADE_TIMEOUT);\n        }),\n    }),\n    [confirmationFrames, confirmationMessage, onShowContent],\n  );\n\n  const displayMessage = useMemo(() => {\n    return isConfirmationMessageVisible && confirmationMessage ? confirmationMessage : message;\n  }, [isConfirmationMessageVisible, confirmationMessage, message]);\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    setIsConfirmationMessageVisible(isConfirmationVisible);\n  }, [isConfirmationVisible]);\n\n  useEffect(() => {\n    setIsMessageVisible(true);\n    onShowContent(true);\n  }, [message, onShowContent]);\n\n  return (\n    <Styled.Wrapper\n      $flexDirection=\"row\"\n      $justifyContent=\"flex-start\"\n      $alignItems=\"center\"\n      $flexColumnGapX={0.5}\n      $height={height}\n    >\n      <FlexView $width={80} $height={80}>\n        <LottieAnimation\n          width={80}\n          height={80}\n          src={LOTTIE.ANIMATED_AVATAR}\n          ref={animationRef}\n          onRender={handleLottieRender}\n          settings={animationSettings}\n        />\n      </FlexView>\n      {isMessageVisible && (\n        <FlexView $flex={1}>\n          <Styled.MessageWrapper\n            $gutterX={1}\n            $gapX={0.5}\n            $background=\"BLACK_3\"\n            $borderColor=\"BLACK_5\"\n            isVisible={isMessageVisible}\n          >\n            <AnimatedText text={displayMessage} speed={20} />\n          </Styled.MessageWrapper>\n        </FlexView>\n      )}\n    </Styled.Wrapper>\n  );\n};\n\nexport default memo(AnimatedAvatarMessage);\n"],"names":["animationSettings","AnimatedAvatarMessage","message","confirmationMessage","onShowContent","confirmationFrames","isConfirmationVisible","ref","height","animationRef","useRef","timeoutRef","isMessageVisible","setIsMessageVisible","useState","isConfirmationMessageVisible","setIsConfirmationMessageVisible","handleLottieRender","useCallback","_a","ANIMATION_SEGMENTS","onComplete","_b","useImperativeHandle","resolve","FADE_TIMEOUT","displayMessage","useMemo","useEffect","jsxs","Styled.Wrapper","jsx","FlexView","LottieAnimation","LOTTIE","Styled.MessageWrapper","AnimatedText","animatedAvatarMessage","memo"],"mappings":"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"}

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

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

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

@@ -1 +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 useClickHandler from '../../../ui/hooks/use-click-handler';\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  analyticsLabel,\n  analyticsProps,\n}) => {\n  const [isHovered, setHovered] = useState(false);\n  const [highlightPhase, setHighlightPhase] = useState(false);\n  const { colors } = useTheme();\n  const shouldAnimate = !!animatedLabel;\n\n  const handleSelect = useCallback(() => {\n    onClick(id);\n  }, [id, onClick]);\n\n  const { handleClick } = useClickHandler({ label, analyticsLabel, analyticsProps }, handleSelect);\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 handleMouseEnter = useCallback(() => setHovered(true), []);\n  const handleMouseLeave = useCallback(() => setHovered(false), []);\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","analyticsLabel","analyticsProps","isHovered","setHovered","useState","highlightPhase","setHighlightPhase","colors","useTheme","shouldAnimate","handleSelect","useCallback","handleClick","useClickHandler","useEffect","interval","prev","handleMouseEnter","handleMouseLeave","showLottie","borderColor","textColor","currentLabel","ButtonContent","jsx","Styled.Wrapper","jsxs","FlexView","Styled.IconWrapper","LottieAnimation","Styled.Label","ArrowTooltip","pillButton","memo"],"mappings":";;;;;;;;AAWA,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;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AACF,MAAM;AACJ,QAAM,CAACC,GAAWC,CAAU,IAAIC,EAAS,EAAK,GACxC,CAACC,GAAgBC,CAAiB,IAAIF,EAAS,EAAK,GACpD,EAAE,QAAAG,MAAWC,KACbC,IAAgB,CAAC,CAACd,GAElBe,IAAeC,EAAY,MAAM;AACrC,IAAAd,EAAQN,CAAE;AAAA,EAAA,GACT,CAACA,GAAIM,CAAO,CAAC,GAEV,EAAE,aAAAe,EAAgB,IAAAC,EAAgB,EAAE,OAAArB,GAAO,gBAAAQ,GAAgB,gBAAAC,KAAkBS,CAAY;AAE/F,EAAAI,EAAU,MAAM;AACV,QAAA,CAACL,KAAiBf,EAAU;AAE1B,UAAAqB,IAAW,YAAY,MAAM;AACf,MAAAT,EAAA,CAAAU,MAAQ,CAACA,CAAI;AAAA,OAC9B,GAAI;AAEA,WAAA,MAAM,cAAcD,CAAQ;AAAA,EAAA,GAClC,CAACrB,GAAUe,CAAa,CAAC;AAE5B,QAAMQ,IAAmBN,EAAY,MAAMR,EAAW,EAAI,GAAG,CAAA,CAAE,GACzDe,IAAmBP,EAAY,MAAMR,EAAW,EAAK,GAAG,CAAA,CAAE,GAE1DgB,IAAa,CAAC,CAACvB,KAAQ,CAACF,MAAae,KAAiBhB,KAAYS,IAElEkB,IAAcb,EAAOF,IAAiB,aAAa,SAAS,GAC5DgB,IAAYd,EAAOF,KAAkB,CAACZ,IAAW,aAAa,SAAS,GACvE6B,IAAejB,IAAiBV,IAAgBH,GAIhD+B,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,UAAAhC;AAAA,MACA,UAAAC;AAAA,MACA,SAASkB;AAAA,MACT,cAAcK;AAAA,MACd,cAAcC;AAAA,MACd,OAAAnB;AAAA,MACA,aAAAqB;AAAA,MAEA,UAAA,gBAAAM;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,gBAAe;AAAA,UACf,aAAY;AAAA,UACZ,iBAAgB;AAAA,UAChB,iBAAiB;AAAA,UAEhB,UAAA;AAAA,YAAA/B,uBACEgC,GAAA,EAAmB,SAAS,GAAG,UAAU,GAAG,aAAaT,GACxD,4BAACU,GAAgB,EAAA,KAAKjC,GAAM,UAAUP,EAAgB,CAAA,GACxD;AAAA,YAEF,gBAAAmC;AAAA,cAACM;AAAAA,cAAA;AAAA,gBAEC,mBAAmBX,KAAc,CAACvB;AAAA,gBAClC,UAAAH;AAAA,gBACA,UAAAC;AAAA,gBACA,WA5BaW,IAAkBZ,IAAW,aAAa,QADnCA,IAAW,aAAa;AAAA,gBA8B5C,WAAA4B;AAAA,gBAEC,UAAAC;AAAA,cAAA;AAAA,cAPIA;AAAA,YAQP;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIG,SAAA5B,KAAYI,IACjB,gBAAA0B,EAACO,GAAa,EAAA,UAAS,WAAU,aAAajC,GAAS,UAAS,OAC7D,UAAAyB,EAAA,CACH,IAEAA;AAEJ,GAEeS,KAAAC,EAAK3C,CAAU;"}
+{"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,11 +1,11 @@
-import { jsx as r, jsxs as n, Fragment as w } from "react/jsx-runtime";
-import { memo as A, useCallback as f } from "react";
-import I from "../../../ui/buttons/button/button.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 E } from "./hooks/use-resend-timer.js";
-const H = ({
+import { useResendTimer as A } from "./hooks/use-resend-timer.js";
+const I = ({
   onResendOTP: l,
   onResendVoiceOTP: i,
   timerSeconds: h = 15,
@@ -14,20 +14,18 @@ const H = ({
   renderAs: x = "text",
   width: k,
   textButtonColor: s = "WHITE_T_60",
-  size: d = "small",
-  analyticsLabel: _,
-  analyticsProps: C
+  size: d = "small"
 }) => {
-  const { canResend: c, resetTimer: t, timeLeft: u } = E({
+  const { canResend: c, resetTimer: t, timeLeft: u } = A({
     initialSeconds: h
   }), b = f(() => {
     l == null || l(), t();
-  }, [l, t]), g = f(() => {
+  }, [l, t]), _ = f(() => {
     i == null || i(), t();
   }, [i, t]);
   if (x === "submit")
     return /* @__PURE__ */ r(
-      I,
+      w,
       {
         size: d,
         renderAs: "secondary-dark",
@@ -47,12 +45,10 @@ const H = ({
         label: "Resend",
         size: e ? "small" : "regular",
         color: s,
-        onClick: b,
-        analyticsLabel: _,
-        analyticsProps: C
+        onClick: b
       }
     ),
-    p && /* @__PURE__ */ n(w, { children: [
+    p && /* @__PURE__ */ n(C, { children: [
       /* @__PURE__ */ r(a, { $renderAs: e ? "ub3" : "ub2", $color: s, children: "or" }),
       /* @__PURE__ */ r(m, { $width: 116, children: /* @__PURE__ */ r(
         $,
@@ -60,7 +56,7 @@ const H = ({
           label: "Get code via call",
           size: e ? "small" : "regular",
           color: s,
-          onClick: g
+          onClick: _
         }
       ) })
     ] })
@@ -69,8 +65,8 @@ const H = ({
     " ",
     /* @__PURE__ */ r(a, { $renderAs: e ? "ub3-bold" : "ub2-bold", $inline: !0, $color: "WHITE_T_60", children: u })
   ] }) }) });
-}, X = A(H);
+}, F = g(I);
 export {
-  X 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  textButtonColor = 'WHITE_T_60',\n  size = 'small',\n  analyticsLabel,\n  analyticsProps,\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            analyticsLabel={analyticsLabel}\n            analyticsProps={analyticsProps}\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","analyticsLabel","analyticsProps","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;AAAA,EACP,gBAAAC;AAAA,EACA,gBAAAC;AACF,MAAM;AACJ,QAAM,EAAE,WAAAC,GAAW,YAAAC,GAAY,UAAAC,EAAA,IAAaC,EAAe;AAAA,IACzD,gBAAgBZ;AAAA,EAAA,CACjB,GAEKa,IAAoBC,EAAY,MAAM;AAC5B,IAAAhB,KAAA,QAAAA,KACHY;EAAA,GACV,CAACZ,GAAaY,CAAU,CAAC,GAEtBK,IAAyBD,EAAY,MAAM;AAC5B,IAAAf,KAAA,QAAAA,KACRW;EAAA,GACV,CAACX,GAAkBW,CAAU,CAAC;AAEjC,MAAIP,MAAa;AAEb,WAAA,gBAAAa;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAAX;AAAA,QACA,UAAS;AAAA,QACT,MAAK;AAAA,QACL,OAAOG,IAAY,WAAW,aAAaE,CAAQ;AAAA,QACnD,OAAAP;AAAA,QACA,SAASS;AAAA,QACT,UAAU,CAACJ,KAAaP;AAAA,MAAA;AAAA,IAAA;AAK9B,QAAMgB,IAAeZ,MAAS;AAE9B,SACG,gBAAAU,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,UAAAnB;AAAA,QACA,OAAM;AAAA,QACN,MAAMgB,IAAe,UAAU;AAAA,QAC/B,OAAOb;AAAA,QACP,SAASQ;AAAA,QACT,gBAAAN;AAAA,QACA,gBAAAC;AAAA,MAAA;AAAA,IACF;AAAA,IACCP,KAEG,gBAAAmB,EAAAE,GAAA,EAAA,UAAA;AAAA,MAAA,gBAAAN,EAACO,KAAK,WAAWL,IAAe,QAAQ,OAAO,QAAQb,GAAiB,UAExE,KAAA,CAAA;AAAA,MACA,gBAAAW,EAACG,GAAS,EAAA,QAAQ,KAChB,UAAA,gBAAAH;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,MAAMH,IAAe,UAAU;AAAA,UAC/B,OAAOb;AAAA,UACP,SAASU;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,IAAA,GACF;AAAA,EAAA,EAEJ,CAAA,sBAlCCI,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,EA6BJ,CAAA;AAEJ,GAEea,IAAAC,EAAK5B,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.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"selectable-info-card.js","sources":["../../../../../src/features/auth/comps/selectable-info-card/selectable-info-card.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport type { ISelectableInfoCardProps } from './selectable-info-card-types';\n\nimport { useCallback, useMemo, useRef, memo } from 'react';\n\nimport useClickHandler from '../../../ui/hooks/use-click-handler';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport Text from '../../../ui/text/text';\nimport * as Styled from './selectable-info-card-styled';\n\nconst SelectableInfoCard = ({\n  id,\n  title,\n  description,\n  icon,\n  selected,\n  onClick,\n  analyticsLabel,\n  analyticsProps,\n}: ISelectableInfoCardProps) => {\n  const animationRef = useRef<ILottieAnimationRef | null>(null);\n\n  const handleSelect = useCallback(() => {\n    onClick(id);\n  }, [id, onClick]);\n\n  const { handleClick } = useClickHandler(\n    { label: title, analyticsLabel, analyticsProps },\n    handleSelect,\n  );\n\n  const handleOnMouseEnter = useCallback(() => {\n    animationRef.current?.play();\n  }, []);\n\n  const handleOnMouseLeave = useCallback(() => {\n    if (selected) return;\n    animationRef.current?.stop();\n  }, [selected]);\n\n  const renderSettings = useMemo(\n    () => ({\n      autoplay: selected,\n      loop: true,\n      renderer: 'canvas',\n    }),\n    [selected],\n  );\n\n  return (\n    <Styled.Wrapper\n      $gutterX={1}\n      $gapX={1}\n      $borderColor=\"WHITE\"\n      $flexDirection=\"row\"\n      $background={selected ? 'WHITE_1' : 'BLACK_1'}\n      onMouseEnter={handleOnMouseEnter}\n      onMouseLeave={handleOnMouseLeave}\n      onClick={handleClick}\n      $flexColumnGapX={0.5}\n      selected={selected}\n      $alignItems=\"center\"\n    >\n      {icon && (\n        <LottieAnimation\n          src={icon}\n          ref={animationRef}\n          settings={renderSettings}\n          width={40}\n          height={40}\n        />\n      )}\n\n      <FlexView>\n        <Text $renderAs=\"ab3\" $color={selected ? 'BLACK_1' : 'WHITE'}>\n          {title}\n        </Text>\n        <Text $renderAs=\"ub3\" $color={selected ? 'BLACK_T_60' : 'WHITE_T_60'}>\n          {description}\n        </Text>\n      </FlexView>\n    </Styled.Wrapper>\n  );\n};\n\nexport default memo(SelectableInfoCard);\n"],"names":["SelectableInfoCard","id","title","description","icon","selected","onClick","analyticsLabel","analyticsProps","animationRef","useRef","handleSelect","useCallback","handleClick","useClickHandler","handleOnMouseEnter","_a","handleOnMouseLeave","renderSettings","useMemo","jsxs","Styled.Wrapper","jsx","LottieAnimation","FlexView","Text","selectableInfoCard","memo"],"mappings":";;;;;;;AAWA,MAAMA,IAAqB,CAAC;AAAA,EAC1B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AACF,MAAgC;AACxB,QAAAC,IAAeC,EAAmC,IAAI,GAEtDC,IAAeC,EAAY,MAAM;AACrC,IAAAN,EAAQL,CAAE;AAAA,EAAA,GACT,CAACA,GAAIK,CAAO,CAAC,GAEV,EAAE,aAAAO,MAAgBC;AAAA,IACtB,EAAE,OAAOZ,GAAO,gBAAAK,GAAgB,gBAAAC,EAAe;AAAA,IAC/CG;AAAA,EAAA,GAGII,IAAqBH,EAAY,MAAM;;AAC3C,KAAAI,IAAAP,EAAa,YAAb,QAAAO,EAAsB;AAAA,EACxB,GAAG,CAAE,CAAA,GAECC,IAAqBL,EAAY,MAAM;;AAC3C,IAAIP,MACJW,IAAAP,EAAa,YAAb,QAAAO,EAAsB;AAAA,EAAK,GAC1B,CAACX,CAAQ,CAAC,GAEPa,IAAiBC;AAAA,IACrB,OAAO;AAAA,MACL,UAAUd;AAAA,MACV,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,IAEZ,CAACA,CAAQ;AAAA,EAAA;AAIT,SAAA,gBAAAe;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,OAAO;AAAA,MACP,cAAa;AAAA,MACb,gBAAe;AAAA,MACf,aAAahB,IAAW,YAAY;AAAA,MACpC,cAAcU;AAAA,MACd,cAAcE;AAAA,MACd,SAASJ;AAAA,MACT,iBAAiB;AAAA,MACjB,UAAAR;AAAA,MACA,aAAY;AAAA,MAEX,UAAA;AAAA,QACCD,KAAA,gBAAAkB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAKnB;AAAA,YACL,KAAKK;AAAA,YACL,UAAUS;AAAA,YACV,OAAO;AAAA,YACP,QAAQ;AAAA,UAAA;AAAA,QACV;AAAA,0BAGDM,GACC,EAAA,UAAA;AAAA,UAAA,gBAAAF,EAACG,KAAK,WAAU,OAAM,QAAQpB,IAAW,YAAY,SAClD,UACHH,EAAA,CAAA;AAAA,UACA,gBAAAoB,EAACG,KAAK,WAAU,OAAM,QAAQpB,IAAW,eAAe,cACrD,UACHF,EAAA,CAAA;AAAA,QAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEeuB,IAAAC,EAAK3B,CAAkB;"}
+{"version":3,"file":"selectable-info-card.js","sources":["../../../../../src/features/auth/comps/selectable-info-card/selectable-info-card.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport type { ISelectableInfoCardProps } from './selectable-info-card-types';\n\nimport { useCallback, useMemo, useRef, memo } from 'react';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport Text from '../../../ui/text/text';\nimport * as Styled from './selectable-info-card-styled';\n\nconst SelectableInfoCard = ({\n  id,\n  title,\n  description,\n  icon,\n  selected,\n  onClick,\n}: ISelectableInfoCardProps) => {\n  const animationRef = useRef<ILottieAnimationRef | null>(null);\n\n  const handleClick = useCallback(() => {\n    onClick(id);\n  }, [id, onClick]);\n\n  const handleOnMouseEnter = useCallback(() => {\n    animationRef.current?.play();\n  }, []);\n\n  const handleOnMouseLeave = useCallback(() => {\n    if (selected) return;\n    animationRef.current?.stop();\n  }, [selected]);\n\n  const renderSettings = useMemo(\n    () => ({\n      autoplay: selected,\n      loop: true,\n      renderer: 'canvas',\n    }),\n    [selected],\n  );\n\n  return (\n    <Styled.Wrapper\n      $gutterX={1}\n      $gapX={1}\n      $borderColor=\"WHITE\"\n      $flexDirection=\"row\"\n      $background={selected ? 'WHITE_1' : 'BLACK_1'}\n      onMouseEnter={handleOnMouseEnter}\n      onMouseLeave={handleOnMouseLeave}\n      onClick={handleClick}\n      $flexColumnGapX={0.5}\n      selected={selected}\n      $alignItems=\"center\"\n    >\n      {icon && (\n        <LottieAnimation\n          src={icon}\n          ref={animationRef}\n          settings={renderSettings}\n          width={40}\n          height={40}\n        />\n      )}\n\n      <FlexView>\n        <Text $renderAs=\"ab3\" $color={selected ? 'BLACK_1' : 'WHITE'}>\n          {title}\n        </Text>\n        <Text $renderAs=\"ub3\" $color={selected ? 'BLACK_T_60' : 'WHITE_T_60'}>\n          {description}\n        </Text>\n      </FlexView>\n    </Styled.Wrapper>\n  );\n};\n\nexport default memo(SelectableInfoCard);\n"],"names":["SelectableInfoCard","id","title","description","icon","selected","onClick","animationRef","useRef","handleClick","useCallback","handleOnMouseEnter","_a","handleOnMouseLeave","renderSettings","useMemo","jsxs","Styled.Wrapper","jsx","LottieAnimation","FlexView","Text","selectableInfoCard","memo"],"mappings":";;;;;;AAUA,MAAMA,IAAqB,CAAC;AAAA,EAC1B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AACF,MAAgC;AACxB,QAAAC,IAAeC,EAAmC,IAAI,GAEtDC,IAAcC,EAAY,MAAM;AACpC,IAAAJ,EAAQL,CAAE;AAAA,EAAA,GACT,CAACA,GAAIK,CAAO,CAAC,GAEVK,IAAqBD,EAAY,MAAM;;AAC3C,KAAAE,IAAAL,EAAa,YAAb,QAAAK,EAAsB;AAAA,EACxB,GAAG,CAAE,CAAA,GAECC,IAAqBH,EAAY,MAAM;;AAC3C,IAAIL,MACJO,IAAAL,EAAa,YAAb,QAAAK,EAAsB;AAAA,EAAK,GAC1B,CAACP,CAAQ,CAAC,GAEPS,IAAiBC;AAAA,IACrB,OAAO;AAAA,MACL,UAAUV;AAAA,MACV,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,IAEZ,CAACA,CAAQ;AAAA,EAAA;AAIT,SAAA,gBAAAW;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,OAAO;AAAA,MACP,cAAa;AAAA,MACb,gBAAe;AAAA,MACf,aAAaZ,IAAW,YAAY;AAAA,MACpC,cAAcM;AAAA,MACd,cAAcE;AAAA,MACd,SAASJ;AAAA,MACT,iBAAiB;AAAA,MACjB,UAAAJ;AAAA,MACA,aAAY;AAAA,MAEX,UAAA;AAAA,QACCD,KAAA,gBAAAc;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAKf;AAAA,YACL,KAAKG;AAAA,YACL,UAAUO;AAAA,YACV,OAAO;AAAA,YACP,QAAQ;AAAA,UAAA;AAAA,QACV;AAAA,0BAGDM,GACC,EAAA,UAAA;AAAA,UAAA,gBAAAF,EAACG,KAAK,WAAU,OAAM,QAAQhB,IAAW,YAAY,SAClD,UACHH,EAAA,CAAA;AAAA,UACA,gBAAAgB,EAACG,KAAK,WAAU,OAAM,QAAQhB,IAAW,eAAe,cACrD,UACHF,EAAA,CAAA;AAAA,QAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEemB,IAAAC,EAAKvB,CAAkB;"}

package/dist/features/auth/comps/tabs/tab-tem/tab-item.js

@@ -13,10 +13,18 @@ const f = ({ tab: o, isSelected: e, onChange: r }) => {
       $flexDirection: "row",
       $alignItems: "center",
       $justifyContent: "center",
-      onClick: c,
       children: [
         t ? /* @__PURE__ */ n(a, { $selected: e, $iconPosition: i, children: /* @__PURE__ */ n(t, {}) }) : void 0,
-        /* @__PURE__ */ n($, { $renderAs: e ? "ub2-bold" : "ub2", $align: "center", $color: "WHITE", children: o.label })
+        /* @__PURE__ */ n(
+          $,
+          {
+            $renderAs: e ? "ub2-bold" : "ub2",
+            $align: "center",
+            onClick: c,
+            $color: "WHITE",
+            children: o.label
+          }
+        )
       ]
     }
   );