@cuemath/leap 3.0.10 → 3.0.11-j1

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

@@ -0,0 +1,131 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { forwardRef as b, useRef as c, useState as $, useCallback as E, useEffect as H, useImperativeHandle as B, useLayoutEffect as T } from "react";
+import j from "../../../../assets/line-icons/icons/back2.js";
+import P from "../../../../assets/line-icons/icons/next2.js";
+import z from "../../../ui/animated-arc/animated-arc.js";
+import C from "../../../ui/buttons/icon-button/icon-button.js";
+import F from "../../../ui/layout/flex-view.js";
+import M from "../../../ui/lottie-animation/lottie-animation.js";
+import N from "../../../ui/separator/separator.js";
+import O from "../../../ui/text/text.js";
+import { Container as V, CircularStepContainer as X, ContentWrapper as D, InputContainer as K, PrevButtonWrapper as Y, NextButtonWrapper as _ } from "./circular-step-wrapper-styled.js";
+const q = {
+  autoplay: !1,
+  loop: !1,
+  renderer: "canvas",
+  rendererSettings: {
+    preserveAspectRatio: "xMidYMin slice"
+  }
+}, G = b(
+  ({
+    children: g,
+    onGoBack: y,
+    onNext: I,
+    label: a,
+    showNext: x,
+    showPrevious: A,
+    animation: r,
+    introFrames: S,
+    outroFrames: w,
+    isNextLoading: s,
+    progressAngle: l
+  }, R) => {
+    const t = c(null), o = c(null), [u, k] = $(), [v, m] = $(!1), i = c(null), L = E(() => {
+      r && t.current && (t.current.playSegments(S, !0), m(!0));
+    }, [r]);
+    return H(() => () => {
+      i.current && clearTimeout(i.current);
+    }, [r]), B(R, () => ({
+      playOutroAndFadeOut: async () => new Promise((W) => {
+        var f, p;
+        const d = () => {
+          var h;
+          W(), (h = t.current) == null || h.removeEventListener("complete", d);
+        };
+        (f = t.current) == null || f.playSegments(w, !0), i.current = setTimeout(() => m(!1), 400), (p = t.current) == null || p.addEventListener("complete", d);
+      })
+    })), T(() => {
+      o.current && k(o.current.offsetHeight);
+    }, []), /* @__PURE__ */ n(
+      V,
+      {
+        $flex: 1,
+        $flexDirection: "column",
+        $alignItems: "center",
+        $justifyContent: "center",
+        $width: "100%",
+        $height: "100%",
+        ref: o,
+        children: [
+          u && /* @__PURE__ */ e(
+            M,
+            {
+              width: 1280,
+              height: u,
+              src: r,
+              ref: t,
+              onRender: L,
+              settings: q
+            }
+          ),
+          /* @__PURE__ */ n(
+            X,
+            {
+              $width: 400,
+              $height: 400,
+              $background: "REAL_BLACK",
+              $alignItems: "center",
+              $justifyContent: "center",
+              children: [
+                l && /* @__PURE__ */ e(
+                  z,
+                  {
+                    radius: 200,
+                    strokeWidth: 2,
+                    color: "WHITE",
+                    targetAngle: l,
+                    mode: "fade",
+                    duration: 1
+                  }
+                ),
+                /* @__PURE__ */ n(D, { $isVisible: v, $width: "100%", children: [
+                  a ? /* @__PURE__ */ n(F, { $gutterX: 3.5, children: [
+                    /* @__PURE__ */ e(O, { $renderAs: "ab2", $color: "WHITE", $align: "center", children: a }),
+                    /* @__PURE__ */ e(N, { heightX: 1 })
+                  ] }) : null,
+                  /* @__PURE__ */ e(K, { children: g })
+                ] })
+              ]
+            }
+          ),
+          A && /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ e(
+            C,
+            {
+              Icon: j,
+              renderAs: "secondary-dark",
+              analyticsLabel: "Prev",
+              onClick: y,
+              disabled: s,
+              size: "small"
+            }
+          ) }),
+          x && /* @__PURE__ */ e(_, { children: /* @__PURE__ */ e(
+            C,
+            {
+              size: "small",
+              Icon: P,
+              renderAs: "secondary-dark",
+              analyticsLabel: "Next",
+              onClick: I,
+              busy: s
+            }
+          ) })
+        ]
+      }
+    );
+  }
+), ae = G;
+export {
+  ae as default
+};
+//# sourceMappingURL=circular-step-wrapper.js.map

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

@@ -0,0 +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  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    },\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            ) : null}\n            <Styled.InputContainer>{children}</Styled.InputContainer>\n          </Styled.ContentWrapper>\n        </Styled.CircularStepContainer>\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 CircularStepWrapper;\n"],"names":["animationSettings","CircularStepWrapper","forwardRef","children","onGoBack","onNext","label","showNext","showPrevious","animation","introFrames","outroFrames","isNextLoading","progressAngle","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.PrevButtonWrapper","IconButton","Back2Icon","Styled.NextButtonWrapper","Next2Icon","CircularStepWrapper$1"],"mappings":";;;;;;;;;;;AAwBA,MAAMA,IAAoB;AAAA,EACxB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AAAA,EACV,kBAAkB;AAAA,IAChB,qBAAqB;AAAA,EACvB;AACF,GAEMC,IAAsBC;AAAA,EAC1B,CACE;AAAA,IACE,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,eAAAC;AAAA,KAEFC,MACG;AACG,UAAAC,IAAeC,EAAmC,IAAI,GACtDC,IAAeD,EAAuB,IAAI,GAC1C,CAACE,GAAiBC,CAAkB,IAAIC,EAA6B,GACrE,CAACC,GAAaC,CAAc,IAAIF,EAAS,EAAK,GAC9CG,IAAaP,EAA8B,IAAI,GAE/CQ,IAAiBC,EAAY,MAAM;AACnC,MAAAhB,KAAaM,EAAa,YACfA,EAAA,QAAQ,aAAaL,GAAa,EAAI,GACnDY,EAAe,EAAI;AAAA,IACrB,GAEC,CAACb,CAAS,CAAC;AAEd,WAAAiB,EAAU,MACD,MAAM;AACX,MAAIH,EAAW,WACb,aAAaA,EAAW,OAAO;AAAA,IACjC,GAED,CAACd,CAAS,CAAC,GAEdkB,EAAoBb,GAAK,OAAO;AAAA,MAC9B,qBAAqB,YACZ,IAAI,QAAc,CAAWc,MAAA;;AAClC,cAAMC,IAAiB,MAAM;;AACnB,UAAAD,MACKE,IAAAf,EAAA,YAAA,QAAAe,EAAS,oBAAoB,YAAYD;AAAA,QAAc;AAGzD,SAAAC,IAAAf,EAAA,YAAA,QAAAe,EAAS,aAAanB,GAAa,KAChDY,EAAW,UAAU,WAAW,MAAMD,EAAe,EAAK,GAAG,GAAG,IACnDS,IAAAhB,EAAA,YAAA,QAAAgB,EAAS,iBAAiB,YAAYF;AAAA,MAAc,CAClE;AAAA,IAEH,EAAA,GAEFG,EAAgB,MAAM;AACpB,MAAIf,EAAa,WACIE,EAAAF,EAAa,QAAQ,YAAY;AAAA,IAExD,GAAG,CAAE,CAAA,GAGH,gBAAAgB;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAChB,QAAO;AAAA,QACP,SAAQ;AAAA,QACR,KAAKjB;AAAA,QAEJ,UAAA;AAAA,UACCC,KAAA,gBAAAiB;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAQlB;AAAA,cACR,KAAKT;AAAA,cACL,KAAKM;AAAA,cACL,UAAUS;AAAA,cACV,UAAUxB;AAAA,YAAA;AAAA,UACZ;AAAA,UAEF,gBAAAiC;AAAA,YAACI;AAAAA,YAAA;AAAA,cACC,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,aAAY;AAAA,cACZ,aAAY;AAAA,cACZ,iBAAgB;AAAA,cAEf,UAAA;AAAA,gBACCxB,KAAA,gBAAAsB;AAAA,kBAACG;AAAA,kBAAA;AAAA,oBACC,QAAQ;AAAA,oBACR,aAAa;AAAA,oBACb,OAAM;AAAA,oBACN,aAAazB;AAAA,oBACb,MAAK;AAAA,oBACL,UAAU;AAAA,kBAAA;AAAA,gBACZ;AAAA,kCAED0B,GAAA,EAAsB,YAAYlB,GAAa,QAAO,QACpD,UAAA;AAAA,kBACCf,IAAA,gBAAA2B,EAACO,GAAS,EAAA,UAAU,KAClB,UAAA;AAAA,oBAAA,gBAAAL,EAACM,KAAK,WAAU,OAAM,QAAO,SAAQ,QAAO,UACzC,UACHnC,EAAA,CAAA;AAAA,oBACA,gBAAA6B,EAACO,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,kBAAA,EAAA,CACzB,IACE;AAAA,kBACH,gBAAAP,EAAAQ,GAAA,EAAuB,UAAAxC,GAAS;AAAA,gBAAA,GACnC;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,UACCK,KACC,gBAAA2B,EAACS,GAAA,EACC,UAAA,gBAAAT;AAAA,YAACU;AAAA,YAAA;AAAA,cACC,MAAMC;AAAA,cACN,UAAS;AAAA,cACT,gBAAe;AAAA,cACf,SAAS1C;AAAA,cACT,UAAUQ;AAAA,cACV,MAAK;AAAA,YAAA;AAAA,UAAA,GAET;AAAA,UAEDL,KACC,gBAAA4B,EAACY,GAAA,EACC,UAAA,gBAAAZ;AAAA,YAACU;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAMG;AAAA,cACN,UAAS;AAAA,cACT,gBAAe;AAAA,cACf,SAAS3C;AAAA,cACT,MAAMO;AAAA,YAAA;AAAA,UAAA,GAEV;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF,GAEAqC,KAAehD;"}

package/dist/features/auth/signup/claim-user-account/claim-user-account-styled.js

@@ -0,0 +1,27 @@
+import s from "styled-components";
+import i from "../../../ui/layout/flex-view.js";
+const d = s(i)`
+  max-width: 200px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  position: relative;
+  border-left: 1px solid ${({ theme: o }) => o.colors.BLACK_5};
+  border-bottom: 1px solid ${({ theme: o }) => o.colors.BLACK_5};
+
+  &:hover {
+    background-color: ${({ theme: o }) => o.colors.BLACK_2};
+  }
+
+  ${({ index: o, theme: r }) => o < 5 && `border-top: 1px solid ${r.colors.BLACK_5};`}
+
+  ${({ index: o, isLastItem: r, theme: e }) => ((o + 1) % 5 === 0 || r) && `border-right: 1px solid ${e.colors.BLACK_5};`}
+`, p = s.div`
+  display: inline-grid;
+  grid-template-columns: repeat(${({ itemCount: o }) => o < 5 ? o : 5}, 200px);
+  grid-auto-rows: 200px;
+`;
+export {
+  d as AccountCard,
+  p as UserAccountsWrapper
+};
+//# sourceMappingURL=claim-user-account-styled.js.map

package/dist/features/auth/signup/claim-user-account/claim-user-account-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"claim-user-account-styled.js","sources":["../../../../../src/features/auth/signup/claim-user-account/claim-user-account-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nexport const AccountCard = styled(FlexView)<{ index: number; isLastItem: boolean }>`\n  max-width: 200px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n  position: relative;\n  border-left: 1px solid ${({ theme }) => theme.colors.BLACK_5};\n  border-bottom: 1px solid ${({ theme }) => theme.colors.BLACK_5};\n\n  &:hover {\n    background-color: ${({ theme }) => theme.colors.BLACK_2};\n  }\n\n  ${({ index, theme }) => index < 5 && `border-top: 1px solid ${theme.colors.BLACK_5};`}\n\n  ${({ index, isLastItem, theme }) =>\n    ((index + 1) % 5 === 0 || isLastItem) && `border-right: 1px solid ${theme.colors.BLACK_5};`}\n`;\n\nexport const UserAccountsWrapper = styled.div<{ itemCount: number }>`\n  display: inline-grid;\n  grid-template-columns: repeat(${({ itemCount }) => (itemCount < 5 ? itemCount : 5)}, 200px);\n  grid-auto-rows: 200px;\n`;\n"],"names":["AccountCard","styled","FlexView","theme","index","isLastItem","UserAccountsWrapper","itemCount"],"mappings":";;AAIa,MAAAA,IAAcC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKf,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,6BACjC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,wBAGxC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,IAGvD,CAAC,EAAE,OAAAC,GAAO,OAAAD,EAAM,MAAMC,IAAQ,KAAK,yBAAyBD,EAAM,OAAO,OAAO,GAAG;AAAA;AAAA,IAEnF,CAAC,EAAE,OAAAC,GAAO,YAAAC,GAAY,OAAAF,UACpBC,IAAQ,KAAK,MAAM,KAAKC,MAAe,2BAA2BF,EAAM,OAAO,OAAO,GAAG;AAAA,GAGlFG,IAAsBL,EAAO;AAAA;AAAA,kCAER,CAAC,EAAE,WAAAM,QAAiBA,IAAY,IAAIA,IAAY,CAAE;AAAA;AAAA;"}

package/dist/features/auth/signup/claim-user-account/claim-user-account.js

@@ -0,0 +1,79 @@
+import { jsxs as r, jsx as e, Fragment as g } from "react/jsx-runtime";
+import { memo as u } from "react";
+import { ILLUSTRATIONS as I } from "../../../../assets/illustrations/illustrations.js";
+import A from "../../../ui/avatar/avatar.js";
+import C from "../../../ui/buttons/button/button.js";
+import T from "../../../ui/image/image.js";
+import n from "../../../ui/layout/flex-view.js";
+import t from "../../../ui/separator/separator.js";
+import o from "../../../ui/text/text.js";
+import b from "../../comps/overlay-loader/overlay-loader.js";
+import { UserAccountsWrapper as W, AccountCard as w } from "./claim-user-account-styled.js";
+const E = ({
+  email: s,
+  onSelectAccount: h,
+  userAccounts: i,
+  onCreateNewAccount: d,
+  isCreatingAccount: l,
+  isLoading: $,
+  showCreateNewAccount: p
+}) => {
+  const c = i.length;
+  return /* @__PURE__ */ r(n, { $flex: 1, $alignItems: "center", $justifyContent: "center", $width: "100%", $height: "100%", children: [
+    /* @__PURE__ */ e(b, { isLoading: $ }),
+    /* @__PURE__ */ e(T, { src: I.CIRCLE_CUEMATH_LOGO_WHITE, alt: "Parent Signup", withLoader: !1 }),
+    /* @__PURE__ */ e(t, { heightX: 1 }),
+    /* @__PURE__ */ r(n, { children: [
+      /* @__PURE__ */ r(o, { $renderAs: "ab1", $color: "WHITE", $align: "center", children: [
+        "We found multiple profiles linked to",
+        " ",
+        /* @__PURE__ */ e(o, { $color: "WHITE", $inline: !0, $renderAs: "ab1-bold", children: s })
+      ] }),
+      /* @__PURE__ */ e(o, { $renderAs: "ab1", $color: "WHITE", $align: "center", children: "Which one would you like to proceed with?" })
+    ] }),
+    /* @__PURE__ */ e(t, { heightX: 5 }),
+    /* @__PURE__ */ e(W, { itemCount: c, children: i.map(({ id: a, phone: f }, m) => /* @__PURE__ */ r(
+      w,
+      {
+        $gutterX: 2,
+        $gapX: 2.81,
+        $width: 200,
+        $height: 200,
+        $alignItems: "center",
+        $justifyContent: "center",
+        onClick: () => h(a),
+        index: m,
+        isLastItem: m === c - 1,
+        children: [
+          /* @__PURE__ */ e(A, { size: 80 }),
+          /* @__PURE__ */ e(t, { heightX: 0.5 }),
+          /* @__PURE__ */ e(o, { $color: "WHITE", $renderAs: "ab2", $align: "center", children: f })
+        ]
+      },
+      a
+    )) }),
+    p && /* @__PURE__ */ r(g, { children: [
+      /* @__PURE__ */ e(t, { heightX: 5 }),
+      /* @__PURE__ */ r(n, { $alignItems: "center", $justifyContent: "center", children: [
+        /* @__PURE__ */ e(o, { $renderAs: "ub2", $color: "WHITE", children: "Don't recognize these accounts?" }),
+        /* @__PURE__ */ e(t, { heightX: 1 }),
+        /* @__PURE__ */ e(
+          C,
+          {
+            width: 232,
+            size: "small",
+            label: "Create new account",
+            renderAs: "secondary-dark",
+            onClick: d,
+            busy: l,
+            disabled: l
+          }
+        )
+      ] })
+    ] })
+  ] });
+}, _ = u(E);
+export {
+  _ as default
+};
+//# sourceMappingURL=claim-user-account.js.map

package/dist/features/auth/signup/claim-user-account/claim-user-account.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"claim-user-account.js","sources":["../../../../../src/features/auth/signup/claim-user-account/claim-user-account.tsx"],"sourcesContent":["import type { IClaimUserAccountProps } from './claim-user-account-types';\n\nimport { memo } from 'react';\nimport { type FC } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport Avatar from '../../../ui/avatar/avatar';\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 OverlayLoader from '../../comps/overlay-loader/overlay-loader';\nimport * as Styled from './claim-user-account-styled';\n\nconst ClaimUserAccount: FC<IClaimUserAccountProps> = ({\n  email,\n  onSelectAccount,\n  userAccounts,\n  onCreateNewAccount,\n  isCreatingAccount,\n  isLoading,\n  showCreateNewAccount,\n}) => {\n  const totalUsers = userAccounts.length;\n\n  return (\n    <FlexView $flex={1} $alignItems=\"center\" $justifyContent=\"center\" $width=\"100%\" $height=\"100%\">\n      <OverlayLoader isLoading={isLoading} />\n      <Image src={ILLUSTRATIONS.CIRCLE_CUEMATH_LOGO_WHITE} alt=\"Parent Signup\" withLoader={false} />\n      <Separator heightX={1} />\n      <FlexView>\n        <Text $renderAs=\"ab1\" $color=\"WHITE\" $align=\"center\">\n          We found multiple profiles linked to{' '}\n          <Text $color=\"WHITE\" $inline $renderAs=\"ab1-bold\">\n            {email}\n          </Text>\n        </Text>\n        <Text $renderAs=\"ab1\" $color=\"WHITE\" $align=\"center\">\n          Which one would you like to proceed with?\n        </Text>\n      </FlexView>\n      <Separator heightX={5} />\n      <Styled.UserAccountsWrapper itemCount={totalUsers}>\n        {userAccounts.map(({ id, phone }, i) => (\n          <Styled.AccountCard\n            $gutterX={2}\n            $gapX={2.81}\n            key={id}\n            $width={200}\n            $height={200}\n            $alignItems=\"center\"\n            $justifyContent=\"center\"\n            onClick={() => onSelectAccount(id)}\n            index={i}\n            isLastItem={i === totalUsers - 1}\n          >\n            <Avatar size={80} />\n            <Separator heightX={0.5} />\n            <Text $color=\"WHITE\" $renderAs=\"ab2\" $align=\"center\">\n              {phone}\n            </Text>\n          </Styled.AccountCard>\n        ))}\n      </Styled.UserAccountsWrapper>\n      {showCreateNewAccount && (\n        <>\n          <Separator heightX={5} />\n          <FlexView $alignItems=\"center\" $justifyContent=\"center\">\n            <Text $renderAs=\"ub2\" $color=\"WHITE\">\n              Don't recognize these accounts?\n            </Text>\n            <Separator heightX={1} />\n            <Button\n              width={232}\n              size=\"small\"\n              label=\"Create new account\"\n              renderAs=\"secondary-dark\"\n              onClick={onCreateNewAccount}\n              busy={isCreatingAccount}\n              disabled={isCreatingAccount}\n            />\n          </FlexView>\n        </>\n      )}\n    </FlexView>\n  );\n};\n\nexport default memo(ClaimUserAccount);\n"],"names":["ClaimUserAccount","email","onSelectAccount","userAccounts","onCreateNewAccount","isCreatingAccount","isLoading","showCreateNewAccount","totalUsers","jsxs","FlexView","jsx","OverlayLoader","Image","ILLUSTRATIONS","Separator","Text","Styled.UserAccountsWrapper","id","phone","i","Styled.AccountCard","Avatar","Fragment","Button","claimUserAccount","memo"],"mappings":";;;;;;;;;;;AAeA,MAAMA,IAA+C,CAAC;AAAA,EACpD,OAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,sBAAAC;AACF,MAAM;AACJ,QAAMC,IAAaL,EAAa;AAG9B,SAAA,gBAAAM,EAACC,GAAS,EAAA,OAAO,GAAG,aAAY,UAAS,iBAAgB,UAAS,QAAO,QAAO,SAAQ,QACtF,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAc,WAAAN,GAAsB;AAAA,IACrC,gBAAAK,EAACE,KAAM,KAAKC,EAAc,2BAA2B,KAAI,iBAAgB,YAAY,IAAO;AAAA,IAC5F,gBAAAH,EAACI,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,sBACtBL,GACC,EAAA,UAAA;AAAA,MAAA,gBAAAD,EAACO,KAAK,WAAU,OAAM,QAAO,SAAQ,QAAO,UAAS,UAAA;AAAA,QAAA;AAAA,QACd;AAAA,QACrC,gBAAAL,EAACK,KAAK,QAAO,SAAQ,SAAO,IAAC,WAAU,YACpC,UACHf,EAAA,CAAA;AAAA,MAAA,GACF;AAAA,MACA,gBAAAU,EAACK,KAAK,WAAU,OAAM,QAAO,SAAQ,QAAO,UAAS,UAErD,4CAAA,CAAA;AAAA,IAAA,GACF;AAAA,IACA,gBAAAL,EAACI,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,IACtB,gBAAAJ,EAAAM,GAAA,EAA2B,WAAWT,GACpC,UAAaL,EAAA,IAAI,CAAC,EAAE,IAAAe,GAAI,OAAAC,KAASC,MAChC,gBAAAX;AAAA,MAACY;AAAAA,MAAA;AAAA,QACC,UAAU;AAAA,QACV,OAAO;AAAA,QAEP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAChB,SAAS,MAAMnB,EAAgBgB,CAAE;AAAA,QACjC,OAAOE;AAAA,QACP,YAAYA,MAAMZ,IAAa;AAAA,QAE/B,UAAA;AAAA,UAAC,gBAAAG,EAAAW,GAAA,EAAO,MAAM,GAAI,CAAA;AAAA,UAClB,gBAAAX,EAACI,GAAU,EAAA,SAAS,IAAK,CAAA;AAAA,UACzB,gBAAAJ,EAACK,KAAK,QAAO,SAAQ,WAAU,OAAM,QAAO,UACzC,UACHG,EAAA,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAbKD;AAAA,IAeR,CAAA,GACH;AAAA,IACCX,KAEG,gBAAAE,EAAAc,GAAA,EAAA,UAAA;AAAA,MAAC,gBAAAZ,EAAAI,GAAA,EAAU,SAAS,EAAG,CAAA;AAAA,MACtB,gBAAAN,EAAAC,GAAA,EAAS,aAAY,UAAS,iBAAgB,UAC7C,UAAA;AAAA,QAAA,gBAAAC,EAACK,GAAK,EAAA,WAAU,OAAM,QAAO,SAAQ,UAErC,mCAAA;AAAA,QACA,gBAAAL,EAACI,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,QACvB,gBAAAJ;AAAA,UAACa;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,MAAK;AAAA,YACL,OAAM;AAAA,YACN,UAAS;AAAA,YACT,SAASpB;AAAA,YACT,MAAMC;AAAA,YACN,UAAUA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA,GACF;AAAA,IAAA,GACF;AAAA,EAEJ,EAAA,CAAA;AAEJ,GAEeoB,IAAAC,EAAK1B,CAAgB;"}

package/dist/features/auth/signup/custom-input-field/country-selector/country-code-button.js

@@ -0,0 +1,33 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import n from "../../../../../assets/line-icons/icons/chevron-down.js";
+import i from "../../../../ui/layout/flex-view.js";
+import d from "../../../../ui/text/text.js";
+import { CountryCodeButton as $ } from "./country-selector-styled.js";
+const C = ({
+  value: t,
+  menuVisible: e
+}) => /* @__PURE__ */ o(
+  $,
+  {
+    $background: "BLACK_5",
+    $borderRadius: 4,
+    $gutterX: 0.5,
+    $gap: 5,
+    $alignItems: "center",
+    $justifyContent: "space-between",
+    $borderColor: e ? "WHITE_T_38" : "BLACK_5",
+    $flexDirection: "row",
+    $flexGap: 2,
+    children: [
+      /* @__PURE__ */ o(d, { $renderAs: "ab1", $color: "WHITE", children: [
+        "+",
+        t
+      ] }),
+      /* @__PURE__ */ r(i, { $width: 20, children: /* @__PURE__ */ r(n, { width: 20, height: 20, color: "WHITE" }) })
+    ]
+  }
+);
+export {
+  C as default
+};
+//# sourceMappingURL=country-code-button.js.map

package/dist/features/auth/signup/custom-input-field/country-selector/country-code-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"country-code-button.js","sources":["../../../../../../src/features/auth/signup/custom-input-field/country-selector/country-code-button.tsx"],"sourcesContent":["import type { FC } from 'react';\n\nimport ChevronDownIcon from '../../../../../assets/line-icons/icons/chevron-down';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport * as Styled from './country-selector-styled';\n\nconst CountryCodeButton: FC<{ value?: string; menuVisible?: boolean }> = ({\n  value,\n  menuVisible,\n}) => {\n  return (\n    <Styled.CountryCodeButton\n      $background=\"BLACK_5\"\n      $borderRadius={4}\n      $gutterX={0.5}\n      $gap={5}\n      $alignItems=\"center\"\n      $justifyContent=\"space-between\"\n      $borderColor={menuVisible ? 'WHITE_T_38' : 'BLACK_5'}\n      $flexDirection=\"row\"\n      $flexGap={2}\n    >\n      <Text $renderAs=\"ab1\" $color=\"WHITE\">\n        +{value}\n      </Text>\n      <FlexView $width={20}>\n        <ChevronDownIcon width={20} height={20} color=\"WHITE\" />\n      </FlexView>\n    </Styled.CountryCodeButton>\n  );\n};\n\nexport default CountryCodeButton;\n"],"names":["CountryCodeButton","value","menuVisible","jsxs","Styled.CountryCodeButton","Text","jsx","FlexView","ChevronDownIcon"],"mappings":";;;;;AAOA,MAAMA,IAAmE,CAAC;AAAA,EACxE,OAAAC;AAAA,EACA,aAAAC;AACF,MAEI,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,aAAY;AAAA,IACZ,eAAe;AAAA,IACf,UAAU;AAAA,IACV,MAAM;AAAA,IACN,aAAY;AAAA,IACZ,iBAAgB;AAAA,IAChB,cAAcF,IAAc,eAAe;AAAA,IAC3C,gBAAe;AAAA,IACf,UAAU;AAAA,IAEV,UAAA;AAAA,MAAA,gBAAAC,EAACE,GAAK,EAAA,WAAU,OAAM,QAAO,SAAQ,UAAA;AAAA,QAAA;AAAA,QACjCJ;AAAA,MAAA,GACJ;AAAA,MACC,gBAAAK,EAAAC,GAAA,EAAS,QAAQ,IAChB,UAAC,gBAAAD,EAAAE,GAAA,EAAgB,OAAO,IAAI,QAAQ,IAAI,OAAM,QAAQ,CAAA,GACxD;AAAA,IAAA;AAAA,EAAA;AAAA;"}

package/dist/features/auth/signup/custom-input-field/country-selector/country-list-menu.js

@@ -0,0 +1,98 @@
+import { jsxs as h, jsx as a } from "react/jsx-runtime";
+import { useState as I, useRef as p, useEffect as g, useCallback as C } from "react";
+import L from "../../../../ui/separator/separator.js";
+import T from "../../../../ui/text/text.js";
+import { COUNTRY_CODE_MAP as i } from "../../signup-constants.js";
+import { MenuWrapper as b, MenuItem as y, FlagIcon as X, Instructions as D } from "./country-selector-styled.js";
+const _ = ({ selectedCountry: $, onChange: u, menuVisible: w }) => {
+  const [s, d] = I(""), [o, l] = I(-1), c = p(null), f = p(null), E = p([]);
+  g(() => {
+    var e;
+    o >= 0 && ((e = E.current[o]) == null || e.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest"
+    }));
+  }, [o]), g(() => {
+    if (s) {
+      const e = i.findIndex(
+        (t) => t.value.toLowerCase().includes(s.toLowerCase()) || t.code.startsWith(s)
+      );
+      l(e), c.current && clearTimeout(c.current), c.current = setTimeout(() => {
+        d("");
+      }, 1e3);
+    }
+    return () => {
+      c.current && clearTimeout(c.current);
+    };
+  }, [s]);
+  const m = C(
+    (e) => {
+      var n;
+      const { key: t } = e;
+      if (e.preventDefault(), e.stopPropagation(), t.length === 1 && /[a-zA-Z0-9\s]/.test(t)) {
+        d((r) => r + t.toLowerCase());
+        return;
+      }
+      if (t === "ArrowDown")
+        l((r) => r < i.length - 1 ? r + 1 : 0);
+      else if (t === "ArrowUp")
+        l((r) => r > 0 ? r - 1 : i.length - 1);
+      else if (t === "Enter" && o >= 0) {
+        const r = i[o];
+        r && u({ code: r.code, id: r.id }), (n = f.current) == null || n.click();
+      } else t === "Escape" && (d(""), l(-1));
+    },
+    [o, u]
+  );
+  return g(() => {
+    const e = f.current;
+    if (!(!e || !w))
+      return e.focus(), e.addEventListener("keydown", m), () => {
+        e.removeEventListener("keydown", m);
+      };
+  }, [w, m, $.id]), /* @__PURE__ */ h(
+    b,
+    {
+      ref: f,
+      tabIndex: 0,
+      $widthX: 10,
+      $gapX: 0.5,
+      $background: "BLACK_2",
+      $borderColor: "BLACK_5",
+      children: [
+        i.map((e, t) => {
+          const { id: n, value: r, icon: x, code: k } = e;
+          return /* @__PURE__ */ h(
+            y,
+            {
+              ref: (A) => E.current[t] = A,
+              "data-country-id": n,
+              onClick: () => u({ code: k, id: n }),
+              $gutterX: 0.5,
+              $gapX: 0.75,
+              $width: "100%",
+              $flexDirection: "row",
+              $alignItems: "center",
+              $flexGap: 8,
+              $isSelected: $.id === n,
+              $isHighlighted: o === t,
+              children: [
+                /* @__PURE__ */ a(X, { src: x }),
+                /* @__PURE__ */ a(T, { $renderAs: "ab3", $color: "WHITE", children: r })
+              ]
+            },
+            n
+          );
+        }),
+        /* @__PURE__ */ h(D, { $gutterX: 0.5, children: [
+          /* @__PURE__ */ a(L, { heightX: 0.5 }),
+          /* @__PURE__ */ a(T, { $renderAs: "ab3", $color: "WHITE", children: "Type to search • ↑↓ to navigate • Enter to select • Esc to clear" })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  _ as default
+};
+//# sourceMappingURL=country-list-menu.js.map

package/dist/features/auth/signup/custom-input-field/country-selector/country-list-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"country-list-menu.js","sources":["../../../../../../src/features/auth/signup/custom-input-field/country-selector/country-list-menu.tsx"],"sourcesContent":["import type { ICountryListMenuProps } from './country-selector-types';\nimport type { FC } from 'react';\n\nimport { useState, useEffect, useRef, useCallback } from 'react';\n\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport { COUNTRY_CODE_MAP } from '../../signup-constants';\nimport * as Styled from './country-selector-styled';\n\nconst CountryListMenu: FC<ICountryListMenuProps> = ({ selectedCountry, onChange, menuVisible }) => {\n  const [searchTerm, setSearchTerm] = useState('');\n  const [highlightedIndex, setHighlightedIndex] = useState(-1);\n  const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);\n\n  useEffect(() => {\n    if (highlightedIndex >= 0) {\n      itemRefs.current[highlightedIndex]?.scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n      });\n    }\n  }, [highlightedIndex]);\n\n  useEffect(() => {\n    if (searchTerm) {\n      const index = COUNTRY_CODE_MAP.findIndex(\n        c =>\n          c.value.toLowerCase().includes(searchTerm.toLowerCase()) || c.code.startsWith(searchTerm),\n      );\n\n      setHighlightedIndex(index);\n      if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);\n      searchTimeoutRef.current = setTimeout(() => {\n        setSearchTerm('');\n      }, 1000);\n    }\n\n    return () => {\n      if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);\n    };\n  }, [searchTerm]);\n\n  const handleKeyDown = useCallback(\n    (event: globalThis.KeyboardEvent) => {\n      const { key } = event;\n\n      event.preventDefault();\n      event.stopPropagation();\n      if (key.length === 1 && /[a-zA-Z0-9\\s]/.test(key)) {\n        setSearchTerm(prev => prev + key.toLowerCase());\n\n        return;\n      }\n\n      if (key === 'ArrowDown') {\n        setHighlightedIndex(prev => (prev < COUNTRY_CODE_MAP.length - 1 ? prev + 1 : 0));\n      } else if (key === 'ArrowUp') {\n        setHighlightedIndex(prev => (prev > 0 ? prev - 1 : COUNTRY_CODE_MAP.length - 1));\n      } else if (key === 'Enter' && highlightedIndex >= 0) {\n        const selectedOption = COUNTRY_CODE_MAP[highlightedIndex];\n\n        selectedOption && onChange({ code: selectedOption.code, id: selectedOption.id });\n        menuRef.current?.click();\n      } else if (key === 'Escape') {\n        setSearchTerm('');\n        setHighlightedIndex(-1);\n      }\n    },\n    [highlightedIndex, onChange],\n  );\n\n  useEffect(() => {\n    const menuElement = menuRef.current;\n\n    if (!menuElement || !menuVisible) return;\n\n    menuElement.focus();\n    menuElement.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      menuElement.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [menuVisible, handleKeyDown, selectedCountry.id]);\n\n  return (\n    <Styled.MenuWrapper\n      ref={menuRef}\n      tabIndex={0}\n      $widthX={10}\n      $gapX={0.5}\n      $background=\"BLACK_2\"\n      $borderColor=\"BLACK_5\"\n    >\n      {COUNTRY_CODE_MAP.map((option, index) => {\n        const { id, value, icon, code } = option;\n\n        return (\n          <Styled.MenuItem\n            key={id}\n            ref={el => (itemRefs.current[index] = el)}\n            data-country-id={id}\n            onClick={() => onChange({ code, id })}\n            $gutterX={0.5}\n            $gapX={0.75}\n            $width=\"100%\"\n            $flexDirection=\"row\"\n            $alignItems=\"center\"\n            $flexGap={8}\n            $isSelected={selectedCountry.id === id}\n            $isHighlighted={highlightedIndex === index}\n          >\n            <Styled.FlagIcon src={icon} />\n            <Text $renderAs=\"ab3\" $color=\"WHITE\">\n              {value}\n            </Text>\n          </Styled.MenuItem>\n        );\n      })}\n\n      <Styled.Instructions $gutterX={0.5}>\n        <Separator heightX={0.5} />\n        <Text $renderAs=\"ab3\" $color=\"WHITE\">\n          Type to search • ↑↓ to navigate • Enter to select • Esc to clear\n        </Text>\n      </Styled.Instructions>\n    </Styled.MenuWrapper>\n  );\n};\n\nexport default CountryListMenu;\n"],"names":["CountryListMenu","selectedCountry","onChange","menuVisible","searchTerm","setSearchTerm","useState","highlightedIndex","setHighlightedIndex","searchTimeoutRef","useRef","menuRef","itemRefs","useEffect","_a","index","COUNTRY_CODE_MAP","c","handleKeyDown","useCallback","event","key","prev","selectedOption","menuElement","jsxs","Styled.MenuWrapper","option","id","value","icon","code","Styled.MenuItem","el","jsx","Styled.FlagIcon","Text","Styled.Instructions","Separator"],"mappings":"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"}

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

@@ -0,0 +1,57 @@
+import r from "styled-components";
+import t from "../../../../ui/layout/flex-view.js";
+const l = r(t)`
+  border-radius: 2px;
+  max-height: 220px;
+  overflow-y: scroll;
+  width: 271px;
+  max-height: 300px;
+  overflow-y: auto;
+
+  &:focus {
+    outline: none;
+  }
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: ${({ theme: o }) => o.colors.BLACK_4};
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${({ theme: o }) => o.colors.BLACK_2};
+    border-radius: 3px;
+  }
+`, p = r(t)(({
+  theme: o,
+  $isSelected: n,
+  $isHighlighted: c
+}) => {
+  const s = c ? o.colors.BLACK_4 : "transparent";
+  return `
+      cursor: pointer;
+      background: ${n ? o.colors.BLACK_5 : s};
+      &:hover {
+          background: ${o.colors.BLACK_5};
+      }
+   `;
+}), a = r.img`
+  width: 20px;
+  height: 20px;
+`, d = r(t)`
+  cursor: pointer;
+  padding-right: 4px;
+  max-width: 100px;
+  min-width: 82px;
+`, u = r(t)`
+  border-top: 1px solid ${({ theme: o }) => o.colors.BLACK_5};
+`;
+export {
+  d as CountryCodeButton,
+  a as FlagIcon,
+  u as Instructions,
+  p as MenuItem,
+  l as MenuWrapper
+};
+//# sourceMappingURL=country-selector-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"country-selector-styled.js","sources":["../../../../../../src/features/auth/signup/custom-input-field/country-selector/country-selector-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../../ui/layout/flex-view';\n\nexport const MenuWrapper = styled(FlexView)`\n  border-radius: 2px;\n  max-height: 220px;\n  overflow-y: scroll;\n  width: 271px;\n  max-height: 300px;\n  overflow-y: auto;\n\n  &:focus {\n    outline: none;\n  }\n  &::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: ${({ theme }) => theme.colors.BLACK_4};\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: ${({ theme }) => theme.colors.BLACK_2};\n    border-radius: 3px;\n  }\n`;\n\nexport const MenuItem = styled(FlexView)<{ $isSelected: boolean; $isHighlighted?: boolean }>(({\n  theme,\n  $isSelected,\n  $isHighlighted,\n}) => {\n  const bgColor = $isHighlighted ? theme.colors.BLACK_4 : 'transparent';\n\n  return `\n      cursor: pointer;\n      background: ${$isSelected ? theme.colors.BLACK_5 : bgColor};\n      &:hover {\n          background: ${theme.colors.BLACK_5};\n      }\n   `;\n});\n\nexport const FlagIcon = styled.img`\n  width: 20px;\n  height: 20px;\n`;\n\nexport const CountryCodeButton = styled(FlexView)`\n  cursor: pointer;\n  padding-right: 4px;\n  max-width: 100px;\n  min-width: 82px;\n`;\n\nexport const Instructions = styled(FlexView)`\n  border-top: 1px solid ${({ theme }) => theme.colors.BLACK_5};\n`;\n"],"names":["MenuWrapper","styled","FlexView","theme","MenuItem","$isSelected","$isHighlighted","bgColor","FlagIcon","CountryCodeButton","Instructions"],"mappings":";;AAIa,MAAAA,IAAcC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAgBxB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,kBAInC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,GAKxCC,IAAWH,EAAOC,CAAQ,EAAsD,CAAC;AAAA,EAC5F,OAAAC;AAAA,EACA,aAAAE;AAAA,EACA,gBAAAC;AACF,MAAM;AACJ,QAAMC,IAAUD,IAAiBH,EAAM,OAAO,UAAU;AAEjD,SAAA;AAAA;AAAA,oBAEWE,IAAcF,EAAM,OAAO,UAAUI,CAAO;AAAA;AAAA,wBAExCJ,EAAM,OAAO,OAAO;AAAA;AAAA;AAG5C,CAAC,GAEYK,IAAWP,EAAO;AAAA;AAAA;AAAA,GAKlBQ,IAAoBR,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAOnCQ,IAAeT,EAAOC,CAAQ;AAAA,0BACjB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;"}

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

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useState as s, useCallback as u } from "react";
+import f from "../../../../ui/context-menu/context-menu.js";
+import l from "../../../../ui/layout/flex-view.js";
+import c from "./country-code-button.js";
+import d from "./country-list-menu.js";
+const V = ({ value: t, onChange: n }) => {
+  const [o, r] = s(!1), i = u((m) => {
+    r(m);
+  }, []);
+  return !t || !n ? null : /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(
+    f,
+    {
+      startLeft: !0,
+      targetElement: /* @__PURE__ */ e(c, { value: t == null ? void 0 : t.code, menuVisible: o }),
+      menuElement: /* @__PURE__ */ e(d, { onChange: n, selectedCountry: t, menuVisible: o }),
+      menuOffset: 5,
+      menuZIndex: 1,
+      onMenuVisibilityChange: i
+    }
+  ) });
+};
+export {
+  V as default
+};
+//# sourceMappingURL=country-selector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"country-selector.js","sources":["../../../../../../src/features/auth/signup/custom-input-field/country-selector/country-selector.tsx"],"sourcesContent":["import type { IPhoneCountrySelectorProps } from './country-selector-types';\n\nimport { useCallback, useState, type FC } from 'react';\n\nimport ContextMenu from '../../../../ui/context-menu/context-menu';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport CountryCodeButton from './country-code-button';\nimport CountryListMenu from './country-list-menu';\n\nconst PhoneCountrySelector: FC<IPhoneCountrySelectorProps> = ({ value, onChange }) => {\n  const [menuVisible, setMenuVisible] = useState(false);\n\n  const handleMenuVisibility = useCallback((visible: boolean) => {\n    setMenuVisible(visible);\n  }, []);\n\n  if (!value || !onChange) return null;\n\n  return (\n    <FlexView>\n      <ContextMenu\n        startLeft\n        targetElement={<CountryCodeButton value={value?.code} menuVisible={menuVisible} />}\n        menuElement={\n          <CountryListMenu onChange={onChange} selectedCountry={value} menuVisible={menuVisible} />\n        }\n        menuOffset={5}\n        menuZIndex={1}\n        onMenuVisibilityChange={handleMenuVisibility}\n      />\n    </FlexView>\n  );\n};\n\nexport default PhoneCountrySelector;\n"],"names":["PhoneCountrySelector","value","onChange","menuVisible","setMenuVisible","useState","handleMenuVisibility","useCallback","visible","FlexView","jsx","ContextMenu","CountryCodeButton","CountryListMenu"],"mappings":";;;;;;AASA,MAAMA,IAAuD,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAAe;AACpF,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAE9CC,IAAuBC,EAAY,CAACC,MAAqB;AAC7D,IAAAJ,EAAeI,CAAO;AAAA,EACxB,GAAG,CAAE,CAAA;AAEL,SAAI,CAACP,KAAS,CAACC,IAAiB,yBAG7BO,GACC,EAAA,UAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAS;AAAA,MACT,eAAgB,gBAAAD,EAAAE,GAAA,EAAkB,OAAOX,KAAA,gBAAAA,EAAO,MAAM,aAAAE,GAA0B;AAAA,MAChF,aACG,gBAAAO,EAAAG,GAAA,EAAgB,UAAAX,GAAoB,iBAAiBD,GAAO,aAAAE,GAA0B;AAAA,MAEzF,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,wBAAwBG;AAAA,IAAA;AAAA,EAE5B,EAAA,CAAA;AAEJ;"}

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

@@ -0,0 +1,30 @@
+import o from "styled-components";
+const e = o.input`
+  width: 100%;
+  max-width: 330px;
+  padding: 0;
+  line-height: 40px;
+  text-transform: ${({ textTransform: t }) => t || "none"};
+  border: none;
+  outline: none;
+  background-color: transparent;
+  font-size: ${({ fontSize: t }) => t}px;
+  text-align: ${({ align: t }) => t};
+  caret-color: ${({ theme: t }) => t.colors.WHITE};
+  color: ${({ theme: t }) => t.colors.WHITE};
+  font-family: 'Athletics-Light';
+  color: ${({ color: t }) => t};
+  transition: all 0.3s ease;
+  &::placeholder {
+    font-family: 'Athletics-Light';
+    font-size: 32px;
+  }
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+`;
+export {
+  e as CustomInput
+};
+//# sourceMappingURL=custom-input-field-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"custom-input-field-styled.js","sources":["../../../../../src/features/auth/signup/custom-input-field/custom-input-field-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const CustomInput = styled.input<{\n  color: string;\n  align?: string;\n  textTransform?: string;\n  fontSize?: number;\n}>`\n  width: 100%;\n  max-width: 330px;\n  padding: 0;\n  line-height: 40px;\n  text-transform: ${({ textTransform }) => textTransform || 'none'};\n  border: none;\n  outline: none;\n  background-color: transparent;\n  font-size: ${({ fontSize }) => fontSize}px;\n  text-align: ${({ align }) => align};\n  caret-color: ${({ theme }) => theme.colors.WHITE};\n  color: ${({ theme }) => theme.colors.WHITE};\n  font-family: 'Athletics-Light';\n  color: ${({ color }) => color};\n  transition: all 0.3s ease;\n  &::placeholder {\n    font-family: 'Athletics-Light';\n    font-size: 32px;\n  }\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n`;\n"],"names":["CustomInput","styled","textTransform","fontSize","align","theme","color"],"mappings":";AAEO,MAAMA,IAAcC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,oBAUd,CAAC,EAAE,eAAAC,QAAoBA,KAAiB,MAAM;AAAA;AAAA;AAAA;AAAA,eAInD,CAAC,EAAE,UAAAC,EAAS,MAAMA,CAAQ;AAAA,gBACzB,CAAC,EAAE,OAAAC,EAAM,MAAMA,CAAK;AAAA,iBACnB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA,WACvC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA,WAEjC,CAAC,EAAE,OAAAC,EAAM,MAAMA,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}