@cuemath/leap 3.5.0 → 3.5.1-j2

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

@@ -102,7 +102,7 @@ const K = {
             $background: "BLACK_3",
             $borderColor: "BLACK_5",
             isVisible: x,
-            children: /* @__PURE__ */ a(G, { text: V, speed: 20 })
+            children: /* @__PURE__ */ a(G, { text: V, speed: 10 })
           }
         ) })
       ]

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 {\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 type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport { ANIMATION_SEGMENTS, FADE_TIMEOUT } from './animated-avatar-message-constants';\nimport * as Styled from './animated-avatar-message-styled';\nimport type { IAnimatedAvatarMessageProps } from './animated-avatar-message-types';\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>\n        <LottieAnimation\n          width={118}\n          height={119}\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":";;;;;;;;AAoBA,MAAMA,IAAoB;AAAA,EACxB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AACZ,GAEMC,IAAyD,CAAC;AAAA,EAC9D,SAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,YAAAC;AACF,MAAM;AACE,QAAAC,IAAeC,EAAmC,IAAI,GACtDC,IAAaD,EAA6C,IAAI,GAC9D,CAACE,GAAkBC,CAAmB,IAAIC,EAAS,EAAK,GACxD,CAACC,GAA+BC,CAAgC,IAAIF,EAAS,EAAK,GAClF,CAACG,GAA8BC,CAA+B,IAClEJ,EAAST,CAAqB,GAC1Bc,IAA4BT,EAAO,EAAK,GACxCU,IAAgBV,EAAOF,CAAU,GAEjCa,IAAeC,EAAY,MAAM;AACrC,UAAMC,IAAYd,EAAa;AAE/B,QAAI,CAACc,EAAW;AAEN,IAAAA,EAAA,oBAAoB,YAAYF,CAAY,GACtDE,EAAU,QAAQ,EAAI;AAEtB,UAAMC,IACJL,EAA0B,WAAWC,EAAc,UAC/CA,EAAc,UACdK,EAAmB;AAEf,IAAAF,EAAA,aAAaC,GAAa,EAAI;AAAA,EAC1C,GAAG,CAAE,CAAA,GAECE,IAAqBJ,EAAY,MAAM;AAC3C,UAAMC,IAAYd,EAAa;AAE/B,QAAI,CAACc,EAAW;AAEN,IAAAA,EAAA,aAAaE,EAAmB,SAAS,EAAI;AAEvD,UAAME,IAAa,MAAM;AACb,MAAAJ,EAAA,oBAAoB,YAAYI,CAAU,GACpDd,EAAoB,EAAI,GACxBX,EAAc,EAAI,GACRqB,EAAA,aAAaE,EAAmB,OAAO,EAAI,GAC3CF,EAAA,iBAAiB,YAAYF,CAAY;AAAA,IAAA;AAG3C,IAAAE,EAAA,iBAAiB,YAAYI,CAAU;AAAA,EAAA,GAChD,CAACzB,GAAemB,CAAY,CAAC,GAE1BO,IAAgBN;AAAA,IACpB,CAACO,MAA6B;AAC5B,YAAMN,IAAYd,EAAa;AAE/B,MAAKc,MAELA,EAAU,QAAQ,EAAK,GACbA,EAAA,aAAaM,GAAQ,EAAI,GACzBN,EAAA,iBAAiB,YAAYF,CAAY;AAAA,IACrD;AAAA,IACA,CAACA,CAAY;AAAA,EAAA;AAGf,EAAAS;AAAA,IACExB;AAAA,IACA,OAAO;AAAA,MACL,iCAAiC,MAC/B,IAAI,QAAc,CAAWyB,MAAA;AAC3B,QAAA7B,EAAc,EAAK,GACnBc,EAAiC,EAAK,GAClCZ,KAAoBW,MACtBI,EAA0B,UAAU,IACpCS,EAAcxB,CAAgB,IAErBO,EAAA,UAAU,WAAW,MAAM;AACpC,UAAAE,EAAoB,EAAK,GACjBkB;WACPC,CAAY;AAAA,MAAA,CAChB;AAAA,MAEH,wBAAwB,MACtB,IAAI,QAAc,CAAWD,MAAA;AAC3B,QAAKhB,MACCX,KACFY,EAAiC,EAAI,GAEbG,EAAA,UAAU,CAAC,CAACC,EAAc,SACpDQ,EAAczB,CAAkB,IAG9BF,KACFY,EAAoB,EAAK,GAEhBF,EAAA,UAAU,WAAW,MAAM;AACpC,UAAIV,KACFiB,EAAgC,EAAI,GAEtCL,EAAoB,EAAI,GAChBkB;WACPC,CAAY;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,IAEL;AAAA,MACE5B;AAAA,MACAD;AAAA,MACAF;AAAA,MACAc;AAAA,MACAb;AAAA,MACA0B;AAAA,IACF;AAAA,EAAA;AAGI,QAAAK,IAAiBC,EAAQ,MACtBjB,KAAgChB,IAAsBA,IAAsBD,GAClF,CAACiB,GAA8BhB,GAAqBD,CAAO,CAAC;AAE/D,SAAAmC,EAAU,MAAM;AACd,IAAAf,EAAc,UAAUZ;AAAA,EAAA,GACvB,CAACA,CAAU,CAAC,GAEf2B,EAAU,MACD,MAAM;AACX,IAAIxB,EAAW,WACb,aAAaA,EAAW,OAAO;AAAA,EACjC,GAED,CAAE,CAAA,GAELwB,EAAU,MAAM;AACd,IAAAjB,EAAgCb,CAAqB;AAAA,EAAA,GACpD,CAACA,CAAqB,CAAC,GAE1B8B,EAAU,MAAM;AACd,IAAAtB,EAAoB,EAAI,GACxBX,EAAc,EAAI;AAAA,EAAA,GACjB,CAACF,GAASE,CAAa,CAAC,GAGzB,gBAAAkC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,iBAAgB;AAAA,MAChB,aAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,SAAS9B;AAAA,MAET,UAAA;AAAA,QAAA,gBAAA+B,EAACC,GACC,EAAA,UAAA,gBAAAD;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,KAAKC,EAAO;AAAA,YACZ,KAAKhC;AAAA,YACL,UAAUiB;AAAA,YACV,UAAU5B;AAAA,UAAA;AAAA,QAAA,GAEd;AAAA,QACCc,KACC,gBAAA0B,EAACC,GAAS,EAAA,OAAO,GACf,UAAA,gBAAAD;AAAA,UAACI;AAAAA,UAAA;AAAA,YACC,UAAU;AAAA,YACV,OAAO;AAAA,YACP,aAAY;AAAA,YACZ,cAAa;AAAA,YACb,WAAW9B;AAAA,YAEX,UAAC,gBAAA0B,EAAAK,GAAA,EAAa,MAAMV,GAAgB,OAAO,IAAI;AAAA,UAAA;AAAA,QAAA,GAEnD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,GAEeW,IAAAC,EAAK9C,CAAqB;"}
+{"version":3,"file":"animated-avatar-message.js","sources":["../../../../../src/features/auth/comps/animated-avatar-message/animated-avatar-message.tsx"],"sourcesContent":["import {\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 type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport { ANIMATION_SEGMENTS, FADE_TIMEOUT } from './animated-avatar-message-constants';\nimport * as Styled from './animated-avatar-message-styled';\nimport type { IAnimatedAvatarMessageProps } from './animated-avatar-message-types';\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>\n        <LottieAnimation\n          width={118}\n          height={119}\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={10} />\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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"}

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

@@ -1,10 +1,10 @@
-import l, { css as a } from "styled-components";
-import u from "../../../ui/layout/flex-view.js";
-import $ from "../../../ui/text/text.js";
+import l, { css as p } from "styled-components";
+import $ from "../../../ui/layout/flex-view.js";
+import u from "../../../ui/text/text.js";
 const g = l.button`
-  ${({ selected: o, disabled: r, width: t, height: i, borderColor: s, theme: n, isTransparent: e }) => {
-  const c = r ? n.colors.WHITE_T_10 : o ? n.colors.WHITE_1 : e ? n.colors.TRANSPARENT : n.colors.BLACK_1, p = r ? n.colors.WHITE_T_15 : s;
-  return a`
+  ${({ selected: o, disabled: r, width: t, height: n, borderColor: e, theme: i, isTransparent: s }) => {
+  const c = r ? i.colors.WHITE_T_10 : o ? i.colors.WHITE_1 : s ? i.colors.TRANSPARENT : i.colors.BLACK_1, a = r ? i.colors.WHITE_T_15 : e;
+  return p`
       position: relative;
       display: inline-flex;
       align-items: center;
@@ -13,28 +13,33 @@ const g = l.button`
       transition: all 0.3s ease;
       padding: 7.5px 16px;
       border-radius: 40px;
-      border: 1px solid ${p};
+      border: 1px solid ${a};
       width: ${t ? `${t}` : "auto"}${typeof t == "number" ? "px" : ""};
-      height: ${i ? `${i}px` : "auto"};
+      height: ${n ? `${n}px` : "auto"};
       min-height: 37px;
       background-color: ${c};
       &:hover {
-        background-color: ${!o && !r ? n.colors.WHITE_T_10 : void 0};
+        background-color: ${!o && !r ? i.colors.WHITE_T_10 : void 0};
       }
     `;
 }}
-`, d = l(u)`
+`, d = l($)`
   visibility: ${({ $showLottie: o }) => o ? "visible" : "hidden"};
-`, b = l($)`
-  transition: all 0.3s ease-in-out;
+`, b = l(u)`
+  transition:
+    color 0.3s ease,
+    left 0.3s ease,
+    opacity 0.8s ease;
   position: relative;
+  ${({ width: o }) => o && `min-width: ${o};`}
+  opacity: ${({ isVisible: o }) => o ? 1 : 0};
 
   ${({ shouldOffsetLabel: o }) => `
     left: ${o ? "0" : "-10px"};
   `};
 
-  ${({ selected: o, disabled: r, theme: t, textColor: i }) => `
-    color: ${r ? t.colors.WHITE_T_38 : o ? t.colors.BLACK_1 : i};
+  ${({ selected: o, disabled: r, theme: t, textColor: n }) => `
+    color: ${r ? t.colors.WHITE_T_38 : o ? t.colors.BLACK_1 : n};
   `};
 `;
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"pill-button-styled.js","sources":["../../../../../src/features/auth/comps/pill-button/pill-button-styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\nexport const Wrapper = styled.button<{\n  selected: boolean;\n  disabled: boolean;\n  width?: number | string;\n  height?: number;\n  borderColor?: string;\n  isTransparent?: boolean;\n}>`\n  ${({ selected, disabled, width, height, borderColor, theme, isTransparent }) => {\n    const getDefaultBgColor = () => {\n      if (disabled) return theme.colors.WHITE_T_10;\n\n      if (selected) return theme.colors.WHITE_1;\n\n      if (isTransparent) return theme.colors.TRANSPARENT;\n\n      return theme.colors.BLACK_1;\n    };\n\n    const defaultBgColor = getDefaultBgColor();\n\n    const borderColorVal = disabled ? theme.colors.WHITE_T_15 : borderColor;\n\n    return css`\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\n      transition: all 0.3s ease;\n      padding: 7.5px 16px;\n      border-radius: 40px;\n      border: 1px solid ${borderColorVal};\n      width: ${width ? `${width}` : 'auto'}${typeof width === 'number' ? 'px' : ''};\n      height: ${height ? `${height}px` : 'auto'};\n      min-height: 37px;\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","isTransparent","defaultBgColor","borderColorVal","css","IconWrapper","FlexView","$showLottie","Label","Text","shouldOffsetLabel","textColor"],"mappings":";;;AAKO,MAAMA,IAAUC,EAAO;AAAA,IAQ1B,CAAC,EAAE,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,QAAAC,GAAQ,aAAAC,GAAa,OAAAC,GAAO,eAAAC,QAAoB;AAW9E,QAAMC,IATAN,IAAiBI,EAAM,OAAO,aAE9BL,IAAiBK,EAAM,OAAO,UAE9BC,IAAsBD,EAAM,OAAO,cAEhCA,EAAM,OAAO,SAKhBG,IAAiBP,IAAWI,EAAM,OAAO,aAAaD;AAErD,SAAAK;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKKR,IAAW,gBAAgB,SAAS;AAAA;AAAA;AAAA;AAAA,0BAI1BO,CAAc;AAAA,eACzBN,IAAQ,GAAGA,CAAK,KAAK,MAAM,GAAG,OAAOA,KAAU,WAAW,OAAO,EAAE;AAAA,gBAClEC,IAAS,GAAGA,CAAM,OAAO,MAAM;AAAA;AAAA,0BAErBI,CAAc;AAAA;AAAA,4BAEZ,CAACP,KAAY,CAACC,IAAWI,EAAM,OAAO,aAAa,MAAS;AAAA;AAAA;AAGtF,CAAC;AAAA,GAGUK,IAAcX,EAAOY,CAAQ;AAAA,gBAG1B,CAAC,EAAE,aAAAC,EAAA,MAAmBA,IAAc,YAAY,QAAS;AAAA,GAG5DC,IAAQd,EAAOe,CAAI;AAAA;AAAA;AAAA;AAAA,IAS5B,CAAC,EAAE,mBAAAC,EAAA,MAAwB;AAAA,YACnBA,IAAoB,MAAM,OAAO;AAAA,GAC1C;AAAA;AAAA,IAEC,CAAC,EAAE,UAAAf,GAAU,UAAAC,GAAU,OAAAI,GAAO,WAAAW,EAAgB,MAAA;AAAA,aACrCf,IAAWI,EAAM,OAAO,aAAaL,IAAWK,EAAM,OAAO,UAAUW,CAAS;AAAA,GAC1F;AAAA;"}
+{"version":3,"file":"pill-button-styled.js","sources":["../../../../../src/features/auth/comps/pill-button/pill-button-styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\nexport const Wrapper = styled.button<{\n  selected: boolean;\n  disabled: boolean;\n  width?: number | string;\n  height?: number;\n  borderColor?: string;\n  isTransparent?: boolean;\n}>`\n  ${({ selected, disabled, width, height, borderColor, theme, isTransparent }) => {\n    const getDefaultBgColor = () => {\n      if (disabled) return theme.colors.WHITE_T_10;\n\n      if (selected) return theme.colors.WHITE_1;\n\n      if (isTransparent) return theme.colors.TRANSPARENT;\n\n      return theme.colors.BLACK_1;\n    };\n\n    const defaultBgColor = getDefaultBgColor();\n\n    const borderColorVal = disabled ? theme.colors.WHITE_T_15 : borderColor;\n\n    return css`\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\n      transition: all 0.3s ease;\n      padding: 7.5px 16px;\n      border-radius: 40px;\n      border: 1px solid ${borderColorVal};\n      width: ${width ? `${width}` : 'auto'}${typeof width === 'number' ? 'px' : ''};\n      height: ${height ? `${height}px` : 'auto'};\n      min-height: 37px;\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  isVisible: boolean;\n  width?: string;\n}>`\n  transition:\n    color 0.3s ease,\n    left 0.3s ease,\n    opacity 0.8s ease;\n  position: relative;\n  ${({ width }) => width && `min-width: ${width};`}\n  opacity: ${({ isVisible }) => (isVisible ? 1 : 0)};\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","isTransparent","defaultBgColor","borderColorVal","css","IconWrapper","FlexView","$showLottie","Label","Text","isVisible","shouldOffsetLabel","textColor"],"mappings":";;;AAKO,MAAMA,IAAUC,EAAO;AAAA,IAQ1B,CAAC,EAAE,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,QAAAC,GAAQ,aAAAC,GAAa,OAAAC,GAAO,eAAAC,QAAoB;AAW9E,QAAMC,IATAN,IAAiBI,EAAM,OAAO,aAE9BL,IAAiBK,EAAM,OAAO,UAE9BC,IAAsBD,EAAM,OAAO,cAEhCA,EAAM,OAAO,SAKhBG,IAAiBP,IAAWI,EAAM,OAAO,aAAaD;AAErD,SAAAK;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKKR,IAAW,gBAAgB,SAAS;AAAA;AAAA;AAAA;AAAA,0BAI1BO,CAAc;AAAA,eACzBN,IAAQ,GAAGA,CAAK,KAAK,MAAM,GAAG,OAAOA,KAAU,WAAW,OAAO,EAAE;AAAA,gBAClEC,IAAS,GAAGA,CAAM,OAAO,MAAM;AAAA;AAAA,0BAErBI,CAAc;AAAA;AAAA,4BAEZ,CAACP,KAAY,CAACC,IAAWI,EAAM,OAAO,aAAa,MAAS;AAAA;AAAA;AAGtF,CAAC;AAAA,GAGUK,IAAcX,EAAOY,CAAQ;AAAA,gBAG1B,CAAC,EAAE,aAAAC,EAAA,MAAmBA,IAAc,YAAY,QAAS;AAAA,GAG5DC,IAAQd,EAAOe,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa5B,CAAC,EAAE,OAAAZ,QAAYA,KAAS,cAAcA,CAAK,GAAG;AAAA,aACrC,CAAC,EAAE,WAAAa,EAAA,MAAiBA,IAAY,IAAI,CAAE;AAAA;AAAA,IAE/C,CAAC,EAAE,mBAAAC,EAAA,MAAwB;AAAA,YACnBA,IAAoB,MAAM,OAAO;AAAA,GAC1C;AAAA;AAAA,IAEC,CAAC,EAAE,UAAAhB,GAAU,UAAAC,GAAU,OAAAI,GAAO,WAAAY,EAAgB,MAAA;AAAA,aACrChB,IAAWI,EAAM,OAAO,aAAaL,IAAWK,EAAM,OAAO,UAAUY,CAAS;AAAA,GAC1F;AAAA;"}

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

@@ -1,79 +1,83 @@
-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 S from "../../../ui/lottie-animation/lottie-animation.js";
-import { Wrapper as X, IconWrapper as Y, Label as D } from "./pill-button-styled.js";
-const F = {
+import { jsx as r, jsxs as k } from "react/jsx-runtime";
+import { memo as y, useState as l, useCallback as c, useEffect as B } from "react";
+import { useTheme as O } from "styled-components";
+import S from "../../../ui/arrow-tooltip/arrow-tooltip.js";
+import V from "../../../ui/hooks/use-click-handler.js";
+import X from "../../../ui/layout/flex-view.js";
+import Y from "../../../ui/lottie-animation/lottie-animation.js";
+import { Wrapper as D, IconWrapper as F, Label as G } from "./pill-button-styled.js";
+const q = {
   autoplay: !0,
   loop: !0,
   renderer: "canvas"
-}, G = ({
-  id: i,
-  label: a,
+}, z = ({
+  id: a,
+  label: n,
   selected: t = !1,
   disabled: e = !1,
   animatedLabel: u = "",
-  icon: r,
-  onClick: c,
-  tooltip: f,
-  width: A,
-  analyticsLabel: $,
-  analyticsProps: g,
-  isTransparent: v = !1
+  icon: s,
+  onClick: f,
+  tooltip: h,
+  width: w,
+  analyticsLabel: A,
+  analyticsProps: C,
+  isTransparent: $ = !1
 }) => {
-  const [C, h] = L(!1), [n, E] = L(!1), { colors: m } = k(), s = !!u, I = l(() => {
-    c(i);
-  }, [i, c]), { handleClick: w } = B({ label: a, analyticsLabel: $, analyticsProps: g }, I);
-  j(() => {
-    if (!s || e) return;
-    const M = setInterval(() => {
-      E((P) => !P);
-    }, 1e3);
-    return () => clearInterval(M);
-  }, [e, s]);
-  const H = l(() => h(!0), []), T = l(() => h(!1), []), p = !!r && !e && (s || t || C), W = m[n ? "YELLOW_4" : "WHITE_1"], b = m[n && !t ? "YELLOW_4" : "WHITE_1"], d = n ? u : a, x = /* @__PURE__ */ o(
-    X,
+  const [g, m] = l(!1), [o, I] = l(!1), [E, p] = l(!0), [L, T] = l(n), { colors: d } = O(), i = !!u, b = c(() => {
+    f(a);
+  }, [a, f]), { handleClick: H } = V({ label: n, analyticsLabel: A, analyticsProps: C }, b);
+  B(() => {
+    if (!i || e) return;
+    const _ = setInterval(() => {
+      p(!1), setTimeout(() => {
+        I((j) => !j), T(o ? n : u), p(!0);
+      }, 400);
+    }, 1500);
+    return () => clearInterval(_);
+  }, [u, e, o, n, i]);
+  const W = c(() => m(!0), []), M = c(() => m(!1), []), x = !!s && !e && (i || t || g), P = d[o ? "YELLOW_4" : "WHITE_1"], R = d[o && !t ? "YELLOW_4" : "WHITE_1"], v = /* @__PURE__ */ r(
+    D,
     {
       selected: t,
       disabled: e,
-      onClick: w,
-      onMouseEnter: H,
-      onMouseLeave: T,
-      width: A,
-      borderColor: W,
-      isTransparent: v,
-      children: /* @__PURE__ */ R(
-        O,
+      onClick: H,
+      onMouseEnter: W,
+      onMouseLeave: M,
+      width: w,
+      borderColor: P,
+      isTransparent: $,
+      children: /* @__PURE__ */ k(
+        X,
         {
           $flexDirection: "row",
           $alignItems: "center",
           $justifyContent: "center",
           $flexColumnGapX: 0.25,
           children: [
-            r && /* @__PURE__ */ o(Y, { $widthX: 1, $heightX: 1, $showLottie: p, children: /* @__PURE__ */ o(S, { src: r, settings: F }) }),
-            /* @__PURE__ */ o(
-              D,
+            s && /* @__PURE__ */ r(F, { $widthX: 1, $heightX: 1, $showLottie: x, children: /* @__PURE__ */ r(Y, { src: s, settings: q }) }),
+            /* @__PURE__ */ r(
+              G,
               {
-                shouldOffsetLabel: p || !r,
+                shouldOffsetLabel: x || !s,
                 selected: t,
                 disabled: e,
-                $renderAs: n ? t ? "ub3-bold" : "ub3" : t ? "ub2-bold" : "ub2",
-                textColor: b,
-                children: d
+                $renderAs: o ? t ? "ub3-bold" : "ub3" : t ? "ub2-bold" : "ub2",
+                textColor: R,
+                isVisible: E,
+                width: i ? "85px" : void 0,
+                children: L
               },
-              d
+              L
             )
           ]
         }
       )
     }
   );
-  return e && f ? /* @__PURE__ */ o(y, { renderAs: "primary", tooltipItem: f, position: "top", children: x }) : x;
-}, et = _(G);
+  return e && h ? /* @__PURE__ */ r(S, { renderAs: "primary", tooltipItem: h, position: "top", children: v }) : v;
+}, st = y(z);
 export {
-  et as default
+  st 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 { 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';\nimport type { IPillButtonProps } from './pill-button-types';\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  isTransparent = false,\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      isTransparent={isTransparent}\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","isTransparent","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$1","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;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,eAAAC,IAAgB;AAClB,MAAM;AACJ,QAAM,CAACC,GAAWC,CAAU,IAAIC,EAAS,EAAK,GACxC,CAACC,GAAgBC,CAAiB,IAAIF,EAAS,EAAK,GACpD,EAAE,QAAAG,MAAWC,KACbC,IAAgB,CAAC,CAACf,GAElBgB,IAAeC,EAAY,MAAM;AACrC,IAAAf,EAAQN,CAAE;AAAA,EAAA,GACT,CAACA,GAAIM,CAAO,CAAC,GAEV,EAAE,aAAAgB,EAAgB,IAAAC,EAAgB,EAAE,OAAAtB,GAAO,gBAAAQ,GAAgB,gBAAAC,KAAkBU,CAAY;AAE/F,EAAAI,EAAU,MAAM;AACV,QAAA,CAACL,KAAiBhB,EAAU;AAE1B,UAAAsB,IAAW,YAAY,MAAM;AACf,MAAAT,EAAA,CAAAU,MAAQ,CAACA,CAAI;AAAA,OAC9B,GAAI;AAEA,WAAA,MAAM,cAAcD,CAAQ;AAAA,EAAA,GAClC,CAACtB,GAAUgB,CAAa,CAAC;AAE5B,QAAMQ,IAAmBN,EAAY,MAAMR,EAAW,EAAI,GAAG,CAAA,CAAE,GACzDe,IAAmBP,EAAY,MAAMR,EAAW,EAAK,GAAG,CAAA,CAAE,GAE1DgB,IAAa,CAAC,CAACxB,KAAQ,CAACF,MAAagB,KAAiBjB,KAAYU,IAElEkB,IAAcb,EAAOF,IAAiB,aAAa,SAAS,GAC5DgB,IAAYd,EAAOF,KAAkB,CAACb,IAAW,aAAa,SAAS,GACvE8B,IAAejB,IAAiBX,IAAgBH,GAIhDgC,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,UAAAjC;AAAA,MACA,UAAAC;AAAA,MACA,SAASmB;AAAA,MACT,cAAcK;AAAA,MACd,cAAcC;AAAA,MACd,OAAApB;AAAA,MACA,aAAAsB;AAAA,MACA,eAAAnB;AAAA,MAEA,UAAA,gBAAAyB;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,gBAAe;AAAA,UACf,aAAY;AAAA,UACZ,iBAAgB;AAAA,UAChB,iBAAiB;AAAA,UAEhB,UAAA;AAAA,YAAAhC,uBACEiC,GAAA,EAAmB,SAAS,GAAG,UAAU,GAAG,aAAaT,GACxD,4BAACU,GAAgB,EAAA,KAAKlC,GAAM,UAAUP,EAAgB,CAAA,GACxD;AAAA,YAEF,gBAAAoC;AAAA,cAACM;AAAAA,cAAA;AAAA,gBAEC,mBAAmBX,KAAc,CAACxB;AAAA,gBAClC,UAAAH;AAAA,gBACA,UAAAC;AAAA,gBACA,WA7BaY,IAAkBb,IAAW,aAAa,QADnCA,IAAW,aAAa;AAAA,gBA+B5C,WAAA6B;AAAA,gBAEC,UAAAC;AAAA,cAAA;AAAA,cAPIA;AAAA,YAQP;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIG,SAAA7B,KAAYI,IACjB,gBAAA2B,EAACO,GAAa,EAAA,UAAS,WAAU,aAAalC,GAAS,UAAS,OAC7D,UAAA0B,EAAA,CACH,IAEAA;AAEJ,GAEeS,KAAAC,EAAK5C,CAAU;"}
+{"version":3,"file":"pill-button.js","sources":["../../../../../src/features/auth/comps/pill-button/pill-button.tsx"],"sourcesContent":["import { 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';\nimport type { IPillButtonProps } from './pill-button-types';\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  isTransparent = false,\n}) => {\n  const [isHovered, setHovered] = useState(false);\n  const [highlightPhase, setHighlightPhase] = useState(false);\n  const [isVisible, setIsVisible] = useState(true);\n  const [currentLabel, setCurrentLabel] = useState(label);\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      setIsVisible(false);\n\n      setTimeout(() => {\n        setHighlightPhase(prev => !prev);\n        const newLabel = !highlightPhase ? animatedLabel : label;\n\n        setCurrentLabel(newLabel);\n        setIsVisible(true);\n      }, 400);\n    }, 1500);\n\n    return () => clearInterval(interval);\n  }, [animatedLabel, disabled, highlightPhase, label, 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 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      isTransparent={isTransparent}\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          isVisible={isVisible}\n          width={shouldAnimate ? '85px' : undefined}\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","isTransparent","isHovered","setHovered","useState","highlightPhase","setHighlightPhase","isVisible","setIsVisible","currentLabel","setCurrentLabel","colors","useTheme","shouldAnimate","handleSelect","useCallback","handleClick","useClickHandler","useEffect","interval","prev","handleMouseEnter","handleMouseLeave","showLottie","borderColor","textColor","ButtonContent","jsx","Styled.Wrapper","jsxs","FlexView","Styled.IconWrapper","LottieAnimation","Styled.Label","ArrowTooltip","PillButton$1","memo"],"mappings":"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"}

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

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

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

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

package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide-constants.js

@@ -1,19 +1,22 @@
-import { ILLUSTRATIONS as o } from "../../../../assets/illustrations/illustrations.js";
-const e = [
+import { ILLUSTRATIONS as e } from "../../../../assets/illustrations/illustrations.js";
+const t = [
   {
-    icon: o.HANDSHAKE,
-    title: "Find the perfect tutor match for your child's goals"
+    icon: e.HANDSHAKE,
+    title: "Find the perfect tutor match for your child's goals",
+    mobileTitle: "Find the perfect tutor"
   },
   {
-    icon: o.CALENDAR_PURPLE,
-    title: "Schedule your FREE session at a convenient time"
+    icon: e.CALENDAR_PURPLE,
+    title: "Schedule your FREE session at a convenient time",
+    mobileTitle: "Schedule your FREE session"
   },
   {
-    icon: o.MONEY,
-    title: "Choose a plan and start your learning journey"
+    icon: e.MONEY,
+    title: "Choose a plan and start your learning journey",
+    mobileTitle: "Choose a payment plan"
   }
 ];
 export {
-  e as onboardingGuideSteps
+  t as onboardingGuideSteps
 };
 //# sourceMappingURL=onboarding-guide-constants.js.map

package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"onboarding-guide-constants.js","sources":["../../../../../src/features/auth/pla-signup/onboarding-guide/onboarding-guide-constants.ts"],"sourcesContent":["import { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\n\nexport const onboardingGuideSteps = [\n  {\n    icon: ILLUSTRATIONS.HANDSHAKE,\n    title: `Find the perfect tutor match for your child's goals`,\n  },\n  {\n    icon: ILLUSTRATIONS.CALENDAR_PURPLE,\n    title: `Schedule your FREE session at a convenient time`,\n  },\n  {\n    icon: ILLUSTRATIONS.MONEY,\n    title: `Choose a plan and start your learning journey`,\n  },\n];\n"],"names":["onboardingGuideSteps","ILLUSTRATIONS"],"mappings":";AAEO,MAAMA,IAAuB;AAAA,EAClC;AAAA,IACE,MAAMC,EAAc;AAAA,IACpB,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAMA,EAAc;AAAA,IACpB,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAMA,EAAc;AAAA,IACpB,OAAO;AAAA,EACT;AACF;"}
+{"version":3,"file":"onboarding-guide-constants.js","sources":["../../../../../src/features/auth/pla-signup/onboarding-guide/onboarding-guide-constants.ts"],"sourcesContent":["import { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\n\nexport const onboardingGuideSteps = [\n  {\n    icon: ILLUSTRATIONS.HANDSHAKE,\n    title: `Find the perfect tutor match for your child's goals`,\n    mobileTitle: `Find the perfect tutor`,\n  },\n  {\n    icon: ILLUSTRATIONS.CALENDAR_PURPLE,\n    title: `Schedule your FREE session at a convenient time`,\n    mobileTitle: `Schedule your FREE session`,\n  },\n  {\n    icon: ILLUSTRATIONS.MONEY,\n    title: `Choose a plan and start your learning journey`,\n    mobileTitle: `Choose a payment plan`,\n  },\n];\n"],"names":["onboardingGuideSteps","ILLUSTRATIONS"],"mappings":";AAEO,MAAMA,IAAuB;AAAA,EAClC;AAAA,IACE,MAAMC,EAAc;AAAA,IACpB,OAAO;AAAA,IACP,aAAa;AAAA,EACf;AAAA,EACA;AAAA,IACE,MAAMA,EAAc;AAAA,IACpB,OAAO;AAAA,IACP,aAAa;AAAA,EACf;AAAA,EACA;AAAA,IACE,MAAMA,EAAc;AAAA,IACpB,OAAO;AAAA,IACP,aAAa;AAAA,EACf;AACF;"}

package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide.js

@@ -6,9 +6,9 @@ import h from "../../../ui/separator/separator.js";
 import m from "../../../ui/text/text.js";
 import { EDeviceType as s } from "../../../ui/theme/constants.js";
 import { onboardingGuideSteps as x } from "./onboarding-guide-constants.js";
-import { StepWrapper as u, StepItem as b } from "./onboarding-guide-styled.js";
+import { StepWrapper as b, StepItem as u } from "./onboarding-guide-styled.js";
 const g = ({ orientation: p = "vertical" }) => {
-  const { device: o } = d(), t = o <= s.TABLET, f = o <= s.MOBILE, e = p === "horizontal" && !f, i = t || e ? "row" : "column";
+  const { device: i } = d(), t = i <= s.TABLET, f = i <= s.MOBILE, e = p === "horizontal" && !f, n = t || e ? "row" : "column";
   return /* @__PURE__ */ a(
     c,
     {
@@ -29,16 +29,16 @@ const g = ({ orientation: p = "vertical" }) => {
         ),
         /* @__PURE__ */ r(h, { heightX: e ? 1.25 : t ? 1 : 2.75 }),
         /* @__PURE__ */ r(
-          u,
+          b,
           {
-            $flexDirection: i,
+            $flexDirection: n,
             $flexColumnGapX: e ? 0 : 0.5,
             isHorizontalLayout: e,
-            children: x.map((n, l) => /* @__PURE__ */ a(
-              b,
+            children: x.map((o, l) => /* @__PURE__ */ a(
+              u,
               {
                 $flex: 1,
-                $flexDirection: i === "row" ? "column" : "row",
+                $flexDirection: n === "row" ? "column" : "row",
                 $flexColumnGapX: 1.5,
                 $flexRowGapX: 0.5,
                 $alignItems: e ? "flex-start" : "center",
@@ -48,7 +48,7 @@ const g = ({ orientation: p = "vertical" }) => {
                   /* @__PURE__ */ r(
                     "img",
                     {
-                      src: n.icon,
+                      src: o.icon,
                       alt: `Step ${l + 1}`,
                       width: e ? 80 : 56,
                       height: e ? 80 : 56
@@ -62,7 +62,7 @@ const g = ({ orientation: p = "vertical" }) => {
                       $renderOnTabletAs: "ab3",
                       $color: "WHITE",
                       $align: t ? "center" : "left",
-                      children: n.title
+                      children: t && o.mobileTitle ? o.mobileTitle : o.title
                     }
                   ) })
                 ]

package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide.js.map

@@ -1 +1 @@
-{"version":3,"file":"onboarding-guide.js","sources":["../../../../../src/features/auth/pla-signup/onboarding-guide/onboarding-guide.tsx"],"sourcesContent":["import { memo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { EDeviceType } from '../../../ui/theme/constants';\nimport { onboardingGuideSteps } from './onboarding-guide-constants';\nimport * as Styled from './onboarding-guide-styled';\nimport type { IOnboardingGuideProps } from './onboarding-guide-types';\n\nconst OnboardingGuide = ({ orientation = 'vertical' }: IOnboardingGuideProps) => {\n  const { device } = useTheme();\n  const isCompact = device <= EDeviceType.TABLET;\n  const isMobile = device <= EDeviceType.MOBILE;\n  const isHorizontalLayout = orientation === 'horizontal' && !isMobile;\n  const flexDirection = isCompact || isHorizontalLayout ? 'row' : 'column';\n\n  return (\n    <FlexView\n      $flex={1}\n      $alignItems={isHorizontalLayout ? 'flex-start' : 'center'}\n      $justifyContent=\"center\"\n    >\n      <Text\n        $whiteSpace=\"pre-line\"\n        $renderAs=\"ah4-bold\"\n        $renderOnTabletAs=\"ab1-bold\"\n        $color=\"WHITE\"\n        $align={isHorizontalLayout ? 'left' : 'center'}\n      >\n        Get started in 3 easy steps!\n      </Text>\n\n      <Separator heightX={isHorizontalLayout ? 1.25 : isCompact ? 1 : 2.75} />\n\n      <Styled.StepWrapper\n        $flexDirection={flexDirection}\n        $flexColumnGapX={!isHorizontalLayout ? 0.5 : 0}\n        isHorizontalLayout={isHorizontalLayout}\n      >\n        {onboardingGuideSteps.map((step, index) => (\n          <Styled.StepItem\n            key={index}\n            $flex={1}\n            $flexDirection={flexDirection === 'row' ? 'column' : 'row'}\n            $flexColumnGapX={1.5}\n            $flexRowGapX={0.5}\n            $alignItems={isHorizontalLayout ? 'flex-start' : 'center'}\n            isHorizontalLayout={isHorizontalLayout}\n            $gutterX={isHorizontalLayout ? 1 : 0}\n          >\n            <img\n              src={step.icon}\n              alt={`Step ${index + 1}`}\n              width={isHorizontalLayout ? 80 : 56}\n              height={isHorizontalLayout ? 80 : 56}\n            />\n            <FlexView>\n              <Text\n                $whiteSpace=\"pre-line\"\n                $renderAs=\"ab2\"\n                $renderOnTabletAs=\"ab3\"\n                $color=\"WHITE\"\n                $align={isCompact ? 'center' : 'left'}\n              >\n                {step.title}\n              </Text>\n            </FlexView>\n          </Styled.StepItem>\n        ))}\n      </Styled.StepWrapper>\n    </FlexView>\n  );\n};\n\nexport default memo(OnboardingGuide);\n"],"names":["OnboardingGuide","orientation","device","useTheme","isCompact","EDeviceType","isMobile","isHorizontalLayout","flexDirection","jsxs","FlexView","jsx","Text","Separator","Styled.StepWrapper","onboardingGuideSteps","step","index","Styled.StepItem","OnboardingGuide$1","memo"],"mappings":";;;;;;;;;AAWA,MAAMA,IAAkB,CAAC,EAAE,aAAAC,IAAc,iBAAwC;AACzE,QAAA,EAAE,QAAAC,MAAWC,KACbC,IAAYF,KAAUG,EAAY,QAClCC,IAAWJ,KAAUG,EAAY,QACjCE,IAAqBN,MAAgB,gBAAgB,CAACK,GACtDE,IAAgBJ,KAAaG,IAAqB,QAAQ;AAG9D,SAAA,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,aAAaH,IAAqB,eAAe;AAAA,MACjD,iBAAgB;AAAA,MAEhB,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,aAAY;AAAA,YACZ,WAAU;AAAA,YACV,mBAAkB;AAAA,YAClB,QAAO;AAAA,YACP,QAAQL,IAAqB,SAAS;AAAA,YACvC,UAAA;AAAA,UAAA;AAAA,QAED;AAAA,0BAECM,GAAU,EAAA,SAASN,IAAqB,OAAOH,IAAY,IAAI,MAAM;AAAA,QAEtE,gBAAAO;AAAA,UAACG;AAAAA,UAAA;AAAA,YACC,gBAAgBN;AAAA,YAChB,iBAAkBD,IAA2B,IAAN;AAAA,YACvC,oBAAAA;AAAA,YAEC,UAAqBQ,EAAA,IAAI,CAACC,GAAMC,MAC/B,gBAAAR;AAAA,cAACS;AAAAA,cAAA;AAAA,gBAEC,OAAO;AAAA,gBACP,gBAAgBV,MAAkB,QAAQ,WAAW;AAAA,gBACrD,iBAAiB;AAAA,gBACjB,cAAc;AAAA,gBACd,aAAaD,IAAqB,eAAe;AAAA,gBACjD,oBAAAA;AAAA,gBACA,UAAUA,IAAqB,IAAI;AAAA,gBAEnC,UAAA;AAAA,kBAAA,gBAAAI;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,KAAKK,EAAK;AAAA,sBACV,KAAK,QAAQC,IAAQ,CAAC;AAAA,sBACtB,OAAOV,IAAqB,KAAK;AAAA,sBACjC,QAAQA,IAAqB,KAAK;AAAA,oBAAA;AAAA,kBACpC;AAAA,oCACCG,GACC,EAAA,UAAA,gBAAAC;AAAA,oBAACC;AAAA,oBAAA;AAAA,sBACC,aAAY;AAAA,sBACZ,WAAU;AAAA,sBACV,mBAAkB;AAAA,sBAClB,QAAO;AAAA,sBACP,QAAQR,IAAY,WAAW;AAAA,sBAE9B,UAAKY,EAAA;AAAA,oBAAA;AAAA,kBAAA,GAEV;AAAA,gBAAA;AAAA,cAAA;AAAA,cAzBKC;AAAA,YAAA,CA2BR;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEeE,IAAAC,EAAKpB,CAAe;"}
+{"version":3,"file":"onboarding-guide.js","sources":["../../../../../src/features/auth/pla-signup/onboarding-guide/onboarding-guide.tsx"],"sourcesContent":["import { memo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { EDeviceType } from '../../../ui/theme/constants';\nimport { onboardingGuideSteps } from './onboarding-guide-constants';\nimport * as Styled from './onboarding-guide-styled';\nimport type { IOnboardingGuideProps } from './onboarding-guide-types';\n\nconst OnboardingGuide = ({ orientation = 'vertical' }: IOnboardingGuideProps) => {\n  const { device } = useTheme();\n  const isCompact = device <= EDeviceType.TABLET;\n  const isMobile = device <= EDeviceType.MOBILE;\n  const isHorizontalLayout = orientation === 'horizontal' && !isMobile;\n  const flexDirection = isCompact || isHorizontalLayout ? 'row' : 'column';\n\n  return (\n    <FlexView\n      $flex={1}\n      $alignItems={isHorizontalLayout ? 'flex-start' : 'center'}\n      $justifyContent=\"center\"\n    >\n      <Text\n        $whiteSpace=\"pre-line\"\n        $renderAs=\"ah4-bold\"\n        $renderOnTabletAs=\"ab1-bold\"\n        $color=\"WHITE\"\n        $align={isHorizontalLayout ? 'left' : 'center'}\n      >\n        Get started in 3 easy steps!\n      </Text>\n\n      <Separator heightX={isHorizontalLayout ? 1.25 : isCompact ? 1 : 2.75} />\n\n      <Styled.StepWrapper\n        $flexDirection={flexDirection}\n        $flexColumnGapX={!isHorizontalLayout ? 0.5 : 0}\n        isHorizontalLayout={isHorizontalLayout}\n      >\n        {onboardingGuideSteps.map((step, index) => (\n          <Styled.StepItem\n            key={index}\n            $flex={1}\n            $flexDirection={flexDirection === 'row' ? 'column' : 'row'}\n            $flexColumnGapX={1.5}\n            $flexRowGapX={0.5}\n            $alignItems={isHorizontalLayout ? 'flex-start' : 'center'}\n            isHorizontalLayout={isHorizontalLayout}\n            $gutterX={isHorizontalLayout ? 1 : 0}\n          >\n            <img\n              src={step.icon}\n              alt={`Step ${index + 1}`}\n              width={isHorizontalLayout ? 80 : 56}\n              height={isHorizontalLayout ? 80 : 56}\n            />\n            <FlexView>\n              <Text\n                $whiteSpace=\"pre-line\"\n                $renderAs=\"ab2\"\n                $renderOnTabletAs=\"ab3\"\n                $color=\"WHITE\"\n                $align={isCompact ? 'center' : 'left'}\n              >\n                {isCompact && step.mobileTitle ? step.mobileTitle : step.title}\n              </Text>\n            </FlexView>\n          </Styled.StepItem>\n        ))}\n      </Styled.StepWrapper>\n    </FlexView>\n  );\n};\n\nexport default memo(OnboardingGuide);\n"],"names":["OnboardingGuide","orientation","device","useTheme","isCompact","EDeviceType","isMobile","isHorizontalLayout","flexDirection","jsxs","FlexView","jsx","Text","Separator","Styled.StepWrapper","onboardingGuideSteps","step","index","Styled.StepItem","OnboardingGuide$1","memo"],"mappings":";;;;;;;;;AAWA,MAAMA,IAAkB,CAAC,EAAE,aAAAC,IAAc,iBAAwC;AACzE,QAAA,EAAE,QAAAC,MAAWC,KACbC,IAAYF,KAAUG,EAAY,QAClCC,IAAWJ,KAAUG,EAAY,QACjCE,IAAqBN,MAAgB,gBAAgB,CAACK,GACtDE,IAAgBJ,KAAaG,IAAqB,QAAQ;AAG9D,SAAA,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,aAAaH,IAAqB,eAAe;AAAA,MACjD,iBAAgB;AAAA,MAEhB,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,aAAY;AAAA,YACZ,WAAU;AAAA,YACV,mBAAkB;AAAA,YAClB,QAAO;AAAA,YACP,QAAQL,IAAqB,SAAS;AAAA,YACvC,UAAA;AAAA,UAAA;AAAA,QAED;AAAA,0BAECM,GAAU,EAAA,SAASN,IAAqB,OAAOH,IAAY,IAAI,MAAM;AAAA,QAEtE,gBAAAO;AAAA,UAACG;AAAAA,UAAA;AAAA,YACC,gBAAgBN;AAAA,YAChB,iBAAkBD,IAA2B,IAAN;AAAA,YACvC,oBAAAA;AAAA,YAEC,UAAqBQ,EAAA,IAAI,CAACC,GAAMC,MAC/B,gBAAAR;AAAA,cAACS;AAAAA,cAAA;AAAA,gBAEC,OAAO;AAAA,gBACP,gBAAgBV,MAAkB,QAAQ,WAAW;AAAA,gBACrD,iBAAiB;AAAA,gBACjB,cAAc;AAAA,gBACd,aAAaD,IAAqB,eAAe;AAAA,gBACjD,oBAAAA;AAAA,gBACA,UAAUA,IAAqB,IAAI;AAAA,gBAEnC,UAAA;AAAA,kBAAA,gBAAAI;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,KAAKK,EAAK;AAAA,sBACV,KAAK,QAAQC,IAAQ,CAAC;AAAA,sBACtB,OAAOV,IAAqB,KAAK;AAAA,sBACjC,QAAQA,IAAqB,KAAK;AAAA,oBAAA;AAAA,kBACpC;AAAA,oCACCG,GACC,EAAA,UAAA,gBAAAC;AAAA,oBAACC;AAAA,oBAAA;AAAA,sBACC,aAAY;AAAA,sBACZ,WAAU;AAAA,sBACV,mBAAkB;AAAA,sBAClB,QAAO;AAAA,sBACP,QAAQR,IAAY,WAAW;AAAA,sBAE9B,UAAaA,KAAAY,EAAK,cAAcA,EAAK,cAAcA,EAAK;AAAA,oBAAA;AAAA,kBAAA,GAE7D;AAAA,gBAAA;AAAA,cAAA;AAAA,cAzBKC;AAAA,YAAA,CA2BR;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEeE,IAAAC,EAAKpB,CAAe;"}

package/dist/features/auth/pla-signup/signup-options/signup-options.js

@@ -1,27 +1,28 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { memo as C } from "react";
-import { useTheme as b } from "styled-components";
-import f from "../../../../assets/line-icons/icons/apple-icon-white.js";
-import g from "../../../../assets/line-icons/icons/google-icon.js";
+import { memo as g } from "react";
+import { useTheme as L } from "styled-components";
+import u from "../../../../assets/line-icons/icons/apple-icon-white.js";
+import _ from "../../../../assets/line-icons/icons/google-icon.js";
 import r from "../../../ui/buttons/button/button.js";
-import u from "../../../ui/buttons/text-button/text-button.js";
+import S from "../../../ui/buttons/text-button/text-button.js";
 import t from "../../../ui/layout/flex-view.js";
-import c from "../../../ui/separator/separator.js";
-import p from "../../../ui/text/text.js";
-import { EDeviceType as L } from "../../../ui/theme/constants.js";
+import d from "../../../ui/separator/separator.js";
+import h from "../../../ui/text/text.js";
+import { EDeviceType as I } from "../../../ui/theme/constants.js";
 import { PLA_ANALYTICS_EVENTS as i } from "../pla-analytics-events.js";
-const _ = ({
-  onEmailSignup: m,
-  onAppleSignup: d,
-  onGoogleSignup: h,
-  loadingProvider: a,
-  onGoToLogin: T,
-  title: A
+const $ = ({
+  onEmailSignup: A,
+  onAppleSignup: T,
+  onGoogleSignup: C,
+  loadingProvider: n,
+  onGoToLogin: b,
+  title: f,
+  mobileTitle: a
 }) => {
-  const { device: I } = b(), o = I <= L.TABLET, n = a === "google", s = a === "apple";
-  return /* @__PURE__ */ l(t, { $alignItems: "flex-start", children: [
-    /* @__PURE__ */ e(p, { $renderAs: "ah3-bold", $renderOnMobileAs: "ah4-bold", $color: "WHITE", $whiteSpace: "pre-line", children: A }),
-    /* @__PURE__ */ e(c, { heightX: o ? 1.5 : 2.5 }),
+  const { device: s } = L(), o = s <= I.TABLET, c = s <= I.MOBILE, p = n === "google", m = n === "apple";
+  return /* @__PURE__ */ l(t, { $alignItems: c ? "center" : "flex-start", children: [
+    /* @__PURE__ */ e(h, { $renderAs: "ah3-bold", $renderOnMobileAs: "ah4-bold", $color: "WHITE", $whiteSpace: "pre-line", children: c && a ? a : f }),
+    /* @__PURE__ */ e(d, { heightX: o ? 1.5 : 2.5 }),
     /* @__PURE__ */ l(
       t,
       {
@@ -35,13 +36,13 @@ const _ = ({
             r,
             {
               renderAs: "black-dark",
-              Icon: g,
+              Icon: _,
               width: o ? "100%" : 320,
               label: "Signup with Google",
-              onClick: h,
+              onClick: C,
               size: "small",
-              busy: n,
-              disabled: n,
+              busy: p,
+              disabled: p,
               analyticsLabel: i.START_SIGNUP_CTA_CLICKED,
               analyticsProps: { provider: "google" }
             }
@@ -52,11 +53,11 @@ const _ = ({
               renderAs: "black-dark",
               size: "small",
               width: o ? "100%" : 320,
-              Icon: f,
+              Icon: u,
               label: "Signup with Apple",
-              onClick: d,
-              busy: s,
-              disabled: s,
+              onClick: T,
+              busy: m,
+              disabled: m,
               analyticsLabel: i.START_SIGNUP_CTA_CLICKED,
               analyticsProps: { provider: "apple" }
             }
@@ -68,7 +69,7 @@ const _ = ({
               size: "small",
               width: o ? "100%" : 320,
               label: "Continue with Email",
-              onClick: m,
+              onClick: A,
               analyticsLabel: i.START_SIGNUP_CTA_CLICKED,
               analyticsProps: { provider: "email" }
             }
@@ -76,24 +77,24 @@ const _ = ({
         ]
       }
     ),
-    /* @__PURE__ */ e(c, { heightX: 1.5 }),
+    /* @__PURE__ */ e(d, { heightX: 1.5 }),
     /* @__PURE__ */ l(t, { $flexDirection: "row", $alignItems: "center", children: [
-      /* @__PURE__ */ e(p, { $renderAs: "ub3", $color: "WHITE", children: "Already have an account?" }),
+      /* @__PURE__ */ e(h, { $renderAs: "ub3", $color: "WHITE", children: "Already have an account?" }),
       " ",
       /* @__PURE__ */ e(
-        u,
+        S,
         {
           analyticsLabel: i.SIGNUP_TO_LOGIN_CTA_CLICKED,
           size: "small",
           label: "Log In",
           color: "WHITE",
-          onClick: T
+          onClick: b
         }
       )
     ] })
   ] });
-}, O = C(_);
+}, B = g($);
 export {
-  O as default
+  B as default
 };
 //# sourceMappingURL=signup-options.js.map

package/dist/features/auth/pla-signup/signup-options/signup-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"signup-options.js","sources":["../../../../../src/features/auth/pla-signup/signup-options/signup-options.tsx"],"sourcesContent":["import { memo, type FC } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport AppleIcon from '../../../../assets/line-icons/icons/apple-icon-white';\nimport GoogleIcon from '../../../../assets/line-icons/icons/google-icon';\nimport Button from '../../../ui/buttons/button/button';\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { EDeviceType } from '../../../ui/theme/constants';\nimport { PLA_ANALYTICS_EVENTS } from '../pla-analytics-events';\nimport type { ISignupOptionsProps } from './signup-options-types';\n\nconst SignupOptions: FC<ISignupOptionsProps> = ({\n  onEmailSignup,\n  onAppleSignup,\n  onGoogleSignup,\n  loadingProvider,\n  onGoToLogin,\n  title,\n}) => {\n  const { device } = useTheme();\n  const isCompact = device <= EDeviceType.TABLET;\n  const isLoadingGoogle = loadingProvider === 'google';\n  const isLoadingApple = loadingProvider === 'apple';\n\n  return (\n    <FlexView $alignItems=\"flex-start\">\n      <Text $renderAs=\"ah3-bold\" $renderOnMobileAs=\"ah4-bold\" $color=\"WHITE\" $whiteSpace=\"pre-line\">\n        {title}\n      </Text>\n      <Separator heightX={isCompact ? 1.5 : 2.5} />\n      <FlexView\n        $flexGapX={1}\n        $flex={1}\n        $justifyContent=\"center\"\n        $alignItems=\"flex-start\"\n        $width=\"100%\"\n      >\n        <Button\n          renderAs=\"black-dark\"\n          Icon={GoogleIcon}\n          width={isCompact ? '100%' : 320}\n          label=\"Signup with Google\"\n          onClick={onGoogleSignup}\n          size=\"small\"\n          busy={isLoadingGoogle}\n          disabled={isLoadingGoogle}\n          analyticsLabel={PLA_ANALYTICS_EVENTS.START_SIGNUP_CTA_CLICKED}\n          analyticsProps={{ provider: 'google' }}\n        />\n        <Button\n          renderAs=\"black-dark\"\n          size=\"small\"\n          width={isCompact ? '100%' : 320}\n          Icon={AppleIcon}\n          label=\"Signup with Apple\"\n          onClick={onAppleSignup}\n          busy={isLoadingApple}\n          disabled={isLoadingApple}\n          analyticsLabel={PLA_ANALYTICS_EVENTS.START_SIGNUP_CTA_CLICKED}\n          analyticsProps={{ provider: 'apple' }}\n        />\n        <Button\n          renderAs=\"black-dark\"\n          size=\"small\"\n          width={isCompact ? '100%' : 320}\n          label=\"Continue with Email\"\n          onClick={onEmailSignup}\n          analyticsLabel={PLA_ANALYTICS_EVENTS.START_SIGNUP_CTA_CLICKED}\n          analyticsProps={{ provider: 'email' }}\n        />\n      </FlexView>\n      <Separator heightX={1.5} />\n      <FlexView $flexDirection=\"row\" $alignItems=\"center\">\n        <Text $renderAs=\"ub3\" $color=\"WHITE\">\n          Already have an account?\n        </Text>\n        &nbsp;\n        <TextButton\n          analyticsLabel={PLA_ANALYTICS_EVENTS.SIGNUP_TO_LOGIN_CTA_CLICKED}\n          size=\"small\"\n          label=\"Log In\"\n          color=\"WHITE\"\n          onClick={onGoToLogin}\n        />\n      </FlexView>\n    </FlexView>\n  );\n};\n\nexport default memo(SignupOptions);\n"],"names":["SignupOptions","onEmailSignup","onAppleSignup","onGoogleSignup","loadingProvider","onGoToLogin","title","device","useTheme","isCompact","EDeviceType","isLoadingGoogle","isLoadingApple","jsxs","FlexView","jsx","Text","Separator","Button","GoogleIcon","PLA_ANALYTICS_EVENTS","AppleIcon","TextButton","signupOptions","memo"],"mappings":";;;;;;;;;;;;AAcA,MAAMA,IAAyC,CAAC;AAAA,EAC9C,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AACF,MAAM;AACE,QAAA,EAAE,QAAAC,MAAWC,KACbC,IAAYF,KAAUG,EAAY,QAClCC,IAAkBP,MAAoB,UACtCQ,IAAiBR,MAAoB;AAGzC,SAAA,gBAAAS,EAACC,GAAS,EAAA,aAAY,cACpB,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAK,WAAU,YAAW,mBAAkB,YAAW,QAAO,SAAQ,aAAY,YAChF,UACHV,EAAA,CAAA;AAAA,IACC,gBAAAS,EAAAE,GAAA,EAAU,SAASR,IAAY,MAAM,KAAK;AAAA,IAC3C,gBAAAI;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,QACX,OAAO;AAAA,QACP,iBAAgB;AAAA,QAChB,aAAY;AAAA,QACZ,QAAO;AAAA,QAEP,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,MAAMC;AAAA,cACN,OAAOV,IAAY,SAAS;AAAA,cAC5B,OAAM;AAAA,cACN,SAASN;AAAA,cACT,MAAK;AAAA,cACL,MAAMQ;AAAA,cACN,UAAUA;AAAA,cACV,gBAAgBS,EAAqB;AAAA,cACrC,gBAAgB,EAAE,UAAU,SAAS;AAAA,YAAA;AAAA,UACvC;AAAA,UACA,gBAAAL;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,MAAK;AAAA,cACL,OAAOT,IAAY,SAAS;AAAA,cAC5B,MAAMY;AAAAA,cACN,OAAM;AAAA,cACN,SAASnB;AAAA,cACT,MAAMU;AAAA,cACN,UAAUA;AAAA,cACV,gBAAgBQ,EAAqB;AAAA,cACrC,gBAAgB,EAAE,UAAU,QAAQ;AAAA,YAAA;AAAA,UACtC;AAAA,UACA,gBAAAL;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,MAAK;AAAA,cACL,OAAOT,IAAY,SAAS;AAAA,cAC5B,OAAM;AAAA,cACN,SAASR;AAAA,cACT,gBAAgBmB,EAAqB;AAAA,cACrC,gBAAgB,EAAE,UAAU,QAAQ;AAAA,YAAA;AAAA,UACtC;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACA,gBAAAL,EAACE,GAAU,EAAA,SAAS,IAAK,CAAA;AAAA,IACxB,gBAAAJ,EAAAC,GAAA,EAAS,gBAAe,OAAM,aAAY,UACzC,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAK,EAAA,WAAU,OAAM,QAAO,SAAQ,UAErC,4BAAA;AAAA,MAAO;AAAA,MAEP,gBAAAD;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,gBAAgBF,EAAqB;AAAA,UACrC,MAAK;AAAA,UACL,OAAM;AAAA,UACN,OAAM;AAAA,UACN,SAASf;AAAA,QAAA;AAAA,MACX;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ,GAEekB,IAAAC,EAAKxB,CAAa;"}
+{"version":3,"file":"signup-options.js","sources":["../../../../../src/features/auth/pla-signup/signup-options/signup-options.tsx"],"sourcesContent":["import { memo, type FC } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport AppleIcon from '../../../../assets/line-icons/icons/apple-icon-white';\nimport GoogleIcon from '../../../../assets/line-icons/icons/google-icon';\nimport Button from '../../../ui/buttons/button/button';\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { EDeviceType } from '../../../ui/theme/constants';\nimport { PLA_ANALYTICS_EVENTS } from '../pla-analytics-events';\nimport type { ISignupOptionsProps } from './signup-options-types';\n\nconst SignupOptions: FC<ISignupOptionsProps> = ({\n  onEmailSignup,\n  onAppleSignup,\n  onGoogleSignup,\n  loadingProvider,\n  onGoToLogin,\n  title,\n  mobileTitle,\n}) => {\n  const { device } = useTheme();\n  const isCompact = device <= EDeviceType.TABLET;\n  const isMobile = device <= EDeviceType.MOBILE;\n  const isLoadingGoogle = loadingProvider === 'google';\n  const isLoadingApple = loadingProvider === 'apple';\n\n  return (\n    <FlexView $alignItems={isMobile ? 'center' : 'flex-start'}>\n      <Text $renderAs=\"ah3-bold\" $renderOnMobileAs=\"ah4-bold\" $color=\"WHITE\" $whiteSpace=\"pre-line\">\n        {isMobile && mobileTitle ? mobileTitle : title}\n      </Text>\n      <Separator heightX={isCompact ? 1.5 : 2.5} />\n      <FlexView\n        $flexGapX={1}\n        $flex={1}\n        $justifyContent=\"center\"\n        $alignItems=\"flex-start\"\n        $width=\"100%\"\n      >\n        <Button\n          renderAs=\"black-dark\"\n          Icon={GoogleIcon}\n          width={isCompact ? '100%' : 320}\n          label=\"Signup with Google\"\n          onClick={onGoogleSignup}\n          size=\"small\"\n          busy={isLoadingGoogle}\n          disabled={isLoadingGoogle}\n          analyticsLabel={PLA_ANALYTICS_EVENTS.START_SIGNUP_CTA_CLICKED}\n          analyticsProps={{ provider: 'google' }}\n        />\n        <Button\n          renderAs=\"black-dark\"\n          size=\"small\"\n          width={isCompact ? '100%' : 320}\n          Icon={AppleIcon}\n          label=\"Signup with Apple\"\n          onClick={onAppleSignup}\n          busy={isLoadingApple}\n          disabled={isLoadingApple}\n          analyticsLabel={PLA_ANALYTICS_EVENTS.START_SIGNUP_CTA_CLICKED}\n          analyticsProps={{ provider: 'apple' }}\n        />\n        <Button\n          renderAs=\"black-dark\"\n          size=\"small\"\n          width={isCompact ? '100%' : 320}\n          label=\"Continue with Email\"\n          onClick={onEmailSignup}\n          analyticsLabel={PLA_ANALYTICS_EVENTS.START_SIGNUP_CTA_CLICKED}\n          analyticsProps={{ provider: 'email' }}\n        />\n      </FlexView>\n      <Separator heightX={1.5} />\n      <FlexView $flexDirection=\"row\" $alignItems=\"center\">\n        <Text $renderAs=\"ub3\" $color=\"WHITE\">\n          Already have an account?\n        </Text>\n        &nbsp;\n        <TextButton\n          analyticsLabel={PLA_ANALYTICS_EVENTS.SIGNUP_TO_LOGIN_CTA_CLICKED}\n          size=\"small\"\n          label=\"Log In\"\n          color=\"WHITE\"\n          onClick={onGoToLogin}\n        />\n      </FlexView>\n    </FlexView>\n  );\n};\n\nexport default memo(SignupOptions);\n"],"names":["SignupOptions","onEmailSignup","onAppleSignup","onGoogleSignup","loadingProvider","onGoToLogin","title","mobileTitle","device","useTheme","isCompact","EDeviceType","isMobile","isLoadingGoogle","isLoadingApple","jsxs","FlexView","jsx","Text","Separator","Button","GoogleIcon","PLA_ANALYTICS_EVENTS","AppleIcon","TextButton","signupOptions","memo"],"mappings":";;;;;;;;;;;;AAcA,MAAMA,IAAyC,CAAC;AAAA,EAC9C,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AACF,MAAM;AACE,QAAA,EAAE,QAAAC,MAAWC,KACbC,IAAYF,KAAUG,EAAY,QAClCC,IAAWJ,KAAUG,EAAY,QACjCE,IAAkBT,MAAoB,UACtCU,IAAiBV,MAAoB;AAE3C,SACG,gBAAAW,EAAAC,GAAA,EAAS,aAAaJ,IAAW,WAAW,cAC3C,UAAA;AAAA,IAAA,gBAAAK,EAACC,GAAK,EAAA,WAAU,YAAW,mBAAkB,YAAW,QAAO,SAAQ,aAAY,YAChF,UAAAN,KAAYL,IAAcA,IAAcD,GAC3C;AAAA,IACC,gBAAAW,EAAAE,GAAA,EAAU,SAAST,IAAY,MAAM,KAAK;AAAA,IAC3C,gBAAAK;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,QACX,OAAO;AAAA,QACP,iBAAgB;AAAA,QAChB,aAAY;AAAA,QACZ,QAAO;AAAA,QAEP,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,MAAMC;AAAA,cACN,OAAOX,IAAY,SAAS;AAAA,cAC5B,OAAM;AAAA,cACN,SAASP;AAAA,cACT,MAAK;AAAA,cACL,MAAMU;AAAA,cACN,UAAUA;AAAA,cACV,gBAAgBS,EAAqB;AAAA,cACrC,gBAAgB,EAAE,UAAU,SAAS;AAAA,YAAA;AAAA,UACvC;AAAA,UACA,gBAAAL;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,MAAK;AAAA,cACL,OAAOV,IAAY,SAAS;AAAA,cAC5B,MAAMa;AAAAA,cACN,OAAM;AAAA,cACN,SAASrB;AAAA,cACT,MAAMY;AAAA,cACN,UAAUA;AAAA,cACV,gBAAgBQ,EAAqB;AAAA,cACrC,gBAAgB,EAAE,UAAU,QAAQ;AAAA,YAAA;AAAA,UACtC;AAAA,UACA,gBAAAL;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,MAAK;AAAA,cACL,OAAOV,IAAY,SAAS;AAAA,cAC5B,OAAM;AAAA,cACN,SAAST;AAAA,cACT,gBAAgBqB,EAAqB;AAAA,cACrC,gBAAgB,EAAE,UAAU,QAAQ;AAAA,YAAA;AAAA,UACtC;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACA,gBAAAL,EAACE,GAAU,EAAA,SAAS,IAAK,CAAA;AAAA,IACxB,gBAAAJ,EAAAC,GAAA,EAAS,gBAAe,OAAM,aAAY,UACzC,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAK,EAAA,WAAU,OAAM,QAAO,SAAQ,UAErC,4BAAA;AAAA,MAAO;AAAA,MAEP,gBAAAD;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,gBAAgBF,EAAqB;AAAA,UACrC,MAAK;AAAA,UACL,OAAM;AAAA,UACN,OAAM;AAAA,UACN,SAASjB;AAAA,QAAA;AAAA,MACX;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ,GAEeoB,IAAAC,EAAK1B,CAAa;"}

package/dist/index.d.ts

@@ -1,40 +1,40 @@
-import { ButtonHTMLAttributes } from 'react';
-import { Channel } from '@cuemath/cue-message-broker';
+import type { ButtonHTMLAttributes } from 'react';
+import type { Channel } from '@cuemath/cue-message-broker';
 import { ChannelStatus } from '@cuemath/cue-message-broker';
 import { ComponentType } from 'react';
-import { Config } from '@lottiefiles/dotlottie-web';
+import type { Config } from '@lottiefiles/dotlottie-web';
 import { Context } from 'react';
-import { Data } from '@lottiefiles/dotlottie-web';
-import { default as default_2 } from 'react';
-import { DefaultTheme } from 'styled-components';
+import type { Data } from '@lottiefiles/dotlottie-web';
+import type { DefaultTheme } from 'styled-components';
 import { DetailedHTMLProps } from 'react';
-import { Dispatch } from 'react';
-import { EventListener as EventListener_2 } from '@lottiefiles/dotlottie-web';
-import { EventType } from '@lottiefiles/dotlottie-web';
+import type { Dispatch } from 'react';
+import type { EventListener as EventListener_2 } from '@lottiefiles/dotlottie-web';
+import type { EventType } from '@lottiefiles/dotlottie-web';
 import { FC } from 'react';
-import { FormEvent } from 'react';
+import type { FormEvent } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
-import { HTMLProps } from 'react';
+import type { HTMLProps } from 'react';
 import { IChannelMessage } from '@cuemath/cue-message-broker';
-import { IframeHTMLAttributes } from 'react';
-import { ImgHTMLAttributes } from 'react';
-import { InputHTMLAttributes } from 'react';
+import type { IframeHTMLAttributes } from 'react';
+import type { ImgHTMLAttributes } from 'react';
+import type { InputHTMLAttributes } from 'react';
 import { IProvidedProps } from 'google-maps-react';
 import { IStyledComponent } from 'styled-components';
 import { JSX } from 'react/jsx-runtime';
 import { MemoExoticComponent } from 'react';
-import { MutableRefObject } from 'react';
+import type { MutableRefObject } from 'react';
 import { NamedExoticComponent } from 'react';
 import { Omit as Omit_2 } from 'google-maps-react';
-import { PLUGIN_NAME } from '@cuemath/analytics-v2/dist/constants';
+import type { PLUGIN_NAME } from '@cuemath/analytics-v2/dist/constants';
 import { PropsWithChildren } from 'react';
+import { default as React_2 } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { ResourceModel } from '@cuemath/rest-api';
-import { SetStateAction } from 'react';
+import type { SetStateAction } from 'react';
 import { Substitute } from 'styled-components/dist/types';
 import { SVGProps } from 'react';
 import { VideoHTMLAttributes } from 'react';
@@ -85,7 +85,7 @@ declare type AnimationSegment = [number, number];
 export declare const AppLoader: FC<IAppLoaderProps>;
 
 export declare const ArcButton: NamedExoticComponent<IArcButtonProps & {
-children?: ReactNode | undefined;
+    children?: ReactNode | undefined;
 } & RefAttributes<HTMLDivElement>>;
 
 export declare const ArrowTooltip: NamedExoticComponent<IArrowTooltipProps>;
@@ -422,9 +422,9 @@ export declare const CueBoardFilledIcon: FC<SVGProps<SVGSVGElement>>;
 
 export declare const CueBoardIcon: FC<SVGProps<SVGSVGElement>>;
 
-export declare const CueCanvas: default_2.FC<ICueCanvas>;
+export declare const CueCanvas: React_2.FC<ICueCanvas>;
 
-export declare const CueCanvasController: default_2.FC<IToolbarProps>;
+export declare const CueCanvasController: React_2.FC<IToolbarProps>;
 
 export declare const CueCanvasHomeworkController: NamedExoticComponent<IHomeWorkControllerProps>;
 
@@ -441,7 +441,7 @@ declare interface CueCoinIconProps extends SVGProps<SVGSVGElement> {
     variant?: 'gold' | 'silver';
 }
 
-export declare const CuemathAppFeatures: NamedExoticComponent<    {}>;
+export declare const CuemathAppFeatures: NamedExoticComponent<{}>;
 
 export declare const CuemathLogo: FC<SVGProps<SVGSVGElement>>;
 
@@ -785,7 +785,7 @@ export declare const HintFillIcon: FC<SVGProps<SVGSVGElement>>;
 
 export declare const HomeIcon: FC<SVGProps<SVGSVGElement>>;
 
-export declare const HomeworkCardList: default_2.NamedExoticComponent<HWCardListProps>;
+export declare const HomeworkCardList: React_2.NamedExoticComponent<HWCardListProps>;
 
 declare const hues: readonly ["YELLOW", "ORANGE", "PURPLE", "GREEN", "BLUE"];
 
@@ -796,7 +796,7 @@ declare interface HWCardListProps extends INodeCardCallbacks {
     onTestPreview?: (sheetData: INodeDataProps, milestoneId?: string) => void;
     onTestStart?: (sheetData: INodeDataProps, homeworkId?: string) => void;
     onTestReview?: (sheetData: INodeDataProps, milestoneId?: string) => void;
-    homeworkRef?: default_2.RefObject<HTMLDivElement>;
+    homeworkRef?: React_2.RefObject<HTMLDivElement>;
     startHomePageJourney?: ({ studentId, stream, userType }: IHomepageStartJourneyProps) => void;
     canStartJourney?: boolean;
     canStartPuzzleAssignedJourney?: boolean;
@@ -3680,6 +3680,7 @@ declare interface ISignupOptionsProps {
     onGoToLogin: () => void;
     loadingProvider: TSocialAuthProvider | null;
     title?: string;
+    mobileTitle?: string;
 }
 
 export declare interface ISignUpProps {
@@ -5222,7 +5223,7 @@ export declare const OTPInput: NamedExoticComponent<IOTPInputProps>;
 export declare type OutcomeStage = keyof typeof STAGES;
 
 export declare const OverlayLoader: MemoExoticComponent<({ isLoading }: {
-isLoading?: boolean | undefined;
+    isLoading?: boolean | undefined;
 }) => JSX.Element | null>;
 
 export declare const ParentDashboard: MemoExoticComponent<(props: IParentDashboardProps) => JSX.Element>;
@@ -5545,7 +5546,7 @@ export declare const SheetIcon: FC<SVGProps<SVGSVGElement>>;
 export declare const SheetList: FC<ISheetsListProps>;
 
 export declare const SheetLocked: MemoExoticComponent<({ onHomeClick }: {
-onHomeClick: () => void;
+    onHomeClick: () => void;
 }) => JSX.Element>;
 
 export declare const SignUp: ({ mathGymEnrolledUser, circleEnrolledUser, circleOnLeapPremiumDays, circleUsername, countryCode, grade: defaultGrade, state, circleOnLeapPremiumEnabled, studentId, isSignUpProcessing, onCreateUser, onUpdateUser, onSignupStepsComplete, isPLAStudent, }: ISignUpProps) => JSX.Element;
@@ -7063,8 +7064,8 @@ export declare const useGetMilestoneResources: (initialId?: string, initialQuery
 
 export declare const useGetPastMilestoneCount: (initialId?: string, initialQuery?: void | undefined) => {
     get: (id: string, query: void, meta: TQuery_2) => Promise<void>;
-    resource: ResourceModel<    {
-    user_milestones_count: number;
+    resource: ResourceModel<{
+        user_milestones_count: number;
     }> | undefined;
     data: {
         user_milestones_count: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "3.5.0",
+  "version": "3.5.1-j2",
   "type": "module",
   "files": [
     "dist"
@@ -86,7 +86,7 @@
     "typescript": "5.9.2",
     "ua-parser-js": "1.0.39",
     "vite": "^5.0.0",
-    "vite-plugin-dts": "4.5.4",
+    "vite-plugin-dts": "3.6.4",
     "vite-plugin-svgr": "3.2.0",
     "vite-tsconfig-paths": "^4.2.2"
   },