@cuemath/leap 3.2.10-hg1 → 3.2.10
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.js +11 -11
- package/dist/features/auth/account-selector/account-selector.js.map +1 -1
- package/dist/features/auth/comps/auth-page-layout/auth-page-layout.js +8 -8
- package/dist/features/auth/comps/auth-page-layout/auth-page-layout.js.map +1 -1
- package/dist/features/auth/comps/user-list/user-list.js +11 -11
- package/dist/features/auth/comps/user-list/user-list.js.map +1 -1
- package/dist/features/ui/text/text.js +1 -1
- package/dist/features/ui/text/text.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import { jsxs as i, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { memo as s } from "react";
|
|
3
|
+
import { useTheme as $ } from "styled-components";
|
|
3
4
|
import { ILLUSTRATIONS as a } from "../../../assets/illustrations/illustrations.js";
|
|
4
|
-
import
|
|
5
|
+
import d from "../../ui/image/image.js";
|
|
5
6
|
import r from "../../ui/layout/flex-view.js";
|
|
6
7
|
import t from "../../ui/separator/separator.js";
|
|
7
8
|
import c from "../../ui/text/text.js";
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import {
|
|
12
|
-
import { EDeviceType as u } from "../../ui/theme/constants.js";
|
|
9
|
+
import { EDeviceType as f } from "../../ui/theme/constants.js";
|
|
10
|
+
import g from "../comps/overlay-loader/overlay-loader.js";
|
|
11
|
+
import T from "../comps/user-list/user-list.js";
|
|
12
|
+
import { ImageWrapper as u } from "./account-selector-styled.js";
|
|
13
13
|
const w = ({
|
|
14
14
|
userAccounts: m,
|
|
15
15
|
onSelect: n,
|
|
16
16
|
onAddNew: p,
|
|
17
17
|
isLoading: h
|
|
18
18
|
}) => {
|
|
19
|
-
const { device: l } =
|
|
19
|
+
const { device: l } = $(), o = l <= f.TABLET;
|
|
20
20
|
return /* @__PURE__ */ i(
|
|
21
21
|
r,
|
|
22
22
|
{
|
|
@@ -27,12 +27,12 @@ const w = ({
|
|
|
27
27
|
$height: "100%",
|
|
28
28
|
$gapX: 2,
|
|
29
29
|
children: [
|
|
30
|
-
/* @__PURE__ */ e(
|
|
31
|
-
/* @__PURE__ */ e(
|
|
30
|
+
/* @__PURE__ */ e(g, { isLoading: h }),
|
|
31
|
+
/* @__PURE__ */ e(d, { src: a.CIRCLE_CUEMATH_LOGO_WHITE, alt: "Parent Signup", withLoader: !1 }),
|
|
32
32
|
/* @__PURE__ */ e(t, { heightX: 1 }),
|
|
33
33
|
/* @__PURE__ */ e(c, { $renderAs: "ab1", $color: "WHITE_T_60", $align: "center", children: "Switch between accounts" }),
|
|
34
34
|
/* @__PURE__ */ e(t, { heightX: o ? 1.5 : 5 }),
|
|
35
|
-
/* @__PURE__ */ e(
|
|
35
|
+
/* @__PURE__ */ e(T, { users: m, onSelect: n, onAddNew: p }),
|
|
36
36
|
/* @__PURE__ */ e(t, { heightX: o ? 1.5 : 5 }),
|
|
37
37
|
/* @__PURE__ */ i(
|
|
38
38
|
r,
|
|
@@ -46,7 +46,7 @@ const w = ({
|
|
|
46
46
|
$flexDirection: "row",
|
|
47
47
|
children: [
|
|
48
48
|
/* @__PURE__ */ e(
|
|
49
|
-
|
|
49
|
+
u,
|
|
50
50
|
{
|
|
51
51
|
src: a.CUEMATH_APP_QR_CODE,
|
|
52
52
|
width: 80,
|
|
@@ -1 +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 { memo } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\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 UserList from '../comps/user-list/user-list';\nimport * as Styled from './account-selector-styled';\
|
|
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 { memo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\nimport Image from '../../ui/image/image';\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport { EDeviceType } from '../../ui/theme/constants';\nimport OverlayLoader from '../comps/overlay-loader/overlay-loader';\nimport UserList from '../comps/user-list/user-list';\nimport * as Styled from './account-selector-styled';\n\nconst AccountSelector = ({\n userAccounts,\n onSelect,\n onAddNew,\n isLoading,\n}: IAccountSelectorViewProps) => {\n const { device } = useTheme();\n const isCompact = device <= EDeviceType.TABLET;\n\n return (\n <FlexView\n $flex={1}\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $width=\"100%\"\n $height=\"100%\"\n $gapX={2}\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\" $align=\"center\">\n Switch between accounts\n </Text>\n <Separator heightX={isCompact ? 1.5 : 5} />\n <UserList users={userAccounts} onSelect={onSelect} onAddNew={onAddNew} />\n <Separator heightX={isCompact ? 1.5 : 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 <Styled.ImageWrapper\n src={ILLUSTRATIONS.CUEMATH_APP_QR_CODE}\n width={80}\n height={80}\n withLoader={false}\n />\n <FlexView $gapX={0.5} $flex={1}>\n <Text $color=\"WHITE\" $renderOnTabletAs=\"ab3\" $renderAs=\"ab2\">\n Download the cuemath app to view your children’s report\n </Text>\n </FlexView>\n </FlexView>\n </FlexView>\n );\n};\n\nexport default memo(AccountSelector);\n"],"names":["AccountSelector","userAccounts","onSelect","onAddNew","isLoading","device","useTheme","isCompact","EDeviceType","jsxs","FlexView","jsx","OverlayLoader","Image","ILLUSTRATIONS","Separator","Text","UserList","Styled.ImageWrapper","accountSelector","memo"],"mappings":";;;;;;;;;;;;AAeA,MAAMA,IAAkB,CAAC;AAAA,EACvB,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,MAAiC;AACzB,QAAA,EAAE,QAAAC,MAAWC,KACbC,IAAYF,KAAUG,EAAY;AAGtC,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,OAAO;AAAA,MAEP,UAAA;AAAA,QAAA,gBAAAC,EAACC,KAAc,WAAAR,GAAsB;AAAA,QACrC,gBAAAO,EAACE,KAAM,KAAKC,EAAc,2BAA2B,KAAI,iBAAgB,YAAY,IAAO;AAAA,QAC5F,gBAAAH,EAACI,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,QACvB,gBAAAJ,EAACK,KAAK,WAAU,OAAM,QAAO,cAAa,QAAO,UAAS,UAE1D,0BAAA,CAAA;AAAA,QACC,gBAAAL,EAAAI,GAAA,EAAU,SAASR,IAAY,MAAM,GAAG;AAAA,QACxC,gBAAAI,EAAAM,GAAA,EAAS,OAAOhB,GAAc,UAAAC,GAAoB,UAAAC,GAAoB;AAAA,QACtE,gBAAAQ,EAAAI,GAAA,EAAU,SAASR,IAAY,MAAM,GAAG;AAAA,QACzC,gBAAAE;AAAA,UAACC;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,cAAA,gBAAAC;AAAA,gBAACO;AAAAA,gBAAA;AAAA,kBACC,KAAKJ,EAAc;AAAA,kBACnB,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR,YAAY;AAAA,gBAAA;AAAA,cACd;AAAA,cACC,gBAAAH,EAAAD,GAAA,EAAS,OAAO,KAAK,OAAO,GAC3B,UAAA,gBAAAC,EAACK,GAAK,EAAA,QAAO,SAAQ,mBAAkB,OAAM,WAAU,OAAM,oEAE7D,CAAA,GACF;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEeG,IAAAC,EAAKpB,CAAe;"}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import { jsxs as n, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { memo as c } from "react";
|
|
3
|
-
import h from "
|
|
4
|
-
import
|
|
5
|
-
import { EDeviceType as
|
|
6
|
-
import {
|
|
3
|
+
import { useTheme as h } from "styled-components";
|
|
4
|
+
import a from "../../../ui/layout/flex-view.js";
|
|
5
|
+
import { EDeviceType as s } from "../../../ui/theme/constants.js";
|
|
6
|
+
import { Container as p, ContentWrapper as d } from "./auth-page-layout-styled.js";
|
|
7
7
|
const f = ({ leftBlock: i, rightBlock: o, isFullWidth: t }) => {
|
|
8
|
-
const { device: m } =
|
|
9
|
-
return /* @__PURE__ */ n(
|
|
8
|
+
const { device: m } = h(), e = m <= s.TABLET;
|
|
9
|
+
return /* @__PURE__ */ n(p, { $width: "100%", $height: "100%", $flexDirection: "row", children: [
|
|
10
10
|
/* @__PURE__ */ r(
|
|
11
|
-
|
|
11
|
+
d,
|
|
12
12
|
{
|
|
13
13
|
$width: t || e ? "100%" : "50%",
|
|
14
14
|
$background: "BLACK_1",
|
|
15
15
|
children: i
|
|
16
16
|
}
|
|
17
17
|
),
|
|
18
|
-
!e && o && !t && /* @__PURE__ */ r(
|
|
18
|
+
!e && o && !t && /* @__PURE__ */ r(a, { $width: "50%", $background: "BLACK_2", children: o })
|
|
19
19
|
] });
|
|
20
20
|
}, L = c(f);
|
|
21
21
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"auth-page-layout.js","sources":["../../../../../src/features/auth/comps/auth-page-layout/auth-page-layout.tsx"],"sourcesContent":["import type { IAuthPageLayoutProps } from './auth-page-layout-types';\n\nimport { memo, type FC } from 'react';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport
|
|
1
|
+
{"version":3,"file":"auth-page-layout.js","sources":["../../../../../src/features/auth/comps/auth-page-layout/auth-page-layout.tsx"],"sourcesContent":["import type { IAuthPageLayoutProps } from './auth-page-layout-types';\n\nimport { memo, type FC } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport { EDeviceType } from '../../../ui/theme/constants';\nimport * as Styled from './auth-page-layout-styled';\n\nconst AuthPageLayout: FC<IAuthPageLayoutProps> = ({ leftBlock, rightBlock, isFullWidth }) => {\n const { device } = useTheme();\n const isCompact = device <= EDeviceType.TABLET;\n const showRightBlock = !isCompact && rightBlock && !isFullWidth;\n\n return (\n <Styled.Container $width=\"100%\" $height=\"100%\" $flexDirection=\"row\">\n <Styled.ContentWrapper\n $width={isFullWidth || isCompact ? '100%' : '50%'}\n $background=\"BLACK_1\"\n >\n {leftBlock}\n </Styled.ContentWrapper>\n {showRightBlock && (\n <FlexView $width=\"50%\" $background=\"BLACK_2\">\n {rightBlock}\n </FlexView>\n )}\n </Styled.Container>\n );\n};\n\nexport default memo(AuthPageLayout);\n"],"names":["AuthPageLayout","leftBlock","rightBlock","isFullWidth","device","useTheme","isCompact","EDeviceType","jsxs","Styled.Container","jsx","Styled.ContentWrapper","FlexView","authPageLayout","memo"],"mappings":";;;;;;AASA,MAAMA,IAA2C,CAAC,EAAE,WAAAC,GAAW,YAAAC,GAAY,aAAAC,QAAkB;AACrF,QAAA,EAAE,QAAAC,MAAWC,KACbC,IAAYF,KAAUG,EAAY;AAItC,SAAA,gBAAAC,EAACC,GAAA,EAAiB,QAAO,QAAO,SAAQ,QAAO,gBAAe,OAC5D,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,QAAQR,KAAeG,IAAY,SAAS;AAAA,QAC5C,aAAY;AAAA,QAEX,UAAAL;AAAA,MAAA;AAAA,IACH;AAAA,IATmB,CAACK,KAAaJ,KAAc,CAACC,KAW7C,gBAAAO,EAAAE,GAAA,EAAS,QAAO,OAAM,aAAY,WAChC,UACHV,GAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,GAEeW,IAAAC,EAAKd,CAAc;"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsxs as g, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { memo as x } from "react";
|
|
3
|
-
import L from "
|
|
4
|
-
import I from "
|
|
5
|
-
import v from "
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
8
|
-
import {
|
|
3
|
+
import { useTheme as L } from "styled-components";
|
|
4
|
+
import I from "../../../../assets/line-icons/icons/plus.js";
|
|
5
|
+
import v from "../../../ui/layout/flex-view.js";
|
|
6
|
+
import { EDeviceType as T } from "../../../ui/theme/constants.js";
|
|
7
|
+
import U from "./user-item/user-item.js";
|
|
8
|
+
import { UserListWrapper as j, AddAccountButton as w } from "./user-list-styled.js";
|
|
9
9
|
const A = ({
|
|
10
10
|
users: s,
|
|
11
11
|
onSelect: a,
|
|
@@ -15,16 +15,16 @@ const A = ({
|
|
|
15
15
|
cardSize: h = 200,
|
|
16
16
|
avatarSize: u = 80
|
|
17
17
|
}) => {
|
|
18
|
-
const o = s.length + (i ? 1 : 0), { device: d } =
|
|
18
|
+
const o = s.length + (i ? 1 : 0), { device: d } = L(), m = d <= T.TABLET, r = m ? 2 : l, t = m ? 180 : h;
|
|
19
19
|
return /* @__PURE__ */ g(
|
|
20
|
-
|
|
20
|
+
j,
|
|
21
21
|
{
|
|
22
22
|
itemCount: o,
|
|
23
23
|
maxColumns: r,
|
|
24
24
|
cardWidth: t,
|
|
25
25
|
children: [
|
|
26
26
|
s.map(({ id: n, username: f, user_avatar: C, phone: $ }, c) => /* @__PURE__ */ e(
|
|
27
|
-
|
|
27
|
+
U,
|
|
28
28
|
{
|
|
29
29
|
id: n,
|
|
30
30
|
onSelect: a,
|
|
@@ -40,7 +40,7 @@ const A = ({
|
|
|
40
40
|
n
|
|
41
41
|
)),
|
|
42
42
|
i && /* @__PURE__ */ e(
|
|
43
|
-
|
|
43
|
+
w,
|
|
44
44
|
{
|
|
45
45
|
isLastItem: !0,
|
|
46
46
|
index: o,
|
|
@@ -53,7 +53,7 @@ const A = ({
|
|
|
53
53
|
$alignItems: "center",
|
|
54
54
|
$justifyContent: "center",
|
|
55
55
|
onClick: p,
|
|
56
|
-
children: /* @__PURE__ */ e(
|
|
56
|
+
children: /* @__PURE__ */ e(v, { $width: 40, $height: 40, children: /* @__PURE__ */ e(I, { color: "WHITE", width: 40, height: 40 }) })
|
|
57
57
|
}
|
|
58
58
|
)
|
|
59
59
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"user-list.js","sources":["../../../../../src/features/auth/comps/user-list/user-list.tsx"],"sourcesContent":["import type { IUserListProps } from './user-list-types';\n\nimport { type FC, memo } from 'react';\n\nimport PlusIcon from '../../../../assets/line-icons/icons/plus';\nimport FlexView from '../../../ui/layout/flex-view';\nimport UserItem from './user-item/user-item';\nimport * as Styled from './user-list-styled';\
|
|
1
|
+
{"version":3,"file":"user-list.js","sources":["../../../../../src/features/auth/comps/user-list/user-list.tsx"],"sourcesContent":["import type { IUserListProps } from './user-list-types';\n\nimport { type FC, memo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport PlusIcon from '../../../../assets/line-icons/icons/plus';\nimport FlexView from '../../../ui/layout/flex-view';\nimport { EDeviceType } from '../../../ui/theme/constants';\nimport UserItem from './user-item/user-item';\nimport * as Styled from './user-list-styled';\n\nconst UserList: FC<IUserListProps> = ({\n users,\n onSelect,\n showAddButton = false,\n onAddNew,\n maxColumns = 5,\n cardSize = 200,\n avatarSize = 80,\n}) => {\n const totalCards = users.length + (showAddButton ? 1 : 0);\n const { device } = useTheme();\n const isCompact = device <= EDeviceType.TABLET;\n\n const responsiveColumnNos = isCompact ? 2 : maxColumns;\n const responsiveCardSize = isCompact ? 180 : cardSize;\n\n return (\n <Styled.UserListWrapper\n itemCount={totalCards}\n maxColumns={responsiveColumnNos}\n cardWidth={responsiveCardSize}\n >\n {users.map(({ id, username, user_avatar: avatar, phone }, index) => (\n <UserItem\n key={id}\n id={id}\n onSelect={onSelect}\n cardSize={responsiveCardSize}\n index={index}\n maxColumns={responsiveColumnNos}\n avatarSize={avatarSize}\n avatar={avatar}\n phone={phone}\n username={username}\n isLastItem={index === totalCards - 1}\n />\n ))}\n\n {showAddButton && (\n <Styled.AddAccountButton\n isLastItem\n index={totalCards}\n maxColumns={responsiveColumnNos}\n $gutterX={5}\n $gapX={5}\n $background=\"BLACK_3\"\n $width={responsiveCardSize}\n $height={responsiveCardSize}\n $alignItems=\"center\"\n $justifyContent=\"center\"\n onClick={onAddNew}\n >\n <FlexView $width={40} $height={40}>\n <PlusIcon color=\"WHITE\" width={40} height={40} />\n </FlexView>\n </Styled.AddAccountButton>\n )}\n </Styled.UserListWrapper>\n );\n};\n\nexport default memo(UserList);\n"],"names":["UserList","users","onSelect","showAddButton","onAddNew","maxColumns","cardSize","avatarSize","totalCards","device","useTheme","isCompact","EDeviceType","responsiveColumnNos","responsiveCardSize","jsxs","Styled.UserListWrapper","id","username","avatar","phone","index","jsx","UserItem","Styled.AddAccountButton","FlexView","PlusIcon","UserList$1","memo"],"mappings":";;;;;;;;AAWA,MAAMA,IAA+B,CAAC;AAAA,EACpC,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AACf,MAAM;AACJ,QAAMC,IAAaP,EAAM,UAAUE,IAAgB,IAAI,IACjD,EAAE,QAAAM,MAAWC,KACbC,IAAYF,KAAUG,EAAY,QAElCC,IAAsBF,IAAY,IAAIN,GACtCS,IAAqBH,IAAY,MAAML;AAG3C,SAAA,gBAAAS;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWR;AAAA,MACX,YAAYK;AAAA,MACZ,WAAWC;AAAA,MAEV,UAAA;AAAA,QAAMb,EAAA,IAAI,CAAC,EAAE,IAAAgB,GAAI,UAAAC,GAAU,aAAaC,GAAQ,OAAAC,KAASC,MACxD,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YAEC,IAAAN;AAAA,YACA,UAAAf;AAAA,YACA,UAAUY;AAAA,YACV,OAAAO;AAAA,YACA,YAAYR;AAAA,YACZ,YAAAN;AAAA,YACA,QAAAY;AAAA,YACA,OAAAC;AAAA,YACA,UAAAF;AAAA,YACA,YAAYG,MAAUb,IAAa;AAAA,UAAA;AAAA,UAV9BS;AAAA,QAAA,CAYR;AAAA,QAEAd,KACC,gBAAAmB;AAAA,UAACE;AAAAA,UAAA;AAAA,YACC,YAAU;AAAA,YACV,OAAOhB;AAAA,YACP,YAAYK;AAAA,YACZ,UAAU;AAAA,YACV,OAAO;AAAA,YACP,aAAY;AAAA,YACZ,QAAQC;AAAA,YACR,SAASA;AAAA,YACT,aAAY;AAAA,YACZ,iBAAgB;AAAA,YAChB,SAASV;AAAA,YAET,UAAC,gBAAAkB,EAAAG,GAAA,EAAS,QAAQ,IAAI,SAAS,IAC7B,UAAA,gBAAAH,EAACI,GAAS,EAAA,OAAM,SAAQ,OAAO,IAAI,QAAQ,GAAI,CAAA,GACjD;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,GAEeC,IAAAC,EAAK5B,CAAQ;"}
|
|
@@ -19,7 +19,7 @@ const $ = F.div(
|
|
|
19
19
|
$renderOnMobileAs: c,
|
|
20
20
|
$renderOnTabletAs: i
|
|
21
21
|
}) => {
|
|
22
|
-
const { text: E, colors: m, layout: u, device: p } = g, L = C(() => p
|
|
22
|
+
const { text: E, colors: m, layout: u, device: p } = g, L = C(() => p <= y.MOBILE ? c || i || t : p <= y.TABLET && i || t, [p, t, c, i]), {
|
|
23
23
|
fontFamily: h,
|
|
24
24
|
fontSize: k,
|
|
25
25
|
lineHeight: z,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text.js","sources":["../../../../src/features/ui/text/text.tsx"],"sourcesContent":["import type { TColorNames, TTextVariants } from '../types';\n\nimport { useMemo } from 'react';\nimport styled from 'styled-components';\n\nimport { EDeviceType } from '../theme/constants';\n\nexport interface TextProps {\n $renderAs: TTextVariants;\n $color?: TColorNames;\n $align?: 'auto' | 'left' | 'right' | 'center' | 'justify';\n $alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';\n $opacity?: number | undefined;\n $width?: number | string;\n $widthX?: number;\n $marginBottom?: number;\n $marginBottomX?: number;\n $inline?: boolean;\n $textDecoration?: string;\n $whiteSpace?: 'pre-line' | 'normal' | 'pre-wrap' | 'no-wrap' | 'pre' | 'break-spaces';\n $renderOnMobileAs?: TTextVariants;\n $renderOnTabletAs?: TTextVariants;\n}\n\n/**\n * @param $renderAs (fallback for any device), @param $renderOnMobileAs, @param $renderOnTabletAs - The text variant to render as (ah1-ah4, ab1-ab3, ac1-ac4, ub1-ub3), anything else is deprecated\n */\nconst Text = styled.div<TextProps>(\n ({\n theme,\n $renderAs,\n $color,\n $align = 'left',\n $width,\n $widthX,\n $marginBottom,\n $marginBottomX,\n $alignSelf,\n $opacity = 1,\n $inline,\n $textDecoration,\n $whiteSpace,\n $renderOnMobileAs,\n $renderOnTabletAs,\n }) => {\n const { text, colors, layout, device } = theme;\n const renderAs = useMemo(() => {\n if (device
|
|
1
|
+
{"version":3,"file":"text.js","sources":["../../../../src/features/ui/text/text.tsx"],"sourcesContent":["import type { TColorNames, TTextVariants } from '../types';\n\nimport { useMemo } from 'react';\nimport styled from 'styled-components';\n\nimport { EDeviceType } from '../theme/constants';\n\nexport interface TextProps {\n $renderAs: TTextVariants;\n $color?: TColorNames;\n $align?: 'auto' | 'left' | 'right' | 'center' | 'justify';\n $alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';\n $opacity?: number | undefined;\n $width?: number | string;\n $widthX?: number;\n $marginBottom?: number;\n $marginBottomX?: number;\n $inline?: boolean;\n $textDecoration?: string;\n $whiteSpace?: 'pre-line' | 'normal' | 'pre-wrap' | 'no-wrap' | 'pre' | 'break-spaces';\n $renderOnMobileAs?: TTextVariants;\n $renderOnTabletAs?: TTextVariants;\n}\n\n/**\n * @param $renderAs (fallback for any device), @param $renderOnMobileAs, @param $renderOnTabletAs - The text variant to render as (ah1-ah4, ab1-ab3, ac1-ac4, ub1-ub3), anything else is deprecated\n */\nconst Text = styled.div<TextProps>(\n ({\n theme,\n $renderAs,\n $color,\n $align = 'left',\n $width,\n $widthX,\n $marginBottom,\n $marginBottomX,\n $alignSelf,\n $opacity = 1,\n $inline,\n $textDecoration,\n $whiteSpace,\n $renderOnMobileAs,\n $renderOnTabletAs,\n }) => {\n const { text, colors, layout, device } = theme;\n const renderAs = useMemo(() => {\n if (device <= EDeviceType.MOBILE) {\n return $renderOnMobileAs || $renderOnTabletAs || $renderAs;\n }\n\n if (device <= EDeviceType.TABLET) {\n return $renderOnTabletAs || $renderAs;\n }\n\n return $renderAs;\n }, [device, $renderAs, $renderOnMobileAs, $renderOnTabletAs]);\n\n const {\n fontFamily,\n fontSize,\n lineHeight,\n letterSpacing,\n textTransform = 'none',\n } = text[renderAs];\n\n return `\n display: ${$inline ? 'inline-block' : 'block'};\n font-family: ${fontFamily};\n font-size: ${fontSize}px;\n text-align: ${$align};\n line-height: ${lineHeight}px;\n text-transform: ${textTransform};\n ${typeof letterSpacing === 'number' ? `letter-spacing: ${letterSpacing}px;` : ''}\n color: ${$color ? colors[$color] : colors.BLACK};\n opacity: ${$opacity};\n width: ${$width ? `${$width}` : 'auto'}${typeof $width === 'number' ? 'px' : ''};\n ${$widthX ? `width: ${$widthX * layout.gutter}px;` : ''}\n margin-bottom: ${$marginBottom ? `${$marginBottom}` : 'initial'}${\n typeof $marginBottom === 'number' ? 'px' : ''\n };\n ${$marginBottomX ? `margin-bottom: ${$marginBottomX * layout.gutter}px;` : ''}\n ${$alignSelf ? `align-self: ${$alignSelf};` : ''}\n ${$textDecoration ? `text-decoration: ${$textDecoration};` : ''}\n ${$whiteSpace ? `white-space: ${$whiteSpace};` : ''}\n `;\n },\n);\n\nText.displayName = 'Text';\n\nexport default Text;\n"],"names":["Text","styled","theme","$renderAs","$color","$align","$width","$widthX","$marginBottom","$marginBottomX","$alignSelf","$opacity","$inline","$textDecoration","$whiteSpace","$renderOnMobileAs","$renderOnTabletAs","text","colors","layout","device","renderAs","useMemo","EDeviceType","fontFamily","fontSize","lineHeight","letterSpacing","textTransform","Text$1"],"mappings":";;;AA2BA,MAAMA,IAAOC,EAAO;AAAA,EAClB,CAAC;AAAA,IACC,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,mBAAAC;AAAA,EAAA,MACI;AACJ,UAAM,EAAE,MAAAC,GAAM,QAAAC,GAAQ,QAAAC,GAAQ,QAAAC,MAAWlB,GACnCmB,IAAWC,EAAQ,MACnBF,KAAUG,EAAY,SACjBR,KAAqBC,KAAqBb,IAG/CiB,KAAUG,EAAY,UACjBP,KAAqBb,GAI7B,CAACiB,GAAQjB,GAAWY,GAAmBC,CAAiB,CAAC,GAEtD;AAAA,MACJ,YAAAQ;AAAA,MACA,UAAAC;AAAA,MACA,YAAAC;AAAA,MACA,eAAAC;AAAA,MACA,eAAAC,IAAgB;AAAA,IAAA,IACdX,EAAKI,CAAQ;AAEV,WAAA;AAAA,iBACMT,IAAU,iBAAiB,OAAO;AAAA,qBAC9BY,CAAU;AAAA,mBACZC,CAAQ;AAAA,oBACPpB,CAAM;AAAA,qBACLqB,CAAU;AAAA,wBACPE,CAAa;AAAA,QAC7B,OAAOD,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA,eACvEvB,IAASc,EAAOd,CAAM,IAAIc,EAAO,KAAK;AAAA,iBACpCP,CAAQ;AAAA,eACVL,IAAS,GAAGA,CAAM,KAAK,MAAM,GAAG,OAAOA,KAAW,WAAW,OAAO,EAAE;AAAA,QAC7EC,IAAU,UAAUA,IAAUY,EAAO,MAAM,QAAQ,EAAE;AAAA,uBACtCX,IAAgB,GAAGA,CAAa,KAAK,SAAS,GAC7D,OAAOA,KAAkB,WAAW,OAAO,EAC7C;AAAA,QACEC,IAAiB,kBAAkBA,IAAiBU,EAAO,MAAM,QAAQ,EAAE;AAAA,QAC3ET,IAAa,eAAeA,CAAU,MAAM,EAAE;AAAA,QAC9CG,IAAkB,oBAAoBA,CAAe,MAAM,EAAE;AAAA,QAC7DC,IAAc,gBAAgBA,CAAW,MAAM,EAAE;AAAA;AAAA,EAEvD;AACF;AAEAd,EAAK,cAAc;AAEnB,MAAA6B,IAAe7B;"}
|