@cuemath/leap 2.9.5-j2 → 2.9.5-j4

package/dist/features/auth/account-selector/account-selector-styled.js

@@ -1,26 +1,37 @@
 import r from "styled-components";
-import t from "../../ui/layout/flex-view.js";
-const e = r(t)`
+import i from "../../ui/layout/flex-view.js";
+const d = r(i)`
   position: relative;
-`, i = r(t)(
-  ({ theme: o }) => `
-    border-right: 1px solid ${o.colors.BLACK_5};
-    cursor: pointer;
-    &:hover {
-      background-color: ${o.colors.BLACK_2}
-    }
-`
-), s = r(t)(
+`, c = r(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: t }) => o < 5 && `border-top: 1px solid ${t.colors.BLACK_5};`}
+
+  ${({ index: o, isLastItem: t, theme: s }) => ((o + 1) % 5 === 0 || t) && `border-right: 1px solid ${s.colors.BLACK_5};`}
+`, n = r(c)(
   ({ theme: o }) => `
-    cursor: pointer;
     &:hover {
       background-color: ${o.colors.BLACK_4}
     }
 `
-);
+), p = r.div`
+  display: inline-grid;
+  grid-template-columns: repeat(${({ itemCount: o }) => o < 5 ? o : 5}, 200px);
+  grid-auto-rows: 200px;
+`;
 export {
-  i as AccountItem,
-  s as AddAccountButton,
-  e as Container
+  c as AccountCard,
+  p as AccountListWrapper,
+  n as AddAccountButton,
+  d as Container
 };
 //# sourceMappingURL=account-selector-styled.js.map

package/dist/features/auth/account-selector/account-selector-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"account-selector-styled.js","sources":["../../../../src/features/auth/account-selector/account-selector-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\n\nexport const Container = styled(FlexView)`\n  position: relative;\n`;\n\nexport const AccountItem = styled(FlexView)(\n  ({ theme }) => `\n    border-right: 1px solid ${theme.colors.BLACK_5};\n    cursor: pointer;\n    &:hover {\n      background-color: ${theme.colors.BLACK_2}\n    }\n`,\n);\n\nexport const AddAccountButton = styled(FlexView)(\n  ({ theme }) => `\n    cursor: pointer;\n    &:hover {\n      background-color: ${theme.colors.BLACK_4}\n    }\n`,\n);\n"],"names":["Container","styled","FlexView","AccountItem","theme","AddAccountButton"],"mappings":";;AAIa,MAAAA,IAAYC,EAAOC,CAAQ;AAAA;AAAA,GAI3BC,IAAcF,EAAOC,CAAQ;AAAA,EACxC,CAAC,EAAE,OAAAE,EAAA,MAAY;AAAA,8BACaA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,0BAGxBA,EAAM,OAAO,OAAO;AAAA;AAAA;AAG9C,GAEaC,IAAmBJ,EAAOC,CAAQ;AAAA,EAC7C,CAAC,EAAE,OAAAE,EAAA,MAAY;AAAA;AAAA;AAAA,0BAGSA,EAAM,OAAO,OAAO;AAAA;AAAA;AAG9C;"}
+{"version":3,"file":"account-selector-styled.js","sources":["../../../../src/features/auth/account-selector/account-selector-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\n\nexport const Container = styled(FlexView)`\n  position: relative;\n`;\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`;\nexport const AddAccountButton = styled(AccountCard)(\n  ({ theme }) => `\n    &:hover {\n      background-color: ${theme.colors.BLACK_4}\n    }\n`,\n);\n\nexport const AccountListWrapper = 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":["Container","styled","FlexView","AccountCard","theme","index","isLastItem","AddAccountButton","AccountListWrapper","itemCount"],"mappings":";;AAIa,MAAAA,IAAYC,EAAOC,CAAQ;AAAA;AAAA,GAI3BC,IAAcF,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKf,CAAC,EAAE,OAAAE,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,GAElFG,IAAmBN,EAAOE,CAAW;AAAA,EAChD,CAAC,EAAE,OAAAC,EAAA,MAAY;AAAA;AAAA,0BAESA,EAAM,OAAO,OAAO;AAAA;AAAA;AAG9C,GAEaI,IAAqBP,EAAO;AAAA;AAAA,kCAEP,CAAC,EAAE,WAAAQ,QAAiBA,IAAY,IAAIA,IAAY,CAAE;AAAA;AAAA;"}

package/dist/features/auth/account-selector/account-selector.js

@@ -1,75 +1,90 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { ILLUSTRATIONS as c } from "../../../assets/illustrations/illustrations.js";
-import g from "../../../assets/line-icons/icons/plus.js";
-import p from "../../ui/avatar/avatar.js";
-import h from "../../ui/image/image.js";
-import t from "../../ui/layout/flex-view.js";
-import o from "../../ui/separator/separator.js";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { ILLUSTRATIONS as h } from "../../../assets/illustrations/illustrations.js";
+import u from "../../../assets/line-icons/icons/plus.js";
+import f from "../../ui/avatar/avatar.js";
+import l from "../../ui/image/image.js";
+import o from "../../ui/layout/flex-view.js";
+import r from "../../ui/separator/separator.js";
 import i from "../../ui/text/text.js";
-import f from "../comps/overlay-loader/overlay-loader.js";
-import { Container as s, AccountItem as u, AddAccountButton as A } from "./account-selector-styled.js";
-const C = ({
-  userAccounts: l,
-  onSelect: $,
-  onAddNew: a,
-  isLoading: d
-}) => /* @__PURE__ */ r(
-  s,
-  {
-    $flex: 1,
-    $alignItems: "center",
-    $justifyContent: "center",
-    $width: "100%",
-    $height: "100%",
-    children: [
-      /* @__PURE__ */ e(f, { isLoading: d }),
-      /* @__PURE__ */ e(h, { src: c.CIRCLE_CUEMATH_LOGO_WHITE, alt: "Parent Signup", withLoader: !1 }),
-      /* @__PURE__ */ e(o, { heightX: 1 }),
-      /* @__PURE__ */ e(i, { $renderAs: "ab1", $color: "WHITE_T_60", children: "Switch between accounts" }),
-      /* @__PURE__ */ e(o, { heightX: 5 }),
-      /* @__PURE__ */ r(t, { $borderColor: "BLACK_5", $flexWrap: !0, $justifyContent: "center", $flexDirection: "row", children: [
-        l.map(({ id: n, username: m }) => /* @__PURE__ */ r(
-          u,
+import C from "../comps/overlay-loader/overlay-loader.js";
+import { Container as A, AccountListWrapper as w, AccountCard as I, AddAccountButton as L } from "./account-selector-styled.js";
+const _ = ({
+  userAccounts: n,
+  onSelect: d,
+  onAddNew: $,
+  isLoading: m
+}) => {
+  const c = n.length + 1;
+  return /* @__PURE__ */ t(
+    A,
+    {
+      $flex: 1,
+      $alignItems: "center",
+      $justifyContent: "center",
+      $width: "100%",
+      $height: "100%",
+      children: [
+        /* @__PURE__ */ e(C, { isLoading: m }),
+        /* @__PURE__ */ e(l, { src: h.CIRCLE_CUEMATH_LOGO_WHITE, alt: "Parent Signup", withLoader: !1 }),
+        /* @__PURE__ */ e(r, { heightX: 1 }),
+        /* @__PURE__ */ e(i, { $renderAs: "ab1", $color: "WHITE_T_60", children: "Switch between accounts" }),
+        /* @__PURE__ */ e(r, { heightX: 5 }),
+        /* @__PURE__ */ t(w, { itemCount: c, children: [
+          n.map(({ id: a, username: g, user_avatar: s }, p) => /* @__PURE__ */ t(
+            I,
+            {
+              onClick: () => d(a),
+              $background: "BLACK_1",
+              $gutter: 55,
+              $gap: 45,
+              $alignItems: "center",
+              $width: 200,
+              $height: 200,
+              $justifyContent: "center",
+              index: p,
+              children: [
+                /* @__PURE__ */ e(f, { avatar: s, size: 80 }),
+                /* @__PURE__ */ e(r, { heightX: 0.5 }),
+                /* @__PURE__ */ e(i, { $color: "WHITE", $renderAs: "ab2", $align: "center", children: g })
+              ]
+            },
+            a
+          )),
+          /* @__PURE__ */ e(
+            L,
+            {
+              isLastItem: !0,
+              index: c,
+              $gutterX: 5,
+              $gapX: 5,
+              $background: "BLACK_3",
+              onClick: $,
+              children: /* @__PURE__ */ e(o, { $width: 40, $height: 40, children: /* @__PURE__ */ e(u, { color: "WHITE", width: 40, height: 40 }) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(r, { heightX: 5 }),
+        /* @__PURE__ */ t(
+          o,
           {
-            onClick: () => $(n),
-            $background: "BLACK_1",
-            $gutter: 55,
-            $gap: 45,
-            $alignItems: "center",
-            $width: 200,
-            $height: 200,
-            $justifyContent: "center",
+            $gutterX: 0.5,
+            $gapX: 1,
+            $flexGapX: 0.5,
+            $width: 280,
+            $borderColor: "BLACK_5",
+            $background: "BLACK_3",
+            $flexDirection: "row",
             children: [
-              /* @__PURE__ */ e(p, { size: 80 }),
-              /* @__PURE__ */ e(o, { heightX: 0.5 }),
-              /* @__PURE__ */ e(i, { $color: "WHITE", $renderAs: "ab2", $align: "center", children: m })
+              /* @__PURE__ */ e(l, { src: h.CUEMATH_APP_QR_CODE, width: 80, height: 80, withLoader: !1 }),
+              /* @__PURE__ */ e(o, { $gapX: 0.5, $flex: 1, children: /* @__PURE__ */ e(i, { $color: "WHITE", $renderAs: "ab2", children: "Download the cuemath app to view your children’s report" }) })
             ]
-          },
-          n
-        )),
-        /* @__PURE__ */ e(A, { $gutterX: 5, $gapX: 5, $background: "BLACK_5", onClick: a, children: /* @__PURE__ */ e(t, { $width: 40, $height: 40, children: /* @__PURE__ */ e(g, { color: "WHITE", width: 40, height: 40 }) }) })
-      ] }),
-      /* @__PURE__ */ e(o, { heightX: 5 }),
-      /* @__PURE__ */ r(
-        t,
-        {
-          $gutterX: 0.5,
-          $gapX: 1,
-          $flexGapX: 0.5,
-          $width: 280,
-          $borderColor: "BLACK_5",
-          $background: "BLACK_3",
-          $flexDirection: "row",
-          children: [
-            /* @__PURE__ */ e(h, { src: c.CUEMATH_APP_QR_CODE, width: 80, height: 80, withLoader: !1 }),
-            /* @__PURE__ */ e(t, { $gapX: 0.5, $flex: 1, children: /* @__PURE__ */ e(i, { $color: "WHITE", $renderAs: "ab2", children: "Download the cuemath app to view your children’s report" }) })
-          ]
-        }
-      )
-    ]
-  }
-), S = C;
+          }
+        )
+      ]
+    }
+  );
+}, O = _;
 export {
-  S as default
+  O as default
 };
 //# sourceMappingURL=account-selector.js.map

package/dist/features/auth/account-selector/account-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"account-selector.js","sources":["../../../../src/features/auth/account-selector/account-selector.tsx"],"sourcesContent":["import type { IAccountSelectorViewProps } from './account-selector-types';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\nimport PlusIcon from '../../../assets/line-icons/icons/plus';\nimport Avatar from '../../ui/avatar/avatar';\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 './account-selector-styled';\n\nconst AccountSelector = ({\n  userAccounts,\n  onSelect,\n  onAddNew,\n  isLoading,\n}: IAccountSelectorViewProps) => {\n  return (\n    <Styled.Container\n      $flex={1}\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      $width=\"100%\"\n      $height=\"100%\"\n    >\n      <OverlayLoader isLoading={isLoading} />\n      <Image src={ILLUSTRATIONS.CIRCLE_CUEMATH_LOGO_WHITE} alt=\"Parent Signup\" withLoader={false} />\n      <Separator heightX={1} />\n      <Text $renderAs=\"ab1\" $color=\"WHITE_T_60\">\n        Switch between accounts\n      </Text>\n      <Separator heightX={5} />\n      <FlexView $borderColor=\"BLACK_5\" $flexWrap $justifyContent=\"center\" $flexDirection=\"row\">\n        {userAccounts.map(({ id, username }) => (\n          <Styled.AccountItem\n            key={id}\n            onClick={() => onSelect(id)}\n            $background=\"BLACK_1\"\n            $gutter={55}\n            $gap={45}\n            $alignItems=\"center\"\n            $width={200}\n            $height={200}\n            $justifyContent=\"center\"\n          >\n            <Avatar size={80} />\n            <Separator heightX={0.5} />\n            <Text $color=\"WHITE\" $renderAs=\"ab2\" $align=\"center\">\n              {username}\n            </Text>\n          </Styled.AccountItem>\n        ))}\n        <Styled.AddAccountButton $gutterX={5} $gapX={5} $background=\"BLACK_5\" onClick={onAddNew}>\n          <FlexView $width={40} $height={40}>\n            <PlusIcon color=\"WHITE\" width={40} height={40} />\n          </FlexView>\n        </Styled.AddAccountButton>\n      </FlexView>\n      <Separator heightX={5} />\n      <FlexView\n        $gutterX={0.5}\n        $gapX={1}\n        $flexGapX={0.5}\n        $width={280}\n        $borderColor=\"BLACK_5\"\n        $background=\"BLACK_3\"\n        $flexDirection=\"row\"\n      >\n        <Image src={ILLUSTRATIONS.CUEMATH_APP_QR_CODE} width={80} height={80} withLoader={false} />\n        <FlexView $gapX={0.5} $flex={1}>\n          <Text $color=\"WHITE\" $renderAs=\"ab2\">\n            Download the cuemath app to view your children’s report\n          </Text>\n        </FlexView>\n      </FlexView>\n    </Styled.Container>\n  );\n};\n\nexport default AccountSelector;\n"],"names":["AccountSelector","userAccounts","onSelect","onAddNew","isLoading","jsxs","Styled.Container","jsx","OverlayLoader","Image","ILLUSTRATIONS","Separator","Text","FlexView","id","username","Styled.AccountItem","Avatar","Styled.AddAccountButton","PlusIcon","AccountSelector$1"],"mappings":";;;;;;;;;;AAYA,MAAMA,IAAkB,CAAC;AAAA,EACvB,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,MAEI,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,OAAO;AAAA,IACP,aAAY;AAAA,IACZ,iBAAgB;AAAA,IAChB,QAAO;AAAA,IACP,SAAQ;AAAA,IAER,UAAA;AAAA,MAAA,gBAAAC,EAACC,KAAc,WAAAJ,GAAsB;AAAA,MACrC,gBAAAG,EAACE,KAAM,KAAKC,EAAc,2BAA2B,KAAI,iBAAgB,YAAY,IAAO;AAAA,MAC5F,gBAAAH,EAACI,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,wBACtBC,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,UAE1C,2BAAA;AAAA,MACA,gBAAAL,EAACI,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,MACvB,gBAAAN,EAACQ,KAAS,cAAa,WAAU,WAAS,IAAC,iBAAgB,UAAS,gBAAe,OAChF,UAAA;AAAA,QAAAZ,EAAa,IAAI,CAAC,EAAE,IAAAa,GAAI,UAAAC,EACvB,MAAA,gBAAAV;AAAA,UAACW;AAAAA,UAAA;AAAA,YAEC,SAAS,MAAMd,EAASY,CAAE;AAAA,YAC1B,aAAY;AAAA,YACZ,SAAS;AAAA,YACT,MAAM;AAAA,YACN,aAAY;AAAA,YACZ,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,iBAAgB;AAAA,YAEhB,UAAA;AAAA,cAAC,gBAAAP,EAAAU,GAAA,EAAO,MAAM,GAAI,CAAA;AAAA,cAClB,gBAAAV,EAACI,GAAU,EAAA,SAAS,IAAK,CAAA;AAAA,cACzB,gBAAAJ,EAACK,KAAK,QAAO,SAAQ,WAAU,OAAM,QAAO,UACzC,UACHG,EAAA,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAdKD;AAAA,QAAA,CAgBR;AAAA,QACD,gBAAAP,EAACW,GAAA,EAAwB,UAAU,GAAG,OAAO,GAAG,aAAY,WAAU,SAASf,GAC7E,UAAA,gBAAAI,EAACM,GAAS,EAAA,QAAQ,IAAI,SAAS,IAC7B,UAAA,gBAAAN,EAACY,GAAS,EAAA,OAAM,SAAQ,OAAO,IAAI,QAAQ,GAAI,CAAA,EAAA,CACjD,EACF,CAAA;AAAA,MAAA,GACF;AAAA,MACA,gBAAAZ,EAACI,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,MACvB,gBAAAN;AAAA,QAACQ;AAAA,QAAA;AAAA,UACC,UAAU;AAAA,UACV,OAAO;AAAA,UACP,WAAW;AAAA,UACX,QAAQ;AAAA,UACR,cAAa;AAAA,UACb,aAAY;AAAA,UACZ,gBAAe;AAAA,UAEf,UAAA;AAAA,YAAC,gBAAAN,EAAAE,GAAA,EAAM,KAAKC,EAAc,qBAAqB,OAAO,IAAI,QAAQ,IAAI,YAAY,GAAO,CAAA;AAAA,YACxF,gBAAAH,EAAAM,GAAA,EAAS,OAAO,KAAK,OAAO,GAC3B,UAAC,gBAAAN,EAAAK,GAAA,EAAK,QAAO,SAAQ,WAAU,OAAM,oEAErC,CAAA,GACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAAA,GAKNQ,IAAepB;"}
+{"version":3,"file":"account-selector.js","sources":["../../../../src/features/auth/account-selector/account-selector.tsx"],"sourcesContent":["import type { IAccountSelectorViewProps } from './account-selector-types';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\nimport PlusIcon from '../../../assets/line-icons/icons/plus';\nimport Avatar from '../../ui/avatar/avatar';\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 './account-selector-styled';\n\nconst AccountSelector = ({\n  userAccounts,\n  onSelect,\n  onAddNew,\n  isLoading,\n}: IAccountSelectorViewProps) => {\n  const totalCards = userAccounts.length + 1;\n\n  return (\n    <Styled.Container\n      $flex={1}\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      $width=\"100%\"\n      $height=\"100%\"\n    >\n      <OverlayLoader isLoading={isLoading} />\n      <Image src={ILLUSTRATIONS.CIRCLE_CUEMATH_LOGO_WHITE} alt=\"Parent Signup\" withLoader={false} />\n      <Separator heightX={1} />\n      <Text $renderAs=\"ab1\" $color=\"WHITE_T_60\">\n        Switch between accounts\n      </Text>\n      <Separator heightX={5} />\n      <Styled.AccountListWrapper itemCount={totalCards}>\n        {userAccounts.map(({ id, username, user_avatar: avatar }, i) => (\n          <Styled.AccountCard\n            key={id}\n            onClick={() => onSelect(id)}\n            $background=\"BLACK_1\"\n            $gutter={55}\n            $gap={45}\n            $alignItems=\"center\"\n            $width={200}\n            $height={200}\n            $justifyContent=\"center\"\n            index={i}\n          >\n            <Avatar avatar={avatar} size={80} />\n            <Separator heightX={0.5} />\n            <Text $color=\"WHITE\" $renderAs=\"ab2\" $align=\"center\">\n              {username}\n            </Text>\n          </Styled.AccountCard>\n        ))}\n        <Styled.AddAccountButton\n          isLastItem\n          index={totalCards}\n          $gutterX={5}\n          $gapX={5}\n          $background=\"BLACK_3\"\n          onClick={onAddNew}\n        >\n          <FlexView $width={40} $height={40}>\n            <PlusIcon color=\"WHITE\" width={40} height={40} />\n          </FlexView>\n        </Styled.AddAccountButton>\n      </Styled.AccountListWrapper>\n      <Separator heightX={5} />\n      <FlexView\n        $gutterX={0.5}\n        $gapX={1}\n        $flexGapX={0.5}\n        $width={280}\n        $borderColor=\"BLACK_5\"\n        $background=\"BLACK_3\"\n        $flexDirection=\"row\"\n      >\n        <Image src={ILLUSTRATIONS.CUEMATH_APP_QR_CODE} width={80} height={80} withLoader={false} />\n        <FlexView $gapX={0.5} $flex={1}>\n          <Text $color=\"WHITE\" $renderAs=\"ab2\">\n            Download the cuemath app to view your children’s report\n          </Text>\n        </FlexView>\n      </FlexView>\n    </Styled.Container>\n  );\n};\n\nexport default AccountSelector;\n"],"names":["AccountSelector","userAccounts","onSelect","onAddNew","isLoading","totalCards","jsxs","Styled.Container","jsx","OverlayLoader","Image","ILLUSTRATIONS","Separator","Text","Styled.AccountListWrapper","id","username","avatar","i","Styled.AccountCard","Avatar","Styled.AddAccountButton","FlexView","PlusIcon","AccountSelector$1"],"mappings":";;;;;;;;;;AAYA,MAAMA,IAAkB,CAAC;AAAA,EACvB,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,MAAiC;AACzB,QAAAC,IAAaJ,EAAa,SAAS;AAGvC,SAAA,gBAAAK;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,QAAO;AAAA,MACP,SAAQ;AAAA,MAER,UAAA;AAAA,QAAA,gBAAAC,EAACC,KAAc,WAAAL,GAAsB;AAAA,QACrC,gBAAAI,EAACE,KAAM,KAAKC,EAAc,2BAA2B,KAAI,iBAAgB,YAAY,IAAO;AAAA,QAC5F,gBAAAH,EAACI,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,0BACtBC,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,UAE1C,2BAAA;AAAA,QACA,gBAAAL,EAACI,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,QACtB,gBAAAN,EAAAQ,GAAA,EAA0B,WAAWT,GACnC,UAAA;AAAA,UAAaJ,EAAA,IAAI,CAAC,EAAE,IAAAc,GAAI,UAAAC,GAAU,aAAaC,KAAUC,MACxD,gBAAAZ;AAAA,YAACa;AAAAA,YAAA;AAAA,cAEC,SAAS,MAAMjB,EAASa,CAAE;AAAA,cAC1B,aAAY;AAAA,cACZ,SAAS;AAAA,cACT,MAAM;AAAA,cACN,aAAY;AAAA,cACZ,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,iBAAgB;AAAA,cAChB,OAAOG;AAAA,cAEP,UAAA;AAAA,gBAAC,gBAAAV,EAAAY,GAAA,EAAO,QAAAH,GAAgB,MAAM,GAAI,CAAA;AAAA,gBAClC,gBAAAT,EAACI,GAAU,EAAA,SAAS,IAAK,CAAA;AAAA,gBACzB,gBAAAJ,EAACK,KAAK,QAAO,SAAQ,WAAU,OAAM,QAAO,UACzC,UACHG,EAAA,CAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAfKD;AAAA,UAAA,CAiBR;AAAA,UACD,gBAAAP;AAAA,YAACa;AAAAA,YAAA;AAAA,cACC,YAAU;AAAA,cACV,OAAOhB;AAAA,cACP,UAAU;AAAA,cACV,OAAO;AAAA,cACP,aAAY;AAAA,cACZ,SAASF;AAAA,cAET,UAAC,gBAAAK,EAAAc,GAAA,EAAS,QAAQ,IAAI,SAAS,IAC7B,UAAA,gBAAAd,EAACe,GAAS,EAAA,OAAM,SAAQ,OAAO,IAAI,QAAQ,GAAI,CAAA,GACjD;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,GACF;AAAA,QACA,gBAAAf,EAACI,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,QACvB,gBAAAN;AAAA,UAACgB;AAAA,UAAA;AAAA,YACC,UAAU;AAAA,YACV,OAAO;AAAA,YACP,WAAW;AAAA,YACX,QAAQ;AAAA,YACR,cAAa;AAAA,YACb,aAAY;AAAA,YACZ,gBAAe;AAAA,YAEf,UAAA;AAAA,cAAC,gBAAAd,EAAAE,GAAA,EAAM,KAAKC,EAAc,qBAAqB,OAAO,IAAI,QAAQ,IAAI,YAAY,GAAO,CAAA;AAAA,cACxF,gBAAAH,EAAAc,GAAA,EAAS,OAAO,KAAK,OAAO,GAC3B,UAAC,gBAAAd,EAAAK,GAAA,EAAK,QAAO,SAAQ,WAAU,OAAM,oEAErC,CAAA,GACF;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEAW,IAAexB;"}

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

@@ -1,39 +1,40 @@
-import t from "styled-components";
+import o from "styled-components";
 import i from "../../../ui/layout/flex-view.js";
-const n = t(i)`
+const n = o(i)`
   position: relative;
-`, s = t(i)`
+`, s = o(i)`
   position: absolute;
   border-radius: 100%;
   top: 216px;
-  border: ${({ theme: o }) => `2px solid ${o.colors.BLACK_5}`};
-  opacity: ${({ $isVisible: o }) => o ? 1 : 0};
+  border: ${({ theme: t }) => `2px solid ${t.colors.BLACK_5}`};
+`, p = o(i)`
+  opacity: ${({ $isVisible: t }) => t ? 1 : 0};
   transition: opacity 0.5s ease-in-out;
-`, p = t.div`
+`, a = o.div`
   position: relative;
 `;
-t(i)`
+o(i)`
   position: relative;
   overflow: hidden;
-  background: ${({ theme: o }) => o.colors.BLACK_2};
+  background: ${({ theme: t }) => t.colors.BLACK_2};
   border-radius: 100%;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${({ theme: o }) => o.colors.WHITE};
+  color: ${({ theme: t }) => t.colors.WHITE};
 `;
-t.div`
+o.div`
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 2;
 `;
-const a = t(i)`
+const l = o(i)`
   position: absolute;
   top: 55%;
   right: 24px;
-`, l = t(i)`
+`, c = o(i)`
   position: absolute;
   top: 55%;
   left: 24px;
@@ -41,8 +42,9 @@ const a = t(i)`
 export {
   s as CircularStepContainer,
   n as Container,
-  p as InputContainer,
-  a as NextButtonWrapper,
-  l as PrevButtonWrapper
+  p as ContentWrapper,
+  a as InputContainer,
+  l as NextButtonWrapper,
+  c as PrevButtonWrapper
 };
 //# sourceMappingURL=circular-step-wrapper-styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"circular-step-wrapper-styled.js","sources":["../../../../../src/features/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nconst Container = styled(FlexView)`\n  position: relative;\n`;\n\nconst CircularStepContainer = styled(FlexView)<{ $isVisible: boolean }>`\n  position: absolute;\n  border-radius: 100%;\n  top: 216px;\n  border: ${({ theme }) => `2px solid ${theme.colors.BLACK_5}`};\n  opacity: ${({ $isVisible }) => ($isVisible ? 1 : 0)};\n  transition: opacity 0.5s ease-in-out;\n`;\n\nconst InputContainer = styled.div`\n  position: relative;\n`;\n\nconst CircularProgressContainer = styled(FlexView)<{\n  isVerticallyCentered?: boolean;\n}>`\n  position: relative;\n  overflow: hidden;\n  background: ${({ theme }) => theme.colors.BLACK_2};\n  border-radius: 100%;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ${({ theme }) => theme.colors.WHITE};\n`;\n\nexport const CircularProgress = styled.div`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n`;\n\nconst NextButtonWrapper = styled(FlexView)`\n  position: absolute;\n  top: 55%;\n  right: 24px;\n`;\nconst PrevButtonWrapper = styled(FlexView)`\n  position: absolute;\n  top: 55%;\n  left: 24px;\n`;\n\nexport {\n  NextButtonWrapper,\n  PrevButtonWrapper,\n  InputContainer,\n  Container,\n  CircularStepContainer,\n  CircularProgressContainer,\n};\n"],"names":["Container","styled","FlexView","CircularStepContainer","theme","$isVisible","InputContainer","NextButtonWrapper","PrevButtonWrapper"],"mappings":";;AAIM,MAAAA,IAAYC,EAAOC,CAAQ;AAAA;AAAA,GAI3BC,IAAwBF,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,YAIjC,CAAC,EAAE,OAAAE,EAAM,MAAM,aAAaA,EAAM,OAAO,OAAO,EAAE;AAAA,aACjD,CAAC,EAAE,YAAAC,EAAA,MAAkBA,IAAa,IAAI,CAAE;AAAA;AAAA,GAI/CC,IAAiBL,EAAO;AAAA;AAAA;AAIIA,EAAOC,CAAQ;AAAA;AAAA;AAAA,gBAKjC,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMxC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAGZH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjC,MAAAM,IAAoBN,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAKnCM,IAAoBP,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"circular-step-wrapper-styled.js","sources":["../../../../../src/features/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nconst Container = styled(FlexView)`\n  position: relative;\n`;\n\nconst CircularStepContainer = styled(FlexView)`\n  position: absolute;\n  border-radius: 100%;\n  top: 216px;\n  border: ${({ theme }) => `2px solid ${theme.colors.BLACK_5}`};\n`;\n\nconst ContentWrapper = styled(FlexView)<{ $isVisible: boolean }>`\n  opacity: ${({ $isVisible }) => ($isVisible ? 1 : 0)};\n  transition: opacity 0.5s ease-in-out;\n`;\n\nconst InputContainer = styled.div`\n  position: relative;\n`;\n\nconst CircularProgressContainer = styled(FlexView)<{\n  isVerticallyCentered?: boolean;\n}>`\n  position: relative;\n  overflow: hidden;\n  background: ${({ theme }) => theme.colors.BLACK_2};\n  border-radius: 100%;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ${({ theme }) => theme.colors.WHITE};\n`;\n\nexport const CircularProgress = styled.div`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n`;\n\nconst NextButtonWrapper = styled(FlexView)`\n  position: absolute;\n  top: 55%;\n  right: 24px;\n`;\nconst PrevButtonWrapper = styled(FlexView)`\n  position: absolute;\n  top: 55%;\n  left: 24px;\n`;\n\nexport {\n  NextButtonWrapper,\n  PrevButtonWrapper,\n  InputContainer,\n  Container,\n  CircularStepContainer,\n  CircularProgressContainer,\n  ContentWrapper,\n};\n"],"names":["Container","styled","FlexView","CircularStepContainer","theme","ContentWrapper","$isVisible","InputContainer","NextButtonWrapper","PrevButtonWrapper"],"mappings":";;AAIM,MAAAA,IAAYC,EAAOC,CAAQ;AAAA;AAAA,GAI3BC,IAAwBF,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,YAIjC,CAAC,EAAE,OAAAE,EAAM,MAAM,aAAaA,EAAM,OAAO,OAAO,EAAE;AAAA,GAGxDC,IAAiBJ,EAAOC,CAAQ;AAAA,aACzB,CAAC,EAAE,YAAAI,EAAA,MAAkBA,IAAa,IAAI,CAAE;AAAA;AAAA,GAI/CC,IAAiBN,EAAO;AAAA;AAAA;AAIIA,EAAOC,CAAQ;AAAA;AAAA;AAAA,gBAKjC,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMxC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAGZH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjC,MAAAO,IAAoBP,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAKnCO,IAAoBR,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;"}

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

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

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  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 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: 'svg',\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    },\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\n    const onLottieRender = useCallback(() => {\n      if (animation && animationRef.current && introFrames) {\n        animationRef.current.playSegments(introFrames, true);\n        setTimeout(() => setShowContent(true), 500);\n      }\n    }, [animation, introFrames]);\n\n    useImperativeHandle(ref, () => ({\n      playOutroAndFadeOut: async () => {\n        return new Promise<void>(resolve => {\n          const handleComplete = () => {\n            setShowContent(false);\n            resolve();\n            animationRef.current?.removeEventListener('complete', handleComplete);\n          };\n\n          animationRef.current?.playSegments(outroFrames, true);\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          $isVisible={showContent}\n        >\n          {label ? (\n            <FlexView>\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.CircularStepContainer>\n        {showPrevious && (\n          <Styled.PrevButtonWrapper>\n            <IconButton\n              Icon={Back2Icon}\n              renderAs=\"secondary\"\n              analyticsLabel=\"Next\"\n              onClick={onGoBack}\n              disabled={isNextLoading}\n              size=\"regular\"\n            />\n          </Styled.PrevButtonWrapper>\n        )}\n        {showNext && (\n          <Styled.NextButtonWrapper>\n            <IconButton\n              size=\"regular\"\n              Icon={Next2Icon}\n              renderAs=\"secondary\"\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","ref","animationRef","useRef","containerRef","containerHeight","setContainerHeight","useState","showContent","setShowContent","onLottieRender","useCallback","useImperativeHandle","resolve","handleComplete","_a","_b","useLayoutEffect","jsxs","Styled.Container","jsx","LottieAnimation","Styled.CircularStepContainer","FlexView","Text","Separator","Styled.InputContainer","Styled.PrevButtonWrapper","IconButton","Back2Icon","Styled.NextButtonWrapper","Next2Icon","CircularStepWrapper$1"],"mappings":";;;;;;;;;;AAsBA,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,KAEFC,MACG;AACG,UAAAC,IAAeC,EAAmC,IAAI,GACtDC,IAAeD,EAAuB,IAAI,GAC1C,CAACE,GAAiBC,CAAkB,IAAIC,EAA6B,GACrE,CAACC,GAAaC,CAAc,IAAIF,EAAS,EAAK,GAE9CG,IAAiBC,EAAY,MAAM;AACnC,MAAAd,KAAaK,EAAa,WAAWJ,MAC1BI,EAAA,QAAQ,aAAaJ,GAAa,EAAI,GACnD,WAAW,MAAMW,EAAe,EAAI,GAAG,GAAG;AAAA,IAC5C,GACC,CAACZ,GAAWC,CAAW,CAAC;AAE3B,WAAAc,EAAoBX,GAAK,OAAO;AAAA,MAC9B,qBAAqB,YACZ,IAAI,QAAc,CAAWY,MAAA;;AAClC,cAAMC,IAAiB,MAAM;;AAC3B,UAAAL,EAAe,EAAK,GACZI,MACKE,IAAAb,EAAA,YAAA,QAAAa,EAAS,oBAAoB,YAAYD;AAAA,QAAc;AAGzD,SAAAC,IAAAb,EAAA,YAAA,QAAAa,EAAS,aAAahB,GAAa,MACnCiB,IAAAd,EAAA,YAAA,QAAAc,EAAS,iBAAiB,YAAYF;AAAA,MAAc,CAClE;AAAA,IAEH,EAAA,GAEFG,EAAgB,MAAM;AACpB,MAAIb,EAAa,WACIE,EAAAF,EAAa,QAAQ,YAAY;AAAA,IAExD,GAAG,CAAE,CAAA,GAGH,gBAAAc;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAChB,QAAO;AAAA,QACP,SAAQ;AAAA,QACR,KAAKf;AAAA,QAEJ,UAAA;AAAA,UACCC,KAAA,gBAAAe;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAQhB;AAAA,cACR,KAAKR;AAAA,cACL,KAAKK;AAAA,cACL,UAAUQ;AAAA,cACV,UAAUtB;AAAA,YAAA;AAAA,UACZ;AAAA,UAEF,gBAAA8B;AAAA,YAACI;AAAAA,YAAA;AAAA,cACC,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,aAAY;AAAA,cACZ,aAAY;AAAA,cACZ,iBAAgB;AAAA,cAChB,YAAYd;AAAA,cAEX,UAAA;AAAA,gBAAAd,sBACE6B,GACC,EAAA,UAAA;AAAA,kBAAA,gBAAAH,EAACI,KAAK,WAAU,OAAM,QAAO,SAAQ,QAAO,UACzC,UACH9B,EAAA,CAAA;AAAA,kBACA,gBAAA0B,EAACK,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,gBAAA,EAAA,CACzB,IACE;AAAA,gBACH,gBAAAL,EAAAM,GAAA,EAAuB,UAAAnC,GAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UACnC;AAAA,UACCK,KACC,gBAAAwB,EAACO,GAAA,EACC,UAAA,gBAAAP;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,MAAMC;AAAA,cACN,UAAS;AAAA,cACT,gBAAe;AAAA,cACf,SAASrC;AAAA,cACT,UAAUQ;AAAA,cACV,MAAK;AAAA,YAAA;AAAA,UAAA,GAET;AAAA,UAEDL,KACC,gBAAAyB,EAACU,GAAA,EACC,UAAA,gBAAAV;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAMG;AAAA,cACN,UAAS;AAAA,cACT,gBAAe;AAAA,cACf,SAAStC;AAAA,cACT,MAAMO;AAAA,YAAA;AAAA,UAAA,GAEV;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF,GAEAgC,KAAe3C;"}
+{"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  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 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: 'svg',\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    },\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\n    const onLottieRender = useCallback(() => {\n      if (animation && animationRef.current) {\n        animationRef.current.playSegments(introFrames, true);\n        setTimeout(() => setShowContent(true), 500);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\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          setShowContent(false);\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          <Styled.ContentWrapper $isVisible={showContent}>\n            {label ? (\n              <FlexView>\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\"\n              analyticsLabel=\"Next\"\n              onClick={onGoBack}\n              disabled={isNextLoading}\n              size=\"regular\"\n            />\n          </Styled.PrevButtonWrapper>\n        )}\n        {showNext && (\n          <Styled.NextButtonWrapper>\n            <IconButton\n              size=\"regular\"\n              Icon={Next2Icon}\n              renderAs=\"secondary\"\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","ref","animationRef","useRef","containerRef","containerHeight","setContainerHeight","useState","showContent","setShowContent","onLottieRender","useCallback","useImperativeHandle","resolve","handleComplete","_a","_b","useLayoutEffect","jsxs","Styled.Container","jsx","LottieAnimation","Styled.CircularStepContainer","Styled.ContentWrapper","FlexView","Text","Separator","Styled.InputContainer","Styled.PrevButtonWrapper","IconButton","Back2Icon","Styled.NextButtonWrapper","Next2Icon","CircularStepWrapper$1"],"mappings":";;;;;;;;;;AAsBA,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,KAEFC,MACG;AACG,UAAAC,IAAeC,EAAmC,IAAI,GACtDC,IAAeD,EAAuB,IAAI,GAC1C,CAACE,GAAiBC,CAAkB,IAAIC,EAA6B,GACrE,CAACC,GAAaC,CAAc,IAAIF,EAAS,EAAK,GAE9CG,IAAiBC,EAAY,MAAM;AACnC,MAAAd,KAAaK,EAAa,YACfA,EAAA,QAAQ,aAAaJ,GAAa,EAAI,GACnD,WAAW,MAAMW,EAAe,EAAI,GAAG,GAAG;AAAA,IAC5C,GAEC,CAACZ,CAAS,CAAC;AAEd,WAAAe,EAAoBX,GAAK,OAAO;AAAA,MAC9B,qBAAqB,YACZ,IAAI,QAAc,CAAWY,MAAA;;AAClC,cAAMC,IAAiB,MAAM;;AACnB,UAAAD,MACKE,IAAAb,EAAA,YAAA,QAAAa,EAAS,oBAAoB,YAAYD;AAAA,QAAc;AAGzD,SAAAC,IAAAb,EAAA,YAAA,QAAAa,EAAS,aAAahB,GAAa,KAChDU,EAAe,EAAK,IACPO,IAAAd,EAAA,YAAA,QAAAc,EAAS,iBAAiB,YAAYF;AAAA,MAAc,CAClE;AAAA,IAEH,EAAA,GAEFG,EAAgB,MAAM;AACpB,MAAIb,EAAa,WACIE,EAAAF,EAAa,QAAQ,YAAY;AAAA,IAExD,GAAG,CAAE,CAAA,GAGH,gBAAAc;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAChB,QAAO;AAAA,QACP,SAAQ;AAAA,QACR,KAAKf;AAAA,QAEJ,UAAA;AAAA,UACCC,KAAA,gBAAAe;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAQhB;AAAA,cACR,KAAKR;AAAA,cACL,KAAKK;AAAA,cACL,UAAUQ;AAAA,cACV,UAAUtB;AAAA,YAAA;AAAA,UACZ;AAAA,UAEF,gBAAAgC;AAAA,YAACE;AAAAA,YAAA;AAAA,cACC,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,aAAY;AAAA,cACZ,aAAY;AAAA,cACZ,iBAAgB;AAAA,cAEhB,UAAC,gBAAAJ,EAAAK,GAAA,EAAsB,YAAYf,GAChC,UAAA;AAAA,gBAAAd,sBACE8B,GACC,EAAA,UAAA;AAAA,kBAAA,gBAAAJ,EAACK,KAAK,WAAU,OAAM,QAAO,SAAQ,QAAO,UACzC,UACH/B,EAAA,CAAA;AAAA,kBACA,gBAAA0B,EAACM,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,gBAAA,EAAA,CACzB,IACE;AAAA,gBACH,gBAAAN,EAAAO,GAAA,EAAuB,UAAApC,GAAS;AAAA,cAAA,GACnC;AAAA,YAAA;AAAA,UACF;AAAA,UACCK,KACC,gBAAAwB,EAACQ,GAAA,EACC,UAAA,gBAAAR;AAAA,YAACS;AAAA,YAAA;AAAA,cACC,MAAMC;AAAA,cACN,UAAS;AAAA,cACT,gBAAe;AAAA,cACf,SAAStC;AAAA,cACT,UAAUQ;AAAA,cACV,MAAK;AAAA,YAAA;AAAA,UAAA,GAET;AAAA,UAEDL,KACC,gBAAAyB,EAACW,GAAA,EACC,UAAA,gBAAAX;AAAA,YAACS;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAMG;AAAA,cACN,UAAS;AAAA,cACT,gBAAe;AAAA,cACf,SAASvC;AAAA,cACT,MAAMO;AAAA,YAAA;AAAA,UAAA,GAEV;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF,GAEAiC,KAAe5C;"}

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

@@ -1,16 +1,27 @@
-import r from "styled-components";
-import t from "../../../ui/layout/flex-view.js";
-const c = r(t)`
-  border-right: 1px solid ${({ theme: o }) => o.colors.BLACK_5};
+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 {
-  c as AccountCard
+  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

@@ -1 +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)`\n  border-right: 1px solid ${({ theme }) => theme.colors.BLACK_5};\n  max-width: 200px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n  position: relative;\n  &:hover {\n    background-color: ${({ theme }) => theme.colors.BLACK_2};\n  }\n`;\n"],"names":["AccountCard","styled","FlexView","theme"],"mappings":";;AAIa,MAAAA,IAAcC,EAAOC,CAAQ;AAAA,4BACd,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMvC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;"}
+{"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

@@ -1,71 +1,76 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { memo as $ } from "react";
-import { ILLUSTRATIONS as f } from "../../../../assets/illustrations/illustrations.js";
-import u from "../../../ui/avatar/avatar.js";
-import p from "../../../ui/buttons/button/button.js";
-import g from "../../../ui/image/image.js";
+import { memo as f } from "react";
+import { ILLUSTRATIONS as u } from "../../../../assets/illustrations/illustrations.js";
+import g from "../../../ui/avatar/avatar.js";
+import I from "../../../ui/buttons/button/button.js";
+import A 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 C from "../../comps/overlay-loader/overlay-loader.js";
-import { AccountCard as I } from "./claim-user-account-styled.js";
-const A = ({
-  email: c,
-  onSelectAccount: a,
-  userAccounts: m,
-  onCreateNewAccount: h,
-  isCreatingAccount: i,
-  isLoading: s
-}) => /* @__PURE__ */ r(n, { $flex: 1, $alignItems: "center", $justifyContent: "center", $width: "100%", $height: "100%", children: [
-  /* @__PURE__ */ e(C, { isLoading: s }),
-  /* @__PURE__ */ e(g, { src: f.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: c })
-    ] }),
-    /* @__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(n, { $borderColor: "BLACK_5", $flexWrap: !0, $justifyContent: "center", $flexDirection: "row", children: m.map(({ id: l, phone: d }) => /* @__PURE__ */ r(
-    I,
-    {
-      $gutterX: 2,
-      $gapX: 2.81,
-      $width: 200,
-      $height: 200,
-      $alignItems: "center",
-      $justifyContent: "center",
-      onClick: () => a(l),
-      children: [
-        /* @__PURE__ */ e(u, { size: 80 }),
-        /* @__PURE__ */ e(t, { heightX: 0.5 }),
-        /* @__PURE__ */ e(o, { $color: "WHITE", $renderAs: "ab2", $align: "center", children: d })
-      ]
-    },
-    l
-  )) }),
-  /* @__PURE__ */ e(t, { heightX: 5 }),
-  /* @__PURE__ */ r(n, { $alignItems: "center", $justifyContent: "center", children: [
-    /* @__PURE__ */ e(o, { $renderAs: "ub2", $color: "WHITE", children: "Don't recognise these accounts?" }),
+import { UserAccountsWrapper as T, AccountCard as b } from "./claim-user-account-styled.js";
+const W = ({
+  email: m,
+  onSelectAccount: h,
+  userAccounts: i,
+  onCreateNewAccount: d,
+  isCreatingAccount: l,
+  isLoading: $
+}) => {
+  const c = i.length;
+  return /* @__PURE__ */ r(n, { $flex: 1, $alignItems: "center", $justifyContent: "center", $width: "100%", $height: "100%", children: [
+    /* @__PURE__ */ e(C, { isLoading: $ }),
+    /* @__PURE__ */ e(A, { src: u.CIRCLE_CUEMATH_LOGO_WHITE, alt: "Parent Signup", withLoader: !1 }),
     /* @__PURE__ */ e(t, { heightX: 1 }),
-    /* @__PURE__ */ e(
-      p,
+    /* @__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: m })
+      ] }),
+      /* @__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(T, { itemCount: c, children: i.map(({ id: a, phone: p }, s) => /* @__PURE__ */ r(
+      b,
       {
-        width: 232,
-        size: "small",
-        label: "Create new account",
-        renderAs: "secondary",
-        onClick: h,
-        busy: i,
-        disabled: i
-      }
-    )
-  ] })
-] }), k = $(A);
+        $gutterX: 2,
+        $gapX: 2.81,
+        $width: 200,
+        $height: 200,
+        $alignItems: "center",
+        $justifyContent: "center",
+        onClick: () => h(a),
+        index: s,
+        isLastItem: s === c - 1,
+        children: [
+          /* @__PURE__ */ e(g, { size: 80 }),
+          /* @__PURE__ */ e(t, { heightX: 0.5 }),
+          /* @__PURE__ */ e(o, { $color: "WHITE", $renderAs: "ab2", $align: "center", children: p })
+        ]
+      },
+      a
+    )) }),
+    /* @__PURE__ */ e(t, { heightX: 5 }),
+    /* @__PURE__ */ r(n, { $alignItems: "center", $justifyContent: "center", children: [
+      /* @__PURE__ */ e(o, { $renderAs: "ub2", $color: "WHITE", children: "Don't recognise these accounts?" }),
+      /* @__PURE__ */ e(t, { heightX: 1 }),
+      /* @__PURE__ */ e(
+        I,
+        {
+          width: 232,
+          size: "small",
+          label: "Create new account",
+          renderAs: "secondary",
+          onClick: d,
+          busy: l,
+          disabled: l
+        }
+      )
+    ] })
+  ] });
+}, S = f(W);
 export {
-  k as default
+  S as default
 };
 //# sourceMappingURL=claim-user-account.js.map

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

@@ -1 +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}) => {\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      <FlexView $borderColor=\"BLACK_5\" $flexWrap $justifyContent=\"center\" $flexDirection=\"row\">\n        {userAccounts.map(({ id, phone }) => (\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          >\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      </FlexView>\n      <Separator heightX={5} />\n      <FlexView $alignItems=\"center\" $justifyContent=\"center\">\n        <Text $renderAs=\"ub2\" $color=\"WHITE\">\n          Don't recognise these accounts?\n        </Text>\n        <Separator heightX={1} />\n        <Button\n          width={232}\n          size=\"small\"\n          label=\"Create new account\"\n          renderAs=\"secondary\"\n          onClick={onCreateNewAccount}\n          busy={isCreatingAccount}\n          disabled={isCreatingAccount}\n        />\n      </FlexView>\n    </FlexView>\n  );\n};\n\nexport default memo(ClaimUserAccount);\n"],"names":["ClaimUserAccount","email","onSelectAccount","userAccounts","onCreateNewAccount","isCreatingAccount","isLoading","jsxs","FlexView","jsx","OverlayLoader","Image","ILLUSTRATIONS","Separator","Text","id","phone","Styled.AccountCard","Avatar","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;AACF,MAEI,gBAAAC,EAACC,GAAS,EAAA,OAAO,GAAG,aAAY,UAAS,iBAAgB,UAAS,QAAO,QAAO,SAAQ,QACtF,UAAA;AAAA,EAAA,gBAAAC,EAACC,KAAc,WAAAJ,GAAsB;AAAA,EACrC,gBAAAG,EAACE,KAAM,KAAKC,EAAc,2BAA2B,KAAI,iBAAgB,YAAY,IAAO;AAAA,EAC5F,gBAAAH,EAACI,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,oBACtBL,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAD,EAACO,KAAK,WAAU,OAAM,QAAO,SAAQ,QAAO,UAAS,UAAA;AAAA,MAAA;AAAA,MACd;AAAA,MACrC,gBAAAL,EAACK,KAAK,QAAO,SAAQ,SAAO,IAAC,WAAU,YACpC,UACHb,EAAA,CAAA;AAAA,IAAA,GACF;AAAA,IACA,gBAAAQ,EAACK,KAAK,WAAU,OAAM,QAAO,SAAQ,QAAO,UAAS,UAErD,4CAAA,CAAA;AAAA,EAAA,GACF;AAAA,EACA,gBAAAL,EAACI,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,oBACtBL,GAAS,EAAA,cAAa,WAAU,WAAS,IAAC,iBAAgB,UAAS,gBAAe,OAChF,YAAa,IAAI,CAAC,EAAE,IAAAO,GAAI,OAAAC,QACvB,gBAAAT;AAAA,IAACU;AAAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,OAAO;AAAA,MAEP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,SAAS,MAAMf,EAAgBa,CAAE;AAAA,MAEjC,UAAA;AAAA,QAAC,gBAAAN,EAAAS,GAAA,EAAO,MAAM,GAAI,CAAA;AAAA,QAClB,gBAAAT,EAACI,GAAU,EAAA,SAAS,IAAK,CAAA;AAAA,QACzB,gBAAAJ,EAACK,KAAK,QAAO,SAAQ,WAAU,OAAM,QAAO,UACzC,UACHE,EAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAXKD;AAAA,EAaR,CAAA,GACH;AAAA,EACA,gBAAAN,EAACI,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,EACtB,gBAAAN,EAAAC,GAAA,EAAS,aAAY,UAAS,iBAAgB,UAC7C,UAAA;AAAA,IAAA,gBAAAC,EAACK,GAAK,EAAA,WAAU,OAAM,QAAO,SAAQ,UAErC,mCAAA;AAAA,IACA,gBAAAL,EAACI,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,IACvB,gBAAAJ;AAAA,MAACU;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,MAAK;AAAA,QACL,OAAM;AAAA,QACN,UAAS;AAAA,QACT,SAASf;AAAA,QACT,MAAMC;AAAA,QACN,UAAUA;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA,GACF;AACF,EAAA,CAAA,GAIWe,IAAAC,EAAKrB,CAAgB;"}
+{"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}) => {\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      <Separator heightX={5} />\n      <FlexView $alignItems=\"center\" $justifyContent=\"center\">\n        <Text $renderAs=\"ub2\" $color=\"WHITE\">\n          Don't recognise these accounts?\n        </Text>\n        <Separator heightX={1} />\n        <Button\n          width={232}\n          size=\"small\"\n          label=\"Create new account\"\n          renderAs=\"secondary\"\n          onClick={onCreateNewAccount}\n          busy={isCreatingAccount}\n          disabled={isCreatingAccount}\n        />\n      </FlexView>\n    </FlexView>\n  );\n};\n\nexport default memo(ClaimUserAccount);\n"],"names":["ClaimUserAccount","email","onSelectAccount","userAccounts","onCreateNewAccount","isCreatingAccount","isLoading","totalUsers","jsxs","FlexView","jsx","OverlayLoader","Image","ILLUSTRATIONS","Separator","Text","Styled.UserAccountsWrapper","id","phone","i","Styled.AccountCard","Avatar","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;AACF,MAAM;AACJ,QAAMC,IAAaJ,EAAa;AAG9B,SAAA,gBAAAK,EAACC,GAAS,EAAA,OAAO,GAAG,aAAY,UAAS,iBAAgB,UAAS,QAAO,QAAO,SAAQ,QACtF,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAc,WAAAL,GAAsB;AAAA,IACrC,gBAAAI,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,UACHd,EAAA,CAAA;AAAA,MAAA,GACF;AAAA,MACA,gBAAAS,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,UAAaJ,EAAA,IAAI,CAAC,EAAE,IAAAc,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,MAAMlB,EAAgBe,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,IACA,gBAAAP,EAACI,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,IACtB,gBAAAN,EAAAC,GAAA,EAAS,aAAY,UAAS,iBAAgB,UAC7C,UAAA;AAAA,MAAA,gBAAAC,EAACK,GAAK,EAAA,WAAU,OAAM,QAAO,SAAQ,UAErC,mCAAA;AAAA,MACA,gBAAAL,EAACI,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,MACvB,gBAAAJ;AAAA,QAACY;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,UACP,MAAK;AAAA,UACL,OAAM;AAAA,UACN,UAAS;AAAA,UACT,SAASlB;AAAA,UACT,MAAMC;AAAA,UACN,UAAUA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ,GAEekB,IAAAC,EAAKxB,CAAgB;"}

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

@@ -1,5 +1,5 @@
-import o from "styled-components";
-const a = o.div`
+import r from "styled-components";
+const a = r.div`
   .react-datepicker {
     font-family: UntitledSans-Medium;
     font-size: 14px;
@@ -30,6 +30,13 @@ const a = o.div`
       color: ${({ theme: e }) => e.colors.WHITE};
     }
   }
+  .react-datepicker__month-text--disabled {
+    color: ${({ theme: e }) => e.colors.WHITE_T_10};
+    cursor: not-allowed;
+    &:hover {
+      color: ${({ theme: e }) => e.colors.WHITE_T_10};
+    }
+  }
   .react-datepicker__month-text--selected {
     color: ${({ theme: e }) => e.colors.WHITE};
   }
@@ -64,7 +71,7 @@ const a = o.div`
     font-size: 32px;
     text-align: center;
     caret-color: ${({ theme: e }) => e.colors.WHITE};
-    color: ${({ theme: e, color: r }) => r || e.colors.WHITE};
+    color: ${({ theme: e, color: o }) => o || e.colors.WHITE};
     font-family: 'Athletics-Light';
 
     &::placeholder {

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

@@ -1 +1 @@
-{"version":3,"file":"date-picker-input-styled.js","sources":["../../../../../../src/features/auth/signup/custom-input/date-picker-input/date-picker-input-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledDatePickerWrapper = styled.div`\n  .react-datepicker {\n    font-family: UntitledSans-Medium;\n    font-size: 14px;\n    background-color: ${({ theme }) => theme.colors.BLACK_3};\n    border: 1px solid ${({ theme }) => theme.colors.BLACK_5};\n    padding: 16px;\n    border-radius: 8px;\n    transition: all 0.3s ease-in-out;\n  }\n\n  .react-datepicker__aria-live {\n    display: none;\n  }\n  .react-datepicker__header {\n    color: ${({ theme }) => theme.colors.WHITE};\n    text-align: center;\n  }\n\n  .react-datepicker__month-wrapper {\n    display: flex;\n  }\n  .react-datepicker__month-text {\n    color: ${({ theme }) => theme.colors.WHITE_T_38};\n    cursor: pointer;\n    padding: 8px;\n    border-radius: 4px;\n    &:hover {\n      color: ${({ theme }) => theme.colors.WHITE};\n    }\n  }\n  .react-datepicker__month-text--selected {\n    color: ${({ theme }) => theme.colors.WHITE};\n  }\n\n  .react-datepicker__navigation--previous {\n    background: url('/path/to/your/custom-left-arrow.svg') no-repeat center;\n    width: 20px;\n    height: 20px;\n    border: none;\n    background-size: contain;\n  }\n\n  .react-datepicker__navigation--next {\n    background: url('/path/to/your/custom-right-arrow.svg') no-repeat center;\n    width: 20px;\n    height: 20px;\n    border: none;\n    background-size: contain;\n  }\n\n  .react-datepicker__navigation-icon::before {\n    content: none;\n  }\n\n  .react-datepicker__input-container input {\n    max-width: 320px;\n    padding: 0;\n    line-height: 40px;\n    border: none;\n    outline: none;\n    background-color: transparent;\n    font-size: 32px;\n    text-align: center;\n    caret-color: ${({ theme }) => theme.colors.WHITE};\n    color: ${({ theme, color }) => color || theme.colors.WHITE};\n    font-family: 'Athletics-Light';\n\n    &::placeholder {\n      font-family: 'Athletics-Light';\n      font-size: 32px;\n    }\n  }\n`;\n"],"names":["StyledDatePickerWrapper","styled","theme","color"],"mappings":";AAEO,MAAMA,IAA0BC,EAAO;AAAA;AAAA;AAAA;AAAA,wBAItB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,wBACnC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAU9C,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAQjC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,eAKpC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA,aAInC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAgC3B,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA,aACvC,CAAC,EAAE,OAAAA,GAAO,OAAAC,EAAA,MAAYA,KAASD,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"date-picker-input-styled.js","sources":["../../../../../../src/features/auth/signup/custom-input/date-picker-input/date-picker-input-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledDatePickerWrapper = styled.div`\n  .react-datepicker {\n    font-family: UntitledSans-Medium;\n    font-size: 14px;\n    background-color: ${({ theme }) => theme.colors.BLACK_3};\n    border: 1px solid ${({ theme }) => theme.colors.BLACK_5};\n    padding: 16px;\n    border-radius: 8px;\n    transition: all 0.3s ease-in-out;\n  }\n\n  .react-datepicker__aria-live {\n    display: none;\n  }\n  .react-datepicker__header {\n    color: ${({ theme }) => theme.colors.WHITE};\n    text-align: center;\n  }\n\n  .react-datepicker__month-wrapper {\n    display: flex;\n  }\n  .react-datepicker__month-text {\n    color: ${({ theme }) => theme.colors.WHITE_T_38};\n    cursor: pointer;\n    padding: 8px;\n    border-radius: 4px;\n    &:hover {\n      color: ${({ theme }) => theme.colors.WHITE};\n    }\n  }\n  .react-datepicker__month-text--disabled {\n    color: ${({ theme }) => theme.colors.WHITE_T_10};\n    cursor: not-allowed;\n    &:hover {\n      color: ${({ theme }) => theme.colors.WHITE_T_10};\n    }\n  }\n  .react-datepicker__month-text--selected {\n    color: ${({ theme }) => theme.colors.WHITE};\n  }\n\n  .react-datepicker__navigation--previous {\n    background: url('/path/to/your/custom-left-arrow.svg') no-repeat center;\n    width: 20px;\n    height: 20px;\n    border: none;\n    background-size: contain;\n  }\n\n  .react-datepicker__navigation--next {\n    background: url('/path/to/your/custom-right-arrow.svg') no-repeat center;\n    width: 20px;\n    height: 20px;\n    border: none;\n    background-size: contain;\n  }\n\n  .react-datepicker__navigation-icon::before {\n    content: none;\n  }\n\n  .react-datepicker__input-container input {\n    max-width: 320px;\n    padding: 0;\n    line-height: 40px;\n    border: none;\n    outline: none;\n    background-color: transparent;\n    font-size: 32px;\n    text-align: center;\n    caret-color: ${({ theme }) => theme.colors.WHITE};\n    color: ${({ theme, color }) => color || theme.colors.WHITE};\n    font-family: 'Athletics-Light';\n\n    &::placeholder {\n      font-family: 'Athletics-Light';\n      font-size: 32px;\n    }\n  }\n`;\n"],"names":["StyledDatePickerWrapper","styled","theme","color"],"mappings":";AAEO,MAAMA,IAA0BC,EAAO;AAAA;AAAA;AAAA;AAAA,wBAItB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,wBACnC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAU9C,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAQjC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,eAKpC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA,aAInC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA,eAGpC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,aAIxC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAgC3B,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA,aACvC,CAAC,EAAE,OAAAA,GAAO,OAAAC,EAAA,MAAYA,KAASD,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/auth/signup/custom-input/date-picker-input/date-picker-input.js

@@ -1,54 +1,58 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import d from "../../../../../node_modules/react-datepicker/dist/index.es.js";
-import f from "../../../../../assets/line-icons/icons/left.js";
-import h from "../../../../../assets/line-icons/icons/right.js";
-import o from "../../../../ui/buttons/clickable/clickable.js";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import f from "../../../../../node_modules/react-datepicker/dist/index.es.js";
+import { useTheme as h } from "styled-components";
+import I from "../../../../../assets/line-icons/icons/left.js";
+import T from "../../../../../assets/line-icons/icons/right.js";
+import l from "../../../../ui/buttons/clickable/clickable.js";
 import u from "../../../../ui/layout/flex-view.js";
-import b from "../../../../ui/text/text.js";
-import { InputWrapper as x } from "../input-wrapper/input-wrapper.js";
-import { StyledDatePickerWrapper as D } from "./date-picker-input-styled.js";
-import { subYears as t } from "../../../../../node_modules/date-fns/subYears.js";
-const I = ({ value: i, onChange: a, error: l }) => /* @__PURE__ */ e(x, { helperText: l, children: /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(
-  d,
-  {
-    selected: i,
-    showMonthYearPicker: !0,
-    showPopperArrow: !1,
-    dateFormat: "MM/yyyy",
-    placeholderText: "MM / YYYY",
-    onChange: (r) => a(r),
-    minDate: t(/* @__PURE__ */ new Date(), 22),
-    maxDate: t(/* @__PURE__ */ new Date(), 2),
-    renderCustomHeader: ({
-      date: r,
-      decreaseYear: n,
-      increaseYear: c,
-      prevYearButtonDisabled: m,
-      nextYearButtonDisabled: p
-    }) => /* @__PURE__ */ s(u, { $alignItems: "center", $flexDirection: "row", $justifyContent: "space-between", children: [
-      /* @__PURE__ */ e(
-        o,
-        {
-          onClick: n,
-          label: "increase-year",
-          disabled: m,
-          children: /* @__PURE__ */ e(f, { color: "WHITE" })
-        }
-      ),
-      /* @__PURE__ */ e(b, { $renderAs: "ub2-bold", $color: "WHITE", children: r.getFullYear() }),
-      /* @__PURE__ */ e(
-        o,
-        {
-          onClick: c,
-          label: "decrease-year",
-          disabled: p,
-          children: /* @__PURE__ */ e(h, { color: "WHITE" })
-        }
-      )
-    ] })
-  }
-) }) }), g = I;
+import k from "../../../../ui/text/text.js";
+import { InputWrapper as w } from "../input-wrapper/input-wrapper.js";
+import { StyledDatePickerWrapper as x } from "./date-picker-input-styled.js";
+import { subYears as c } from "../../../../../node_modules/date-fns/subYears.js";
+const y = ({ value: a, onChange: m, error: n }) => {
+  const o = h();
+  return /* @__PURE__ */ e(w, { helperText: n, children: /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(
+    f,
+    {
+      selected: a,
+      showMonthYearPicker: !0,
+      showPopperArrow: !1,
+      dateFormat: "MM/yyyy",
+      placeholderText: "MM / YYYY",
+      onChange: (r) => m(r),
+      minDate: c(/* @__PURE__ */ new Date(), 22),
+      maxDate: c(/* @__PURE__ */ new Date(), 2),
+      renderCustomHeader: ({
+        date: r,
+        decreaseYear: p,
+        increaseYear: s,
+        prevYearButtonDisabled: t,
+        nextYearButtonDisabled: i
+      }) => /* @__PURE__ */ d(u, { $alignItems: "center", $flexDirection: "row", $justifyContent: "space-between", children: [
+        /* @__PURE__ */ e(
+          l,
+          {
+            onClick: p,
+            label: "increase-year",
+            disabled: t,
+            children: /* @__PURE__ */ e(I, { color: o.colors[t ? "WHITE_T_10" : "WHITE"] })
+          }
+        ),
+        /* @__PURE__ */ e(k, { $renderAs: "ub2-bold", $color: "WHITE", children: r.getFullYear() }),
+        /* @__PURE__ */ e(
+          l,
+          {
+            onClick: s,
+            label: "decrease-year",
+            disabled: i,
+            children: /* @__PURE__ */ e(T, { color: o.colors[i ? "WHITE_T_10" : "WHITE"] })
+          }
+        )
+      ] })
+    }
+  ) }) });
+}, _ = y;
 export {
-  g as default
+  _ as default
 };
 //# sourceMappingURL=date-picker-input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"date-picker-input.js","sources":["../../../../../../src/features/auth/signup/custom-input/date-picker-input/date-picker-input.tsx"],"sourcesContent":["import type { IDatePickerInputProps } from './date-picker-input-types';\n\nimport { subYears } from 'date-fns';\nimport { type FC } from 'react';\nimport DatePicker from 'react-datepicker';\n\nimport LeftIcon from '../../../../../assets/line-icons/icons/left';\nimport RightIcon from '../../../../../assets/line-icons/icons/right';\nimport Clickable from '../../../../ui/buttons/clickable/clickable';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { InputWrapper } from '../input-wrapper/input-wrapper';\nimport * as Styled from './date-picker-input-styled';\n\nconst DatePickerInput: FC<IDatePickerInputProps> = ({ value, onChange, error }) => {\n  return (\n    <InputWrapper helperText={error}>\n      <Styled.StyledDatePickerWrapper>\n        <DatePicker\n          selected={value}\n          showMonthYearPicker\n          showPopperArrow={false}\n          dateFormat=\"MM/yyyy\"\n          placeholderText=\"MM / YYYY\"\n          onChange={date => onChange(date)}\n          minDate={subYears(new Date(), 22)}\n          maxDate={subYears(new Date(), 2)}\n          renderCustomHeader={({\n            date,\n            decreaseYear,\n            increaseYear,\n            prevYearButtonDisabled,\n            nextYearButtonDisabled,\n          }) => (\n            <FlexView $alignItems=\"center\" $flexDirection=\"row\" $justifyContent=\"space-between\">\n              <Clickable\n                onClick={decreaseYear}\n                label=\"increase-year\"\n                disabled={prevYearButtonDisabled}\n              >\n                <LeftIcon color=\"WHITE\" />\n              </Clickable>\n              <Text $renderAs=\"ub2-bold\" $color=\"WHITE\">\n                {date.getFullYear()}\n              </Text>\n              <Clickable\n                onClick={increaseYear}\n                label=\"decrease-year\"\n                disabled={nextYearButtonDisabled}\n              >\n                <RightIcon color=\"WHITE\" />\n              </Clickable>\n            </FlexView>\n          )}\n        />\n      </Styled.StyledDatePickerWrapper>\n    </InputWrapper>\n  );\n};\n\nexport default DatePickerInput;\n"],"names":["DatePickerInput","value","onChange","error","InputWrapper","jsx","Styled.StyledDatePickerWrapper","DatePicker","date","subYears","decreaseYear","increaseYear","prevYearButtonDisabled","nextYearButtonDisabled","FlexView","Clickable","LeftIcon","Text","RightIcon","DatePickerInput$1"],"mappings":";;;;;;;;;;AAcA,MAAMA,IAA6C,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,OAAAC,0BAElEC,GAAa,EAAA,YAAYD,GACxB,UAAC,gBAAAE,EAAAC,GAAA,EACC,UAAA,gBAAAD;AAAA,EAACE;AAAA,EAAA;AAAA,IACC,UAAUN;AAAA,IACV,qBAAmB;AAAA,IACnB,iBAAiB;AAAA,IACjB,YAAW;AAAA,IACX,iBAAgB;AAAA,IAChB,UAAU,CAAQO,MAAAN,EAASM,CAAI;AAAA,IAC/B,SAASC,EAAa,oBAAA,KAAA,GAAQ,EAAE;AAAA,IAChC,SAASA,EAAa,oBAAA,KAAA,GAAQ,CAAC;AAAA,IAC/B,oBAAoB,CAAC;AAAA,MACnB,MAAAD;AAAA,MACA,cAAAE;AAAA,MACA,cAAAC;AAAA,MACA,wBAAAC;AAAA,MACA,wBAAAC;AAAA,IAAA,wBAECC,GAAS,EAAA,aAAY,UAAS,gBAAe,OAAM,iBAAgB,iBAClE,UAAA;AAAA,MAAA,gBAAAT;AAAA,QAACU;AAAA,QAAA;AAAA,UACC,SAASL;AAAA,UACT,OAAM;AAAA,UACN,UAAUE;AAAA,UAEV,UAAA,gBAAAP,EAACW,GAAS,EAAA,OAAM,QAAQ,CAAA;AAAA,QAAA;AAAA,MAC1B;AAAA,MACA,gBAAAX,EAACY,KAAK,WAAU,YAAW,QAAO,SAC/B,UAAAT,EAAK,eACR;AAAA,MACA,gBAAAH;AAAA,QAACU;AAAA,QAAA;AAAA,UACC,SAASJ;AAAA,UACT,OAAM;AAAA,UACN,UAAUE;AAAA,UAEV,UAAA,gBAAAR,EAACa,GAAU,EAAA,OAAM,QAAQ,CAAA;AAAA,QAAA;AAAA,MAC3B;AAAA,IAAA,GACF;AAAA,EAAA;AAAA,EAGN,CAAA,EACF,CAAA,GAIJC,IAAenB;"}
+{"version":3,"file":"date-picker-input.js","sources":["../../../../../../src/features/auth/signup/custom-input/date-picker-input/date-picker-input.tsx"],"sourcesContent":["import type { IDatePickerInputProps } from './date-picker-input-types';\n\nimport { subYears } from 'date-fns';\nimport { type FC } from 'react';\nimport DatePicker from 'react-datepicker';\nimport { useTheme } from 'styled-components';\n\nimport LeftIcon from '../../../../../assets/line-icons/icons/left';\nimport RightIcon from '../../../../../assets/line-icons/icons/right';\nimport Clickable from '../../../../ui/buttons/clickable/clickable';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { InputWrapper } from '../input-wrapper/input-wrapper';\nimport * as Styled from './date-picker-input-styled';\n\nconst DatePickerInput: FC<IDatePickerInputProps> = ({ value, onChange, error }) => {\n  const theme = useTheme();\n\n  return (\n    <InputWrapper helperText={error}>\n      <Styled.StyledDatePickerWrapper>\n        <DatePicker\n          selected={value}\n          showMonthYearPicker\n          showPopperArrow={false}\n          dateFormat=\"MM/yyyy\"\n          placeholderText=\"MM / YYYY\"\n          onChange={date => onChange(date)}\n          minDate={subYears(new Date(), 22)}\n          maxDate={subYears(new Date(), 2)}\n          renderCustomHeader={({\n            date,\n            decreaseYear,\n            increaseYear,\n            prevYearButtonDisabled,\n            nextYearButtonDisabled,\n          }) => (\n            <FlexView $alignItems=\"center\" $flexDirection=\"row\" $justifyContent=\"space-between\">\n              <Clickable\n                onClick={decreaseYear}\n                label=\"increase-year\"\n                disabled={prevYearButtonDisabled}\n              >\n                <LeftIcon color={theme.colors[prevYearButtonDisabled ? 'WHITE_T_10' : 'WHITE']} />\n              </Clickable>\n              <Text $renderAs=\"ub2-bold\" $color=\"WHITE\">\n                {date.getFullYear()}\n              </Text>\n              <Clickable\n                onClick={increaseYear}\n                label=\"decrease-year\"\n                disabled={nextYearButtonDisabled}\n              >\n                <RightIcon color={theme.colors[nextYearButtonDisabled ? 'WHITE_T_10' : 'WHITE']} />\n              </Clickable>\n            </FlexView>\n          )}\n        />\n      </Styled.StyledDatePickerWrapper>\n    </InputWrapper>\n  );\n};\n\nexport default DatePickerInput;\n"],"names":["DatePickerInput","value","onChange","error","theme","useTheme","InputWrapper","jsx","Styled.StyledDatePickerWrapper","DatePicker","date","subYears","decreaseYear","increaseYear","prevYearButtonDisabled","nextYearButtonDisabled","FlexView","Clickable","LeftIcon","Text","RightIcon","DatePickerInput$1"],"mappings":";;;;;;;;;;;AAeA,MAAMA,IAA6C,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,OAAAC,QAAY;AACjF,QAAMC,IAAQC;AAEd,2BACGC,GAAa,EAAA,YAAYH,GACxB,UAAC,gBAAAI,EAAAC,GAAA,EACC,UAAA,gBAAAD;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,UAAUR;AAAA,MACV,qBAAmB;AAAA,MACnB,iBAAiB;AAAA,MACjB,YAAW;AAAA,MACX,iBAAgB;AAAA,MAChB,UAAU,CAAQS,MAAAR,EAASQ,CAAI;AAAA,MAC/B,SAASC,EAAa,oBAAA,KAAA,GAAQ,EAAE;AAAA,MAChC,SAASA,EAAa,oBAAA,KAAA,GAAQ,CAAC;AAAA,MAC/B,oBAAoB,CAAC;AAAA,QACnB,MAAAD;AAAA,QACA,cAAAE;AAAA,QACA,cAAAC;AAAA,QACA,wBAAAC;AAAA,QACA,wBAAAC;AAAA,MAAA,wBAECC,GAAS,EAAA,aAAY,UAAS,gBAAe,OAAM,iBAAgB,iBAClE,UAAA;AAAA,QAAA,gBAAAT;AAAA,UAACU;AAAA,UAAA;AAAA,YACC,SAASL;AAAA,YACT,OAAM;AAAA,YACN,UAAUE;AAAA,YAEV,UAAA,gBAAAP,EAACW,KAAS,OAAOd,EAAM,OAAOU,IAAyB,eAAe,OAAO,GAAG;AAAA,UAAA;AAAA,QAClF;AAAA,QACA,gBAAAP,EAACY,KAAK,WAAU,YAAW,QAAO,SAC/B,UAAAT,EAAK,eACR;AAAA,QACA,gBAAAH;AAAA,UAACU;AAAA,UAAA;AAAA,YACC,SAASJ;AAAA,YACT,OAAM;AAAA,YACN,UAAUE;AAAA,YAEV,UAAA,gBAAAR,EAACa,KAAU,OAAOhB,EAAM,OAAOW,IAAyB,eAAe,OAAO,GAAG;AAAA,UAAA;AAAA,QACnF;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA,EAGN,CAAA,EACF,CAAA;AAEJ,GAEAM,IAAerB;"}

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

@@ -1,9 +1,9 @@
 import { jsx as r } from "react/jsx-runtime";
-import p from "../../../../ui/text/text.js";
-import { STUDENT_GRADE_OPTIONS as a } from "../../signup-constants.js";
-import { InputWrapper as c } from "../input-wrapper/input-wrapper.js";
+import a from "../../../../ui/text/text.js";
+import { STUDENT_GRADE_OPTIONS as c } from "../../signup-constants.js";
+import { InputWrapper as p } from "../input-wrapper/input-wrapper.js";
 import { GradeListWrapper as $, GradeItem as l } from "./grade-input-styled.js";
-const m = ({ value: n, onChange: d, error: i }) => /* @__PURE__ */ r(c, { helperText: i, children: /* @__PURE__ */ r($, { $flexDirection: "row", $flexWrap: !0, $flexGapX: 1, children: [...a].map(({ label: o, value: e }) => {
+const m = ({ value: n, onChange: d, error: i }) => /* @__PURE__ */ r(p, { helperText: i, children: /* @__PURE__ */ r($, { $flexDirection: "row", $flexWrap: !0, $flexGapX: 1, children: [...c].map(({ label: o, value: e }) => {
   const t = e === n;
   return /* @__PURE__ */ r(
     l,
@@ -17,9 +17,9 @@ const m = ({ value: n, onChange: d, error: i }) => /* @__PURE__ */ r(c, { helper
       $justifyContent: "center",
       $background: t ? "WHITE" : "REAL_BLACK",
       $borderColor: t ? "WHITE" : "BLACK_5",
-      $width: e === "pre" ? 96 : 40,
+      $width: e === "-1" ? 96 : 40,
       $height: 40,
-      children: /* @__PURE__ */ r(p, { $align: "center", $renderAs: "ab1", children: o })
+      children: /* @__PURE__ */ r(a, { $align: "center", $renderAs: "ab1", children: o })
     },
     e
   );

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

@@ -1 +1 @@
-{"version":3,"file":"grade-input.js","sources":["../../../../../../src/features/auth/signup/custom-input/grade-input/grade-input.tsx"],"sourcesContent":["import type { ICustomInputProps } from '../custom-input-types';\nimport type { FC } from 'react';\n\nimport Text from '../../../../ui/text/text';\nimport { STUDENT_GRADE_OPTIONS } from '../../signup-constants';\nimport { InputWrapper } from '../input-wrapper/input-wrapper';\nimport * as Styled from './grade-input-styled';\n\nconst GradeInput: FC<ICustomInputProps> = ({ value, onChange, error }) => {\n  return (\n    <InputWrapper helperText={error}>\n      <Styled.GradeListWrapper $flexDirection=\"row\" $flexWrap $flexGapX={1}>\n        {[...STUDENT_GRADE_OPTIONS].map(({ label, value: optionVal }) => {\n          const isSelected = optionVal === value;\n\n          return (\n            <Styled.GradeItem\n              key={optionVal}\n              selected={isSelected}\n              onClick={() => onChange(optionVal)}\n              $borderRadius={48}\n              $gutter={13}\n              $gap={6}\n              $alignItems=\"center\"\n              $justifyContent=\"center\"\n              $background={isSelected ? 'WHITE' : 'REAL_BLACK'}\n              $borderColor={isSelected ? 'WHITE' : 'BLACK_5'}\n              $width={optionVal === 'pre' ? 96 : 40}\n              $height={40}\n            >\n              <Text $align=\"center\" $renderAs=\"ab1\">\n                {label}\n              </Text>\n            </Styled.GradeItem>\n          );\n        })}\n      </Styled.GradeListWrapper>\n    </InputWrapper>\n  );\n};\n\nexport default GradeInput;\n"],"names":["GradeInput","value","onChange","error","jsx","InputWrapper","Styled.GradeListWrapper","STUDENT_GRADE_OPTIONS","label","optionVal","isSelected","Styled.GradeItem","Text","GradeInput$1"],"mappings":";;;;;AAQA,MAAMA,IAAoC,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,OAAAC,QAE1D,gBAAAC,EAACC,GAAa,EAAA,YAAYF,GACxB,UAAA,gBAAAC,EAACE,GAAA,EAAwB,gBAAe,OAAM,WAAS,IAAC,WAAW,GAChE,UAAA,CAAC,GAAGC,CAAqB,EAAE,IAAI,CAAC,EAAE,OAAAC,GAAO,OAAOC,EAAA,MAAgB;AAC/D,QAAMC,IAAaD,MAAcR;AAG/B,SAAA,gBAAAG;AAAA,IAACO;AAAAA,IAAA;AAAA,MAEC,UAAUD;AAAA,MACV,SAAS,MAAMR,EAASO,CAAS;AAAA,MACjC,eAAe;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,aAAaC,IAAa,UAAU;AAAA,MACpC,cAAcA,IAAa,UAAU;AAAA,MACrC,QAAQD,MAAc,QAAQ,KAAK;AAAA,MACnC,SAAS;AAAA,MAET,4BAACG,GAAK,EAAA,QAAO,UAAS,WAAU,OAC7B,UACHJ,GAAA;AAAA,IAAA;AAAA,IAfKC;AAAA,EAAA;AAgBP,CAEH,GACH,EACF,CAAA,GAIJI,IAAeb;"}
+{"version":3,"file":"grade-input.js","sources":["../../../../../../src/features/auth/signup/custom-input/grade-input/grade-input.tsx"],"sourcesContent":["import type { ICustomInputProps } from '../custom-input-types';\nimport type { FC } from 'react';\n\nimport Text from '../../../../ui/text/text';\nimport { STUDENT_GRADE_OPTIONS } from '../../signup-constants';\nimport { InputWrapper } from '../input-wrapper/input-wrapper';\nimport * as Styled from './grade-input-styled';\n\nconst GradeInput: FC<ICustomInputProps> = ({ value, onChange, error }) => {\n  return (\n    <InputWrapper helperText={error}>\n      <Styled.GradeListWrapper $flexDirection=\"row\" $flexWrap $flexGapX={1}>\n        {[...STUDENT_GRADE_OPTIONS].map(({ label, value: optionVal }) => {\n          const isSelected = optionVal === value;\n\n          return (\n            <Styled.GradeItem\n              key={optionVal}\n              selected={isSelected}\n              onClick={() => onChange(optionVal)}\n              $borderRadius={48}\n              $gutter={13}\n              $gap={6}\n              $alignItems=\"center\"\n              $justifyContent=\"center\"\n              $background={isSelected ? 'WHITE' : 'REAL_BLACK'}\n              $borderColor={isSelected ? 'WHITE' : 'BLACK_5'}\n              $width={optionVal === '-1' ? 96 : 40}\n              $height={40}\n            >\n              <Text $align=\"center\" $renderAs=\"ab1\">\n                {label}\n              </Text>\n            </Styled.GradeItem>\n          );\n        })}\n      </Styled.GradeListWrapper>\n    </InputWrapper>\n  );\n};\n\nexport default GradeInput;\n"],"names":["GradeInput","value","onChange","error","jsx","InputWrapper","Styled.GradeListWrapper","STUDENT_GRADE_OPTIONS","label","optionVal","isSelected","Styled.GradeItem","Text","GradeInput$1"],"mappings":";;;;;AAQA,MAAMA,IAAoC,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,OAAAC,QAE1D,gBAAAC,EAACC,GAAa,EAAA,YAAYF,GACxB,UAAA,gBAAAC,EAACE,GAAA,EAAwB,gBAAe,OAAM,WAAS,IAAC,WAAW,GAChE,UAAA,CAAC,GAAGC,CAAqB,EAAE,IAAI,CAAC,EAAE,OAAAC,GAAO,OAAOC,EAAA,MAAgB;AAC/D,QAAMC,IAAaD,MAAcR;AAG/B,SAAA,gBAAAG;AAAA,IAACO;AAAAA,IAAA;AAAA,MAEC,UAAUD;AAAA,MACV,SAAS,MAAMR,EAASO,CAAS;AAAA,MACjC,eAAe;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,aAAaC,IAAa,UAAU;AAAA,MACpC,cAAcA,IAAa,UAAU;AAAA,MACrC,QAAQD,MAAc,OAAO,KAAK;AAAA,MAClC,SAAS;AAAA,MAET,4BAACG,GAAK,EAAA,QAAO,UAAS,WAAU,OAC7B,UACHJ,GAAA;AAAA,IAAA;AAAA,IAfKC;AAAA,EAAA;AAgBP,CAEH,GACH,EACF,CAAA,GAIJI,IAAeb;"}

package/dist/features/auth/signup/user-type-selector/user-type-card/user-type-card.js

@@ -1,22 +1,22 @@
 import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { useRef as i, useMemo as A } from "react";
+import { useRef as i, useMemo as l } from "react";
 import { LOTTIE as e } from "../../../../../assets/lottie/lottie.js";
-import h from "../../../../ui/layout/flex-view.js";
+import A from "../../../../ui/layout/flex-view.js";
 import a from "../../../../ui/lottie-animation/lottie-animation.js";
-import l from "../../../../ui/separator/separator.js";
-import u from "../../../../ui/text/text.js";
-import { CardWrapper as T, SelectedAnimationWrapper as g } from "./user-type-card-styled.js";
+import h from "../../../../ui/separator/separator.js";
+import T from "../../../../ui/text/text.js";
+import { CardWrapper as g, SelectedAnimationWrapper as u } from "./user-type-card-styled.js";
 const m = {
   autoplay: !0,
-  loop: !0
+  loop: !1
 }, I = ({ onClick: s, userType: o, isSelected: t }) => {
-  const p = i(null), c = i(null), f = A(
+  const p = i(null), f = i(null), c = l(
     () => ({ ...m, loop: t, autoplay: t }),
     [t]
   );
-  return /* @__PURE__ */ n(h, { $alignItems: "center", $justifyContent: "center", children: [
+  return /* @__PURE__ */ n(A, { $alignItems: "center", $justifyContent: "center", children: [
     /* @__PURE__ */ n(
-      T,
+      g,
       {
         $widthX: 11,
         $heightX: 11,
@@ -34,25 +34,25 @@ const m = {
               width: 176,
               height: 176,
               src: o === "parent" ? e.PARENT_AVATAR : e.STUDENT_AVATAR,
-              settings: f,
+              settings: c,
               ref: p
             }
           ),
-          t && /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(
+          t && /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(
             a,
             {
               width: 176,
               height: 176,
               src: e.AVATAR_SELECTED,
               settings: m,
-              ref: c
+              ref: f
             }
           ) })
         ]
       }
     ),
-    /* @__PURE__ */ r(l, { heightX: 1 }),
-    /* @__PURE__ */ r(u, { $renderAs: "ac3", $color: t ? "WHITE" : "WHITE_T_60", children: o })
+    /* @__PURE__ */ r(h, { heightX: 1 }),
+    /* @__PURE__ */ r(T, { $renderAs: "ac3", $color: t ? "WHITE" : "WHITE_T_60", children: o })
   ] });
 };
 export {

package/dist/features/auth/signup/user-type-selector/user-type-card/user-type-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-type-card.js","sources":["../../../../../../src/features/auth/signup/user-type-selector/user-type-card/user-type-card.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../../ui/lottie-animation/types';\nimport type { IUserTypeCardProps } from './user-type-card-types';\n\nimport { useMemo, useRef, type FC } 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 './user-type-card-styled';\n\nconst animationSettings = {\n  autoplay: true,\n  loop: true,\n};\n\nconst UserTypeCard: FC<IUserTypeCardProps> = ({ onClick, userType, isSelected }) => {\n  const userTypeAnimationRef = useRef<ILottieAnimationRef | null>(null);\n  const selectedAnimationRef = useRef<ILottieAnimationRef | null>(null);\n\n  const avatarSettings = useMemo(\n    () => ({ ...animationSettings, loop: isSelected, autoplay: isSelected }),\n    [isSelected],\n  );\n\n  return (\n    <FlexView $alignItems=\"center\" $justifyContent=\"center\">\n      <Styled.CardWrapper\n        $widthX={11}\n        $heightX={11}\n        $gutterX={2.375}\n        $gapX={2.375}\n        $alignItems=\"center\"\n        $justifyContent=\"center\"\n        $selected={isSelected}\n        $background=\"BLACK_3\"\n        onClick={onClick}\n      >\n        <LottieAnimation\n          width={176}\n          height={176}\n          src={userType === 'parent' ? LOTTIE.PARENT_AVATAR : LOTTIE.STUDENT_AVATAR}\n          settings={avatarSettings}\n          ref={userTypeAnimationRef}\n        />\n        {isSelected && (\n          <Styled.SelectedAnimationWrapper>\n            <LottieAnimation\n              width={176}\n              height={176}\n              src={LOTTIE.AVATAR_SELECTED}\n              settings={animationSettings}\n              ref={selectedAnimationRef}\n            />\n          </Styled.SelectedAnimationWrapper>\n        )}\n      </Styled.CardWrapper>\n      <Separator heightX={1} />\n      <Text $renderAs=\"ac3\" $color={isSelected ? 'WHITE' : 'WHITE_T_60'}>\n        {userType}\n      </Text>\n    </FlexView>\n  );\n};\n\nexport default UserTypeCard;\n"],"names":["animationSettings","UserTypeCard","onClick","userType","isSelected","userTypeAnimationRef","useRef","selectedAnimationRef","avatarSettings","useMemo","jsxs","FlexView","Styled.CardWrapper","jsx","LottieAnimation","LOTTIE","Styled.SelectedAnimationWrapper","Separator","Text"],"mappings":";;;;;;;;AAYA,MAAMA,IAAoB;AAAA,EACxB,UAAU;AAAA,EACV,MAAM;AACR,GAEMC,IAAuC,CAAC,EAAE,SAAAC,GAAS,UAAAC,GAAU,YAAAC,QAAiB;AAC5E,QAAAC,IAAuBC,EAAmC,IAAI,GAC9DC,IAAuBD,EAAmC,IAAI,GAE9DE,IAAiBC;AAAA,IACrB,OAAO,EAAE,GAAGT,GAAmB,MAAMI,GAAY,UAAUA;IAC3D,CAACA,CAAU;AAAA,EAAA;AAGb,SACG,gBAAAM,EAAAC,GAAA,EAAS,aAAY,UAAS,iBAAgB,UAC7C,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAACE;AAAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU;AAAA,QACV,OAAO;AAAA,QACP,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAChB,WAAWR;AAAA,QACX,aAAY;AAAA,QACZ,SAAAF;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAW;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,KAAKX,MAAa,WAAWY,EAAO,gBAAgBA,EAAO;AAAA,cAC3D,UAAUP;AAAA,cACV,KAAKH;AAAA,YAAA;AAAA,UACP;AAAA,UACCD,KACC,gBAAAS,EAACG,GAAA,EACC,UAAA,gBAAAH;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,KAAKC,EAAO;AAAA,cACZ,UAAUf;AAAA,cACV,KAAKO;AAAA,YAAA;AAAA,UAAA,GAET;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,gBAAAM,EAACI,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,IACvB,gBAAAJ,EAACK,KAAK,WAAU,OAAM,QAAQd,IAAa,UAAU,cAClD,UACHD,EAAA,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"user-type-card.js","sources":["../../../../../../src/features/auth/signup/user-type-selector/user-type-card/user-type-card.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../../ui/lottie-animation/types';\nimport type { IUserTypeCardProps } from './user-type-card-types';\n\nimport { useMemo, useRef, type FC } 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 './user-type-card-styled';\n\nconst animationSettings = {\n  autoplay: true,\n  loop: false,\n};\n\nconst UserTypeCard: FC<IUserTypeCardProps> = ({ onClick, userType, isSelected }) => {\n  const userTypeAnimationRef = useRef<ILottieAnimationRef | null>(null);\n  const selectedAnimationRef = useRef<ILottieAnimationRef | null>(null);\n\n  const avatarSettings = useMemo(\n    () => ({ ...animationSettings, loop: isSelected, autoplay: isSelected }),\n    [isSelected],\n  );\n\n  return (\n    <FlexView $alignItems=\"center\" $justifyContent=\"center\">\n      <Styled.CardWrapper\n        $widthX={11}\n        $heightX={11}\n        $gutterX={2.375}\n        $gapX={2.375}\n        $alignItems=\"center\"\n        $justifyContent=\"center\"\n        $selected={isSelected}\n        $background=\"BLACK_3\"\n        onClick={onClick}\n      >\n        <LottieAnimation\n          width={176}\n          height={176}\n          src={userType === 'parent' ? LOTTIE.PARENT_AVATAR : LOTTIE.STUDENT_AVATAR}\n          settings={avatarSettings}\n          ref={userTypeAnimationRef}\n        />\n        {isSelected && (\n          <Styled.SelectedAnimationWrapper>\n            <LottieAnimation\n              width={176}\n              height={176}\n              src={LOTTIE.AVATAR_SELECTED}\n              settings={animationSettings}\n              ref={selectedAnimationRef}\n            />\n          </Styled.SelectedAnimationWrapper>\n        )}\n      </Styled.CardWrapper>\n      <Separator heightX={1} />\n      <Text $renderAs=\"ac3\" $color={isSelected ? 'WHITE' : 'WHITE_T_60'}>\n        {userType}\n      </Text>\n    </FlexView>\n  );\n};\n\nexport default UserTypeCard;\n"],"names":["animationSettings","UserTypeCard","onClick","userType","isSelected","userTypeAnimationRef","useRef","selectedAnimationRef","avatarSettings","useMemo","jsxs","FlexView","Styled.CardWrapper","jsx","LottieAnimation","LOTTIE","Styled.SelectedAnimationWrapper","Separator","Text"],"mappings":";;;;;;;;AAYA,MAAMA,IAAoB;AAAA,EACxB,UAAU;AAAA,EACV,MAAM;AACR,GAEMC,IAAuC,CAAC,EAAE,SAAAC,GAAS,UAAAC,GAAU,YAAAC,QAAiB;AAC5E,QAAAC,IAAuBC,EAAmC,IAAI,GAC9DC,IAAuBD,EAAmC,IAAI,GAE9DE,IAAiBC;AAAA,IACrB,OAAO,EAAE,GAAGT,GAAmB,MAAMI,GAAY,UAAUA;IAC3D,CAACA,CAAU;AAAA,EAAA;AAGb,SACG,gBAAAM,EAAAC,GAAA,EAAS,aAAY,UAAS,iBAAgB,UAC7C,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAACE;AAAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU;AAAA,QACV,OAAO;AAAA,QACP,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAChB,WAAWR;AAAA,QACX,aAAY;AAAA,QACZ,SAAAF;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAW;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,KAAKX,MAAa,WAAWY,EAAO,gBAAgBA,EAAO;AAAA,cAC3D,UAAUP;AAAA,cACV,KAAKH;AAAA,YAAA;AAAA,UACP;AAAA,UACCD,KACC,gBAAAS,EAACG,GAAA,EACC,UAAA,gBAAAH;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,KAAKC,EAAO;AAAA,cACZ,UAAUf;AAAA,cACV,KAAKO;AAAA,YAAA;AAAA,UAAA,GAET;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,gBAAAM,EAACI,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,IACvB,gBAAAJ,EAACK,KAAK,WAAU,OAAM,QAAQd,IAAa,UAAU,cAClD,UACHD,EAAA,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/index.d.ts

@@ -502,7 +502,7 @@ declare interface IAccountSelectorViewProps {
     userAccounts: {
         id: string;
         username: string;
-        user_avatar?: IAvatarLayer[];
+        user_avatar?: IAvatarLayer[] | null;
     }[];
     onSelect: (accountId: string) => void;
     onAddNew: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "2.9.5-j2",
+  "version": "2.9.5-j4",
   "type": "module",
   "files": [
     "dist"