@cuemath/leap 3.5.2 → 3.5.3

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":"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"}
+{"version":3,"file":"animated-avatar-message.js","sources":["../../../../../src/features/auth/comps/animated-avatar-message/animated-avatar-message.tsx"],"sourcesContent":["import {\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/features/parent-dashboard/modals/view-payment-method/view-payment-method.js

@@ -1,18 +1,18 @@
-import { jsxs as e, jsx as o, Fragment as $ } from "react/jsx-runtime";
-import { memo as h } from "react";
-import { useTheme as p } from "styled-components";
-import u from "../../../ui/buttons/text-button/text-button.js";
+import { jsxs as e, jsx as o, Fragment as h } from "react/jsx-runtime";
+import { memo as p } from "react";
+import { useTheme as u } from "styled-components";
+import b from "../../../ui/buttons/text-button/text-button.js";
 import t from "../../../ui/layout/flex-view.js";
-import b from "../../../ui/modals/use-modal-params.js";
+import f from "../../../ui/modals/use-modal-params.js";
 import n from "../../../ui/separator/separator.js";
 import i from "../../../ui/text/text.js";
-import { EDeviceType as f } from "../../../ui/theme/constants.js";
-const g = h(() => {
-  const { paymentMethodDetails: l, onCancel: a } = b(), {
-    exp_month: c,
-    exp_year: d,
-    last_4_digits: s
-  } = l || {}, { device: m } = p(), r = m <= f.MOBILE;
+import { EDeviceType as g } from "../../../ui/theme/constants.js";
+const l = p(() => {
+  const { paymentMethodDetails: a, onCancel: c } = f(), {
+    exp_month: d,
+    exp_year: s,
+    last_4_digits: m
+  } = a || {}, { device: $ } = u(), r = $ <= g.MOBILE;
   return /* @__PURE__ */ e(t, { $gapX: r ? 2.25 : 2.5, $gutterX: r ? 1 : 2.5, $background: "BLACK_2", children: [
     /* @__PURE__ */ o(
       i,
@@ -20,7 +20,7 @@ const g = h(() => {
         $renderAs: "ah4-bold",
         $renderOnMobileAs: "ac4-black",
         $color: r ? "WHITE_T_60" : "WHITE",
-        children: r ? "Payment Method" : "View Payment Method"
+        children: "Payment Method"
       }
     ),
     /* @__PURE__ */ o(n, { heightX: r ? 1 : 2.5 }),
@@ -40,36 +40,38 @@ const g = h(() => {
           /* @__PURE__ */ e(t, { children: [
             /* @__PURE__ */ e(i, { $renderAs: "ac4-black", $color: "WHITE", children: [
               "•••• ",
-              s
+              m
             ] }),
             /* @__PURE__ */ e(i, { $renderAs: "ub3-bold", $color: "WHITE", children: [
               "Card",
               " ",
               /* @__PURE__ */ e(i, { $renderAs: "ub3", $color: "WHITE", $inline: !0, children: [
                 "Exp: ",
-                c,
+                d,
                 "/",
-                d
+                s
               ] })
             ] })
           ] })
         ]
       }
     ),
-    r ? /* @__PURE__ */ e($, { children: [
+    r ? /* @__PURE__ */ e(h, { children: [
       /* @__PURE__ */ o(n, { heightX: 1.5 }),
       /* @__PURE__ */ o(
-        u,
+        b,
         {
           size: "small",
           label: "Cancel subscription",
           color: "WHITE_T_60",
-          onClick: a
+          onClick: c
         }
       )
     ] }) : null
   ] });
-}), I = g;
+});
+l.displayName = "ViewPaymentMethod";
+const I = l;
 export {
   I as default
 };

package/dist/features/parent-dashboard/modals/view-payment-method/view-payment-method.js.map

@@ -1 +1 @@
-{"version":3,"file":"view-payment-method.js","sources":["../../../../../src/features/parent-dashboard/modals/view-payment-method/view-payment-method.tsx"],"sourcesContent":["import { memo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport useModalParams from '../../../ui/modals/use-modal-params';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { EDeviceType } from '../../../ui/theme/constants';\nimport { type IViewPaymentMethodProps } from './view-payment-method-types';\n\nconst ViewPaymentMethod = memo(() => {\n  const { paymentMethodDetails, onCancel } = useModalParams<IViewPaymentMethodProps>();\n\n  const {\n    exp_month: expMonth,\n    exp_year: expYear,\n    last_4_digits: last4Digits,\n  } = paymentMethodDetails || {};\n\n  const { device } = useTheme();\n  const isMobile = device <= EDeviceType.MOBILE;\n\n  return (\n    <FlexView $gapX={isMobile ? 2.25 : 2.5} $gutterX={isMobile ? 1 : 2.5} $background=\"BLACK_2\">\n      <Text\n        $renderAs=\"ah4-bold\"\n        $renderOnMobileAs=\"ac4-black\"\n        $color={isMobile ? 'WHITE_T_60' : 'WHITE'}\n      >\n        {isMobile ? 'Payment Method' : 'View Payment Method'}\n      </Text>\n      <Separator heightX={isMobile ? 1 : 2.5} />\n      <FlexView\n        $flexDirection=\"row\"\n        $justifyContent=\"flex-start\"\n        $alignItems=\"center\"\n        $flexGapX={0.5}\n        $gapX={1}\n        $gutterX={1}\n        $background=\"BLACK_2\"\n        $borderColor=\"BLACK_5\"\n      >\n        <FlexView $widthX={3} $heightX={1.75} $background=\"BLACK_4\" $borderRadiusX={0.25} />\n        <FlexView>\n          <Text $renderAs=\"ac4-black\" $color=\"WHITE\">\n            •••• {last4Digits}\n          </Text>\n          <Text $renderAs=\"ub3-bold\" $color=\"WHITE\">\n            Card{' '}\n            <Text $renderAs=\"ub3\" $color=\"WHITE\" $inline>\n              Exp: {expMonth}/{expYear}\n            </Text>\n          </Text>\n        </FlexView>\n      </FlexView>\n      {isMobile ? (\n        <>\n          <Separator heightX={1.5} />\n          <TextButton\n            size=\"small\"\n            label=\"Cancel subscription\"\n            color=\"WHITE_T_60\"\n            onClick={onCancel}\n          />\n        </>\n      ) : null}\n    </FlexView>\n  );\n});\n\nexport default ViewPaymentMethod;\n"],"names":["ViewPaymentMethod","memo","paymentMethodDetails","onCancel","useModalParams","expMonth","expYear","last4Digits","device","useTheme","isMobile","EDeviceType","jsxs","FlexView","jsx","Text","Separator","Fragment","TextButton","ViewPaymentMethod$1"],"mappings":";;;;;;;;;AAWA,MAAMA,IAAoBC,EAAK,MAAM;AACnC,QAAM,EAAE,sBAAAC,GAAsB,UAAAC,EAAS,IAAIC,EAAwC,GAE7E;AAAA,IACJ,WAAWC;AAAA,IACX,UAAUC;AAAA,IACV,eAAeC;AAAA,EAAA,IACbL,KAAwB,CAAA,GAEtB,EAAE,QAAAM,MAAWC,KACbC,IAAWF,KAAUG,EAAY;AAGrC,SAAA,gBAAAC,EAACC,GAAS,EAAA,OAAOH,IAAW,OAAO,KAAK,UAAUA,IAAW,IAAI,KAAK,aAAY,WAChF,UAAA;AAAA,IAAA,gBAAAI;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,mBAAkB;AAAA,QAClB,QAAQL,IAAW,eAAe;AAAA,QAEjC,cAAW,mBAAmB;AAAA,MAAA;AAAA,IACjC;AAAA,IACC,gBAAAI,EAAAE,GAAA,EAAU,SAASN,IAAW,IAAI,KAAK;AAAA,IACxC,gBAAAE;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,gBAAe;AAAA,QACf,iBAAgB;AAAA,QAChB,aAAY;AAAA,QACZ,WAAW;AAAA,QACX,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAY;AAAA,QACZ,cAAa;AAAA,QAEb,UAAA;AAAA,UAAC,gBAAAC,EAAAD,GAAA,EAAS,SAAS,GAAG,UAAU,MAAM,aAAY,WAAU,gBAAgB,KAAM,CAAA;AAAA,4BACjFA,GACC,EAAA,UAAA;AAAA,YAAA,gBAAAD,EAACG,GAAK,EAAA,WAAU,aAAY,QAAO,SAAQ,UAAA;AAAA,cAAA;AAAA,cACnCR;AAAA,YAAA,GACR;AAAA,YACC,gBAAAK,EAAAG,GAAA,EAAK,WAAU,YAAW,QAAO,SAAQ,UAAA;AAAA,cAAA;AAAA,cACnC;AAAA,gCACJA,GAAK,EAAA,WAAU,OAAM,QAAO,SAAQ,SAAO,IAAC,UAAA;AAAA,gBAAA;AAAA,gBACrCV;AAAA,gBAAS;AAAA,gBAAEC;AAAA,cAAA,GACnB;AAAA,YAAA,GACF;AAAA,UAAA,GACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACCI,IAEG,gBAAAE,EAAAK,GAAA,EAAA,UAAA;AAAA,MAAC,gBAAAH,EAAAE,GAAA,EAAU,SAAS,IAAK,CAAA;AAAA,MACzB,gBAAAF;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAM;AAAA,UACN,OAAM;AAAA,UACN,SAASf;AAAA,QAAA;AAAA,MACX;AAAA,IAAA,EAAA,CACF,IACE;AAAA,EACN,EAAA,CAAA;AAEJ,CAAC,GAEDgB,IAAenB;"}
+{"version":3,"file":"view-payment-method.js","sources":["../../../../../src/features/parent-dashboard/modals/view-payment-method/view-payment-method.tsx"],"sourcesContent":["import { memo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport useModalParams from '../../../ui/modals/use-modal-params';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { EDeviceType } from '../../../ui/theme/constants';\nimport { type IViewPaymentMethodProps } from './view-payment-method-types';\n\nconst ViewPaymentMethod = memo(() => {\n  const { paymentMethodDetails, onCancel } = useModalParams<IViewPaymentMethodProps>();\n\n  const {\n    exp_month: expMonth,\n    exp_year: expYear,\n    last_4_digits: last4Digits,\n  } = paymentMethodDetails || {};\n\n  const { device } = useTheme();\n  const isMobile = device <= EDeviceType.MOBILE;\n\n  return (\n    <FlexView $gapX={isMobile ? 2.25 : 2.5} $gutterX={isMobile ? 1 : 2.5} $background=\"BLACK_2\">\n      <Text\n        $renderAs=\"ah4-bold\"\n        $renderOnMobileAs=\"ac4-black\"\n        $color={isMobile ? 'WHITE_T_60' : 'WHITE'}\n      >\n        Payment Method\n      </Text>\n      <Separator heightX={isMobile ? 1 : 2.5} />\n      <FlexView\n        $flexDirection=\"row\"\n        $justifyContent=\"flex-start\"\n        $alignItems=\"center\"\n        $flexGapX={0.5}\n        $gapX={1}\n        $gutterX={1}\n        $background=\"BLACK_2\"\n        $borderColor=\"BLACK_5\"\n      >\n        <FlexView $widthX={3} $heightX={1.75} $background=\"BLACK_4\" $borderRadiusX={0.25} />\n        <FlexView>\n          <Text $renderAs=\"ac4-black\" $color=\"WHITE\">\n            •••• {last4Digits}\n          </Text>\n          <Text $renderAs=\"ub3-bold\" $color=\"WHITE\">\n            Card{' '}\n            <Text $renderAs=\"ub3\" $color=\"WHITE\" $inline>\n              Exp: {expMonth}/{expYear}\n            </Text>\n          </Text>\n        </FlexView>\n      </FlexView>\n      {isMobile ? (\n        <>\n          <Separator heightX={1.5} />\n          <TextButton\n            size=\"small\"\n            label=\"Cancel subscription\"\n            color=\"WHITE_T_60\"\n            onClick={onCancel}\n          />\n        </>\n      ) : null}\n    </FlexView>\n  );\n});\n\nViewPaymentMethod.displayName = 'ViewPaymentMethod';\n\nexport default ViewPaymentMethod;\n"],"names":["ViewPaymentMethod","memo","paymentMethodDetails","onCancel","useModalParams","expMonth","expYear","last4Digits","device","useTheme","isMobile","EDeviceType","jsxs","FlexView","jsx","Text","Separator","Fragment","TextButton","ViewPaymentMethod$1"],"mappings":";;;;;;;;;AAWA,MAAMA,IAAoBC,EAAK,MAAM;AACnC,QAAM,EAAE,sBAAAC,GAAsB,UAAAC,EAAS,IAAIC,EAAwC,GAE7E;AAAA,IACJ,WAAWC;AAAA,IACX,UAAUC;AAAA,IACV,eAAeC;AAAA,EAAA,IACbL,KAAwB,CAAA,GAEtB,EAAE,QAAAM,MAAWC,KACbC,IAAWF,KAAUG,EAAY;AAGrC,SAAA,gBAAAC,EAACC,GAAS,EAAA,OAAOH,IAAW,OAAO,KAAK,UAAUA,IAAW,IAAI,KAAK,aAAY,WAChF,UAAA;AAAA,IAAA,gBAAAI;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,mBAAkB;AAAA,QAClB,QAAQL,IAAW,eAAe;AAAA,QACnC,UAAA;AAAA,MAAA;AAAA,IAED;AAAA,IACC,gBAAAI,EAAAE,GAAA,EAAU,SAASN,IAAW,IAAI,KAAK;AAAA,IACxC,gBAAAE;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,gBAAe;AAAA,QACf,iBAAgB;AAAA,QAChB,aAAY;AAAA,QACZ,WAAW;AAAA,QACX,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAY;AAAA,QACZ,cAAa;AAAA,QAEb,UAAA;AAAA,UAAC,gBAAAC,EAAAD,GAAA,EAAS,SAAS,GAAG,UAAU,MAAM,aAAY,WAAU,gBAAgB,KAAM,CAAA;AAAA,4BACjFA,GACC,EAAA,UAAA;AAAA,YAAA,gBAAAD,EAACG,GAAK,EAAA,WAAU,aAAY,QAAO,SAAQ,UAAA;AAAA,cAAA;AAAA,cACnCR;AAAA,YAAA,GACR;AAAA,YACC,gBAAAK,EAAAG,GAAA,EAAK,WAAU,YAAW,QAAO,SAAQ,UAAA;AAAA,cAAA;AAAA,cACnC;AAAA,gCACJA,GAAK,EAAA,WAAU,OAAM,QAAO,SAAQ,SAAO,IAAC,UAAA;AAAA,gBAAA;AAAA,gBACrCV;AAAA,gBAAS;AAAA,gBAAEC;AAAA,cAAA,GACnB;AAAA,YAAA,GACF;AAAA,UAAA,GACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACCI,IAEG,gBAAAE,EAAAK,GAAA,EAAA,UAAA;AAAA,MAAC,gBAAAH,EAAAE,GAAA,EAAU,SAAS,IAAK,CAAA;AAAA,MACzB,gBAAAF;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAM;AAAA,UACN,OAAM;AAAA,UACN,SAASf;AAAA,QAAA;AAAA,MACX;AAAA,IAAA,EAAA,CACF,IACE;AAAA,EACN,EAAA,CAAA;AAEJ,CAAC;AAEDH,EAAkB,cAAc;AAEhC,MAAAmB,IAAenB;"}

package/dist/features/wins-dashboard/student-badges/hooks/use-student-badge-list-hook.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-student-badge-list-hook.js","sources":["../../../../../src/features/wins-dashboard/student-badges/hooks/use-student-badge-list-hook.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState, type FC, type RefObject } from 'react';\nimport type { RuleSet } from 'styled-components';\nimport { css } from 'styled-components';\n\nimport { BADGE_TYPE_TAB_ICON, STUDENT_BADGE_TYPE } from '../../constants';\n\nconst HEADER_HEIGHT = 64;\nconst TAB_BAR_HEIGHT = 48;\nconst TOTAL_TAB_BAR_HEIGHT = HEADER_HEIGHT + TAB_BAR_HEIGHT;\n\n// Screen sizes constants\nconst SCREEN_SIZES = {\n  TABLET: 768,\n  LAPTOP: 1024,\n  LAPTOPL: 1440,\n};\n\ninterface CategoryConfig {\n  badgeWidth: number;\n  badgeCategoryGap: number;\n  badgeCategoryWidth: number;\n  maxBadgeNameLines: number;\n  containerStyle: RuleSet<object>;\n}\n\nconst getBadgeContainerConfig = (containerWidth: number): CategoryConfig => {\n  if (containerWidth > SCREEN_SIZES.LAPTOPL) {\n    return {\n      badgeWidth: 140,\n      badgeCategoryGap: 40,\n      badgeCategoryWidth: 1040,\n      maxBadgeNameLines: 1,\n      containerStyle: css`\n        grid-template-columns: repeat(auto-fit, 140px);\n        grid-column-gap: 40px;\n        margin-top: 32px;\n      `,\n    };\n  }\n\n  if (containerWidth > SCREEN_SIZES.LAPTOP) {\n    const gutter = 120;\n    const badgeGap = 40;\n    const badgeWidth = (containerWidth - (2 * gutter + 5 * badgeGap)) / 6;\n\n    return {\n      badgeWidth,\n      badgeCategoryGap: 40,\n      badgeCategoryWidth: containerWidth - 2 * gutter,\n      maxBadgeNameLines: 1,\n      containerStyle: css`\n        grid-template-columns: repeat(auto-fit, ${badgeWidth}px);\n        grid-column-gap: 40px;\n        margin-top: 32px;\n      `,\n    };\n  }\n\n  if (containerWidth > SCREEN_SIZES.TABLET) {\n    return {\n      badgeWidth: 104,\n      badgeCategoryGap: 24,\n      badgeCategoryWidth: 784,\n      maxBadgeNameLines: 2,\n      containerStyle: css`\n        grid-column-gap: 32px;\n        grid-template-columns: repeat(auto-fit, 104px);\n        margin-top: 24px;\n      `,\n    };\n  }\n\n  const gutter = 40;\n  const badgeGap = 26;\n  const badgeWidth = (containerWidth - (2 * gutter + 5 * badgeGap)) / 6;\n\n  return {\n    badgeWidth,\n    badgeCategoryGap: 24,\n    badgeCategoryWidth: containerWidth - 2 * gutter,\n    maxBadgeNameLines: 2,\n    containerStyle: css`\n      grid-column-gap: 26px;\n      grid-template-columns: repeat(auto-fit, ${badgeWidth}px);\n      margin-top: 24px;\n    `,\n  };\n};\n\nexport default function useStudentBadgeListHook({\n  currentScreenWidth,\n  handleScrollTo,\n  scrollPosition,\n  userBadges,\n}: {\n  currentScreenWidth: number;\n  handleScrollTo: (position: number) => void;\n  scrollPosition: number;\n  userBadges: Record<string, unknown[]>;\n}) {\n  // Create refs for all possible badge categories\n  const commonTabRef = useRef<HTMLDivElement | null>(null);\n  const rareTabRef = useRef<HTMLDivElement | null>(null);\n  const epicTabRef = useRef<HTMLDivElement | null>(null);\n  const legendaryTabRef = useRef<HTMLDivElement | null>(null);\n  const mythicTabRef = useRef<HTMLDivElement | null>(null);\n  const mysteryTabRef = useRef<HTMLDivElement | null>(null);\n\n  const commonBadgeRef = useRef<HTMLDivElement | null>(null);\n  const rareBadgeRef = useRef<HTMLDivElement | null>(null);\n  const epicBadgeRef = useRef<HTMLDivElement | null>(null);\n  const legendaryBadgeRef = useRef<HTMLDivElement | null>(null);\n  const mythicBadgeRef = useRef<HTMLDivElement | null>(null);\n  const mysteryBadgeRef = useRef<HTMLDivElement | null>(null);\n\n  const tabBarRefs: Record<string, RefObject<HTMLDivElement | null>> = useMemo(\n    () => ({\n      [STUDENT_BADGE_TYPE.COMMON]: commonTabRef,\n      [STUDENT_BADGE_TYPE.RARE]: rareTabRef,\n      [STUDENT_BADGE_TYPE.EPIC]: epicTabRef,\n      [STUDENT_BADGE_TYPE.LEGENDARY]: legendaryTabRef,\n      [STUDENT_BADGE_TYPE.MYTHIC]: mythicTabRef,\n      [STUDENT_BADGE_TYPE.MYSTERY]: mysteryTabRef,\n    }),\n    [],\n  );\n\n  const badgeCategoryRefs: Record<string, RefObject<HTMLDivElement | null>> = useMemo(\n    () => ({\n      [STUDENT_BADGE_TYPE.COMMON]: commonBadgeRef,\n      [STUDENT_BADGE_TYPE.RARE]: rareBadgeRef,\n      [STUDENT_BADGE_TYPE.EPIC]: epicBadgeRef,\n      [STUDENT_BADGE_TYPE.LEGENDARY]: legendaryBadgeRef,\n      [STUDENT_BADGE_TYPE.MYTHIC]: mythicBadgeRef,\n      [STUDENT_BADGE_TYPE.MYSTERY]: mysteryBadgeRef,\n    }),\n    [],\n  );\n\n  const [showTabBar, setShowTabBar] = useState(false);\n  const [currentSelectedBadgeType, setCurrentSelectedBadgeType] = useState(\n    STUDENT_BADGE_TYPE.COMMON,\n  );\n\n  useEffect(() => {\n    const categoryReached = Object.keys(badgeCategoryRefs)\n      .reverse()\n      .find(category => {\n        const categoryRef = badgeCategoryRefs[category];\n        const categoryTopOffset = categoryRef?.current?.offsetTop;\n\n        if (typeof categoryTopOffset !== 'number') return false;\n\n        return (\n          scrollPosition >=\n          categoryTopOffset -\n            (category === STUDENT_BADGE_TYPE.COMMON ? HEADER_HEIGHT : TOTAL_TAB_BAR_HEIGHT)\n        );\n      });\n\n    if (categoryReached && categoryReached !== currentSelectedBadgeType) {\n      setCurrentSelectedBadgeType(categoryReached);\n    }\n\n    if (categoryReached && !showTabBar) {\n      setShowTabBar(true);\n    }\n\n    if (!categoryReached && showTabBar) {\n      setShowTabBar(false);\n    }\n  }, [badgeCategoryRefs, currentSelectedBadgeType, scrollPosition, showTabBar]);\n\n  const onTabClick = useCallback(\n    (category: string) => {\n      const categoryRef = badgeCategoryRefs[category];\n      const categoryTopOffset = categoryRef?.current?.offsetTop;\n\n      if (typeof categoryTopOffset === 'number') {\n        const scrollTopPosition =\n          categoryTopOffset -\n          (category === STUDENT_BADGE_TYPE.COMMON ? HEADER_HEIGHT : TOTAL_TAB_BAR_HEIGHT);\n\n        handleScrollTo(scrollTopPosition);\n      }\n    },\n    [badgeCategoryRefs, handleScrollTo],\n  );\n\n  const scrollToTop = useCallback(() => {\n    const scrollTopPosition = 0;\n\n    handleScrollTo(scrollTopPosition);\n  }, [handleScrollTo]);\n\n  const getTabBarData = (): Array<{\n    id: string;\n    title: string;\n    Icon: FC<{ color?: string; selected?: boolean }>;\n    ref: RefObject<HTMLDivElement | null>;\n  }> => {\n    const tabBarData: Array<{\n      id: string;\n      title: string;\n      Icon: FC<{ color?: string; selected?: boolean }>;\n      ref: RefObject<HTMLDivElement | null>;\n    }> = [];\n\n    Object.keys(userBadges).forEach(category => {\n      const Icon = BADGE_TYPE_TAB_ICON[category];\n      const ref = tabBarRefs[category];\n\n      if (ref) {\n        tabBarData.push({\n          id: category,\n          title: category,\n          Icon,\n          ref,\n        });\n      }\n    });\n\n    return tabBarData;\n  };\n\n  return {\n    badgeCategoryRefs,\n    categoryConfig: getBadgeContainerConfig(currentScreenWidth),\n    currentSelectedBadgeType,\n    onTabClick,\n    scrollToTop,\n    showTabBar,\n    tabs: getTabBarData(),\n    totalBadgeCategories: Object.keys(userBadges).length,\n  };\n}\n"],"names":["HEADER_HEIGHT","TAB_BAR_HEIGHT","TOTAL_TAB_BAR_HEIGHT","SCREEN_SIZES","getBadgeContainerConfig","containerWidth","css","badgeWidth","gutter","useStudentBadgeListHook","currentScreenWidth","handleScrollTo","scrollPosition","userBadges","commonTabRef","useRef","rareTabRef","epicTabRef","legendaryTabRef","mythicTabRef","mysteryTabRef","commonBadgeRef","rareBadgeRef","epicBadgeRef","legendaryBadgeRef","mythicBadgeRef","mysteryBadgeRef","tabBarRefs","useMemo","STUDENT_BADGE_TYPE","badgeCategoryRefs","showTabBar","setShowTabBar","useState","currentSelectedBadgeType","setCurrentSelectedBadgeType","useEffect","categoryReached","category","categoryRef","categoryTopOffset","_a","onTabClick","useCallback","scrollTopPosition","scrollToTop","getTabBarData","tabBarData","Icon","BADGE_TYPE_TAB_ICON","ref"],"mappings":";;;AAMA,MAAMA,IAAgB,IAChBC,IAAiB,IACjBC,IAAuBF,IAAgBC,GAGvCE,IAAe;AAAA,EACnB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AACX,GAUMC,IAA0B,CAACC,MAA2C;AACtE,MAAAA,IAAiBF,EAAa;AACzB,WAAA;AAAA,MACL,YAAY;AAAA,MACZ,kBAAkB;AAAA,MAClB,oBAAoB;AAAA,MACpB,mBAAmB;AAAA,MACnB,gBAAgBG;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAQhB,MAAAD,IAAiBF,EAAa,QAAQ;AAGxC,UAAMI,KAAcF,IAAkB,OAA8B;AAE7D,WAAA;AAAA,MACL,YAAAE;AAAAA,MACA,kBAAkB;AAAA,MAClB,oBAAoBF,IAAiB,IAAIG;AAAAA,MACzC,mBAAmB;AAAA,MACnB,gBAAgBF;AAAA,kDAC4BC,CAAU;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAK1D;AAEI,MAAAF,IAAiBF,EAAa;AACzB,WAAA;AAAA,MACL,YAAY;AAAA,MACZ,kBAAkB;AAAA,MAClB,oBAAoB;AAAA,MACpB,mBAAmB;AAAA,MACnB,gBAAgBG;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAQpB,QAAME,IAAS,IAETD,KAAcF,KAAkB,IAAIG,IAAS,IADlC,OACmD;AAE7D,SAAA;AAAA,IACL,YAAAD;AAAA,IACA,kBAAkB;AAAA,IAClB,oBAAoBF,IAAiB,IAAIG;AAAA,IACzC,mBAAmB;AAAA,IACnB,gBAAgBF;AAAA;AAAA,gDAE4BC,CAAU;AAAA;AAAA;AAAA,EAAA;AAI1D;AAEA,SAAwBE,EAAwB;AAAA,EAC9C,oBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC;AACF,GAKG;AAEK,QAAAC,IAAeC,EAA8B,IAAI,GACjDC,IAAaD,EAA8B,IAAI,GAC/CE,IAAaF,EAA8B,IAAI,GAC/CG,IAAkBH,EAA8B,IAAI,GACpDI,IAAeJ,EAA8B,IAAI,GACjDK,IAAgBL,EAA8B,IAAI,GAElDM,IAAiBN,EAA8B,IAAI,GACnDO,IAAeP,EAA8B,IAAI,GACjDQ,IAAeR,EAA8B,IAAI,GACjDS,IAAoBT,EAA8B,IAAI,GACtDU,IAAiBV,EAA8B,IAAI,GACnDW,IAAkBX,EAA8B,IAAI,GAEpDY,IAA+DC;AAAA,IACnE,OAAO;AAAA,MACL,CAACC,EAAmB,MAAM,GAAGf;AAAA,MAC7B,CAACe,EAAmB,IAAI,GAAGb;AAAA,MAC3B,CAACa,EAAmB,IAAI,GAAGZ;AAAA,MAC3B,CAACY,EAAmB,SAAS,GAAGX;AAAA,MAChC,CAACW,EAAmB,MAAM,GAAGV;AAAA,MAC7B,CAACU,EAAmB,OAAO,GAAGT;AAAA,IAAA;AAAA,IAEhC,CAAC;AAAA,EAAA,GAGGU,IAAsEF;AAAA,IAC1E,OAAO;AAAA,MACL,CAACC,EAAmB,MAAM,GAAGR;AAAA,MAC7B,CAACQ,EAAmB,IAAI,GAAGP;AAAA,MAC3B,CAACO,EAAmB,IAAI,GAAGN;AAAA,MAC3B,CAACM,EAAmB,SAAS,GAAGL;AAAA,MAChC,CAACK,EAAmB,MAAM,GAAGJ;AAAA,MAC7B,CAACI,EAAmB,OAAO,GAAGH;AAAA,IAAA;AAAA,IAEhC,CAAC;AAAA,EAAA,GAGG,CAACK,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5C,CAACC,GAA0BC,CAA2B,IAAIF;AAAA,IAC9DJ,EAAmB;AAAA,EAAA;AAGrB,EAAAO,EAAU,MAAM;AACR,UAAAC,IAAkB,OAAO,KAAKP,CAAiB,EAClD,QAAQ,EACR,KAAK,CAAYQ,MAAA;;AACV,YAAAC,IAAcT,EAAkBQ,CAAQ,GACxCE,KAAoBC,IAAAF,KAAA,gBAAAA,EAAa,YAAb,gBAAAE,EAAsB;AAE5C,aAAA,OAAOD,KAAsB,WAAiB,KAGhD5B,KACA4B,KACGF,MAAaT,EAAmB,SAAS7B,IAAgBE;AAAA,IAAA,CAE/D;AAEC,IAAAmC,KAAmBA,MAAoBH,KACzCC,EAA4BE,CAAe,GAGzCA,KAAmB,CAACN,KACtBC,EAAc,EAAI,GAGhB,CAACK,KAAmBN,KACtBC,EAAc,EAAK;AAAA,KAEpB,CAACF,GAAmBI,GAA0BtB,GAAgBmB,CAAU,CAAC;AAE5E,QAAMW,IAAaC;AAAA,IACjB,CAACL,MAAqB;;AACd,YAAAC,IAAcT,EAAkBQ,CAAQ,GACxCE,KAAoBC,IAAAF,KAAA,gBAAAA,EAAa,YAAb,gBAAAE,EAAsB;AAE5C,UAAA,OAAOD,KAAsB,UAAU;AACzC,cAAMI,IACJJ,KACCF,MAAaT,EAAmB,SAAS7B,IAAgBE;AAE5D,QAAAS,EAAeiC,CAAiB;AAAA,MAClC;AAAA,IACF;AAAA,IACA,CAACd,GAAmBnB,CAAc;AAAA,EAAA,GAG9BkC,IAAcF,EAAY,MAAM;AAGpC,IAAAhC,EAAe,CAAiB;AAAA,EAAA,GAC/B,CAACA,CAAc,CAAC,GAEbmC,IAAgB,MAKhB;AACJ,UAAMC,IAKD,CAAA;AAEL,kBAAO,KAAKlC,CAAU,EAAE,QAAQ,CAAYyB,MAAA;AACpC,YAAAU,IAAOC,EAAoBX,CAAQ,GACnCY,IAAMvB,EAAWW,CAAQ;AAE/B,MAAIY,KACFH,EAAW,KAAK;AAAA,QACd,IAAIT;AAAA,QACJ,OAAOA;AAAA,QACP,MAAAU;AAAA,QACA,KAAAE;AAAA,MAAA,CACD;AAAA,IACH,CACD,GAEMH;AAAA,EAAA;AAGF,SAAA;AAAA,IACL,mBAAAjB;AAAA,IACA,gBAAgB1B,EAAwBM,CAAkB;AAAA,IAC1D,0BAAAwB;AAAA,IACA,YAAAQ;AAAA,IACA,aAAAG;AAAA,IACA,YAAAd;AAAA,IACA,MAAMe,EAAc;AAAA,IACpB,sBAAsB,OAAO,KAAKjC,CAAU,EAAE;AAAA,EAAA;AAElD;"}
+{"version":3,"file":"use-student-badge-list-hook.js","sources":["../../../../../src/features/wins-dashboard/student-badges/hooks/use-student-badge-list-hook.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState, type FC, type RefObject } from 'react';\nimport type { RuleSet } from 'styled-components';\nimport { css } from 'styled-components';\n\nimport { BADGE_TYPE_TAB_ICON, STUDENT_BADGE_TYPE } from '../../constants';\n\nconst HEADER_HEIGHT = 64;\nconst TAB_BAR_HEIGHT = 48;\nconst TOTAL_TAB_BAR_HEIGHT = HEADER_HEIGHT + TAB_BAR_HEIGHT;\n\n// Screen sizes constants\nconst SCREEN_SIZES = {\n  TABLET: 768,\n  LAPTOP: 1024,\n  LAPTOPL: 1440,\n};\n\ninterface CategoryConfig {\n  badgeWidth: number;\n  badgeCategoryGap: number;\n  badgeCategoryWidth: number;\n  maxBadgeNameLines: number;\n  containerStyle: RuleSet<object>;\n}\n\nconst getBadgeContainerConfig = (containerWidth: number): CategoryConfig => {\n  if (containerWidth > SCREEN_SIZES.LAPTOPL) {\n    return {\n      badgeWidth: 140,\n      badgeCategoryGap: 40,\n      badgeCategoryWidth: 1040,\n      maxBadgeNameLines: 1,\n      containerStyle: css`\n        grid-template-columns: repeat(auto-fit, 140px);\n        grid-column-gap: 40px;\n        margin-top: 32px;\n      `,\n    };\n  }\n\n  if (containerWidth > SCREEN_SIZES.LAPTOP) {\n    const gutter = 120;\n    const badgeGap = 40;\n    const badgeWidth = (containerWidth - (2 * gutter + 5 * badgeGap)) / 6;\n\n    return {\n      badgeWidth,\n      badgeCategoryGap: 40,\n      badgeCategoryWidth: containerWidth - 2 * gutter,\n      maxBadgeNameLines: 1,\n      containerStyle: css`\n        grid-template-columns: repeat(auto-fit, ${badgeWidth}px);\n        grid-column-gap: 40px;\n        margin-top: 32px;\n      `,\n    };\n  }\n\n  if (containerWidth > SCREEN_SIZES.TABLET) {\n    return {\n      badgeWidth: 104,\n      badgeCategoryGap: 24,\n      badgeCategoryWidth: 784,\n      maxBadgeNameLines: 2,\n      containerStyle: css`\n        grid-column-gap: 32px;\n        grid-template-columns: repeat(auto-fit, 104px);\n        margin-top: 24px;\n      `,\n    };\n  }\n\n  const gutter = 40;\n  const badgeGap = 26;\n  const badgeWidth = (containerWidth - (2 * gutter + 5 * badgeGap)) / 6;\n\n  return {\n    badgeWidth,\n    badgeCategoryGap: 24,\n    badgeCategoryWidth: containerWidth - 2 * gutter,\n    maxBadgeNameLines: 2,\n    containerStyle: css`\n      grid-column-gap: 26px;\n      grid-template-columns: repeat(auto-fit, ${badgeWidth}px);\n      margin-top: 24px;\n    `,\n  };\n};\n\nexport default function useStudentBadgeListHook({\n  currentScreenWidth,\n  handleScrollTo,\n  scrollPosition,\n  userBadges,\n}: {\n  currentScreenWidth: number;\n  handleScrollTo: (position: number) => void;\n  scrollPosition: number;\n  userBadges: Record<string, unknown[]>;\n}) {\n  // Create refs for all possible badge categories\n  const commonTabRef = useRef<HTMLDivElement | null>(null);\n  const rareTabRef = useRef<HTMLDivElement | null>(null);\n  const epicTabRef = useRef<HTMLDivElement | null>(null);\n  const legendaryTabRef = useRef<HTMLDivElement | null>(null);\n  const mythicTabRef = useRef<HTMLDivElement | null>(null);\n  const mysteryTabRef = useRef<HTMLDivElement | null>(null);\n\n  const commonBadgeRef = useRef<HTMLDivElement | null>(null);\n  const rareBadgeRef = useRef<HTMLDivElement | null>(null);\n  const epicBadgeRef = useRef<HTMLDivElement | null>(null);\n  const legendaryBadgeRef = useRef<HTMLDivElement | null>(null);\n  const mythicBadgeRef = useRef<HTMLDivElement | null>(null);\n  const mysteryBadgeRef = useRef<HTMLDivElement | null>(null);\n\n  const tabBarRefs: Record<string, RefObject<HTMLDivElement | null>> = useMemo(\n    () => ({\n      [STUDENT_BADGE_TYPE.COMMON]: commonTabRef,\n      [STUDENT_BADGE_TYPE.RARE]: rareTabRef,\n      [STUDENT_BADGE_TYPE.EPIC]: epicTabRef,\n      [STUDENT_BADGE_TYPE.LEGENDARY]: legendaryTabRef,\n      [STUDENT_BADGE_TYPE.MYTHIC]: mythicTabRef,\n      [STUDENT_BADGE_TYPE.MYSTERY]: mysteryTabRef,\n    }),\n    [],\n  );\n\n  const badgeCategoryRefs: Record<string, RefObject<HTMLDivElement | null>> = useMemo(\n    () => ({\n      [STUDENT_BADGE_TYPE.COMMON]: commonBadgeRef,\n      [STUDENT_BADGE_TYPE.RARE]: rareBadgeRef,\n      [STUDENT_BADGE_TYPE.EPIC]: epicBadgeRef,\n      [STUDENT_BADGE_TYPE.LEGENDARY]: legendaryBadgeRef,\n      [STUDENT_BADGE_TYPE.MYTHIC]: mythicBadgeRef,\n      [STUDENT_BADGE_TYPE.MYSTERY]: mysteryBadgeRef,\n    }),\n    [],\n  );\n\n  const [showTabBar, setShowTabBar] = useState(false);\n  const [currentSelectedBadgeType, setCurrentSelectedBadgeType] = useState(\n    STUDENT_BADGE_TYPE.COMMON,\n  );\n\n  useEffect(() => {\n    const categoryReached = Object.keys(badgeCategoryRefs)\n      .reverse()\n      .find(category => {\n        const categoryRef = badgeCategoryRefs[category];\n        const categoryTopOffset = categoryRef?.current?.offsetTop;\n\n        if (typeof categoryTopOffset !== 'number') return false;\n\n        return (\n          scrollPosition >=\n          categoryTopOffset -\n            (category === STUDENT_BADGE_TYPE.COMMON ? HEADER_HEIGHT : TOTAL_TAB_BAR_HEIGHT)\n        );\n      });\n\n    if (categoryReached && categoryReached !== currentSelectedBadgeType) {\n      setCurrentSelectedBadgeType(categoryReached);\n    }\n\n    if (categoryReached && !showTabBar) {\n      setShowTabBar(true);\n    }\n\n    if (!categoryReached && showTabBar) {\n      setShowTabBar(false);\n    }\n  }, [badgeCategoryRefs, currentSelectedBadgeType, scrollPosition, showTabBar]);\n\n  const onTabClick = useCallback(\n    (category: string) => {\n      const categoryRef = badgeCategoryRefs[category];\n      const categoryTopOffset = categoryRef?.current?.offsetTop;\n\n      if (typeof categoryTopOffset === 'number') {\n        const scrollTopPosition =\n          categoryTopOffset -\n          (category === STUDENT_BADGE_TYPE.COMMON ? HEADER_HEIGHT : TOTAL_TAB_BAR_HEIGHT);\n\n        handleScrollTo(scrollTopPosition);\n      }\n    },\n    [badgeCategoryRefs, handleScrollTo],\n  );\n\n  const scrollToTop = useCallback(() => {\n    const scrollTopPosition = 0;\n\n    handleScrollTo(scrollTopPosition);\n  }, [handleScrollTo]);\n\n  const getTabBarData = (): Array<{\n    id: string;\n    title: string;\n    Icon: FC<{ color?: string; selected?: boolean }>;\n    ref: RefObject<HTMLDivElement | null>;\n  }> => {\n    const tabBarData: Array<{\n      id: string;\n      title: string;\n      Icon: FC<{ color?: string; selected?: boolean }>;\n      ref: RefObject<HTMLDivElement | null>;\n    }> = [];\n\n    Object.keys(userBadges).forEach(category => {\n      const Icon = BADGE_TYPE_TAB_ICON[category]! as FC<{ color?: string; selected?: boolean }>;\n      const ref = tabBarRefs[category];\n\n      if (ref) {\n        tabBarData.push({\n          id: category,\n          title: category,\n          Icon,\n          ref,\n        });\n      }\n    });\n\n    return tabBarData;\n  };\n\n  return {\n    badgeCategoryRefs,\n    categoryConfig: getBadgeContainerConfig(currentScreenWidth),\n    currentSelectedBadgeType,\n    onTabClick,\n    scrollToTop,\n    showTabBar,\n    tabs: getTabBarData(),\n    totalBadgeCategories: Object.keys(userBadges).length,\n  };\n}\n"],"names":["HEADER_HEIGHT","TAB_BAR_HEIGHT","TOTAL_TAB_BAR_HEIGHT","SCREEN_SIZES","getBadgeContainerConfig","containerWidth","css","badgeWidth","gutter","useStudentBadgeListHook","currentScreenWidth","handleScrollTo","scrollPosition","userBadges","commonTabRef","useRef","rareTabRef","epicTabRef","legendaryTabRef","mythicTabRef","mysteryTabRef","commonBadgeRef","rareBadgeRef","epicBadgeRef","legendaryBadgeRef","mythicBadgeRef","mysteryBadgeRef","tabBarRefs","useMemo","STUDENT_BADGE_TYPE","badgeCategoryRefs","showTabBar","setShowTabBar","useState","currentSelectedBadgeType","setCurrentSelectedBadgeType","useEffect","categoryReached","category","categoryRef","categoryTopOffset","_a","onTabClick","useCallback","scrollTopPosition","scrollToTop","getTabBarData","tabBarData","Icon","BADGE_TYPE_TAB_ICON","ref"],"mappings":"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"}

package/dist/index.d.ts

@@ -1,39 +1,39 @@
-import type { ButtonHTMLAttributes } from 'react';
-import type { Channel } from '@cuemath/cue-message-broker';
+import { ButtonHTMLAttributes } from 'react';
+import { Channel } from '@cuemath/cue-message-broker';
 import { ChannelStatus } from '@cuemath/cue-message-broker';
 import { ComponentType } from 'react';
-import type { Config } from '@lottiefiles/dotlottie-web';
+import { Config } from '@lottiefiles/dotlottie-web';
 import { Context } from 'react';
-import type { Data } from '@lottiefiles/dotlottie-web';
-import type { DefaultTheme } from 'styled-components';
+import { Data } from '@lottiefiles/dotlottie-web';
+import { DefaultTheme } from 'styled-components';
 import { DetailedHTMLProps } from 'react';
-import type { Dispatch } from 'react';
-import type { EventListener as EventListener_2 } from '@lottiefiles/dotlottie-web';
-import type { EventType } from '@lottiefiles/dotlottie-web';
+import { Dispatch } from 'react';
+import { EventListener as EventListener_2 } from '@lottiefiles/dotlottie-web';
+import { EventType } from '@lottiefiles/dotlottie-web';
 import { FC } from 'react';
-import type { FormEvent } from 'react';
+import { FormEvent } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
-import type { HTMLProps } from 'react';
+import { HTMLProps } from 'react';
 import { IChannelMessage } from '@cuemath/cue-message-broker';
-import type { IframeHTMLAttributes } from 'react';
-import type { ImgHTMLAttributes } from 'react';
-import type { InputHTMLAttributes } from 'react';
+import { IframeHTMLAttributes } from 'react';
+import { ImgHTMLAttributes } from 'react';
+import { 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 type { MutableRefObject } from 'react';
+import { MutableRefObject } from 'react';
 import { NamedExoticComponent } from 'react';
 import { Omit as Omit_2 } from 'google-maps-react';
-import type { PLUGIN_NAME } from '@cuemath/analytics-v2/dist/constants';
+import { PLUGIN_NAME } from '@cuemath/analytics-v2/dist/constants';
 import { PropsWithChildren } 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 type { SetStateAction } from 'react';
+import { SetStateAction } from 'react';
 import { Substitute } from 'styled-components/dist/types';
 import { SVGProps } from 'react';
 import { VideoHTMLAttributes } from 'react';
@@ -84,7 +84,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>;
@@ -440,7 +440,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>>;
 
@@ -688,7 +688,7 @@ declare enum GENDER {
     OTHER = "OTHER"
 }
 
-export declare const getActiveSATSheet: (sheets: TLPARSheetData[]) => TLPARSheetData;
+export declare const getActiveSATSheet: (sheets: TLPARSheetData[]) => TLPARSheetData | undefined;
 
 declare const getArrowTooltipConfig: IGetArrowTooltipConfig;
 
@@ -3672,6 +3672,7 @@ declare interface ISignupOptionsProps {
     onGoToLogin: () => void;
     loadingProvider: TSocialAuthProvider | null;
     title?: string;
+    mobileTitle?: string;
 }
 
 export declare interface ISignUpProps {
@@ -5214,7 +5215,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>;
@@ -5537,7 +5538,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;
@@ -7055,8 +7056,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.2",
+  "version": "3.5.3",
   "type": "module",
   "files": [
     "dist"
@@ -89,5 +89,6 @@
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-svgr": "3.2.0",
     "vite-tsconfig-paths": "^4.2.2"
-  }
+  },
+  "packageManager": "yarn@4.9.2"
 }