@cuemath/leap 3.2.15-beta-0.1 → 3.2.15-link.0

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

@@ -0,0 +1,65 @@
+import o, { keyframes as r, css as e } from "styled-components";
+import s from "../../../ui/layout/flex-view.js";
+import a from "../../../ui/text/text.js";
+const m = o(s)``, i = r`
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`, n = r`
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+`, f = o(s)`
+  position: relative;
+  top: -8px;
+  width: fit-content;
+  max-width: 90%;
+  border: 1px solid ${({ theme: t }) => t.colors.WHITE_T_15}
+  opacity: ${({ isVisible: t }) => t ? 1 : 0};
+  transform: ${({ isVisible: t }) => t ? "scale(1)" : "scale(0.95)"};
+  animation: ${({ isVisible: t }) => t ? e`
+          ${i} 0.4s ease forwards
+        ` : e`
+          ${n} 0.4s ease forwards
+        `};
+  transition: all 0.4s ease;
+  &::before {
+    content: '';
+    position: absolute;
+    left: -9px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 0;
+    height: 0;
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent;
+    border-right: 8px solid ${({ theme: t }) => t.colors.BLACK_5};
+  }
+`, p = r`
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+`, w = o(a)`
+  animation: ${p} 500ms steps(30, end);
+  overflow: hidden;
+  white-space: nowrap;
+`;
+export {
+  w as AnimatedText,
+  f as MessageWrapper,
+  m as Wrapper
+};
+//# sourceMappingURL=animated-avatar-message-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"animated-avatar-message-styled.js","sources":["../../../../../src/features/auth/comps/animated-avatar-message/animated-avatar-message-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\nexport const Wrapper = styled(FlexView)``;\n\nconst fadeInScale = keyframes`\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n`;\n\nconst fadeOutScale = keyframes`\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n`;\n\nexport const MessageWrapper = styled(FlexView)<{ isVisible: boolean }>`\n  position: relative;\n  top: -8px;\n  width: fit-content;\n  max-width: 90%;\n  border: 1px solid ${({ theme }) => theme.colors.WHITE_T_15}\n  opacity: ${({ isVisible }) => (isVisible ? 1 : 0)};\n  transform: ${({ isVisible }) => (isVisible ? 'scale(1)' : 'scale(0.95)')};\n  animation: ${({ isVisible }) =>\n    isVisible\n      ? css`\n          ${fadeInScale} 0.4s ease forwards\n        `\n      : css`\n          ${fadeOutScale} 0.4s ease forwards\n        `};\n  transition: all 0.4s ease;\n  &::before {\n    content: '';\n    position: absolute;\n    left: -9px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 0;\n    height: 0;\n    border-top: 8px solid transparent;\n    border-bottom: 8px solid transparent;\n    border-right: 8px solid ${({ theme }) => theme.colors.BLACK_5};\n  }\n`;\n\nconst typewriter = keyframes`\n  from {\n    width: 0;\n  }\n  to {\n    width: 100%;\n  }\n`;\n\nexport const AnimatedText = styled(Text)`\n  animation: ${typewriter} 500ms steps(30, end);\n  overflow: hidden;\n  white-space: nowrap;\n`;\n"],"names":["Wrapper","styled","FlexView","fadeInScale","keyframes","fadeOutScale","MessageWrapper","theme","isVisible","css","typewriter","AnimatedText","Text"],"mappings":";;;AAKa,MAAAA,IAAUC,EAAOC,CAAQ,KAEhCC,IAAcC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWdC,IAAeD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWRE,IAAiBL,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKvB,CAAC,EAAE,OAAAK,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA,aAC/C,CAAC,EAAE,WAAAC,EAAA,MAAiBA,IAAY,IAAI,CAAE;AAAA,eACpC,CAAC,EAAE,WAAAA,EAAA,MAAiBA,IAAY,aAAa,aAAc;AAAA,eAC3D,CAAC,EAAE,WAAAA,QACdA,IACIC;AAAA,YACIN,CAAW;AAAA,YAEfM;AAAA,YACIJ,CAAY;AAAA,SACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAYqB,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAI3DG,IAAaN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASNO,IAAeV,EAAOW,CAAI;AAAA,eACxBF,CAAU;AAAA;AAAA;AAAA;"}

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

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

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

@@ -0,0 +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';\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}) => {\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  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  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  return (\n    <Styled.Wrapper\n      $flexDirection=\"row\"\n      $justifyContent=\"flex-start\"\n      $alignItems=\"center\"\n      $flexColumnGapX={0.5}\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            <Styled.AnimatedText $renderAs=\"ab2\" $color=\"WHITE\" $whiteSpace=\"pre-line\">\n              {displayMessage}\n            </Styled.AnimatedText>\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","animationRef","useRef","timeoutRef","isMessageVisible","setIsMessageVisible","useState","isConfirmationMessageVisible","setIsConfirmationMessageVisible","useEffect","handleLottieRender","useCallback","_a","ANIMATION_SEGMENTS","onComplete","_b","useImperativeHandle","resolve","FADE_TIMEOUT","displayMessage","useMemo","jsxs","Styled.Wrapper","jsx","FlexView","LottieAnimation","LOTTIE","Styled.MessageWrapper","Styled.AnimatedText","animatedAvatarMessage","memo"],"mappings":"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"}

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

@@ -1,24 +1,29 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { memo as c } from "react";
-import { useTheme as h } from "styled-components";
-import a from "../../../ui/layout/flex-view.js";
-import { EDeviceType as s } from "../../../ui/theme/constants.js";
-import { Container as p, ContentWrapper as d } from "./auth-page-layout-styled.js";
-const f = ({ leftBlock: i, rightBlock: o, isFullWidth: t }) => {
-  const { device: m } = h(), e = m <= s.TABLET;
-  return /* @__PURE__ */ n(p, { $width: "100%", $height: "100%", $flexDirection: "row", children: [
+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(
-      d,
+      f,
       {
         $width: t || e ? "100%" : "50%",
         $background: "BLACK_1",
         children: i
       }
     ),
-    !e && o && !t && /* @__PURE__ */ r(a, { $width: "50%", $background: "BLACK_2", children: o })
+    !e && o && !t && /* @__PURE__ */ r(s, { $width: "50%", $background: m, children: o })
   ] });
-}, L = c(f);
+}, 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';\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> = ({ leftBlock, rightBlock, isFullWidth }) => {\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=\"BLACK_2\">\n          {rightBlock}\n        </FlexView>\n      )}\n    </Styled.Container>\n  );\n};\n\nexport default memo(AuthPageLayout);\n"],"names":["AuthPageLayout","leftBlock","rightBlock","isFullWidth","device","useTheme","isCompact","EDeviceType","jsxs","Styled.Container","jsx","Styled.ContentWrapper","FlexView","authPageLayout","memo"],"mappings":";;;;;;AASA,MAAMA,IAA2C,CAAC,EAAE,WAAAC,GAAW,YAAAC,GAAY,aAAAC,QAAkB;AACrF,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,QAAQR,KAAeG,IAAY,SAAS;AAAA,QAC5C,aAAY;AAAA,QAEX,UAAAL;AAAA,MAAA;AAAA,IACH;AAAA,IATmB,CAACK,KAAaJ,KAAc,CAACC,KAW7C,gBAAAO,EAAAE,GAAA,EAAS,QAAO,OAAM,aAAY,WAChC,UACHV,GAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,GAEeW,IAAAC,EAAKd,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,22 @@
+import r, { css as e } from "styled-components";
+import l from "../../../ui/layout/flex-view.js";
+const n = r(l)``, c = r.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 && e`
+      border-color: ${({ theme: t }) => t.colors.ORANGE_4};
+    `}
+`;
+export {
+  c as InputBox,
+  n 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`;\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;"}

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

@@ -0,0 +1,51 @@
+import { jsxs as l, jsx as m } from "react/jsx-runtime";
+import { memo as I, useRef as w, useCallback as p } from "react";
+import { LOTTIE as y } from "../../../../assets/lottie/lottie.js";
+import $ from "../../../ui/lottie-animation/lottie-animation.js";
+import { Wrapper as g, InputBox as E } from "./otp-input-styled.js";
+const T = ({
+  length: s = 4,
+  value: e,
+  onChange: c,
+  error: a,
+  isBusy: u = !1
+}) => {
+  const n = w([]), i = p(
+    (o, r) => {
+      var f;
+      if (!/^\d?$/.test(r)) return;
+      const t = e.split("");
+      t[o] = r, c(t.join("")), r && o < s - 1 && ((f = n.current[o + 1]) == null || f.focus());
+    },
+    [s, c, e]
+  ), h = p(
+    (o, r) => {
+      var t;
+      o.key === "Backspace" && !e[r] && r > 0 && ((t = n.current[r - 1]) == null || t.focus());
+    },
+    [e]
+  );
+  return /* @__PURE__ */ l(g, { $flexDirection: "row", $flexColumnGapX: 1, $alignItems: "center", children: [
+    Array.from({ length: s }).map((o, r) => /* @__PURE__ */ m(
+      E,
+      {
+        type: "text",
+        maxLength: 1,
+        value: e[r] || "",
+        onChange: (t) => i(r, t.target.value),
+        onFocus: (t) => t.target.select(),
+        onKeyDown: (t) => h(t, r),
+        $hasError: !!a,
+        ref: (t) => {
+          t && (n.current[r] = t);
+        }
+      },
+      r
+    )),
+    u && /* @__PURE__ */ m($, { src: y.SPINNER_WHITE, height: 24, width: 24 })
+  ] });
+}, R = I(T);
+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      if (!/^\\d?$/.test(val)) return;\n\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=\"text\"\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;;AAC9B,UAAI,CAAC,QAAQ,KAAKA,CAAG,EAAG;AAElB,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 a } from "styled-components";
+import e from "../../../ui/layout/flex-view.js";
+import $ from "../../../ui/text/text.js";
+const T = n.button`
+  ${({ selected: o, disabled: r, width: i, height: l, borderColor: s, theme: t }) => {
+  const c = r ? t.colors.WHITE_T_10 : o ? t.colors.WHITE_1 : t.colors.BLACK_1, p = r ? t.colors.WHITE_T_15 : s;
+  return a`
+      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 ${p};
+      width: ${i ? `${i}px` : "auto"};
+      height: ${l ? `${l}px` : "auto"};
+      background-color: ${c};
+      &:hover {
+        background-color: ${!o && !r ? t.colors.WHITE_T_10 : void 0};
+      }
+    `;
+}}
+`, d = n(e)`
+  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: i, textColor: l }) => `
+    color: ${r ? i.colors.WHITE_T_38 : o ? i.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;\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}px` : 'auto'};\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,OAAO,MAAM;AAAA,gBAC5BC,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,75 @@
+import { jsx as o, jsxs as H } from "react/jsx-runtime";
+import { memo as M, useState as x, useCallback as l, useEffect as _ } from "react";
+import { useTheme as j } from "styled-components";
+import y from "../../../ui/arrow-tooltip/arrow-tooltip.js";
+import B from "../../../ui/layout/flex-view.js";
+import O from "../../../ui/lottie-animation/lottie-animation.js";
+import { Wrapper as P, IconWrapper as R, Label as X } from "./pill-button-styled.js";
+const k = {
+  autoplay: !0,
+  loop: !0,
+  renderer: "canvas"
+}, S = ({
+  id: i,
+  label: d,
+  selected: t = !1,
+  disabled: e = !1,
+  animatedLabel: u = "",
+  icon: r,
+  onClick: a,
+  tooltip: c,
+  width: g
+}) => {
+  const [v, h] = x(!1), [n, A] = x(!1), { colors: f } = j(), s = !!u, $ = l(() => {
+    a(i);
+  }, [i, a]);
+  _(() => {
+    if (!s || e) return;
+    const T = setInterval(() => {
+      A((W) => !W);
+    }, 1e3);
+    return () => clearInterval(T);
+  }, [e, s]);
+  const w = l(() => h(!0), []), C = l(() => h(!1), []), m = !!r && !e && (s || t || v), E = f[n ? "YELLOW_4" : "WHITE_1"], I = f[n && !t ? "YELLOW_4" : "WHITE_1"], p = n ? u : d, b = n ? t ? "ub3-bold" : "ub3" : t ? "ub2-bold" : "ub2", L = /* @__PURE__ */ o(
+    P,
+    {
+      selected: t,
+      disabled: e,
+      onClick: $,
+      onMouseEnter: w,
+      onMouseLeave: C,
+      height: 36,
+      width: Number(g),
+      borderColor: E,
+      children: /* @__PURE__ */ H(
+        B,
+        {
+          $flexDirection: "row",
+          $alignItems: "center",
+          $justifyContent: "center",
+          $flexColumnGapX: 0.25,
+          children: [
+            r && /* @__PURE__ */ o(R, { $widthX: 1, $heightX: 1, $showLottie: m, children: /* @__PURE__ */ o(O, { src: r, settings: k }) }),
+            /* @__PURE__ */ o(
+              X,
+              {
+                shouldOffsetLabel: m || !r,
+                selected: t,
+                disabled: e,
+                $renderAs: b,
+                textColor: I,
+                children: p
+              },
+              p
+            )
+          ]
+        }
+      )
+    }
+  );
+  return e && c ? /* @__PURE__ */ o(y, { renderAs: "primary", tooltipItem: c, position: "top", children: L }) : L;
+}, J = M(S);
+export {
+  J 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  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      height={36}\n      width={Number(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","useEffect","interval","prev","handleMouseEnter","handleMouseLeave","showLottie","borderColor","textColor","currentLabel","textRenderAs","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;AAEhB,EAAAa,EAAU,MAAM;AACV,QAAA,CAACH,KAAiBb,EAAU;AAE1B,UAAAiB,IAAW,YAAY,MAAM;AACf,MAAAP,EAAA,CAAAQ,MAAQ,CAACA,CAAI;AAAA,OAC9B,GAAI;AAEA,WAAA,MAAM,cAAcD,CAAQ;AAAA,EAAA,GAClC,CAACjB,GAAUa,CAAa,CAAC;AAE5B,QAAMM,IAAmBJ,EAAY,MAAMR,EAAW,EAAI,GAAG,CAAA,CAAE,GACzDa,IAAmBL,EAAY,MAAMR,EAAW,EAAK,GAAG,CAAA,CAAE,GAE1Dc,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,GAEhD2B,IAAehB,IAAkBV,IAAW,aAAa,QADnCA,IAAW,aAAa,OAG9C2B,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,UAAA7B;AAAA,MACA,UAAAC;AAAA,MACA,SAASc;AAAA,MACT,cAAcK;AAAA,MACd,cAAcC;AAAA,MACd,QAAQ;AAAA,MACR,OAAO,OAAOf,CAAK;AAAA,MACnB,aAAAiB;AAAA,MAEA,UAAA,gBAAAO;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,gBAAe;AAAA,UACf,aAAY;AAAA,UACZ,iBAAgB;AAAA,UAChB,iBAAiB;AAAA,UAEhB,UAAA;AAAA,YAAA5B,uBACE6B,GAAA,EAAmB,SAAS,GAAG,UAAU,GAAG,aAAaV,GACxD,4BAACW,GAAgB,EAAA,KAAK9B,GAAM,UAAUP,EAAgB,CAAA,GACxD;AAAA,YAEF,gBAAAgC;AAAA,cAACM;AAAAA,cAAA;AAAA,gBAEC,mBAAmBZ,KAAc,CAACnB;AAAA,gBAClC,UAAAH;AAAA,gBACA,UAAAC;AAAA,gBACA,WAAWyB;AAAA,gBACX,WAAAF;AAAA,gBAEC,UAAAC;AAAA,cAAA;AAAA,cAPIA;AAAA,YAQP;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIG,SAAAxB,KAAYI,IACjB,gBAAAuB,EAACO,GAAa,EAAA,UAAS,WAAU,aAAa9B,GAAS,UAAS,OAC7D,UAAAsB,EAAA,CACH,IAEAA;AAEJ,GAEeS,IAAAC,EAAKxC,CAAU;"}