@ory/elements-react 0.0.0-pr.3a98de9

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 (62) hide show
  1. package/CHANGELOG.md +455 -0
  2. package/DEVELOPMENT.md +94 -0
  3. package/LICENSE +201 -0
  4. package/README.md +254 -0
  5. package/babel.config.js +10 -0
  6. package/dist/client/config.d.mts +21 -0
  7. package/dist/client/config.d.ts +21 -0
  8. package/dist/client/config.js +77 -0
  9. package/dist/client/config.js.map +1 -0
  10. package/dist/client/config.mjs +51 -0
  11. package/dist/client/config.mjs.map +1 -0
  12. package/dist/client/frontendClient.d.mts +7 -0
  13. package/dist/client/frontendClient.d.ts +7 -0
  14. package/dist/client/frontendClient.js +52 -0
  15. package/dist/client/frontendClient.js.map +1 -0
  16. package/dist/client/frontendClient.mjs +31 -0
  17. package/dist/client/frontendClient.mjs.map +1 -0
  18. package/dist/client/index.d.mts +5 -0
  19. package/dist/client/index.d.ts +5 -0
  20. package/dist/client/index.js +33 -0
  21. package/dist/client/index.js.map +1 -0
  22. package/dist/client/index.mjs +10 -0
  23. package/dist/client/index.mjs.map +1 -0
  24. package/dist/client/session-provider.d.mts +62 -0
  25. package/dist/client/session-provider.d.ts +62 -0
  26. package/dist/client/session-provider.js +96 -0
  27. package/dist/client/session-provider.js.map +1 -0
  28. package/dist/client/session-provider.mjs +71 -0
  29. package/dist/client/session-provider.mjs.map +1 -0
  30. package/dist/client/useSession.d.mts +32 -0
  31. package/dist/client/useSession.d.ts +32 -0
  32. package/dist/client/useSession.js +37 -0
  33. package/dist/client/useSession.js.map +1 -0
  34. package/dist/client/useSession.mjs +13 -0
  35. package/dist/client/useSession.mjs.map +1 -0
  36. package/dist/index.d.mts +596 -0
  37. package/dist/index.d.ts +596 -0
  38. package/dist/index.js +3898 -0
  39. package/dist/index.js.map +1 -0
  40. package/dist/index.mjs +3876 -0
  41. package/dist/index.mjs.map +1 -0
  42. package/dist/theme/default/index.css +1530 -0
  43. package/dist/theme/default/index.css.map +1 -0
  44. package/dist/theme/default/index.d.mts +78 -0
  45. package/dist/theme/default/index.d.ts +78 -0
  46. package/dist/theme/default/index.js +2861 -0
  47. package/dist/theme/default/index.js.map +1 -0
  48. package/dist/theme/default/index.mjs +2859 -0
  49. package/dist/theme/default/index.mjs.map +1 -0
  50. package/dist/theme/default/tailwind/defaults.d.mts +737 -0
  51. package/dist/theme/default/tailwind/defaults.d.ts +737 -0
  52. package/dist/theme/default/tailwind/defaults.js +219 -0
  53. package/dist/theme/default/tailwind/defaults.js.map +1 -0
  54. package/dist/theme/default/tailwind/defaults.mjs +196 -0
  55. package/dist/theme/default/tailwind/defaults.mjs.map +1 -0
  56. package/package.json +95 -0
  57. package/tailwind/defaults.ts +34 -0
  58. package/tailwind/generated/README.md +2 -0
  59. package/tailwind/generated/default-variables.css +216 -0
  60. package/tailwind/generated/variables-processed.json +161 -0
  61. package/tsconfig.json +35 -0
  62. package/tsconfig.runtime.json +4 -0
@@ -0,0 +1,2861 @@
1
+ "use client"
2
+ "use strict";
3
+ var __create = Object.create;
4
+ var __defProp = Object.defineProperty;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getProtoOf = Object.getPrototypeOf;
8
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
9
+ var __export = (target, all) => {
10
+ for (var name in all)
11
+ __defProp(target, name, { get: all[name], enumerable: true });
12
+ };
13
+ var __copyProps = (to, from, except, desc) => {
14
+ if (from && typeof from === "object" || typeof from === "function") {
15
+ for (let key of __getOwnPropNames(from))
16
+ if (!__hasOwnProp.call(to, key) && key !== except)
17
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
18
+ }
19
+ return to;
20
+ };
21
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
22
+ // If the importer is in node compatibility mode or this is not an ESM
23
+ // file that has been converted to a CommonJS file using a Babel-
24
+ // compatible transform (i.e. "__esModule" has not been set), then set
25
+ // "default" to the CommonJS "module.exports" for node compatibility.
26
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
27
+ mod
28
+ ));
29
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
30
+
31
+ // src/theme/default/index.ts
32
+ var default_exports = {};
33
+ __export(default_exports, {
34
+ DefaultButtonSocial: () => DefaultButtonSocial,
35
+ DefaultCard: () => DefaultCard,
36
+ DefaultCardContent: () => DefaultCardContent,
37
+ DefaultCardFooter: () => DefaultCardFooter,
38
+ DefaultCardHeader: () => DefaultCardHeader,
39
+ DefaultCardLayout: () => DefaultCardLayout,
40
+ DefaultCardLogo: () => DefaultCardLogo,
41
+ DefaultCurrentIdentifierButton: () => DefaultCurrentIdentifierButton,
42
+ DefaultFormContainer: () => DefaultFormContainer,
43
+ DefaultMessage: () => DefaultMessage,
44
+ DefaultMessageContainer: () => DefaultMessageContainer,
45
+ Error: () => Error2,
46
+ Login: () => Login,
47
+ Recovery: () => Recovery,
48
+ Registration: () => Registration,
49
+ Settings: () => Settings,
50
+ Verification: () => Verification,
51
+ getOryComponents: () => getOryComponents
52
+ });
53
+ module.exports = __toCommonJS(default_exports);
54
+
55
+ // src/theme/default/assets/ory-badge-horizontal.svg
56
+ var React = __toESM(require("react"));
57
+ var import_jsx_runtime = require("react/jsx-runtime");
58
+ var SvgOryBadgeHorizontal = (props) => {
59
+ var _a, _b;
60
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: [
61
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "#0F172A", d: "M18.007 8h-1.71l2.007-3.996L16.296 0h1.711l1.145 2.301L20.327 0H22z" }),
62
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "#0F172A", fillRule: "evenodd", d: "M12.902 4.86a2.47 2.47 0 0 0 1.796-2.365v-.038C14.687 1.097 13.592 0 12.245 0H9.037v1.44l1.208 1.985H9.04V8h1.51V4.949h.633L13.04 8h1.775zm-.876-1.431h.223c.52 0 .943-.427.943-.953a.95.95 0 0 0-.943-.952h-1.39zM4 0a4 4 0 1 0-.001 7.999A4 4 0 0 0 4 0M1.524 4a2.476 2.476 0 1 0 4.952 0 2.476 2.476 0 0 0-4.952 0", clipRule: "evenodd" })
63
+ ] });
64
+ };
65
+ var ory_badge_horizontal_default = SvgOryBadgeHorizontal;
66
+
67
+ // src/theme/default/assets/ory-badge-vertical.svg
68
+ var React2 = __toESM(require("react"));
69
+ var import_jsx_runtime2 = require("react/jsx-runtime");
70
+ var SvgOryBadgeVertical = (props) => {
71
+ var _a, _b;
72
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: [
73
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "#0F172A", d: "M8 3.993v1.71L4.004 3.697 0 5.704V3.993l2.301-1.145L0 1.673V0z" }),
74
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "#0F172A", fillRule: "evenodd", d: "M4.86 9.099a2.47 2.47 0 0 0-2.365-1.797h-.038C1.097 7.313 0 8.408 0 9.755v3.208h1.44l1.985-1.208v1.204H8v-1.51H4.949v-.633L8 8.96V7.185zm-1.431.875v-.223a.95.95 0 0 0-.953-.943.95.95 0 0 0-.952.943v1.39zM0 18a4 4 0 1 0 8 0 4 4 0 0 0-8 0m4 2.476a2.476 2.476 0 1 0 0-4.952 2.476 2.476 0 0 0 0 4.952", clipRule: "evenodd" })
75
+ ] });
76
+ };
77
+ var ory_badge_vertical_default = SvgOryBadgeVertical;
78
+
79
+ // src/theme/default/components/card/badge.tsx
80
+ var import_jsx_runtime3 = require("react/jsx-runtime");
81
+ function Badge() {
82
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "absolute bg-ory-background-default p-2 font-bold max-sm:bottom-0 max-sm:left-8 max-sm:translate-y-full max-sm:rounded-b-branding sm:right-0 sm:top-8 sm:translate-x-full sm:rounded-r-branding border-ory-border-default border max-sm:py-[7px] sm:pl-[7px]", children: [
83
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ory_badge_horizontal_default, { width: 22, height: 8, className: "sm:hidden" }),
84
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ory_badge_vertical_default, { width: 8, height: 22, className: "max-sm:hidden" })
85
+ ] });
86
+ }
87
+
88
+ // src/theme/default/components/card/content.tsx
89
+ function DefaultCardContent({ children }) {
90
+ return children;
91
+ }
92
+
93
+ // src/theme/default/components/card/footer.tsx
94
+ var import_client_fetch3 = require("@ory/client-fetch");
95
+ var import_elements_react = require("@ory/elements-react");
96
+ var import_react_hook_form = require("react-hook-form");
97
+ var import_react_intl = require("react-intl");
98
+
99
+ // src/theme/default/utils/url.ts
100
+ function restartFlowUrl(flow, fallback) {
101
+ if (flow.requested_aal === "aal2")
102
+ return appendRefresh(appendAal(fallback, "aal1"), true);
103
+ return flow.request_url || appendReturnTo(fallback, flow.return_to);
104
+ }
105
+ function initFlowUrl(sdkUrl, flowType, flow) {
106
+ const result = `${sdkUrl}/self-service/${flowType}/browser`;
107
+ const qs = new URLSearchParams();
108
+ if (flow.oauth2_login_challenge) {
109
+ qs.set("login_challenge", flow.oauth2_login_challenge);
110
+ }
111
+ if (flow.return_to) {
112
+ qs.set("return_to", flow.return_to);
113
+ } else if (typeof window !== "undefined") {
114
+ const searchParams = new URLSearchParams(window.location.search);
115
+ if (searchParams.has("return_to")) {
116
+ qs.set("return_to", searchParams.get("return_to") || "");
117
+ }
118
+ }
119
+ if (qs.toString().length === 0) {
120
+ return result;
121
+ }
122
+ return result + "?" + qs.toString();
123
+ }
124
+ function appendReturnTo(url, returnTo) {
125
+ if (!returnTo) {
126
+ return url;
127
+ }
128
+ const urlObj = new URL(url);
129
+ urlObj.searchParams.set("return_to", returnTo);
130
+ return urlObj.toString();
131
+ }
132
+ function appendAal(url, aal) {
133
+ const urlObj = new URL(url);
134
+ urlObj.searchParams.set("aal", aal);
135
+ return urlObj.toString();
136
+ }
137
+ function appendRefresh(url, refresh) {
138
+ const urlObj = new URL(url);
139
+ urlObj.searchParams.set("refresh", refresh ? "true" : "false");
140
+ return urlObj.toString();
141
+ }
142
+
143
+ // src/util/ui/index.ts
144
+ var import_client_fetch2 = require("@ory/client-fetch");
145
+ var import_react2 = require("react");
146
+
147
+ // src/context/component.tsx
148
+ var import_client_fetch = require("@ory/client-fetch");
149
+ var import_react = require("react");
150
+ var import_jsx_runtime4 = require("react/jsx-runtime");
151
+ var ComponentContext = (0, import_react.createContext)({
152
+ components: null,
153
+ // fine because we throw an error if it's not provided
154
+ nodeSorter: () => 0,
155
+ groupSorter: () => 0
156
+ });
157
+ var defaultGroupOrder = [
158
+ import_client_fetch.UiNodeGroupEnum.Default,
159
+ import_client_fetch.UiNodeGroupEnum.Profile,
160
+ import_client_fetch.UiNodeGroupEnum.Password,
161
+ import_client_fetch.UiNodeGroupEnum.Oidc,
162
+ import_client_fetch.UiNodeGroupEnum.Code,
163
+ import_client_fetch.UiNodeGroupEnum.LookupSecret,
164
+ import_client_fetch.UiNodeGroupEnum.Passkey,
165
+ import_client_fetch.UiNodeGroupEnum.Webauthn,
166
+ import_client_fetch.UiNodeGroupEnum.Totp
167
+ ];
168
+
169
+ // src/util/ui/index.ts
170
+ function nodesToAuthMethodGroups(nodes, excludeAuthMethods = []) {
171
+ var _a;
172
+ const groups = {};
173
+ for (const node of nodes) {
174
+ if (node.type === "script") {
175
+ continue;
176
+ }
177
+ const groupNodes = (_a = groups[node.group]) != null ? _a : [];
178
+ groupNodes.push(node);
179
+ groups[node.group] = groupNodes;
180
+ }
181
+ return Object.values(import_client_fetch2.UiNodeGroupEnum).filter((group) => {
182
+ var _a2;
183
+ return (_a2 = groups[group]) == null ? void 0 : _a2.length;
184
+ }).filter(
185
+ (group) => ![
186
+ import_client_fetch2.UiNodeGroupEnum.Default,
187
+ import_client_fetch2.UiNodeGroupEnum.IdentifierFirst,
188
+ import_client_fetch2.UiNodeGroupEnum.Profile,
189
+ import_client_fetch2.UiNodeGroupEnum.Captcha,
190
+ ...excludeAuthMethods
191
+ ].includes(group)
192
+ );
193
+ }
194
+
195
+ // src/theme/default/components/card/footer.tsx
196
+ var import_jsx_runtime5 = require("react/jsx-runtime");
197
+ function DefaultCardFooter() {
198
+ const { flowType } = (0, import_elements_react.useOryFlow)();
199
+ switch (flowType) {
200
+ case import_client_fetch3.FlowType.Login:
201
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LoginCardFooter, {});
202
+ case import_client_fetch3.FlowType.Registration:
203
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RegistrationCardFooter, {});
204
+ case import_client_fetch3.FlowType.Recovery:
205
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RecoveryCardFooter, {});
206
+ case import_client_fetch3.FlowType.Verification:
207
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VerificationCardFooter, {});
208
+ default:
209
+ return null;
210
+ }
211
+ }
212
+ function LoginCardFooter() {
213
+ const { config, formState, flow, flowType } = (0, import_elements_react.useOryFlow)();
214
+ const intl = (0, import_react_intl.useIntl)();
215
+ const authMethods = nodesToAuthMethodGroups(flow.ui.nodes);
216
+ if (flowType === import_client_fetch3.FlowType.Login && flow.refresh) {
217
+ return null;
218
+ }
219
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
220
+ formState.current === "provide_identifier" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: [
221
+ intl.formatMessage({
222
+ id: "login.registration-label",
223
+ defaultMessage: "No account?"
224
+ }),
225
+ " ",
226
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
227
+ "a",
228
+ {
229
+ className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
230
+ href: initFlowUrl(config.sdk.url, "registration", flow),
231
+ "data-testid": "ory/screen/registration/action/login",
232
+ children: intl.formatMessage({
233
+ id: "login.registration-button",
234
+ defaultMessage: "Sign up"
235
+ })
236
+ }
237
+ )
238
+ ] }),
239
+ authMethods.length > 1 && formState.current === "method_active" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
240
+ "a",
241
+ {
242
+ className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
243
+ href: "",
244
+ "data-testid": "ory/screen/login/mfa/action/selectMethod",
245
+ children: intl.formatMessage({
246
+ id: "login.2fa.method.go-back"
247
+ })
248
+ }
249
+ ) }),
250
+ authMethods.length === 1 && authMethods[0] === "code" && formState.current === "method_active" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
251
+ "a",
252
+ {
253
+ className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
254
+ href: restartFlowUrl(
255
+ flow,
256
+ `${config.sdk.url}/self-service/${flowType}/browser`
257
+ ),
258
+ "data-testid": "ory/screen/login/mfa/action/reauthenticate",
259
+ children: intl.formatMessage({
260
+ id: "login.2fa.go-back.link"
261
+ })
262
+ }
263
+ ) }),
264
+ flowType === import_client_fetch3.FlowType.Login && flow.requested_aal === "aal2" && (formState.current === "select_method" || authMethods.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: [
265
+ intl.formatMessage({
266
+ id: "login.2fa.go-back"
267
+ }),
268
+ " ",
269
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
270
+ "a",
271
+ {
272
+ className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
273
+ href: restartFlowUrl(
274
+ flow,
275
+ `${config.sdk.url}/self-service/${flowType}/browser`
276
+ ),
277
+ "data-testid": "ory/screen/login/mfa/action/reauthenticate",
278
+ children: intl.formatMessage({
279
+ id: "login.2fa.go-back.link"
280
+ })
281
+ }
282
+ )
283
+ ] })
284
+ ] });
285
+ }
286
+ function findScreenSelectionButton(nodes) {
287
+ return nodes.find(
288
+ (node) => node.attributes.node_type === "input" && node.attributes.type === "submit" && node.attributes.name === "screen"
289
+ );
290
+ }
291
+ function RegistrationCardFooter() {
292
+ const intl = (0, import_react_intl.useIntl)();
293
+ const { config, flow, formState } = (0, import_elements_react.useOryFlow)();
294
+ const { setValue } = (0, import_react_hook_form.useFormContext)();
295
+ if (formState.current === "select_method") {
296
+ return null;
297
+ }
298
+ const screenSelectionNode = findScreenSelectionButton(flow.ui.nodes);
299
+ function handleScreenSelection() {
300
+ setValue("method", "profile");
301
+ if (screenSelectionNode) {
302
+ setValue(
303
+ screenSelectionNode.attributes.name,
304
+ screenSelectionNode.attributes.value
305
+ );
306
+ }
307
+ }
308
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-normal leading-normal antialiased", children: formState.current === "method_active" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: screenSelectionNode && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
309
+ "button",
310
+ {
311
+ className: "font-medium text-button-link-brand-brand hover:text-button-link-brand-brand-hover",
312
+ type: "submit",
313
+ name: screenSelectionNode.attributes.name,
314
+ value: screenSelectionNode.attributes.value,
315
+ onClick: handleScreenSelection,
316
+ children: intl.formatMessage({
317
+ id: "card.footer.select-another-method",
318
+ defaultMessage: "Select another method"
319
+ })
320
+ }
321
+ ) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
322
+ intl.formatMessage({
323
+ id: "registration.login-label",
324
+ defaultMessage: "Already have an account?"
325
+ }),
326
+ " ",
327
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
328
+ "a",
329
+ {
330
+ className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
331
+ href: initFlowUrl(config.sdk.url, "login", flow),
332
+ "data-testid": "ory/screen/registration/action/login",
333
+ children: intl.formatMessage({
334
+ id: "registration.login-button",
335
+ defaultMessage: "Sign in"
336
+ })
337
+ }
338
+ )
339
+ ] }) });
340
+ }
341
+ function RecoveryCardFooter() {
342
+ return null;
343
+ }
344
+ function VerificationCardFooter() {
345
+ return null;
346
+ }
347
+
348
+ // src/theme/default/components/card/header.tsx
349
+ var import_elements_react3 = require("@ory/elements-react");
350
+
351
+ // src/theme/default/utils/constructCardHeader.ts
352
+ var import_client_fetch4 = require("@ory/client-fetch");
353
+ var import_react_intl2 = require("react-intl");
354
+ function joinWithCommaOr(list, orText = "or") {
355
+ if (list.length === 0) {
356
+ return ".";
357
+ } else if (list.length === 1) {
358
+ return list[0];
359
+ } else {
360
+ const last = list.pop();
361
+ return `${list.join(", ")} ${orText} ${last}`;
362
+ }
363
+ }
364
+ function useCardHeaderText(container, opts) {
365
+ var _a, _b, _c;
366
+ const nodes = container.nodes;
367
+ const intl = (0, import_react_intl2.useIntl)();
368
+ switch (opts.flowType) {
369
+ case import_client_fetch4.FlowType.Recovery:
370
+ if (nodes.find(
371
+ (node) => "name" in node.attributes && node.attributes.name === "code"
372
+ )) {
373
+ return {
374
+ title: intl.formatMessage({
375
+ id: "recovery.title"
376
+ }),
377
+ description: intl.formatMessage({
378
+ id: "identities.messages.1060003"
379
+ })
380
+ };
381
+ }
382
+ return {
383
+ title: intl.formatMessage({
384
+ id: "recovery.title"
385
+ }),
386
+ description: intl.formatMessage({
387
+ id: "recovery.subtitle"
388
+ })
389
+ };
390
+ case import_client_fetch4.FlowType.Settings:
391
+ return {
392
+ title: intl.formatMessage({
393
+ id: "settings.title"
394
+ }),
395
+ description: intl.formatMessage({
396
+ id: "settings.subtitle"
397
+ })
398
+ };
399
+ case import_client_fetch4.FlowType.Verification:
400
+ if (nodes.find(
401
+ (node) => "name" in node.attributes && node.attributes.name === "code"
402
+ )) {
403
+ return {
404
+ title: intl.formatMessage({
405
+ id: "verification.title"
406
+ }),
407
+ description: intl.formatMessage({
408
+ id: "identities.messages.1080003"
409
+ })
410
+ };
411
+ }
412
+ return {
413
+ title: intl.formatMessage({
414
+ id: "verification.title"
415
+ }),
416
+ description: intl.formatMessage({
417
+ id: "verification.subtitle"
418
+ })
419
+ };
420
+ case import_client_fetch4.FlowType.Login: {
421
+ const accountLinkingMessage = (_a = container.messages) == null ? void 0 : _a.find(
422
+ (m) => m.id === 1010016
423
+ );
424
+ if (accountLinkingMessage) {
425
+ return {
426
+ title: intl.formatMessage({
427
+ id: "account-linking.title"
428
+ }),
429
+ description: intl.formatMessage(
430
+ {
431
+ id: "identities.messages.1010016"
432
+ },
433
+ accountLinkingMessage.context
434
+ )
435
+ };
436
+ }
437
+ }
438
+ }
439
+ const parts = [];
440
+ if (nodes.find((node) => node.group === "password")) {
441
+ switch (opts.flowType) {
442
+ case import_client_fetch4.FlowType.Registration:
443
+ parts.push(
444
+ intl.formatMessage(
445
+ { id: "card.header.parts.password.registration" },
446
+ // TODO: make this generic for other labels
447
+ { identifierLabel: "email" }
448
+ )
449
+ );
450
+ break;
451
+ default:
452
+ parts.push(
453
+ intl.formatMessage(
454
+ { id: "card.header.parts.password.login" },
455
+ // TODO: make this generic for other labels
456
+ { identifierLabel: "email" }
457
+ )
458
+ );
459
+ }
460
+ }
461
+ if (nodes.find((node) => node.group === "oidc")) {
462
+ parts.push(
463
+ intl.formatMessage({
464
+ id: "card.header.parts.oidc"
465
+ })
466
+ );
467
+ }
468
+ if (nodes.find((node) => node.group === "code")) {
469
+ parts.push(intl.formatMessage({ id: "card.header.parts.code" }));
470
+ }
471
+ if (nodes.find((node) => node.group === "passkey")) {
472
+ parts.push(intl.formatMessage({ id: "card.header.parts.passkey" }));
473
+ }
474
+ if (nodes.find((node) => node.group === "webauthn")) {
475
+ parts.push(intl.formatMessage({ id: "card.header.parts.webauthn" }));
476
+ }
477
+ if (nodes.find((node) => node.group === "identifier_first")) {
478
+ const identifier = nodes.find(
479
+ (node) => (0, import_client_fetch4.isUiNodeInputAttributes)(node.attributes) && node.attributes.name.startsWith("identifier") && node.attributes.type !== "hidden"
480
+ );
481
+ if (identifier) {
482
+ parts.push(
483
+ intl.formatMessage(
484
+ {
485
+ id: "card.header.parts.identifier-first"
486
+ },
487
+ {
488
+ identifierLabel: (_b = identifier.meta.label) == null ? void 0 : _b.text
489
+ }
490
+ )
491
+ );
492
+ }
493
+ }
494
+ switch (opts.flowType) {
495
+ case import_client_fetch4.FlowType.Login:
496
+ if (opts.flow.refresh) {
497
+ return {
498
+ title: intl.formatMessage({
499
+ id: "login.title-refresh"
500
+ }),
501
+ description: intl.formatMessage(
502
+ {
503
+ id: "login.subtitle-refresh"
504
+ },
505
+ {
506
+ parts: joinWithCommaOr(parts)
507
+ }
508
+ )
509
+ };
510
+ } else if (opts.flow.requested_aal === "aal2") {
511
+ return {
512
+ title: intl.formatMessage({
513
+ id: "login.title-aal2"
514
+ }),
515
+ description: intl.formatMessage({
516
+ id: ((_c = opts.formState) == null ? void 0 : _c.current) === "method_active" ? `login.${opts.formState.method}.subtitle` : "login.subtitle-aal2"
517
+ })
518
+ };
519
+ }
520
+ return {
521
+ title: intl.formatMessage({
522
+ id: "login.title"
523
+ }),
524
+ description: parts.length > 0 ? intl.formatMessage(
525
+ {
526
+ id: "login.subtitle"
527
+ },
528
+ {
529
+ parts: joinWithCommaOr(
530
+ parts,
531
+ intl.formatMessage({ id: "misc.or" })
532
+ )
533
+ }
534
+ ) : ""
535
+ };
536
+ case import_client_fetch4.FlowType.Registration:
537
+ return {
538
+ title: intl.formatMessage({
539
+ id: "registration.title"
540
+ }),
541
+ description: parts.length > 0 ? intl.formatMessage(
542
+ {
543
+ id: "registration.subtitle"
544
+ },
545
+ {
546
+ parts: joinWithCommaOr(
547
+ parts,
548
+ intl.formatMessage({ id: "misc.or" })
549
+ )
550
+ }
551
+ ) : ""
552
+ };
553
+ }
554
+ return {
555
+ title: "Error",
556
+ description: "An error occurred"
557
+ };
558
+ }
559
+
560
+ // src/theme/default/components/card/current-identifier-button.tsx
561
+ var import_client_fetch5 = require("@ory/client-fetch");
562
+ var import_elements_react2 = require("@ory/elements-react");
563
+
564
+ // src/theme/default/assets/icons/arrow-left.svg
565
+ var React3 = __toESM(require("react"));
566
+ var import_jsx_runtime6 = require("react/jsx-runtime");
567
+ var SvgArrowLeft = (props) => {
568
+ var _a, _b;
569
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 25", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12.325h14m-14 0 6 6m-6-6 6-6" }) });
570
+ };
571
+ var arrow_left_default = SvgArrowLeft;
572
+
573
+ // src/theme/default/utils/attributes.ts
574
+ function omit(obj, keys) {
575
+ const ret = { ...obj };
576
+ for (const key of keys) {
577
+ delete ret[key];
578
+ }
579
+ return ret;
580
+ }
581
+
582
+ // src/theme/default/components/card/current-identifier-button.tsx
583
+ var import_jsx_runtime7 = require("react/jsx-runtime");
584
+ function DefaultCurrentIdentifierButton() {
585
+ const { flow, flowType, config, formState } = (0, import_elements_react2.useOryFlow)();
586
+ const ui = flow.ui;
587
+ if (formState.current === "provide_identifier") {
588
+ return null;
589
+ }
590
+ if (flowType === import_client_fetch5.FlowType.Login && flow.requested_aal === "aal2") {
591
+ return null;
592
+ }
593
+ const nodeBackButton = getBackButtonNode(flowType, ui.nodes);
594
+ if ((nodeBackButton == null ? void 0 : nodeBackButton.attributes.node_type) !== "input" || !nodeBackButton.attributes.value) {
595
+ return null;
596
+ }
597
+ const initFlowUrl2 = restartFlowUrl(
598
+ flow,
599
+ `${config.sdk.url}/self-service/${flowType}/browser`
600
+ );
601
+ const attributes = omit(nodeBackButton.attributes, [
602
+ "autocomplete",
603
+ "node_type",
604
+ "maxlength"
605
+ ]);
606
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
607
+ "a",
608
+ {
609
+ className: "group inline-flex max-w-full cursor-pointer items-center gap-1 self-start rounded-identifier border px-[11px] py-[5px] transition-colors border-button-identifier-border-border-default bg-button-identifier-background-default hover:border-button-identifier-border-border-hover hover:bg-button-identifier-background-hover",
610
+ ...attributes,
611
+ href: initFlowUrl2,
612
+ title: `Adjust ${nodeBackButton == null ? void 0 : nodeBackButton.attributes.value}`,
613
+ "data-testid": "ory/screen/login/action/restart",
614
+ children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "inline-flex min-h-5 items-center gap-2 overflow-hidden text-ellipsis", children: [
615
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
616
+ arrow_left_default,
617
+ {
618
+ size: 16,
619
+ stroke: "1",
620
+ className: "shrink-0 text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover"
621
+ }
622
+ ),
623
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "overflow-hidden text-ellipsis text-nowrap text-sm font-medium text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover", children: nodeBackButton == null ? void 0 : nodeBackButton.attributes.value })
624
+ ] })
625
+ }
626
+ );
627
+ }
628
+ function getBackButtonNode(flowType, nodes) {
629
+ let nodeBackButton;
630
+ switch (flowType) {
631
+ case import_client_fetch5.FlowType.Login:
632
+ nodeBackButton = nodes.find(
633
+ (node) => "name" in node.attributes && node.attributes.name === "identifier" && ["default", "identifier_first"].includes(node.group)
634
+ );
635
+ break;
636
+ case import_client_fetch5.FlowType.Registration:
637
+ nodeBackButton = guessRegistrationBackButton(nodes);
638
+ break;
639
+ case import_client_fetch5.FlowType.Recovery:
640
+ case import_client_fetch5.FlowType.Verification:
641
+ nodeBackButton = nodes.find(
642
+ (n) => "name" in n.attributes && n.attributes.name === "email"
643
+ );
644
+ break;
645
+ }
646
+ return nodeBackButton;
647
+ }
648
+ var backButtonCandiates = [
649
+ "traits.email",
650
+ "traits.username",
651
+ "traits.phone_number"
652
+ ];
653
+ function guessRegistrationBackButton(uiNodes) {
654
+ return uiNodes.find(
655
+ (node) => "name" in node.attributes && backButtonCandiates.includes(node.attributes.name) && node.group === "default"
656
+ );
657
+ }
658
+
659
+ // src/theme/default/components/card/header.tsx
660
+ var import_jsx_runtime8 = require("react/jsx-runtime");
661
+ function InnerCardHeader({ title, text }) {
662
+ const { Card } = (0, import_elements_react3.useComponents)();
663
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("header", { className: "flex flex-col gap-8 antialiased", children: [
664
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Card.Logo, {}),
665
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-2", children: [
666
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { className: "text-lg font-semibold leading-normal text-interface-foreground-default-primary", children: title }),
667
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "leading-normal text-interface-foreground-default-secondary", children: text }),
668
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DefaultCurrentIdentifierButton, {})
669
+ ] })
670
+ ] });
671
+ }
672
+ function DefaultCardHeader() {
673
+ const context = (0, import_elements_react3.useOryFlow)();
674
+ const { title, description } = useCardHeaderText(context.flow.ui, context);
675
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(InnerCardHeader, { title, text: description });
676
+ }
677
+
678
+ // src/theme/default/components/card/logo.tsx
679
+ var import_elements_react4 = require("@ory/elements-react");
680
+ var import_jsx_runtime9 = require("react/jsx-runtime");
681
+ function DefaultCardLogo() {
682
+ const flow = (0, import_elements_react4.useOryFlow)();
683
+ if (flow.config.logoUrl) {
684
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("img", { src: flow.config.logoUrl, width: 100, height: 36, alt: "Logo" });
685
+ }
686
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h1", { className: "text-xl font-semibold leading-normal text-interface-foreground-default-primary", children: flow.config.name });
687
+ }
688
+
689
+ // src/theme/default/components/card/layout.tsx
690
+ var import_jsx_runtime10 = require("react/jsx-runtime");
691
+ function DefaultCardLayout({ children }) {
692
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("main", { className: "p-4 pb-8 flex items-center justify-center flex-col gap-8 min-h-screen", children });
693
+ }
694
+
695
+ // src/theme/default/components/card/index.tsx
696
+ var import_jsx_runtime11 = require("react/jsx-runtime");
697
+ function DefaultCard({ children }) {
698
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex flex-1 sm:items-center justify-center font-sans items-start w-full sm:w-[480px] sm:max-w-[480px]", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative grid grid-cols-1 gap-8 sm:rounded-cards sm:border border-form-border-default bg-form-background-default px-8 py-12 sm:px-12 sm:py-14 border-b w-full", children: [
699
+ children,
700
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Badge, {})
701
+ ] }) });
702
+ }
703
+
704
+ // src/theme/default/utils/cn.ts
705
+ var import_clsx = require("clsx");
706
+ var import_tailwind_merge = require("tailwind-merge");
707
+ function cn(...inputs) {
708
+ return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
709
+ }
710
+
711
+ // src/theme/default/components/form/index.tsx
712
+ var import_react_intl4 = require("react-intl");
713
+ var import_elements_react6 = require("@ory/elements-react");
714
+ var import_client_fetch6 = require("@ory/client-fetch");
715
+
716
+ // src/theme/default/components/form/social.tsx
717
+ var import_elements_react5 = require("@ory/elements-react");
718
+ var import_react3 = require("react");
719
+ var import_react_hook_form2 = require("react-hook-form");
720
+ var import_react_intl3 = require("react-intl");
721
+ var import_usehooks_ts = require("usehooks-ts");
722
+
723
+ // src/theme/default/provider-logos/apple.svg
724
+ var React4 = __toESM(require("react"));
725
+ var import_jsx_runtime12 = require("react/jsx-runtime");
726
+ var SvgApple = (props) => {
727
+ var _a, _b;
728
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { fill: "#283544", d: "M27.734 11.55c-.134.078-3.317 1.724-3.317 5.374.15 4.162 4.017 5.621 4.083 5.621-.066.078-.584 1.988-2.116 3.991C25.167 28.261 23.817 30 21.767 30c-1.95 0-2.65-1.15-4.9-1.15-2.416 0-3.1 1.15-4.95 1.15-2.05 0-3.5-1.832-4.782-3.541-1.667-2.236-3.083-5.746-3.133-9.116-.034-1.786.334-3.54 1.266-5.032 1.317-2.081 3.667-3.494 6.233-3.54 1.966-.063 3.716 1.257 4.916 1.257 1.15 0 3.3-1.258 5.733-1.258 1.05.001 3.85.296 5.584 2.78M16.25 8.414c-.35-1.631.616-3.262 1.516-4.302C18.917 2.854 20.734 2 22.3 2c.1 1.63-.534 3.23-1.666 4.395-1.017 1.258-2.767 2.205-4.383 2.019" }) });
729
+ };
730
+ var apple_default = SvgApple;
731
+
732
+ // src/theme/default/provider-logos/auth0.svg
733
+ var React5 = __toESM(require("react"));
734
+ var import_jsx_runtime13 = require("react/jsx-runtime");
735
+ var SvgAuth0 = (props) => {
736
+ var _a, _b;
737
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { fill: "#eb5424", d: "M49.012 51.774 42.514 32l17.008-12.22h-21.02L32.005 0h21.032l6.506 19.78c3.767 11.468-.118 24.52-10.53 31.993zm-34.023 0L31.998 64l17.015-12.226-17.008-12.22zm-10.516-32c-3.976 12.1.64 24.917 10.5 32.007v-.007L21.482 32 4.474 19.774l21.025.007L31.998 0H10.972z" }) });
738
+ };
739
+ var auth0_default = SvgAuth0;
740
+
741
+ // src/theme/default/provider-logos/discord.svg
742
+ var React6 = __toESM(require("react"));
743
+ var import_jsx_runtime14 = require("react/jsx-runtime");
744
+ var SvgDiscord = (props) => {
745
+ var _a, _b;
746
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
747
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M2 11.6c0-3.36 0-5.04.654-6.324a6 6 0 0 1 2.622-2.622C6.56 2 8.24 2 11.6 2h8.8c3.36 0 5.04 0 6.324.654a6 6 0 0 1 2.622 2.622C30 6.56 30 8.24 30 11.6v8.8c0 3.36 0 5.04-.654 6.324a6 6 0 0 1-2.622 2.622C25.44 30 23.76 30 20.4 30h-8.8c-3.36 0-5.04 0-6.324-.654a6 6 0 0 1-2.622-2.622C2 25.44 2 23.76 2 20.4z" }),
748
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { fill: "#5865F2", d: "M23.636 9.34A18.8 18.8 0 0 0 19.097 8c-.195.332-.424.779-.581 1.134a17.7 17.7 0 0 0-5.03 0A12 12 0 0 0 12.897 8a18.7 18.7 0 0 0-4.542 1.343c-2.872 4.078-3.65 8.055-3.262 11.975a18.6 18.6 0 0 0 5.567 2.68c.448-.58.848-1.195 1.192-1.844a12 12 0 0 1-1.877-.859 9 9 0 0 0 .46-.342c3.62 1.59 7.553 1.59 11.13 0q.225.178.46.342c-.595.337-1.225.626-1.88.86q.516.974 1.191 1.845a18.6 18.6 0 0 0 5.57-2.682c.457-4.544-.78-8.484-3.27-11.978m-11.29 9.567c-1.087 0-1.978-.953-1.978-2.113s.872-2.116 1.977-2.116c1.106 0 1.997.953 1.978 2.116.002 1.16-.872 2.113-1.978 2.113m7.308 0c-1.086 0-1.977-.953-1.977-2.113s.872-2.116 1.977-2.116c1.106 0 1.997.953 1.978 2.116 0 1.16-.872 2.113-1.978 2.113" })
749
+ ] });
750
+ };
751
+ var discord_default = SvgDiscord;
752
+
753
+ // src/theme/default/provider-logos/facebook.svg
754
+ var React7 = __toESM(require("react"));
755
+ var import_jsx_runtime15 = require("react/jsx-runtime");
756
+ var SvgFacebook = (props) => {
757
+ var _a, _b;
758
+ return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
759
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("circle", { cx: 16, cy: 16, r: 14, fill: "url(#facebook_svg__a)" }),
760
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { fill: "#fff", d: "m21.214 20.282.622-3.952h-3.89v-2.563c0-1.081.542-2.136 2.284-2.136H22V8.267S20.395 8 18.86 8c-3.205 0-5.298 1.893-5.298 5.318v3.012H10v3.952h3.562v9.552q1.073.165 2.191.166 1.12 0 2.192-.166v-9.552z" }),
761
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("linearGradient", { id: "facebook_svg__a", x1: 16, x2: 16, y1: 2, y2: 29.917, gradientUnits: "userSpaceOnUse", children: [
762
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("stop", { stopColor: "#18ACFE" }),
763
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("stop", { offset: 1, stopColor: "#0163E0" })
764
+ ] }) })
765
+ ] });
766
+ };
767
+ var facebook_default = SvgFacebook;
768
+
769
+ // src/theme/default/provider-logos/generic.svg
770
+ var React8 = __toESM(require("react"));
771
+ var import_jsx_runtime16 = require("react/jsx-runtime");
772
+ var SvgGeneric = (props) => {
773
+ var _a, _b;
774
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, className: "generic_svg__icon generic_svg__icon-tabler generic_svg__icon-tabler-brand-oauth", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
775
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { stroke: "none", d: "M0 0h24v24H0z" }),
776
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M2 12a10 10 0 1 0 20 0 10 10 0 1 0-20 0" }),
777
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M12.556 6c.65 0 1.235.373 1.508.947l2.839 7.848a1.646 1.646 0 0 1-1.01 2.108 1.673 1.673 0 0 1-2.068-.851L13.365 15h-2.73l-.398.905A1.67 1.67 0 0 1 8.26 16.95l-.153-.047a1.647 1.647 0 0 1-1.056-1.956l2.824-7.852a1.66 1.66 0 0 1 1.409-1.087z" })
778
+ ] });
779
+ };
780
+ var generic_default = SvgGeneric;
781
+
782
+ // src/theme/default/provider-logos/github.svg
783
+ var React9 = __toESM(require("react"));
784
+ var import_jsx_runtime17 = require("react/jsx-runtime");
785
+ var SvgGithub = (props) => {
786
+ var _a, _b;
787
+ return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.5 11.5 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12" }) });
788
+ };
789
+ var github_default = SvgGithub;
790
+
791
+ // src/theme/default/provider-logos/gitlab.svg
792
+ var React10 = __toESM(require("react"));
793
+ var import_jsx_runtime18 = require("react/jsx-runtime");
794
+ var SvgGitlab = (props) => {
795
+ var _a, _b;
796
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
797
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { fill: "#E24329", d: "m22.708 10.691-.031-.072-3.015-7.167a.74.74 0 0 0-.31-.34.87.87 0 0 0-.923.045.73.73 0 0 0-.268.37L16.125 9.2H7.881L5.845 3.527a.72.72 0 0 0-.268-.371.87.87 0 0 0-.923-.045.74.74 0 0 0-.31.34l-3.021 7.164-.03.072a4.67 4.67 0 0 0-.153 3.23c.335 1.063 1.04 1.998 2.01 2.664l.01.007.028.018 4.594 3.132 2.272 1.567 1.384.952c.162.112.36.172.563.172s.401-.06.563-.172l1.384-.952 2.273-1.567 4.62-3.151.012-.009c.968-.666 1.671-1.6 2.006-2.661a4.67 4.67 0 0 0-.15-3.226" }),
798
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { fill: "#FC6D26", d: "m22.708 10.691-.031-.072a10.7 10.7 0 0 0-4.055 1.66L12 16.839l4.218 2.904 4.621-3.152.012-.008c.969-.666 1.674-1.601 2.008-2.664a4.67 4.67 0 0 0-.15-3.228" }),
799
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { fill: "#FCA326", d: "m7.781 19.743 2.273 1.566 1.384.952c.162.112.36.172.563.172s.401-.06.563-.172l1.384-.952 2.273-1.566S14.255 18.389 12 16.839c-2.255 1.55-4.219 2.904-4.219 2.904" }),
800
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { fill: "#FC6D26", d: "M5.376 12.279a10.7 10.7 0 0 0-4.053-1.664l-.03.072a4.67 4.67 0 0 0-.153 3.23c.335 1.063 1.04 1.998 2.01 2.664l.01.007.028.018 4.594 3.132L12 16.836z" })
801
+ ] });
802
+ };
803
+ var gitlab_default = SvgGitlab;
804
+
805
+ // src/theme/default/provider-logos/google.svg
806
+ var React11 = __toESM(require("react"));
807
+ var import_jsx_runtime19 = require("react/jsx-runtime");
808
+ var SvgGoogle = (props) => {
809
+ var _a, _b;
810
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
811
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { fill: "#4285F4", d: "M30.001 16.31c0-1.15-.095-1.99-.301-2.861H16.287v5.195h7.873c-.159 1.291-1.016 3.236-2.92 4.542l-.027.174 4.24 3.22.294.029c2.699-2.443 4.254-6.036 4.254-10.298" }),
812
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { fill: "#34A853", d: "M16.286 30c3.857 0 7.095-1.244 9.46-3.391l-4.507-3.423c-1.207.825-2.826 1.4-4.953 1.4A8.58 8.58 0 0 1 8.16 18.77l-.167.014-4.41 3.344-.058.157C5.874 26.858 10.7 30 16.286 30" }),
813
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { fill: "#FBBC05", d: "M8.16 18.769a8.5 8.5 0 0 1-.476-2.77c0-.964.174-1.897.46-2.768l-.008-.185-4.465-3.399-.146.068A13.8 13.8 0 0 0 2.001 16c0 2.256.556 4.387 1.524 6.284z" }),
814
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { fill: "#EB4335", d: "M16.286 7.413c2.683 0 4.492 1.136 5.524 2.085l4.032-3.858C23.366 3.384 20.143 2 16.286 2 10.7 2 5.874 5.142 3.524 9.715l4.62 3.516c1.158-3.375 4.365-5.818 8.142-5.818" })
815
+ ] });
816
+ };
817
+ var google_default = SvgGoogle;
818
+
819
+ // src/theme/default/provider-logos/linkedin.svg
820
+ var React12 = __toESM(require("react"));
821
+ var import_jsx_runtime20 = require("react/jsx-runtime");
822
+ var SvgLinkedin = (props) => {
823
+ var _a, _b;
824
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
825
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("rect", { width: 28, height: 28, x: 2, y: 2, fill: "#1275B1", rx: 14 }),
826
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { fill: "#fff", d: "M12.619 9.692c0 .935-.81 1.692-1.81 1.692C9.81 11.384 9 10.627 9 9.692S9.81 8 10.81 8c.999 0 1.809.758 1.809 1.692M9.247 12.628h3.093V22H9.247zM17.32 12.628h-3.093V22h3.093v-4.795c0-1.107.378-2.22 1.886-2.22 1.705 0 1.695 1.45 1.687 2.572-.01 1.467.014 2.965.014 4.443H24v-4.946c-.026-3.159-.85-4.614-3.557-4.614-1.608 0-2.604.73-3.123 1.39z" })
827
+ ] });
828
+ };
829
+ var linkedin_default = SvgLinkedin;
830
+
831
+ // src/theme/default/provider-logos/microsoft.svg
832
+ var React13 = __toESM(require("react"));
833
+ var import_jsx_runtime21 = require("react/jsx-runtime");
834
+ var SvgMicrosoft = (props) => {
835
+ var _a, _b;
836
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 23 23", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
837
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { fill: "#F35325", d: "M1 1h10v10H1z" }),
838
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { fill: "#81BC06", d: "M12 1h10v10H12z" }),
839
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { fill: "#05A6F0", d: "M1 12h10v10H1z" }),
840
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { fill: "#FFBA08", d: "M12 12h10v10H12z" })
841
+ ] });
842
+ };
843
+ var microsoft_default = SvgMicrosoft;
844
+
845
+ // src/theme/default/provider-logos/slack.svg
846
+ var React14 = __toESM(require("react"));
847
+ var import_jsx_runtime22 = require("react/jsx-runtime");
848
+ var SvgSlack = (props) => {
849
+ var _a, _b;
850
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
851
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { fill: "#2EB67D", d: "M26.5 15a2.5 2.5 0 1 0-2.5-2.5V15zm-7 0a2.5 2.5 0 0 0 2.5-2.5v-7a2.5 2.5 0 0 0-5 0v7a2.5 2.5 0 0 0 2.5 2.5" }),
852
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { fill: "#E01E5A", d: "M5.5 17A2.5 2.5 0 1 0 8 19.5V17zm7 0a2.5 2.5 0 0 0-2.5 2.5v7a2.5 2.5 0 0 0 5 0v-7a2.5 2.5 0 0 0-2.5-2.5" }),
853
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { fill: "#ECB22E", d: "M17 26.5a2.5 2.5 0 1 0 2.5-2.5H17zm0-7a2.5 2.5 0 0 0 2.5 2.5h7a2.5 2.5 0 0 0 0-5h-7a2.5 2.5 0 0 0-2.5 2.5" }),
854
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { fill: "#36C5F0", d: "M15 5.5A2.5 2.5 0 1 0 12.5 8H15zm0 7a2.5 2.5 0 0 0-2.5-2.5h-7a2.5 2.5 0 0 0 0 5h7a2.5 2.5 0 0 0 2.5-2.5" })
855
+ ] });
856
+ };
857
+ var slack_default = SvgSlack;
858
+
859
+ // src/theme/default/provider-logos/spotify.svg
860
+ var React15 = __toESM(require("react"));
861
+ var import_jsx_runtime23 = require("react/jsx-runtime");
862
+ var SvgSpotify = (props) => {
863
+ var _a, _b;
864
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
865
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("circle", { cx: 16, cy: 16, r: 14, fill: "#1ED760" }),
866
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { fill: "#fff", d: "M22.364 21.623c-.239.38-.75.486-1.148.258-3.141-1.822-7.08-2.232-11.736-1.23-.446.091-.893-.167-.988-.592a.786.786 0 0 1 .621-.94c5.087-1.11 9.456-.639 12.964 1.41a.77.77 0 0 1 .287 1.094m1.627-3.461c-.303.47-.941.607-1.435.334-3.588-2.11-9.058-2.718-13.299-1.488-.558.152-1.132-.137-1.292-.653-.16-.531.144-1.078.702-1.23 4.848-1.396 10.875-.728 15.005 1.686.462.273.622.88.319 1.35m.143-3.613c-4.305-2.43-11.4-2.657-15.515-1.473-.654.197-1.355-.152-1.563-.79-.207-.622.176-1.29.83-1.487 4.72-1.366 12.565-1.093 17.508 1.7.59.334.781 1.063.43 1.625-.334.576-1.1.774-1.69.425" })
867
+ ] });
868
+ };
869
+ var spotify_default = SvgSpotify;
870
+
871
+ // src/theme/default/provider-logos/yandex.svg
872
+ var React16 = __toESM(require("react"));
873
+ var import_jsx_runtime24 = require("react/jsx-runtime");
874
+ var SvgYandex = (props) => {
875
+ var _a, _b;
876
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: [
877
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("circle", { cx: 16, cy: 16, r: 14, fill: "#fff" }),
878
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { fill: "#FC3F1D", d: "M21 25h-3.143V9.435h-1.402c-2.572 0-3.922 1.294-3.922 3.211 0 2.175.935 3.185 2.857 4.48l1.584 1.063L12.403 25H9l4.104-6.086c-2.363-1.684-3.688-3.316-3.688-6.087C9.416 9.357 11.83 7 16.429 7H21z" })
879
+ ] });
880
+ };
881
+ var yandex_default = SvgYandex;
882
+
883
+ // src/theme/default/provider-logos/x.svg
884
+ var React17 = __toESM(require("react"));
885
+ var import_jsx_runtime25 = require("react/jsx-runtime");
886
+ var SvgX = (props) => {
887
+ var _a, _b;
888
+ return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { fill: "#0F172A", d: "M24.122 3h4.292L18.99 13.73 30 28.285h-8.64l-6.764-8.845-7.744 8.845H2.56l9.983-11.476L2 3h8.854l6.112 8.08zM22.62 25.766h2.379L9.604 5.426H7.048z" }) });
889
+ };
890
+ var x_default = SvgX;
891
+
892
+ // src/theme/default/provider-logos/index.ts
893
+ var logos = {
894
+ apple: apple_default,
895
+ auth0: auth0_default,
896
+ discord: discord_default,
897
+ facebook: facebook_default,
898
+ generic: generic_default,
899
+ github: github_default,
900
+ gitlab: gitlab_default,
901
+ google: google_default,
902
+ linkedin: linkedin_default,
903
+ microsoft: microsoft_default,
904
+ slack: slack_default,
905
+ spotify: spotify_default,
906
+ yandex: yandex_default,
907
+ x: x_default
908
+ };
909
+ var provider_logos_default = logos;
910
+
911
+ // src/theme/default/components/form/spinner.tsx
912
+ var import_jsx_runtime26 = require("react/jsx-runtime");
913
+ function Spinner({ className }) {
914
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
915
+ "svg",
916
+ {
917
+ "aria-hidden": "true",
918
+ role: "status",
919
+ className: cn(
920
+ "absolute pointer-events-none inset-0 m-auto size-8 animate-spin",
921
+ className
922
+ ),
923
+ viewBox: "0 0 34 34",
924
+ fill: "none",
925
+ xmlns: "http://www.w3.org/2000/svg",
926
+ children: [
927
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("g", { clipPath: "url(#clip0_2572_1748)", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
928
+ "path",
929
+ {
930
+ d: "M23.364 10.6362C22.1053 9.37751 20.5016 8.52034 18.7558 8.17307C17.01 7.82581 15.2004 8.00404 13.5559 8.68523C11.9113 9.36641 10.5057 10.52 9.51678 12C8.52784 13.4801 8 15.2201 8 17.0001C8 18.7802 8.52784 20.5202 9.51678 22.0003C10.5057 23.4803 11.9113 24.6339 13.5559 25.3151C15.2004 25.9962 17.01 26.1745 18.7558 25.8272C20.5016 25.4799 22.1053 24.6228 23.364 23.3641",
931
+ stroke: "currentColor",
932
+ strokeLinecap: "round",
933
+ strokeLinejoin: "round"
934
+ }
935
+ ) }),
936
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("clipPath", { id: "clip0_2572_1748", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
937
+ "rect",
938
+ {
939
+ width: "24",
940
+ height: "24",
941
+ fill: "currentColor",
942
+ transform: "translate(17 0.029541) rotate(45)"
943
+ }
944
+ ) }) })
945
+ ]
946
+ }
947
+ );
948
+ }
949
+
950
+ // src/theme/default/components/form/social.tsx
951
+ var import_jsx_runtime27 = require("react/jsx-runtime");
952
+ function extractProvider(context) {
953
+ if (context && typeof context === "object" && "provider" in context && typeof context.provider === "string") {
954
+ return context.provider;
955
+ }
956
+ return void 0;
957
+ }
958
+ function DefaultButtonSocial({
959
+ attributes,
960
+ node,
961
+ onClick,
962
+ showLabel: _showLabel,
963
+ logos: providedLogos
964
+ }) {
965
+ var _a, _b, _c;
966
+ const logos2 = { ...provider_logos_default, ...providedLogos };
967
+ const {
968
+ node_type: _ignoredNodeType,
969
+ type: _ignoredType,
970
+ name: _ignoredName,
971
+ ...props
972
+ } = attributes;
973
+ const {
974
+ flow: { ui }
975
+ } = (0, import_elements_react5.useOryFlow)();
976
+ const [clicked, setClicked] = (0, import_usehooks_ts.useDebounceValue)(false, 100);
977
+ const intl = (0, import_react_intl3.useIntl)();
978
+ const {
979
+ formState: { isSubmitting }
980
+ } = (0, import_react_hook_form2.useFormContext)();
981
+ const oidcNodeCount = (_a = ui.nodes.filter((node2) => node2.group === "oidc").length) != null ? _a : 0;
982
+ const Logo = logos2[attributes.value.split("-")[0]];
983
+ const showLabel = _showLabel != null ? _showLabel : oidcNodeCount % 3 !== 0 && oidcNodeCount % 4 !== 0;
984
+ const provider = (_c = extractProvider((_b = node.meta.label) == null ? void 0 : _b.context)) != null ? _c : "";
985
+ const localOnClick = () => {
986
+ onClick == null ? void 0 : onClick();
987
+ setClicked(true);
988
+ };
989
+ (0, import_react3.useEffect)(() => {
990
+ if (!isSubmitting) {
991
+ setClicked(false);
992
+ }
993
+ }, [isSubmitting, setClicked]);
994
+ return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
995
+ "button",
996
+ {
997
+ className: "gap-3 border border-button-social-border-default bg-button-social-background-default hover:bg-button-social-background-hover transition-colors rounded-buttons flex items-center justify-center px-4 py-[13px] loading:bg-button-social-background-disabled loading:border-button-social-border-disabled loading:text-button-social-foreground-disabled hover:text-button-social-foreground-hover",
998
+ value: attributes.value,
999
+ type: "submit",
1000
+ name: "provider",
1001
+ "data-testid": `ory/form/node/input/${attributes.name}`,
1002
+ ...props,
1003
+ onClick: localOnClick,
1004
+ "data-loading": clicked,
1005
+ disabled: isSubmitting,
1006
+ children: [
1007
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "size-5 relative", children: !clicked ? Logo ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Logo, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "flex aspect-square items-center justify-center rounded-[999px] border text-xs", children: provider.slice(0, 2) }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Spinner, { className: "size-5" }) }),
1008
+ showLabel && node.meta.label ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
1009
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "grow text-center font-medium leading-none text-button-social-foreground-default", children: (0, import_elements_react5.uiTextToFormattedMessage)(node.meta.label, intl) }),
1010
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "size-5 block" })
1011
+ ] }) : null
1012
+ ]
1013
+ }
1014
+ );
1015
+ }
1016
+ DefaultButtonSocial.WithLogos = (logos2) => (props) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DefaultButtonSocial, { ...props, logos: logos2 });
1017
+ function DefaultSocialButtonContainer({
1018
+ children,
1019
+ nodes
1020
+ }) {
1021
+ return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
1022
+ "div",
1023
+ {
1024
+ className: cn("grid gap-3", {
1025
+ // needed because tailwind is not compiling dynamic classes
1026
+ "grid-cols-1": nodes.length % 4 <= 2,
1027
+ "grid-cols-3": nodes.length % 3 === 0,
1028
+ "grid-cols-4": nodes.length > 1 && nodes.length % 4 === 0
1029
+ }),
1030
+ children
1031
+ }
1032
+ );
1033
+ }
1034
+
1035
+ // src/theme/default/components/form/index.tsx
1036
+ var import_jsx_runtime28 = require("react/jsx-runtime");
1037
+ function DefaultFormContainer({
1038
+ children,
1039
+ onSubmit,
1040
+ action,
1041
+ method
1042
+ }) {
1043
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
1044
+ "form",
1045
+ {
1046
+ onSubmit,
1047
+ noValidate: true,
1048
+ action,
1049
+ method,
1050
+ className: "grid gap-8",
1051
+ children
1052
+ }
1053
+ );
1054
+ }
1055
+ function DefaultMessageContainer({ children }) {
1056
+ const { flowType } = (0, import_elements_react6.useOryFlow)();
1057
+ if (!children || Array.isArray(children) && children.length === 0) {
1058
+ return null;
1059
+ }
1060
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
1061
+ "section",
1062
+ {
1063
+ className: cn(
1064
+ flowType === import_client_fetch6.FlowType.Settings ? "text-center" : "text-left"
1065
+ ),
1066
+ children
1067
+ }
1068
+ );
1069
+ }
1070
+ function DefaultMessage({ message }) {
1071
+ const intl = (0, import_react_intl4.useIntl)();
1072
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
1073
+ "span",
1074
+ {
1075
+ className: cn(
1076
+ "leading-normal",
1077
+ message.type === "error" && "text-interface-foreground-validation-danger",
1078
+ message.type === "info" && "text-interface-foreground-default-secondary",
1079
+ message.type === "success" && "text-interface-foreground-validation-success"
1080
+ ),
1081
+ ...(0, import_elements_react6.messageTestId)(message),
1082
+ children: (0, import_elements_react6.uiTextToFormattedMessage)(message, intl)
1083
+ }
1084
+ );
1085
+ }
1086
+
1087
+ // src/theme/default/components/card/auth-method-list-item.tsx
1088
+ var import_react_intl5 = require("react-intl");
1089
+
1090
+ // src/theme/default/assets/icons/code.svg
1091
+ var React18 = __toESM(require("react"));
1092
+ var import_jsx_runtime29 = require("react/jsx-runtime");
1093
+ var SvgCode = (props) => {
1094
+ var _a, _b;
1095
+ return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 15 13", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M6.333 10.666h-4A1.333 1.333 0 0 1 1 9.333V2.666m0 0a1.333 1.333 0 0 1 1.333-1.333h9.334A1.333 1.333 0 0 1 13 2.666m-12 0 6 4 6-4m0 0v4M12.333 12l1.334-1.334-1.334-1.333m-2 0L9 10.666 10.333 12" }) });
1096
+ };
1097
+ var code_default = SvgCode;
1098
+
1099
+ // src/theme/default/assets/icons/passkey.svg
1100
+ var React19 = __toESM(require("react"));
1101
+ var import_jsx_runtime30 = require("react/jsx-runtime");
1102
+ var SvgPasskey = (props) => {
1103
+ var _a, _b;
1104
+ return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 13 14", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M10.602 3.667c.603 1 .86 2.171.733 3.333v.667a4 4 0 0 0 .533 2M3.335 6.333a2.667 2.667 0 0 1 5.333 0V7c0 1.442.468 2.846 1.334 4m-4-4.667v1.334A9.33 9.33 0 0 0 7.668 13M3.335 9a12 12 0 0 0 1.2 4m-3.267-1.333A14.7 14.7 0 0 1 .668 7v-.667a5.333 5.333 0 0 1 8-4.633" }) });
1105
+ };
1106
+ var passkey_default = SvgPasskey;
1107
+
1108
+ // src/theme/default/assets/icons/password.svg
1109
+ var React20 = __toESM(require("react"));
1110
+ var import_jsx_runtime31 = require("react/jsx-runtime");
1111
+ var SvgPassword = (props) => {
1112
+ var _a, _b;
1113
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 14 4", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M7 .667v2.667m-1.333-.667 2.666-1.333m-2.666 0 2.666 1.333m-6-2v2.667M1 2.667l2.667-1.333M1 1.334l2.667 1.333m8-2v2.667m-1.334-.667L13 1.334m-2.667 0L13 2.667" }) });
1114
+ };
1115
+ var password_default = SvgPassword;
1116
+
1117
+ // src/theme/default/assets/icons/webauthn.svg
1118
+ var React21 = __toESM(require("react"));
1119
+ var import_jsx_runtime32 = require("react/jsx-runtime");
1120
+ var SvgWebauthn = (props) => {
1121
+ var _a, _b;
1122
+ return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 14 14", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5h.007m1.03-3.438 2.401 2.401a1.92 1.92 0 0 1 0 2.713l-1.762 1.762a1.92 1.92 0 0 1-2.713 0l-.2-.2-4.372 4.371a1.33 1.33 0 0 1-.826.386L2.448 13h-.781a.667.667 0 0 1-.662-.589L1 12.333v-.781c0-.313.11-.616.311-.856l.08-.087.276-.276H3V9h1.333V7.667l1.43-1.43-.201-.2a1.92 1.92 0 0 1 0-2.713l1.762-1.762a1.92 1.92 0 0 1 2.713 0" }) });
1123
+ };
1124
+ var webauthn_default = SvgWebauthn;
1125
+
1126
+ // src/theme/default/assets/icons/totp.svg
1127
+ var React22 = __toESM(require("react"));
1128
+ var import_jsx_runtime33 = require("react/jsx-runtime");
1129
+ var SvgTotp = (props) => {
1130
+ var _a, _b;
1131
+ return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9.333 22.667v.013m0-13.346v.013m13.333-.013v.013m0 9.32h-4v4m8-4v.013m-8 7.987h4m0-4h4v4m-21.333-20a1.333 1.333 0 0 1 1.333-1.333H12a1.333 1.333 0 0 1 1.333 1.333V12A1.334 1.334 0 0 1 12 13.334H6.666A1.334 1.334 0 0 1 5.333 12zm13.333 0A1.333 1.333 0 0 1 20 5.334h5.333a1.333 1.333 0 0 1 1.333 1.333V12a1.333 1.333 0 0 1-1.333 1.334H20A1.333 1.333 0 0 1 18.666 12zM5.333 20a1.333 1.333 0 0 1 1.333-1.333H12A1.333 1.333 0 0 1 13.333 20v5.334A1.333 1.333 0 0 1 12 26.667H6.666a1.333 1.333 0 0 1-1.333-1.334z" }) });
1132
+ };
1133
+ var totp_default = SvgTotp;
1134
+
1135
+ // src/theme/default/assets/icons/code-asterix.svg
1136
+ var React23 = __toESM(require("react"));
1137
+ var import_jsx_runtime34 = require("react/jsx-runtime");
1138
+ var SvgCodeAsterix = (props) => {
1139
+ var _a, _b;
1140
+ return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 25", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 19.325a2 2 0 0 1-2-2v-4l-1-1 1-1v-4a2 2 0 0 1 2-2m6 6.875 3-1.687M12 12.2v3.375m0-3.375-3-1.687m3 1.687 3 1.688M12 12.2V8.825m0 3.375-3 1.688m9 5.437a2 2 0 0 0 2-2v-4l1-1-1-1v-4a2 2 0 0 0-2-2" }) });
1141
+ };
1142
+ var code_asterix_default = SvgCodeAsterix;
1143
+
1144
+ // src/theme/default/utils/form.ts
1145
+ function isGroupImmediateSubmit(group) {
1146
+ return group === "code";
1147
+ }
1148
+
1149
+ // src/theme/default/components/card/auth-method-list-item.tsx
1150
+ var import_jsx_runtime35 = require("react/jsx-runtime");
1151
+ var iconsMap = {
1152
+ code: code_default,
1153
+ passkey: passkey_default,
1154
+ password: password_default,
1155
+ webauthn: webauthn_default,
1156
+ hardware_token: passkey_default,
1157
+ totp: totp_default,
1158
+ lookup_secret: code_asterix_default,
1159
+ ...provider_logos_default
1160
+ };
1161
+ function DefaultAuthMethodListItem({
1162
+ onClick,
1163
+ group,
1164
+ title
1165
+ }) {
1166
+ var _a;
1167
+ const intl = (0, import_react_intl5.useIntl)();
1168
+ const Icon = iconsMap[group] || null;
1169
+ return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
1170
+ "button",
1171
+ {
1172
+ className: "flex cursor-pointer gap-3 text-left items-start w-full rounded-buttons p-2 hover:bg-interface-background-default-primary-hover",
1173
+ onClick,
1174
+ type: isGroupImmediateSubmit(group) ? "submit" : "button",
1175
+ "data-testid": `ory/form/auth-picker/${group}`,
1176
+ children: [
1177
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "mt-1", children: Icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, { size: 16, className: "text-interface-foreground-brand-primary" }) }),
1178
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "flex-1 leading-normal inline-flex flex-col w-full", children: [
1179
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "text-interface-foreground-default-primary truncate mr-6", children: [
1180
+ intl.formatMessage(
1181
+ { id: (_a = title == null ? void 0 : title.id) != null ? _a : `two-step.${group}.title` },
1182
+ title == null ? void 0 : title.values
1183
+ ),
1184
+ " "
1185
+ ] }),
1186
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-interface-foreground-default-secondary", children: intl.formatMessage({
1187
+ id: `two-step.${group}.description`
1188
+ }) })
1189
+ ] })
1190
+ ]
1191
+ }
1192
+ );
1193
+ }
1194
+
1195
+ // src/theme/default/components/form/button.tsx
1196
+ var import_client_fetch7 = require("@ory/client-fetch");
1197
+ var import_elements_react7 = require("@ory/elements-react");
1198
+ var import_class_variance_authority = require("class-variance-authority");
1199
+ var import_react_hook_form3 = require("react-hook-form");
1200
+ var import_react_intl6 = require("react-intl");
1201
+ var import_react4 = require("react");
1202
+ var import_jsx_runtime36 = require("react/jsx-runtime");
1203
+ var buttonStyles = (0, import_class_variance_authority.cva)(
1204
+ [
1205
+ "relative flex justify-center gap-3 overflow-hidden rounded-buttons leading-none ring-1 ring-inset font-medium",
1206
+ "disabled:cursor-not-allowed loading:cursor-wait loading:before:pointer-events-none",
1207
+ "transition-colors duration-100 ease-linear",
1208
+ "p-4 max-w-[488px]"
1209
+ ],
1210
+ {
1211
+ variants: {
1212
+ intent: {
1213
+ primary: [
1214
+ "bg-button-primary-background-default text-button-primary-foreground-default ring-button-primary-border-default",
1215
+ "hover:bg-button-primary-background-hover hover:text-button-primary-foreground-hover hover:ring-button-primary-border-hover",
1216
+ "disabled:bg-button-primary-background-disabled disabled:text-button-primary-foreground-disabled disabled:ring-button-primary-border-disabled",
1217
+ "loading:bg-button-primary-background-default loading:text-button-primary-foreground-default loading:ring-button-primary-border-default",
1218
+ "loading:before:absolute loading:before:inset-0 loading:before:bg-button-primary-background-default loading:before:opacity-80 loading:before:content-['']",
1219
+ "disabled:bg-button-primary-background-disabled disabled:text-button-primary-foreground-disabled disabled:ring-button-primary-border-disabled"
1220
+ ],
1221
+ secondary: [
1222
+ "bg-button-secondary-background-default text-button-secondary-foreground-default ring-button-secondary-border-default",
1223
+ "hover:bg-button-secondary-background-hover hover:text-button-secondary-foreground-hover hover:ring-button-secondary-border-hover",
1224
+ "disabled:bg-button-secondary-background-disabled disabled:text-button-secondary-foreground-disabled disabled:ring-button-secondary-border-disabled",
1225
+ "loading:bg-button-secondary-background-default loading:text-button-secondary-foreground-default loading:ring-button-secondary-border-default",
1226
+ "loading:before:absolute loading:before:inset-0 loading:before:bg-button-secondary-background-default loading:before:opacity-80 loading:before:content-['']"
1227
+ ]
1228
+ },
1229
+ defaultVariants: {
1230
+ intent: "primary"
1231
+ }
1232
+ }
1233
+ }
1234
+ );
1235
+ var DefaultButton = ({
1236
+ attributes,
1237
+ node,
1238
+ onClick
1239
+ }) => {
1240
+ var _a;
1241
+ const {
1242
+ type,
1243
+ name,
1244
+ value,
1245
+ // Button does not support these attributes, so we skip them
1246
+ autocomplete: _ignoredAutocomplete,
1247
+ label: _ignoredLabel,
1248
+ node_type: _ignoredNodeType,
1249
+ maxlength: _ignoredMaxLength,
1250
+ // End of skipped attributes
1251
+ ...rest
1252
+ } = attributes;
1253
+ const [clicked, setClicked] = (0, import_react4.useState)(false);
1254
+ const intl = (0, import_react_intl6.useIntl)();
1255
+ const label = (0, import_client_fetch7.getNodeLabel)(node);
1256
+ const {
1257
+ formState: { isSubmitting },
1258
+ setValue
1259
+ } = (0, import_react_hook_form3.useFormContext)();
1260
+ (0, import_react4.useEffect)(() => {
1261
+ if (!isSubmitting) {
1262
+ setClicked(false);
1263
+ }
1264
+ }, [isSubmitting]);
1265
+ const isPrimary = attributes.name === "method" || attributes.name.includes("passkey") || attributes.name.includes("webauthn") || attributes.name.includes("lookup_secret");
1266
+ return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
1267
+ "button",
1268
+ {
1269
+ ...rest,
1270
+ value,
1271
+ name,
1272
+ type: type === "button" ? "button" : "submit",
1273
+ onClick: (e) => {
1274
+ onClick == null ? void 0 : onClick(e);
1275
+ setClicked(true);
1276
+ if (type !== "button") {
1277
+ setValue(name, value);
1278
+ }
1279
+ },
1280
+ className: buttonStyles({
1281
+ intent: isPrimary ? "primary" : "secondary"
1282
+ }),
1283
+ disabled: (_a = rest.disabled) != null ? _a : isSubmitting,
1284
+ "data-loading": clicked,
1285
+ children: [
1286
+ clicked ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Spinner, {}) : null,
1287
+ label ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: (0, import_elements_react7.uiTextToFormattedMessage)(label, intl) }) : ""
1288
+ ]
1289
+ }
1290
+ );
1291
+ };
1292
+ DefaultButton.displayName = "DefaultButton";
1293
+
1294
+ // src/theme/default/components/form/checkbox.tsx
1295
+ var import_client_fetch8 = require("@ory/client-fetch");
1296
+ var import_elements_react8 = require("@ory/elements-react");
1297
+ var import_react_hook_form4 = require("react-hook-form");
1298
+ var import_react_intl8 = require("react-intl");
1299
+
1300
+ // src/theme/default/components/ui/checkbox-label.tsx
1301
+ var import_react_intl7 = require("react-intl");
1302
+
1303
+ // src/util/i18n/index.ts
1304
+ var uiTextToFormattedMessage4 = ({ id, context = {}, text }, intl) => {
1305
+ const contextInjectedMessage = Object.entries(context).reduce(
1306
+ (accumulator, [key, value]) => {
1307
+ if (Array.isArray(value)) {
1308
+ return {
1309
+ ...accumulator,
1310
+ [key]: value,
1311
+ [key + "_list"]: intl.formatList(value)
1312
+ };
1313
+ } else if (key.endsWith("_unix")) {
1314
+ if (typeof value === "number") {
1315
+ return {
1316
+ ...accumulator,
1317
+ [key]: intl.formatDate(new Date(value * 1e3)),
1318
+ [key + "_since"]: intl.formatDateTimeRange(
1319
+ new Date(value),
1320
+ /* @__PURE__ */ new Date()
1321
+ ),
1322
+ [key + "_since_minutes"]: Math.ceil(
1323
+ (value - (/* @__PURE__ */ new Date()).getTime() / 1e3) / 60
1324
+ ).toFixed(0),
1325
+ [key + "_until"]: intl.formatDateTimeRange(
1326
+ /* @__PURE__ */ new Date(),
1327
+ new Date(value)
1328
+ ),
1329
+ [key + "_until_minutes"]: Math.ceil(
1330
+ ((/* @__PURE__ */ new Date()).getTime() / 1e3 - value) / 60
1331
+ ).toFixed(0)
1332
+ };
1333
+ }
1334
+ } else if (key === "property") {
1335
+ return {
1336
+ ...accumulator,
1337
+ [key]: intl.formatMessage({
1338
+ id: `property.${value}`,
1339
+ defaultMessage: value
1340
+ })
1341
+ };
1342
+ }
1343
+ return {
1344
+ ...accumulator,
1345
+ [key]: value
1346
+ };
1347
+ },
1348
+ {}
1349
+ );
1350
+ return intl.formatMessage(
1351
+ {
1352
+ id: `identities.messages.${id}`,
1353
+ defaultMessage: text
1354
+ },
1355
+ contextInjectedMessage
1356
+ );
1357
+ };
1358
+
1359
+ // src/theme/default/components/ui/checkbox-label.tsx
1360
+ var import_jsx_runtime37 = require("react/jsx-runtime");
1361
+ var linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
1362
+ function computeLabelElements(labelText) {
1363
+ const elements = [];
1364
+ let lastIndex = 0;
1365
+ for (const match of labelText.matchAll(linkRegex)) {
1366
+ const linkText = match[1];
1367
+ const url = match[2];
1368
+ const matchStart = match.index;
1369
+ if (typeof matchStart === "undefined") {
1370
+ continue;
1371
+ }
1372
+ if (matchStart > lastIndex) {
1373
+ elements.push(labelText.slice(lastIndex, matchStart));
1374
+ }
1375
+ elements.push(
1376
+ /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
1377
+ "a",
1378
+ {
1379
+ href: url,
1380
+ target: "_blank",
1381
+ rel: "noopener noreferrer",
1382
+ className: "text-button-link-brand-brand hover:text-button-link-brand-brand-hover underline",
1383
+ children: linkText
1384
+ },
1385
+ matchStart
1386
+ )
1387
+ );
1388
+ lastIndex = matchStart + match[0].length;
1389
+ }
1390
+ if (lastIndex < labelText.length) {
1391
+ elements.push(labelText.slice(lastIndex));
1392
+ }
1393
+ return elements;
1394
+ }
1395
+ function CheckboxLabel({ label }) {
1396
+ const intl = (0, import_react_intl7.useIntl)();
1397
+ if (!label) {
1398
+ return null;
1399
+ }
1400
+ const labelText = uiTextToFormattedMessage4(label, intl);
1401
+ return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: computeLabelElements(labelText) });
1402
+ }
1403
+
1404
+ // src/theme/default/components/form/checkbox.tsx
1405
+ var import_jsx_runtime38 = require("react/jsx-runtime");
1406
+ function CheckboxSVG() {
1407
+ return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
1408
+ "svg",
1409
+ {
1410
+ className: "absolute hidden size-4 peer-checked:block fill-checkbox-foreground-checked",
1411
+ xmlns: "http://www.w3.org/2000/svg",
1412
+ width: "16",
1413
+ height: "16",
1414
+ viewBox: "0 0 16 16",
1415
+ fill: "none",
1416
+ children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
1417
+ "path",
1418
+ {
1419
+ fillRule: "evenodd",
1420
+ clipRule: "evenodd",
1421
+ d: "M11.6464 5.14645C11.8417 4.95118 12.1583 4.95118 12.3536 5.14645C12.5338 5.32669 12.5477 5.6103 12.3951 5.80645L12.3536 5.85355L7.35355 10.8536C7.17331 11.0338 6.8897 11.0477 6.69355 10.8951L6.64645 10.8536L4.14645 8.35355C3.95118 8.15829 3.95118 7.84171 4.14645 7.64645C4.32669 7.4662 4.6103 7.45234 4.80645 7.60485L4.85355 7.64645L7 9.7925L11.6464 5.14645Z"
1422
+ }
1423
+ )
1424
+ }
1425
+ );
1426
+ }
1427
+ var DefaultCheckbox = ({
1428
+ attributes: initialAttributes,
1429
+ node
1430
+ }) => {
1431
+ const {
1432
+ value,
1433
+ name,
1434
+ // Button does not support these attributes, so we skip them
1435
+ autocomplete: _autocomplete,
1436
+ onclick: _onclick,
1437
+ maxlength: _max,
1438
+ // End of skipped attributes
1439
+ ...attributes
1440
+ } = initialAttributes;
1441
+ const intl = (0, import_react_intl8.useIntl)();
1442
+ const label = (0, import_client_fetch8.getNodeLabel)(node);
1443
+ const { register } = (0, import_react_hook_form4.useForm)();
1444
+ const hasError = node.messages.some((m) => m.type === "error");
1445
+ return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("label", { className: "flex items-start gap-3 self-stretch antialiased", children: [
1446
+ /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "flex h-5 items-center", children: [
1447
+ /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
1448
+ "input",
1449
+ {
1450
+ ...attributes,
1451
+ value: 1,
1452
+ defaultChecked: Boolean(value),
1453
+ type: "checkbox",
1454
+ className: cn(
1455
+ "peer size-4 border appearance-none rounded-forms bg-checkbox-background-default border-checkbox-border-checkbox-border-default checked:bg-checkbox-background-checked checked:border-checkbox-border-checkbox-border-checked",
1456
+ hasError && "border-interface-border-validation-danger"
1457
+ ),
1458
+ ...register(name, { value })
1459
+ }
1460
+ ),
1461
+ /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CheckboxSVG, {})
1462
+ ] }),
1463
+ /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "flex flex-col", children: [
1464
+ /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "font-normal leading-tight text-interface-foreground-default-primary", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CheckboxLabel, { label }) }),
1465
+ node.messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
1466
+ "span",
1467
+ {
1468
+ className: cn(
1469
+ "mt-1",
1470
+ message.type === "error" ? "text-interface-foreground-validation-danger" : "text-interface-foreground-default-secondary"
1471
+ ),
1472
+ ...(0, import_elements_react8.messageTestId)(message),
1473
+ children: (0, import_elements_react8.uiTextToFormattedMessage)(message, intl)
1474
+ },
1475
+ message.id
1476
+ ))
1477
+ ] })
1478
+ ] });
1479
+ };
1480
+
1481
+ // src/theme/default/components/form/group-container.tsx
1482
+ var import_jsx_runtime39 = require("react/jsx-runtime");
1483
+ function DefaultGroupContainer({ children }) {
1484
+ return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "grid grid-cols-1 gap-8", children });
1485
+ }
1486
+
1487
+ // src/theme/default/components/form/horizontal-divider.tsx
1488
+ var import_jsx_runtime40 = require("react/jsx-runtime");
1489
+ function DefaultHorizontalDivider() {
1490
+ return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("hr", { className: "border-interface-border-default-primary" });
1491
+ }
1492
+
1493
+ // src/theme/default/components/form/image.tsx
1494
+ var import_jsx_runtime41 = require("react/jsx-runtime");
1495
+ function DefaultImage({ attributes }) {
1496
+ return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("figure", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("img", { ...attributes }) });
1497
+ }
1498
+
1499
+ // src/theme/default/components/form/input.tsx
1500
+ var import_client_fetch9 = require("@ory/client-fetch");
1501
+ var import_elements_react9 = require("@ory/elements-react");
1502
+ var import_react5 = require("react");
1503
+ var import_react_hook_form5 = require("react-hook-form");
1504
+ var import_react_intl9 = require("react-intl");
1505
+
1506
+ // src/theme/default/assets/icons/eye-off.svg
1507
+ var React24 = __toESM(require("react"));
1508
+ var import_jsx_runtime42 = require("react/jsx-runtime");
1509
+ var SvgEyeOff = (props) => {
1510
+ var _a, _b;
1511
+ return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { stroke: "#000", strokeLinecap: "round", strokeLinejoin: "round", d: "M10.585 10.587a2 2 0 0 0 2.829 2.828m3.267 3.258A8.7 8.7 0 0 1 12 18q-5.4 0-9-6 1.908-3.18 4.32-4.674m2.86-1.146A9 9 0 0 1 12 6q5.4 0 9 6-1 1.665-2.138 2.87M3 3l18 18" }) });
1512
+ };
1513
+ var eye_off_default = SvgEyeOff;
1514
+
1515
+ // src/theme/default/assets/icons/eye.svg
1516
+ var React25 = __toESM(require("react"));
1517
+ var import_jsx_runtime43 = require("react/jsx-runtime");
1518
+ var SvgEye = (props) => {
1519
+ var _a, _b;
1520
+ return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("g", { strokeLinecap: "round", strokeLinejoin: "round", children: [
1521
+ /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("path", { stroke: "currentColor", d: "M10 12a2 2 0 1 0 4 0 2 2 0 0 0-4 0" }),
1522
+ /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("path", { stroke: "#64748B", d: "M21 12q-3.6 6-9 6t-9-6q3.6-6 9-6t9 6" })
1523
+ ] }) });
1524
+ };
1525
+ var eye_default = SvgEye;
1526
+
1527
+ // src/theme/default/components/form/input.tsx
1528
+ var import_jsx_runtime44 = require("react/jsx-runtime");
1529
+ var DefaultInput = ({
1530
+ node,
1531
+ attributes,
1532
+ onClick
1533
+ }) => {
1534
+ const label = (0, import_client_fetch9.getNodeLabel)(node);
1535
+ const { register } = (0, import_react_hook_form5.useFormContext)();
1536
+ const {
1537
+ value,
1538
+ autocomplete,
1539
+ name,
1540
+ maxlength,
1541
+ node_type: _,
1542
+ ...rest
1543
+ } = attributes;
1544
+ const intl = (0, import_react_intl9.useIntl)();
1545
+ const { flowType } = (0, import_elements_react9.useOryFlow)();
1546
+ const inputRef = (0, import_react5.useRef)(null);
1547
+ const formattedLabel = label ? intl.formatMessage(
1548
+ {
1549
+ id: "input.placeholder",
1550
+ defaultMessage: "Enter your {placeholder}"
1551
+ },
1552
+ {
1553
+ placeholder: (0, import_elements_react9.uiTextToFormattedMessage)(label, intl)
1554
+ }
1555
+ ) : "";
1556
+ if (rest.type === "hidden") {
1557
+ return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
1558
+ "input",
1559
+ {
1560
+ ...rest,
1561
+ onClick,
1562
+ maxLength: maxlength,
1563
+ autoComplete: autocomplete,
1564
+ placeholder: formattedLabel,
1565
+ "data-testid": `ory/form/node/input/${name}`,
1566
+ ...register(name, { value })
1567
+ }
1568
+ );
1569
+ }
1570
+ const { ref, ...restRegister } = register(name, { value });
1571
+ return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
1572
+ "div",
1573
+ {
1574
+ className: cn(
1575
+ "relative flex justify-stretch",
1576
+ // The settings flow input fields are supposed to be dense, so we don't need the extra padding we want on the user flows.
1577
+ flowType === import_client_fetch9.FlowType.Settings && "max-w-[488px]"
1578
+ ),
1579
+ children: [
1580
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
1581
+ "input",
1582
+ {
1583
+ ...rest,
1584
+ onClick,
1585
+ maxLength: maxlength,
1586
+ autoComplete: autocomplete,
1587
+ placeholder: formattedLabel,
1588
+ "data-testid": `ory/form/node/input/${name}`,
1589
+ className: cn(
1590
+ "antialiased rounded-forms border leading-tight transition-colors placeholder:h-[20px] placeholder:text-input-foreground-tertiary focus-visible:outline-none focus:ring-0 w-full",
1591
+ "bg-input-background-default border-input-border-default text-input-foreground-primary",
1592
+ "disabled:bg-input-background-disabled disabled:border-input-border-disabled disabled:text-input-foreground-disabled",
1593
+ "focus:border-input-border-focus focus-visible:border-input-border-focus",
1594
+ "hover:bg-input-background-hover hover:border-input-border-hover",
1595
+ "px-4 py-[13px]"
1596
+ ),
1597
+ ref: (e) => {
1598
+ inputRef.current = e;
1599
+ ref(e);
1600
+ },
1601
+ ...restRegister
1602
+ }
1603
+ ),
1604
+ rest.type === "password" && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PasswordToggle, { inputRef })
1605
+ ]
1606
+ }
1607
+ );
1608
+ };
1609
+ function PasswordToggle({
1610
+ inputRef
1611
+ }) {
1612
+ const [shown, setShown] = (0, import_react5.useState)(false);
1613
+ const handleClick = () => {
1614
+ setShown(!shown);
1615
+ if (inputRef.current) {
1616
+ inputRef.current.type = shown ? "password" : "text";
1617
+ }
1618
+ };
1619
+ return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
1620
+ "button",
1621
+ {
1622
+ onClick: handleClick,
1623
+ className: "absolute right-0 h-full w-12 flex items-center justify-center",
1624
+ type: "button",
1625
+ children: shown ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(eye_off_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(eye_default, {})
1626
+ }
1627
+ );
1628
+ }
1629
+
1630
+ // src/theme/default/components/form/label.tsx
1631
+ var import_client_fetch10 = require("@ory/client-fetch");
1632
+ var import_elements_react10 = require("@ory/elements-react");
1633
+ var import_react_hook_form6 = require("react-hook-form");
1634
+ var import_react_intl10 = require("react-intl");
1635
+ var import_jsx_runtime45 = require("react/jsx-runtime");
1636
+ function findResendNode(nodes) {
1637
+ return nodes.find(
1638
+ (n) => "name" in n.attributes && (n.attributes.name === "email" && n.attributes.type === "submit" || n.attributes.name === "resend")
1639
+ );
1640
+ }
1641
+ function DefaultLabel({
1642
+ node,
1643
+ children,
1644
+ attributes,
1645
+ ...rest
1646
+ }) {
1647
+ const intl = (0, import_react_intl10.useIntl)();
1648
+ const label = (0, import_client_fetch10.getNodeLabel)(node);
1649
+ const { Message } = (0, import_elements_react10.useComponents)();
1650
+ const { config, flowType, flow } = (0, import_elements_react10.useOryFlow)();
1651
+ const { setValue, formState } = (0, import_react_hook_form6.useFormContext)();
1652
+ const isPassword = attributes.type === "password";
1653
+ const resendNode = findResendNode(flow.ui.nodes);
1654
+ const handleResend = () => {
1655
+ if ((resendNode == null ? void 0 : resendNode.attributes) && "name" in resendNode.attributes) {
1656
+ setValue(resendNode.attributes.name, resendNode.attributes.value);
1657
+ }
1658
+ };
1659
+ const fieldError = formState.errors[attributes.name];
1660
+ return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-col gap-1 antialiased", children: [
1661
+ label && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "inline-flex justify-between", children: [
1662
+ /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
1663
+ "label",
1664
+ {
1665
+ ...(0, import_elements_react10.messageTestId)(label),
1666
+ className: "leading-normal text-input-foreground-primary",
1667
+ htmlFor: attributes.name,
1668
+ "data-testid": `ory/form/node/input/label/${attributes.name}`,
1669
+ ...rest,
1670
+ children: (0, import_elements_react10.uiTextToFormattedMessage)(label, intl)
1671
+ }
1672
+ ),
1673
+ isPassword && config.project.recovery_enabled && flowType === import_client_fetch10.FlowType.Login && // TODO: make it possible to override with a custom component
1674
+ /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
1675
+ "a",
1676
+ {
1677
+ href: initFlowUrl(config.sdk.url, "recovery", flow),
1678
+ className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
1679
+ children: intl.formatMessage({
1680
+ id: "forms.label.forgot-password",
1681
+ defaultMessage: "Forgot password?"
1682
+ })
1683
+ }
1684
+ ),
1685
+ (resendNode == null ? void 0 : resendNode.attributes.node_type) === "input" && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
1686
+ "button",
1687
+ {
1688
+ type: "submit",
1689
+ name: resendNode.attributes.name,
1690
+ value: resendNode.attributes.value,
1691
+ onClick: handleResend,
1692
+ className: "cursor-pointer text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
1693
+ children: intl.formatMessage({ id: "identities.messages.1070008" })
1694
+ }
1695
+ )
1696
+ ] }),
1697
+ children,
1698
+ node.messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Message.Content, { message }, message.id)),
1699
+ fieldError && (0, import_client_fetch10.instanceOfUiText)(fieldError) && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Message.Content, { message: fieldError })
1700
+ ] });
1701
+ }
1702
+
1703
+ // src/theme/default/components/form/link-button.tsx
1704
+ var import_client_fetch11 = require("@ory/client-fetch");
1705
+ var import_elements_react11 = require("@ory/elements-react");
1706
+ var import_react6 = require("react");
1707
+ var import_react_intl11 = require("react-intl");
1708
+ var import_jsx_runtime46 = require("react/jsx-runtime");
1709
+ var DefaultLinkButton = (0, import_react6.forwardRef)(({ attributes, node }, ref) => {
1710
+ const intl = (0, import_react_intl11.useIntl)();
1711
+ const label = (0, import_client_fetch11.getNodeLabel)(node);
1712
+ return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
1713
+ "a",
1714
+ {
1715
+ ...attributes,
1716
+ ref,
1717
+ title: label ? (0, import_elements_react11.uiTextToFormattedMessage)(label, intl) : "",
1718
+ "data-testid": `ory/form/node/link/${attributes.id}`,
1719
+ className: cn(
1720
+ "antialiased rounded cursor-pointer text-center border gap-3 leading-none bg-button-primary-background-default hover:bg-button-primary-background-hover transition-colors text-button-primary-foreground-default hover:text-button-primary-foreground-hover p-4 font-medium"
1721
+ ),
1722
+ children: label ? (0, import_elements_react11.uiTextToFormattedMessage)(label, intl) : ""
1723
+ }
1724
+ );
1725
+ });
1726
+ DefaultLinkButton.displayName = "DefaultLinkButton";
1727
+
1728
+ // src/theme/default/components/form/pin-code-input.tsx
1729
+ var import_react_hook_form7 = require("react-hook-form");
1730
+
1731
+ // src/theme/default/components/form/shadcn/otp-input.tsx
1732
+ var import_input_otp = require("input-otp");
1733
+ var React26 = __toESM(require("react"));
1734
+ var import_jsx_runtime47 = require("react/jsx-runtime");
1735
+ var InputOTP = React26.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
1736
+ import_input_otp.OTPInput,
1737
+ {
1738
+ ref,
1739
+ containerClassName: cn(
1740
+ "flex items-center gap-2 has-[:disabled]:opacity-50",
1741
+ containerClassName
1742
+ ),
1743
+ className: cn("disabled:cursor-not-allowed", className),
1744
+ ...props
1745
+ }
1746
+ ));
1747
+ InputOTP.displayName = "InputOTP";
1748
+ var InputOTPGroup = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ref, className: cn("flex items-center", className), ...props }));
1749
+ InputOTPGroup.displayName = "InputOTPGroup";
1750
+ var InputOTPSlot = React26.forwardRef(({ index, className, ...props }, ref) => {
1751
+ const inputOTPContext = React26.useContext(import_input_otp.OTPInputContext);
1752
+ const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
1753
+ return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
1754
+ "div",
1755
+ {
1756
+ ref,
1757
+ className: cn(
1758
+ "rounded-forms border border-solid bg-input-background-default py-[15px] text-center focus-visible:outline-none w-full",
1759
+ "relative flex items-center justify-center transition-all leading-none",
1760
+ isActive ? "border-input-border-focus" : "border-input-border-default",
1761
+ className
1762
+ ),
1763
+ ...props,
1764
+ children: [
1765
+ /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "inline-block size-4", children: char }),
1766
+ hasFakeCaret && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "h-4 w-px animate-caret-blink bg-interface-background-brand-primary duration-700" }) })
1767
+ ]
1768
+ }
1769
+ );
1770
+ });
1771
+ InputOTPSlot.displayName = "InputOTPSlot";
1772
+
1773
+ // src/theme/default/components/form/pin-code-input.tsx
1774
+ var import_elements_react12 = require("@ory/elements-react");
1775
+ var import_client_fetch12 = require("@ory/client-fetch");
1776
+ var import_jsx_runtime48 = require("react/jsx-runtime");
1777
+ var DefaultPinCodeInput = ({ attributes }) => {
1778
+ const { setValue, watch } = (0, import_react_hook_form7.useFormContext)();
1779
+ const { maxlength, name } = attributes;
1780
+ const elements = maxlength != null ? maxlength : 6;
1781
+ const { flowType } = (0, import_elements_react12.useOryFlow)();
1782
+ const handleInputChange = (v) => {
1783
+ setValue(name, v);
1784
+ };
1785
+ const value = watch(name);
1786
+ return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
1787
+ InputOTP,
1788
+ {
1789
+ maxLength: maxlength != null ? maxlength : 6,
1790
+ onChange: handleInputChange,
1791
+ name,
1792
+ value,
1793
+ children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
1794
+ InputOTPGroup,
1795
+ {
1796
+ className: cn(
1797
+ "w-full flex gap-2 justify-stretch",
1798
+ // The settings flow input fields are supposed to be dense, so we don't need the extra padding we want on the user flows.
1799
+ flowType === import_client_fetch12.FlowType.Settings && "max-w-[488px]"
1800
+ ),
1801
+ children: [...Array(elements)].map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(InputOTPSlot, { index }, index))
1802
+ }
1803
+ )
1804
+ }
1805
+ );
1806
+ };
1807
+
1808
+ // src/theme/default/components/form/section.tsx
1809
+ var import_jsx_runtime49 = require("react/jsx-runtime");
1810
+ var DefaultFormSection = ({
1811
+ children,
1812
+ nodes: _nodes,
1813
+ ...rest
1814
+ }) => {
1815
+ return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
1816
+ "form",
1817
+ {
1818
+ className: "flex w-full max-w-screen-sm flex-col md:max-w-[712px] lg:max-w-[802px] xl:max-w-[896px] px-4",
1819
+ ...rest,
1820
+ children
1821
+ }
1822
+ );
1823
+ };
1824
+ var DefaultFormSectionContent = ({
1825
+ title,
1826
+ description,
1827
+ children
1828
+ }) => {
1829
+ return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col gap-8 rounded-t-cards border border-b-0 border-interface-border-default-primary bg-interface-background-default-primary px-6 py-8", children: [
1830
+ /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col gap-2", children: [
1831
+ /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("h3", { className: "font-medium text-interface-foreground-default-primary", children: title }),
1832
+ /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-interface-foreground-default-secondary", children: description })
1833
+ ] }),
1834
+ children
1835
+ ] });
1836
+ };
1837
+ var DefaultFormSectionFooter = ({
1838
+ children,
1839
+ text
1840
+ }) => {
1841
+ return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
1842
+ "div",
1843
+ {
1844
+ className: cn(
1845
+ "flex min-h-[72px] items-center justify-between gap-2 rounded-b-cards border border-interface-border-default-primary bg-interface-background-default-secondary px-6 py-4 text-interface-foreground-default-tertiary"
1846
+ ),
1847
+ children: [
1848
+ /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { children: text }),
1849
+ children
1850
+ ]
1851
+ }
1852
+ );
1853
+ };
1854
+
1855
+ // src/theme/default/components/form/text.tsx
1856
+ var import_elements_react13 = require("@ory/elements-react");
1857
+ var import_react_intl12 = require("react-intl");
1858
+ var import_jsx_runtime50 = require("react/jsx-runtime");
1859
+ function DefaultText({ node, attributes }) {
1860
+ var _a;
1861
+ const intl = (0, import_react_intl12.useIntl)();
1862
+ const lookup = (_a = attributes.text.context) == null ? void 0 : _a.secrets;
1863
+ if (lookup) {
1864
+ return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
1865
+ /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { "data-testid": `ory/form/node/text/${attributes.id}/label`, children: node.meta.label ? (0, import_elements_react13.uiTextToFormattedMessage)(node.meta.label, intl) : "" }),
1866
+ lookup.map((text, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
1867
+ "pre",
1868
+ {
1869
+ "data-testid": `ory/form/node/text/lookup_secret_codes/text`,
1870
+ children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("code", { children: text ? (0, import_elements_react13.uiTextToFormattedMessage)(text, intl) : "" })
1871
+ },
1872
+ index
1873
+ ))
1874
+ ] });
1875
+ }
1876
+ return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_jsx_runtime50.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
1877
+ "p",
1878
+ {
1879
+ "data-testid": `ory/form/node/text/${attributes.id}/label`,
1880
+ id: attributes.id,
1881
+ children: [
1882
+ node.meta.label ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("label", { children: (0, import_elements_react13.uiTextToFormattedMessage)(node.meta.label, intl) }) : null,
1883
+ attributes.text ? (0, import_elements_react13.uiTextToFormattedMessage)(attributes.text, intl) : ""
1884
+ ]
1885
+ }
1886
+ ) });
1887
+ }
1888
+
1889
+ // src/theme/default/components/generic/page-header.tsx
1890
+ var import_elements_react15 = require("@ory/elements-react");
1891
+
1892
+ // src/theme/default/components/ui/user-menu.tsx
1893
+ var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
1894
+ var import_react9 = require("react");
1895
+ var import_elements_react14 = require("@ory/elements-react");
1896
+
1897
+ // src/util/client.ts
1898
+ var import_client_fetch13 = require("@ory/client-fetch");
1899
+ function frontendClient(sdkUrl, opts = {}) {
1900
+ const config = new import_client_fetch13.Configuration({
1901
+ ...opts,
1902
+ basePath: sdkUrl,
1903
+ headers: {
1904
+ Accept: "application/json",
1905
+ ...opts.headers
1906
+ }
1907
+ });
1908
+ return new import_client_fetch13.FrontendApi(config);
1909
+ }
1910
+
1911
+ // src/theme/default/assets/icons/logout.svg
1912
+ var React27 = __toESM(require("react"));
1913
+ var import_jsx_runtime51 = require("react/jsx-runtime");
1914
+ var SvgLogout = (props) => {
1915
+ var _a, _b;
1916
+ return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M9.333 5.334V4A1.333 1.333 0 0 0 8 2.667H3.333A1.333 1.333 0 0 0 2 4v8a1.333 1.333 0 0 0 1.333 1.334H8A1.333 1.333 0 0 0 9.333 12v-1.333M4.667 8H14m0 0-2-2m2 2-2 2" }) });
1917
+ };
1918
+ var logout_default = SvgLogout;
1919
+
1920
+ // src/theme/default/assets/icons/settings.svg
1921
+ var React28 = __toESM(require("react"));
1922
+ var import_jsx_runtime52 = require("react/jsx-runtime");
1923
+ var SvgSettings = (props) => {
1924
+ var _a, _b;
1925
+ return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("g", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: [
1926
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("path", { d: "M6.883 2.878c.284-1.17 1.95-1.17 2.234 0a1.15 1.15 0 0 0 1.715.71c1.029-.626 2.207.551 1.58 1.58a1.148 1.148 0 0 0 .71 1.715c1.17.284 1.17 1.95 0 2.234a1.15 1.15 0 0 0-.71 1.715c.626 1.029-.551 2.207-1.58 1.58a1.148 1.148 0 0 0-1.715.71c-.284 1.17-1.95 1.17-2.234 0a1.15 1.15 0 0 0-1.715-.71c-1.029.626-2.207-.551-1.58-1.58a1.15 1.15 0 0 0-.71-1.715c-1.17-.284-1.17-1.95 0-2.234a1.15 1.15 0 0 0 .71-1.715c-.626-1.029.551-2.207 1.58-1.58.667.405 1.531.047 1.715-.71" }),
1927
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("path", { d: "M6 8a2 2 0 1 0 4 0 2 2 0 0 0-4 0" })
1928
+ ] }) });
1929
+ };
1930
+ var settings_default = SvgSettings;
1931
+
1932
+ // src/theme/default/utils/user.ts
1933
+ function isTraitsIndexable(traits) {
1934
+ return typeof traits === "object" && traits !== null;
1935
+ }
1936
+ var getUserInitials = (session) => {
1937
+ var _a, _b;
1938
+ const avatar = "";
1939
+ let primary = "";
1940
+ let secondary = "";
1941
+ if (!((_a = session == null ? void 0 : session.identity) == null ? void 0 : _a.traits) || !isTraitsIndexable(session.identity.traits)) {
1942
+ return {
1943
+ primary,
1944
+ secondary,
1945
+ avatar
1946
+ };
1947
+ }
1948
+ const traits = (_b = session.identity) == null ? void 0 : _b.traits;
1949
+ if (traits.email && typeof traits.email === "string") {
1950
+ secondary = traits.email;
1951
+ }
1952
+ if (traits.name) {
1953
+ if (typeof traits.name === "string") {
1954
+ primary = traits.name;
1955
+ }
1956
+ if (typeof traits.name === "object" && traits.name && traits.name.first && traits.name.last) {
1957
+ primary = traits.name.first + " " + traits.name.last;
1958
+ }
1959
+ }
1960
+ if (primary === "") {
1961
+ primary = secondary;
1962
+ secondary = "";
1963
+ }
1964
+ return {
1965
+ primary,
1966
+ secondary,
1967
+ avatar
1968
+ };
1969
+ };
1970
+
1971
+ // src/theme/default/components/ui/dropdown-menu.tsx
1972
+ var import_react7 = require("react");
1973
+ var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
1974
+ var import_jsx_runtime53 = require("react/jsx-runtime");
1975
+ var DropdownMenu = DropdownMenuPrimitive.Root;
1976
+ var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
1977
+ var DropdownMenuContent = (0, import_react7.forwardRef)(({ className, sideOffset = 16, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
1978
+ DropdownMenuPrimitive.Content,
1979
+ {
1980
+ ref,
1981
+ sideOffset,
1982
+ align: "end",
1983
+ className: cn(
1984
+ "z-50 min-w-[19rem] overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
1985
+ "border border-interface-border-default-primary bg-interface-background-default-primary rounded-cards",
1986
+ className
1987
+ ),
1988
+ ...props
1989
+ }
1990
+ ) }));
1991
+ DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
1992
+ var DropdownMenuItem = (0, import_react7.forwardRef)(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
1993
+ DropdownMenuPrimitive.Item,
1994
+ {
1995
+ ref,
1996
+ className: cn(
1997
+ "relative flex cursor-pointer select-none items-center outline-none transition-colors data-[disabled]:pointer-events-none",
1998
+ "px-8 py-3 lg:py-4.5 text-sm gap-6",
1999
+ "first:border-0 border-t border-button-secondary-border-default hover:border-button-social-border-hover",
2000
+ "text-button-secondary-foreground-default bg-button-secondary-background-default",
2001
+ "hover:text-button-secondary-foreground-hover hover:bg-button-secondary-background-hover",
2002
+ "data-[disabled]:text-button-secondary-foreground-disabled data-[disabled]:bg-button-secondary-background-disabled",
2003
+ inset && "pl-8",
2004
+ className
2005
+ ),
2006
+ ...props
2007
+ }
2008
+ ));
2009
+ DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
2010
+ var DropdownMenuLabel = (0, import_react7.forwardRef)(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
2011
+ DropdownMenuPrimitive.Label,
2012
+ {
2013
+ ref,
2014
+ className: cn(
2015
+ "px-2 py-1.5 text-sm font-semibold",
2016
+ inset && "pl-8",
2017
+ className
2018
+ ),
2019
+ ...props
2020
+ }
2021
+ ));
2022
+ DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
2023
+
2024
+ // src/theme/default/components/ui/user-avater.tsx
2025
+ var import_react8 = require("react");
2026
+
2027
+ // src/theme/default/assets/icons/user.svg
2028
+ var React29 = __toESM(require("react"));
2029
+ var import_jsx_runtime54 = require("react/jsx-runtime");
2030
+ var SvgUser = (props) => {
2031
+ var _a, _b;
2032
+ return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2M8 7a4 4 0 1 0 8 0 4 4 0 0 0-8 0" }) });
2033
+ };
2034
+ var user_default = SvgUser;
2035
+
2036
+ // src/theme/default/components/ui/user-avater.tsx
2037
+ var import_jsx_runtime55 = require("react/jsx-runtime");
2038
+ var UserAvatar = (0, import_react8.forwardRef)(
2039
+ ({ initials, ...rest }, ref) => {
2040
+ return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
2041
+ "button",
2042
+ {
2043
+ ref,
2044
+ className: "relative flex size-10 items-center justify-center overflow-hidden rounded-[999px] bg-button-primary-background-default hover:bg-button-primary-background-hover",
2045
+ ...rest,
2046
+ children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "relative flex size-full items-center justify-center", children: initials.avatar ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
2047
+ "img",
2048
+ {
2049
+ src: initials.avatar,
2050
+ alt: initials.primary,
2051
+ className: "w-full object-contain"
2052
+ }
2053
+ ) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
2054
+ user_default,
2055
+ {
2056
+ size: 24,
2057
+ className: "text-button-primary-foreground-default"
2058
+ }
2059
+ ) })
2060
+ }
2061
+ );
2062
+ }
2063
+ );
2064
+ UserAvatar.displayName = "UserAvatar";
2065
+
2066
+ // src/theme/default/components/ui/user-menu.tsx
2067
+ var import_jsx_runtime56 = require("react/jsx-runtime");
2068
+ var UserMenu = ({ session }) => {
2069
+ const { config } = (0, import_elements_react14.useOryFlow)();
2070
+ const initials = getUserInitials(session);
2071
+ const [logoutFlow, setLogoutFlow] = (0, import_react9.useState)();
2072
+ const fetchLogoutFlow = (0, import_react9.useCallback)(async () => {
2073
+ const flow = await frontendClient(config.sdk.url).createBrowserLogoutFlow();
2074
+ setLogoutFlow(flow);
2075
+ }, [config.sdk.url]);
2076
+ (0, import_react9.useEffect)(() => {
2077
+ void fetchLogoutFlow();
2078
+ }, [fetchLogoutFlow]);
2079
+ return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(DropdownMenu, { children: [
2080
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(UserAvatar, { initials }) }),
2081
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(DropdownMenuContent, { children: [
2082
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_dropdown_menu.DropdownMenuLabel, { className: "flex gap-3 px-5 py-4.5", children: [
2083
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(UserAvatar, { disabled: true, initials }),
2084
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex flex-col justify-center text-sm leading-tight", children: [
2085
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "text-interface-foreground-default-primary leading-tight font-medium", children: initials.primary }),
2086
+ initials.secondary && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "text-interface-foreground-default-tertiary leading-tight", children: initials.secondary })
2087
+ ] })
2088
+ ] }),
2089
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("a", { href: "/settings", children: [
2090
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(settings_default, { size: 16 }),
2091
+ " User settings"
2092
+ ] }) }),
2093
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DropdownMenuItem, { asChild: true, disabled: !(logoutFlow == null ? void 0 : logoutFlow.logout_url), children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("a", { href: logoutFlow == null ? void 0 : logoutFlow.logout_url, children: [
2094
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(logout_default, { size: 16 }),
2095
+ " Logout"
2096
+ ] }) })
2097
+ ] })
2098
+ ] });
2099
+ };
2100
+
2101
+ // src/theme/default/components/generic/page-header.tsx
2102
+ var import_client2 = require("@ory/elements-react/client");
2103
+ var import_jsx_runtime57 = require("react/jsx-runtime");
2104
+ var DefaultPageHeader = (_props) => {
2105
+ const { Card } = (0, import_elements_react15.useComponents)();
2106
+ const { session } = (0, import_client2.useSession)();
2107
+ return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "mt-16 flex max-w-screen-sm w-full md:max-w-[712px] lg:max-w-[802px] xl:max-w-[896px] flex-col gap-3 px-4", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex flex-col gap-12", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex max-h-10 flex-1 justify-between gap-2", children: [
2108
+ /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "relative h-10 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Card.Logo, {}) }),
2109
+ /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(UserMenu, { session })
2110
+ ] }) }) });
2111
+ };
2112
+
2113
+ // src/theme/default/components/settings/settings-oidc.tsx
2114
+ var import_react10 = require("react");
2115
+ var import_react_hook_form8 = require("react-hook-form");
2116
+ var import_usehooks_ts2 = require("usehooks-ts");
2117
+
2118
+ // src/theme/default/assets/icons/trash.svg
2119
+ var React30 = __toESM(require("react"));
2120
+ var import_jsx_runtime58 = require("react/jsx-runtime");
2121
+ var SvgTrash = (props) => {
2122
+ var _a, _b;
2123
+ return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" }) });
2124
+ };
2125
+ var trash_default = SvgTrash;
2126
+
2127
+ // src/theme/default/components/settings/settings-oidc.tsx
2128
+ var import_jsx_runtime59 = require("react/jsx-runtime");
2129
+ function DefaultSettingsOidc({
2130
+ linkButtons,
2131
+ unlinkButtons
2132
+ }) {
2133
+ const hasLinkButtons = linkButtons.length > 0;
2134
+ const hasUnlinkButtons = unlinkButtons.length > 0;
2135
+ return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex flex-col gap-8", children: [
2136
+ hasLinkButtons && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "grid items-start gap-3 grid-cols-1 sm:grid-cols-2 md:grid-cols-3", children: linkButtons.map((button) => {
2137
+ const attrs = button.attributes;
2138
+ return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
2139
+ DefaultButtonSocial,
2140
+ {
2141
+ showLabel: true,
2142
+ node: button,
2143
+ attributes: attrs,
2144
+ onClick: button.onClick
2145
+ },
2146
+ attrs.value
2147
+ );
2148
+ }) }),
2149
+ hasUnlinkButtons && hasLinkButtons ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DefaultHorizontalDivider, {}) : null,
2150
+ unlinkButtons.map((button) => {
2151
+ if (button.attributes.node_type !== "input") {
2152
+ return null;
2153
+ }
2154
+ return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(UnlinkRow, { button }, button.attributes.value);
2155
+ })
2156
+ ] });
2157
+ }
2158
+ function UnlinkRow({ button }) {
2159
+ var _a, _b;
2160
+ const [clicked, setClicked] = (0, import_usehooks_ts2.useDebounceValue)(false, 100);
2161
+ const {
2162
+ formState: { isSubmitting }
2163
+ } = (0, import_react_hook_form8.useFormContext)();
2164
+ const attrs = button.attributes;
2165
+ const provider = (_b = extractProvider((_a = button.meta.label) == null ? void 0 : _a.context)) != null ? _b : "";
2166
+ const Logo = provider_logos_default[attrs.value.split("-")[0]];
2167
+ const localOnClick = () => {
2168
+ button.onClick();
2169
+ setClicked(true);
2170
+ };
2171
+ (0, import_react10.useEffect)(() => {
2172
+ if (!isSubmitting) {
2173
+ setClicked(false);
2174
+ }
2175
+ }, [isSubmitting, setClicked]);
2176
+ return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex justify-between", children: [
2177
+ /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center gap-6", children: [
2178
+ Logo ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Logo, { size: 32 }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(provider_logos_default.generic, { size: 32 }),
2179
+ /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: provider })
2180
+ ] }),
2181
+ /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
2182
+ "button",
2183
+ {
2184
+ ...attrs,
2185
+ type: "submit",
2186
+ onClick: localOnClick,
2187
+ disabled: isSubmitting,
2188
+ className: "relative",
2189
+ title: `Unlink ${provider}`,
2190
+ children: clicked ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Spinner, { className: "relative" }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
2191
+ trash_default,
2192
+ {
2193
+ className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
2194
+ size: 24
2195
+ }
2196
+ )
2197
+ }
2198
+ )
2199
+ ] }, attrs.value);
2200
+ }
2201
+
2202
+ // src/theme/default/components/settings/settings-passkey.tsx
2203
+ var import_elements_react16 = require("@ory/elements-react");
2204
+ var import_react_hook_form9 = require("react-hook-form");
2205
+ var import_jsx_runtime60 = require("react/jsx-runtime");
2206
+ function DefaultSettingsPasskey({
2207
+ triggerButton,
2208
+ removeButtons
2209
+ }) {
2210
+ const {
2211
+ formState: { isSubmitting }
2212
+ } = (0, import_react_hook_form9.useFormContext)();
2213
+ const { Node } = (0, import_elements_react16.useComponents)();
2214
+ const hasRemoveButtons = removeButtons.length > 0;
2215
+ return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex flex-col gap-8", children: [
2216
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex max-w-[60%] items-end gap-3", children: triggerButton && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
2217
+ Node.Button,
2218
+ {
2219
+ node: triggerButton,
2220
+ attributes: triggerButton.attributes,
2221
+ onClick: triggerButton.onClick
2222
+ }
2223
+ ) }),
2224
+ hasRemoveButtons ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex flex-col gap-8", children: [
2225
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DefaultHorizontalDivider, {}),
2226
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex flex-col gap-2", children: removeButtons.map((node, i) => {
2227
+ var _a, _b;
2228
+ const context = (_b = (_a = node.meta.label) == null ? void 0 : _a.context) != null ? _b : {};
2229
+ const addedAt = "added_at" in context ? context.added_at : null;
2230
+ const displayName = "display_name" in context ? context.display_name : null;
2231
+ const keyId = "value" in node.attributes ? node.attributes.value : null;
2232
+ return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
2233
+ "div",
2234
+ {
2235
+ className: "flex justify-between gap-6 md:items-center",
2236
+ children: [
2237
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex gap-2 items-center flex-1 truncate", children: [
2238
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
2239
+ passkey_default,
2240
+ {
2241
+ size: 32,
2242
+ className: "text-interface-foreground-default-primary"
2243
+ }
2244
+ ),
2245
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4 truncate", children: [
2246
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex-1 flex-col truncate", children: [
2247
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "text-sm font-medium text-interface-foreground-default-secondary truncate", children: displayName }),
2248
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "text-sm text-interface-foreground-default-tertiary hidden sm:block truncate", children: keyId })
2249
+ ] }),
2250
+ addedAt && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
2251
+ dateStyle: "long"
2252
+ }).format(new Date(addedAt)) })
2253
+ ] })
2254
+ ] }),
2255
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
2256
+ "button",
2257
+ {
2258
+ ...node.attributes,
2259
+ type: "submit",
2260
+ onClick: node.onClick,
2261
+ disabled: isSubmitting,
2262
+ className: "relative",
2263
+ children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Spinner, { className: "relative" }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
2264
+ trash_default,
2265
+ {
2266
+ className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
2267
+ size: 24
2268
+ }
2269
+ )
2270
+ }
2271
+ )
2272
+ ]
2273
+ },
2274
+ `passkey-remove-button-${i}`
2275
+ );
2276
+ }) })
2277
+ ] }) : null
2278
+ ] });
2279
+ }
2280
+
2281
+ // src/theme/default/assets/icons/download.svg
2282
+ var React31 = __toESM(require("react"));
2283
+ var import_jsx_runtime61 = require("react/jsx-runtime");
2284
+ var SvgDownload = (props) => {
2285
+ var _a, _b;
2286
+ return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 11l5 5m0 0 5-5m-5 5V4" }) });
2287
+ };
2288
+ var download_default = SvgDownload;
2289
+
2290
+ // src/theme/default/assets/icons/refresh.svg
2291
+ var React32 = __toESM(require("react"));
2292
+ var import_jsx_runtime62 = require("react/jsx-runtime");
2293
+ var SvgRefresh = (props) => {
2294
+ var _a, _b;
2295
+ return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" }) });
2296
+ };
2297
+ var refresh_default = SvgRefresh;
2298
+
2299
+ // src/theme/default/components/settings/settings-recovery-codes.tsx
2300
+ var import_react_hook_form10 = require("react-hook-form");
2301
+ var import_jsx_runtime63 = require("react/jsx-runtime");
2302
+ function DefaultSettingsRecoveryCodes({
2303
+ codes,
2304
+ regnerateButton,
2305
+ revealButton,
2306
+ onRegenerate,
2307
+ onReveal
2308
+ }) {
2309
+ const {
2310
+ formState: { isSubmitting }
2311
+ } = (0, import_react_hook_form10.useFormContext)();
2312
+ const onDownload = () => {
2313
+ const element = document.createElement("a");
2314
+ const file = new Blob([codes.join("\n")], {
2315
+ type: "text/plain"
2316
+ });
2317
+ element.href = URL.createObjectURL(file);
2318
+ element.download = "recovery-codes.txt";
2319
+ document.body.appendChild(element);
2320
+ element.click();
2321
+ };
2322
+ const hasCodes = codes.length >= 1;
2323
+ return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex flex-col gap-8", children: [
2324
+ codes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DefaultHorizontalDivider, {}),
2325
+ /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex gap-4 justify-between", children: [
2326
+ /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "text-interface-foreground-default-tertiary", children: revealButton && "Reveal recovery codes" }),
2327
+ /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex gap-2", children: [
2328
+ regnerateButton && codes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
2329
+ "button",
2330
+ {
2331
+ ...regnerateButton.attributes,
2332
+ type: "submit",
2333
+ className: "ml-auto",
2334
+ onClick: onRegenerate,
2335
+ disabled: isSubmitting,
2336
+ "data-loading": isSubmitting,
2337
+ children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
2338
+ refresh_default,
2339
+ {
2340
+ size: 24,
2341
+ className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover"
2342
+ }
2343
+ )
2344
+ }
2345
+ ),
2346
+ revealButton && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_jsx_runtime63.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
2347
+ "button",
2348
+ {
2349
+ ...revealButton.attributes,
2350
+ type: "submit",
2351
+ className: "ml-auto",
2352
+ onClick: onReveal,
2353
+ title: "Reveal recovery codes",
2354
+ children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
2355
+ eye_default,
2356
+ {
2357
+ size: 24,
2358
+ className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover"
2359
+ }
2360
+ )
2361
+ }
2362
+ ) }),
2363
+ hasCodes && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
2364
+ "button",
2365
+ {
2366
+ onClick: onDownload,
2367
+ type: "button",
2368
+ className: "ml-auto",
2369
+ "data-testid": "ory/screen/settings/group/recovery_code/download",
2370
+ title: "Download recovery codes",
2371
+ children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
2372
+ download_default,
2373
+ {
2374
+ size: 24,
2375
+ className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover"
2376
+ }
2377
+ )
2378
+ }
2379
+ )
2380
+ ] })
2381
+ ] }),
2382
+ hasCodes ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "rounded-general p-6 bg-interface-background-default-secondary border-interface-border-default-primary", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
2383
+ "div",
2384
+ {
2385
+ className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 flex-wrap gap-4 text-sm text-interface-foreground-default-primary",
2386
+ "data-testid": "ory/screen/settings/group/recovery_code/codes",
2387
+ children: codes.map((code) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { children: code }, code))
2388
+ }
2389
+ ) }) : null
2390
+ ] });
2391
+ }
2392
+
2393
+ // src/theme/default/components/settings/settings-totp.tsx
2394
+ var import_elements_react17 = require("@ory/elements-react");
2395
+
2396
+ // src/theme/default/assets/icons/qrcode.svg
2397
+ var React33 = __toESM(require("react"));
2398
+ var import_jsx_runtime64 = require("react/jsx-runtime");
2399
+ var SvgQrcode = (props) => {
2400
+ var _a, _b;
2401
+ return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M9.333 22.667v.013m0-13.346v.013m13.333-.013v.013m0 9.32h-4v4m8-4v.013m-8 7.987h4m0-4h4v4m-21.333-20a1.333 1.333 0 0 1 1.333-1.333H12a1.333 1.333 0 0 1 1.333 1.333V12A1.334 1.334 0 0 1 12 13.334H6.666A1.334 1.334 0 0 1 5.333 12zm13.333 0A1.333 1.333 0 0 1 20 5.334h5.333a1.333 1.333 0 0 1 1.333 1.333V12a1.333 1.333 0 0 1-1.333 1.334H20A1.333 1.333 0 0 1 18.666 12zM5.333 20a1.333 1.333 0 0 1 1.333-1.333H12A1.333 1.333 0 0 1 13.333 20v5.334A1.333 1.333 0 0 1 12 26.667H6.666a1.333 1.333 0 0 1-1.333-1.334z" }) });
2402
+ };
2403
+ var qrcode_default = SvgQrcode;
2404
+
2405
+ // src/theme/default/components/settings/settings-totp.tsx
2406
+ var import_react_hook_form11 = require("react-hook-form");
2407
+ var import_jsx_runtime65 = require("react/jsx-runtime");
2408
+ function DefaultSettingsTotp({
2409
+ totpImage,
2410
+ totpInput,
2411
+ totpSecret,
2412
+ totpUnlink,
2413
+ onUnlink
2414
+ }) {
2415
+ const { Node, Card } = (0, import_elements_react17.useComponents)();
2416
+ const {
2417
+ formState: { isSubmitting }
2418
+ } = (0, import_react_hook_form11.useFormContext)();
2419
+ if (totpUnlink) {
2420
+ const {
2421
+ type,
2422
+ autocomplete: _ignoredAutocomplete,
2423
+ label: _ignoredLabel,
2424
+ node_type: _ignoredNodeType,
2425
+ ...buttonAttrs
2426
+ } = totpUnlink.attributes;
2427
+ return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
2428
+ /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "col-span-full", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Card.Divider, {}) }),
2429
+ /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "col-span-full flex items-center gap-6", children: [
2430
+ /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "aspect-square size-8 ", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(qrcode_default, { size: 32 }) }),
2431
+ /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "mr-auto flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: "text-sm font-medium text-interface-foreground-default-primary", children: "Authenticator app" }) }),
2432
+ /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
2433
+ "button",
2434
+ {
2435
+ type: type === "button" ? "button" : "submit",
2436
+ ...buttonAttrs,
2437
+ onClick: onUnlink,
2438
+ disabled: isSubmitting,
2439
+ children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Spinner, { className: "relative" }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
2440
+ trash_default,
2441
+ {
2442
+ className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
2443
+ size: 24
2444
+ }
2445
+ )
2446
+ }
2447
+ )
2448
+ ] })
2449
+ ] });
2450
+ }
2451
+ if (totpImage && totpSecret && totpInput) {
2452
+ return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
2453
+ /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "col-span-full", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DefaultHorizontalDivider, {}) }),
2454
+ /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex justify-center rounded-cards bg-interface-background-default-secondary p-8", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "aspect-square h-44 rounded bg-[white]", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "-m-3 antialiased mix-blend-multiply", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
2455
+ Node.Image,
2456
+ {
2457
+ node: totpImage,
2458
+ attributes: {
2459
+ ...totpImage.attributes
2460
+ }
2461
+ }
2462
+ ) }) }) }),
2463
+ /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-col gap-6", children: [
2464
+ /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
2465
+ Node.Label,
2466
+ {
2467
+ node: totpSecret,
2468
+ attributes: totpSecret.attributes,
2469
+ children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
2470
+ Node.Input,
2471
+ {
2472
+ node: totpSecret,
2473
+ attributes: {
2474
+ disabled: true,
2475
+ name: "totp_secret_key",
2476
+ node_type: "input",
2477
+ type: "text",
2478
+ value: totpSecret.attributes.text.text
2479
+ }
2480
+ }
2481
+ )
2482
+ }
2483
+ ),
2484
+ /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
2485
+ Node.Label,
2486
+ {
2487
+ attributes: totpInput.attributes,
2488
+ node: totpInput,
2489
+ children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
2490
+ Node.CodeInput,
2491
+ {
2492
+ node: totpInput,
2493
+ attributes: totpInput.attributes
2494
+ }
2495
+ )
2496
+ }
2497
+ )
2498
+ ] })
2499
+ ] });
2500
+ }
2501
+ }
2502
+
2503
+ // src/theme/default/components/settings/settings-webauthn.tsx
2504
+ var import_elements_react18 = require("@ory/elements-react");
2505
+
2506
+ // src/theme/default/assets/icons/key.svg
2507
+ var React34 = __toESM(require("react"));
2508
+ var import_jsx_runtime66 = require("react/jsx-runtime");
2509
+ var SvgKey = (props) => {
2510
+ var _a, _b;
2511
+ return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 32 32", width: (props == null ? void 0 : props.width) ? props.width : (_a = props == null ? void 0 : props.size) != null ? _a : 20, height: (props == null ? void 0 : props.height) ? props.height : (_b = props == null ? void 0 : props.size) != null ? _b : 20, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M20 12h.013m2.06-6.876 4.803 4.803a3.836 3.836 0 0 1 0 5.425l-3.524 3.524a3.835 3.835 0 0 1-5.425 0l-.402-.401-8.744 8.744a2.67 2.67 0 0 1-1.652.77L6.896 28H5.333a1.334 1.334 0 0 1-1.324-1.177L4 26.667v-1.563c0-.626.22-1.232.623-1.712l.158-.173.552-.552H8V20h2.667v-2.667l2.858-2.858-.401-.402a3.835 3.835 0 0 1 0-5.425l3.524-3.524a3.835 3.835 0 0 1 5.425 0" }) });
2512
+ };
2513
+ var key_default = SvgKey;
2514
+
2515
+ // src/theme/default/components/settings/settings-webauthn.tsx
2516
+ var import_react_hook_form12 = require("react-hook-form");
2517
+ var import_jsx_runtime67 = require("react/jsx-runtime");
2518
+ function DefaultSettingsWebauthn({
2519
+ nameInput,
2520
+ triggerButton,
2521
+ removeButtons
2522
+ }) {
2523
+ const {
2524
+ formState: { isSubmitting }
2525
+ } = (0, import_react_hook_form12.useFormContext)();
2526
+ const { Node, Card } = (0, import_elements_react18.useComponents)();
2527
+ const hasRemoveButtons = removeButtons.length > 0;
2528
+ return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex flex-col gap-8", children: [
2529
+ /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex md:max-w-96 sm:items-end gap-3 flex-col sm:flex-row", children: [
2530
+ /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
2531
+ Node.Label,
2532
+ {
2533
+ node: nameInput,
2534
+ attributes: nameInput.attributes,
2535
+ children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
2536
+ Node.Input,
2537
+ {
2538
+ node: nameInput,
2539
+ attributes: nameInput.attributes
2540
+ }
2541
+ )
2542
+ }
2543
+ ) }),
2544
+ triggerButton ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
2545
+ Node.Button,
2546
+ {
2547
+ node: triggerButton,
2548
+ attributes: triggerButton.attributes,
2549
+ onClick: triggerButton.onClick
2550
+ }
2551
+ ) : null
2552
+ ] }),
2553
+ hasRemoveButtons ? /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex flex-col gap-8", children: [
2554
+ /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Card.Divider, {}),
2555
+ /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex flex-col gap-4", children: removeButtons.map((node, i) => {
2556
+ var _a, _b;
2557
+ const context = (_b = (_a = node.meta.label) == null ? void 0 : _a.context) != null ? _b : {};
2558
+ const addedAt = "added_at" in context ? context.added_at : null;
2559
+ const displayName = "display_name" in context ? context.display_name : null;
2560
+ const keyId = "value" in node.attributes ? node.attributes.value : null;
2561
+ return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
2562
+ "div",
2563
+ {
2564
+ className: "flex justify-between gap-6 md:items-center",
2565
+ children: [
2566
+ /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex gap-2 items-center flex-1 truncate", children: [
2567
+ /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
2568
+ key_default,
2569
+ {
2570
+ size: 32,
2571
+ className: "text-interface-foreground-default-primary"
2572
+ }
2573
+ ),
2574
+ /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4 truncate", children: [
2575
+ /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-1 flex-col truncate", children: [
2576
+ /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "text-sm font-medium text-interface-foreground-default-secondary truncate", children: displayName }),
2577
+ /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-sm text-interface-foreground-default-tertiary hidden sm:block truncate", children: keyId })
2578
+ ] }),
2579
+ addedAt && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
2580
+ dateStyle: "long"
2581
+ }).format(new Date(addedAt)) })
2582
+ ] })
2583
+ ] }),
2584
+ /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
2585
+ "button",
2586
+ {
2587
+ ...node.attributes,
2588
+ type: "submit",
2589
+ onClick: node.onClick,
2590
+ disabled: isSubmitting,
2591
+ className: "relative",
2592
+ children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Spinner, { className: "relative" }) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
2593
+ trash_default,
2594
+ {
2595
+ className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
2596
+ size: 24
2597
+ }
2598
+ )
2599
+ }
2600
+ )
2601
+ ]
2602
+ },
2603
+ `webauthn-remove-button-${i}`
2604
+ );
2605
+ }) })
2606
+ ] }) : null
2607
+ ] });
2608
+ }
2609
+
2610
+ // src/theme/default/components/card/auth-method-list-container.tsx
2611
+ var import_jsx_runtime68 = require("react/jsx-runtime");
2612
+ function DefaultAuthMethodListContainer({
2613
+ children
2614
+ }) {
2615
+ return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "grid grid-cols-1 gap-2", children });
2616
+ }
2617
+
2618
+ // src/theme/default/components/form/captcha.tsx
2619
+ var import_client_fetch14 = require("@ory/client-fetch");
2620
+ var import_react_turnstile = require("@marsidev/react-turnstile");
2621
+ var import_react11 = require("react");
2622
+ var import_react_hook_form13 = require("react-hook-form");
2623
+ var import_jsx_runtime69 = require("react/jsx-runtime");
2624
+ var DefaultCaptcha = ({ node }) => {
2625
+ const { setValue } = (0, import_react_hook_form13.useFormContext)();
2626
+ const ref = (0, import_react11.useRef)();
2627
+ const nodes = [];
2628
+ if ((0, import_client_fetch14.isUiNodeInputAttributes)(node.attributes)) {
2629
+ if (node.attributes.name === "transient_payload.captcha_turnstile_response") {
2630
+ nodes.push(
2631
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(DefaultInput, { node, attributes: node.attributes }, 1)
2632
+ );
2633
+ }
2634
+ }
2635
+ if ((0, import_client_fetch14.isUiNodeInputAttributes)(node.attributes) && node.attributes.name === "captcha_turnstile_options") {
2636
+ const options = JSON.parse(node.attributes.value);
2637
+ nodes.push(
2638
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
2639
+ import_react_turnstile.Turnstile,
2640
+ {
2641
+ ref,
2642
+ siteKey: options.sitekey,
2643
+ options: {
2644
+ action: options.action,
2645
+ size: "flexible",
2646
+ theme: options.theme,
2647
+ responseField: false,
2648
+ responseFieldName: options.response_field_name
2649
+ },
2650
+ onExpire: () => {
2651
+ var _a;
2652
+ return (_a = ref.current) == null ? void 0 : _a.reset();
2653
+ },
2654
+ onSuccess: (token) => {
2655
+ setValue(options.response_field_name, token);
2656
+ }
2657
+ },
2658
+ 2
2659
+ )
2660
+ );
2661
+ }
2662
+ return nodes;
2663
+ };
2664
+
2665
+ // src/theme/default/components/default-components.tsx
2666
+ function getOryComponents(overrides) {
2667
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja;
2668
+ return {
2669
+ Card: {
2670
+ Root: (_b = (_a = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _a.Root) != null ? _b : DefaultCard,
2671
+ Footer: (_d = (_c = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _c.Footer) != null ? _d : DefaultCardFooter,
2672
+ Header: (_f = (_e = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _e.Header) != null ? _f : DefaultCardHeader,
2673
+ Content: (_h = (_g = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _g.Content) != null ? _h : DefaultCardContent,
2674
+ Logo: (_j = (_i = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _i.Logo) != null ? _j : DefaultCardLogo,
2675
+ Divider: (_l = (_k = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _k.Divider) != null ? _l : DefaultHorizontalDivider,
2676
+ AuthMethodListContainer: (_n = (_m = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _m.AuthMethodListContainer) != null ? _n : DefaultAuthMethodListContainer,
2677
+ AuthMethodListItem: (_p = (_o = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _o.AuthMethodListItem) != null ? _p : DefaultAuthMethodListItem,
2678
+ SettingsSection: (_r = (_q = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _q.SettingsSection) != null ? _r : DefaultFormSection,
2679
+ SettingsSectionContent: (_t = (_s = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _s.SettingsSectionContent) != null ? _t : DefaultFormSectionContent,
2680
+ SettingsSectionFooter: (_v = (_u = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _u.SettingsSectionFooter) != null ? _v : DefaultFormSectionFooter
2681
+ },
2682
+ Node: {
2683
+ Button: (_x = (_w = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _w.Button) != null ? _x : DefaultButton,
2684
+ OidcButton: (_z = (_y = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _y.OidcButton) != null ? _z : DefaultButtonSocial,
2685
+ Input: (_B = (_A = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _A.Input) != null ? _B : DefaultInput,
2686
+ CodeInput: (_D = (_C = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _C.CodeInput) != null ? _D : DefaultPinCodeInput,
2687
+ Image: (_F = (_E = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _E.Image) != null ? _F : DefaultImage,
2688
+ Label: (_H = (_G = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _G.Label) != null ? _H : DefaultLabel,
2689
+ Checkbox: (_J = (_I = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _I.Checkbox) != null ? _J : DefaultCheckbox,
2690
+ Text: (_L = (_K = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _K.Text) != null ? _L : DefaultText,
2691
+ Anchor: (_N = (_M = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _M.Anchor) != null ? _N : DefaultLinkButton,
2692
+ Captcha: (_P = (_O = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _O.Captcha) != null ? _P : DefaultCaptcha
2693
+ },
2694
+ Form: {
2695
+ Root: (_R = (_Q = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _Q.Root) != null ? _R : DefaultFormContainer,
2696
+ Group: (_T = (_S = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _S.Group) != null ? _T : DefaultGroupContainer,
2697
+ OidcRoot: (_V = (_U = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _U.OidcRoot) != null ? _V : DefaultSocialButtonContainer,
2698
+ RecoveryCodesSettings: (_X = (_W = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _W.RecoveryCodesSettings) != null ? _X : DefaultSettingsRecoveryCodes,
2699
+ TotpSettings: (_Z = (_Y = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _Y.TotpSettings) != null ? _Z : DefaultSettingsTotp,
2700
+ OidcSettings: (_$ = (__ = overrides == null ? void 0 : overrides.Form) == null ? void 0 : __.OidcSettings) != null ? _$ : DefaultSettingsOidc,
2701
+ WebauthnSettings: (_ba = (_aa = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _aa.WebauthnSettings) != null ? _ba : DefaultSettingsWebauthn,
2702
+ PasskeySettings: (_da = (_ca = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _ca.PasskeySettings) != null ? _da : DefaultSettingsPasskey
2703
+ },
2704
+ Message: {
2705
+ Root: (_fa = (_ea = overrides == null ? void 0 : overrides.Message) == null ? void 0 : _ea.Root) != null ? _fa : DefaultMessageContainer,
2706
+ Content: (_ha = (_ga = overrides == null ? void 0 : overrides.Message) == null ? void 0 : _ga.Content) != null ? _ha : DefaultMessage
2707
+ },
2708
+ Page: {
2709
+ Header: (_ja = (_ia = overrides == null ? void 0 : overrides.Page) == null ? void 0 : _ia.Header) != null ? _ja : DefaultPageHeader
2710
+ }
2711
+ };
2712
+ }
2713
+
2714
+ // src/theme/default/flows/error.tsx
2715
+ var import_jsx_runtime70 = require("react/jsx-runtime");
2716
+ function Error2({
2717
+ error,
2718
+ children
2719
+ }) {
2720
+ return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { "data-testid": "ory/screen/error/raw", children: JSON.stringify(error) || children });
2721
+ }
2722
+
2723
+ // src/theme/default/flows/login.tsx
2724
+ var import_client_fetch15 = require("@ory/client-fetch");
2725
+ var import_elements_react19 = require("@ory/elements-react");
2726
+ var import_jsx_runtime71 = require("react/jsx-runtime");
2727
+ function Login({
2728
+ flow,
2729
+ config,
2730
+ children,
2731
+ components: flowOverrideComponents
2732
+ }) {
2733
+ const components = getOryComponents(flowOverrideComponents);
2734
+ return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
2735
+ import_elements_react19.OryProvider,
2736
+ {
2737
+ config,
2738
+ flow,
2739
+ flowType: import_client_fetch15.FlowType.Login,
2740
+ components,
2741
+ children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_elements_react19.OryTwoStepCard, {})
2742
+ }
2743
+ );
2744
+ }
2745
+
2746
+ // src/theme/default/flows/recovery.tsx
2747
+ var import_client_fetch16 = require("@ory/client-fetch");
2748
+ var import_elements_react20 = require("@ory/elements-react");
2749
+ var import_jsx_runtime72 = require("react/jsx-runtime");
2750
+ function Recovery({
2751
+ flow,
2752
+ config,
2753
+ children,
2754
+ components: flowOverrideComponents
2755
+ }) {
2756
+ const components = getOryComponents(flowOverrideComponents);
2757
+ return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
2758
+ import_elements_react20.OryProvider,
2759
+ {
2760
+ config,
2761
+ flow,
2762
+ flowType: import_client_fetch16.FlowType.Recovery,
2763
+ components,
2764
+ children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_elements_react20.OryTwoStepCard, {})
2765
+ }
2766
+ );
2767
+ }
2768
+
2769
+ // src/theme/default/flows/registration.tsx
2770
+ var import_client_fetch17 = require("@ory/client-fetch");
2771
+ var import_elements_react21 = require("@ory/elements-react");
2772
+ var import_jsx_runtime73 = require("react/jsx-runtime");
2773
+ function Registration({
2774
+ flow,
2775
+ children,
2776
+ components: flowOverrideComponents,
2777
+ config
2778
+ }) {
2779
+ const components = getOryComponents(flowOverrideComponents);
2780
+ return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
2781
+ import_elements_react21.OryProvider,
2782
+ {
2783
+ config,
2784
+ flow,
2785
+ flowType: import_client_fetch17.FlowType.Registration,
2786
+ components,
2787
+ children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_elements_react21.OryTwoStepCard, {})
2788
+ }
2789
+ );
2790
+ }
2791
+
2792
+ // src/theme/default/flows/settings.tsx
2793
+ var import_client_fetch18 = require("@ory/client-fetch");
2794
+ var import_elements_react22 = require("@ory/elements-react");
2795
+ var import_jsx_runtime74 = require("react/jsx-runtime");
2796
+ function Settings({
2797
+ flow,
2798
+ config,
2799
+ children,
2800
+ components: flowOverrideComponents
2801
+ }) {
2802
+ const components = getOryComponents(flowOverrideComponents);
2803
+ return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
2804
+ import_elements_react22.OryProvider,
2805
+ {
2806
+ config,
2807
+ flow,
2808
+ flowType: import_client_fetch18.FlowType.Settings,
2809
+ components,
2810
+ children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
2811
+ /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_elements_react22.HeadlessPageHeader, {}),
2812
+ /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_elements_react22.OrySettingsCard, {})
2813
+ ] })
2814
+ }
2815
+ );
2816
+ }
2817
+
2818
+ // src/theme/default/flows/verification.tsx
2819
+ var import_client_fetch19 = require("@ory/client-fetch");
2820
+ var import_elements_react23 = require("@ory/elements-react");
2821
+ var import_jsx_runtime75 = require("react/jsx-runtime");
2822
+ function Verification({
2823
+ flow,
2824
+ config,
2825
+ children,
2826
+ components: flowOverrideComponents
2827
+ }) {
2828
+ const components = getOryComponents(flowOverrideComponents);
2829
+ return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
2830
+ import_elements_react23.OryProvider,
2831
+ {
2832
+ config,
2833
+ flow,
2834
+ flowType: import_client_fetch19.FlowType.Verification,
2835
+ components,
2836
+ children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_elements_react23.OryTwoStepCard, {})
2837
+ }
2838
+ );
2839
+ }
2840
+ // Annotate the CommonJS export names for ESM import in node:
2841
+ 0 && (module.exports = {
2842
+ DefaultButtonSocial,
2843
+ DefaultCard,
2844
+ DefaultCardContent,
2845
+ DefaultCardFooter,
2846
+ DefaultCardHeader,
2847
+ DefaultCardLayout,
2848
+ DefaultCardLogo,
2849
+ DefaultCurrentIdentifierButton,
2850
+ DefaultFormContainer,
2851
+ DefaultMessage,
2852
+ DefaultMessageContainer,
2853
+ Error,
2854
+ Login,
2855
+ Recovery,
2856
+ Registration,
2857
+ Settings,
2858
+ Verification,
2859
+ getOryComponents
2860
+ });
2861
+ //# sourceMappingURL=index.js.map