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

package/dist/theme/default/index.js

@@ -601,12 +601,13 @@ var React7 = __toESM(require("react"));
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var SvgFacebook = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.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: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("g", { clipPath: "url(#facebook_svg__a)", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("clipPath", { id: "facebook_svg__a", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("rect", { fill: "#fff" }) }) })
+  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: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("circle", { cx: 16, cy: 16, r: 14, fill: "url(#facebook_svg__a)" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.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" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("linearGradient", { id: "facebook_svg__a", x1: 16, x2: 16, y1: 2, y2: 29.917, gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("stop", { stopColor: "#18ACFE" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("stop", { offset: 1, stopColor: "#0163E0" })
+    ] }) })
   ] });
 };
 var facebook_default = SvgFacebook;
@@ -1815,20 +1816,19 @@ function DefaultSettingsOidc({
 }) {
   const hasLinkButtons = linkButtons.length > 0;
   const hasUnlinkButtons = unlinkButtons.length > 0;
-  const { setValue } = (0, import_react_hook_form8.useFormContext)();
+  const {
+    formState: { isSubmitting }
+  } = (0, import_react_hook_form8.useFormContext)();
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex flex-col gap-8", children: [
-    hasLinkButtons && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex items-start gap-3 [&>button]:w-[79px]", children: linkButtons.map((button) => {
+    hasLinkButtons && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("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__ */ (0, import_jsx_runtime53.jsx)(
         DefaultButtonSocial,
         {
-          showLabel: false,
+          showLabel: true,
           node: button,
           attributes: attrs,
-          onClick: () => {
-            setValue("link", attrs.value);
-            setValue("method", "oidc");
-          }
+          onClick: button.onClick
         },
         attrs.value
       );
@@ -1849,11 +1849,11 @@ function DefaultSettingsOidc({
           {
             ...attrs,
             type: "submit",
-            onClick: () => {
-              setValue("unlink", attrs.value);
-              setValue("method", "oidc");
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+            onClick: button.onClick,
+            disabled: isSubmitting,
+            className: "relative",
+            title: `Unlink ${provider}`,
+            children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Spinner, { className: "relative" }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               trash_default,
               {
                 className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -1869,11 +1869,15 @@ function DefaultSettingsOidc({
 
 // src/theme/default/components/settings/settings-passkey.tsx
 var import_elements_react16 = require("@ory/elements-react");
+var import_react_hook_form9 = require("react-hook-form");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 function DefaultSettingsPasskey({
   triggerButton,
   removeButtons
 }) {
+  const {
+    formState: { isSubmitting }
+  } = (0, import_react_hook_form9.useFormContext)();
   const { Node } = (0, import_elements_react16.useComponents)();
   const hasRemoveButtons = removeButtons.length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex flex-col gap-8", children: [
@@ -1896,28 +1900,35 @@ function DefaultSettingsPasskey({
         return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
           "div",
           {
-            className: "flex justify-between gap-6",
+            className: "flex justify-between gap-6 md:items-center",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                passkey_default,
-                {
-                  size: 32,
-                  className: "text-interface-foreground-default-primary"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex-1 flex-col", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: displayName }),
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-sm text-interface-foreground-default-tertiary", children: keyId })
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex gap-2 items-center flex-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                  passkey_default,
+                  {
+                    size: 32,
+                    className: "text-interface-foreground-default-primary"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex-1 flex-col", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: displayName }),
+                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-sm text-interface-foreground-default-tertiary hidden sm:block", children: keyId })
+                  ] }),
+                  addedAt && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
+                    dateStyle: "long"
+                  }).format(new Date(addedAt)) })
+                ] })
               ] }),
-              addedAt && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "self-center text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
-                dateStyle: "long"
-              }).format(new Date(addedAt)) }),
               /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                 "button",
                 {
                   ...node.attributes,
                   type: "submit",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                  onClick: node.onClick,
+                  disabled: isSubmitting,
+                  className: "relative",
+                  children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Spinner, { className: "relative" }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                     trash_default,
                     {
                       className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -1928,7 +1939,7 @@ function DefaultSettingsPasskey({
               )
             ]
           },
-          `webauthn-remove-button-${i}`
+          `passkey-remove-button-${i}`
         );
       }) })
     ] }) : null
@@ -1966,12 +1977,18 @@ var SvgRefresh = (props) => {
 var refresh_default = SvgRefresh;
 
 // src/theme/default/components/settings/settings-recovery-codes.tsx
+var import_react_hook_form10 = require("react-hook-form");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 function DefaultSettingsRecoveryCodes({
   codes,
   regnerateButton,
-  revealButton
+  revealButton,
+  onRegenerate,
+  onReveal
 }) {
+  const {
+    formState: { isSubmitting }
+  } = (0, import_react_hook_form10.useFormContext)();
   const onDownload = () => {
     const element = document.createElement("a");
     const file = new Blob([codes.join("\n")], {
@@ -1984,49 +2001,76 @@ function DefaultSettingsRecoveryCodes({
   };
   const hasCodes = codes.length >= 1;
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex flex-col gap-8", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DefaultHorizontalDivider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex justify-end gap-4", children: [
-      regnerateButton && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-        "button",
-        {
-          ...regnerateButton.attributes,
-          type: "submit",
-          children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-            refresh_default,
-            {
-              size: 24,
-              className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover"
-            }
-          )
-        }
-      ),
-      revealButton && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-        "button",
-        {
-          ...revealButton.attributes,
-          type: "submit",
-          children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-            eye_default,
-            {
-              size: 24,
-              className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover"
-            }
-          )
-        }
-      ),
-      hasCodes && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("button", { onClick: onDownload, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-        download_default,
-        {
-          size: 24,
-          className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover"
-        }
-      ) })
+    codes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DefaultHorizontalDivider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex gap-4 justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-interface-foreground-default-tertiary", children: revealButton && "Reveal recovery codes" }),
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex gap-2", children: [
+        regnerateButton && codes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          "button",
+          {
+            ...regnerateButton.attributes,
+            type: "submit",
+            className: "ml-auto",
+            onClick: onRegenerate,
+            disabled: isSubmitting,
+            "data-loading": isSubmitting,
+            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              refresh_default,
+              {
+                size: 24,
+                className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover"
+              }
+            )
+          }
+        ),
+        revealButton && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx_runtime58.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          "button",
+          {
+            ...revealButton.attributes,
+            type: "submit",
+            className: "ml-auto",
+            onClick: onReveal,
+            title: "Reveal recovery codes",
+            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              eye_default,
+              {
+                size: 24,
+                className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover"
+              }
+            )
+          }
+        ) }),
+        hasCodes && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          "button",
+          {
+            onClick: onDownload,
+            type: "button",
+            className: "ml-auto",
+            "data-testid": "recovery-codes-download-button",
+            title: "Download recovery codes",
+            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              download_default,
+              {
+                size: 24,
+                className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover"
+              }
+            )
+          }
+        )
+      ] })
     ] }),
-    hasCodes ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "rounded-general p-6 bg-interface-background-default-secondary border-interface-border-default-primary", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "grid grid-cols-5 flex-wrap gap-4 text-sm text-interface-foreground-default-primary", children: codes.map((code) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { children: code }, code)) }) }) : null
+    hasCodes ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "rounded-general p-6 bg-interface-background-default-secondary border-interface-border-default-primary", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      "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__ */ (0, import_jsx_runtime58.jsx)("p", { children: code }, code))
+      }
+    ) }) : null
   ] });
 }
 
-// src/theme/default/components/settings/settings-top.tsx
+// src/theme/default/components/settings/settings-totp.tsx
 var import_elements_react17 = require("@ory/elements-react");
 
 // src/theme/default/assets/icons/qrcode.svg
@@ -2038,19 +2082,28 @@ var SvgQrcode = (props) => {
 };
 var qrcode_default = SvgQrcode;
 
-// src/theme/default/components/settings/settings-top.tsx
+// src/theme/default/components/settings/settings-totp.tsx
+var import_react_hook_form11 = require("react-hook-form");
 var import_jsx_runtime60 = require("react/jsx-runtime");
-function DefaultSettingsTotp(props) {
-  var _a;
+function DefaultSettingsTotp({
+  totpImage,
+  totpInput,
+  totpSecret,
+  totpUnlink,
+  onUnlink
+}) {
   const { Node, Card } = (0, import_elements_react17.useComponents)();
-  if ("totpUnlink" in props && props.totpUnlink) {
+  const {
+    formState: { isSubmitting }
+  } = (0, import_react_hook_form11.useFormContext)();
+  if (totpUnlink) {
     const {
       type,
       autocomplete: _ignoredAutocomplete,
       label: _ignoredLabel,
       node_type: _ignoredNodeType,
       ...buttonAttrs
-    } = (_a = props.totpUnlink) == null ? void 0 : _a.attributes;
+    } = totpUnlink.attributes;
     return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "col-span-full", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Card.Divider, {}) }),
       /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "col-span-full flex items-center gap-6", children: [
@@ -2061,7 +2114,9 @@ function DefaultSettingsTotp(props) {
           {
             type: type === "button" ? "button" : "submit",
             ...buttonAttrs,
-            children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+            onClick: onUnlink,
+            disabled: isSubmitting,
+            children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Spinner, { className: "relative" }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
               trash_default,
               {
                 className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",
@@ -2073,15 +2128,15 @@ function DefaultSettingsTotp(props) {
       ] })
     ] });
   }
-  if ("totpSecret" in props) {
+  if (totpImage && totpSecret && totpInput) {
     return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "grid grid-cols-1 gap-8 md:grid-cols-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "col-span-full", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DefaultHorizontalDivider, {}) }),
       /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex justify-center rounded-cards bg-interface-background-default-secondary p-8", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "aspect-square h-44 rounded bg-[white]", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "-m-3 antialiased mix-blend-multiply", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
         Node.Image,
         {
-          node: props.totpImage,
+          node: totpImage,
           attributes: {
-            ...props.totpImage.attributes
+            ...totpImage.attributes
           }
         }
       ) }) }) }),
@@ -2089,18 +2144,18 @@ function DefaultSettingsTotp(props) {
         /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           Node.Label,
           {
-            node: props.totpSecret,
-            attributes: props.totpSecret.attributes,
+            node: totpSecret,
+            attributes: totpSecret.attributes,
             children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
               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
                 }
               }
             )
@@ -2109,13 +2164,13 @@ function DefaultSettingsTotp(props) {
         /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           Node.Label,
           {
-            attributes: props.totpInput.attributes,
-            node: props.totpInput,
+            attributes: totpInput.attributes,
+            node: totpInput,
             children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-              Node.Input,
+              Node.CodeInput,
               {
-                node: props.totpInput,
-                attributes: props.totpInput.attributes
+                node: totpInput,
+                attributes: totpInput.attributes
               }
             )
           }
@@ -2138,16 +2193,20 @@ var SvgKey = (props) => {
 var key_default = SvgKey;
 
 // src/theme/default/components/settings/settings-webauthn.tsx
+var import_react_hook_form12 = require("react-hook-form");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 function DefaultSettingsWebauthn({
   nameInput,
   triggerButton,
   removeButtons
 }) {
+  const {
+    formState: { isSubmitting }
+  } = (0, import_react_hook_form12.useFormContext)();
   const { Node, Card } = (0, import_elements_react18.useComponents)();
   const hasRemoveButtons = removeButtons.length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex flex-col gap-8", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex max-w-[60%] items-end gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex md:max-w-96 sm:items-end gap-3 flex-col sm:flex-row", children: [
       /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         Node.Label,
         {
@@ -2173,37 +2232,44 @@ function DefaultSettingsWebauthn({
     ] }),
     hasRemoveButtons ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex flex-col gap-8", children: [
       /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Card.Divider, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "flex flex-col gap-2", children: removeButtons.map((node, i) => {
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("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__ */ (0, import_jsx_runtime62.jsxs)(
           "div",
           {
-            className: "flex justify-between gap-6",
+            className: "flex justify-between gap-6 md:items-center",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-                key_default,
-                {
-                  size: 32,
-                  className: "text-interface-foreground-default-primary"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-1 flex-col", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: diaplyName }),
-                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "text-sm text-interface-foreground-default-tertiary", children: keyId })
+              /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex gap-2 items-center flex-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                  key_default,
+                  {
+                    size: 32,
+                    className: "text-interface-foreground-default-primary"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-1 flex-col md:flex-row md:items-center flex md:justify-between gap-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-1 flex-col", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "text-sm font-medium text-interface-foreground-default-secondary", children: displayName }),
+                    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "text-sm text-interface-foreground-default-tertiary hidden sm:block", children: keyId })
+                  ] }),
+                  addedAt && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
+                    dateStyle: "long"
+                  }).format(new Date(addedAt)) })
+                ] })
               ] }),
-              addedAt && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "self-center text-sm text-interface-foreground-default-tertiary", children: new Intl.DateTimeFormat(void 0, {
-                dateStyle: "long"
-              }).format(new Date(addedAt)) }),
               /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
                 "button",
                 {
                   ...node.attributes,
                   type: "submit",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                  onClick: node.onClick,
+                  disabled: isSubmitting,
+                  className: "relative",
+                  children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Spinner, { className: "relative" }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
                     trash_default,
                     {
                       className: "text-button-link-default-secondary hover:text-button-link-default-secondary-hover",