@cuemath/leap 2.9.5-j3 → 2.9.5-j5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/features/auth/account-selector/account-selector-styled.js +27 -16
- package/dist/features/auth/account-selector/account-selector-styled.js.map +1 -1
- package/dist/features/auth/account-selector/account-selector.js +83 -68
- package/dist/features/auth/account-selector/account-selector.js.map +1 -1
- package/dist/features/auth/login/social-login-methods/social-login-methods.js +46 -0
- package/dist/features/auth/login/social-login-methods/social-login-methods.js.map +1 -0
- package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.js +17 -15
- package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.js.map +1 -1
- package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper.js +45 -46
- package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper.js.map +1 -1
- package/dist/features/auth/signup/claim-user-account/claim-user-account-styled.js +16 -5
- package/dist/features/auth/signup/claim-user-account/claim-user-account-styled.js.map +1 -1
- package/dist/features/auth/signup/claim-user-account/claim-user-account.js +66 -61
- package/dist/features/auth/signup/claim-user-account/claim-user-account.js.map +1 -1
- package/dist/features/auth/signup/custom-input/date-picker-input/date-picker-input-styled.js +10 -3
- package/dist/features/auth/signup/custom-input/date-picker-input/date-picker-input-styled.js.map +1 -1
- package/dist/features/auth/signup/custom-input/date-picker-input/date-picker-input.js +54 -50
- package/dist/features/auth/signup/custom-input/date-picker-input/date-picker-input.js.map +1 -1
- package/dist/features/auth/signup/user-type-selector/user-type-card/user-type-card.js +14 -14
- package/dist/features/auth/signup/user-type-selector/user-type-card/user-type-card.js.map +1 -1
- package/dist/index.d.ts +9 -1
- package/dist/index.js +224 -222
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +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)
|
|
1
|
+
{"version":3,"file":"claim-user-account-styled.js","sources":["../../../../../src/features/auth/signup/claim-user-account/claim-user-account-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nexport const AccountCard = styled(FlexView)<{ index: number; isLastItem: boolean }>`\n max-width: 200px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n position: relative;\n border-left: 1px solid ${({ theme }) => theme.colors.BLACK_5};\n border-bottom: 1px solid ${({ theme }) => theme.colors.BLACK_5};\n\n &:hover {\n background-color: ${({ theme }) => theme.colors.BLACK_2};\n }\n\n ${({ index, theme }) => index < 5 && `border-top: 1px solid ${theme.colors.BLACK_5};`}\n\n ${({ index, isLastItem, theme }) =>\n ((index + 1) % 5 === 0 || isLastItem) && `border-right: 1px solid ${theme.colors.BLACK_5};`}\n`;\n\nexport const UserAccountsWrapper = styled.div<{ itemCount: number }>`\n display: inline-grid;\n grid-template-columns: repeat(${({ itemCount }) => (itemCount < 5 ? itemCount : 5)}, 200px);\n grid-auto-rows: 200px;\n`;\n"],"names":["AccountCard","styled","FlexView","theme","index","isLastItem","UserAccountsWrapper","itemCount"],"mappings":";;AAIa,MAAAA,IAAcC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKf,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,6BACjC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,wBAGxC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,IAGvD,CAAC,EAAE,OAAAC,GAAO,OAAAD,EAAM,MAAMC,IAAQ,KAAK,yBAAyBD,EAAM,OAAO,OAAO,GAAG;AAAA;AAAA,IAEnF,CAAC,EAAE,OAAAC,GAAO,YAAAC,GAAY,OAAAF,UACpBC,IAAQ,KAAK,MAAM,KAAKC,MAAe,2BAA2BF,EAAM,OAAO,OAAO,GAAG;AAAA,GAGlFG,IAAsBL,EAAO;AAAA;AAAA,kCAER,CAAC,EAAE,WAAAM,QAAiBA,IAAY,IAAIA,IAAY,CAAE;AAAA;AAAA;"}
|
|
@@ -1,71 +1,76 @@
|
|
|
1
1
|
import { jsxs as r, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { memo as
|
|
3
|
-
import { ILLUSTRATIONS as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
2
|
+
import { memo as f } from "react";
|
|
3
|
+
import { ILLUSTRATIONS as u } from "../../../../assets/illustrations/illustrations.js";
|
|
4
|
+
import g from "../../../ui/avatar/avatar.js";
|
|
5
|
+
import I from "../../../ui/buttons/button/button.js";
|
|
6
|
+
import A from "../../../ui/image/image.js";
|
|
7
7
|
import n from "../../../ui/layout/flex-view.js";
|
|
8
8
|
import t from "../../../ui/separator/separator.js";
|
|
9
9
|
import o from "../../../ui/text/text.js";
|
|
10
10
|
import C from "../../comps/overlay-loader/overlay-loader.js";
|
|
11
|
-
import { AccountCard as
|
|
12
|
-
const
|
|
13
|
-
email:
|
|
14
|
-
onSelectAccount:
|
|
15
|
-
userAccounts:
|
|
16
|
-
onCreateNewAccount:
|
|
17
|
-
isCreatingAccount:
|
|
18
|
-
isLoading:
|
|
19
|
-
}) =>
|
|
20
|
-
|
|
21
|
-
/* @__PURE__ */
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
/* @__PURE__ */ r(o, { $renderAs: "ab1", $color: "WHITE", $align: "center", children: [
|
|
25
|
-
"We found multiple profiles linked to",
|
|
26
|
-
" ",
|
|
27
|
-
/* @__PURE__ */ e(o, { $color: "WHITE", $inline: !0, $renderAs: "ab1-bold", children: c })
|
|
28
|
-
] }),
|
|
29
|
-
/* @__PURE__ */ e(o, { $renderAs: "ab1", $color: "WHITE", $align: "center", children: "Which one would you like to proceed with?" })
|
|
30
|
-
] }),
|
|
31
|
-
/* @__PURE__ */ e(t, { heightX: 5 }),
|
|
32
|
-
/* @__PURE__ */ e(n, { $borderColor: "BLACK_5", $flexWrap: !0, $justifyContent: "center", $flexDirection: "row", children: m.map(({ id: l, phone: d }) => /* @__PURE__ */ r(
|
|
33
|
-
I,
|
|
34
|
-
{
|
|
35
|
-
$gutterX: 2,
|
|
36
|
-
$gapX: 2.81,
|
|
37
|
-
$width: 200,
|
|
38
|
-
$height: 200,
|
|
39
|
-
$alignItems: "center",
|
|
40
|
-
$justifyContent: "center",
|
|
41
|
-
onClick: () => a(l),
|
|
42
|
-
children: [
|
|
43
|
-
/* @__PURE__ */ e(u, { size: 80 }),
|
|
44
|
-
/* @__PURE__ */ e(t, { heightX: 0.5 }),
|
|
45
|
-
/* @__PURE__ */ e(o, { $color: "WHITE", $renderAs: "ab2", $align: "center", children: d })
|
|
46
|
-
]
|
|
47
|
-
},
|
|
48
|
-
l
|
|
49
|
-
)) }),
|
|
50
|
-
/* @__PURE__ */ e(t, { heightX: 5 }),
|
|
51
|
-
/* @__PURE__ */ r(n, { $alignItems: "center", $justifyContent: "center", children: [
|
|
52
|
-
/* @__PURE__ */ e(o, { $renderAs: "ub2", $color: "WHITE", children: "Don't recognise these accounts?" }),
|
|
11
|
+
import { UserAccountsWrapper as T, AccountCard as b } from "./claim-user-account-styled.js";
|
|
12
|
+
const W = ({
|
|
13
|
+
email: m,
|
|
14
|
+
onSelectAccount: h,
|
|
15
|
+
userAccounts: i,
|
|
16
|
+
onCreateNewAccount: d,
|
|
17
|
+
isCreatingAccount: l,
|
|
18
|
+
isLoading: $
|
|
19
|
+
}) => {
|
|
20
|
+
const c = i.length;
|
|
21
|
+
return /* @__PURE__ */ r(n, { $flex: 1, $alignItems: "center", $justifyContent: "center", $width: "100%", $height: "100%", children: [
|
|
22
|
+
/* @__PURE__ */ e(C, { isLoading: $ }),
|
|
23
|
+
/* @__PURE__ */ e(A, { src: u.CIRCLE_CUEMATH_LOGO_WHITE, alt: "Parent Signup", withLoader: !1 }),
|
|
53
24
|
/* @__PURE__ */ e(t, { heightX: 1 }),
|
|
54
|
-
/* @__PURE__ */
|
|
55
|
-
|
|
25
|
+
/* @__PURE__ */ r(n, { children: [
|
|
26
|
+
/* @__PURE__ */ r(o, { $renderAs: "ab1", $color: "WHITE", $align: "center", children: [
|
|
27
|
+
"We found multiple profiles linked to",
|
|
28
|
+
" ",
|
|
29
|
+
/* @__PURE__ */ e(o, { $color: "WHITE", $inline: !0, $renderAs: "ab1-bold", children: m })
|
|
30
|
+
] }),
|
|
31
|
+
/* @__PURE__ */ e(o, { $renderAs: "ab1", $color: "WHITE", $align: "center", children: "Which one would you like to proceed with?" })
|
|
32
|
+
] }),
|
|
33
|
+
/* @__PURE__ */ e(t, { heightX: 5 }),
|
|
34
|
+
/* @__PURE__ */ e(T, { itemCount: c, children: i.map(({ id: a, phone: p }, s) => /* @__PURE__ */ r(
|
|
35
|
+
b,
|
|
56
36
|
{
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
37
|
+
$gutterX: 2,
|
|
38
|
+
$gapX: 2.81,
|
|
39
|
+
$width: 200,
|
|
40
|
+
$height: 200,
|
|
41
|
+
$alignItems: "center",
|
|
42
|
+
$justifyContent: "center",
|
|
43
|
+
onClick: () => h(a),
|
|
44
|
+
index: s,
|
|
45
|
+
isLastItem: s === c - 1,
|
|
46
|
+
children: [
|
|
47
|
+
/* @__PURE__ */ e(g, { size: 80 }),
|
|
48
|
+
/* @__PURE__ */ e(t, { heightX: 0.5 }),
|
|
49
|
+
/* @__PURE__ */ e(o, { $color: "WHITE", $renderAs: "ab2", $align: "center", children: p })
|
|
50
|
+
]
|
|
51
|
+
},
|
|
52
|
+
a
|
|
53
|
+
)) }),
|
|
54
|
+
/* @__PURE__ */ e(t, { heightX: 5 }),
|
|
55
|
+
/* @__PURE__ */ r(n, { $alignItems: "center", $justifyContent: "center", children: [
|
|
56
|
+
/* @__PURE__ */ e(o, { $renderAs: "ub2", $color: "WHITE", children: "Don't recognise these accounts?" }),
|
|
57
|
+
/* @__PURE__ */ e(t, { heightX: 1 }),
|
|
58
|
+
/* @__PURE__ */ e(
|
|
59
|
+
I,
|
|
60
|
+
{
|
|
61
|
+
width: 232,
|
|
62
|
+
size: "small",
|
|
63
|
+
label: "Create new account",
|
|
64
|
+
renderAs: "secondary",
|
|
65
|
+
onClick: d,
|
|
66
|
+
busy: l,
|
|
67
|
+
disabled: l
|
|
68
|
+
}
|
|
69
|
+
)
|
|
70
|
+
] })
|
|
71
|
+
] });
|
|
72
|
+
}, S = f(W);
|
|
68
73
|
export {
|
|
69
|
-
|
|
74
|
+
S as default
|
|
70
75
|
};
|
|
71
76
|
//# sourceMappingURL=claim-user-account.js.map
|
|
@@ -1 +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 <
|
|
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 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
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
const a =
|
|
1
|
+
import r from "styled-components";
|
|
2
|
+
const a = r.div`
|
|
3
3
|
.react-datepicker {
|
|
4
4
|
font-family: UntitledSans-Medium;
|
|
5
5
|
font-size: 14px;
|
|
@@ -30,6 +30,13 @@ const a = o.div`
|
|
|
30
30
|
color: ${({ theme: e }) => e.colors.WHITE};
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
|
+
.react-datepicker__month-text--disabled {
|
|
34
|
+
color: ${({ theme: e }) => e.colors.WHITE_T_10};
|
|
35
|
+
cursor: not-allowed;
|
|
36
|
+
&:hover {
|
|
37
|
+
color: ${({ theme: e }) => e.colors.WHITE_T_10};
|
|
38
|
+
}
|
|
39
|
+
}
|
|
33
40
|
.react-datepicker__month-text--selected {
|
|
34
41
|
color: ${({ theme: e }) => e.colors.WHITE};
|
|
35
42
|
}
|
|
@@ -64,7 +71,7 @@ const a = o.div`
|
|
|
64
71
|
font-size: 32px;
|
|
65
72
|
text-align: center;
|
|
66
73
|
caret-color: ${({ theme: e }) => e.colors.WHITE};
|
|
67
|
-
color: ${({ theme: e, color:
|
|
74
|
+
color: ${({ theme: e, color: o }) => o || e.colors.WHITE};
|
|
68
75
|
font-family: 'Athletics-Light';
|
|
69
76
|
|
|
70
77
|
&::placeholder {
|
package/dist/features/auth/signup/custom-input/date-picker-input/date-picker-input-styled.js.map
CHANGED
|
@@ -1 +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;"}
|
|
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--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;"}
|
|
@@ -1,54 +1,58 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
1
|
+
import { jsx as e, jsxs as d } from "react/jsx-runtime";
|
|
2
|
+
import f from "../../../../../node_modules/react-datepicker/dist/index.es.js";
|
|
3
|
+
import { useTheme as h } from "styled-components";
|
|
4
|
+
import I from "../../../../../assets/line-icons/icons/left.js";
|
|
5
|
+
import T from "../../../../../assets/line-icons/icons/right.js";
|
|
6
|
+
import l from "../../../../ui/buttons/clickable/clickable.js";
|
|
6
7
|
import u from "../../../../ui/layout/flex-view.js";
|
|
7
|
-
import
|
|
8
|
-
import { InputWrapper as
|
|
9
|
-
import { StyledDatePickerWrapper as
|
|
10
|
-
import { subYears as
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
{
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
8
|
+
import k from "../../../../ui/text/text.js";
|
|
9
|
+
import { InputWrapper as w } from "../input-wrapper/input-wrapper.js";
|
|
10
|
+
import { StyledDatePickerWrapper as x } from "./date-picker-input-styled.js";
|
|
11
|
+
import { subYears as c } from "../../../../../node_modules/date-fns/subYears.js";
|
|
12
|
+
const y = ({ value: a, onChange: m, error: n }) => {
|
|
13
|
+
const o = h();
|
|
14
|
+
return /* @__PURE__ */ e(w, { helperText: n, children: /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(
|
|
15
|
+
f,
|
|
16
|
+
{
|
|
17
|
+
selected: a,
|
|
18
|
+
showMonthYearPicker: !0,
|
|
19
|
+
showPopperArrow: !1,
|
|
20
|
+
dateFormat: "MM/yyyy",
|
|
21
|
+
placeholderText: "MM / YYYY",
|
|
22
|
+
onChange: (r) => m(r),
|
|
23
|
+
minDate: c(/* @__PURE__ */ new Date(), 22),
|
|
24
|
+
maxDate: c(/* @__PURE__ */ new Date(), 2),
|
|
25
|
+
renderCustomHeader: ({
|
|
26
|
+
date: r,
|
|
27
|
+
decreaseYear: p,
|
|
28
|
+
increaseYear: s,
|
|
29
|
+
prevYearButtonDisabled: t,
|
|
30
|
+
nextYearButtonDisabled: i
|
|
31
|
+
}) => /* @__PURE__ */ d(u, { $alignItems: "center", $flexDirection: "row", $justifyContent: "space-between", children: [
|
|
32
|
+
/* @__PURE__ */ e(
|
|
33
|
+
l,
|
|
34
|
+
{
|
|
35
|
+
onClick: p,
|
|
36
|
+
label: "increase-year",
|
|
37
|
+
disabled: t,
|
|
38
|
+
children: /* @__PURE__ */ e(I, { color: o.colors[t ? "WHITE_T_10" : "WHITE"] })
|
|
39
|
+
}
|
|
40
|
+
),
|
|
41
|
+
/* @__PURE__ */ e(k, { $renderAs: "ub2-bold", $color: "WHITE", children: r.getFullYear() }),
|
|
42
|
+
/* @__PURE__ */ e(
|
|
43
|
+
l,
|
|
44
|
+
{
|
|
45
|
+
onClick: s,
|
|
46
|
+
label: "decrease-year",
|
|
47
|
+
disabled: i,
|
|
48
|
+
children: /* @__PURE__ */ e(T, { color: o.colors[i ? "WHITE_T_10" : "WHITE"] })
|
|
49
|
+
}
|
|
50
|
+
)
|
|
51
|
+
] })
|
|
52
|
+
}
|
|
53
|
+
) }) });
|
|
54
|
+
}, _ = y;
|
|
51
55
|
export {
|
|
52
|
-
|
|
56
|
+
_ as default
|
|
53
57
|
};
|
|
54
58
|
//# sourceMappingURL=date-picker-input.js.map
|
|
@@ -1 +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
|
|
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';\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;"}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import { jsxs as n, jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { useRef as i, useMemo as
|
|
2
|
+
import { useRef as i, useMemo as l } from "react";
|
|
3
3
|
import { LOTTIE as e } from "../../../../../assets/lottie/lottie.js";
|
|
4
|
-
import
|
|
4
|
+
import A from "../../../../ui/layout/flex-view.js";
|
|
5
5
|
import a from "../../../../ui/lottie-animation/lottie-animation.js";
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import { CardWrapper as
|
|
6
|
+
import h from "../../../../ui/separator/separator.js";
|
|
7
|
+
import T from "../../../../ui/text/text.js";
|
|
8
|
+
import { CardWrapper as g, SelectedAnimationWrapper as u } from "./user-type-card-styled.js";
|
|
9
9
|
const m = {
|
|
10
10
|
autoplay: !0,
|
|
11
|
-
loop: !
|
|
11
|
+
loop: !1
|
|
12
12
|
}, I = ({ onClick: s, userType: o, isSelected: t }) => {
|
|
13
|
-
const p = i(null),
|
|
13
|
+
const p = i(null), f = i(null), c = l(
|
|
14
14
|
() => ({ ...m, loop: t, autoplay: t }),
|
|
15
15
|
[t]
|
|
16
16
|
);
|
|
17
|
-
return /* @__PURE__ */ n(
|
|
17
|
+
return /* @__PURE__ */ n(A, { $alignItems: "center", $justifyContent: "center", children: [
|
|
18
18
|
/* @__PURE__ */ n(
|
|
19
|
-
|
|
19
|
+
g,
|
|
20
20
|
{
|
|
21
21
|
$widthX: 11,
|
|
22
22
|
$heightX: 11,
|
|
@@ -34,25 +34,25 @@ const m = {
|
|
|
34
34
|
width: 176,
|
|
35
35
|
height: 176,
|
|
36
36
|
src: o === "parent" ? e.PARENT_AVATAR : e.STUDENT_AVATAR,
|
|
37
|
-
settings:
|
|
37
|
+
settings: c,
|
|
38
38
|
ref: p
|
|
39
39
|
}
|
|
40
40
|
),
|
|
41
|
-
t && /* @__PURE__ */ r(
|
|
41
|
+
t && /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(
|
|
42
42
|
a,
|
|
43
43
|
{
|
|
44
44
|
width: 176,
|
|
45
45
|
height: 176,
|
|
46
46
|
src: e.AVATAR_SELECTED,
|
|
47
47
|
settings: m,
|
|
48
|
-
ref:
|
|
48
|
+
ref: f
|
|
49
49
|
}
|
|
50
50
|
) })
|
|
51
51
|
]
|
|
52
52
|
}
|
|
53
53
|
),
|
|
54
|
-
/* @__PURE__ */ r(
|
|
55
|
-
/* @__PURE__ */ r(
|
|
54
|
+
/* @__PURE__ */ r(h, { heightX: 1 }),
|
|
55
|
+
/* @__PURE__ */ r(T, { $renderAs: "ac3", $color: t ? "WHITE" : "WHITE_T_60", children: o })
|
|
56
56
|
] });
|
|
57
57
|
};
|
|
58
58
|
export {
|
|
@@ -1 +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:
|
|
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: 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
CHANGED
|
@@ -502,7 +502,7 @@ declare interface IAccountSelectorViewProps {
|
|
|
502
502
|
userAccounts: {
|
|
503
503
|
id: string;
|
|
504
504
|
username: string;
|
|
505
|
-
user_avatar?: IAvatarLayer[];
|
|
505
|
+
user_avatar?: IAvatarLayer[] | null;
|
|
506
506
|
}[];
|
|
507
507
|
onSelect: (accountId: string) => void;
|
|
508
508
|
onAddNew: () => void;
|
|
@@ -2713,6 +2713,12 @@ export declare interface ISignUpProps {
|
|
|
2713
2713
|
onSignupStepsComplete: (data: IUpdateUserPayloadDal | ICreateUserResponseDal | null) => void;
|
|
2714
2714
|
}
|
|
2715
2715
|
|
|
2716
|
+
declare interface ISocialLoginMethodsProps {
|
|
2717
|
+
onGoogleLogin: () => void;
|
|
2718
|
+
onAppleLogin: () => void;
|
|
2719
|
+
loadingProvider: TSocialAuthProvider | null;
|
|
2720
|
+
}
|
|
2721
|
+
|
|
2716
2722
|
export declare const isOkayTypeQuestion: IIsOkayTypeQuestion;
|
|
2717
2723
|
|
|
2718
2724
|
export declare enum IStatsToAwardErrorCode {
|
|
@@ -4058,6 +4064,8 @@ export declare const Skip2Icon: React.FC<React.SVGProps<SVGSVGElement>>;
|
|
|
4058
4064
|
|
|
4059
4065
|
export declare const SkipIcon: React.FC<React.SVGProps<SVGSVGElement>>;
|
|
4060
4066
|
|
|
4067
|
+
export declare const SocialLoginMethods: FC<ISocialLoginMethodsProps>;
|
|
4068
|
+
|
|
4061
4069
|
export declare const SplashScreen: ({ animationCompleted }: {
|
|
4062
4070
|
animationCompleted: () => void;
|
|
4063
4071
|
}) => JSX_2.Element;
|