@cuemath/leap 3.2.19-link.1 → 3.2.20-beta-0.1
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/assets/illustrations/illustrations.js +0 -1
- package/dist/assets/illustrations/illustrations.js.map +1 -1
- package/dist/features/chapters/lpar-chapter/block-section/sat-sheet-item/sat-sheet-item.js +42 -42
- package/dist/features/chapters/lpar-chapter/block-section/sat-sheet-item/sat-sheet-item.js.map +1 -1
- package/dist/features/chapters-v2/comps/node-card/node-card-tags.js +19 -12
- package/dist/features/chapters-v2/comps/node-card/node-card-tags.js.map +1 -1
- package/dist/features/chapters-v2/constants/block-constants.js +3 -2
- package/dist/features/chapters-v2/constants/block-constants.js.map +1 -1
- package/dist/features/chapters-v2/utils/index.js +6 -4
- package/dist/features/chapters-v2/utils/index.js.map +1 -1
- package/dist/features/chapters-v2/utils/node-card-utils.js +4 -0
- package/dist/features/chapters-v2/utils/node-card-utils.js.map +1 -1
- package/dist/features/sheets/constants/sheet.js +2 -1
- package/dist/features/sheets/constants/sheet.js.map +1 -1
- package/dist/features/trial-session/comps/student-profile/student-profile.js +1 -1
- package/dist/features/trial-session/comps/teacher-intro/teacher-intro-styled.js +50 -7
- package/dist/features/trial-session/comps/teacher-intro/teacher-intro-styled.js.map +1 -1
- package/dist/features/trial-session/comps/teacher-intro/teacher-intro.js +69 -15
- package/dist/features/trial-session/comps/teacher-intro/teacher-intro.js.map +1 -1
- package/dist/features/ui/inputs/base-input/base-input.js +11 -11
- package/dist/features/ui/inputs/base-input/base-input.js.map +1 -1
- package/dist/features/ui/inputs/text-input/text-input.js +18 -19
- package/dist/features/ui/inputs/text-input/text-input.js.map +1 -1
- package/dist/features/ui/modals/modal-styled.js +8 -42
- package/dist/features/ui/modals/modal-styled.js.map +1 -1
- package/dist/features/ui/modals/modal.js +27 -37
- package/dist/features/ui/modals/modal.js.map +1 -1
- package/dist/features/ui/text/text.js +29 -31
- package/dist/features/ui/text/text.js.map +1 -1
- package/dist/features/ui/theme/clrs.js +0 -2
- package/dist/features/ui/theme/clrs.js.map +1 -1
- package/dist/index.d.ts +5 -68
- package/dist/index.js +625 -635
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/assets/line-icons/icons/star3.js +0 -32
- package/dist/assets/line-icons/icons/star3.js.map +0 -1
- package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile-styled.js +0 -49
- package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile-styled.js.map +0 -1
- package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile.js +0 -64
- package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile.js.map +0 -1
- package/dist/features/ui/accordion/accordion-items/accordion-items-styled.js +0 -28
- package/dist/features/ui/accordion/accordion-items/accordion-items-styled.js.map +0 -1
- package/dist/features/ui/accordion/accordion-items/accordion-items.js +0 -83
- package/dist/features/ui/accordion/accordion-items/accordion-items.js.map +0 -1
- package/dist/features/ui/accordion/accordion.js +0 -62
- package/dist/features/ui/accordion/accordion.js.map +0 -1
- package/dist/static/stripe-blurple.6abf422f.svg +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"teacher-intro-styled.js","sources":["../../../../../src/features/trial-session/comps/teacher-intro/teacher-intro-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nconst Container = styled.div`\n width: 100%;\n height: 100%;\n`;\n\nconst ContentWrapper = styled(FlexView)`\n margin: auto;\n`;\n\nexport { Container, ContentWrapper };\n"],"names":["Container","styled","ContentWrapper","FlexView"],"mappings":"
|
|
1
|
+
{"version":3,"file":"teacher-intro-styled.js","sources":["../../../../../src/features/trial-session/comps/teacher-intro/teacher-intro-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport Image from '../../../ui/image/image';\nimport FlexView from '../../../ui/layout/flex-view';\n\nconst Container = styled.div`\n width: 100%;\n height: 100%;\n`;\n\nconst ContentWrapper = styled(FlexView)`\n margin: auto;\n`;\n\nconst ProfilePicture = styled(Image)`\n object-fit: cover;\n`;\n\nconst GridContainer = styled.div(\n ({ theme }) => `\n flex: 1;\n display: grid;\n border-left: 1px solid ${theme.colors.BLACK_T_87};\n grid-template-columns: repeat(2, 1fr);\n grid-template-rows: auto auto auto;\n`,\n);\n\nconst GridItem = styled(FlexView)(\n ({ theme }) => `\n border: 0.5px solid ${theme.colors.WHITE_5};\n &:first-child,\n &:nth-child(2) {\n grid-column: span 1;\n }\n &:nth-child(3),\n &:nth-child(4) {\n grid-column: span 2;\n }\n &:first-child {\n border-left: none;\n border-top: none;\n }\n &:nth-child(2) {\n border-right: none;\n border-top: none;\n }\n &:nth-child(3) {\n border-left: none;\n border-right: none;\n }\n &:nth-child(4) {\n border-left: none;\n border-right: none;\n border-bottom: none;\n }\n`,\n);\n\nexport { Container, ContentWrapper, ProfilePicture, GridContainer, GridItem };\n"],"names":["Container","styled","ContentWrapper","FlexView","ProfilePicture","Image","GridContainer","theme","GridItem"],"mappings":";;;AAKA,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA,GAKnBC,IAAiBD,EAAOE,CAAQ;AAAA;AAAA,GAIhCC,IAAiBH,EAAOI,CAAK;AAAA;AAAA,GAI7BC,IAAgBL,EAAO;AAAA,EAC3B,CAAC,EAAE,OAAAM,EAAA,MAAY;AAAA;AAAA;AAAA,2BAGUA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAIlD,GAEMC,IAAWP,EAAOE,CAAQ;AAAA,EAC9B,CAAC,EAAE,OAAAI,EAAA,MAAY;AAAA,wBACOA,EAAM,OAAO,OAAO;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;AA2B5C;"}
|
|
@@ -1,20 +1,74 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { memo as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
8
|
-
import
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
import { jsx as e, jsxs as r } from "react/jsx-runtime";
|
|
2
|
+
import { memo as T, useMemo as I } from "react";
|
|
3
|
+
import j from "../../../ui/image/image.js";
|
|
4
|
+
import h from "../../../ui/layout/flex-view.js";
|
|
5
|
+
import s from "../../../ui/separator/separator.js";
|
|
6
|
+
import t from "../../../ui/text/text.js";
|
|
7
|
+
import { useTrialSessionContext as k } from "../../context/use-trial-session-context.js";
|
|
8
|
+
import O from "../communication-slide/index.js";
|
|
9
|
+
import F from "../slide-header/index.js";
|
|
10
|
+
import { COUNTRY_FLAGS as H } from "./teacher-intro-constants.js";
|
|
11
|
+
import { Container as L, ContentWrapper as D, ProfilePicture as E, GridContainer as P, GridItem as i } from "./teacher-intro-styled.js";
|
|
12
|
+
const z = T(() => {
|
|
13
|
+
const { slideConfig: f } = k(), { renderAVIn: m, teacher_profile: u } = f || {}, {
|
|
14
|
+
degree: g,
|
|
15
|
+
countries: o,
|
|
16
|
+
lower_grade: a,
|
|
17
|
+
higher_grade: n,
|
|
18
|
+
header_image: $,
|
|
19
|
+
years_of_experience: p,
|
|
20
|
+
number_of_students_taught: b
|
|
21
|
+
} = u || {}, { degree_name: c, field_of_study: d } = g || {}, _ = Object.values(H), l = n && parseInt(n, 10) > 8, x = I(() => l ? "High School" : ` ${a === "K" ? "" : "G"}${a} - G${n}`, [l, n, a]);
|
|
22
|
+
return m === "right" ? /* @__PURE__ */ e(O, {}) : /* @__PURE__ */ r(L, { children: [
|
|
23
|
+
/* @__PURE__ */ e(s, { height: 60 }),
|
|
24
|
+
/* @__PURE__ */ e(F, {}),
|
|
25
|
+
/* @__PURE__ */ r(
|
|
26
|
+
D,
|
|
27
|
+
{
|
|
28
|
+
$flexDirection: "row",
|
|
29
|
+
$width: 750,
|
|
30
|
+
$borderColor: "BLACK_T_87",
|
|
31
|
+
$background: "WHITE_3",
|
|
32
|
+
children: [
|
|
33
|
+
/* @__PURE__ */ e(E, { withLoader: !0, src: $, width: 350, height: 350 }),
|
|
34
|
+
/* @__PURE__ */ r(P, { children: [
|
|
35
|
+
/* @__PURE__ */ r(i, { $justifyContent: "center", $gutter: 24, children: [
|
|
36
|
+
/* @__PURE__ */ e(t, { $renderAs: "ah3-black", children: p }),
|
|
37
|
+
/* @__PURE__ */ e(t, { $renderAs: "ub3", children: "Yrs of Teaching Experience" })
|
|
38
|
+
] }),
|
|
39
|
+
/* @__PURE__ */ r(i, { $justifyContent: "center", $gutter: 24, children: [
|
|
40
|
+
/* @__PURE__ */ e(t, { $renderAs: "ah3-black", children: b }),
|
|
41
|
+
/* @__PURE__ */ e(t, { $renderAs: "ub3", children: "Students Taught" })
|
|
42
|
+
] }),
|
|
43
|
+
c && d && /* @__PURE__ */ r(i, { $justifyContent: "center", $gutter: 24, children: [
|
|
44
|
+
/* @__PURE__ */ e(t, { $renderAs: "ab1-black", children: c }),
|
|
45
|
+
/* @__PURE__ */ r(t, { $renderAs: "ub3", children: [
|
|
46
|
+
"In ",
|
|
47
|
+
d
|
|
48
|
+
] })
|
|
49
|
+
] }),
|
|
50
|
+
/* @__PURE__ */ r(i, { $justifyContent: "center", $gutter: 24, children: [
|
|
51
|
+
/* @__PURE__ */ r(t, { $renderAs: "ab1-black", children: [
|
|
52
|
+
"Teaching ",
|
|
53
|
+
x,
|
|
54
|
+
" kids in"
|
|
55
|
+
] }),
|
|
56
|
+
/* @__PURE__ */ e(s, { height: 12 }),
|
|
57
|
+
/* @__PURE__ */ e(h, { $flexDirection: "row", $flexGap: 16, $flexWrap: !0, children: o && o.length > 0 && o.map((C) => {
|
|
58
|
+
const y = _.find((S) => S.name === C), { flag_icon: A = "", label: w, name: G } = y || {};
|
|
59
|
+
return /* @__PURE__ */ r(h, { $flexDirection: "row", $flexGap: 4, children: [
|
|
60
|
+
/* @__PURE__ */ e(j, { src: A, width: 30, height: 20, withLoader: !1 }),
|
|
61
|
+
/* @__PURE__ */ e(t, { $renderAs: "ab3-black", children: w })
|
|
62
|
+
] }, G);
|
|
63
|
+
}) })
|
|
64
|
+
] })
|
|
65
|
+
] })
|
|
66
|
+
]
|
|
67
|
+
}
|
|
68
|
+
)
|
|
15
69
|
] });
|
|
16
70
|
});
|
|
17
71
|
export {
|
|
18
|
-
|
|
72
|
+
z as default
|
|
19
73
|
};
|
|
20
74
|
//# sourceMappingURL=teacher-intro.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"teacher-intro.js","sources":["../../../../../src/features/trial-session/comps/teacher-intro/teacher-intro.tsx"],"sourcesContent":["import { memo } from 'react';\n\nimport Separator from '../../../ui/separator/separator';\nimport { useTrialSessionContext } from '../../context/use-trial-session-context';\nimport CommunicationSlide from '../communication-slide';\nimport SlideHeader from '../slide-header';\nimport
|
|
1
|
+
{"version":3,"file":"teacher-intro.js","sources":["../../../../../src/features/trial-session/comps/teacher-intro/teacher-intro.tsx"],"sourcesContent":["import { memo, useMemo } from 'react';\n\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 { useTrialSessionContext } from '../../context/use-trial-session-context';\nimport CommunicationSlide from '../communication-slide';\nimport SlideHeader from '../slide-header';\nimport { COUNTRY_FLAGS } from './teacher-intro-constants';\nimport * as Styled from './teacher-intro-styled';\n\nconst TeacherIntro = memo(() => {\n const { slideConfig } = useTrialSessionContext();\n const { renderAVIn, teacher_profile: teacherProfile } = slideConfig || {};\n\n const {\n degree,\n countries,\n lower_grade: lowerGrade,\n higher_grade: higherGrade,\n header_image: headerImage,\n years_of_experience: yearsOfExperience,\n number_of_students_taught: numberOfStudentsTaught,\n } = teacherProfile || {};\n const { degree_name: degreeName, field_of_study: fieldOfStudy } = degree || {};\n\n const countryFlagArray = Object.values(COUNTRY_FLAGS);\n const isHighSchool = higherGrade && parseInt(higherGrade, 10) > 8;\n\n const displayGrade = useMemo(() => {\n return isHighSchool\n ? 'High School'\n : ` ${lowerGrade === 'K' ? '' : 'G'}${lowerGrade} - G${higherGrade}`;\n }, [isHighSchool, higherGrade, lowerGrade]);\n\n if (renderAVIn === 'right') return <CommunicationSlide />;\n\n return (\n <Styled.Container>\n <Separator height={60} />\n <SlideHeader />\n <Styled.ContentWrapper\n $flexDirection=\"row\"\n $width={750}\n $borderColor=\"BLACK_T_87\"\n $background=\"WHITE_3\"\n >\n <Styled.ProfilePicture withLoader src={headerImage} width={350} height={350} />\n <Styled.GridContainer>\n <Styled.GridItem $justifyContent=\"center\" $gutter={24}>\n <Text $renderAs=\"ah3-black\">{yearsOfExperience}</Text>\n <Text $renderAs=\"ub3\">Yrs of Teaching Experience</Text>\n </Styled.GridItem>\n <Styled.GridItem $justifyContent=\"center\" $gutter={24}>\n <Text $renderAs=\"ah3-black\">{numberOfStudentsTaught}</Text>\n <Text $renderAs=\"ub3\">Students Taught</Text>\n </Styled.GridItem>\n {degreeName && fieldOfStudy && (\n <Styled.GridItem $justifyContent=\"center\" $gutter={24}>\n <Text $renderAs=\"ab1-black\">{degreeName}</Text>\n <Text $renderAs=\"ub3\">In {fieldOfStudy}</Text>\n </Styled.GridItem>\n )}\n <Styled.GridItem $justifyContent=\"center\" $gutter={24}>\n <Text $renderAs=\"ab1-black\">Teaching {displayGrade} kids in</Text>\n <Separator height={12} />\n <FlexView $flexDirection=\"row\" $flexGap={16} $flexWrap>\n {countries &&\n countries.length > 0 &&\n countries.map(country => {\n const countryFlag = countryFlagArray.find(item => item.name === country);\n const { flag_icon: flagIcon = '', label, name } = countryFlag || {};\n\n return (\n <FlexView key={name} $flexDirection=\"row\" $flexGap={4}>\n <Image src={flagIcon} width={30} height={20} withLoader={false} />\n <Text $renderAs=\"ab3-black\">{label}</Text>\n </FlexView>\n );\n })}\n </FlexView>\n </Styled.GridItem>\n </Styled.GridContainer>\n </Styled.ContentWrapper>\n </Styled.Container>\n );\n});\n\nexport default TeacherIntro;\n"],"names":["TeacherIntro","memo","slideConfig","useTrialSessionContext","renderAVIn","teacherProfile","degree","countries","lowerGrade","higherGrade","headerImage","yearsOfExperience","numberOfStudentsTaught","degreeName","fieldOfStudy","countryFlagArray","COUNTRY_FLAGS","isHighSchool","displayGrade","useMemo","jsx","CommunicationSlide","jsxs","Styled.Container","Separator","SlideHeader","Styled.ContentWrapper","Styled.ProfilePicture","Styled.GridContainer","Styled.GridItem","Text","FlexView","country","countryFlag","item","flagIcon","label","name","Image"],"mappings":"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"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { jsx as r, jsxs as
|
|
1
|
+
import { jsx as r, jsxs as l } from "react/jsx-runtime";
|
|
2
2
|
import { useTheme as g } from "styled-components";
|
|
3
3
|
import { Container as x, Wrapper as z, InputWrapper as f, Error as L, HelperText as y, SiblingWrapper as R, Label as E } from "./base-input-styled.js";
|
|
4
|
-
const
|
|
4
|
+
const k = (h) => {
|
|
5
5
|
const {
|
|
6
|
-
label:
|
|
7
|
-
stickyLabel:
|
|
6
|
+
label: a,
|
|
7
|
+
stickyLabel: $,
|
|
8
8
|
renderAs: e,
|
|
9
9
|
width: b,
|
|
10
10
|
widthX: c,
|
|
@@ -19,8 +19,8 @@ const H = ($) => {
|
|
|
19
19
|
shape: t,
|
|
20
20
|
isTransparent: p = !1,
|
|
21
21
|
helperText: o
|
|
22
|
-
} =
|
|
23
|
-
return /* @__PURE__ */ r(x, { $width: b, $widthX: c, $size: s, $willShowMessage: u, children: /* @__PURE__ */
|
|
22
|
+
} = h, { input: T } = g();
|
|
23
|
+
return /* @__PURE__ */ r(x, { $width: b, $widthX: c, $size: s, $willShowMessage: u, children: /* @__PURE__ */ l(
|
|
24
24
|
z,
|
|
25
25
|
{
|
|
26
26
|
$renderAs: e,
|
|
@@ -29,7 +29,7 @@ const H = ($) => {
|
|
|
29
29
|
$shape: t,
|
|
30
30
|
$isTransparent: p,
|
|
31
31
|
children: [
|
|
32
|
-
/* @__PURE__ */
|
|
32
|
+
/* @__PURE__ */ l(f, { children: [
|
|
33
33
|
w,
|
|
34
34
|
n && /* @__PURE__ */ r(L, { $renderAs: "body3", $inputRenderAs: e, children: n }),
|
|
35
35
|
o && !n && /* @__PURE__ */ r(y, { $renderAs: "ub3", $inputRenderAs: e, children: o })
|
|
@@ -44,18 +44,18 @@ const H = ($) => {
|
|
|
44
44
|
children: d
|
|
45
45
|
}
|
|
46
46
|
) : void 0,
|
|
47
|
-
|
|
47
|
+
a && t !== "curved" && /* @__PURE__ */ l(
|
|
48
48
|
E,
|
|
49
49
|
{
|
|
50
50
|
$renderAs: T.sizes[s].labelTextVariant,
|
|
51
51
|
$inputRenderAs: e,
|
|
52
52
|
$size: s,
|
|
53
|
-
$stickyLabel:
|
|
53
|
+
$stickyLabel: $,
|
|
54
54
|
$disabled: i,
|
|
55
55
|
$shape: t,
|
|
56
56
|
$isTransparent: p,
|
|
57
57
|
children: [
|
|
58
|
-
|
|
58
|
+
a,
|
|
59
59
|
A && /* @__PURE__ */ r("span", { children: "*" })
|
|
60
60
|
]
|
|
61
61
|
}
|
|
@@ -63,7 +63,7 @@ const H = ($) => {
|
|
|
63
63
|
]
|
|
64
64
|
}
|
|
65
65
|
) });
|
|
66
|
-
}
|
|
66
|
+
};
|
|
67
67
|
export {
|
|
68
68
|
k as default
|
|
69
69
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-input.js","sources":["../../../../../src/features/ui/inputs/base-input/base-input.tsx"],"sourcesContent":["import type { IBaseInputProps } from './base-input-types';\n\nimport React from 'react';\nimport { useTheme } from 'styled-components';\n\nimport {\n Container,\n Error,\n InputWrapper,\n Label,\n SiblingWrapper,\n Wrapper,\n HelperText,\n} from './base-input-styled';\n\nconst BaseInput: React.FC<IBaseInputProps> = props => {\n const {\n label,\n stickyLabel,\n renderAs,\n width,\n widthX,\n disabled,\n willShowMessage,\n inputElement,\n siblingElement,\n siblingPosition,\n size,\n errorMessage,\n mandatory,\n shape,\n isTransparent = false,\n helperText,\n } = props;\n const { input } = useTheme();\n const showLabel = label && shape !== 'curved';\n const showHelperText = helperText && !errorMessage;\n\n return (\n <Container $width={width} $widthX={widthX} $size={size} $willShowMessage={willShowMessage}>\n <Wrapper\n $renderAs={renderAs}\n $size={size}\n $disabled={disabled}\n $shape={shape}\n $isTransparent={isTransparent}\n >\n <InputWrapper>\n {inputElement}\n {errorMessage && (\n <Error $renderAs=\"body3\" $inputRenderAs={renderAs}>\n {errorMessage}\n </Error>\n )}\n {showHelperText && (\n <HelperText $renderAs=\"ub3\" $inputRenderAs={renderAs}>\n {helperText}\n </HelperText>\n )}\n </InputWrapper>\n {siblingElement ? (\n <SiblingWrapper\n $inputRenderAs={renderAs}\n $disabled={disabled}\n $size={size}\n $siblingPosition={siblingPosition ?? 'right'}\n >\n {siblingElement}\n </SiblingWrapper>\n ) : undefined}\n {showLabel && (\n <Label\n $renderAs={input.sizes[size].labelTextVariant}\n $inputRenderAs={renderAs}\n $size={size}\n $stickyLabel={stickyLabel}\n $disabled={disabled}\n $shape={shape}\n $isTransparent={isTransparent}\n >\n {label}\n {mandatory && <span>*</span>}\n </Label>\n )}\n </Wrapper>\n </Container>\n );\n};\n\nexport default BaseInput;\n"],"names":["BaseInput","props","label","stickyLabel","renderAs","width","widthX","disabled","willShowMessage","inputElement","siblingElement","siblingPosition","size","errorMessage","mandatory","shape","isTransparent","helperText","input","useTheme","jsx","Container","jsxs","Wrapper","InputWrapper","Error","HelperText","SiblingWrapper","Label"
|
|
1
|
+
{"version":3,"file":"base-input.js","sources":["../../../../../src/features/ui/inputs/base-input/base-input.tsx"],"sourcesContent":["import type { IBaseInputProps } from './base-input-types';\n\nimport React from 'react';\nimport { useTheme } from 'styled-components';\n\nimport {\n Container,\n Error,\n InputWrapper,\n Label,\n SiblingWrapper,\n Wrapper,\n HelperText,\n} from './base-input-styled';\n\nconst BaseInput: React.FC<IBaseInputProps> = props => {\n const {\n label,\n stickyLabel,\n renderAs,\n width,\n widthX,\n disabled,\n willShowMessage,\n inputElement,\n siblingElement,\n siblingPosition,\n size,\n errorMessage,\n mandatory,\n shape,\n isTransparent = false,\n helperText,\n } = props;\n const { input } = useTheme();\n const showLabel = label && shape !== 'curved';\n const showHelperText = helperText && !errorMessage;\n\n return (\n <Container $width={width} $widthX={widthX} $size={size} $willShowMessage={willShowMessage}>\n <Wrapper\n $renderAs={renderAs}\n $size={size}\n $disabled={disabled}\n $shape={shape}\n $isTransparent={isTransparent}\n >\n <InputWrapper>\n {inputElement}\n {errorMessage && (\n <Error $renderAs=\"body3\" $inputRenderAs={renderAs}>\n {errorMessage}\n </Error>\n )}\n {showHelperText && (\n <HelperText $renderAs=\"ub3\" $inputRenderAs={renderAs}>\n {helperText}\n </HelperText>\n )}\n </InputWrapper>\n {siblingElement ? (\n <SiblingWrapper\n $inputRenderAs={renderAs}\n $disabled={disabled}\n $size={size}\n $siblingPosition={siblingPosition ?? 'right'}\n >\n {siblingElement}\n </SiblingWrapper>\n ) : undefined}\n {showLabel && (\n <Label\n $renderAs={input.sizes[size].labelTextVariant}\n $inputRenderAs={renderAs}\n $size={size}\n $stickyLabel={stickyLabel}\n $disabled={disabled}\n $shape={shape}\n $isTransparent={isTransparent}\n >\n {label}\n {mandatory && <span>*</span>}\n </Label>\n )}\n </Wrapper>\n </Container>\n );\n};\n\nexport default BaseInput;\n"],"names":["BaseInput","props","label","stickyLabel","renderAs","width","widthX","disabled","willShowMessage","inputElement","siblingElement","siblingPosition","size","errorMessage","mandatory","shape","isTransparent","helperText","input","useTheme","jsx","Container","jsxs","Wrapper","InputWrapper","Error","HelperText","SiblingWrapper","Label"],"mappings":";;;AAeA,MAAMA,IAAuC,CAASC,MAAA;AAC9C,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,YAAAC;AAAA,EACE,IAAAhB,GACE,EAAE,OAAAiB,MAAUC;AAKhB,SAAA,gBAAAC,EAACC,KAAU,QAAQhB,GAAO,SAASC,GAAQ,OAAOM,GAAM,kBAAkBJ,GACxE,UAAA,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWnB;AAAA,MACX,OAAOQ;AAAA,MACP,WAAWL;AAAA,MACX,QAAQQ;AAAA,MACR,gBAAgBC;AAAA,MAEhB,UAAA;AAAA,QAAA,gBAAAM,EAACE,GACE,EAAA,UAAA;AAAA,UAAAf;AAAA,UACAI,KACE,gBAAAO,EAAAK,GAAA,EAAM,WAAU,SAAQ,gBAAgBrB,GACtC,UACHS,GAAA;AAAA,UAhBaI,KAAc,CAACJ,KAmB3B,gBAAAO,EAAAM,GAAA,EAAW,WAAU,OAAM,gBAAgBtB,GACzC,UACHa,GAAA;AAAA,QAAA,GAEJ;AAAA,QACCP,IACC,gBAAAU;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,gBAAgBvB;AAAA,YAChB,WAAWG;AAAA,YACX,OAAOK;AAAA,YACP,kBAAkBD,KAAmB;AAAA,YAEpC,UAAAD;AAAA,UAAA;AAAA,QAED,IAAA;AAAA,QAlCQR,KAASa,MAAU,YAoC7B,gBAAAO;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,WAAWV,EAAM,MAAMN,CAAI,EAAE;AAAA,YAC7B,gBAAgBR;AAAA,YAChB,OAAOQ;AAAA,YACP,cAAcT;AAAA,YACd,WAAWI;AAAA,YACX,QAAQQ;AAAA,YACR,gBAAgBC;AAAA,YAEf,UAAA;AAAA,cAAAd;AAAA,cACAY,KAAc,gBAAAM,EAAA,QAAA,EAAK,UAAC,IAAA,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACvB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN,EAAA,CAAA;AAEJ;"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef as I } from "react";
|
|
3
3
|
import T from "../base-input/base-input.js";
|
|
4
|
-
import { Input as
|
|
5
|
-
const i = "regular",
|
|
4
|
+
import { Input as b } from "./text-input-styled.js";
|
|
5
|
+
const i = "regular", g = I((o, p) => {
|
|
6
6
|
const {
|
|
7
7
|
type: e,
|
|
8
|
-
label:
|
|
8
|
+
label: l,
|
|
9
9
|
value: t,
|
|
10
10
|
renderAs: r,
|
|
11
11
|
width: m,
|
|
@@ -14,44 +14,43 @@ const i = "regular", $ = I((o, l) => {
|
|
|
14
14
|
willShowMessage: d,
|
|
15
15
|
siblingElement: f,
|
|
16
16
|
errorMessage: c,
|
|
17
|
-
shape:
|
|
18
|
-
isTransparent:
|
|
19
|
-
helperText:
|
|
20
|
-
stickyLabel: w,
|
|
17
|
+
shape: h,
|
|
18
|
+
isTransparent: n,
|
|
19
|
+
helperText: w,
|
|
21
20
|
...x
|
|
22
21
|
} = o;
|
|
23
|
-
return /* @__PURE__ */
|
|
22
|
+
return /* @__PURE__ */ a(
|
|
24
23
|
T,
|
|
25
24
|
{
|
|
26
25
|
renderAs: r,
|
|
27
|
-
label:
|
|
28
|
-
stickyLabel: !!t || e === "date"
|
|
26
|
+
label: l,
|
|
27
|
+
stickyLabel: !!t || e === "date",
|
|
29
28
|
width: m,
|
|
30
29
|
widthX: u,
|
|
31
30
|
disabled: s,
|
|
32
31
|
willShowMessage: d,
|
|
33
32
|
size: i,
|
|
34
|
-
shape:
|
|
33
|
+
shape: h,
|
|
35
34
|
errorMessage: c,
|
|
36
|
-
helperText:
|
|
37
|
-
isTransparent:
|
|
38
|
-
inputElement: /* @__PURE__ */
|
|
39
|
-
|
|
35
|
+
helperText: w,
|
|
36
|
+
isTransparent: n,
|
|
37
|
+
inputElement: /* @__PURE__ */ a(
|
|
38
|
+
b,
|
|
40
39
|
{
|
|
41
|
-
ref:
|
|
40
|
+
ref: p,
|
|
42
41
|
type: e,
|
|
43
42
|
value: t ?? "",
|
|
44
43
|
$renderAs: r,
|
|
45
44
|
$size: i,
|
|
46
45
|
disabled: s,
|
|
47
|
-
$isTransparent:
|
|
46
|
+
$isTransparent: n,
|
|
48
47
|
...x
|
|
49
48
|
}
|
|
50
49
|
),
|
|
51
50
|
siblingElement: f
|
|
52
51
|
}
|
|
53
52
|
);
|
|
54
|
-
}), z =
|
|
53
|
+
}), z = g;
|
|
55
54
|
export {
|
|
56
55
|
z as default
|
|
57
56
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-input.js","sources":["../../../../../src/features/ui/inputs/text-input/text-input.tsx"],"sourcesContent":["import type { ITextInputProps } from './text-input-types';\nimport type { Ref } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport BaseInput from '../base-input/base-input';\nimport * as Styled from './text-input-styled';\n\nconst SIZE = 'regular';\n\nconst TextInput = forwardRef((props: ITextInputProps, ref: Ref<HTMLInputElement>) => {\n const {\n type,\n label,\n value,\n renderAs,\n width,\n widthX,\n disabled,\n willShowMessage,\n siblingElement,\n errorMessage,\n shape,\n isTransparent,\n helperText,\n
|
|
1
|
+
{"version":3,"file":"text-input.js","sources":["../../../../../src/features/ui/inputs/text-input/text-input.tsx"],"sourcesContent":["import type { ITextInputProps } from './text-input-types';\nimport type { Ref } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport BaseInput from '../base-input/base-input';\nimport * as Styled from './text-input-styled';\n\nconst SIZE = 'regular';\n\nconst TextInput = forwardRef((props: ITextInputProps, ref: Ref<HTMLInputElement>) => {\n const {\n type,\n label,\n value,\n renderAs,\n width,\n widthX,\n disabled,\n willShowMessage,\n siblingElement,\n errorMessage,\n shape,\n isTransparent,\n helperText,\n ...rest\n } = props;\n\n return (\n <BaseInput\n renderAs={renderAs}\n label={label}\n stickyLabel={!!value || type === 'date'}\n width={width}\n widthX={widthX}\n disabled={disabled}\n willShowMessage={willShowMessage}\n size={SIZE}\n shape={shape}\n errorMessage={errorMessage}\n helperText={helperText}\n isTransparent={isTransparent}\n inputElement={\n <Styled.Input\n ref={ref}\n type={type}\n value={value ?? ''}\n $renderAs={renderAs}\n $size={SIZE}\n disabled={disabled}\n $isTransparent={isTransparent}\n {...rest}\n />\n }\n siblingElement={siblingElement}\n />\n );\n});\n\nexport default TextInput;\n"],"names":["SIZE","TextInput","forwardRef","props","ref","type","label","value","renderAs","width","widthX","disabled","willShowMessage","siblingElement","errorMessage","shape","isTransparent","helperText","rest","jsx","BaseInput","Styled.Input","TextInput$1"],"mappings":";;;;AAQA,MAAMA,IAAO,WAEPC,IAAYC,EAAW,CAACC,GAAwBC,MAA+B;AAC7E,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAf;AAGF,SAAA,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAAZ;AAAA,MACA,OAAAF;AAAA,MACA,aAAa,CAAC,CAACC,KAASF,MAAS;AAAA,MACjC,OAAAI;AAAA,MACA,QAAAC;AAAA,MACA,UAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,MAAMZ;AAAA,MACN,OAAAe;AAAA,MACA,cAAAD;AAAA,MACA,YAAAG;AAAA,MACA,eAAAD;AAAA,MACA,cACE,gBAAAG;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,KAAAjB;AAAA,UACA,MAAAC;AAAA,UACA,OAAOE,KAAS;AAAA,UAChB,WAAWC;AAAA,UACX,OAAOR;AAAA,UACP,UAAAW;AAAA,UACA,gBAAgBK;AAAA,UACf,GAAGE;AAAA,QAAA;AAAA,MACN;AAAA,MAEF,gBAAAL;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC,GAEDS,IAAerB;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import a from "styled-components";
|
|
2
|
-
const
|
|
2
|
+
const s = a.div(
|
|
3
3
|
({ theme: { colors: t, zIndex: o }, $isClosing: e }) => `
|
|
4
4
|
position: fixed;
|
|
5
5
|
top: 0;
|
|
@@ -82,7 +82,7 @@ const p = a.div(
|
|
|
82
82
|
max-height: 100vh;
|
|
83
83
|
}
|
|
84
84
|
}`
|
|
85
|
-
),
|
|
85
|
+
), d = a.div(
|
|
86
86
|
({ theme: { colors: t }, $modalWidth: o }) => `
|
|
87
87
|
position: absolute;
|
|
88
88
|
top: -56px;
|
|
@@ -100,13 +100,13 @@ const p = a.div(
|
|
|
100
100
|
color: ${t.BLACK_1};
|
|
101
101
|
}
|
|
102
102
|
`
|
|
103
|
-
),
|
|
103
|
+
), m = a.div`
|
|
104
104
|
display: flex;
|
|
105
105
|
align-items: center;
|
|
106
106
|
justify-content: center;
|
|
107
107
|
height: 100vh;
|
|
108
108
|
width: 100%;
|
|
109
|
-
`, i = 720, r = 800, n = 500,
|
|
109
|
+
`, i = 720, r = 800, n = 500, h = a.div(
|
|
110
110
|
({ $isClosing: t }) => `
|
|
111
111
|
position: absolute;
|
|
112
112
|
width: ${i}px;
|
|
@@ -150,47 +150,13 @@ const p = a.div(
|
|
|
150
150
|
}
|
|
151
151
|
}
|
|
152
152
|
`
|
|
153
|
-
), h = a.div(
|
|
154
|
-
({ $isClosing: t }) => `
|
|
155
|
-
width: 100%;
|
|
156
|
-
height: max-content;
|
|
157
|
-
overflow: auto;
|
|
158
|
-
position: fixed;
|
|
159
|
-
left: 0;
|
|
160
|
-
right: 0;
|
|
161
|
-
bottom: 0;
|
|
162
|
-
animation: ${t ? "slideOut" : "slideIn"} 0.3s forwards;
|
|
163
|
-
|
|
164
|
-
@keyframes slideIn {
|
|
165
|
-
from {
|
|
166
|
-
transform: translateY(100%);
|
|
167
|
-
opacity: 0;
|
|
168
|
-
}
|
|
169
|
-
to {
|
|
170
|
-
transform: translateY(0%);
|
|
171
|
-
opacity: 1;
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
@keyframes slideOut {
|
|
176
|
-
from {
|
|
177
|
-
transform: translateY(0%);
|
|
178
|
-
opacity: 1;
|
|
179
|
-
}
|
|
180
|
-
to {
|
|
181
|
-
transform: translateY(100%);
|
|
182
|
-
opacity: 0;
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
`
|
|
186
153
|
);
|
|
187
154
|
export {
|
|
188
155
|
l as BaseModal,
|
|
189
156
|
c as BaseModalContent,
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
f as SpotlightModal
|
|
157
|
+
d as CloseButtonContainer,
|
|
158
|
+
s as ModalContainer,
|
|
159
|
+
m as ModalLoaderWrapper,
|
|
160
|
+
h as SpotlightModal
|
|
195
161
|
};
|
|
196
162
|
//# sourceMappingURL=modal-styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal-styled.js","sources":["../../../../src/features/ui/modals/modal-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nconst ModalContainer = styled.div<{ $isClosing?: boolean }>(\n ({ theme: { colors, zIndex }, $isClosing }) => `\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ${colors.BLACK_T_60};\n backdrop-filter: blur(40px);\n display: flex;\n animation: ${$isClosing ? 'backdropFadeOut' : 'backdropFadeIn'} 0.2s ease-out forwards;\n z-index: ${zIndex.MODAL};\n\n @keyframes backdropFadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n \n @keyframes backdropFadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n`,\n);\n\n/**\n * Base modal container with customizable width and animation state\n */\nconst BaseModal = styled.div<{\n $isClosing?: boolean;\n $width: string;\n}>(\n ({ theme: { colors }, $isClosing, $width }) => `\n position: relative;\n align-self: center;\n margin: 0 auto;\n width: ${$width};\n background-color: ${colors.WHITE_1};\n border: 1px solid ${colors.BLACK_1};\n transform-origin: center center;\n animation: ${\n $isClosing ? 'modalDisappear' : 'modalAppear'\n } 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;\n box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);\n \n /* Responsive behavior for smaller screens */\n @media (max-width: calc(${$width} + 80px)) {\n width: 100%;\n max-width: 100%;\n height: 100%;\n max-height: 100%;\n border: none;\n }\n \n @keyframes modalAppear {\n 0% {\n opacity: 0;\n transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);\n }\n 100% {\n opacity: 1;\n transform: perspective(1200px) translateZ(0) translateY(0) scale(1);\n }\n }\n \n @keyframes modalDisappear {\n 0% {\n opacity: 1;\n transform: perspective(1200px) translateZ(0) translateY(0) scale(1);\n }\n 100% {\n opacity: 0;\n transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);\n }\n }\n`,\n);\n\n/**\n * Scrollable content container inside the modal\n */\nconst BaseModalContent = styled.div<{ $modalWidth: string }>(\n ({ $modalWidth }) => `\n max-height: calc(100vh - 142px);\n overflow-y: auto;\n\n @media (max-width: calc(${$modalWidth} + 80px)) {\n max-height: 100vh;\n }\n}`,\n);\n\n/**\n * Container for the close button with responsive positioning\n */\nconst CloseButtonContainer = styled.div<{ $modalWidth: string }>(\n ({ theme: { colors }, $modalWidth }) => `\n position: absolute;\n top: -56px;\n right: -40px;\n color: ${colors.WHITE_1};\n transition: all 0.2s ease;\n \n &:hover {\n transform: scale(1.05);\n }\n\n @media (max-width: calc(${$modalWidth} + 80px)) {\n top: 16px;\n right: 16px;\n color: ${colors.BLACK_1};\n }\n`,\n);\n\nconst ModalLoaderWrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100vh;\n width: 100%;\n`;\n\nconst spotlightWidth = 720;\nconst spotlightAnimationStartDuration = 800;\nconst spotlightAnimationEndDuration = 500;\n\nconst SpotlightModal = styled.div<{\n $isClosing?: boolean;\n}>(\n ({ $isClosing }) => `\n position: absolute;\n width: ${spotlightWidth}px;\n height: 100%;\n left: 50%;\n margin-left: ${-(spotlightWidth / 2)}px;\n clip-path: polygon(calc(50% - 100px) 0, calc(50% + 100px) 0, 100% 100%, 0 100%);\n background: linear-gradient(\n 180deg,\n rgba(0, 0, 0, 1) 0%,\n rgba(0, 0, 0, 0) 100%\n );\n animation: openSpotlight;\n animation-duration: ${spotlightAnimationStartDuration}ms;\n animation-timing-function: linear;\n animation-fill-mode: forwards;\n opacity: 0;\n ${\n $isClosing\n ? `\n animation: closeSpotlight;\n animation-duration: ${spotlightAnimationEndDuration}ms;\n animation-timing-function: linear;\n animation-fill-mode: forwards;\n opacity: 1;\n `\n : ''\n }\n\n @keyframes openSpotlight {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes closeSpotlight {\n from {\n transform: rotateY(0);\n }\n to {\n transform: rotateY(90deg);\n }\n }\n`,\n);\n\
|
|
1
|
+
{"version":3,"file":"modal-styled.js","sources":["../../../../src/features/ui/modals/modal-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nconst ModalContainer = styled.div<{ $isClosing?: boolean }>(\n ({ theme: { colors, zIndex }, $isClosing }) => `\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ${colors.BLACK_T_60};\n backdrop-filter: blur(40px);\n display: flex;\n animation: ${$isClosing ? 'backdropFadeOut' : 'backdropFadeIn'} 0.2s ease-out forwards;\n z-index: ${zIndex.MODAL};\n\n @keyframes backdropFadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n \n @keyframes backdropFadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n`,\n);\n\n/**\n * Base modal container with customizable width and animation state\n */\nconst BaseModal = styled.div<{\n $isClosing?: boolean;\n $width: string;\n}>(\n ({ theme: { colors }, $isClosing, $width }) => `\n position: relative;\n align-self: center;\n margin: 0 auto;\n width: ${$width};\n background-color: ${colors.WHITE_1};\n border: 1px solid ${colors.BLACK_1};\n transform-origin: center center;\n animation: ${\n $isClosing ? 'modalDisappear' : 'modalAppear'\n } 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;\n box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);\n \n /* Responsive behavior for smaller screens */\n @media (max-width: calc(${$width} + 80px)) {\n width: 100%;\n max-width: 100%;\n height: 100%;\n max-height: 100%;\n border: none;\n }\n \n @keyframes modalAppear {\n 0% {\n opacity: 0;\n transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);\n }\n 100% {\n opacity: 1;\n transform: perspective(1200px) translateZ(0) translateY(0) scale(1);\n }\n }\n \n @keyframes modalDisappear {\n 0% {\n opacity: 1;\n transform: perspective(1200px) translateZ(0) translateY(0) scale(1);\n }\n 100% {\n opacity: 0;\n transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);\n }\n }\n`,\n);\n\n/**\n * Scrollable content container inside the modal\n */\nconst BaseModalContent = styled.div<{ $modalWidth: string }>(\n ({ $modalWidth }) => `\n max-height: calc(100vh - 142px);\n overflow-y: auto;\n\n @media (max-width: calc(${$modalWidth} + 80px)) {\n max-height: 100vh;\n }\n}`,\n);\n\n/**\n * Container for the close button with responsive positioning\n */\nconst CloseButtonContainer = styled.div<{ $modalWidth: string }>(\n ({ theme: { colors }, $modalWidth }) => `\n position: absolute;\n top: -56px;\n right: -40px;\n color: ${colors.WHITE_1};\n transition: all 0.2s ease;\n \n &:hover {\n transform: scale(1.05);\n }\n\n @media (max-width: calc(${$modalWidth} + 80px)) {\n top: 16px;\n right: 16px;\n color: ${colors.BLACK_1};\n }\n`,\n);\n\nconst ModalLoaderWrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100vh;\n width: 100%;\n`;\n\nconst spotlightWidth = 720;\nconst spotlightAnimationStartDuration = 800;\nconst spotlightAnimationEndDuration = 500;\n\nconst SpotlightModal = styled.div<{\n $isClosing?: boolean;\n}>(\n ({ $isClosing }) => `\n position: absolute;\n width: ${spotlightWidth}px;\n height: 100%;\n left: 50%;\n margin-left: ${-(spotlightWidth / 2)}px;\n clip-path: polygon(calc(50% - 100px) 0, calc(50% + 100px) 0, 100% 100%, 0 100%);\n background: linear-gradient(\n 180deg,\n rgba(0, 0, 0, 1) 0%,\n rgba(0, 0, 0, 0) 100%\n );\n animation: openSpotlight;\n animation-duration: ${spotlightAnimationStartDuration}ms;\n animation-timing-function: linear;\n animation-fill-mode: forwards;\n opacity: 0;\n ${\n $isClosing\n ? `\n animation: closeSpotlight;\n animation-duration: ${spotlightAnimationEndDuration}ms;\n animation-timing-function: linear;\n animation-fill-mode: forwards;\n opacity: 1;\n `\n : ''\n }\n\n @keyframes openSpotlight {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes closeSpotlight {\n from {\n transform: rotateY(0);\n }\n to {\n transform: rotateY(90deg);\n }\n }\n`,\n);\n\nexport {\n ModalContainer,\n BaseModal,\n BaseModalContent,\n CloseButtonContainer,\n SpotlightModal,\n ModalLoaderWrapper,\n};\n"],"names":["ModalContainer","styled","colors","zIndex","$isClosing","BaseModal","$width","BaseModalContent","$modalWidth","CloseButtonContainer","ModalLoaderWrapper","spotlightWidth","spotlightAnimationStartDuration","spotlightAnimationEndDuration","SpotlightModal"],"mappings":";AAEA,MAAMA,IAAiBC,EAAO;AAAA,EAC5B,CAAC,EAAE,OAAO,EAAE,QAAAC,GAAQ,QAAAC,EAAO,GAAG,YAAAC,QAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAM3BF,EAAO,UAAU;AAAA;AAAA;AAAA,eAGxBE,IAAa,oBAAoB,gBAAgB;AAAA,aACnDD,EAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBzB,GAKME,IAAYJ,EAAO;AAAA,EAIvB,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAU,GAAA,YAAAE,GAAY,QAAAE,QAAa;AAAA;AAAA;AAAA;AAAA,WAItCA,CAAM;AAAA,sBACKJ,EAAO,OAAO;AAAA,sBACdA,EAAO,OAAO;AAAA;AAAA,eAGhCE,IAAa,mBAAmB,aAClC;AAAA;AAAA;AAAA;AAAA,4BAI0BE,CAAM;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;AA8BlC,GAKMC,IAAmBN,EAAO;AAAA,EAC9B,CAAC,EAAE,aAAAO,EAAA,MAAkB;AAAA;AAAA;AAAA;AAAA,4BAIKA,CAAW;AAAA;AAAA;AAAA;AAIvC,GAKMC,IAAuBR,EAAO;AAAA,EAClC,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAO,GAAG,aAAAM,EAAkB,MAAA;AAAA;AAAA;AAAA;AAAA,WAI/BN,EAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAOGM,CAAW;AAAA;AAAA;AAAA,aAG1BN,EAAO,OAAO;AAAA;AAAA;AAG3B,GAEMQ,IAAqBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ5BU,IAAiB,KACjBC,IAAkC,KAClCC,IAAgC,KAEhCC,IAAiBb,EAAO;AAAA,EAG5B,CAAC,EAAE,YAAAG,EAAA,MAAiB;AAAA;AAAA,WAEXO,CAAc;AAAA;AAAA;AAAA,iBAGR,EAAEA,IAAiB,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQdC,CAA+B;AAAA;AAAA;AAAA;AAAA,IAKnDR,IACI;AAAA;AAAA,4BAEoBS,CAA6B;AAAA;AAAA;AAAA;AAAA,QAKjD,EACN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBF;"}
|
|
@@ -1,55 +1,45 @@
|
|
|
1
|
-
import { jsx as r, jsxs as
|
|
2
|
-
import { captureException as
|
|
3
|
-
import { memo as
|
|
4
|
-
import { ErrorBoundary as
|
|
5
|
-
import
|
|
1
|
+
import { jsx as r, jsxs as t } from "react/jsx-runtime";
|
|
2
|
+
import { captureException as b } from "@sentry/browser";
|
|
3
|
+
import { memo as g, useCallback as k, Suspense as a } from "react";
|
|
4
|
+
import { ErrorBoundary as n } from "react-error-boundary";
|
|
5
|
+
import $ from "../../../assets/line-icons/icons/cross.js";
|
|
6
6
|
import h from "../error/error.js";
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import c from "
|
|
10
|
-
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
u(t);
|
|
14
|
-
}, []), k = g((t) => {
|
|
15
|
-
t.stopPropagation();
|
|
7
|
+
import E from "../buttons/clickable/clickable.js";
|
|
8
|
+
import d from "../loader/app-loader/app-loader.js";
|
|
9
|
+
import { ModalContainer as c, ModalLoaderWrapper as s, SpotlightModal as M, BaseModal as x, CloseButtonContainer as v, BaseModalContent as B } from "./modal-styled.js";
|
|
10
|
+
const I = g(({ modal: m, isClosing: o = !1, onClose: p }) => {
|
|
11
|
+
const { renderAs: f, element: i, modalWidth: e, isDismissable: C } = m, l = k((u) => {
|
|
12
|
+
b(u);
|
|
16
13
|
}, []);
|
|
17
|
-
return
|
|
18
|
-
|
|
14
|
+
return f === "spotlight" ? /* @__PURE__ */ r(c, { $isClosing: o, children: /* @__PURE__ */ r(
|
|
15
|
+
n,
|
|
19
16
|
{
|
|
20
|
-
fallback: /* @__PURE__ */ r(
|
|
21
|
-
onError:
|
|
22
|
-
children: /* @__PURE__ */
|
|
23
|
-
|
|
24
|
-
) }) }) : s === "spotlight" ? /* @__PURE__ */ r(d, { $isClosing: o, children: /* @__PURE__ */ r(
|
|
25
|
-
a,
|
|
26
|
-
{
|
|
27
|
-
fallback: /* @__PURE__ */ r(C, { children: /* @__PURE__ */ r(h, { height: "100vh" }) }),
|
|
28
|
-
onError: i,
|
|
29
|
-
children: /* @__PURE__ */ f(
|
|
30
|
-
n,
|
|
17
|
+
fallback: /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r(h, { height: "100vh" }) }),
|
|
18
|
+
onError: l,
|
|
19
|
+
children: /* @__PURE__ */ t(
|
|
20
|
+
a,
|
|
31
21
|
{
|
|
32
|
-
fallback: /* @__PURE__ */ r(
|
|
22
|
+
fallback: /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r(d, { height: "100vh" }) }),
|
|
33
23
|
children: [
|
|
34
|
-
/* @__PURE__ */ r(
|
|
35
|
-
|
|
24
|
+
/* @__PURE__ */ r(M, { $isClosing: o }),
|
|
25
|
+
i
|
|
36
26
|
]
|
|
37
27
|
}
|
|
38
28
|
)
|
|
39
29
|
}
|
|
40
|
-
) }) : /* @__PURE__ */ r(
|
|
41
|
-
|
|
42
|
-
/* @__PURE__ */ r(
|
|
43
|
-
|
|
30
|
+
) }) : /* @__PURE__ */ r(c, { $isClosing: o, children: /* @__PURE__ */ t(x, { $isClosing: o, $width: e, children: [
|
|
31
|
+
C !== !1 && /* @__PURE__ */ r(v, { $modalWidth: e, children: /* @__PURE__ */ r(E, { label: "Close", onClick: p, children: /* @__PURE__ */ r($, { width: 40, height: 40 }) }) }),
|
|
32
|
+
/* @__PURE__ */ r(B, { $modalWidth: e, children: /* @__PURE__ */ r(
|
|
33
|
+
n,
|
|
44
34
|
{
|
|
45
35
|
fallback: /* @__PURE__ */ r(h, { height: "50vh", size: "compact" }),
|
|
46
|
-
onError:
|
|
47
|
-
children: /* @__PURE__ */ r(
|
|
36
|
+
onError: l,
|
|
37
|
+
children: /* @__PURE__ */ r(a, { fallback: /* @__PURE__ */ r(d, { height: "50vh" }), children: i })
|
|
48
38
|
}
|
|
49
39
|
) })
|
|
50
40
|
] }) });
|
|
51
41
|
});
|
|
52
42
|
export {
|
|
53
|
-
|
|
43
|
+
I as default
|
|
54
44
|
};
|
|
55
45
|
//# sourceMappingURL=modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","sources":["../../../../src/features/ui/modals/modal.tsx"],"sourcesContent":["import type { IModalProps } from './modal-types';\nimport type { FC } from 'react';\n\nimport { captureException } from '@sentry/browser';\nimport { memo, Suspense, useCallback } from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\n\nimport CrossIcon from '../../../assets/line-icons/icons/cross';\nimport Error from '../../ui/error/error';\nimport Clickable from '../buttons/clickable/clickable';\nimport
|
|
1
|
+
{"version":3,"file":"modal.js","sources":["../../../../src/features/ui/modals/modal.tsx"],"sourcesContent":["import type { IModalProps } from './modal-types';\nimport type { FC } from 'react';\n\nimport { captureException } from '@sentry/browser';\nimport { memo, Suspense, useCallback } from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\n\nimport CrossIcon from '../../../assets/line-icons/icons/cross';\nimport Error from '../../ui/error/error';\nimport Clickable from '../buttons/clickable/clickable';\nimport AppLoader from '../loader/app-loader/app-loader';\nimport * as Styled from './modal-styled';\n\n/**\n * Modal component that renders modal content with close button\n * Handles animation state for entry and exit transitions\n */\nconst Modal: FC<IModalProps> = memo(({ modal, isClosing = false, onClose }) => {\n const { renderAs, element, modalWidth, isDismissable } = modal;\n\n const sentryCaptureException = useCallback((error: Error) => {\n captureException(error);\n }, []);\n\n if (renderAs === 'spotlight') {\n return (\n <Styled.ModalContainer $isClosing={isClosing}>\n <ErrorBoundary\n fallback={\n <Styled.ModalLoaderWrapper>\n <Error height=\"100vh\" />\n </Styled.ModalLoaderWrapper>\n }\n onError={sentryCaptureException}\n >\n <Suspense\n fallback={\n <Styled.ModalLoaderWrapper>\n <AppLoader height=\"100vh\" />\n </Styled.ModalLoaderWrapper>\n }\n >\n <Styled.SpotlightModal $isClosing={isClosing} />\n {element}\n </Suspense>\n </ErrorBoundary>\n </Styled.ModalContainer>\n );\n }\n\n return (\n <Styled.ModalContainer $isClosing={isClosing}>\n <Styled.BaseModal $isClosing={isClosing} $width={modalWidth}>\n {isDismissable !== false && (\n <Styled.CloseButtonContainer $modalWidth={modalWidth}>\n <Clickable label=\"Close\" onClick={onClose}>\n <CrossIcon width={40} height={40} />\n </Clickable>\n </Styled.CloseButtonContainer>\n )}\n <Styled.BaseModalContent $modalWidth={modalWidth}>\n <ErrorBoundary\n fallback={<Error height=\"50vh\" size=\"compact\" />}\n onError={sentryCaptureException}\n >\n <Suspense fallback={<AppLoader height=\"50vh\" />}>{element}</Suspense>\n </ErrorBoundary>\n </Styled.BaseModalContent>\n </Styled.BaseModal>\n </Styled.ModalContainer>\n );\n});\n\nexport default Modal;\n"],"names":["Modal","memo","modal","isClosing","onClose","renderAs","element","modalWidth","isDismissable","sentryCaptureException","useCallback","error","captureException","jsx","Styled.ModalContainer","ErrorBoundary","Styled.ModalLoaderWrapper","Error","jsxs","Suspense","AppLoader","Styled.SpotlightModal","Styled.BaseModal","Styled.CloseButtonContainer","Clickable","CrossIcon","Styled.BaseModalContent"],"mappings":";;;;;;;;;AAiBM,MAAAA,IAAyBC,EAAK,CAAC,EAAE,OAAAC,GAAO,WAAAC,IAAY,IAAO,SAAAC,QAAc;AAC7E,QAAM,EAAE,UAAAC,GAAU,SAAAC,GAAS,YAAAC,GAAY,eAAAC,MAAkBN,GAEnDO,IAAyBC,EAAY,CAACC,MAAiB;AAC3D,IAAAC,EAAiBD,CAAK;AAAA,EACxB,GAAG,CAAE,CAAA;AAEL,SAAIN,MAAa,cAEZ,gBAAAQ,EAAAC,GAAA,EAAsB,YAAYX,GACjC,UAAA,gBAAAU;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,4BACGC,GAAA,EACC,UAAC,gBAAAH,EAAAI,GAAA,EAAM,QAAO,QAAQ,CAAA,GACxB;AAAA,MAEF,SAASR;AAAA,MAET,UAAA,gBAAAS;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,4BACGH,GAAA,EACC,UAAC,gBAAAH,EAAAO,GAAA,EAAU,QAAO,QAAQ,CAAA,GAC5B;AAAA,UAGF,UAAA;AAAA,YAAA,gBAAAP,EAACQ,GAAA,EAAsB,YAAYlB,EAAW,CAAA;AAAA,YAC7CG;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA,IAKD,gBAAAO,EAAAC,GAAA,EAAsB,YAAYX,GACjC,UAAC,gBAAAe,EAAAI,GAAA,EAAiB,YAAYnB,GAAW,QAAQI,GAC9C,UAAA;AAAA,IAAkBC,MAAA,wBAChBe,GAAA,EAA4B,aAAahB,GACxC,4BAACiB,GAAU,EAAA,OAAM,SAAQ,SAASpB,GAChC,4BAACqB,GAAU,EAAA,OAAO,IAAI,QAAQ,IAAI,GACpC,EACF,CAAA;AAAA,IAED,gBAAAZ,EAAAa,GAAA,EAAwB,aAAanB,GACpC,UAAA,gBAAAM;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,UAAW,gBAAAF,EAAAI,GAAA,EAAM,QAAO,QAAO,MAAK,WAAU;AAAA,QAC9C,SAASR;AAAA,QAET,UAAA,gBAAAI,EAACM,KAAS,UAAU,gBAAAN,EAACO,KAAU,QAAO,OAAO,CAAA,GAAK,UAAQd,EAAA,CAAA;AAAA,MAAA;AAAA,IAAA,GAE9D;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,CAAC;"}
|
|
@@ -1,56 +1,54 @@
|
|
|
1
|
-
import { useMemo as
|
|
2
|
-
import
|
|
1
|
+
import { useMemo as C } from "react";
|
|
2
|
+
import F from "styled-components";
|
|
3
3
|
import { EDeviceType as y } from "../theme/constants.js";
|
|
4
|
-
const
|
|
4
|
+
const $ = F.div(
|
|
5
5
|
({
|
|
6
|
-
theme:
|
|
6
|
+
theme: g,
|
|
7
7
|
$renderAs: t,
|
|
8
8
|
$color: n,
|
|
9
|
-
$align:
|
|
9
|
+
$align: T = "left",
|
|
10
10
|
$width: e,
|
|
11
11
|
$widthX: f,
|
|
12
12
|
$marginBottom: o,
|
|
13
13
|
$marginBottomX: r,
|
|
14
14
|
$alignSelf: l,
|
|
15
|
-
$opacity:
|
|
16
|
-
$inline:
|
|
15
|
+
$opacity: b = 1,
|
|
16
|
+
$inline: v,
|
|
17
17
|
$textDecoration: x,
|
|
18
18
|
$whiteSpace: a,
|
|
19
19
|
$renderOnMobileAs: c,
|
|
20
|
-
$renderOnTabletAs: i
|
|
21
|
-
$cursor: m
|
|
20
|
+
$renderOnTabletAs: i
|
|
22
21
|
}) => {
|
|
23
|
-
const { text:
|
|
24
|
-
fontFamily:
|
|
25
|
-
fontSize:
|
|
26
|
-
lineHeight:
|
|
27
|
-
letterSpacing:
|
|
28
|
-
textTransform:
|
|
29
|
-
} = L
|
|
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
|
+
fontFamily: h,
|
|
24
|
+
fontSize: k,
|
|
25
|
+
lineHeight: z,
|
|
26
|
+
letterSpacing: s,
|
|
27
|
+
textTransform: d = "none"
|
|
28
|
+
} = E[L];
|
|
30
29
|
return `
|
|
31
|
-
display: ${
|
|
32
|
-
font-family: ${
|
|
33
|
-
font-size: ${
|
|
34
|
-
text-align: ${
|
|
35
|
-
line-height: ${
|
|
36
|
-
text-transform: ${
|
|
37
|
-
${typeof
|
|
38
|
-
color: ${n ?
|
|
39
|
-
opacity: ${
|
|
30
|
+
display: ${v ? "inline-block" : "block"};
|
|
31
|
+
font-family: ${h};
|
|
32
|
+
font-size: ${k}px;
|
|
33
|
+
text-align: ${T};
|
|
34
|
+
line-height: ${z}px;
|
|
35
|
+
text-transform: ${d};
|
|
36
|
+
${typeof s == "number" ? `letter-spacing: ${s}px;` : ""}
|
|
37
|
+
color: ${n ? m[n] : m.BLACK};
|
|
38
|
+
opacity: ${b};
|
|
40
39
|
width: ${e ? `${e}` : "auto"}${typeof e == "number" ? "px" : ""};
|
|
41
|
-
${f ? `width: ${f *
|
|
40
|
+
${f ? `width: ${f * u.gutter}px;` : ""}
|
|
42
41
|
margin-bottom: ${o ? `${o}` : "initial"}${typeof o == "number" ? "px" : ""};
|
|
43
|
-
${r ? `margin-bottom: ${r *
|
|
42
|
+
${r ? `margin-bottom: ${r * u.gutter}px;` : ""}
|
|
44
43
|
${l ? `align-self: ${l};` : ""}
|
|
45
44
|
${x ? `text-decoration: ${x};` : ""}
|
|
46
45
|
${a ? `white-space: ${a};` : ""}
|
|
47
|
-
${m ? `cursor: ${m};` : ""}
|
|
48
46
|
`;
|
|
49
47
|
}
|
|
50
48
|
);
|
|
51
|
-
|
|
52
|
-
const
|
|
49
|
+
$.displayName = "Text";
|
|
50
|
+
const M = $;
|
|
53
51
|
export {
|
|
54
|
-
|
|
52
|
+
M as default
|
|
55
53
|
};
|
|
56
54
|
//# sourceMappingURL=text.js.map
|