@ory/elements-react 1.0.0-next.18 → 1.0.0-next.19

package/dist/theme/default/index.mjs

@@ -559,12 +559,13 @@ import * as React7 from "react";
 import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var SvgFacebook = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ jsxs9("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__ */ jsxs9("g", { clipPath: "url(#facebook_svg__a)", children: [
-      /* @__PURE__ */ jsx14("path", { fill: "#1877F2", d: "M24 12c0-6.627-5.373-12-12-12C5.372 0 0 5.374 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.357c0-3.008 1.791-4.669 4.532-4.669 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.469h-2.796v8.385c5.736-.9 10.124-5.864 10.124-11.854" }),
-      /* @__PURE__ */ jsx14("path", { fill: "#fff", d: "M16.67 15.469 17.204 12h-3.328V9.75c0-.95.465-1.875 1.955-1.875h1.513V4.922s-1.373-.234-2.686-.234c-2.74 0-4.532 1.661-4.532 4.669V12H7.078v3.469h3.047v8.385a12.1 12.1 0 0 0 3.75 0V15.47z" })
-    ] }),
-    /* @__PURE__ */ jsx14("defs", { children: /* @__PURE__ */ jsx14("clipPath", { id: "facebook_svg__a", children: /* @__PURE__ */ jsx14("rect", { fill: "#fff" }) }) })
+  return /* @__PURE__ */ jsxs9("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__ */ jsx14("circle", { cx: 16, cy: 16, r: 14, fill: "url(#facebook_svg__a)" }),
+    /* @__PURE__ */ jsx14("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" }),
+    /* @__PURE__ */ jsx14("defs", { children: /* @__PURE__ */ jsxs9("linearGradient", { id: "facebook_svg__a", x1: 16, x2: 16, y1: 2, y2: 29.917, gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ jsx14("stop", { stopColor: "#18ACFE" }),
+      /* @__PURE__ */ jsx14("stop", { offset: 1, stopColor: "#0163E0" })
+    ] }) })
   ] });
 };
 var facebook_default = SvgFacebook;
@@ -1795,20 +1796,19 @@ function DefaultSettingsOidc({
 }) {
   const hasLinkButtons = linkButtons.length > 0;
   const hasUnlinkButtons = unlinkButtons.length > 0;
-  const { setValue } = useFormContext7();
+  const {
+    formState: { isSubmitting }
+  } = useFormContext7();
   return /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-8", children: [
-    hasLinkButtons && /* @__PURE__ */ jsx53("div", { className: "flex items-start gap-3 [&>button]:w-[79px]", children: linkButtons.map((button) => {
+    hasLinkButtons && /* @__PURE__ */ jsx53("div", { className: "grid items-start gap-3 grid-cols-1 sm:grid-cols-2 md:grid-cols-3", children: linkButtons.map((button) => {
       const attrs = button.attributes;
       return /* @__PURE__ */ jsx53(
         DefaultButtonSocial,
         {
-          showLabel: false,
+          showLabel: true,
           node: button,
           attributes: attrs,
-          onClick: () => {
-            setValue("link", attrs.value);
-            setValue("method", "oidc");
-          }
+          onClick: button.onClick
         },
         attrs.value
       );
@@ -1829,11 +1829,11 @@ function DefaultSettingsOidc({
           {
             ...attrs,
             type: "submit",
-            onClick: () => {
-              setValue("unlink", attrs.value);
-              setValue("method", "oidc");
-            },
-            children: /* @__PURE__ */ jsx53(
+            onClick: button.onClick,
+            disabled: isSubmitting,
+            className: "relative",
+            title: `Unlink ${provider}`,
+            children: isSubmitting ? /* @__PURE__ */ jsx53(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx53(
               trash_default,
               {
                 className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -1849,11 +1849,15 @@ function DefaultSettingsOidc({
 
 // src/theme/default/components/settings/settings-passkey.tsx
 import { useComponents as useComponents4 } from "@ory/elements-react";
+import { useFormContext as useFormContext8 } from "react-hook-form";
 import { jsx as jsx54, jsxs as jsxs31 } from "react/jsx-runtime";
 function DefaultSettingsPasskey({
   triggerButton,
   removeButtons
 }) {
+  const {
+    formState: { isSubmitting }
+  } = useFormContext8();
   const { Node } = useComponents4();
   const hasRemoveButtons = removeButtons.length > 0;
   return /* @__PURE__ */ jsxs31("div", { className: "flex flex-col gap-8", children: [
@@ -1876,28 +1880,35 @@ function DefaultSettingsPasskey({
         return /* @__PURE__ */ jsxs31(
           "div",
           {
-            className: "flex justify-between gap-6",
+            className: "flex justify-between gap-6 md:items-center",
             children: [
-              /* @__PURE__ */ jsx54(
-                passkey_default,
-                {
-                  size: 32,
-                  className: "text-interface-foreground-default-primary"
-                }
-              ),
-              /* @__PURE__ */ jsxs31("div", { className: "flex-1 flex-col", children: [
-                /* @__PURE__ */ jsx54("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: displayName }),
-                /* @__PURE__ */ jsx54("span", { className: "text-sm text-interface-foreground-default-tertiary", children: keyId })
+              /* @__PURE__ */ jsxs31("div", { className: "flex gap-2 items-center flex-1", children: [
+                /* @__PURE__ */ jsx54(
+                  passkey_default,
+                  {
+                    size: 32,
+                    className: "text-interface-foreground-default-primary"
+                  }
+                ),
+                /* @__PURE__ */ jsxs31("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4", children: [
+                  /* @__PURE__ */ jsxs31("div", { className: "flex-1 flex-col", children: [
+                    /* @__PURE__ */ jsx54("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: displayName }),
+                    /* @__PURE__ */ jsx54("span", { className: "text-sm text-interface-foreground-default-tertiary hidden sm:block", children: keyId })
+                  ] }),
+                  addedAt && /* @__PURE__ */ jsx54("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
+                    dateStyle: "long"
+                  }).format(new Date(addedAt)) })
+                ] })
               ] }),
-              addedAt && /* @__PURE__ */ jsx54("p", { className: "self-center text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
-                dateStyle: "long"
-              }).format(new Date(addedAt)) }),
               /* @__PURE__ */ jsx54(
                 "button",
                 {
                   ...node.attributes,
                   type: "submit",
-                  children: /* @__PURE__ */ jsx54(
+                  onClick: node.onClick,
+                  disabled: isSubmitting,
+                  className: "relative",
+                  children: isSubmitting ? /* @__PURE__ */ jsx54(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx54(
                     trash_default,
                     {
                       className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -1908,7 +1919,7 @@ function DefaultSettingsPasskey({
               )
             ]
           },
-          `webauthn-remove-button-${i}`
+          `passkey-remove-button-${i}`
         );
       }) })
     ] }) : null
@@ -1946,12 +1957,18 @@ var SvgRefresh = (props) => {
 var refresh_default = SvgRefresh;
 
 // src/theme/default/components/settings/settings-recovery-codes.tsx
-import { jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";
+import { useFormContext as useFormContext9 } from "react-hook-form";
+import { Fragment as Fragment4, jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";
 function DefaultSettingsRecoveryCodes({
   codes,
   regnerateButton,
-  revealButton
+  revealButton,
+  onRegenerate,
+  onReveal
 }) {
+  const {
+    formState: { isSubmitting }
+  } = useFormContext9();
   const onDownload = () => {
     const element = document.createElement("a");
     const file = new Blob([codes.join("\n")], {
@@ -1964,49 +1981,76 @@ function DefaultSettingsRecoveryCodes({
   };
   const hasCodes = codes.length >= 1;
   return /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-8", children: [
-    /* @__PURE__ */ jsx58(DefaultHorizontalDivider, {}),
-    /* @__PURE__ */ jsxs33("div", { className: "flex justify-end gap-4", children: [
-      regnerateButton && /* @__PURE__ */ jsx58(
-        "button",
-        {
-          ...regnerateButton.attributes,
-          type: "submit",
-          children: /* @__PURE__ */ jsx58(
-            refresh_default,
-            {
-              size: 24,
-              className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover"
-            }
-          )
-        }
-      ),
-      revealButton && /* @__PURE__ */ jsx58(
-        "button",
-        {
-          ...revealButton.attributes,
-          type: "submit",
-          children: /* @__PURE__ */ jsx58(
-            eye_default,
-            {
-              size: 24,
-              className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover"
-            }
-          )
-        }
-      ),
-      hasCodes && /* @__PURE__ */ jsx58("button", { onClick: onDownload, type: "button", children: /* @__PURE__ */ jsx58(
-        download_default,
-        {
-          size: 24,
-          className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover"
-        }
-      ) })
+    codes.length > 0 && /* @__PURE__ */ jsx58(DefaultHorizontalDivider, {}),
+    /* @__PURE__ */ jsxs33("div", { className: "flex gap-4 justify-between", children: [
+      /* @__PURE__ */ jsx58("span", { className: "text-interface-foreground-default-tertiary", children: revealButton && "Reveal recovery codes" }),
+      /* @__PURE__ */ jsxs33("div", { className: "flex gap-2", children: [
+        regnerateButton && codes.length > 0 && /* @__PURE__ */ jsx58(
+          "button",
+          {
+            ...regnerateButton.attributes,
+            type: "submit",
+            className: "ml-auto",
+            onClick: onRegenerate,
+            disabled: isSubmitting,
+            "data-loading": isSubmitting,
+            children: /* @__PURE__ */ jsx58(
+              refresh_default,
+              {
+                size: 24,
+                className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover"
+              }
+            )
+          }
+        ),
+        revealButton && /* @__PURE__ */ jsx58(Fragment4, { children: /* @__PURE__ */ jsx58(
+          "button",
+          {
+            ...revealButton.attributes,
+            type: "submit",
+            className: "ml-auto",
+            onClick: onReveal,
+            title: "Reveal recovery codes",
+            children: /* @__PURE__ */ jsx58(
+              eye_default,
+              {
+                size: 24,
+                className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover"
+              }
+            )
+          }
+        ) }),
+        hasCodes && /* @__PURE__ */ jsx58(
+          "button",
+          {
+            onClick: onDownload,
+            type: "button",
+            className: "ml-auto",
+            "data-testid": "recovery-codes-download-button",
+            title: "Download recovery codes",
+            children: /* @__PURE__ */ jsx58(
+              download_default,
+              {
+                size: 24,
+                className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover"
+              }
+            )
+          }
+        )
+      ] })
     ] }),
-    hasCodes ? /* @__PURE__ */ jsx58("div", { className: "rounded-general p-6 bg-interface-background-default-secondary border-interface-border-default-primary", children: /* @__PURE__ */ jsx58("div", { className: "grid grid-cols-5 flex-wrap gap-4 text-sm text-interface-foreground-default-primary", children: codes.map((code) => /* @__PURE__ */ jsx58("p", { children: code }, code)) }) }) : null
+    hasCodes ? /* @__PURE__ */ jsx58("div", { className: "rounded-general p-6 bg-interface-background-default-secondary border-interface-border-default-primary", children: /* @__PURE__ */ jsx58(
+      "div",
+      {
+        className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 flex-wrap gap-4 text-sm text-interface-foreground-default-primary",
+        "data-testid": "recovery-codes-codes",
+        children: codes.map((code) => /* @__PURE__ */ jsx58("p", { children: code }, code))
+      }
+    ) }) : null
   ] });
 }
 
-// src/theme/default/components/settings/settings-top.tsx
+// src/theme/default/components/settings/settings-totp.tsx
 import { useComponents as useComponents5 } from "@ory/elements-react";
 
 // src/theme/default/assets/icons/qrcode.svg
@@ -2018,19 +2062,28 @@ var SvgQrcode = (props) => {
 };
 var qrcode_default = SvgQrcode;
 
-// src/theme/default/components/settings/settings-top.tsx
+// src/theme/default/components/settings/settings-totp.tsx
+import { useFormContext as useFormContext10 } from "react-hook-form";
 import { jsx as jsx60, jsxs as jsxs34 } from "react/jsx-runtime";
-function DefaultSettingsTotp(props) {
-  var _a;
+function DefaultSettingsTotp({
+  totpImage,
+  totpInput,
+  totpSecret,
+  totpUnlink,
+  onUnlink
+}) {
   const { Node, Card } = useComponents5();
-  if ("totpUnlink" in props && props.totpUnlink) {
+  const {
+    formState: { isSubmitting }
+  } = useFormContext10();
+  if (totpUnlink) {
     const {
       type,
       autocomplete: _ignoredAutocomplete,
       label: _ignoredLabel,
       node_type: _ignoredNodeType,
       ...buttonAttrs
-    } = (_a = props.totpUnlink) == null ? void 0 : _a.attributes;
+    } = totpUnlink.attributes;
     return /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
       /* @__PURE__ */ jsx60("div", { className: "col-span-full", children: /* @__PURE__ */ jsx60(Card.Divider, {}) }),
       /* @__PURE__ */ jsxs34("div", { className: "col-span-full flex items-center gap-6", children: [
@@ -2041,7 +2094,9 @@ function DefaultSettingsTotp(props) {
           {
             type: type === "button" ? "button" : "submit",
             ...buttonAttrs,
-            children: /* @__PURE__ */ jsx60(
+            onClick: onUnlink,
+            disabled: isSubmitting,
+            children: isSubmitting ? /* @__PURE__ */ jsx60(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx60(
               trash_default,
               {
                 className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -2053,15 +2108,15 @@ function DefaultSettingsTotp(props) {
       ] })
     ] });
   }
-  if ("totpSecret" in props) {
+  if (totpImage && totpSecret && totpInput) {
     return /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
       /* @__PURE__ */ jsx60("div", { className: "col-span-full", children: /* @__PURE__ */ jsx60(DefaultHorizontalDivider, {}) }),
       /* @__PURE__ */ jsx60("div", { className: "flex justify-center rounded-cards bg-interface-background-default-secondary p-8", children: /* @__PURE__ */ jsx60("div", { className: "aspect-square h-44 rounded bg-[white]", children: /* @__PURE__ */ jsx60("div", { className: "-m-3 antialiased mix-blend-multiply", children: /* @__PURE__ */ jsx60(
         Node.Image,
         {
-          node: props.totpImage,
+          node: totpImage,
           attributes: {
-            ...props.totpImage.attributes
+            ...totpImage.attributes
           }
         }
       ) }) }) }),
@@ -2069,18 +2124,18 @@ function DefaultSettingsTotp(props) {
         /* @__PURE__ */ jsx60(
           Node.Label,
           {
-            node: props.totpSecret,
-            attributes: props.totpSecret.attributes,
+            node: totpSecret,
+            attributes: totpSecret.attributes,
             children: /* @__PURE__ */ jsx60(
               Node.Input,
               {
-                node: props.totpSecret,
+                node: totpSecret,
                 attributes: {
                   disabled: true,
                   name: "totp_secret_key",
                   node_type: "input",
                   type: "text",
-                  value: props.totpSecret.attributes.text.text
+                  value: totpSecret.attributes.text.text
                 }
               }
             )
@@ -2089,13 +2144,13 @@ function DefaultSettingsTotp(props) {
         /* @__PURE__ */ jsx60(
           Node.Label,
           {
-            attributes: props.totpInput.attributes,
-            node: props.totpInput,
+            attributes: totpInput.attributes,
+            node: totpInput,
             children: /* @__PURE__ */ jsx60(
-              Node.Input,
+              Node.CodeInput,
               {
-                node: props.totpInput,
-                attributes: props.totpInput.attributes
+                node: totpInput,
+                attributes: totpInput.attributes
               }
             )
           }
@@ -2118,16 +2173,20 @@ var SvgKey = (props) => {
 var key_default = SvgKey;
 
 // src/theme/default/components/settings/settings-webauthn.tsx
+import { useFormContext as useFormContext11 } from "react-hook-form";
 import { jsx as jsx62, jsxs as jsxs35 } from "react/jsx-runtime";
 function DefaultSettingsWebauthn({
   nameInput,
   triggerButton,
   removeButtons
 }) {
+  const {
+    formState: { isSubmitting }
+  } = useFormContext11();
   const { Node, Card } = useComponents6();
   const hasRemoveButtons = removeButtons.length > 0;
   return /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-8", children: [
-    /* @__PURE__ */ jsxs35("div", { className: "flex max-w-[60%] items-end gap-3", children: [
+    /* @__PURE__ */ jsxs35("div", { className: "flex md:max-w-96 sm:items-end gap-3 flex-col sm:flex-row", children: [
       /* @__PURE__ */ jsx62("div", { className: "flex-1", children: /* @__PURE__ */ jsx62(
         Node.Label,
         {
@@ -2153,37 +2212,44 @@ function DefaultSettingsWebauthn({
     ] }),
     hasRemoveButtons ? /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-8", children: [
       /* @__PURE__ */ jsx62(Card.Divider, {}),
-      /* @__PURE__ */ jsx62("div", { className: "flex flex-col gap-2", children: removeButtons.map((node, i) => {
+      /* @__PURE__ */ jsx62("div", { className: "flex flex-col gap-4", children: removeButtons.map((node, i) => {
         var _a, _b;
         const context = (_b = (_a = node.meta.label) == null ? void 0 : _a.context) != null ? _b : {};
         const addedAt = "added_at" in context ? context.added_at : null;
-        const diaplyName = "display_name" in context ? context.display_name : null;
+        const displayName = "display_name" in context ? context.display_name : null;
         const keyId = "value" in node.attributes ? node.attributes.value : null;
         return /* @__PURE__ */ jsxs35(
           "div",
           {
-            className: "flex justify-between gap-6",
+            className: "flex justify-between gap-6 md:items-center",
             children: [
-              /* @__PURE__ */ jsx62(
-                key_default,
-                {
-                  size: 32,
-                  className: "text-interface-foreground-default-primary"
-                }
-              ),
-              /* @__PURE__ */ jsxs35("div", { className: "flex-1 flex-col", children: [
-                /* @__PURE__ */ jsx62("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: diaplyName }),
-                /* @__PURE__ */ jsx62("span", { className: "text-sm text-interface-foreground-default-tertiary", children: keyId })
+              /* @__PURE__ */ jsxs35("div", { className: "flex gap-2 items-center flex-1", children: [
+                /* @__PURE__ */ jsx62(
+                  key_default,
+                  {
+                    size: 32,
+                    className: "text-interface-foreground-default-primary"
+                  }
+                ),
+                /* @__PURE__ */ jsxs35("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4", children: [
+                  /* @__PURE__ */ jsxs35("div", { className: "flex-1 flex-col", children: [
+                    /* @__PURE__ */ jsx62("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: displayName }),
+                    /* @__PURE__ */ jsx62("span", { className: "text-sm text-interface-foreground-default-tertiary hidden sm:block", children: keyId })
+                  ] }),
+                  addedAt && /* @__PURE__ */ jsx62("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
+                    dateStyle: "long"
+                  }).format(new Date(addedAt)) })
+                ] })
               ] }),
-              addedAt && /* @__PURE__ */ jsx62("p", { className: "self-center text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
-                dateStyle: "long"
-              }).format(new Date(addedAt)) }),
               /* @__PURE__ */ jsx62(
                 "button",
                 {
                   ...node.attributes,
                   type: "submit",
-                  children: /* @__PURE__ */ jsx62(
+                  onClick: node.onClick,
+                  disabled: isSubmitting,
+                  className: "relative",
+                  children: isSubmitting ? /* @__PURE__ */ jsx62(Spinner, { className: "relative" }) : /* @__PURE__ */ jsx62(
                     trash_default,
                     {
                       className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -2342,7 +2408,7 @@ import {
   OryProvider as OryProvider4,
   OrySettingsCard
 } from "@ory/elements-react";
-import { Fragment as Fragment4, jsx as jsx67, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx67, jsxs as jsxs36 } from "react/jsx-runtime";
 function Settings({
   flow,
   config,
@@ -2357,7 +2423,7 @@ function Settings({
       flow,
       flowType: FlowType11.Settings,
       components,
-      children: children != null ? children : /* @__PURE__ */ jsxs36(Fragment4, { children: [
+      children: children != null ? children : /* @__PURE__ */ jsxs36(Fragment5, { children: [
         /* @__PURE__ */ jsx67(HeadlessPageHeader, {}),
         /* @__PURE__ */ jsx67(OrySettingsCard, {})
       ] })