@incodetech/web 2.0.0-alpha.1 → 2.0.0-alpha.2

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 (116) hide show
  1. package/.turbo/turbo-build.log +58 -0
  2. package/.turbo/turbo-coverage.log +23 -0
  3. package/.turbo/turbo-format.log +6 -0
  4. package/.turbo/turbo-lint$colon$fix.log +6 -0
  5. package/.turbo/turbo-lint.log +6 -0
  6. package/.turbo/turbo-test.log +1033 -0
  7. package/.turbo/turbo-typecheck.log +5 -0
  8. package/coverage/base.css +224 -0
  9. package/coverage/block-navigation.js +87 -0
  10. package/coverage/email/email.tsx.html +850 -0
  11. package/coverage/email/emailInput.tsx.html +340 -0
  12. package/coverage/email/index.html +131 -0
  13. package/coverage/favicon.png +0 -0
  14. package/coverage/flow/flow.tsx.html +961 -0
  15. package/coverage/flow/flowCompleted.tsx.html +448 -0
  16. package/coverage/flow/flowInit.ts.html +367 -0
  17. package/coverage/flow/flowStart.tsx.html +208 -0
  18. package/coverage/flow/index.html +221 -0
  19. package/coverage/flow/preloadFlow.ts.html +598 -0
  20. package/coverage/flow/unsupportedModule.tsx.html +202 -0
  21. package/coverage/flow/useFlowInitialization.ts.html +469 -0
  22. package/coverage/flow/useModuleLoader.ts.html +361 -0
  23. package/coverage/hooks/index.html +116 -0
  24. package/coverage/hooks/useManager.ts.html +205 -0
  25. package/coverage/index.html +401 -0
  26. package/coverage/permissions/boldWithArrow.tsx.html +208 -0
  27. package/coverage/permissions/denied.tsx.html +172 -0
  28. package/coverage/permissions/deniedAndroid.tsx.html +253 -0
  29. package/coverage/permissions/deniedDesktop.tsx.html +277 -0
  30. package/coverage/permissions/deniedIOS.tsx.html +304 -0
  31. package/coverage/permissions/deniedInstructions.tsx.html +142 -0
  32. package/coverage/permissions/iconWrapper.tsx.html +130 -0
  33. package/coverage/permissions/index.html +251 -0
  34. package/coverage/permissions/learnMore.tsx.html +340 -0
  35. package/coverage/permissions/numberedStep.tsx.html +127 -0
  36. package/coverage/permissions/permissions.tsx.html +289 -0
  37. package/coverage/phone/index.html +116 -0
  38. package/coverage/phone/phoneInput.tsx.html +832 -0
  39. package/coverage/prettify.css +1 -0
  40. package/coverage/prettify.js +2 -0
  41. package/coverage/selfie/index.html +131 -0
  42. package/coverage/selfie/selfie.tsx.html +334 -0
  43. package/coverage/selfie/tutorial.tsx.html +214 -0
  44. package/coverage/shared/baseTutorial/baseTutorial.tsx.html +250 -0
  45. package/coverage/shared/baseTutorial/index.html +131 -0
  46. package/coverage/shared/baseTutorial/replaceBaseTutorial.ts.html +289 -0
  47. package/coverage/shared/button/button.tsx.html +226 -0
  48. package/coverage/shared/button/index.html +116 -0
  49. package/coverage/shared/componentRoot/incodeComponent.tsx.html +121 -0
  50. package/coverage/shared/componentRoot/index.html +116 -0
  51. package/coverage/shared/countries/countries.ts.html +502 -0
  52. package/coverage/shared/countries/index.html +116 -0
  53. package/coverage/shared/icons/chevronDown.tsx.html +151 -0
  54. package/coverage/shared/icons/index.html +131 -0
  55. package/coverage/shared/icons/successIcon.tsx.html +163 -0
  56. package/coverage/shared/loader/index.html +116 -0
  57. package/coverage/shared/loader/loadingIcon.tsx.html +286 -0
  58. package/coverage/shared/otpInput/index.html +116 -0
  59. package/coverage/shared/otpInput/otpInput.tsx.html +808 -0
  60. package/coverage/shared/page/index.html +146 -0
  61. package/coverage/shared/page/page.tsx.html +358 -0
  62. package/coverage/shared/page/pageUiConfig.ts.html +277 -0
  63. package/coverage/shared/page/verifiedByIncode.tsx.html +310 -0
  64. package/coverage/shared/spacer/index.html +116 -0
  65. package/coverage/shared/spacer/spacer.tsx.html +349 -0
  66. package/coverage/shared/spinner/index.html +116 -0
  67. package/coverage/shared/spinner/spinner.tsx.html +280 -0
  68. package/coverage/shared/title/index.html +116 -0
  69. package/coverage/shared/title/title.tsx.html +121 -0
  70. package/coverage/shared/uiConfig/index.html +116 -0
  71. package/coverage/shared/uiConfig/uiConfig.ts.html +193 -0
  72. package/coverage/shared/webComponent/incodeModule.ts.html +172 -0
  73. package/coverage/shared/webComponent/index.html +131 -0
  74. package/coverage/shared/webComponent/registerIncodeElement.ts.html +130 -0
  75. package/coverage/sort-arrow-sprite.png +0 -0
  76. package/coverage/sorter.js +210 -0
  77. package/coverage/styles/cn.tsx.html +148 -0
  78. package/coverage/styles/fetchTheme.ts.html +349 -0
  79. package/coverage/styles/index.html +131 -0
  80. package/dist/asset-manifest.json +18 -0
  81. package/dist/browser-ponyfill-B6W6hHVY.js +344 -0
  82. package/dist/button-DeMZ_34N.js +266 -0
  83. package/dist/button.css +335 -0
  84. package/dist/email/email.es.js +145 -0
  85. package/dist/email/styles.css +123 -0
  86. package/dist/flow/flow.es.js +9 -0
  87. package/dist/flow/styles.css +204 -0
  88. package/dist/flow-ZK6OBsa3.js +568 -0
  89. package/dist/incodeModule-BF5MX9GT.js +243 -0
  90. package/dist/incodeModule.css +119 -0
  91. package/dist/index.es.js +101 -0
  92. package/dist/otpInput-BUrV4IAF.js +151 -0
  93. package/dist/otpInput.css +167 -0
  94. package/dist/phone/phone.es.js +3442 -0
  95. package/dist/phone/styles.css +305 -0
  96. package/dist/selfie/selfie.es.js +893 -0
  97. package/dist/selfie/styles.css +1163 -0
  98. package/dist/selfieTutorial-C-u5GufD.js +29 -0
  99. package/dist/styles/core.css +1013 -0
  100. package/dist/styles/tokens.css +543 -0
  101. package/dist/successIcon.css +4 -0
  102. package/dist/title-ng7q7YDh.js +2161 -0
  103. package/dist/title.css +38 -0
  104. package/dist/types/core.d.ts +1 -0
  105. package/dist/types/email/email.d.ts +2 -0
  106. package/dist/types/email.d.ts +50 -0
  107. package/dist/types/flow/flow.d.ts +2 -0
  108. package/dist/types/flow.d.ts +46 -0
  109. package/dist/types/index.d.ts +223 -0
  110. package/dist/types/phone/phone.d.ts +2 -0
  111. package/dist/types/phone.d.ts +51 -0
  112. package/dist/types/selfie/selfie.d.ts +2 -0
  113. package/dist/types/selfie.d.ts +24 -0
  114. package/dist/types/styles/core.d.ts +1 -0
  115. package/dist/vendor-preact-CK0WeTOR.js +584 -0
  116. package/package.json +17 -17
package/coverage/email/email.tsx.html ADDED
@@ -0,0 +1,850 @@
1
+
2
+ <!doctype html>
3
+ <html lang="en">
4
+
5
+ <head>
6
+ <title>Code coverage report for email/email.tsx</title>
7
+ <meta charset="utf-8" />
8
+ <link rel="stylesheet" href="../prettify.css" />
9
+ <link rel="stylesheet" href="../base.css" />
10
+ <link rel="shortcut icon" type="image/x-icon" href="../favicon.png" />
11
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
12
+ <style type='text/css'>
13
+ .coverage-summary .sorter {
14
+ background-image: url(../sort-arrow-sprite.png);
15
+ }
16
+ </style>
17
+ </head>
18
+
19
+ <body>
20
+ <div class='wrapper'>
21
+ <div class='pad1'>
22
+ <h1><a href="../index.html">All files</a> / <a href="index.html">email</a> email.tsx</h1>
23
+ <div class='clearfix'>
24
+
25
+ <div class='fl pad1y space-right2'>
26
+ <span class="strong">91.66% </span>
27
+ <span class="quiet">Statements</span>
28
+ <span class='fraction'>33/36</span>
29
+ </div>
30
+
31
+
32
+ <div class='fl pad1y space-right2'>
33
+ <span class="strong">88.09% </span>
34
+ <span class="quiet">Branches</span>
35
+ <span class='fraction'>37/42</span>
36
+ </div>
37
+
38
+
39
+ <div class='fl pad1y space-right2'>
40
+ <span class="strong">100% </span>
41
+ <span class="quiet">Functions</span>
42
+ <span class='fraction'>9/9</span>
43
+ </div>
44
+
45
+
46
+ <div class='fl pad1y space-right2'>
47
+ <span class="strong">91.66% </span>
48
+ <span class="quiet">Lines</span>
49
+ <span class='fraction'>33/36</span>
50
+ </div>
51
+
52
+
53
+ </div>
54
+ <p class="quiet">
55
+ Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56
+ </p>
57
+ <template id="filterTemplate">
58
+ <div class="quiet">
59
+ Filter:
60
+ <input type="search" id="fileSearch">
61
+ </div>
62
+ </template>
63
+ </div>
64
+ <div class='status-line high'></div>
65
+ <pre><table class="coverage">
66
+ <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
+ <a name='L2'></a><a href='#L2'>2</a>
68
+ <a name='L3'></a><a href='#L3'>3</a>
69
+ <a name='L4'></a><a href='#L4'>4</a>
70
+ <a name='L5'></a><a href='#L5'>5</a>
71
+ <a name='L6'></a><a href='#L6'>6</a>
72
+ <a name='L7'></a><a href='#L7'>7</a>
73
+ <a name='L8'></a><a href='#L8'>8</a>
74
+ <a name='L9'></a><a href='#L9'>9</a>
75
+ <a name='L10'></a><a href='#L10'>10</a>
76
+ <a name='L11'></a><a href='#L11'>11</a>
77
+ <a name='L12'></a><a href='#L12'>12</a>
78
+ <a name='L13'></a><a href='#L13'>13</a>
79
+ <a name='L14'></a><a href='#L14'>14</a>
80
+ <a name='L15'></a><a href='#L15'>15</a>
81
+ <a name='L16'></a><a href='#L16'>16</a>
82
+ <a name='L17'></a><a href='#L17'>17</a>
83
+ <a name='L18'></a><a href='#L18'>18</a>
84
+ <a name='L19'></a><a href='#L19'>19</a>
85
+ <a name='L20'></a><a href='#L20'>20</a>
86
+ <a name='L21'></a><a href='#L21'>21</a>
87
+ <a name='L22'></a><a href='#L22'>22</a>
88
+ <a name='L23'></a><a href='#L23'>23</a>
89
+ <a name='L24'></a><a href='#L24'>24</a>
90
+ <a name='L25'></a><a href='#L25'>25</a>
91
+ <a name='L26'></a><a href='#L26'>26</a>
92
+ <a name='L27'></a><a href='#L27'>27</a>
93
+ <a name='L28'></a><a href='#L28'>28</a>
94
+ <a name='L29'></a><a href='#L29'>29</a>
95
+ <a name='L30'></a><a href='#L30'>30</a>
96
+ <a name='L31'></a><a href='#L31'>31</a>
97
+ <a name='L32'></a><a href='#L32'>32</a>
98
+ <a name='L33'></a><a href='#L33'>33</a>
99
+ <a name='L34'></a><a href='#L34'>34</a>
100
+ <a name='L35'></a><a href='#L35'>35</a>
101
+ <a name='L36'></a><a href='#L36'>36</a>
102
+ <a name='L37'></a><a href='#L37'>37</a>
103
+ <a name='L38'></a><a href='#L38'>38</a>
104
+ <a name='L39'></a><a href='#L39'>39</a>
105
+ <a name='L40'></a><a href='#L40'>40</a>
106
+ <a name='L41'></a><a href='#L41'>41</a>
107
+ <a name='L42'></a><a href='#L42'>42</a>
108
+ <a name='L43'></a><a href='#L43'>43</a>
109
+ <a name='L44'></a><a href='#L44'>44</a>
110
+ <a name='L45'></a><a href='#L45'>45</a>
111
+ <a name='L46'></a><a href='#L46'>46</a>
112
+ <a name='L47'></a><a href='#L47'>47</a>
113
+ <a name='L48'></a><a href='#L48'>48</a>
114
+ <a name='L49'></a><a href='#L49'>49</a>
115
+ <a name='L50'></a><a href='#L50'>50</a>
116
+ <a name='L51'></a><a href='#L51'>51</a>
117
+ <a name='L52'></a><a href='#L52'>52</a>
118
+ <a name='L53'></a><a href='#L53'>53</a>
119
+ <a name='L54'></a><a href='#L54'>54</a>
120
+ <a name='L55'></a><a href='#L55'>55</a>
121
+ <a name='L56'></a><a href='#L56'>56</a>
122
+ <a name='L57'></a><a href='#L57'>57</a>
123
+ <a name='L58'></a><a href='#L58'>58</a>
124
+ <a name='L59'></a><a href='#L59'>59</a>
125
+ <a name='L60'></a><a href='#L60'>60</a>
126
+ <a name='L61'></a><a href='#L61'>61</a>
127
+ <a name='L62'></a><a href='#L62'>62</a>
128
+ <a name='L63'></a><a href='#L63'>63</a>
129
+ <a name='L64'></a><a href='#L64'>64</a>
130
+ <a name='L65'></a><a href='#L65'>65</a>
131
+ <a name='L66'></a><a href='#L66'>66</a>
132
+ <a name='L67'></a><a href='#L67'>67</a>
133
+ <a name='L68'></a><a href='#L68'>68</a>
134
+ <a name='L69'></a><a href='#L69'>69</a>
135
+ <a name='L70'></a><a href='#L70'>70</a>
136
+ <a name='L71'></a><a href='#L71'>71</a>
137
+ <a name='L72'></a><a href='#L72'>72</a>
138
+ <a name='L73'></a><a href='#L73'>73</a>
139
+ <a name='L74'></a><a href='#L74'>74</a>
140
+ <a name='L75'></a><a href='#L75'>75</a>
141
+ <a name='L76'></a><a href='#L76'>76</a>
142
+ <a name='L77'></a><a href='#L77'>77</a>
143
+ <a name='L78'></a><a href='#L78'>78</a>
144
+ <a name='L79'></a><a href='#L79'>79</a>
145
+ <a name='L80'></a><a href='#L80'>80</a>
146
+ <a name='L81'></a><a href='#L81'>81</a>
147
+ <a name='L82'></a><a href='#L82'>82</a>
148
+ <a name='L83'></a><a href='#L83'>83</a>
149
+ <a name='L84'></a><a href='#L84'>84</a>
150
+ <a name='L85'></a><a href='#L85'>85</a>
151
+ <a name='L86'></a><a href='#L86'>86</a>
152
+ <a name='L87'></a><a href='#L87'>87</a>
153
+ <a name='L88'></a><a href='#L88'>88</a>
154
+ <a name='L89'></a><a href='#L89'>89</a>
155
+ <a name='L90'></a><a href='#L90'>90</a>
156
+ <a name='L91'></a><a href='#L91'>91</a>
157
+ <a name='L92'></a><a href='#L92'>92</a>
158
+ <a name='L93'></a><a href='#L93'>93</a>
159
+ <a name='L94'></a><a href='#L94'>94</a>
160
+ <a name='L95'></a><a href='#L95'>95</a>
161
+ <a name='L96'></a><a href='#L96'>96</a>
162
+ <a name='L97'></a><a href='#L97'>97</a>
163
+ <a name='L98'></a><a href='#L98'>98</a>
164
+ <a name='L99'></a><a href='#L99'>99</a>
165
+ <a name='L100'></a><a href='#L100'>100</a>
166
+ <a name='L101'></a><a href='#L101'>101</a>
167
+ <a name='L102'></a><a href='#L102'>102</a>
168
+ <a name='L103'></a><a href='#L103'>103</a>
169
+ <a name='L104'></a><a href='#L104'>104</a>
170
+ <a name='L105'></a><a href='#L105'>105</a>
171
+ <a name='L106'></a><a href='#L106'>106</a>
172
+ <a name='L107'></a><a href='#L107'>107</a>
173
+ <a name='L108'></a><a href='#L108'>108</a>
174
+ <a name='L109'></a><a href='#L109'>109</a>
175
+ <a name='L110'></a><a href='#L110'>110</a>
176
+ <a name='L111'></a><a href='#L111'>111</a>
177
+ <a name='L112'></a><a href='#L112'>112</a>
178
+ <a name='L113'></a><a href='#L113'>113</a>
179
+ <a name='L114'></a><a href='#L114'>114</a>
180
+ <a name='L115'></a><a href='#L115'>115</a>
181
+ <a name='L116'></a><a href='#L116'>116</a>
182
+ <a name='L117'></a><a href='#L117'>117</a>
183
+ <a name='L118'></a><a href='#L118'>118</a>
184
+ <a name='L119'></a><a href='#L119'>119</a>
185
+ <a name='L120'></a><a href='#L120'>120</a>
186
+ <a name='L121'></a><a href='#L121'>121</a>
187
+ <a name='L122'></a><a href='#L122'>122</a>
188
+ <a name='L123'></a><a href='#L123'>123</a>
189
+ <a name='L124'></a><a href='#L124'>124</a>
190
+ <a name='L125'></a><a href='#L125'>125</a>
191
+ <a name='L126'></a><a href='#L126'>126</a>
192
+ <a name='L127'></a><a href='#L127'>127</a>
193
+ <a name='L128'></a><a href='#L128'>128</a>
194
+ <a name='L129'></a><a href='#L129'>129</a>
195
+ <a name='L130'></a><a href='#L130'>130</a>
196
+ <a name='L131'></a><a href='#L131'>131</a>
197
+ <a name='L132'></a><a href='#L132'>132</a>
198
+ <a name='L133'></a><a href='#L133'>133</a>
199
+ <a name='L134'></a><a href='#L134'>134</a>
200
+ <a name='L135'></a><a href='#L135'>135</a>
201
+ <a name='L136'></a><a href='#L136'>136</a>
202
+ <a name='L137'></a><a href='#L137'>137</a>
203
+ <a name='L138'></a><a href='#L138'>138</a>
204
+ <a name='L139'></a><a href='#L139'>139</a>
205
+ <a name='L140'></a><a href='#L140'>140</a>
206
+ <a name='L141'></a><a href='#L141'>141</a>
207
+ <a name='L142'></a><a href='#L142'>142</a>
208
+ <a name='L143'></a><a href='#L143'>143</a>
209
+ <a name='L144'></a><a href='#L144'>144</a>
210
+ <a name='L145'></a><a href='#L145'>145</a>
211
+ <a name='L146'></a><a href='#L146'>146</a>
212
+ <a name='L147'></a><a href='#L147'>147</a>
213
+ <a name='L148'></a><a href='#L148'>148</a>
214
+ <a name='L149'></a><a href='#L149'>149</a>
215
+ <a name='L150'></a><a href='#L150'>150</a>
216
+ <a name='L151'></a><a href='#L151'>151</a>
217
+ <a name='L152'></a><a href='#L152'>152</a>
218
+ <a name='L153'></a><a href='#L153'>153</a>
219
+ <a name='L154'></a><a href='#L154'>154</a>
220
+ <a name='L155'></a><a href='#L155'>155</a>
221
+ <a name='L156'></a><a href='#L156'>156</a>
222
+ <a name='L157'></a><a href='#L157'>157</a>
223
+ <a name='L158'></a><a href='#L158'>158</a>
224
+ <a name='L159'></a><a href='#L159'>159</a>
225
+ <a name='L160'></a><a href='#L160'>160</a>
226
+ <a name='L161'></a><a href='#L161'>161</a>
227
+ <a name='L162'></a><a href='#L162'>162</a>
228
+ <a name='L163'></a><a href='#L163'>163</a>
229
+ <a name='L164'></a><a href='#L164'>164</a>
230
+ <a name='L165'></a><a href='#L165'>165</a>
231
+ <a name='L166'></a><a href='#L166'>166</a>
232
+ <a name='L167'></a><a href='#L167'>167</a>
233
+ <a name='L168'></a><a href='#L168'>168</a>
234
+ <a name='L169'></a><a href='#L169'>169</a>
235
+ <a name='L170'></a><a href='#L170'>170</a>
236
+ <a name='L171'></a><a href='#L171'>171</a>
237
+ <a name='L172'></a><a href='#L172'>172</a>
238
+ <a name='L173'></a><a href='#L173'>173</a>
239
+ <a name='L174'></a><a href='#L174'>174</a>
240
+ <a name='L175'></a><a href='#L175'>175</a>
241
+ <a name='L176'></a><a href='#L176'>176</a>
242
+ <a name='L177'></a><a href='#L177'>177</a>
243
+ <a name='L178'></a><a href='#L178'>178</a>
244
+ <a name='L179'></a><a href='#L179'>179</a>
245
+ <a name='L180'></a><a href='#L180'>180</a>
246
+ <a name='L181'></a><a href='#L181'>181</a>
247
+ <a name='L182'></a><a href='#L182'>182</a>
248
+ <a name='L183'></a><a href='#L183'>183</a>
249
+ <a name='L184'></a><a href='#L184'>184</a>
250
+ <a name='L185'></a><a href='#L185'>185</a>
251
+ <a name='L186'></a><a href='#L186'>186</a>
252
+ <a name='L187'></a><a href='#L187'>187</a>
253
+ <a name='L188'></a><a href='#L188'>188</a>
254
+ <a name='L189'></a><a href='#L189'>189</a>
255
+ <a name='L190'></a><a href='#L190'>190</a>
256
+ <a name='L191'></a><a href='#L191'>191</a>
257
+ <a name='L192'></a><a href='#L192'>192</a>
258
+ <a name='L193'></a><a href='#L193'>193</a>
259
+ <a name='L194'></a><a href='#L194'>194</a>
260
+ <a name='L195'></a><a href='#L195'>195</a>
261
+ <a name='L196'></a><a href='#L196'>196</a>
262
+ <a name='L197'></a><a href='#L197'>197</a>
263
+ <a name='L198'></a><a href='#L198'>198</a>
264
+ <a name='L199'></a><a href='#L199'>199</a>
265
+ <a name='L200'></a><a href='#L200'>200</a>
266
+ <a name='L201'></a><a href='#L201'>201</a>
267
+ <a name='L202'></a><a href='#L202'>202</a>
268
+ <a name='L203'></a><a href='#L203'>203</a>
269
+ <a name='L204'></a><a href='#L204'>204</a>
270
+ <a name='L205'></a><a href='#L205'>205</a>
271
+ <a name='L206'></a><a href='#L206'>206</a>
272
+ <a name='L207'></a><a href='#L207'>207</a>
273
+ <a name='L208'></a><a href='#L208'>208</a>
274
+ <a name='L209'></a><a href='#L209'>209</a>
275
+ <a name='L210'></a><a href='#L210'>210</a>
276
+ <a name='L211'></a><a href='#L211'>211</a>
277
+ <a name='L212'></a><a href='#L212'>212</a>
278
+ <a name='L213'></a><a href='#L213'>213</a>
279
+ <a name='L214'></a><a href='#L214'>214</a>
280
+ <a name='L215'></a><a href='#L215'>215</a>
281
+ <a name='L216'></a><a href='#L216'>216</a>
282
+ <a name='L217'></a><a href='#L217'>217</a>
283
+ <a name='L218'></a><a href='#L218'>218</a>
284
+ <a name='L219'></a><a href='#L219'>219</a>
285
+ <a name='L220'></a><a href='#L220'>220</a>
286
+ <a name='L221'></a><a href='#L221'>221</a>
287
+ <a name='L222'></a><a href='#L222'>222</a>
288
+ <a name='L223'></a><a href='#L223'>223</a>
289
+ <a name='L224'></a><a href='#L224'>224</a>
290
+ <a name='L225'></a><a href='#L225'>225</a>
291
+ <a name='L226'></a><a href='#L226'>226</a>
292
+ <a name='L227'></a><a href='#L227'>227</a>
293
+ <a name='L228'></a><a href='#L228'>228</a>
294
+ <a name='L229'></a><a href='#L229'>229</a>
295
+ <a name='L230'></a><a href='#L230'>230</a>
296
+ <a name='L231'></a><a href='#L231'>231</a>
297
+ <a name='L232'></a><a href='#L232'>232</a>
298
+ <a name='L233'></a><a href='#L233'>233</a>
299
+ <a name='L234'></a><a href='#L234'>234</a>
300
+ <a name='L235'></a><a href='#L235'>235</a>
301
+ <a name='L236'></a><a href='#L236'>236</a>
302
+ <a name='L237'></a><a href='#L237'>237</a>
303
+ <a name='L238'></a><a href='#L238'>238</a>
304
+ <a name='L239'></a><a href='#L239'>239</a>
305
+ <a name='L240'></a><a href='#L240'>240</a>
306
+ <a name='L241'></a><a href='#L241'>241</a>
307
+ <a name='L242'></a><a href='#L242'>242</a>
308
+ <a name='L243'></a><a href='#L243'>243</a>
309
+ <a name='L244'></a><a href='#L244'>244</a>
310
+ <a name='L245'></a><a href='#L245'>245</a>
311
+ <a name='L246'></a><a href='#L246'>246</a>
312
+ <a name='L247'></a><a href='#L247'>247</a>
313
+ <a name='L248'></a><a href='#L248'>248</a>
314
+ <a name='L249'></a><a href='#L249'>249</a>
315
+ <a name='L250'></a><a href='#L250'>250</a>
316
+ <a name='L251'></a><a href='#L251'>251</a>
317
+ <a name='L252'></a><a href='#L252'>252</a>
318
+ <a name='L253'></a><a href='#L253'>253</a>
319
+ <a name='L254'></a><a href='#L254'>254</a>
320
+ <a name='L255'></a><a href='#L255'>255</a>
321
+ <a name='L256'></a><a href='#L256'>256</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
322
+ <span class="cline-any cline-neutral">&nbsp;</span>
323
+ <span class="cline-any cline-neutral">&nbsp;</span>
324
+ <span class="cline-any cline-neutral">&nbsp;</span>
325
+ <span class="cline-any cline-neutral">&nbsp;</span>
326
+ <span class="cline-any cline-neutral">&nbsp;</span>
327
+ <span class="cline-any cline-neutral">&nbsp;</span>
328
+ <span class="cline-any cline-neutral">&nbsp;</span>
329
+ <span class="cline-any cline-neutral">&nbsp;</span>
330
+ <span class="cline-any cline-neutral">&nbsp;</span>
331
+ <span class="cline-any cline-neutral">&nbsp;</span>
332
+ <span class="cline-any cline-neutral">&nbsp;</span>
333
+ <span class="cline-any cline-neutral">&nbsp;</span>
334
+ <span class="cline-any cline-neutral">&nbsp;</span>
335
+ <span class="cline-any cline-neutral">&nbsp;</span>
336
+ <span class="cline-any cline-neutral">&nbsp;</span>
337
+ <span class="cline-any cline-neutral">&nbsp;</span>
338
+ <span class="cline-any cline-neutral">&nbsp;</span>
339
+ <span class="cline-any cline-neutral">&nbsp;</span>
340
+ <span class="cline-any cline-neutral">&nbsp;</span>
341
+ <span class="cline-any cline-neutral">&nbsp;</span>
342
+ <span class="cline-any cline-neutral">&nbsp;</span>
343
+ <span class="cline-any cline-neutral">&nbsp;</span>
344
+ <span class="cline-any cline-neutral">&nbsp;</span>
345
+ <span class="cline-any cline-neutral">&nbsp;</span>
346
+ <span class="cline-any cline-neutral">&nbsp;</span>
347
+ <span class="cline-any cline-neutral">&nbsp;</span>
348
+ <span class="cline-any cline-neutral">&nbsp;</span>
349
+ <span class="cline-any cline-neutral">&nbsp;</span>
350
+ <span class="cline-any cline-neutral">&nbsp;</span>
351
+ <span class="cline-any cline-neutral">&nbsp;</span>
352
+ <span class="cline-any cline-neutral">&nbsp;</span>
353
+ <span class="cline-any cline-neutral">&nbsp;</span>
354
+ <span class="cline-any cline-neutral">&nbsp;</span>
355
+ <span class="cline-any cline-neutral">&nbsp;</span>
356
+ <span class="cline-any cline-neutral">&nbsp;</span>
357
+ <span class="cline-any cline-neutral">&nbsp;</span>
358
+ <span class="cline-any cline-neutral">&nbsp;</span>
359
+ <span class="cline-any cline-neutral">&nbsp;</span>
360
+ <span class="cline-any cline-neutral">&nbsp;</span>
361
+ <span class="cline-any cline-neutral">&nbsp;</span>
362
+ <span class="cline-any cline-neutral">&nbsp;</span>
363
+ <span class="cline-any cline-neutral">&nbsp;</span>
364
+ <span class="cline-any cline-neutral">&nbsp;</span>
365
+ <span class="cline-any cline-neutral">&nbsp;</span>
366
+ <span class="cline-any cline-neutral">&nbsp;</span>
367
+ <span class="cline-any cline-neutral">&nbsp;</span>
368
+ <span class="cline-any cline-neutral">&nbsp;</span>
369
+ <span class="cline-any cline-neutral">&nbsp;</span>
370
+ <span class="cline-any cline-neutral">&nbsp;</span>
371
+ <span class="cline-any cline-neutral">&nbsp;</span>
372
+ <span class="cline-any cline-neutral">&nbsp;</span>
373
+ <span class="cline-any cline-neutral">&nbsp;</span>
374
+ <span class="cline-any cline-neutral">&nbsp;</span>
375
+ <span class="cline-any cline-neutral">&nbsp;</span>
376
+ <span class="cline-any cline-neutral">&nbsp;</span>
377
+ <span class="cline-any cline-neutral">&nbsp;</span>
378
+ <span class="cline-any cline-neutral">&nbsp;</span>
379
+ <span class="cline-any cline-neutral">&nbsp;</span>
380
+ <span class="cline-any cline-neutral">&nbsp;</span>
381
+ <span class="cline-any cline-neutral">&nbsp;</span>
382
+ <span class="cline-any cline-neutral">&nbsp;</span>
383
+ <span class="cline-any cline-neutral">&nbsp;</span>
384
+ <span class="cline-any cline-neutral">&nbsp;</span>
385
+ <span class="cline-any cline-neutral">&nbsp;</span>
386
+ <span class="cline-any cline-neutral">&nbsp;</span>
387
+ <span class="cline-any cline-neutral">&nbsp;</span>
388
+ <span class="cline-any cline-neutral">&nbsp;</span>
389
+ <span class="cline-any cline-neutral">&nbsp;</span>
390
+ <span class="cline-any cline-neutral">&nbsp;</span>
391
+ <span class="cline-any cline-neutral">&nbsp;</span>
392
+ <span class="cline-any cline-neutral">&nbsp;</span>
393
+ <span class="cline-any cline-neutral">&nbsp;</span>
394
+ <span class="cline-any cline-neutral">&nbsp;</span>
395
+ <span class="cline-any cline-neutral">&nbsp;</span>
396
+ <span class="cline-any cline-neutral">&nbsp;</span>
397
+ <span class="cline-any cline-neutral">&nbsp;</span>
398
+ <span class="cline-any cline-neutral">&nbsp;</span>
399
+ <span class="cline-any cline-neutral">&nbsp;</span>
400
+ <span class="cline-any cline-neutral">&nbsp;</span>
401
+ <span class="cline-any cline-neutral">&nbsp;</span>
402
+ <span class="cline-any cline-neutral">&nbsp;</span>
403
+ <span class="cline-any cline-neutral">&nbsp;</span>
404
+ <span class="cline-any cline-neutral">&nbsp;</span>
405
+ <span class="cline-any cline-neutral">&nbsp;</span>
406
+ <span class="cline-any cline-neutral">&nbsp;</span>
407
+ <span class="cline-any cline-neutral">&nbsp;</span>
408
+ <span class="cline-any cline-neutral">&nbsp;</span>
409
+ <span class="cline-any cline-neutral">&nbsp;</span>
410
+ <span class="cline-any cline-neutral">&nbsp;</span>
411
+ <span class="cline-any cline-neutral">&nbsp;</span>
412
+ <span class="cline-any cline-neutral">&nbsp;</span>
413
+ <span class="cline-any cline-neutral">&nbsp;</span>
414
+ <span class="cline-any cline-neutral">&nbsp;</span>
415
+ <span class="cline-any cline-neutral">&nbsp;</span>
416
+ <span class="cline-any cline-neutral">&nbsp;</span>
417
+ <span class="cline-any cline-neutral">&nbsp;</span>
418
+ <span class="cline-any cline-neutral">&nbsp;</span>
419
+ <span class="cline-any cline-neutral">&nbsp;</span>
420
+ <span class="cline-any cline-neutral">&nbsp;</span>
421
+ <span class="cline-any cline-yes">1x</span>
422
+ <span class="cline-any cline-yes">30x</span>
423
+ <span class="cline-any cline-yes">30x</span>
424
+ <span class="cline-any cline-no">&nbsp;</span>
425
+ <span class="cline-any cline-neutral">&nbsp;</span>
426
+ <span class="cline-any cline-yes">30x</span>
427
+ <span class="cline-any cline-neutral">&nbsp;</span>
428
+ <span class="cline-any cline-yes">30x</span>
429
+ <span class="cline-any cline-neutral">&nbsp;</span>
430
+ <span class="cline-any cline-yes">30x</span>
431
+ <span class="cline-any cline-yes">27x</span>
432
+ <span class="cline-any cline-yes">2x</span>
433
+ <span class="cline-any cline-yes">2x</span>
434
+ <span class="cline-any cline-neutral">&nbsp;</span>
435
+ <span class="cline-any cline-no">&nbsp;</span>
436
+ <span class="cline-any cline-neutral">&nbsp;</span>
437
+ <span class="cline-any cline-neutral">&nbsp;</span>
438
+ <span class="cline-any cline-neutral">&nbsp;</span>
439
+ <span class="cline-any cline-neutral">&nbsp;</span>
440
+ <span class="cline-any cline-neutral">&nbsp;</span>
441
+ <span class="cline-any cline-neutral">&nbsp;</span>
442
+ <span class="cline-any cline-neutral">&nbsp;</span>
443
+ <span class="cline-any cline-neutral">&nbsp;</span>
444
+ <span class="cline-any cline-neutral">&nbsp;</span>
445
+ <span class="cline-any cline-neutral">&nbsp;</span>
446
+ <span class="cline-any cline-neutral">&nbsp;</span>
447
+ <span class="cline-any cline-yes">30x</span>
448
+ <span class="cline-any cline-neutral">&nbsp;</span>
449
+ <span class="cline-any cline-neutral">&nbsp;</span>
450
+ <span class="cline-any cline-neutral">&nbsp;</span>
451
+ <span class="cline-any cline-neutral">&nbsp;</span>
452
+ <span class="cline-any cline-neutral">&nbsp;</span>
453
+ <span class="cline-any cline-yes">30x</span>
454
+ <span class="cline-any cline-neutral">&nbsp;</span>
455
+ <span class="cline-any cline-yes">18x</span>
456
+ <span class="cline-any cline-neutral">&nbsp;</span>
457
+ <span class="cline-any cline-neutral">&nbsp;</span>
458
+ <span class="cline-any cline-neutral">&nbsp;</span>
459
+ <span class="cline-any cline-neutral">&nbsp;</span>
460
+ <span class="cline-any cline-neutral">&nbsp;</span>
461
+ <span class="cline-any cline-yes">18x</span>
462
+ <span class="cline-any cline-neutral">&nbsp;</span>
463
+ <span class="cline-any cline-yes">18x</span>
464
+ <span class="cline-any cline-neutral">&nbsp;</span>
465
+ <span class="cline-any cline-yes">18x</span>
466
+ <span class="cline-any cline-neutral">&nbsp;</span>
467
+ <span class="cline-any cline-neutral">&nbsp;</span>
468
+ <span class="cline-any cline-neutral">&nbsp;</span>
469
+ <span class="cline-any cline-neutral">&nbsp;</span>
470
+ <span class="cline-any cline-neutral">&nbsp;</span>
471
+ <span class="cline-any cline-neutral">&nbsp;</span>
472
+ <span class="cline-any cline-neutral">&nbsp;</span>
473
+ <span class="cline-any cline-neutral">&nbsp;</span>
474
+ <span class="cline-any cline-neutral">&nbsp;</span>
475
+ <span class="cline-any cline-neutral">&nbsp;</span>
476
+ <span class="cline-any cline-neutral">&nbsp;</span>
477
+ <span class="cline-any cline-neutral">&nbsp;</span>
478
+ <span class="cline-any cline-neutral">&nbsp;</span>
479
+ <span class="cline-any cline-neutral">&nbsp;</span>
480
+ <span class="cline-any cline-yes">4x</span>
481
+ <span class="cline-any cline-yes">4x</span>
482
+ <span class="cline-any cline-neutral">&nbsp;</span>
483
+ <span class="cline-any cline-neutral">&nbsp;</span>
484
+ <span class="cline-any cline-neutral">&nbsp;</span>
485
+ <span class="cline-any cline-neutral">&nbsp;</span>
486
+ <span class="cline-any cline-yes">1x</span>
487
+ <span class="cline-any cline-neutral">&nbsp;</span>
488
+ <span class="cline-any cline-neutral">&nbsp;</span>
489
+ <span class="cline-any cline-neutral">&nbsp;</span>
490
+ <span class="cline-any cline-neutral">&nbsp;</span>
491
+ <span class="cline-any cline-neutral">&nbsp;</span>
492
+ <span class="cline-any cline-neutral">&nbsp;</span>
493
+ <span class="cline-any cline-neutral">&nbsp;</span>
494
+ <span class="cline-any cline-neutral">&nbsp;</span>
495
+ <span class="cline-any cline-neutral">&nbsp;</span>
496
+ <span class="cline-any cline-neutral">&nbsp;</span>
497
+ <span class="cline-any cline-yes">12x</span>
498
+ <span class="cline-any cline-neutral">&nbsp;</span>
499
+ <span class="cline-any cline-neutral">&nbsp;</span>
500
+ <span class="cline-any cline-neutral">&nbsp;</span>
501
+ <span class="cline-any cline-neutral">&nbsp;</span>
502
+ <span class="cline-any cline-yes">8x</span>
503
+ <span class="cline-any cline-neutral">&nbsp;</span>
504
+ <span class="cline-any cline-yes">8x</span>
505
+ <span class="cline-any cline-neutral">&nbsp;</span>
506
+ <span class="cline-any cline-neutral">&nbsp;</span>
507
+ <span class="cline-any cline-neutral">&nbsp;</span>
508
+ <span class="cline-any cline-neutral">&nbsp;</span>
509
+ <span class="cline-any cline-neutral">&nbsp;</span>
510
+ <span class="cline-any cline-neutral">&nbsp;</span>
511
+ <span class="cline-any cline-neutral">&nbsp;</span>
512
+ <span class="cline-any cline-neutral">&nbsp;</span>
513
+ <span class="cline-any cline-yes">1x</span>
514
+ <span class="cline-any cline-yes">1x</span>
515
+ <span class="cline-any cline-yes">1x</span>
516
+ <span class="cline-any cline-neutral">&nbsp;</span>
517
+ <span class="cline-any cline-neutral">&nbsp;</span>
518
+ <span class="cline-any cline-neutral">&nbsp;</span>
519
+ <span class="cline-any cline-neutral">&nbsp;</span>
520
+ <span class="cline-any cline-neutral">&nbsp;</span>
521
+ <span class="cline-any cline-neutral">&nbsp;</span>
522
+ <span class="cline-any cline-neutral">&nbsp;</span>
523
+ <span class="cline-any cline-yes">4x</span>
524
+ <span class="cline-any cline-yes">2x</span>
525
+ <span class="cline-any cline-yes">2x</span>
526
+ <span class="cline-any cline-neutral">&nbsp;</span>
527
+ <span class="cline-any cline-neutral">&nbsp;</span>
528
+ <span class="cline-any cline-yes">2x</span>
529
+ <span class="cline-any cline-yes">2x</span>
530
+ <span class="cline-any cline-yes">2x</span>
531
+ <span class="cline-any cline-neutral">&nbsp;</span>
532
+ <span class="cline-any cline-neutral">&nbsp;</span>
533
+ <span class="cline-any cline-no">&nbsp;</span>
534
+ <span class="cline-any cline-neutral">&nbsp;</span>
535
+ <span class="cline-any cline-neutral">&nbsp;</span>
536
+ <span class="cline-any cline-neutral">&nbsp;</span>
537
+ <span class="cline-any cline-neutral">&nbsp;</span>
538
+ <span class="cline-any cline-neutral">&nbsp;</span>
539
+ <span class="cline-any cline-neutral">&nbsp;</span>
540
+ <span class="cline-any cline-neutral">&nbsp;</span>
541
+ <span class="cline-any cline-neutral">&nbsp;</span>
542
+ <span class="cline-any cline-neutral">&nbsp;</span>
543
+ <span class="cline-any cline-neutral">&nbsp;</span>
544
+ <span class="cline-any cline-neutral">&nbsp;</span>
545
+ <span class="cline-any cline-neutral">&nbsp;</span>
546
+ <span class="cline-any cline-neutral">&nbsp;</span>
547
+ <span class="cline-any cline-neutral">&nbsp;</span>
548
+ <span class="cline-any cline-neutral">&nbsp;</span>
549
+ <span class="cline-any cline-neutral">&nbsp;</span>
550
+ <span class="cline-any cline-neutral">&nbsp;</span>
551
+ <span class="cline-any cline-neutral">&nbsp;</span>
552
+ <span class="cline-any cline-neutral">&nbsp;</span>
553
+ <span class="cline-any cline-neutral">&nbsp;</span>
554
+ <span class="cline-any cline-neutral">&nbsp;</span>
555
+ <span class="cline-any cline-neutral">&nbsp;</span>
556
+ <span class="cline-any cline-neutral">&nbsp;</span>
557
+ <span class="cline-any cline-neutral">&nbsp;</span>
558
+ <span class="cline-any cline-neutral">&nbsp;</span>
559
+ <span class="cline-any cline-neutral">&nbsp;</span>
560
+ <span class="cline-any cline-neutral">&nbsp;</span>
561
+ <span class="cline-any cline-neutral">&nbsp;</span>
562
+ <span class="cline-any cline-neutral">&nbsp;</span>
563
+ <span class="cline-any cline-neutral">&nbsp;</span>
564
+ <span class="cline-any cline-yes">1x</span>
565
+ <span class="cline-any cline-yes">27x</span>
566
+ <span class="cline-any cline-neutral">&nbsp;</span>
567
+ <span class="cline-any cline-neutral">&nbsp;</span>
568
+ <span class="cline-any cline-neutral">&nbsp;</span>
569
+ <span class="cline-any cline-neutral">&nbsp;</span>
570
+ <span class="cline-any cline-neutral">&nbsp;</span>
571
+ <span class="cline-any cline-neutral">&nbsp;</span>
572
+ <span class="cline-any cline-neutral">&nbsp;</span>
573
+ <span class="cline-any cline-neutral">&nbsp;</span>
574
+ <span class="cline-any cline-neutral">&nbsp;</span>
575
+ <span class="cline-any cline-yes">1x</span>
576
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">/**
577
+ * @module @incodetech/ui/email
578
+ *
579
+ * Email verification UI component for the Incode Web SDK.
580
+ * Provides a complete, ready-to-use email verification experience
581
+ * with email input and OTP verification.
582
+ *
583
+ * ## UI Usage
584
+ *
585
+ * The Email component can be used as a React/Preact component or as a
586
+ * Web Component (`&lt;incode-email&gt;`).
587
+ *
588
+ * @example React/Preact component usage
589
+ * ```tsx
590
+ * import { Email } from '@incodetech/ui/email';
591
+ * import { setup } from '@incodetech/core';
592
+ *
593
+ * // Configure the SDK first
594
+ * setup({ apiURL: 'https://api.example.com', token: 'your-token' });
595
+ *
596
+ * function App() {
597
+ * const config = {
598
+ * otpVerification: true,
599
+ * otpExpirationInMinutes: 5,
600
+ * prefill: false,
601
+ * };
602
+ *
603
+ * return (
604
+ * &lt;Email
605
+ * config={config}
606
+ * onFinish={() =&gt; console.log('Email verified!')}
607
+ * onError={(error) =&gt; console.error('Error:', error)}
608
+ * /&gt;
609
+ * );
610
+ * }
611
+ * ```
612
+ *
613
+ * @example Web Component usage
614
+ * ```html
615
+ * &lt;!-- Include the script --&gt;
616
+ * &lt;script type="module"&gt;
617
+ * import '@incodetech/ui/email';
618
+ * import { setup } from '@incodetech/core';
619
+ *
620
+ * setup({ apiURL: 'https://api.example.com', token: 'your-token' });
621
+ *
622
+ * const email = document.querySelector('incode-email');
623
+ * email.config = {
624
+ * otpVerification: true,
625
+ * otpExpirationInMinutes: 5,
626
+ * prefill: false,
627
+ * };
628
+ * email.onFinish = () =&gt; console.log('Email verified!');
629
+ * email.onError = (error) =&gt; console.error('Error:', error);
630
+ * &lt;/script&gt;
631
+ *
632
+ * &lt;incode-email&gt;&lt;/incode-email&gt;
633
+ * ```
634
+ *
635
+ * ## Styling
636
+ *
637
+ * The component uses CSS custom properties (variables) for theming.
638
+ * Override these variables to customize the appearance:
639
+ *
640
+ * ```css
641
+ * :root {
642
+ * --button-primary-surface-default: #0066cc;
643
+ * --input-border-default: #cccccc;
644
+ * --text-title: #333333;
645
+ * }
646
+ * ```
647
+ *
648
+ * ## Headless Alternative
649
+ *
650
+ * For complete control over the UI, use the headless `createEmailManager`
651
+ * from `@incodetech/core/email` instead. See the core module documentation.
652
+ */
653
+ import './styles.css';
654
+ import { createEmailManager, type EmailConfig } from '@incodetech/core/email';
655
+ import type { FC } from 'preact/compat';
656
+ import { useEffect, useState } from 'preact/hooks';
657
+ import { useManager } from '@/hooks';
658
+ import { Button } from '../shared/button/button';
659
+ import { IncodeComponent } from '../shared/componentRoot/incodeComponent';
660
+ import { OtpInput } from '../shared/otpInput/otpInput';
661
+ import { Page } from '../shared/page/page';
662
+ import { Spacer } from '../shared/spacer/spacer';
663
+ import {
664
+ type IncodeModuleProps,
665
+ registerIncodeModuleElement,
666
+ } from '../shared/webComponent/incodeModule';
667
+ import { EmailInput } from './emailInput';
668
+ &nbsp;
669
+ /** @internal */
670
+ type EmailContentProps = {
671
+ config: EmailConfig;
672
+ onFinish?: () =&gt; void;
673
+ onError?: (error: string | undefined) =&gt; void;
674
+ };
675
+ &nbsp;
676
+ const EmailContent: FC&lt;EmailContentProps&gt; = ({ config, onFinish, onError }) =&gt; {
677
+ const [state, manager] = useManager(() =&gt; {
678
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (!config) {
679
+ <span class="cstat-no" title="statement not covered" > throw new Error('Email config is required');</span>
680
+ }
681
+ return createEmailManager({ config });
682
+ });
683
+ const [isEmailValid, setIsEmailValid] = useState(false);
684
+ &nbsp;
685
+ useEffect(() =&gt; {
686
+ if (state.status === 'idle' &amp;&amp; manager.load) {
687
+ try {
688
+ manager.load();
689
+ } catch (error) {
690
+ <span class="cstat-no" title="statement not covered" > onError?.(</span>
691
+ error instanceof Error
692
+ ? error.message
693
+ : 'Failed to initialize email verification',
694
+ );
695
+ }
696
+ }
697
+ // eslint-disable-next-line react-hooks/exhaustive-deps
698
+ }, []);
699
+ &nbsp;
700
+ // Handle input states: idle, loadingPrefill, inputting, submitting, sendingOtp
701
+ const isInputState =
702
+ state.status === 'idle' ||
703
+ state.status === 'loadingPrefill' ||
704
+ state.status === 'inputting' ||
705
+ state.status === 'submitting' ||
706
+ state.status === 'sendingOtp';
707
+ &nbsp;
708
+ if (isInputState) {
709
+ const isLoading =
710
+ state.status === 'idle' ||
711
+ state.status === 'loadingPrefill' ||
712
+ state.status === 'submitting' ||
713
+ state.status === 'sendingOtp';
714
+ &nbsp;
715
+ const prefilledEmail =
716
+ state.status === 'inputting' ? state.prefilledEmail : undefined;
717
+ const emailError =
718
+ state.status === 'inputting' ? state.emailError : undefined;
719
+ &nbsp;
720
+ return (
721
+ &lt;Page
722
+ className="IncodeEmailPage"
723
+ title="Verify Email"
724
+ subtitle={
725
+ config.otpVerification
726
+ ? 'We will send you a verification code'
727
+ : undefined
728
+ }
729
+ &gt;
730
+ &lt;EmailInput
731
+ prefilledEmail={prefilledEmail}
732
+ emailError={emailError}
733
+ disabled={isLoading}
734
+ onEmailChange={(email, isValid) =&gt; {
735
+ manager.setEmail(email, isValid);
736
+ setIsEmailValid(isValid);
737
+ }}
738
+ /&gt;
739
+ &lt;Spacer /&gt;
740
+ &lt;Button
741
+ onClick={() =&gt; manager.submit()}
742
+ disabled={!isEmailValid}
743
+ isLoading={isLoading}
744
+ data-testid="email-submit"
745
+ &gt;
746
+ Continue
747
+ &lt;/Button&gt;
748
+ &lt;/Page&gt;
749
+ );
750
+ }
751
+ &nbsp;
752
+ if (
753
+ state.status === 'awaitingOtp' ||
754
+ state.status === 'verifyingOtp' ||
755
+ state.status === 'otpError'
756
+ ) {
757
+ const isVerifying = state.status === 'verifyingOtp';
758
+ &nbsp;
759
+ return (
760
+ &lt;Page
761
+ className="IncodeEmailPage IncodeEmailOtpPage"
762
+ title="Enter Verification Code"
763
+ &gt;
764
+ &lt;OtpInput
765
+ resendTimer={state.status === 'awaitingOtp' ? state.resendTimer : 0}
766
+ canResend={state.status === 'awaitingOtp' ? state.canResend : false}
767
+ error={state.status === 'otpError' ? state.error : undefined}
768
+ onSubmit={(code) =&gt; manager.submitOtp(code)}
769
+ onResend={() =&gt; manager.resendOtp()}
770
+ onBack={() =&gt; manager.back()}
771
+ backLinkText="change email address"
772
+ isLoading={isVerifying}
773
+ /&gt;
774
+ &lt;/Page&gt;
775
+ );
776
+ }
777
+ &nbsp;
778
+ if (state.status === 'success') {
779
+ onFinish?.();
780
+ return null;
781
+ }
782
+ &nbsp;
783
+ <span class="missing-if-branch" title="else path not taken" >E</span>if (state.status === 'error') {
784
+ onError?.(state.error);
785
+ return null;
786
+ }
787
+ &nbsp;
788
+ <span class="cstat-no" title="statement not covered" > return null;</span>
789
+ };
790
+ &nbsp;
791
+ /**
792
+ * Props for the Email component
793
+ */
794
+ type EmailProps = IncodeModuleProps&lt;EmailConfig&gt;;
795
+ &nbsp;
796
+ /**
797
+ * Email verification UI component.
798
+ *
799
+ * Provides a complete email verification experience including:
800
+ * - Email address input with validation
801
+ * - OTP code entry with resend functionality
802
+ * - Loading states and error handling
803
+ *
804
+ * @example Basic usage
805
+ * ```tsx
806
+ * &lt;Email
807
+ * config={{
808
+ * otpVerification: true,
809
+ * otpExpirationInMinutes: 5,
810
+ * prefill: false,
811
+ * }}
812
+ * onFinish={() =&gt; router.push('/next-step')}
813
+ * onError={(err) =&gt; toast.error(err)}
814
+ * /&gt;
815
+ * ```
816
+ *
817
+ * @see {@link createEmailManager} for headless usage
818
+ */
819
+ export const Email: FC&lt;EmailProps&gt; = ({ config, onFinish, onError }) =&gt; {
820
+ return (
821
+ &lt;IncodeComponent&gt;
822
+ {config ? (
823
+ &lt;EmailContent config={config} onFinish={onFinish} onError={onError} /&gt;
824
+ ) : <span class="branch-1 cbranch-no" title="branch not covered" >null}</span>
825
+ &lt;/IncodeComponent&gt;
826
+ );
827
+ };
828
+ &nbsp;
829
+ // Register as a Web Component
830
+ registerIncodeModuleElement(Email, 'incode-email');
831
+ &nbsp;</pre></td></tr></table></pre>
832
+
833
+ <div class='push'></div><!-- for sticky footer -->
834
+ </div><!-- /wrapper -->
835
+ <div class='footer quiet pad2 space-top1 center small'>
836
+ Code coverage generated by
837
+ <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
838
+ at 2025-12-31T22:12:31.439Z
839
+ </div>
840
+ <script src="../prettify.js"></script>
841
+ <script>
842
+ window.onload = function () {
843
+ prettyPrint();
844
+ };
845
+ </script>
846
+ <script src="../sorter.js"></script>
847
+ <script src="../block-navigation.js"></script>
848
+ </body>
849
+ </html>
850
+