@stokr/components-library 3.0.42 → 3.0.43
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.
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import "react";
|
|
3
|
+
import PropTypes from "prop-types";
|
|
4
|
+
import { FlagFor } from "../Country/CountrySelect.js";
|
|
5
|
+
import { CountryRowRoot, FlagSlot, CountryCode, ResidencyItemRoot, FieldLabel, FieldValue, SectionHeaderRoot, SectionHeaderIconWrap } from "./IdentityInfo.styles.js";
|
|
6
|
+
const IdentitySectionHeader = ({ icon, count, children, style, className }) => /* @__PURE__ */ jsxs(SectionHeaderRoot, { style, className, children: [
|
|
7
|
+
icon && /* @__PURE__ */ jsx(SectionHeaderIconWrap, { children: icon }),
|
|
8
|
+
/* @__PURE__ */ jsxs("span", { children: [
|
|
9
|
+
children,
|
|
10
|
+
count !== void 0 && count !== null && ` (${count})`
|
|
11
|
+
] })
|
|
12
|
+
] });
|
|
13
|
+
IdentitySectionHeader.propTypes = {
|
|
14
|
+
icon: PropTypes.node,
|
|
15
|
+
count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
16
|
+
children: PropTypes.node.isRequired,
|
|
17
|
+
style: PropTypes.object,
|
|
18
|
+
className: PropTypes.string
|
|
19
|
+
};
|
|
20
|
+
const IdentityCountryRow = ({ code, name, showCode = false, style, className }) => /* @__PURE__ */ jsxs(CountryRowRoot, { style, className, children: [
|
|
21
|
+
/* @__PURE__ */ jsx(FlagSlot, { children: /* @__PURE__ */ jsx(FlagFor, { code }) }),
|
|
22
|
+
/* @__PURE__ */ jsx("span", { children: name }),
|
|
23
|
+
showCode && /* @__PURE__ */ jsx(CountryCode, { children: code })
|
|
24
|
+
] });
|
|
25
|
+
IdentityCountryRow.propTypes = {
|
|
26
|
+
code: PropTypes.string.isRequired,
|
|
27
|
+
name: PropTypes.string.isRequired,
|
|
28
|
+
showCode: PropTypes.bool,
|
|
29
|
+
style: PropTypes.object,
|
|
30
|
+
className: PropTypes.string
|
|
31
|
+
};
|
|
32
|
+
const IdentityResidencyItem = ({
|
|
33
|
+
country,
|
|
34
|
+
tin,
|
|
35
|
+
reason,
|
|
36
|
+
residencyLabel = "Residency",
|
|
37
|
+
tinLabel = "TIN",
|
|
38
|
+
reasonLabel = "Reason details",
|
|
39
|
+
style,
|
|
40
|
+
className
|
|
41
|
+
}) => /* @__PURE__ */ jsxs(ResidencyItemRoot, { style, className, children: [
|
|
42
|
+
/* @__PURE__ */ jsx(FieldLabel, { children: residencyLabel }),
|
|
43
|
+
/* @__PURE__ */ jsx(IdentityCountryRow, { code: country.code, name: country.name }),
|
|
44
|
+
/* @__PURE__ */ jsx(FieldLabel, { style: { marginTop: 8 }, children: tinLabel }),
|
|
45
|
+
/* @__PURE__ */ jsx(FieldValue, { children: tin }),
|
|
46
|
+
reason && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
47
|
+
/* @__PURE__ */ jsx(FieldLabel, { style: { marginTop: 8 }, children: reasonLabel }),
|
|
48
|
+
/* @__PURE__ */ jsx(FieldValue, { children: reason })
|
|
49
|
+
] })
|
|
50
|
+
] });
|
|
51
|
+
IdentityResidencyItem.propTypes = {
|
|
52
|
+
country: PropTypes.shape({
|
|
53
|
+
code: PropTypes.string.isRequired,
|
|
54
|
+
name: PropTypes.string.isRequired
|
|
55
|
+
}).isRequired,
|
|
56
|
+
tin: PropTypes.node.isRequired,
|
|
57
|
+
reason: PropTypes.node,
|
|
58
|
+
residencyLabel: PropTypes.node,
|
|
59
|
+
tinLabel: PropTypes.node,
|
|
60
|
+
reasonLabel: PropTypes.node,
|
|
61
|
+
style: PropTypes.object,
|
|
62
|
+
className: PropTypes.string
|
|
63
|
+
};
|
|
64
|
+
export {
|
|
65
|
+
IdentityCountryRow,
|
|
66
|
+
FieldLabel as IdentityFieldLabel,
|
|
67
|
+
FieldValue as IdentityFieldValue,
|
|
68
|
+
IdentityResidencyItem,
|
|
69
|
+
IdentitySectionHeader
|
|
70
|
+
};
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
import { colors } from "../../styles/colors.js";
|
|
3
|
+
const SectionHeaderRoot = styled.div`
|
|
4
|
+
display: flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
gap: 8px;
|
|
7
|
+
color: ${colors.blue};
|
|
8
|
+
font-size: 16px;
|
|
9
|
+
line-height: 24px;
|
|
10
|
+
font-weight: 600;
|
|
11
|
+
letter-spacing: 0.6px;
|
|
12
|
+
margin-bottom: 12px;
|
|
13
|
+
`;
|
|
14
|
+
const SectionHeaderIconWrap = styled.span`
|
|
15
|
+
display: inline-flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
flex-shrink: 0;
|
|
19
|
+
|
|
20
|
+
svg {
|
|
21
|
+
width: 18px;
|
|
22
|
+
height: 18px;
|
|
23
|
+
}
|
|
24
|
+
`;
|
|
25
|
+
const FieldLabel = styled.p`
|
|
26
|
+
margin: 0;
|
|
27
|
+
font-size: 11px;
|
|
28
|
+
line-height: 20px;
|
|
29
|
+
letter-spacing: 2px;
|
|
30
|
+
text-transform: uppercase;
|
|
31
|
+
color: ${colors.black};
|
|
32
|
+
font-weight: 400;
|
|
33
|
+
`;
|
|
34
|
+
const FieldValue = styled.p`
|
|
35
|
+
margin: 0 0 4px;
|
|
36
|
+
font-size: 14px;
|
|
37
|
+
line-height: 20px;
|
|
38
|
+
font-weight: 600;
|
|
39
|
+
color: ${colors.black};
|
|
40
|
+
letter-spacing: 0.5px;
|
|
41
|
+
`;
|
|
42
|
+
const CountryRowRoot = styled.div`
|
|
43
|
+
display: flex;
|
|
44
|
+
align-items: center;
|
|
45
|
+
gap: 10px;
|
|
46
|
+
padding: 6px 0;
|
|
47
|
+
font-size: 14px;
|
|
48
|
+
line-height: 20px;
|
|
49
|
+
font-weight: 600;
|
|
50
|
+
color: ${colors.black};
|
|
51
|
+
letter-spacing: 0.5px;
|
|
52
|
+
`;
|
|
53
|
+
const FlagSlot = styled.span`
|
|
54
|
+
display: inline-flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
width: 22px;
|
|
57
|
+
height: auto;
|
|
58
|
+
flex-shrink: 0;
|
|
59
|
+
border-radius: 4px;
|
|
60
|
+
overflow: hidden;
|
|
61
|
+
`;
|
|
62
|
+
const CountryCode = styled.span`
|
|
63
|
+
font-family: monospace;
|
|
64
|
+
font-size: 12px;
|
|
65
|
+
color: ${colors.grey2};
|
|
66
|
+
margin-left: auto;
|
|
67
|
+
`;
|
|
68
|
+
const ResidencyItemRoot = styled.div`
|
|
69
|
+
display: flex;
|
|
70
|
+
flex-direction: column;
|
|
71
|
+
margin-bottom: 16px;
|
|
72
|
+
`;
|
|
73
|
+
export {
|
|
74
|
+
CountryCode,
|
|
75
|
+
CountryRowRoot,
|
|
76
|
+
FieldLabel,
|
|
77
|
+
FieldValue,
|
|
78
|
+
FlagSlot,
|
|
79
|
+
ResidencyItemRoot,
|
|
80
|
+
SectionHeaderIconWrap,
|
|
81
|
+
SectionHeaderRoot
|
|
82
|
+
};
|
package/dist/index.js
CHANGED
|
@@ -119,6 +119,7 @@ import { StepIndicator } from "./components/StepsProgress/StepIndicator.js";
|
|
|
119
119
|
import { Layout } from "./components/Layout/Layout.js";
|
|
120
120
|
import { AnimatedSpan, LoadingDots, StokrLoader, StokrLoaderBox, loaderGif } from "./components/StokrLoader/StokrLoader.js";
|
|
121
121
|
import { InfoBox } from "./components/InfoBox/InfoBox.js";
|
|
122
|
+
import { IdentityCountryRow, IdentityResidencyItem, IdentitySectionHeader } from "./components/IdentityInfo/IdentityInfo.js";
|
|
122
123
|
import { Inner, Outer, ThumbH, ThumbV, TrackH, TrackV } from "./components/ComponentScroll/ComponentScroll.styles.js";
|
|
123
124
|
import { LoginModal } from "./components/LoginModal/LoginModal.js";
|
|
124
125
|
import { CheckboxContext, CheckboxProvider, useCheckboxActions, useCheckboxes } from "./context/Checkbox/CheckboxContext.js";
|
|
@@ -185,6 +186,7 @@ import { FormContainer, FormError, FormField, FormInfo } from "./components/Form
|
|
|
185
186
|
import { default as default24 } from "./components/SvgIcons/FourSvg.js";
|
|
186
187
|
import { default as default25 } from "./components/SvgIcons/Glassess.js";
|
|
187
188
|
import { HeaderHo } from "./components/headerHo/HeaderHo.js";
|
|
189
|
+
import { FieldLabel, FieldValue } from "./components/IdentityInfo/IdentityInfo.styles.js";
|
|
188
190
|
import { Info } from "./components/icons/Info.js";
|
|
189
191
|
import { Container as Container2, Icon as Icon3 } from "./components/InfoIcon/InfoIcon.styles.js";
|
|
190
192
|
import { Label, InputWrap, Wrapper as Wrapper2 } from "./components/Input/Input.styles.js";
|
|
@@ -367,6 +369,11 @@ export {
|
|
|
367
369
|
HeroVideoBlock,
|
|
368
370
|
Icon,
|
|
369
371
|
Icon2,
|
|
372
|
+
IdentityCountryRow,
|
|
373
|
+
FieldLabel as IdentityFieldLabel,
|
|
374
|
+
FieldValue as IdentityFieldValue,
|
|
375
|
+
IdentityResidencyItem,
|
|
376
|
+
IdentitySectionHeader,
|
|
370
377
|
ImageSlide,
|
|
371
378
|
ImageSlideWrapper,
|
|
372
379
|
Info,
|