@pagopa/io-app-design-system 8.0.0 → 8.1.0

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.
Files changed (49) hide show
  1. package/lib/commonjs/components/buttons/__test__/__snapshots__/button.test.tsx.snap +3 -0
  2. package/lib/commonjs/components/icons/Icon.js +4 -2
  3. package/lib/commonjs/components/icons/Icon.js.map +1 -1
  4. package/lib/commonjs/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap +10 -0
  5. package/lib/commonjs/components/modules/__test__/__snapshots__/ModuleNavigationAlt.test.tsx.snap +12 -0
  6. package/lib/commonjs/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap +2 -0
  7. package/lib/commonjs/components/otpInput/OTPInput.js +20 -19
  8. package/lib/commonjs/components/otpInput/OTPInput.js.map +1 -1
  9. package/lib/commonjs/components/pictograms/Pictogram.js +2 -0
  10. package/lib/commonjs/components/pictograms/Pictogram.js.map +1 -1
  11. package/lib/commonjs/components/pictograms/svg/PictogramNFCScanGreyAndroid.js +60 -0
  12. package/lib/commonjs/components/pictograms/svg/PictogramNFCScanGreyAndroid.js.map +1 -0
  13. package/lib/commonjs/components/pictograms/svg/originals/PictogramNFCScanGreyAndroid.svg +1 -0
  14. package/lib/module/components/buttons/__test__/__snapshots__/button.test.tsx.snap +3 -0
  15. package/lib/module/components/icons/Icon.js +4 -2
  16. package/lib/module/components/icons/Icon.js.map +1 -1
  17. package/lib/module/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap +10 -0
  18. package/lib/module/components/modules/__test__/__snapshots__/ModuleNavigationAlt.test.tsx.snap +12 -0
  19. package/lib/module/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap +2 -0
  20. package/lib/module/components/otpInput/OTPInput.js +20 -19
  21. package/lib/module/components/otpInput/OTPInput.js.map +1 -1
  22. package/lib/module/components/pictograms/Pictogram.js +2 -0
  23. package/lib/module/components/pictograms/Pictogram.js.map +1 -1
  24. package/lib/module/components/pictograms/svg/PictogramNFCScanGreyAndroid.js +56 -0
  25. package/lib/module/components/pictograms/svg/PictogramNFCScanGreyAndroid.js.map +1 -0
  26. package/lib/module/components/pictograms/svg/originals/PictogramNFCScanGreyAndroid.svg +1 -0
  27. package/lib/typescript/components/buttons/IOButton/styles.d.ts +4 -4
  28. package/lib/typescript/components/icons/Icon.d.ts.map +1 -1
  29. package/lib/typescript/components/icons/types.d.ts +3 -2
  30. package/lib/typescript/components/icons/types.d.ts.map +1 -1
  31. package/lib/typescript/components/otpInput/OTPInput.d.ts +13 -6
  32. package/lib/typescript/components/otpInput/OTPInput.d.ts.map +1 -1
  33. package/lib/typescript/components/pictograms/Pictogram.d.ts +1 -0
  34. package/lib/typescript/components/pictograms/Pictogram.d.ts.map +1 -1
  35. package/lib/typescript/components/pictograms/svg/PictogramNFCScanGreyAndroid.d.ts +4 -0
  36. package/lib/typescript/components/pictograms/svg/PictogramNFCScanGreyAndroid.d.ts.map +1 -0
  37. package/lib/typescript/hooks/useAccordionAnimation.d.ts +4 -4
  38. package/lib/typescript/utils/hooks/useErrorShakeAnimation.d.ts +2 -2
  39. package/package.json +4 -4
  40. package/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap +3 -0
  41. package/src/components/icons/Icon.tsx +2 -0
  42. package/src/components/icons/types.ts +3 -7
  43. package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap +10 -0
  44. package/src/components/modules/__test__/__snapshots__/ModuleNavigationAlt.test.tsx.snap +12 -0
  45. package/src/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap +2 -0
  46. package/src/components/otpInput/OTPInput.tsx +40 -24
  47. package/src/components/pictograms/Pictogram.tsx +2 -0
  48. package/src/components/pictograms/svg/PictogramNFCScanGreyAndroid.tsx +65 -0
  49. package/src/components/pictograms/svg/originals/PictogramNFCScanGreyAndroid.svg +1 -0
@@ -488,6 +488,7 @@ exports[`ModuleNavigationAlt - Snapshot (Experimental Enabled) Title + Subtitle
488
488
  meetOrSlice={0}
489
489
  minX={0}
490
490
  minY={0}
491
+ pointerEvents="none"
491
492
  style={
492
493
  [
493
494
  {
@@ -741,6 +742,7 @@ exports[`ModuleNavigationAlt - Snapshot (Experimental Enabled) Title only + chev
741
742
  meetOrSlice={0}
742
743
  minX={0}
743
744
  minY={0}
745
+ pointerEvents="none"
744
746
  style={
745
747
  [
746
748
  {
@@ -839,6 +841,7 @@ exports[`ModuleNavigationAlt - Snapshot (Experimental Enabled) Title only + chev
839
841
  meetOrSlice={0}
840
842
  minX={0}
841
843
  minY={0}
844
+ pointerEvents="none"
842
845
  style={
843
846
  [
844
847
  {
@@ -1031,6 +1034,7 @@ exports[`ModuleNavigationAlt - Snapshot (Experimental Enabled) With Badge (badge
1031
1034
  meetOrSlice={0}
1032
1035
  minX={0}
1033
1036
  minY={0}
1037
+ pointerEvents="none"
1034
1038
  style={
1035
1039
  [
1036
1040
  {
@@ -1178,6 +1182,7 @@ exports[`ModuleNavigationAlt - Snapshot (Experimental Enabled) With Badge (badge
1178
1182
  meetOrSlice={0}
1179
1183
  minX={0}
1180
1184
  minY={0}
1185
+ pointerEvents="none"
1181
1186
  style={
1182
1187
  [
1183
1188
  {
@@ -1428,6 +1433,7 @@ exports[`ModuleNavigationAlt - Snapshot (Experimental Enabled) With Image (no ic
1428
1433
  meetOrSlice={0}
1429
1434
  minX={0}
1430
1435
  minY={0}
1436
+ pointerEvents="none"
1431
1437
  style={
1432
1438
  [
1433
1439
  {
@@ -1964,6 +1970,7 @@ exports[`ModuleNavigationAlt - Snapshot Title + Subtitle 1`] = `
1964
1970
  meetOrSlice={0}
1965
1971
  minX={0}
1966
1972
  minY={0}
1973
+ pointerEvents="none"
1967
1974
  style={
1968
1975
  [
1969
1976
  {
@@ -2217,6 +2224,7 @@ exports[`ModuleNavigationAlt - Snapshot Title only + chevron (onPress) 1`] = `
2217
2224
  meetOrSlice={0}
2218
2225
  minX={0}
2219
2226
  minY={0}
2227
+ pointerEvents="none"
2220
2228
  style={
2221
2229
  [
2222
2230
  {
@@ -2315,6 +2323,7 @@ exports[`ModuleNavigationAlt - Snapshot Title only + chevron (onPress) 1`] = `
2315
2323
  meetOrSlice={0}
2316
2324
  minX={0}
2317
2325
  minY={0}
2326
+ pointerEvents="none"
2318
2327
  style={
2319
2328
  [
2320
2329
  {
@@ -2507,6 +2516,7 @@ exports[`ModuleNavigationAlt - Snapshot With Badge (badge + chevron) 1`] = `
2507
2516
  meetOrSlice={0}
2508
2517
  minX={0}
2509
2518
  minY={0}
2519
+ pointerEvents="none"
2510
2520
  style={
2511
2521
  [
2512
2522
  {
@@ -2654,6 +2664,7 @@ exports[`ModuleNavigationAlt - Snapshot With Badge (badge + chevron) 1`] = `
2654
2664
  meetOrSlice={0}
2655
2665
  minX={0}
2656
2666
  minY={0}
2667
+ pointerEvents="none"
2657
2668
  style={
2658
2669
  [
2659
2670
  {
@@ -2904,6 +2915,7 @@ exports[`ModuleNavigationAlt - Snapshot With Image (no icon) + chevron (onPress)
2904
2915
  meetOrSlice={0}
2905
2916
  minX={0}
2906
2917
  minY={0}
2918
+ pointerEvents="none"
2907
2919
  style={
2908
2920
  [
2909
2921
  {
@@ -1193,6 +1193,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
1193
1193
  meetOrSlice={0}
1194
1194
  minX={0}
1195
1195
  minY={0}
1196
+ pointerEvents="none"
1196
1197
  style={
1197
1198
  [
1198
1199
  {
@@ -1476,6 +1477,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
1476
1477
  meetOrSlice={0}
1477
1478
  minX={0}
1478
1479
  minY={0}
1480
+ pointerEvents="none"
1479
1481
  style={
1480
1482
  [
1481
1483
  {
@@ -18,26 +18,38 @@ import { BoxedInput } from "./BoxedInput";
18
18
 
19
19
  const OTP_ITEMS_GAP = 8;
20
20
 
21
+ export type OTPInputAccessibilityValueText = (params: {
22
+ valueLength: number;
23
+ length: number;
24
+ }) => string;
25
+
21
26
  type Props = {
22
27
  ref?: Ref<View>;
23
28
  value: string;
24
29
  onValueChange: (value: string) => void;
25
30
  length: number;
26
- secret?: boolean;
27
31
  autocomplete?: boolean;
28
32
  onValidate?: (value: string) => boolean;
29
33
  errorMessage?: string;
30
34
  accessibilityLabel?: string;
31
35
  deleteButtonAccessibilityLabel?: string;
32
36
  accessibilityHint?: string;
33
- accessibilityValueText?: (params: {
34
- valueLength: number;
35
- length: number;
36
- }) => string;
37
37
  inputAccessoryViewID?: string;
38
38
  autoFocus?: boolean;
39
39
  };
40
40
 
41
+ export type OTPInputSecretProps =
42
+ | {
43
+ secret: true;
44
+ accessibilityValueText: OTPInputAccessibilityValueText;
45
+ }
46
+ | {
47
+ secret?: false;
48
+ accessibilityValueText?: OTPInputAccessibilityValueText;
49
+ };
50
+
51
+ export type OTPInputProps = Props & OTPInputSecretProps;
52
+
41
53
  /**
42
54
  * `OTPInput` is a component that allows the user to enter a one-time password.
43
55
  * It has an hidden `TextInput` that is used to handle the keyboard and the focus.
@@ -57,18 +69,18 @@ export const OTPInput = ({
57
69
  length,
58
70
  accessibilityLabel,
59
71
  accessibilityHint,
60
- accessibilityValueText,
61
72
  onValidate,
62
73
  errorMessage = "",
63
- secret = false,
64
74
  autocomplete = false,
65
75
  inputAccessoryViewID,
66
76
  autoFocus = false,
67
77
  deleteButtonAccessibilityLabel,
68
- ref
69
- }: Props) => {
78
+ ref,
79
+ ...props
80
+ }: OTPInputProps) => {
70
81
  const [hasFocus, setHasFocus] = useState(autoFocus);
71
82
  const [hasError, setHasError] = useState(false);
83
+ const isSecret = props.secret === true;
72
84
 
73
85
  const theme = useIOTheme();
74
86
 
@@ -126,11 +138,23 @@ export const OTPInput = ({
126
138
  }
127
139
  break;
128
140
  default:
129
- AccessibilityInfo.announceForAccessibility(e.nativeEvent.key);
141
+ if (!isSecret) {
142
+ AccessibilityInfo.announceForAccessibility(e.nativeEvent.key);
143
+ }
130
144
  break;
131
145
  }
132
146
  };
133
147
 
148
+ const accessibilityValueTextParams = {
149
+ valueLength: value.length,
150
+ length
151
+ };
152
+
153
+ const accessibilityValueText = isSecret
154
+ ? props.accessibilityValueText(accessibilityValueTextParams)
155
+ : props.accessibilityValueText?.(accessibilityValueTextParams) ??
156
+ value.split("").join(", ");
157
+
134
158
  const cells = useMemo(() => Array.from({ length }), [length]);
135
159
 
136
160
  return (
@@ -150,10 +174,8 @@ export const OTPInput = ({
150
174
  caretHidden={Platform.OS === "ios"}
151
175
  style={[
152
176
  StyleSheet.absoluteFillObject,
153
- Platform.select({
154
- ios: { opacity: 0.01 },
155
- android: { opacity: 0 }
156
- })
177
+ // Keep the hidden TextInput minimally visible so native focus still works.
178
+ { opacity: 0.01 }
157
179
  ]}
158
180
  maxLength={length}
159
181
  ref={inputRef}
@@ -167,16 +189,10 @@ export const OTPInput = ({
167
189
  accessible={true}
168
190
  accessibilityLabel={accessibilityLabel}
169
191
  accessibilityHint={accessibilityHint}
170
- // Ensure the screen reader pronounces the code digit by digit
171
- accessibilityValue={{
172
- text:
173
- accessibilityValueText?.({
174
- valueLength: value.length,
175
- length
176
- }) ?? value.split("").join(" ")
177
- }}
192
+ // Keep secret values out of the screen reader output.
193
+ accessibilityValue={{ text: accessibilityValueText }}
178
194
  autoFocus={autoFocus}
179
- secureTextEntry={secret}
195
+ secureTextEntry={isSecret}
180
196
  />
181
197
  <View
182
198
  style={{
@@ -199,7 +215,7 @@ export const OTPInput = ({
199
215
  ? "focus"
200
216
  : "default"
201
217
  }
202
- secret={secret}
218
+ secret={isSecret}
203
219
  value={value[i]}
204
220
  />
205
221
  ))}
@@ -107,6 +107,7 @@ import PictogramMessage from "./svg/PictogramMessage";
107
107
  import PictogramMeterLimit from "./svg/PictogramMeterLimit";
108
108
  import PictogramMoneyCheck from "./svg/PictogramMoneyCheck";
109
109
  import PictogramNFCScanAndroid from "./svg/PictogramNFCScanAndroid";
110
+ import PictogramNFCScanGreyAndroid from "./svg/PictogramNFCScanGreyAndroid";
110
111
  import PictogramNFCScaniOS from "./svg/PictogramNFCScaniOS";
111
112
  import PictogramPending from "./svg/PictogramPending";
112
113
  import PictogramPinSecurity from "./svg/PictogramPinSecurity";
@@ -165,6 +166,7 @@ export const IOPictograms = {
165
166
  reactivate: PictogramReactivate,
166
167
  activate: PictogramActivate,
167
168
  nfcScanAndroid: PictogramNFCScanAndroid,
169
+ nfcScanGreyAndroid: PictogramNFCScanGreyAndroid,
168
170
  nfcScaniOS: PictogramNFCScaniOS,
169
171
  attachment: PictogramAttachment,
170
172
  lostConnection: PictogramLostConnection,
@@ -0,0 +1,65 @@
1
+ import { Svg, Path } from "react-native-svg";
2
+ import { SVGPictogramProps } from "../types";
3
+
4
+ const PictogramNFCScanGreyAndroid = ({
5
+ size,
6
+ colorValues,
7
+ ...props
8
+ }: SVGPictogramProps) => (
9
+ <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
10
+ <Path
11
+ d="M131.281 117.051L107.168 80.1878C105.571 77.7474 102.299 77.0632 99.8587 78.6595L33.3953 122.135C30.955 123.732 30.2707 127.004 31.867 129.444L55.9808 166.308C57.5771 168.748 60.8494 169.433 63.2898 167.836L129.753 124.36C132.194 122.764 132.878 119.492 131.281 117.051Z"
12
+ fill={colorValues.main}
13
+ />
14
+ <Path
15
+ d="M60.5101 166.53C60.1501 166.53 59.7901 166.49 59.4401 166.42C58.0801 166.14 56.9201 165.34 56.1601 164.18L33.8901 130.14C33.1301 128.98 32.8701 127.59 33.1501 126.23C33.4301 124.87 34.2301 123.71 35.3901 122.95L99.7901 80.8199C102.19 79.2499 105.41 79.9299 106.98 82.3199L129.25 116.36C130.82 118.76 130.14 121.98 127.75 123.55L63.3501 165.68C62.4901 166.24 61.5201 166.53 60.5201 166.53L60.5101 166.53ZM102.63 82.9699C102.22 82.9699 101.8 83.0899 101.43 83.3299L37.0301 125.46C36.5401 125.78 36.2001 126.27 36.0801 126.85C35.9601 127.42 36.0801 128.01 36.3901 128.5L58.6601 162.54C58.9801 163.03 59.4701 163.37 60.0501 163.49C60.6201 163.61 61.2101 163.49 61.7001 163.18L126.1 121.05C127.11 120.39 127.4 119.02 126.74 118.01L104.47 83.9699C104.05 83.3299 103.35 82.9799 102.63 82.9799L102.63 82.9699Z"
16
+ fill={colorValues.secondary}
17
+ />
18
+ <Path
19
+ d="M60.9502 151.74C60.5502 151.74 60.1602 151.7 59.7602 151.62C58.2502 151.3 56.9602 150.42 56.1102 149.13C54.3702 146.47 55.1202 142.88 57.7802 141.14C60.4402 139.4 64.0302 140.15 65.7702 142.81C66.6102 144.1 66.9002 145.64 66.5902 147.15C66.2802 148.66 65.3902 149.95 64.1002 150.8C63.1502 151.42 62.0602 151.74 60.9502 151.74ZM60.9302 143.2C60.4002 143.2 59.8802 143.35 59.4202 143.65C58.1402 144.49 57.7802 146.21 58.6202 147.49C59.4502 148.77 61.1802 149.13 62.4502 148.29C63.0702 147.89 63.4902 147.26 63.6502 146.54C63.8002 145.82 63.6602 145.08 63.2602 144.46C62.8502 143.84 62.2302 143.42 61.5102 143.26C61.3202 143.22 61.1302 143.2 60.9402 143.2L60.9302 143.2Z"
20
+ fill={colorValues.secondary}
21
+ />
22
+ <Path
23
+ d="M61.5002 159.64C61.0102 159.64 60.5302 159.4 60.2402 158.96C57.9202 155.41 58.9202 150.63 62.4702 148.3C64.1902 147.17 66.2502 146.79 68.2602 147.21C70.2702 147.63 72.0002 148.81 73.1302 150.53C73.5802 151.22 73.3902 152.15 72.7002 152.61C72.0102 153.06 71.0802 152.87 70.6202 152.18C69.9302 151.13 68.8802 150.41 67.6502 150.15C66.4202 149.89 65.1702 150.13 64.1202 150.82C61.9502 152.24 61.3402 155.16 62.7602 157.33C63.2102 158.02 63.0202 158.95 62.3302 159.41C62.0802 159.58 61.7902 159.65 61.5102 159.65L61.5002 159.64Z"
24
+ fill={colorValues.secondary}
25
+ />
26
+ <Path
27
+ d="M77.5799 107.19C77.0899 107.19 76.6099 106.95 76.3199 106.51C75.8699 105.82 76.0599 104.89 76.7499 104.43L100.74 88.74C101.43 88.29 102.36 88.48 102.82 89.17C103.27 89.86 103.08 90.79 102.39 91.25L78.3999 106.94C78.1499 107.11 77.8599 107.18 77.5799 107.18L77.5799 107.19Z"
28
+ fill={colorValues.secondary}
29
+ />
30
+ <Path
31
+ d="M77.5199 113.42C77.0299 113.42 76.5499 113.18 76.2599 112.74C75.8099 112.05 75.9999 111.12 76.6899 110.66L104.17 92.6899C104.86 92.2399 105.79 92.4299 106.25 93.1199C106.7 93.8099 106.51 94.7399 105.82 95.1999L78.3399 113.17C78.0899 113.34 77.7999 113.41 77.5199 113.41L77.5199 113.42Z"
32
+ fill={colorValues.secondary}
33
+ />
34
+ <Path
35
+ d="M119.18 136.97L126.93 135.05L144.11 131.82L154.9 126.41L163.07 119.7L164.95 111.65L169.66 96.39L171.58 84.75L172.8 83.16L146.3 42.67C141.85 35.87 132.72 33.96 125.92 38.41L85.6599 64.75C78.8599 69.2 76.9499 78.33 81.3999 85.13L117.32 140.05L119.19 136.98L119.18 136.97Z"
36
+ fill="#E8EBF1"
37
+ />
38
+ <Path
39
+ d="M120.87 137.28C120.37 137.28 119.88 137.04 119.58 136.59L84.2401 83.82C82.4101 81.03 81.7901 77.71 82.4701 74.46C83.1501 71.21 85.0501 68.42 87.8301 66.6L126.75 41.14C132.49 37.39 140.21 39 143.96 44.74L171.83 87.35C172.3 88.07 172.1 89.03 171.38 89.5C170.66 89.97 169.7 89.77 169.23 89.05L141.36 46.44C140 44.36 137.9 42.93 135.46 42.42C133.02 41.91 130.53 42.38 128.45 43.74L89.5301 69.2C87.4501 70.56 86.0201 72.66 85.5101 75.1C85.0001 77.54 85.4701 80.03 86.8301 82.11L122.16 134.87C122.64 135.58 122.45 136.55 121.73 137.02C121.46 137.2 121.16 137.28 120.87 137.28Z"
40
+ fill="#BBC2D6"
41
+ />
42
+ <Path
43
+ d="M199.513 145.954L195.846 147.553L205.267 169.158L208.934 167.56L199.513 145.954Z"
44
+ fill={colorValues.hands}
45
+ />
46
+ <Path
47
+ d="M164.15 204.18L160.15 204.11C160.39 191.3 147.33 170.88 143.04 164.17C142.59 163.46 142.22 162.89 141.96 162.47C140.28 159.75 128.7 155.53 121.01 153.4C120.76 153.33 120.53 153.21 120.32 153.05C115.75 149.51 113.59 145.95 113.91 142.47C114.32 137.99 118.69 135.68 118.87 135.59C119.13 135.45 119.42 135.38 119.72 135.37C138.57 134.69 149.11 129.77 154.63 125.77C160.52 121.5 162.08 117.34 162.09 117.3C164.58 110.54 170.98 91.77 170.76 85.85C170.6 81.74 173.61 78.39 177.6 78.23C182.52 78.06 188.5 82.76 189.1 96.73C189.32 98.6 191.62 122.02 173.7 131.44L171.84 127.9C187.65 119.59 185.15 97.36 185.13 97.14C185.13 97.09 185.12 97.03 185.12 96.98C184.7 86.66 181.02 82.08 177.78 82.23C176 82.3 174.71 83.79 174.78 85.7C175.09 93.61 166.25 117.64 165.88 118.66C165.62 119.41 158.84 137.79 120.4 139.35C119.69 139.82 118.06 141.07 117.91 142.86C117.75 144.8 119.33 147.15 122.49 149.66C126.57 150.81 142.38 155.52 145.39 160.37C145.64 160.78 146 161.34 146.44 162.02C151.36 169.72 164.44 190.16 164.18 204.19L164.15 204.18Z"
48
+ fill={colorValues.hands}
49
+ />
50
+ <Path
51
+ d="M185.18 137.32L183.46 133.71C196.68 127.42 199.81 117.31 200.18 115.9C200.55 109.14 199.28 104.52 196.51 102.54C193.09 100.09 188.1 102.08 188.05 102.1L186.52 98.4C186.81 98.28 193.57 95.54 198.81 99.26C202.85 102.13 204.66 107.87 204.17 116.31C204.17 116.42 204.15 116.53 204.12 116.64C204 117.17 200.94 129.81 185.18 137.31L185.18 137.32Z"
52
+ fill={colorValues.hands}
53
+ />
54
+ <Path
55
+ d="M182.71 153.47L182.71 149.47C182.71 149.47 186.9 149.44 191.41 147.79C197.19 145.68 200.85 142.01 202.29 136.88C203.57 132.34 203.49 128.92 202.05 127.01C200.79 125.33 198.83 125.26 198.81 125.26L198.86 121.26C199.02 121.26 202.81 121.35 205.25 124.62C207.49 127.61 207.78 132.1 206.13 137.97C201.82 153.3 182.89 153.48 182.7 153.48L182.71 153.47Z"
56
+ fill={colorValues.hands}
57
+ />
58
+ <Path
59
+ d="M103.412 71.4254C102.653 70.2723 102.972 68.7219 104.125 67.9625L121.664 56.4124C122.817 55.653 124.367 55.9722 125.127 57.1253C125.886 58.2784 125.567 59.8288 124.414 60.5882L106.875 72.1383C105.722 72.8977 104.172 72.5785 103.412 71.4254Z"
60
+ fill="#BBC2D6"
61
+ />
62
+ </Svg>
63
+ );
64
+
65
+ export default PictogramNFCScanGreyAndroid;
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_28836_27460)"><path d="M131.281 117.051L107.168 80.1878C105.571 77.7474 102.299 77.0632 99.8587 78.6595L33.3953 122.135C30.955 123.732 30.2707 127.004 31.867 129.444L55.9808 166.308C57.5771 168.748 60.8494 169.433 63.2898 167.836L129.753 124.36C132.194 122.764 132.878 119.492 131.281 117.051Z" fill="#AAEEEF"/><path d="M60.5101 166.53C60.1501 166.53 59.7901 166.49 59.4401 166.42C58.0801 166.14 56.9201 165.34 56.1601 164.18L33.8901 130.14C33.1301 128.98 32.8701 127.59 33.1501 126.23C33.4301 124.87 34.2301 123.71 35.3901 122.95L99.7901 80.8199C102.19 79.2499 105.41 79.9299 106.98 82.3199L129.25 116.36C130.82 118.76 130.14 121.98 127.75 123.55L63.3501 165.68C62.4901 166.24 61.5201 166.53 60.5201 166.53L60.5101 166.53ZM102.63 82.9699C102.22 82.9699 101.8 83.0899 101.43 83.3299L37.0301 125.46C36.5401 125.78 36.2001 126.27 36.0801 126.85C35.9601 127.42 36.0801 128.01 36.3901 128.5L58.6601 162.54C58.9801 163.03 59.4701 163.37 60.0501 163.49C60.6201 163.61 61.2101 163.49 61.7001 163.18L126.1 121.05C127.11 120.39 127.4 119.02 126.74 118.01L104.47 83.9699C104.05 83.3299 103.35 82.9799 102.63 82.9799L102.63 82.9699Z" fill="#00C5CA"/><path d="M60.9502 151.74C60.5502 151.74 60.1602 151.7 59.7602 151.62C58.2502 151.3 56.9602 150.42 56.1102 149.13C54.3702 146.47 55.1202 142.88 57.7802 141.14C60.4402 139.4 64.0302 140.15 65.7702 142.81C66.6102 144.1 66.9002 145.64 66.5902 147.15C66.2802 148.66 65.3902 149.95 64.1002 150.8C63.1502 151.42 62.0602 151.74 60.9502 151.74ZM60.9302 143.2C60.4002 143.2 59.8802 143.35 59.4202 143.65C58.1402 144.49 57.7802 146.21 58.6202 147.49C59.4502 148.77 61.1802 149.13 62.4502 148.29C63.0702 147.89 63.4902 147.26 63.6502 146.54C63.8002 145.82 63.6602 145.08 63.2602 144.46C62.8502 143.84 62.2302 143.42 61.5102 143.26C61.3202 143.22 61.1302 143.2 60.9402 143.2L60.9302 143.2Z" fill="#00C5CA"/><path d="M61.5002 159.64C61.0102 159.64 60.5302 159.4 60.2402 158.96C57.9202 155.41 58.9202 150.63 62.4702 148.3C64.1902 147.17 66.2502 146.79 68.2602 147.21C70.2702 147.63 72.0002 148.81 73.1302 150.53C73.5802 151.22 73.3902 152.15 72.7002 152.61C72.0102 153.06 71.0802 152.87 70.6202 152.18C69.9302 151.13 68.8802 150.41 67.6502 150.15C66.4202 149.89 65.1702 150.13 64.1202 150.82C61.9502 152.24 61.3402 155.16 62.7602 157.33C63.2102 158.02 63.0202 158.95 62.3302 159.41C62.0802 159.58 61.7902 159.65 61.5102 159.65L61.5002 159.64Z" fill="#00C5CA"/><path d="M77.5799 107.19C77.0899 107.19 76.6099 106.95 76.3199 106.51C75.8699 105.82 76.0599 104.89 76.7499 104.43L100.74 88.74C101.43 88.29 102.36 88.48 102.82 89.17C103.27 89.86 103.08 90.79 102.39 91.25L78.3999 106.94C78.1499 107.11 77.8599 107.18 77.5799 107.18L77.5799 107.19Z" fill="#00C5CA"/><path d="M77.5199 113.42C77.0299 113.42 76.5499 113.18 76.2599 112.74C75.8099 112.05 75.9999 111.12 76.6899 110.66L104.17 92.6899C104.86 92.2399 105.79 92.4299 106.25 93.1199C106.7 93.8099 106.51 94.7399 105.82 95.1999L78.3399 113.17C78.0899 113.34 77.7999 113.41 77.5199 113.41L77.5199 113.42Z" fill="#00C5CA"/><path d="M119.18 136.97L126.93 135.05L144.11 131.82L154.9 126.41L163.07 119.7L164.95 111.65L169.66 96.39L171.58 84.75L172.8 83.16L146.3 42.67C141.85 35.87 132.72 33.96 125.92 38.41L85.6599 64.75C78.8599 69.2 76.9499 78.33 81.3999 85.13L117.32 140.05L119.19 136.98L119.18 136.97Z" fill="#E8EBF1"/><path d="M120.87 137.28C120.37 137.28 119.88 137.04 119.58 136.59L84.2401 83.82C82.4101 81.03 81.7901 77.71 82.4701 74.46C83.1501 71.21 85.0501 68.42 87.8301 66.6L126.75 41.14C132.49 37.39 140.21 39 143.96 44.74L171.83 87.35C172.3 88.07 172.1 89.03 171.38 89.5C170.66 89.97 169.7 89.77 169.23 89.05L141.36 46.44C140 44.36 137.9 42.93 135.46 42.42C133.02 41.91 130.53 42.38 128.45 43.74L89.5301 69.2C87.4501 70.56 86.0201 72.66 85.5101 75.1C85.0001 77.54 85.4701 80.03 86.8301 82.11L122.16 134.87C122.64 135.58 122.45 136.55 121.73 137.02C121.46 137.2 121.16 137.28 120.87 137.28Z" fill="#BBC2D6"/><path d="M199.513 145.954L195.846 147.553L205.267 169.158L208.934 167.56L199.513 145.954Z" fill="#0B3EE3"/><path d="M164.15 204.18L160.15 204.11C160.39 191.3 147.33 170.88 143.04 164.17C142.59 163.46 142.22 162.89 141.96 162.47C140.28 159.75 128.7 155.53 121.01 153.4C120.76 153.33 120.53 153.21 120.32 153.05C115.75 149.51 113.59 145.95 113.91 142.47C114.32 137.99 118.69 135.68 118.87 135.59C119.13 135.45 119.42 135.38 119.72 135.37C138.57 134.69 149.11 129.77 154.63 125.77C160.52 121.5 162.08 117.34 162.09 117.3C164.58 110.54 170.98 91.77 170.76 85.85C170.6 81.74 173.61 78.39 177.6 78.23C182.52 78.06 188.5 82.76 189.1 96.73C189.32 98.6 191.62 122.02 173.7 131.44L171.84 127.9C187.65 119.59 185.15 97.36 185.13 97.14C185.13 97.09 185.12 97.03 185.12 96.98C184.7 86.66 181.02 82.08 177.78 82.23C176 82.3 174.71 83.79 174.78 85.7C175.09 93.61 166.25 117.64 165.88 118.66C165.62 119.41 158.84 137.79 120.4 139.35C119.69 139.82 118.06 141.07 117.91 142.86C117.75 144.8 119.33 147.15 122.49 149.66C126.57 150.81 142.38 155.52 145.39 160.37C145.64 160.78 146 161.34 146.44 162.02C151.36 169.72 164.44 190.16 164.18 204.19L164.15 204.18Z" fill="#0B3EE3"/><path d="M185.18 137.32L183.46 133.71C196.68 127.42 199.81 117.31 200.18 115.9C200.55 109.14 199.28 104.52 196.51 102.54C193.09 100.09 188.1 102.08 188.05 102.1L186.52 98.4C186.81 98.28 193.57 95.54 198.81 99.26C202.85 102.13 204.66 107.87 204.17 116.31C204.17 116.42 204.15 116.53 204.12 116.64C204 117.17 200.94 129.81 185.18 137.31L185.18 137.32Z" fill="#0B3EE3"/><path d="M182.71 153.47L182.71 149.47C182.71 149.47 186.9 149.44 191.41 147.79C197.19 145.68 200.85 142.01 202.29 136.88C203.57 132.34 203.49 128.92 202.05 127.01C200.79 125.33 198.83 125.26 198.81 125.26L198.86 121.26C199.02 121.26 202.81 121.35 205.25 124.62C207.49 127.61 207.78 132.1 206.13 137.97C201.82 153.3 182.89 153.48 182.7 153.48L182.71 153.47Z" fill="#0B3EE3"/><path d="M103.412 71.4254C102.653 70.2723 102.972 68.7219 104.125 67.9625L121.664 56.4124C122.817 55.653 124.367 55.9722 125.127 57.1253C125.886 58.2784 125.567 59.8288 124.414 60.5882L106.875 72.1383C105.722 72.8977 104.172 72.5785 103.412 71.4254Z" fill="#BBC2D6"/></g><defs><clipPath id="clip0_28836_27460"><rect width="177.93" height="168.18" fill="white" transform="translate(31 36)"/></clipPath></defs></svg>