@cuemath/leap 3.3.2 → 3.3.3-j1

package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"circular-step-wrapper.js","sources":["../../../../../src/features/auth/signup/circular-step-wrapper/circular-step-wrapper.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport type { ICircularStepRef, ICircularStepWrapperProps } from './circular-step-wrapper-types';\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n  memo,\n  type Ref,\n} from 'react';\n\nimport Back2Icon from '../../../../assets/line-icons/icons/back2';\nimport Next2Icon from '../../../../assets/line-icons/icons/next2';\nimport AnimatedArc from '../../../ui/animated-arc/animated-arc';\nimport IconButton from '../../../ui/buttons/icon-button/icon-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport * as Styled from './circular-step-wrapper-styled';\n\nconst animationSettings = {\n  autoplay: false,\n  loop: false,\n  renderer: 'canvas',\n  rendererSettings: {\n    preserveAspectRatio: 'xMidYMin slice',\n  },\n};\n\nconst CircularStepWrapper = forwardRef<ICircularStepRef, ICircularStepWrapperProps>(\n  (\n    {\n      children,\n      onGoBack,\n      onNext,\n      label,\n      showNext,\n      showPrevious,\n      animation,\n      introFrames,\n      outroFrames,\n      isNextLoading,\n      progressAngle,\n      footerElement,\n    },\n    ref: Ref<ICircularStepRef>,\n  ) => {\n    const animationRef = useRef<ILottieAnimationRef | null>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [containerHeight, setContainerHeight] = useState<number | undefined>();\n    const [showContent, setShowContent] = useState(false);\n    const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n    const onLottieRender = useCallback(() => {\n      if (animation && animationRef.current) {\n        animationRef.current.playSegments(introFrames, true);\n        setShowContent(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [animation]);\n\n    useEffect(() => {\n      return () => {\n        if (timeoutRef.current) {\n          clearTimeout(timeoutRef.current);\n        }\n      };\n    }, [animation]);\n\n    useImperativeHandle(ref, () => ({\n      playOutroAndFadeOut: async () => {\n        return new Promise<void>(resolve => {\n          const handleComplete = () => {\n            resolve();\n            animationRef.current?.removeEventListener('complete', handleComplete);\n          };\n\n          animationRef.current?.playSegments(outroFrames, true);\n          timeoutRef.current = setTimeout(() => setShowContent(false), 400);\n          animationRef.current?.addEventListener('complete', handleComplete);\n        });\n      },\n    }));\n\n    useLayoutEffect(() => {\n      if (containerRef.current) {\n        setContainerHeight(containerRef.current.offsetHeight);\n      }\n    }, []);\n\n    return (\n      <Styled.Container\n        $flex={1}\n        $flexDirection=\"column\"\n        $alignItems=\"center\"\n        $justifyContent=\"center\"\n        $width=\"100%\"\n        $height=\"100%\"\n        ref={containerRef}\n      >\n        {containerHeight && (\n          <LottieAnimation\n            width={1280}\n            height={containerHeight}\n            src={animation}\n            ref={animationRef}\n            onRender={onLottieRender}\n            settings={animationSettings}\n          />\n        )}\n        <Styled.CircularStepContainer\n          $width={400}\n          $height={400}\n          $background=\"REAL_BLACK\"\n          $alignItems=\"center\"\n          $justifyContent=\"center\"\n        >\n          {progressAngle && (\n            <AnimatedArc\n              radius={200}\n              strokeWidth={2}\n              color=\"WHITE\"\n              targetAngle={progressAngle}\n              mode=\"fade\"\n              duration={1}\n            />\n          )}\n          <Styled.ContentWrapper $isVisible={showContent} $width=\"100%\">\n            {label && (\n              <FlexView $gutterX={3.5}>\n                <Text $renderAs=\"ab2\" $color=\"WHITE\" $align=\"center\">\n                  {label}\n                </Text>\n                <Separator heightX={1} />\n              </FlexView>\n            )}\n            <Styled.InputContainer>{children}</Styled.InputContainer>\n          </Styled.ContentWrapper>\n        </Styled.CircularStepContainer>\n        {footerElement && (\n          <Styled.FooterWrapper $alignItems=\"center\" $justifyContent=\"center\">\n            {footerElement}\n          </Styled.FooterWrapper>\n        )}\n        {showPrevious && (\n          <Styled.PrevButtonWrapper>\n            <IconButton\n              Icon={Back2Icon}\n              renderAs=\"secondary-dark\"\n              analyticsLabel=\"Prev\"\n              onClick={onGoBack}\n              disabled={isNextLoading}\n              size=\"small\"\n            />\n          </Styled.PrevButtonWrapper>\n        )}\n        {showNext && (\n          <Styled.NextButtonWrapper>\n            <IconButton\n              size=\"small\"\n              Icon={Next2Icon}\n              renderAs=\"secondary-dark\"\n              analyticsLabel=\"Next\"\n              onClick={onNext}\n              busy={isNextLoading}\n            />\n          </Styled.NextButtonWrapper>\n        )}\n      </Styled.Container>\n    );\n  },\n);\n\nexport default memo(CircularStepWrapper);\n"],"names":["animationSettings","CircularStepWrapper","forwardRef","children","onGoBack","onNext","label","showNext","showPrevious","animation","introFrames","outroFrames","isNextLoading","progressAngle","footerElement","ref","animationRef","useRef","containerRef","containerHeight","setContainerHeight","useState","showContent","setShowContent","timeoutRef","onLottieRender","useCallback","useEffect","useImperativeHandle","resolve","handleComplete","_a","_b","useLayoutEffect","jsxs","Styled.Container","jsx","LottieAnimation","Styled.CircularStepContainer","AnimatedArc","Styled.ContentWrapper","FlexView","Text","Separator","Styled.InputContainer","Styled.FooterWrapper","Styled.PrevButtonWrapper","IconButton","Back2Icon","Styled.NextButtonWrapper","Next2Icon","circularStepWrapper","memo"],"mappings":"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"}
+{"version":3,"file":"circular-step-wrapper.js","sources":["../../../../../src/features/auth/signup/circular-step-wrapper/circular-step-wrapper.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport type { ICircularStepRef, ICircularStepWrapperProps } from './circular-step-wrapper-types';\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n  memo,\n  type Ref,\n} from 'react';\nimport { useTheme } from 'styled-components';\n\nimport Back2Icon from '../../../../assets/line-icons/icons/back2';\nimport Next2Icon from '../../../../assets/line-icons/icons/next2';\nimport AnimatedArc from '../../../ui/animated-arc/animated-arc';\nimport IconButton from '../../../ui/buttons/icon-button/icon-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { EDeviceType } from '../../../ui/theme/constants';\nimport * as Styled from './circular-step-wrapper-styled';\n\nconst animationSettings = {\n  autoplay: false,\n  loop: false,\n  renderer: 'canvas',\n  rendererSettings: {\n    preserveAspectRatio: 'xMidYMin slice',\n  },\n};\n\nconst CircularStepWrapper = forwardRef<ICircularStepRef, ICircularStepWrapperProps>(\n  (\n    {\n      children,\n      onGoBack,\n      onNext,\n      label,\n      showNext,\n      showPrevious,\n      animation,\n      introFrames,\n      outroFrames,\n      isNextLoading,\n      progressAngle,\n      footerElement,\n      isNextDisabled,\n      animationSrcMobile,\n    },\n    ref: Ref<ICircularStepRef>,\n  ) => {\n    const animationRef = useRef<ILottieAnimationRef | null>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [containerHeight, setContainerHeight] = useState<number | undefined>();\n    const [showContent, setShowContent] = useState(false);\n    const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n    const { device } = useTheme();\n    const isMobile = device <= EDeviceType.MOBILE;\n\n    const onLottieRender = useCallback(() => {\n      if (animation && animationRef.current) {\n        animationRef.current.playSegments(introFrames, true);\n        setShowContent(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [animation]);\n\n    useEffect(() => {\n      return () => {\n        if (timeoutRef.current) {\n          clearTimeout(timeoutRef.current);\n        }\n      };\n    }, [animation]);\n\n    useImperativeHandle(ref, () => ({\n      playOutroAndFadeOut: async () => {\n        return new Promise<void>(resolve => {\n          const handleComplete = () => {\n            resolve();\n            animationRef.current?.removeEventListener('complete', handleComplete);\n          };\n\n          animationRef.current?.playSegments(outroFrames, true);\n          timeoutRef.current = setTimeout(() => setShowContent(false), 400);\n          animationRef.current?.addEventListener('complete', handleComplete);\n        });\n      },\n    }));\n\n    useLayoutEffect(() => {\n      if (containerRef.current) {\n        setContainerHeight(containerRef.current.offsetHeight);\n      }\n    }, []);\n\n    return (\n      <Styled.Container\n        $flex={1}\n        $flexDirection=\"column\"\n        $alignItems=\"center\"\n        $justifyContent=\"center\"\n        $width=\"100%\"\n        $height=\"100%\"\n        ref={containerRef}\n      >\n        {containerHeight && (\n          <LottieAnimation\n            width={1280}\n            height={containerHeight}\n            src={isMobile ? animationSrcMobile ?? animation : animation}\n            ref={animationRef}\n            onRender={onLottieRender}\n            settings={animationSettings}\n          />\n        )}\n        <Styled.CircularStepContainer\n          $width={isMobile ? 290 : 400}\n          $height={isMobile ? 290 : 400}\n          $background=\"REAL_BLACK\"\n          $alignItems=\"center\"\n          $justifyContent=\"center\"\n        >\n          {progressAngle && (\n            <AnimatedArc\n              radius={progressAngle ? 145 : 200}\n              strokeWidth={2}\n              color=\"WHITE\"\n              targetAngle={progressAngle}\n              mode=\"fade\"\n              duration={1}\n            />\n          )}\n          <Styled.ContentWrapper $isVisible={showContent} $width=\"100%\">\n            {label && (\n              <FlexView $gutterX={isMobile ? 1.5 : 3.5}>\n                <Text $renderAs=\"ab2\" $color=\"WHITE\" $align=\"center\">\n                  {label}\n                </Text>\n                <Separator heightX={1} />\n              </FlexView>\n            )}\n            <Styled.InputContainer>{children}</Styled.InputContainer>\n          </Styled.ContentWrapper>\n        </Styled.CircularStepContainer>\n        {footerElement && (\n          <Styled.FooterWrapper $alignItems=\"center\" $justifyContent=\"center\">\n            {footerElement}\n          </Styled.FooterWrapper>\n        )}\n        {showPrevious && (\n          <Styled.PrevButtonWrapper>\n            <IconButton\n              Icon={Back2Icon}\n              renderAs=\"black-dark\"\n              analyticsLabel=\"Prev\"\n              onClick={onGoBack}\n              disabled={isNextLoading}\n              size=\"small\"\n            />\n          </Styled.PrevButtonWrapper>\n        )}\n        {showNext && (\n          <Styled.NextButtonWrapper>\n            <IconButton\n              size=\"small\"\n              Icon={Next2Icon}\n              renderAs=\"secondary-dark\"\n              analyticsLabel=\"Next\"\n              onClick={onNext}\n              busy={isNextLoading}\n              disabled={isNextLoading || isNextDisabled}\n            />\n          </Styled.NextButtonWrapper>\n        )}\n      </Styled.Container>\n    );\n  },\n);\n\nexport default memo(CircularStepWrapper);\n"],"names":["animationSettings","CircularStepWrapper","forwardRef","children","onGoBack","onNext","label","showNext","showPrevious","animation","introFrames","outroFrames","isNextLoading","progressAngle","footerElement","isNextDisabled","animationSrcMobile","ref","animationRef","useRef","containerRef","containerHeight","setContainerHeight","useState","showContent","setShowContent","timeoutRef","device","useTheme","isMobile","EDeviceType","onLottieRender","useCallback","useEffect","useImperativeHandle","resolve","handleComplete","_a","_b","useLayoutEffect","jsxs","Styled.Container","jsx","LottieAnimation","Styled.CircularStepContainer","AnimatedArc","Styled.ContentWrapper","FlexView","Text","Separator","Styled.InputContainer","Styled.FooterWrapper","Styled.PrevButtonWrapper","IconButton","Back2Icon","Styled.NextButtonWrapper","Next2Icon","circularStepWrapper","memo"],"mappings":"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"}

package/dist/features/auth/signup/custom-input-field/custom-input-field.js

@@ -1,91 +1,96 @@
-import { jsx as c, jsxs as y } from "react/jsx-runtime";
-import { memo as A, useState as g, useRef as C, useCallback as a, useMemo as I, useEffect as T } from "react";
-import { useTheme as H } from "styled-components";
-import L from "../../../ui/layout/flex-view.js";
-import M from "./country-selector/country-selector.js";
-import { CustomInput as N } from "./custom-input-field-styled.js";
+import { jsx as c, jsxs as K } from "react/jsx-runtime";
+import { memo as L, useState as C, useRef as I, useCallback as p, useMemo as T, useEffect as W } from "react";
+import { useTheme as A } from "styled-components";
+import B from "../../../ui/layout/flex-view.js";
+import { EDeviceType as H } from "../../../ui/theme/constants.js";
+import N from "./country-selector/country-selector.js";
+import { CustomInput as O } from "./custom-input-field-styled.js";
 import X from "./input-wrapper/input-wrapper.js";
 import _ from "./password-toggle/password-toggle.js";
 const q = ({
-  value: o,
-  onChange: m,
+  value: r,
+  onChange: d,
   error: u,
-  helperText: W,
+  helperText: b,
   onEnter: n,
-  isLoading: b,
-  isValid: p,
-  type: e = "text",
+  isLoading: D,
+  isValid: h,
+  type: t = "text",
   placeholder: F,
   actionElement: R,
   maxLength: $,
-  width: D,
+  width: E,
   textTransform: P,
-  textAlign: S = "center",
-  selectedCountry: V,
-  onCountryChange: j,
-  autoSize: d = !1
+  textAlign: v = "center",
+  selectedCountry: M,
+  onCountryChange: S,
+  autoSize: x = !1
 }) => {
-  const r = H(), [l, k] = g(!1), [z, h] = g(32), f = C(null), s = C(null), E = a(
-    (t) => {
-      t.key === "Enter" && (n == null || n());
+  const o = A(), l = o.device <= H.MOBILE, [f, V] = C(!1), [j, m] = C(l ? 24 : 32), a = I(null), s = I(null), k = p(
+    (e) => {
+      e.key === "Enter" && (n == null || n());
     },
     [n]
-  ), G = I(() => e === "password" ? l ? "text" : "password" : e === "phone" ? "number" : e, [e, l]), K = I(() => u ? r.colors.RED : p ? r.colors.GREEN_4 : r.colors.WHITE, [u, p, r.colors]), x = a((t, w) => {
+  ), y = T(() => t === "password" ? f ? "text" : "password" : t === "phone" ? "number" : t, [t, f]), z = T(() => u ? o.colors.RED : h ? o.colors.GREEN_4 : o.colors.WHITE, [u, h, o.colors]), w = p((e, g) => {
     s.current || (s.current = document.createElement("canvas"));
     const i = s.current.getContext("2d");
-    return i ? (i.font = w, i.measureText(t).width) : 0;
+    return i ? (i.font = g, i.measureText(e).width) : 0;
   }, []);
-  T(() => {
-    if (!f.current || !o || !d)
+  W(() => {
+    if (!a.current || !r || !x)
       return;
-    const t = f.current.clientWidth;
-    x(o, "32px 'Athletics-Light'") > t ? h(24) : h(32);
-  }, [o, x, d]), T(() => () => {
+    if (l) {
+      m(24);
+      return;
+    }
+    const e = a.current.clientWidth;
+    w(r, "32px 'Athletics-Light'") > e ? m(24) : m(32);
+  }, [r, w, x, l]), W(() => () => {
     s.current = null;
   }, []);
-  const v = a(
-    (t) => m(t.target.value),
-    [m]
+  const G = p(
+    (e) => d(e.target.value),
+    [d]
   );
   return /* @__PURE__ */ c(
     X,
     {
-      helperText: u || W,
-      isLoading: b,
+      helperText: u || b,
+      isLoading: D,
       actionElement: R,
-      children: /* @__PURE__ */ y(
-        L,
+      children: /* @__PURE__ */ K(
+        B,
         {
-          $width: D ?? "100%",
+          $width: E ?? "100%",
           $flex: 1,
           $alignItems: "center",
           $flexDirection: "row",
           $flexGapX: 0.5,
           children: [
-            e === "phone" && /* @__PURE__ */ c(M, { onChange: j, value: V }),
+            t === "phone" && /* @__PURE__ */ c(N, { onChange: S, value: M }),
             /* @__PURE__ */ c(
-              N,
+              O,
               {
-                ref: f,
-                value: o,
-                onChange: v,
+                ref: a,
+                value: r,
+                onChange: G,
                 autoFocus: !0,
                 placeholder: F,
-                color: K,
+                color: z,
                 autoCapitalize: "none",
                 textTransform: P,
-                type: G,
-                onKeyDown: E,
+                type: y,
+                onKeyDown: k,
                 maxLength: $,
-                align: S,
-                fontSize: z
+                align: v,
+                fontSize: j
               }
             ),
-            e === "password" && /* @__PURE__ */ c(
+            t === "password" && /* @__PURE__ */ c(
               _,
               {
-                isVisible: l,
-                onToggle: () => k((t) => !t)
+                isVisible: f,
+                onToggle: () => V((e) => !e)
               }
             )
           ]
@@ -93,8 +98,8 @@ const q = ({
       )
     }
   );
-}, et = A(q);
+}, ne = L(q);
 export {
-  et as default
+  ne as default
 };
 //# sourceMappingURL=custom-input-field.js.map

package/dist/features/auth/signup/custom-input-field/custom-input-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"custom-input-field.js","sources":["../../../../../src/features/auth/signup/custom-input-field/custom-input-field.tsx"],"sourcesContent":["import type { ICustomInputFieldProps } from './custom-input-field-types';\n\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  memo,\n  type FC,\n  type KeyboardEvent,\n  type ChangeEvent,\n} from 'react';\nimport { useTheme } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport PhoneCountrySelector from './country-selector/country-selector';\nimport * as Styled from './custom-input-field-styled';\nimport InputWrapper from './input-wrapper/input-wrapper';\nimport PasswordToggleIcon from './password-toggle/password-toggle';\n\nconst CustomInputField: FC<ICustomInputFieldProps> = ({\n  value,\n  onChange,\n  error,\n  helperText,\n  onEnter,\n  isLoading,\n  isValid,\n  type = 'text',\n  placeholder,\n  actionElement,\n  maxLength,\n  width,\n  textTransform,\n  textAlign = 'center',\n  selectedCountry,\n  onCountryChange,\n  autoSize = false,\n}) => {\n  const theme = useTheme();\n  const [isPasswordVisible, setIsPasswordVisible] = useState(false);\n  const [fontSize, setFontSize] = useState(32);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const canvasRef = useRef<HTMLCanvasElement | null>(null);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter') {\n        onEnter?.();\n      }\n    },\n    [onEnter],\n  );\n\n  const inputType = useMemo(() => {\n    if (type === 'password') return isPasswordVisible ? 'text' : 'password';\n\n    if (type === 'phone') return 'number';\n\n    return type;\n  }, [type, isPasswordVisible]);\n\n  const inputColor = useMemo(() => {\n    if (error) return theme.colors.RED;\n\n    if (isValid) return theme.colors.GREEN_4;\n\n    return theme.colors.WHITE;\n  }, [error, isValid, theme.colors]);\n\n  const measureTextWidth = useCallback((text: string, font: string): number => {\n    if (!canvasRef.current) {\n      canvasRef.current = document.createElement('canvas');\n    }\n\n    const context = canvasRef.current.getContext('2d');\n\n    if (!context) return 0;\n\n    context.font = font;\n\n    return context.measureText(text).width;\n  }, []);\n\n  useEffect(() => {\n    if (!inputRef.current || !value || !autoSize) {\n      return;\n    }\n\n    const inputWidth = inputRef.current.clientWidth;\n\n    const font32 = \"32px 'Athletics-Light'\";\n\n    const textWidth32 = measureTextWidth(value, font32);\n\n    if (textWidth32 > inputWidth) {\n      setFontSize(24);\n    } else {\n      setFontSize(32);\n    }\n  }, [value, measureTextWidth, autoSize]);\n\n  useEffect(() => {\n    return () => {\n      canvasRef.current = null;\n    };\n  }, []);\n\n  const handleChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => onChange(event.target.value),\n    [onChange],\n  );\n\n  return (\n    <InputWrapper\n      helperText={error || helperText}\n      isLoading={isLoading}\n      actionElement={actionElement}\n    >\n      <FlexView\n        $width={width ?? '100%'}\n        $flex={1}\n        $alignItems=\"center\"\n        $flexDirection=\"row\"\n        $flexGapX={0.5}\n      >\n        {type === 'phone' && (\n          <PhoneCountrySelector onChange={onCountryChange} value={selectedCountry} />\n        )}\n        <Styled.CustomInput\n          ref={inputRef}\n          value={value}\n          onChange={handleChange}\n          autoFocus\n          placeholder={placeholder}\n          color={inputColor}\n          autoCapitalize=\"none\"\n          textTransform={textTransform}\n          type={inputType}\n          onKeyDown={handleKeyDown}\n          maxLength={maxLength}\n          align={textAlign}\n          fontSize={fontSize}\n        />\n        {type === 'password' && (\n          <PasswordToggleIcon\n            isVisible={isPasswordVisible}\n            onToggle={() => setIsPasswordVisible(prev => !prev)}\n          />\n        )}\n      </FlexView>\n    </InputWrapper>\n  );\n};\n\nexport default memo(CustomInputField);\n"],"names":["CustomInputField","value","onChange","error","helperText","onEnter","isLoading","isValid","type","placeholder","actionElement","maxLength","width","textTransform","textAlign","selectedCountry","onCountryChange","autoSize","theme","useTheme","isPasswordVisible","setIsPasswordVisible","useState","fontSize","setFontSize","inputRef","useRef","canvasRef","handleKeyDown","useCallback","event","inputType","useMemo","inputColor","measureTextWidth","text","font","context","useEffect","inputWidth","handleChange","jsx","InputWrapper","jsxs","FlexView","PhoneCountrySelector","Styled.CustomInput","PasswordToggleIcon","prev","customInputField","memo"],"mappings":"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"}
+{"version":3,"file":"custom-input-field.js","sources":["../../../../../src/features/auth/signup/custom-input-field/custom-input-field.tsx"],"sourcesContent":["import type { ICustomInputFieldProps } from './custom-input-field-types';\n\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  memo,\n  type FC,\n  type KeyboardEvent,\n  type ChangeEvent,\n} from 'react';\nimport { useTheme } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport { EDeviceType } from '../../../ui/theme/constants';\nimport PhoneCountrySelector from './country-selector/country-selector';\nimport * as Styled from './custom-input-field-styled';\nimport InputWrapper from './input-wrapper/input-wrapper';\nimport PasswordToggleIcon from './password-toggle/password-toggle';\n\nconst CustomInputField: FC<ICustomInputFieldProps> = ({\n  value,\n  onChange,\n  error,\n  helperText,\n  onEnter,\n  isLoading,\n  isValid,\n  type = 'text',\n  placeholder,\n  actionElement,\n  maxLength,\n  width,\n  textTransform,\n  textAlign = 'center',\n  selectedCountry,\n  onCountryChange,\n  autoSize = false,\n}) => {\n  const theme = useTheme();\n  const isMobile = theme.device <= EDeviceType.MOBILE;\n  const [isPasswordVisible, setIsPasswordVisible] = useState(false);\n  const [fontSize, setFontSize] = useState(isMobile ? 24 : 32);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const canvasRef = useRef<HTMLCanvasElement | null>(null);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter') {\n        onEnter?.();\n      }\n    },\n    [onEnter],\n  );\n\n  const inputType = useMemo(() => {\n    if (type === 'password') return isPasswordVisible ? 'text' : 'password';\n\n    if (type === 'phone') return 'number';\n\n    return type;\n  }, [type, isPasswordVisible]);\n\n  const inputColor = useMemo(() => {\n    if (error) return theme.colors.RED;\n\n    if (isValid) return theme.colors.GREEN_4;\n\n    return theme.colors.WHITE;\n  }, [error, isValid, theme.colors]);\n\n  const measureTextWidth = useCallback((text: string, font: string): number => {\n    if (!canvasRef.current) {\n      canvasRef.current = document.createElement('canvas');\n    }\n\n    const context = canvasRef.current.getContext('2d');\n\n    if (!context) return 0;\n\n    context.font = font;\n\n    return context.measureText(text).width;\n  }, []);\n\n  useEffect(() => {\n    if (!inputRef.current || !value || !autoSize) {\n      return;\n    }\n\n    if (isMobile) {\n      setFontSize(24);\n\n      return;\n    }\n\n    const inputWidth = inputRef.current.clientWidth;\n\n    const font32 = \"32px 'Athletics-Light'\";\n\n    const textWidth32 = measureTextWidth(value, font32);\n\n    if (textWidth32 > inputWidth) {\n      setFontSize(24);\n    } else {\n      setFontSize(32);\n    }\n  }, [value, measureTextWidth, autoSize, isMobile]);\n\n  useEffect(() => {\n    return () => {\n      canvasRef.current = null;\n    };\n  }, []);\n\n  const handleChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => onChange(event.target.value),\n    [onChange],\n  );\n\n  return (\n    <InputWrapper\n      helperText={error || helperText}\n      isLoading={isLoading}\n      actionElement={actionElement}\n    >\n      <FlexView\n        $width={width ?? '100%'}\n        $flex={1}\n        $alignItems=\"center\"\n        $flexDirection=\"row\"\n        $flexGapX={0.5}\n      >\n        {type === 'phone' && (\n          <PhoneCountrySelector onChange={onCountryChange} value={selectedCountry} />\n        )}\n        <Styled.CustomInput\n          ref={inputRef}\n          value={value}\n          onChange={handleChange}\n          autoFocus\n          placeholder={placeholder}\n          color={inputColor}\n          autoCapitalize=\"none\"\n          textTransform={textTransform}\n          type={inputType}\n          onKeyDown={handleKeyDown}\n          maxLength={maxLength}\n          align={textAlign}\n          fontSize={fontSize}\n        />\n        {type === 'password' && (\n          <PasswordToggleIcon\n            isVisible={isPasswordVisible}\n            onToggle={() => setIsPasswordVisible(prev => !prev)}\n          />\n        )}\n      </FlexView>\n    </InputWrapper>\n  );\n};\n\nexport default memo(CustomInputField);\n"],"names":["CustomInputField","value","onChange","error","helperText","onEnter","isLoading","isValid","type","placeholder","actionElement","maxLength","width","textTransform","textAlign","selectedCountry","onCountryChange","autoSize","theme","useTheme","isMobile","EDeviceType","isPasswordVisible","setIsPasswordVisible","useState","fontSize","setFontSize","inputRef","useRef","canvasRef","handleKeyDown","useCallback","event","inputType","useMemo","inputColor","measureTextWidth","text","font","context","useEffect","inputWidth","handleChange","jsx","InputWrapper","jsxs","FlexView","PhoneCountrySelector","Styled.CustomInput","PasswordToggleIcon","prev","customInputField","memo"],"mappings":"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"}

package/dist/features/auth/signup/custom-input-field/input-wrapper/input-wrapper.js

@@ -1,29 +1,51 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { memo as c } from "react";
-import { LOTTIE as h } from "../../../../../assets/lottie/lottie.js";
-import r from "../../../../ui/layout/flex-view.js";
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { memo as h } from "react";
+import { useTheme as s } from "styled-components";
+import { LOTTIE as f } from "../../../../../assets/lottie/lottie.js";
+import i from "../../../../ui/layout/flex-view.js";
 import $ from "../../../../ui/lottie-animation/lottie-animation.js";
-import i from "../../../../ui/separator/separator.js";
-import s from "../../../../ui/text/text.js";
-import { ContentWrapper as f } from "./input-wrapper-styled.js";
-const l = ({ children: m, helperText: n, actionElement: o, isLoading: p }) => /* @__PURE__ */ t(r, { $flex: 1, $gutterX: 2, $alignItems: "center", $justifyContent: "center", $width: "100%", children: [
-  m,
-  /* @__PURE__ */ t(f, { $alignItems: "center", $justifyContent: "center", children: [
-    n && /* @__PURE__ */ t(r, { $gutterX: 3.5, children: [
-      /* @__PURE__ */ e(s, { $renderAs: "ub2", $color: "WHITE_T_60", $align: "center", $whiteSpace: "pre-line", children: n }),
-      /* @__PURE__ */ e(i, { heightX: 0.5 })
-    ] }),
-    o && /* @__PURE__ */ t(r, { $justifyContent: "center", $alignItems: "center", children: [
-      o,
-      /* @__PURE__ */ e(i, { heightX: 1 })
-    ] }),
-    p && /* @__PURE__ */ t(r, { children: [
-      /* @__PURE__ */ e(i, { heightX: 2 }),
-      /* @__PURE__ */ e($, { src: h.SPINNER_WHITE, height: 20, width: 40 })
-    ] })
-  ] })
-] }), W = c(l);
+import o from "../../../../ui/separator/separator.js";
+import l from "../../../../ui/text/text.js";
+import { EDeviceType as a } from "../../../../ui/theme/constants.js";
+import { ContentWrapper as d } from "./input-wrapper-styled.js";
+const u = ({ children: p, helperText: n, actionElement: m, isLoading: c }) => {
+  const e = s().device <= a.MOBILE;
+  return /* @__PURE__ */ t(
+    i,
+    {
+      $flex: 1,
+      $gutterX: e ? 1.5 : 2,
+      $alignItems: "center",
+      $justifyContent: "center",
+      $width: "100%",
+      children: [
+        p,
+        /* @__PURE__ */ t(d, { $alignItems: "center", $justifyContent: "center", children: [
+          n && /* @__PURE__ */ t(i, { $gutterX: e ? 2.25 : 3.5, children: [
+            /* @__PURE__ */ r(l, { $renderAs: "ub2", $color: "WHITE_T_60", $align: "center", $whiteSpace: "pre-line", children: n }),
+            /* @__PURE__ */ r(o, { heightX: 0.5 })
+          ] }),
+          m && /* @__PURE__ */ t(i, { $justifyContent: "center", $alignItems: "center", children: [
+            m,
+            /* @__PURE__ */ r(o, { heightX: 1 })
+          ] }),
+          c && /* @__PURE__ */ t(i, { children: [
+            /* @__PURE__ */ r(o, { heightX: e ? 0.5 : 2 }),
+            /* @__PURE__ */ r(
+              $,
+              {
+                src: f.SPINNER_WHITE,
+                height: e ? 14 : 20,
+                width: e ? 14 : 40
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}, L = h(u);
 export {
-  W as default
+  L as default
 };
 //# sourceMappingURL=input-wrapper.js.map

package/dist/features/auth/signup/custom-input-field/input-wrapper/input-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-wrapper.js","sources":["../../../../../../src/features/auth/signup/custom-input-field/input-wrapper/input-wrapper.tsx"],"sourcesContent":["import type { IInputWrapperProps } from './input-wrapper-types';\n\nimport { memo } 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 Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport * as Styled from './input-wrapper-styled';\n\nconst InputWrapper = ({ children, helperText, actionElement, isLoading }: IInputWrapperProps) => {\n  return (\n    <FlexView $flex={1} $gutterX={2} $alignItems=\"center\" $justifyContent=\"center\" $width=\"100%\">\n      {children}\n      <Styled.ContentWrapper $alignItems=\"center\" $justifyContent=\"center\">\n        {helperText && (\n          <FlexView $gutterX={3.5}>\n            <Text $renderAs=\"ub2\" $color=\"WHITE_T_60\" $align=\"center\" $whiteSpace=\"pre-line\">\n              {helperText}\n            </Text>\n            <Separator heightX={0.5} />\n          </FlexView>\n        )}\n        {actionElement && (\n          <FlexView $justifyContent=\"center\" $alignItems=\"center\">\n            {actionElement}\n            <Separator heightX={1} />\n          </FlexView>\n        )}\n        {isLoading && (\n          <FlexView>\n            <Separator heightX={2} />\n            <LottieAnimation src={LOTTIE.SPINNER_WHITE} height={20} width={40} />\n          </FlexView>\n        )}\n      </Styled.ContentWrapper>\n    </FlexView>\n  );\n};\n\nexport default memo(InputWrapper);\n"],"names":["InputWrapper","children","helperText","actionElement","isLoading","jsxs","FlexView","Styled.ContentWrapper","jsx","Text","Separator","LottieAnimation","LOTTIE","InputWrapper$1","memo"],"mappings":";;;;;;;;AAWA,MAAMA,IAAe,CAAC,EAAE,UAAAC,GAAU,YAAAC,GAAY,eAAAC,GAAe,WAAAC,QAEzD,gBAAAC,EAACC,GAAS,EAAA,OAAO,GAAG,UAAU,GAAG,aAAY,UAAS,iBAAgB,UAAS,QAAO,QACnF,UAAA;AAAA,EAAAL;AAAA,oBACAM,GAAA,EAAsB,aAAY,UAAS,iBAAgB,UACzD,UAAA;AAAA,IACCL,KAAA,gBAAAG,EAACC,GAAS,EAAA,UAAU,KAClB,UAAA;AAAA,MAAC,gBAAAE,EAAAC,GAAA,EAAK,WAAU,OAAM,QAAO,cAAa,QAAO,UAAS,aAAY,YACnE,UACHP,EAAA,CAAA;AAAA,MACA,gBAAAM,EAACE,GAAU,EAAA,SAAS,IAAK,CAAA;AAAA,IAAA,GAC3B;AAAA,IAEDP,KACE,gBAAAE,EAAAC,GAAA,EAAS,iBAAgB,UAAS,aAAY,UAC5C,UAAA;AAAA,MAAAH;AAAA,MACD,gBAAAK,EAACE,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,IAAA,GACzB;AAAA,IAEDN,uBACEE,GACC,EAAA,UAAA;AAAA,MAAC,gBAAAE,EAAAE,GAAA,EAAU,SAAS,EAAG,CAAA;AAAA,MACvB,gBAAAF,EAACG,KAAgB,KAAKC,EAAO,eAAe,QAAQ,IAAI,OAAO,IAAI;AAAA,IAAA,GACrE;AAAA,EAAA,GAEJ;AACF,EAAA,CAAA,GAIWC,IAAAC,EAAKd,CAAY;"}
+{"version":3,"file":"input-wrapper.js","sources":["../../../../../../src/features/auth/signup/custom-input-field/input-wrapper/input-wrapper.tsx"],"sourcesContent":["import type { IInputWrapperProps } from './input-wrapper-types';\n\nimport { memo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport { EDeviceType } from '../../../../ui/theme/constants';\nimport * as Styled from './input-wrapper-styled';\n\nconst InputWrapper = ({ children, helperText, actionElement, isLoading }: IInputWrapperProps) => {\n  const theme = useTheme();\n  const isMobile = theme.device <= EDeviceType.MOBILE;\n\n  return (\n    <FlexView\n      $flex={1}\n      $gutterX={isMobile ? 1.5 : 2}\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      $width=\"100%\"\n    >\n      {children}\n      <Styled.ContentWrapper $alignItems=\"center\" $justifyContent=\"center\">\n        {helperText && (\n          <FlexView $gutterX={isMobile ? 2.25 : 3.5}>\n            <Text $renderAs=\"ub2\" $color=\"WHITE_T_60\" $align=\"center\" $whiteSpace=\"pre-line\">\n              {helperText}\n            </Text>\n            <Separator heightX={0.5} />\n          </FlexView>\n        )}\n        {actionElement && (\n          <FlexView $justifyContent=\"center\" $alignItems=\"center\">\n            {actionElement}\n            <Separator heightX={1} />\n          </FlexView>\n        )}\n        {isLoading && (\n          <FlexView>\n            <Separator heightX={isMobile ? 0.5 : 2} />\n            <LottieAnimation\n              src={LOTTIE.SPINNER_WHITE}\n              height={isMobile ? 14 : 20}\n              width={isMobile ? 14 : 40}\n            />\n          </FlexView>\n        )}\n      </Styled.ContentWrapper>\n    </FlexView>\n  );\n};\n\nexport default memo(InputWrapper);\n"],"names":["InputWrapper","children","helperText","actionElement","isLoading","isMobile","useTheme","EDeviceType","jsxs","FlexView","Styled.ContentWrapper","jsx","Text","Separator","LottieAnimation","LOTTIE","InputWrapper$1","memo"],"mappings":";;;;;;;;;;AAaA,MAAMA,IAAe,CAAC,EAAE,UAAAC,GAAU,YAAAC,GAAY,eAAAC,GAAe,WAAAC,QAAoC;AAEzF,QAAAC,IADQC,IACS,UAAUC,EAAY;AAG3C,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAUJ,IAAW,MAAM;AAAA,MAC3B,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,QAAO;AAAA,MAEN,UAAA;AAAA,QAAAJ;AAAA,0BACAS,GAAA,EAAsB,aAAY,UAAS,iBAAgB,UACzD,UAAA;AAAA,UAAAR,KACE,gBAAAM,EAAAC,GAAA,EAAS,UAAUJ,IAAW,OAAO,KACpC,UAAA;AAAA,YAAC,gBAAAM,EAAAC,GAAA,EAAK,WAAU,OAAM,QAAO,cAAa,QAAO,UAAS,aAAY,YACnE,UACHV,EAAA,CAAA;AAAA,YACA,gBAAAS,EAACE,GAAU,EAAA,SAAS,IAAK,CAAA;AAAA,UAAA,GAC3B;AAAA,UAEDV,KACE,gBAAAK,EAAAC,GAAA,EAAS,iBAAgB,UAAS,aAAY,UAC5C,UAAA;AAAA,YAAAN;AAAA,YACD,gBAAAQ,EAACE,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,UAAA,GACzB;AAAA,UAEDT,uBACEK,GACC,EAAA,UAAA;AAAA,YAAA,gBAAAE,EAACE,GAAU,EAAA,SAASR,IAAW,MAAM,GAAG;AAAA,YACxC,gBAAAM;AAAA,cAACG;AAAA,cAAA;AAAA,gBACC,KAAKC,EAAO;AAAA,gBACZ,QAAQV,IAAW,KAAK;AAAA,gBACxB,OAAOA,IAAW,KAAK;AAAA,cAAA;AAAA,YACzB;AAAA,UAAA,GACF;AAAA,QAAA,GAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEeW,IAAAC,EAAKjB,CAAY;"}

package/dist/features/milestone/create/comps/goal-completion-date-selector/goal-completion-date-selector.js

@@ -12,10 +12,10 @@ import ee from "../body-layout/body-layout.js";
 import { ButtonWrapper as C } from "./goal-completion-date-selector-styled.js";
 import te from "./goal-completion-date-selector-view.js";
 import { lastDayOfMonth as v } from "../../../../../node_modules/date-fns/lastDayOfMonth.js";
-import { addDays as oe } from "../../../../../node_modules/date-fns/addDays.js";
-import { eachMonthOfInterval as se } from "../../../../../node_modules/date-fns/eachMonthOfInterval.js";
-import { addMonths as re } from "../../../../../node_modules/date-fns/addMonths.js";
+import { eachMonthOfInterval as oe } from "../../../../../node_modules/date-fns/eachMonthOfInterval.js";
+import { addMonths as se } from "../../../../../node_modules/date-fns/addMonths.js";
 import { formatDate as c } from "../../../../../node_modules/date-fns/format.js";
+import { addDays as re } from "../../../../../node_modules/date-fns/addDays.js";
 const be = q(
   ({
     formData: D,
@@ -55,10 +55,10 @@ const be = q(
       flow: r ?? "CREATE",
       courseStream: O
     }), { testType: L, milestoneEndDate: t, committed: N } = D, { milestoneEndDate: w } = N, { title: j } = G, k = r === "EDIT" ? "Update goal" : "Create goal", T = /* @__PURE__ */ new Date(), n = c(T.setDate(T.getDate() + 1), "yyyy-MM-dd"), i = c(Date.now() + Q, "yyyy-MM-dd"), R = z(() => {
-      const e = /* @__PURE__ */ new Date(), o = v(e) ? oe(e, 1) : e;
-      return se({
+      const e = /* @__PURE__ */ new Date(), o = v(e) ? re(e, 1) : e;
+      return oe({
         start: o,
-        end: re(o, 11)
+        end: se(o, 11)
       }).map((b) => {
         const x = v(b);
         return {

package/dist/features/student-details/class-details/class-details-utils.js

@@ -1,12 +1,12 @@
 import { startOfDay as s } from "../../../node_modules/date-fns/startOfDay.js";
-import { isToday as n } from "../../../node_modules/date-fns/isToday.js";
-import { isAfter as i } from "../../../node_modules/date-fns/isAfter.js";
-import { isBefore as f } from "../../../node_modules/date-fns/isBefore.js";
-import { addDays as d } from "../../../node_modules/date-fns/addDays.js";
+import { isAfter as n } from "../../../node_modules/date-fns/isAfter.js";
+import { isBefore as i } from "../../../node_modules/date-fns/isBefore.js";
+import { addDays as f } from "../../../node_modules/date-fns/addDays.js";
+import { isToday as d } from "../../../node_modules/date-fns/isToday.js";
 import { formatDate as m } from "../../../node_modules/date-fns/format.js";
 const u = (e) => {
-  const o = /* @__PURE__ */ new Date(), t = new Date(e), r = d(s(o), 7);
-  return n(t) ? `Today, ${m(t, "hh:mm a")}` : i(t, o) && f(t, r) ? m(t, "eee, hh:mm a") : m(t, "MMM dd, hh:mm a");
+  const o = /* @__PURE__ */ new Date(), t = new Date(e), r = f(s(o), 7);
+  return d(t) ? `Today, ${m(t, "hh:mm a")}` : n(t, o) && i(t, r) ? m(t, "eee, hh:mm a") : m(t, "MMM dd, hh:mm a");
 }, M = (e, o, t) => {
   const r = m(e * 1e3, "hh:mm a"), a = m((e + o + t) * 1e3, "hh:mm a");
   return `${r} - ${a}`;

package/dist/features/trial-session/comps/pla/cuemath-app-features/cuemath-app-features-constants.js

@@ -0,0 +1,25 @@
+import { GIF as t } from "../../../../../assets/gif/gif.js";
+const o = [
+  {
+    icon: t.STAY_CONNECTED,
+    title: "STAY CONNECTED",
+    description: "Chat with your tutor and receive real-time updates.",
+    bgColor: "BLUE_6"
+  },
+  {
+    icon: t.TRACK_PROGRESS,
+    title: "TRACK PROGRESS",
+    description: "Progress, strengths, and areas of improvement.",
+    bgColor: "PURPLE_6"
+  },
+  {
+    icon: t.EASY_RESCHEDULING,
+    title: "EASY RESCHEDULING",
+    description: "Conveniently change your class timings.",
+    bgColor: "GREEN_6"
+  }
+];
+export {
+  o as benefits
+};
+//# sourceMappingURL=cuemath-app-features-constants.js.map

package/dist/features/trial-session/comps/pla/cuemath-app-features/cuemath-app-features-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cuemath-app-features-constants.js","sources":["../../../../../../src/features/trial-session/comps/pla/cuemath-app-features/cuemath-app-features-constants.ts"],"sourcesContent":["import type { ICuemathAppBenefit } from './cuemath-app-features-types';\n\nimport { GIF } from '../../../../../assets/gif/gif';\n\nexport const benefits: ICuemathAppBenefit[] = [\n  {\n    icon: GIF.STAY_CONNECTED,\n    title: 'STAY CONNECTED',\n    description: 'Chat with your tutor and receive real-time updates.',\n    bgColor: 'BLUE_6',\n  },\n  {\n    icon: GIF.TRACK_PROGRESS,\n    title: 'TRACK PROGRESS',\n    description: 'Progress, strengths, and areas of improvement.',\n    bgColor: 'PURPLE_6',\n  },\n  {\n    icon: GIF.EASY_RESCHEDULING,\n    title: 'EASY RESCHEDULING',\n    description: 'Conveniently change your class timings.',\n    bgColor: 'GREEN_6',\n  },\n];\n"],"names":["benefits","GIF"],"mappings":";AAIO,MAAMA,IAAiC;AAAA,EAC5C;AAAA,IACE,MAAMC,EAAI;AAAA,IACV,OAAO;AAAA,IACP,aAAa;AAAA,IACb,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,MAAMA,EAAI;AAAA,IACV,OAAO;AAAA,IACP,aAAa;AAAA,IACb,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,MAAMA,EAAI;AAAA,IACV,OAAO;AAAA,IACP,aAAa;AAAA,IACb,SAAS;AAAA,EACX;AACF;"}

package/dist/features/trial-session/comps/pla/cuemath-app-features/cuemath-app-features-styled.js

@@ -0,0 +1,15 @@
+import i from "styled-components";
+import t from "../../../../ui/layout/flex-view.js";
+const h = i(t)(
+  ({ theme: e }) => `
+  height: 100%;
+  ${e.mediaQueries.minWidthTablet} {
+      width: 100%;
+      max-height: 250px;
+  }
+`
+);
+export {
+  h as ImageWrapper
+};
+//# sourceMappingURL=cuemath-app-features-styled.js.map

package/dist/features/trial-session/comps/pla/cuemath-app-features/cuemath-app-features-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cuemath-app-features-styled.js","sources":["../../../../../../src/features/trial-session/comps/pla/cuemath-app-features/cuemath-app-features-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../../ui/layout/flex-view';\n\nexport const ImageWrapper = styled(FlexView)(\n  ({ theme }) => `\n  height: 100%;\n  ${theme.mediaQueries.minWidthTablet} {\n      width: 100%;\n      max-height: 250px;\n  }\n`,\n);\n"],"names":["ImageWrapper","styled","FlexView","theme"],"mappings":";;AAIa,MAAAA,IAAeC,EAAOC,CAAQ;AAAA,EACzC,CAAC,EAAE,OAAAC,EAAA,MAAY;AAAA;AAAA,IAEbA,EAAM,aAAa,cAAc;AAAA;AAAA;AAAA;AAAA;AAKrC;"}

package/dist/features/trial-session/comps/pla/cuemath-app-features/cuemath-app-features.js

@@ -0,0 +1,90 @@
+import { jsxs as t, jsx as e, Fragment as s } from "react/jsx-runtime";
+import { memo as $, useCallback as f } from "react";
+import { useTheme as u } from "styled-components";
+import { ILLUSTRATIONS as b } from "../../../../../assets/illustrations/illustrations.js";
+import g from "../../../../../assets/line-icons/icons/next2.js";
+import { CUEMATH_APP_URL as w } from "../../../../../constants/config.js";
+import A from "../../../../ui/buttons/button/button.js";
+import c from "../../../../ui/image/image.js";
+import o from "../../../../ui/layout/flex-view.js";
+import a from "../../../../ui/separator/separator.js";
+import n from "../../../../ui/text/text.js";
+import { EDeviceType as I } from "../../../../ui/theme/constants.js";
+import { benefits as T } from "./cuemath-app-features-constants.js";
+import { ImageWrapper as x } from "./cuemath-app-features-styled.js";
+const E = () => {
+  const l = u(), r = l.device <= I.MOBILE, m = f(() => {
+    window.open(w, "_blank");
+  }, []);
+  return /* @__PURE__ */ t(o, { children: [
+    /* @__PURE__ */ t(o, { $flexDirection: "row", $justifyContent: "space-between", $alignItems: "center", children: [
+      /* @__PURE__ */ t(o, { children: [
+        /* @__PURE__ */ e(n, { $renderAs: "ah4-bold", $renderOnMobileAs: "ab1-bold", $color: "WHITE", children: "Do more with the Cuemath app" }),
+        !r && /* @__PURE__ */ t(s, { children: [
+          /* @__PURE__ */ e(a, { height: 4 }),
+          /* @__PURE__ */ t(o, { $flexDirection: "row", $alignItems: "center", $flexColumnGapX: 0.25, children: [
+            /* @__PURE__ */ e(n, { $renderAs: "ub1", $color: "WHITE_T_60", children: "Scan QR to download the app" }),
+            /* @__PURE__ */ e(g, { height: 24, width: 24, color: l.colors.WHITE_T_60 })
+          ] })
+        ] })
+      ] }),
+      !r && /* @__PURE__ */ e(o, { $background: "WHITE", children: /* @__PURE__ */ e(c, { src: b.CUEMATH_APP_QR_CODE, width: 60, height: 60 }) })
+    ] }),
+    /* @__PURE__ */ e(a, { height: r ? 16 : 20 }),
+    /* @__PURE__ */ e(o, { $flexGapX: 1, $justifyContent: "center", $flexDirection: r ? "column" : "row", children: T.map(({ icon: h, title: i, description: p, bgColor: d }) => /* @__PURE__ */ t(
+      o,
+      {
+        $flex: 1,
+        $flexDirection: r ? "row" : "column",
+        $alignItems: r ? "normal" : "center",
+        children: [
+          /* @__PURE__ */ e(
+            x,
+            {
+              $height: r ? "auto" : "100%",
+              $width: r ? "auto" : "100%",
+              children: /* @__PURE__ */ e(
+                c,
+                {
+                  src: h,
+                  height: r ? "auto" : 250,
+                  width: r ? 84 : "100%",
+                  alt: i
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ t(
+            o,
+            {
+              $background: d,
+              $gutterX: r ? 1 : 1.5,
+              $gapX: r ? 1 : 1.5,
+              $flex: 1,
+              $width: "100%",
+              children: [
+                /* @__PURE__ */ e(n, { $renderAs: "ac3-black", $color: "WHITE", $renderOnMobileAs: "ac4-black", children: i }),
+                /* @__PURE__ */ e(n, { $renderAs: "ub3", $color: "WHITE", children: p })
+              ]
+            }
+          )
+        ]
+      },
+      i
+    )) }),
+    r && /* @__PURE__ */ e(o, { $gapX: 1, children: /* @__PURE__ */ e(
+      A,
+      {
+        label: "Download the app",
+        renderAs: "secondary",
+        size: "small",
+        shape: "square",
+        onClick: m
+      }
+    ) })
+  ] });
+}, R = $(E);
+export {
+  R as default
+};
+//# sourceMappingURL=cuemath-app-features.js.map

package/dist/features/trial-session/comps/pla/cuemath-app-features/cuemath-app-features.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cuemath-app-features.js","sources":["../../../../../../src/features/trial-session/comps/pla/cuemath-app-features/cuemath-app-features.tsx"],"sourcesContent":["import { memo, useCallback, type FC } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { ILLUSTRATIONS } from '../../../../../assets/illustrations/illustrations';\nimport Next2Icon from '../../../../../assets/line-icons/icons/next2';\nimport { CUEMATH_APP_URL } from '../../../../../constants/config';\nimport Button from '../../../../ui/buttons/button/button';\nimport Image from '../../../../ui/image/image';\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 { benefits } from './cuemath-app-features-constants';\nimport * as Styled from './cuemath-app-features-styled';\n\nconst CuemathAppFeatures: FC = () => {\n  const theme = useTheme();\n  const isMobile = theme.device <= EDeviceType.MOBILE;\n\n  const handleOpenApp = useCallback(() => {\n    window.open(CUEMATH_APP_URL, '_blank');\n  }, []);\n\n  return (\n    <FlexView>\n      <FlexView $flexDirection=\"row\" $justifyContent=\"space-between\" $alignItems=\"center\">\n        <FlexView>\n          <Text $renderAs=\"ah4-bold\" $renderOnMobileAs=\"ab1-bold\" $color=\"WHITE\">\n            Do more with the Cuemath app\n          </Text>\n          {!isMobile && (\n            <>\n              <Separator height={4} />\n              <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexColumnGapX={0.25}>\n                <Text $renderAs=\"ub1\" $color=\"WHITE_T_60\">\n                  Scan QR to download the app\n                </Text>\n                <Next2Icon height={24} width={24} color={theme.colors.WHITE_T_60} />\n              </FlexView>\n            </>\n          )}\n        </FlexView>\n        {!isMobile && (\n          <FlexView $background=\"WHITE\">\n            <Image src={ILLUSTRATIONS.CUEMATH_APP_QR_CODE} width={60} height={60} />\n          </FlexView>\n        )}\n      </FlexView>\n      <Separator height={isMobile ? 16 : 20} />\n      <FlexView $flexGapX={1} $justifyContent=\"center\" $flexDirection={isMobile ? 'column' : 'row'}>\n        {benefits.map(({ icon, title, description, bgColor }) => (\n          <FlexView\n            key={title}\n            $flex={1}\n            $flexDirection={isMobile ? 'row' : 'column'}\n            $alignItems={isMobile ? 'normal' : 'center'}\n          >\n            <Styled.ImageWrapper\n              $height={isMobile ? 'auto' : '100%'}\n              $width={isMobile ? 'auto' : '100%'}\n            >\n              <Image\n                src={icon}\n                height={isMobile ? 'auto' : 250}\n                width={isMobile ? 84 : '100%'}\n                alt={title}\n              />\n            </Styled.ImageWrapper>\n            <FlexView\n              $background={bgColor}\n              $gutterX={isMobile ? 1 : 1.5}\n              $gapX={isMobile ? 1 : 1.5}\n              $flex={1}\n              $width=\"100%\"\n            >\n              <Text $renderAs=\"ac3-black\" $color=\"WHITE\" $renderOnMobileAs=\"ac4-black\">\n                {title}\n              </Text>\n              <Text $renderAs=\"ub3\" $color=\"WHITE\">\n                {description}\n              </Text>\n            </FlexView>\n          </FlexView>\n        ))}\n      </FlexView>\n      {isMobile && (\n        <FlexView $gapX={1}>\n          <Button\n            label=\"Download the app\"\n            renderAs=\"secondary\"\n            size=\"small\"\n            shape=\"square\"\n            onClick={handleOpenApp}\n          />\n        </FlexView>\n      )}\n    </FlexView>\n  );\n};\n\nexport default memo(CuemathAppFeatures);\n"],"names":["CuemathAppFeatures","theme","useTheme","isMobile","EDeviceType","handleOpenApp","useCallback","CUEMATH_APP_URL","FlexView","jsxs","jsx","Text","Fragment","Separator","Next2Icon","Image","ILLUSTRATIONS","benefits","icon","title","description","bgColor","Styled.ImageWrapper","Button","cuemathAppFeatures","memo"],"mappings":"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"}

package/dist/features/trial-session/comps/pla/math-practice/math-practice-constants.js

@@ -0,0 +1,19 @@
+import { GIF as t } from "../../../../../assets/gif/gif.js";
+const a = [
+  {
+    title: "Strategy Games",
+    image: t.GAMES
+  },
+  {
+    title: "Logic Puzzles",
+    image: t.PUZZLES
+  },
+  {
+    title: "Mental Math",
+    image: t.SKILLS
+  }
+];
+export {
+  a as mathPracticeData
+};
+//# sourceMappingURL=math-practice-constants.js.map

package/dist/features/trial-session/comps/pla/math-practice/math-practice-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"math-practice-constants.js","sources":["../../../../../../src/features/trial-session/comps/pla/math-practice/math-practice-constants.ts"],"sourcesContent":["import { GIF } from '../../../../../assets/gif/gif';\n\nexport const mathPracticeData = [\n  {\n    title: 'Strategy Games',\n    image: GIF.GAMES,\n  },\n  {\n    title: 'Logic Puzzles',\n    image: GIF.PUZZLES,\n  },\n  {\n    title: 'Mental Math',\n    image: GIF.SKILLS,\n  },\n];\n"],"names":["mathPracticeData","GIF"],"mappings":";AAEO,MAAMA,IAAmB;AAAA,EAC9B;AAAA,IACE,OAAO;AAAA,IACP,OAAOC,EAAI;AAAA,EACb;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,OAAOA,EAAI;AAAA,EACb;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,OAAOA,EAAI;AAAA,EACb;AACF;"}