@ory/elements-react 0.0.0-pr.e3d2b7e1 → 0.0.0-pr.f1d09ee2

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 (184) hide show
  1. package/CHANGELOG.md +224 -0
  2. package/DEVELOPMENT.md +19 -4
  3. package/README.md +253 -4
  4. package/babel.config.js +10 -0
  5. package/dist/client/frontendClient.d.mts +5 -2
  6. package/dist/client/frontendClient.d.ts +5 -2
  7. package/dist/client/frontendClient.js +25 -2
  8. package/dist/client/frontendClient.js.map +1 -1
  9. package/dist/client/frontendClient.mjs +25 -2
  10. package/dist/client/frontendClient.mjs.map +1 -1
  11. package/dist/client/index.js +3 -3
  12. package/dist/index.d.mts +60 -11
  13. package/dist/index.d.ts +60 -11
  14. package/dist/index.js +915 -346
  15. package/dist/index.js.map +1 -1
  16. package/dist/index.mjs +918 -350
  17. package/dist/index.mjs.map +1 -1
  18. package/dist/theme/default/index.css +187 -125
  19. package/dist/theme/default/index.css.map +1 -1
  20. package/dist/theme/default/index.d.mts +31 -5
  21. package/dist/theme/default/index.d.ts +31 -5
  22. package/dist/theme/default/index.js +4279 -828
  23. package/dist/theme/default/index.js.map +1 -1
  24. package/dist/theme/default/index.mjs +4333 -804
  25. package/dist/theme/default/index.mjs.map +1 -1
  26. package/package.json +22 -15
  27. package/tailwind/generated/default-variables.css +1 -1
  28. package/tsconfig.json +3 -2
  29. package/.storybook/global.css +0 -7
  30. package/.storybook/main.ts +0 -50
  31. package/.storybook/preview-head.html +0 -15
  32. package/.storybook/preview.tsx +0 -68
  33. package/.storybook/public/InterVariable.woff2 +0 -0
  34. package/.storybook/public/inter.css +0 -8
  35. package/.stub-responses/login/1fa/all-methods/initial-form.json +0 -245
  36. package/.stub-responses/login/1fa/all-methods/missing-email.json +0 -263
  37. package/.stub-responses/login/1fa/all-methods/wrong-credentials.json +0 -252
  38. package/.stub-responses/login/1fa/code/code-input.json +0 -135
  39. package/.stub-responses/login/1fa/code/initial-form.json +0 -173
  40. package/.stub-responses/login/1fa/code/invalid-account.json +0 -182
  41. package/.stub-responses/login/1fa/code/missing-email.json +0 -182
  42. package/.stub-responses/login/1fa/code/wrong-credentials.json +0 -124
  43. package/.stub-responses/login/1fa/none/initial-form.json +0 -33
  44. package/.stub-responses/login/1fa/oidc/credential-select-password.json +0 -120
  45. package/.stub-responses/login/1fa/oidc/credential-select.json +0 -81
  46. package/.stub-responses/login/1fa/oidc/initial-form.json +0 -279
  47. package/.stub-responses/login/1fa/passkey/initial-form.json +0 -122
  48. package/.stub-responses/login/1fa/password/initial-form.json +0 -154
  49. package/.stub-responses/login/1fa/password/missing-email.json +0 -172
  50. package/.stub-responses/login/1fa/password/wrong-credentials.json +0 -163
  51. package/.stub-responses/login/1fa/webauthn/initial-form.json +0 -76
  52. package/.stub-responses/login/1fa/webauthn/invalid-account.json +0 -83
  53. package/.stub-responses/login/1fa/webauthn/show-trigger.json +0 -105
  54. package/.stub-responses/recovery/disabled/initial-form.json +0 -9
  55. package/.stub-responses/recovery/none/initial-form.json +0 -9
  56. package/.stub-responses/registration/one-step/all-methods/initial-form.json +0 -334
  57. package/.stub-responses/registration/one-step/all-methods/missing-fields.json +0 -343
  58. package/.stub-responses/registration/one-step/disabled/initial-form.json +0 -10
  59. package/.stub-responses/registration/one-step/none/initial-form.json +0 -14
  60. package/.stub-responses/registration/one-step/oidc/initial-form.json +0 -338
  61. package/.stub-responses/registration/one-step/passkey/initial-form.json +0 -177
  62. package/.stub-responses/registration/one-step/password/initial-form.json +0 -154
  63. package/.stub-responses/registration/one-step/password/missing-fields.json +0 -172
  64. package/.stub-responses/registration/one-step/password/second-step.json +0 -164
  65. package/.stub-responses/registration/one-step/webauthn/initial-form.json +0 -185
  66. package/.stub-responses/registration/two-step/all-methods/enter-password.json +0 -242
  67. package/.stub-responses/registration/two-step/all-methods/initial-form.json +0 -180
  68. package/.stub-responses/registration/two-step/all-methods/missing-fields.json +0 -189
  69. package/.stub-responses/registration/two-step/all-methods/password-validation-error.json +0 -244
  70. package/.stub-responses/registration/two-step/password/enter-password.json +0 -108
  71. package/.stub-responses/registration/two-step/password/initial-form.json +0 -134
  72. package/.stub-responses/registration/two-step/password/missing-fields.json +0 -143
  73. package/.stub-responses/registration/two-step/password/password-validation-error.json +0 -110
  74. package/.stub-responses/settings/all-methods/change-password.json +0 -381
  75. package/.stub-responses/settings/all-methods/change-trait.json +0 -377
  76. package/.stub-responses/settings/all-methods/initial-form.json +0 -368
  77. package/.stub-responses/settings/oidc/with-provider.json +0 -229
  78. package/.stub-responses/settings/passkey/initial-form.json +0 -256
  79. package/.stub-responses/settings/webauthn/initial-form.json +0 -263
  80. package/.stub-responses/verification/disabled/initial-form.json +0 -9
  81. package/.stub-responses/verification/none/initial-form.json +0 -9
  82. package/stories/components/login/1fa/all.stories.ts +0 -46
  83. package/stories/components/login/1fa/code.stories.ts +0 -64
  84. package/stories/components/login/1fa/custom.stories.tsx +0 -74
  85. package/stories/components/login/1fa/none.stories.tsx +0 -28
  86. package/stories/components/login/1fa/oidc.stories.tsx +0 -140
  87. package/stories/components/login/1fa/passkey.stories.ts +0 -28
  88. package/stories/components/login/1fa/password.stories.ts +0 -46
  89. package/stories/components/login/1fa/webauthn.stories.ts +0 -46
  90. package/stories/components/registration/one-step/all-methods.stories.ts +0 -37
  91. package/stories/components/registration/one-step/password.stories.ts +0 -37
  92. package/stories/components/registration/one-step/webauthn.stories.ts +0 -28
  93. package/stories/components/registration/two-step/all-methods.stories.ts +0 -55
  94. package/stories/components/registration/two-step/password.stories.ts +0 -55
  95. package/stories/components/settings/all.stories.ts +0 -46
  96. package/stories/components/settings/oidc.stories.ts +0 -28
  97. package/stories/components/settings/passkey.stories.ts +0 -28
  98. package/stories/components/settings/webauthn.stories.ts +0 -28
  99. package/stories/pages/error.tsx +0 -29
  100. package/stories/utils.ts +0 -20
  101. package/storybook-static/InterVariable.woff2 +0 -0
  102. package/storybook-static/assets/Color-ERTF36HU-BdkKyVuV.js +0 -1
  103. package/storybook-static/assets/DocsRenderer-CFRXHY34-YqKt61zP.js +0 -595
  104. package/storybook-static/assets/all-methods.stories-B-rqPBX2.js +0 -11
  105. package/storybook-static/assets/all-methods.stories-CmMlhzsx.js +0 -21
  106. package/storybook-static/assets/all.stories-CtQ0yCQi.js +0 -16
  107. package/storybook-static/assets/all.stories-DgIVCzcZ.js +0 -16
  108. package/storybook-static/assets/chunk-H6MOWX77-DTQOW814.js +0 -1
  109. package/storybook-static/assets/code.stories-BbEryDcA.js +0 -26
  110. package/storybook-static/assets/custom.stories-DH2zHar9.js +0 -6
  111. package/storybook-static/assets/entry-preview-CcFGVifh.js +0 -10
  112. package/storybook-static/assets/entry-preview-docs-CyY-8bLe.js +0 -54
  113. package/storybook-static/assets/iframe-C5GAfuxh.js +0 -2
  114. package/storybook-static/assets/index-BVoBHvaS.js +0 -8
  115. package/storybook-static/assets/index-CfOt2XX2.js +0 -24
  116. package/storybook-static/assets/index-DPRSEdy-.js +0 -1
  117. package/storybook-static/assets/index-DrFu-skq.js +0 -6
  118. package/storybook-static/assets/index-FeUjBnvO.js +0 -1
  119. package/storybook-static/assets/index-uubelm5h.js +0 -9
  120. package/storybook-static/assets/initial-form-DWp_1F-f.js +0 -1
  121. package/storybook-static/assets/jsx-runtime-QvZ8i92b.js +0 -9
  122. package/storybook-static/assets/none.stories-TAeRhzd5.js +0 -6
  123. package/storybook-static/assets/oidc.stories-CniWBy7t.js +0 -58
  124. package/storybook-static/assets/oidc.stories-jhWzAyoQ.js +0 -6
  125. package/storybook-static/assets/passkey.stories-CBtjoVSN.js +0 -6
  126. package/storybook-static/assets/passkey.stories-CQU2Xw_t.js +0 -6
  127. package/storybook-static/assets/password.stories-0s6cDl0o.js +0 -11
  128. package/storybook-static/assets/password.stories-B2Wtckz_.js +0 -16
  129. package/storybook-static/assets/password.stories-DX0gkWjH.js +0 -21
  130. package/storybook-static/assets/preview-BBWR9nbA.js +0 -1
  131. package/storybook-static/assets/preview-BPAmP-pY.js +0 -2
  132. package/storybook-static/assets/preview-BWzBA1C2.js +0 -396
  133. package/storybook-static/assets/preview-BXtF2ySE.js +0 -234
  134. package/storybook-static/assets/preview-Cur_8nCX.css +0 -1
  135. package/storybook-static/assets/preview-D77C14du.js +0 -34
  136. package/storybook-static/assets/preview-DCjDUH0w.js +0 -27
  137. package/storybook-static/assets/preview-DFmD0pui.js +0 -1
  138. package/storybook-static/assets/preview-DGUiP6tS.js +0 -7
  139. package/storybook-static/assets/preview-aVwhiz9X.js +0 -1
  140. package/storybook-static/assets/react-18-CtsMCmcS.js +0 -1
  141. package/storybook-static/assets/settings-BqEFC2-V.css +0 -1
  142. package/storybook-static/assets/settings-Bx4osEmB.js +0 -2304
  143. package/storybook-static/assets/webauthn.stories-BzodmV0c.js +0 -6
  144. package/storybook-static/assets/webauthn.stories-DglGm7Ys.js +0 -6
  145. package/storybook-static/assets/webauthn.stories-G9E76Wjj.js +0 -16
  146. package/storybook-static/favicon.svg +0 -1
  147. package/storybook-static/iframe.html +0 -654
  148. package/storybook-static/index.html +0 -173
  149. package/storybook-static/index.json +0 -1
  150. package/storybook-static/inter.css +0 -8
  151. package/storybook-static/nunito-sans-bold-italic.woff2 +0 -0
  152. package/storybook-static/nunito-sans-bold.woff2 +0 -0
  153. package/storybook-static/nunito-sans-italic.woff2 +0 -0
  154. package/storybook-static/nunito-sans-regular.woff2 +0 -0
  155. package/storybook-static/preview-stats.json +0 -2344
  156. package/storybook-static/sb-addons/essentials-actions-2/manager-bundle.js +0 -3
  157. package/storybook-static/sb-addons/essentials-actions-2/manager-bundle.js.LEGAL.txt +0 -0
  158. package/storybook-static/sb-addons/essentials-backgrounds-3/manager-bundle.js +0 -12
  159. package/storybook-static/sb-addons/essentials-backgrounds-3/manager-bundle.js.LEGAL.txt +0 -0
  160. package/storybook-static/sb-addons/essentials-controls-1/manager-bundle.js +0 -394
  161. package/storybook-static/sb-addons/essentials-controls-1/manager-bundle.js.LEGAL.txt +0 -0
  162. package/storybook-static/sb-addons/essentials-measure-6/manager-bundle.js +0 -3
  163. package/storybook-static/sb-addons/essentials-measure-6/manager-bundle.js.LEGAL.txt +0 -0
  164. package/storybook-static/sb-addons/essentials-outline-7/manager-bundle.js +0 -3
  165. package/storybook-static/sb-addons/essentials-outline-7/manager-bundle.js.LEGAL.txt +0 -0
  166. package/storybook-static/sb-addons/essentials-toolbars-5/manager-bundle.js +0 -3
  167. package/storybook-static/sb-addons/essentials-toolbars-5/manager-bundle.js.LEGAL.txt +0 -0
  168. package/storybook-static/sb-addons/essentials-viewport-4/manager-bundle.js +0 -3
  169. package/storybook-static/sb-addons/essentials-viewport-4/manager-bundle.js.LEGAL.txt +0 -0
  170. package/storybook-static/sb-addons/interactions-8/manager-bundle.js +0 -211
  171. package/storybook-static/sb-addons/interactions-8/manager-bundle.js.LEGAL.txt +0 -0
  172. package/storybook-static/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js +0 -3
  173. package/storybook-static/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js.LEGAL.txt +0 -0
  174. package/storybook-static/sb-common-assets/favicon.svg +0 -1
  175. package/storybook-static/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
  176. package/storybook-static/sb-common-assets/nunito-sans-bold.woff2 +0 -0
  177. package/storybook-static/sb-common-assets/nunito-sans-italic.woff2 +0 -0
  178. package/storybook-static/sb-common-assets/nunito-sans-regular.woff2 +0 -0
  179. package/storybook-static/sb-manager/globals-module-info.js +0 -1006
  180. package/storybook-static/sb-manager/globals-runtime.js +0 -54400
  181. package/storybook-static/sb-manager/globals.js +0 -48
  182. package/storybook-static/sb-manager/runtime.js +0 -12089
  183. package/storybook-static/sb-preview/globals.js +0 -33
  184. package/storybook-static/sb-preview/runtime.js +0 -9498
package/CHANGELOG.md CHANGED
@@ -1,3 +1,227 @@
1
+ ## 1.0.0-rc.1 (2025-04-21)
2
+
3
+ ### 🩹 Fixes
4
+
5
+ - re-add missing error message when no methods provided ([#460](https://github.com/ory/elements/pull/460))
6
+ - resend not working for registration ([#468](https://github.com/ory/elements/pull/468))
7
+ - add missing color class to registration footer ([#473](https://github.com/ory/elements/pull/473))
8
+ - resend not working for registration ([#467](https://github.com/ory/elements/pull/467))
9
+
10
+ ### ❤️ Thank You
11
+
12
+ - hackerman @aeneasr
13
+ - Jonas Hungershausen
14
+
15
+ ## 1.0.0-rc.0 (2025-04-17)
16
+
17
+ ### 🚀 Features
18
+
19
+ - add missing translations for de, es and fr ([#456](https://github.com/ory/elements/pull/456))
20
+
21
+ ### 🩹 Fixes
22
+
23
+ - correctly set input field value ([#447](https://github.com/ory/elements/pull/447))
24
+ - add missing settings padding ([#446](https://github.com/ory/elements/pull/446))
25
+ - always omit conflicting keys ([#444](https://github.com/ory/elements/pull/444))
26
+
27
+ ### ❤️ Thank You
28
+
29
+ - hackerman @aeneasr
30
+ - Jonas Hungershausen
31
+
32
+ ## 1.0.0-next.46 (2025-04-16)
33
+
34
+ ### 🩹 Fixes
35
+
36
+ - missing hidden field regression ([#439](https://github.com/ory/elements/pull/439))
37
+ - use correct testid ([#438](https://github.com/ory/elements/pull/438))
38
+
39
+ ### ❤️ Thank You
40
+
41
+ - hackerman @aeneasr
42
+
43
+ ## 1.0.0-next.45 (2025-04-15)
44
+
45
+ ### 🩹 Fixes
46
+
47
+ - add missing test id to scope checkbox label ([#437](https://github.com/ory/elements/pull/437))
48
+ - add missing captcha group to all methods ([#432](https://github.com/ory/elements/pull/432))
49
+
50
+ ### ❤️ Thank You
51
+
52
+ - hackerman @aeneasr
53
+ - Jonas Hungershausen
54
+
55
+ ## 1.0.0-next.44 (2025-04-10)
56
+
57
+ ### 🩹 Fixes
58
+
59
+ - use currentColor in eye icons ([#433](https://github.com/ory/elements/pull/433))
60
+
61
+ ### ❤️ Thank You
62
+
63
+ - Jonas Hungershausen
64
+
65
+ ## 1.0.0-next.43 (2025-04-10)
66
+
67
+ ### 🚀 Features
68
+
69
+ - add missing French translations ([#401](https://github.com/ory/elements/pull/401))
70
+
71
+ ### 🩹 Fixes
72
+
73
+ - two-step registration back button ([#428](https://github.com/ory/elements/pull/428))
74
+ - resolve wcag2aa color contrast issues ([#367](https://github.com/ory/elements/pull/367))
75
+
76
+ ### ❤️ Thank You
77
+
78
+ - hackerman @aeneasr
79
+ - Jonas Hungershausen
80
+ - Jordan Labrosse
81
+
82
+ ## 1.0.0-next.41 (2025-04-07)
83
+
84
+ ### 🩹 Fixes
85
+
86
+ - resolve wcag2aa color contrast issues ([#367](https://github.com/ory/elements/pull/367))
87
+
88
+ ### ❤️ Thank You
89
+
90
+ - Jonas Hungershausen
91
+ - Jordan Labrosse
92
+
93
+ ## 1.0.0-next.40 (2025-04-02)
94
+
95
+ ### 🚀 Features
96
+
97
+ - support SAML-native ([#395](https://github.com/ory/elements/pull/395))
98
+
99
+ ### ❤️ Thank You
100
+
101
+ - hackerman @aeneasr
102
+
103
+ ## 1.0.0-next.39 (2025-03-25)
104
+
105
+ ### 🚀 Features
106
+
107
+ - add SAML group handling ([#390](https://github.com/ory/elements/pull/390))
108
+
109
+ ### ❤️ Thank You
110
+
111
+ - hackerman @aeneasr
112
+
113
+ ## 1.0.0-next.38 (2025-03-24)
114
+
115
+ ### 🩹 Fixes
116
+
117
+ - hide registration link again ([#387](https://github.com/ory/elements/pull/387))
118
+
119
+ ### ❤️ Thank You
120
+
121
+ - hackerman @aeneasr
122
+
123
+ ## 1.0.0-next.37 (2025-03-12)
124
+
125
+ ### 🩹 Fixes
126
+
127
+ - correctly render test id for error card ([#386](https://github.com/ory/elements/pull/386))
128
+
129
+ ### ❤️ Thank You
130
+
131
+ - Jonas Hungershausen
132
+
133
+ ## 1.0.0-next.36 (2025-03-12)
134
+
135
+ ### 🩹 Fixes
136
+
137
+ - handle error messages for selected methods ([#385](https://github.com/ory/elements/pull/385))
138
+
139
+ ### ❤️ Thank You
140
+
141
+ - Pierre Caillaud @pcaillaudm
142
+
143
+ ## 1.0.0-next.35 (2025-03-12)
144
+
145
+ ### 🚀 Features
146
+
147
+ - add more intelligent error screen ([#383](https://github.com/ory/elements/pull/383))
148
+
149
+ ### ❤️ Thank You
150
+
151
+ - Jonas Hungershausen
152
+
153
+ ## 1.0.0-next.34 (2025-03-12)
154
+
155
+ ### 🩹 Fixes
156
+
157
+ - use correct import paths ([#384](https://github.com/ory/elements/pull/384))
158
+
159
+ ### ❤️ Thank You
160
+
161
+ - hackerman @aeneasr
162
+
163
+ ## 1.0.0-next.33 (2025-03-07)
164
+
165
+ ### 🚀 Features
166
+
167
+ - add password toggle to input ([#378](https://github.com/ory/elements/pull/378))
168
+
169
+ ### 🩹 Fixes
170
+
171
+ - validation message regression ([#380](https://github.com/ory/elements/pull/380))
172
+
173
+ ### ❤️ Thank You
174
+
175
+ - Jonas Hungershausen
176
+ - Pierre Caillaud @pcaillaudm
177
+
178
+ ## 1.0.0-next.32 (2025-03-06)
179
+
180
+ ### 🚀 Features
181
+
182
+ - use method selector in 2fa login ([#377](https://github.com/ory/elements/pull/377))
183
+
184
+ ### ❤️ Thank You
185
+
186
+ - Pierre Caillaud @pcaillaudm
187
+
188
+ ## 1.0.0-next.31 (2025-03-06)
189
+
190
+ ### 🚀 Features
191
+
192
+ - support captchas natively in new and old elements ([#372](https://github.com/ory/elements/pull/372))
193
+
194
+ ### 🩹 Fixes
195
+
196
+ - center text on OIDC buttons and debounce state update ([#366](https://github.com/ory/elements/pull/366))
197
+
198
+ ### ❤️ Thank You
199
+
200
+ - hackerman @aeneasr
201
+ - Jonas Hungershausen
202
+
203
+ ## 1.0.0-next.30 (2025-03-05)
204
+
205
+ ### 🩹 Fixes
206
+
207
+ - show possible OIDC connections on login method selector ([#362](https://github.com/ory/elements/pull/362))
208
+ - add correct x/twitter OIDC logo ([#364](https://github.com/ory/elements/pull/364))
209
+
210
+ ### ❤️ Thank You
211
+
212
+ - Jonas Hungershausen
213
+
214
+ ## 1.0.0-next.29 (2025-02-27)
215
+
216
+ ### 🩹 Fixes
217
+
218
+ - remove untranslated aria label from auth list item ([#365](https://github.com/ory/elements/pull/365))
219
+ - spacing in auth method list ([#359](https://github.com/ory/elements/pull/359))
220
+
221
+ ### ❤️ Thank You
222
+
223
+ - Jonas Hungershausen
224
+
1
225
  ## 1.0.0-next.28 (2025-02-20)
2
226
 
3
227
  ### 🩹 Fixes
package/DEVELOPMENT.md CHANGED
@@ -51,13 +51,13 @@ Each flow has its own story in the `packages/elements-react-stories` package. To
51
51
  run the storybook development environment, execute:
52
52
 
53
53
  ```bash
54
- npx nx storybook elements-react-stories
54
+ npx nx storybook @ory/elements-react
55
55
  ```
56
56
 
57
57
  You can also build the Storybook using:
58
58
 
59
59
  ```bash
60
- npx nx build elements-react-stories
60
+ npx nx build @ory/elements-react
61
61
  ```
62
62
 
63
63
  The stories use stub responses
@@ -66,14 +66,29 @@ The stories use stub responses
66
66
 
67
67
  @ory/elements-react and @ory/nextjs is released using nx releases.
68
68
 
69
- There is a helper script located in "./scripts/release.sh".
69
+ There is a helper script located in `./scripts/release.sh`.
70
70
 
71
71
  Usage:
72
72
 
73
73
  ```bash
74
- ./scripts/release.sh @ory/elements-react # or @ory/nextjs
74
+ ./scripts/release.sh <project> <tag>
75
+
76
+ ./scripts/release.sh @ory/elements-react next
75
77
  ```
76
78
 
77
79
  The script asks the user before executing each steps. Please double check
78
80
  CHANGELOG.md and dry run outputs. nx also creates git tags and commits, that
79
81
  should be commited. The script will do that automatically.
82
+
83
+ ### Pre-releasing unmerged changes
84
+
85
+ You can release a PR's changes to npm to test them in a different repository,
86
+ etc. These versions are released on the `pr` npm tag, and will have the version
87
+ `0.0.0-pr.<git hash>`. These releases wont be pushed to master, but you might
88
+ have to revert the `package.json` and `package-lock.json` files.
89
+
90
+ Usage:
91
+
92
+ ```bash
93
+ ./scripts/release.sh @ory/elements-react pr
94
+ ```
package/README.md CHANGED
@@ -202,16 +202,243 @@ import "@ory/elements-react/theme/styles.css"
202
202
 
203
203
  ### Theming
204
204
 
205
- Most styling can be overwritten, by providing your own custom CSS variables:
205
+ The styling for specific elements or groups of elements in the UI can be
206
+ overwritten by providing your own custom CSS variables. For more complex
207
+ customizations see the [Component System](#component-system).
206
208
 
207
209
  ```css
208
210
  :root {
209
- /* To override the text color of the primary buttons */
210
- --button-primary-fg-default: #fffeee;
211
+ /* primitives */
212
+ /* Overriding these may affect more variables "down stream" */
213
+ --ui-100: #f1f5f9;
214
+ --ui-200: #e2e8f0;
215
+ --ui-300: #cbd5e1;
216
+ --ui-400: #94a3b8;
217
+ --ui-50: #f8fafc;
218
+ --ui-500: #64748b;
219
+ --ui-600: #475569;
220
+ --ui-700: #334155;
221
+ --ui-800: #1e293b;
222
+ --ui-900: #0f172a;
223
+ --ui-950: #020617;
224
+ --ui-black: #000000;
225
+ --ui-danger: #dc2626;
226
+ --ui-success: #22c55e;
227
+ --ui-transparent: #ffffff00;
228
+ --ui-warning: #eab308;
229
+ --ui-white: #ffffff;
230
+ /* primitives end */
231
+
232
+ /* brand */
233
+ --brand-100: var(--ui-100);
234
+ --brand-200: var(--ui-300);
235
+ --brand-300: var(--ui-500);
236
+ --brand-400: var(--ui-700);
237
+ --brand-50: var(--ui-50);
238
+ --brand-500: var(--ui-900);
239
+ --brand-600: var(--ui-white);
240
+ --brand-700: var(--ui-200);
241
+ --brand-800: var(--ui-400);
242
+ --brand-900: var(--ui-600);
243
+ --brand-950: var(--ui-800);
244
+ /* brand end */
245
+
246
+ /* interface */
247
+ /* These variables affect "groups" of variables, and are re-used in the more specific variables below */
248
+ --interface-background-brand-primary: var(--brand-500);
249
+ --interface-background-brand-primary-hover: var(--brand-400);
250
+ --interface-background-brand-secondary: var(--brand-50);
251
+ --interface-background-brand-secondary-hover: var(--brand-100);
252
+ --interface-background-default-inverted: var(--ui-900);
253
+ --interface-background-default-inverted-hover: var(--ui-800);
254
+ --interface-background-default-none: var(--ui-transparent);
255
+ --interface-background-default-primary: var(--ui-white);
256
+ --interface-background-default-primary-hover: var(--ui-50);
257
+ --interface-background-default-secondary: var(--ui-50);
258
+ --interface-background-default-secondary-hover: var(--ui-200);
259
+ --interface-background-default-tertiary: var(--ui-200);
260
+ --interface-background-default-tertiary-hover: var(--ui-300);
261
+ --interface-background-disabled-disabled: var(--ui-200);
262
+ --interface-background-validation-danger: var(--ui-danger);
263
+ --interface-background-validation-success: var(--ui-success);
264
+ --interface-background-validation-warning: var(--ui-warning);
265
+ --interface-border-brand-brand: var(--brand-500);
266
+ --interface-border-default-inverted: var(--ui-700);
267
+ --interface-border-default-none: var(--ui-transparent);
268
+ --interface-border-default-primary: var(--ui-300);
269
+ --interface-border-disabled-disabled: var(--ui-300);
270
+ --interface-border-validation-danger: var(--ui-danger);
271
+ --interface-border-validation-success: var(--ui-success);
272
+ --interface-border-validation-warning: var(--ui-warning);
273
+ --interface-foreground-brand-on-primary: var(--brand-50);
274
+ --interface-foreground-brand-on-secondary: var(--brand-950);
275
+ --interface-foreground-brand-primary: var(--brand-500);
276
+ --interface-foreground-brand-secondary: var(--brand-50);
277
+ --interface-foreground-default-inverted: var(--ui-white);
278
+ --interface-foreground-default-primary: var(--ui-900);
279
+ --interface-foreground-default-secondary: var(--ui-700);
280
+ --interface-foreground-default-tertiary: var(--ui-500);
281
+ --interface-foreground-disabled-disabled: var(--ui-300);
282
+ --interface-foreground-disabled-on-disabled: var(--ui-400);
283
+ --interface-foreground-validation-danger: var(--ui-danger);
284
+ --interface-foreground-validation-success: var(--ui-success);
285
+ --interface-foreground-validation-warning: var(--ui-warning);
286
+ /* interface end */
287
+
288
+ /* Specific elements */
289
+ --button-identifier-background-default: var(
290
+ --interface-background-brand-secondary
291
+ );
292
+ --button-identifier-background-hover: var(
293
+ --interface-background-brand-secondary-hover
294
+ );
295
+ --button-identifier-border-border-default: var(
296
+ --interface-border-brand-brand
297
+ );
298
+ --button-identifier-border-border-hover: var(--interface-border-brand-brand);
299
+ --button-identifier-foreground-default: var(
300
+ --interface-foreground-brand-on-secondary
301
+ );
302
+ --button-identifier-foreground-hover: var(
303
+ --interface-foreground-brand-on-secondary
304
+ );
305
+ --button-link-brand-brand: var(--interface-foreground-brand-primary);
306
+ --button-link-brand-brand-hover: var(--interface-foreground-default-primary);
307
+ --button-link-default-primary: var(--interface-foreground-default-primary);
308
+ --button-link-default-primary-hover: var(
309
+ --interface-foreground-brand-primary
310
+ );
311
+ --button-link-default-secondary: var(
312
+ --interface-foreground-default-secondary
313
+ );
314
+ --button-link-default-secondary-hover: var(
315
+ --interface-foreground-default-tertiary
316
+ );
317
+ --button-link-disabled-disabled: var(
318
+ --interface-foreground-disabled-disabled
319
+ );
320
+ --button-primary-background-default: var(
321
+ --interface-background-brand-primary
322
+ );
323
+ --button-primary-background-disabled: var(
324
+ --interface-background-disabled-disabled
325
+ );
326
+ --button-primary-background-hover: var(
327
+ --interface-background-brand-primary-hover
328
+ );
329
+ --button-primary-border-default: var(--interface-border-default-none);
330
+ --button-primary-border-disabled: var(--interface-border-disabled-disabled);
331
+ --button-primary-border-hover: var(--interface-border-default-none);
332
+ --button-primary-foreground-default: var(
333
+ --interface-foreground-brand-on-primary
334
+ );
335
+ --button-primary-foreground-disabled: var(
336
+ --interface-foreground-disabled-on-disabled
337
+ );
338
+ --button-primary-foreground-hover: var(
339
+ --interface-foreground-brand-on-primary
340
+ );
341
+ --button-secondary-background-default: var(
342
+ --interface-background-default-primary
343
+ );
344
+ --button-secondary-background-disabled: var(
345
+ --interface-background-disabled-disabled
346
+ );
347
+ --button-secondary-background-hover: var(
348
+ --interface-background-default-primary-hover
349
+ );
350
+ --button-secondary-border-default: var(--interface-border-default-primary);
351
+ --button-secondary-border-disabled: var(--interface-border-disabled-disabled);
352
+ --button-secondary-border-hover: var(--interface-border-default-primary);
353
+ --button-secondary-foreground-default: var(
354
+ --interface-foreground-default-primary
355
+ );
356
+ --button-secondary-foreground-disabled: var(
357
+ --interface-foreground-disabled-on-disabled
358
+ );
359
+ --button-secondary-foreground-hover: var(
360
+ --interface-foreground-default-secondary
361
+ );
362
+ --button-social-background-default: var(
363
+ --interface-background-default-primary
364
+ );
365
+ --button-social-background-disabled: var(
366
+ --interface-background-disabled-disabled
367
+ );
368
+ --button-social-background-generic-provider: var(
369
+ --interface-background-default-inverted
370
+ );
371
+ --button-social-background-hover: var(
372
+ --interface-background-default-primary-hover
373
+ );
374
+ --button-social-border-default: var(--interface-border-default-primary);
375
+ --button-social-border-disabled: var(--interface-border-disabled-disabled);
376
+ --button-social-border-generic-provider: var(--interface-border-default-none);
377
+ --button-social-border-hover: var(--interface-border-default-primary);
378
+ --button-social-foreground-default: var(
379
+ --interface-foreground-default-primary
380
+ );
381
+ --button-social-foreground-disabled: var(
382
+ --interface-foreground-disabled-on-disabled
383
+ );
384
+ --button-social-foreground-generic-provider: var(
385
+ --interface-foreground-default-inverted
386
+ );
387
+ --button-social-foreground-hover: var(
388
+ --interface-foreground-default-secondary
389
+ );
390
+ --checkbox-background-checked: var(--interface-background-brand-primary);
391
+ --checkbox-background-default: var(--interface-background-default-secondary);
392
+ --checkbox-border-checkbox-border-checked: var(
393
+ --interface-border-brand-brand
394
+ );
395
+ --checkbox-border-checkbox-border-default: var(
396
+ --interface-border-default-primary
397
+ );
398
+ --checkbox-foreground-checked: var(--interface-foreground-brand-on-primary);
399
+ --checkbox-foreground-default: var(--interface-foreground-default-primary);
400
+ --form-background-default: var(--interface-background-default-primary);
401
+ --form-border-default: var(--interface-border-default-primary);
402
+ --input-background-default: var(--interface-background-default-primary);
403
+ --input-background-disabled: var(--interface-background-disabled-disabled);
404
+ --input-background-hover: var(--interface-background-default-primary-hover);
405
+ --input-border-default: var(--interface-border-default-primary);
406
+ --input-border-disabled: var(--interface-border-disabled-disabled);
407
+ --input-border-focus: var(--interface-border-brand-brand);
408
+ --input-border-hover: var(--interface-border-default-primary);
409
+ --input-foreground-disabled: var(--interface-foreground-disabled-on-disabled);
410
+ --input-foreground-primary: var(--interface-foreground-default-primary);
411
+ --input-foreground-secondary: var(--interface-foreground-default-secondary);
412
+ --input-foreground-tertiary: var(--interface-foreground-default-tertiary);
413
+ --ory-background-default: var(--interface-background-default-primary);
414
+ --ory-border-default: var(--interface-border-default-primary);
415
+ --ory-foreground-default: var(--interface-foreground-default-primary);
416
+ --radio-background-checked: var(--interface-background-brand-primary);
417
+ --radio-background-default: var(--interface-background-default-secondary);
418
+ --radio-border-checked: var(--interface-border-brand-brand);
419
+ --radio-border-default: var(--interface-border-default-primary);
420
+ --radio-foreground-checked: var(--interface-foreground-brand-on-primary);
421
+ --radio-foreground-default: var(--interface-foreground-default-primary);
422
+ --toggle-background-checked: var(--interface-background-brand-primary);
423
+ --toggle-background-default: var(--interface-background-default-secondary);
424
+ --toggle-border-checked: var(--interface-border-default-none);
425
+ --toggle-border-default: var(--interface-border-default-primary);
426
+ --toggle-foreground-checked: var(--interface-foreground-brand-on-primary);
427
+ --toggle-foreground-default: var(--interface-foreground-brand-primary);
428
+ /* Specific elements end */
429
+
430
+ /* border radius */
431
+ --border-radius-buttons: 0.25rem;
432
+ --border-radius-forms: 0.25rem;
433
+ --border-radius-general: 0.25rem;
434
+ --border-radius-branding: 0.5rem;
435
+ --border-radius-cards: 0.75rem;
436
+ --border-radius-identifier: 62.4375rem;
437
+ /* border radius end*/
211
438
  }
212
439
  ```
213
440
 
214
- ### Component overrides
441
+ ### Component system
215
442
 
216
443
  Many components in Ory Elements can be overriden with your own implementation.
217
444
  Ory Elements also provides useful hooks that be used inside of your custom
@@ -249,6 +476,28 @@ export default async function RegistrationPage({ searchParams }: PageProps) {
249
476
  }
250
477
  ```
251
478
 
479
+ ### internationalization (i18n)
480
+
481
+ `@ory/elements-react` comes with default translations for many languages.
482
+ Additionally, it provides a way to override the default messages, through the
483
+ `locale` property of the `OryClientConfiguration`.
484
+
485
+ ```ts
486
+ const config = {
487
+ intl: {
488
+ locale: "en", // Or any of the other supported locales.
489
+ customTranslations: {
490
+ en: {
491
+ "identities.messages.1040006": "This is a custom translation",
492
+ },
493
+ },
494
+ },
495
+ }
496
+ ```
497
+
498
+ For a full list of messages, see
499
+ [en.json](https://github.com/ory/elements/blob/main/packages/elements-react/src/locales/en.json).
500
+
252
501
  ## Development
253
502
 
254
503
  See [DEVELOPMENT.md](./DEVELOPMENT.md).
@@ -0,0 +1,10 @@
1
+ // Copyright © 2025 Ory Corp
2
+ // SPDX-License-Identifier: Apache-2.0
3
+
4
+ module.exports = {
5
+ presets: [
6
+ "@babel/preset-env",
7
+ "@babel/preset-react",
8
+ "@babel/preset-typescript",
9
+ ],
10
+ }
@@ -1,7 +1,10 @@
1
- import { ConfigurationParameters, FrontendApi } from '@ory/client-fetch';
1
+ import { ConfigurationParameters, FrontendApi, OAuth2Api } from '@ory/client-fetch';
2
2
 
3
3
  declare function frontendClient({ forceBaseUrl, ...opts }?: Partial<ConfigurationParameters & {
4
4
  forceBaseUrl?: string;
5
5
  }>): FrontendApi;
6
+ declare function oauth2Client({ forceBaseUrl, ...opts }?: Partial<ConfigurationParameters & {
7
+ forceBaseUrl?: string;
8
+ }>): OAuth2Api;
6
9
 
7
- export { frontendClient };
10
+ export { frontendClient, oauth2Client };
@@ -1,7 +1,10 @@
1
- import { ConfigurationParameters, FrontendApi } from '@ory/client-fetch';
1
+ import { ConfigurationParameters, FrontendApi, OAuth2Api } from '@ory/client-fetch';
2
2
 
3
3
  declare function frontendClient({ forceBaseUrl, ...opts }?: Partial<ConfigurationParameters & {
4
4
  forceBaseUrl?: string;
5
5
  }>): FrontendApi;
6
+ declare function oauth2Client({ forceBaseUrl, ...opts }?: Partial<ConfigurationParameters & {
7
+ forceBaseUrl?: string;
8
+ }>): OAuth2Api;
6
9
 
7
- export { frontendClient };
10
+ export { frontendClient, oauth2Client };
@@ -19,7 +19,8 @@ var __copyProps = (to, from, except, desc) => {
19
19
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
20
  var frontendClient_exports = {};
21
21
  __export(frontendClient_exports, {
22
- frontendClient: () => frontendClient
22
+ frontendClient: () => frontendClient,
23
+ oauth2Client: () => oauth2Client
23
24
  });
24
25
  module.exports = __toCommonJS(frontendClient_exports);
25
26
  var import_client_fetch = require("@ory/client-fetch");
@@ -45,8 +46,30 @@ function frontendClient({
45
46
  });
46
47
  return new import_client_fetch.FrontendApi(config);
47
48
  }
49
+ function oauth2Client({
50
+ forceBaseUrl,
51
+ ...opts
52
+ } = {
53
+ credentials: "include"
54
+ }) {
55
+ var _a;
56
+ const basePath = forceBaseUrl != null ? forceBaseUrl : (0, import_config.guessPotentiallyProxiedOrySdkUrl)({
57
+ knownProxiedUrl: window.location.origin
58
+ });
59
+ const config = new import_client_fetch.Configuration({
60
+ ...opts,
61
+ basePath: basePath == null ? void 0 : basePath.replace(/\/$/, ""),
62
+ credentials: (_a = opts.credentials) != null ? _a : "include",
63
+ headers: {
64
+ Accept: "application/json",
65
+ ...opts.headers
66
+ }
67
+ });
68
+ return new import_client_fetch.OAuth2Api(config);
69
+ }
48
70
  // Annotate the CommonJS export names for ESM import in node:
49
71
  0 && (module.exports = {
50
- frontendClient
72
+ frontendClient,
73
+ oauth2Client
51
74
  });
52
75
  //# sourceMappingURL=frontendClient.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/client/frontendClient.ts"],"sourcesContent":["// Copyright © 2024 Ory Corp\n// SPDX-License-Identifier: Apache-2.0\n\"use client\"\nimport {\n Configuration,\n ConfigurationParameters,\n FrontendApi,\n} from \"@ory/client-fetch\"\nimport { guessPotentiallyProxiedOrySdkUrl } from \"./config\"\n\nexport function frontendClient(\n {\n forceBaseUrl,\n ...opts\n }: Partial<ConfigurationParameters & { forceBaseUrl?: string }> = {\n credentials: \"include\",\n },\n) {\n const basePath =\n forceBaseUrl ??\n guessPotentiallyProxiedOrySdkUrl({\n knownProxiedUrl: window.location.origin,\n })\n\n const config = new Configuration({\n ...opts,\n basePath: basePath?.replace(/\\/$/, \"\"),\n credentials: opts.credentials ?? \"include\",\n headers: {\n Accept: \"application/json\",\n ...opts.headers,\n },\n })\n return new FrontendApi(config)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAIO;AACP,oBAAiD;AAE1C,SAAS,eACd;AAAA,EACE;AAAA,EACA,GAAG;AACL,IAAkE;AAAA,EAChE,aAAa;AACf,GACA;AAjBF;AAkBE,QAAM,WACJ,0CACA,gDAAiC;AAAA,IAC/B,iBAAiB,OAAO,SAAS;AAAA,EACnC,CAAC;AAEH,QAAM,SAAS,IAAI,kCAAc;AAAA,IAC/B,GAAG;AAAA,IACH,UAAU,qCAAU,QAAQ,OAAO;AAAA,IACnC,cAAa,UAAK,gBAAL,YAAoB;AAAA,IACjC,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,GAAG,KAAK;AAAA,IACV;AAAA,EACF,CAAC;AACD,SAAO,IAAI,gCAAY,MAAM;AAC/B;","names":[]}
1
+ {"version":3,"sources":["../../src/client/frontendClient.ts"],"sourcesContent":["// Copyright © 2024 Ory Corp\n// SPDX-License-Identifier: Apache-2.0\n\"use client\"\nimport {\n Configuration,\n ConfigurationParameters,\n FrontendApi,\n OAuth2Api,\n} from \"@ory/client-fetch\"\nimport { guessPotentiallyProxiedOrySdkUrl } from \"./config\"\n\nexport function frontendClient(\n {\n forceBaseUrl,\n ...opts\n }: Partial<ConfigurationParameters & { forceBaseUrl?: string }> = {\n credentials: \"include\",\n },\n) {\n const basePath =\n forceBaseUrl ??\n guessPotentiallyProxiedOrySdkUrl({\n knownProxiedUrl: window.location.origin,\n })\n\n const config = new Configuration({\n ...opts,\n basePath: basePath?.replace(/\\/$/, \"\"),\n credentials: opts.credentials ?? \"include\",\n headers: {\n Accept: \"application/json\",\n ...opts.headers,\n },\n })\n return new FrontendApi(config)\n}\n\nexport function oauth2Client(\n {\n forceBaseUrl,\n ...opts\n }: Partial<ConfigurationParameters & { forceBaseUrl?: string }> = {\n credentials: \"include\",\n },\n) {\n const basePath =\n forceBaseUrl ??\n guessPotentiallyProxiedOrySdkUrl({\n knownProxiedUrl: window.location.origin,\n })\n\n const config = new Configuration({\n ...opts,\n basePath: basePath?.replace(/\\/$/, \"\"),\n credentials: opts.credentials ?? \"include\",\n headers: {\n Accept: \"application/json\",\n ...opts.headers,\n },\n })\n return new OAuth2Api(config)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAKO;AACP,oBAAiD;AAE1C,SAAS,eACd;AAAA,EACE;AAAA,EACA,GAAG;AACL,IAAkE;AAAA,EAChE,aAAa;AACf,GACA;AAlBF;AAmBE,QAAM,WACJ,0CACA,gDAAiC;AAAA,IAC/B,iBAAiB,OAAO,SAAS;AAAA,EACnC,CAAC;AAEH,QAAM,SAAS,IAAI,kCAAc;AAAA,IAC/B,GAAG;AAAA,IACH,UAAU,qCAAU,QAAQ,OAAO;AAAA,IACnC,cAAa,UAAK,gBAAL,YAAoB;AAAA,IACjC,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,GAAG,KAAK;AAAA,IACV;AAAA,EACF,CAAC;AACD,SAAO,IAAI,gCAAY,MAAM;AAC/B;AAEO,SAAS,aACd;AAAA,EACE;AAAA,EACA,GAAG;AACL,IAAkE;AAAA,EAChE,aAAa;AACf,GACA;AA5CF;AA6CE,QAAM,WACJ,0CACA,gDAAiC;AAAA,IAC/B,iBAAiB,OAAO,SAAS;AAAA,EACnC,CAAC;AAEH,QAAM,SAAS,IAAI,kCAAc;AAAA,IAC/B,GAAG;AAAA,IACH,UAAU,qCAAU,QAAQ,OAAO;AAAA,IACnC,cAAa,UAAK,gBAAL,YAAoB;AAAA,IACjC,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,GAAG,KAAK;AAAA,IACV;AAAA,EACF,CAAC;AACD,SAAO,IAAI,8BAAU,MAAM;AAC7B;","names":[]}
@@ -1,7 +1,8 @@
1
1
  "use client";
2
2
  import {
3
3
  Configuration,
4
- FrontendApi
4
+ FrontendApi,
5
+ OAuth2Api
5
6
  } from "@ory/client-fetch";
6
7
  import { guessPotentiallyProxiedOrySdkUrl } from "./config";
7
8
  function frontendClient({
@@ -25,7 +26,29 @@ function frontendClient({
25
26
  });
26
27
  return new FrontendApi(config);
27
28
  }
29
+ function oauth2Client({
30
+ forceBaseUrl,
31
+ ...opts
32
+ } = {
33
+ credentials: "include"
34
+ }) {
35
+ var _a;
36
+ const basePath = forceBaseUrl != null ? forceBaseUrl : guessPotentiallyProxiedOrySdkUrl({
37
+ knownProxiedUrl: window.location.origin
38
+ });
39
+ const config = new Configuration({
40
+ ...opts,
41
+ basePath: basePath == null ? void 0 : basePath.replace(/\/$/, ""),
42
+ credentials: (_a = opts.credentials) != null ? _a : "include",
43
+ headers: {
44
+ Accept: "application/json",
45
+ ...opts.headers
46
+ }
47
+ });
48
+ return new OAuth2Api(config);
49
+ }
28
50
  export {
29
- frontendClient
51
+ frontendClient,
52
+ oauth2Client
30
53
  };
31
54
  //# sourceMappingURL=frontendClient.mjs.map