@ory/elements-react 1.0.0-next.25 → 1.0.0-next.27

package/dist/theme/default/index.mjs

@@ -27,7 +27,7 @@ var ory_badge_vertical_default = SvgOryBadgeVertical;
 // src/theme/default/components/card/badge.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function Badge() {
-  return /* @__PURE__ */ jsxs3("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-md sm:right-0 sm:top-8 sm:translate-x-full sm:rounded-r-lg border-ory-border-default border max-sm:py-[7px] sm:pl-[7px]", children: [
+  return /* @__PURE__ */ jsxs3("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: [
     /* @__PURE__ */ jsx3(ory_badge_horizontal_default, { width: 22, height: 8, className: "sm:hidden" }),
     /* @__PURE__ */ jsx3(ory_badge_vertical_default, { width: 8, height: 22, className: "max-sm:hidden" })
   ] });
@@ -51,6 +51,9 @@ function restartFlowUrl(flow, fallback) {
 function initFlowUrl(sdkUrl, flowType, flow) {
   const result = `${sdkUrl}/self-service/${flowType}/browser`;
   const qs = new URLSearchParams();
+  if (flow.oauth2_login_challenge) {
+    qs.set("login_challenge", flow.oauth2_login_challenge);
+  }
   if (flow.return_to) {
     qs.set("return_to", flow.return_to);
   } else if (typeof window !== "undefined") {
@@ -425,7 +428,7 @@ function DefaultCurrentIdentifierButton() {
   return /* @__PURE__ */ jsx6(
     "a",
     {
-      className: "group inline-flex max-w-full cursor-pointer items-center gap-1 self-start rounded-full 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",
+      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",
       ...attributes,
       href: initFlowUrl2,
       title: `Adjust ${nodeBackButton == null ? void 0 : nodeBackButton.attributes.value}`,
@@ -644,7 +647,7 @@ import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 var SvgLinkedin = (props) => {
   var _a, _b;
   return /* @__PURE__ */ jsxs13("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__ */ jsx19("rect", { x: 2, y: 2, fill: "#1275B1", rx: 14 }),
+    /* @__PURE__ */ jsx19("rect", { width: 28, height: 28, x: 2, y: 2, fill: "#1275B1", rx: 14 }),
     /* @__PURE__ */ jsx19("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" })
   ] });
 };
@@ -796,7 +799,7 @@ function DefaultButtonSocial({
     formState: { isSubmitting }
   } = useFormContext2();
   const oidcNodeCount = (_a = ui.nodes.filter((node2) => node2.group === "oidc").length) != null ? _a : 0;
-  const Logo = logos2[attributes.value];
+  const Logo = logos2[attributes.value.split("-")[0]];
   const showLabel = _showLabel != null ? _showLabel : oidcNodeCount % 3 !== 0 && oidcNodeCount % 4 !== 0;
   const provider = (_c = extractProvider((_b = node.meta.label) == null ? void 0 : _b.context)) != null ? _c : "";
   const localOnClick = () => {
@@ -811,7 +814,7 @@ function DefaultButtonSocial({
   return /* @__PURE__ */ jsxs19(
     "button",
     {
-      className: "gap-3 border border-button-social-border-default bg-button-social-background-default hover:bg-button-social-background-hover transition-colors rounded 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",
+      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",
       value: attributes.value,
       type: "submit",
       name: "provider",
@@ -821,7 +824,7 @@ function DefaultButtonSocial({
       "data-loading": clicked,
       disabled: isSubmitting,
       children: [
-        /* @__PURE__ */ jsx25("span", { className: "size-5 relative", children: !clicked ? Logo ? /* @__PURE__ */ jsx25(Logo, { size: 20 }) : /* @__PURE__ */ jsx25("span", { className: "flex aspect-square items-center justify-center rounded-full border text-xs", children: provider.slice(0, 2) }) : /* @__PURE__ */ jsx25(Spinner, { className: "size-5" }) }),
+        /* @__PURE__ */ jsx25("span", { className: "size-5 relative", children: !clicked ? Logo ? /* @__PURE__ */ jsx25(Logo, { size: 20 }) : /* @__PURE__ */ jsx25("span", { className: "flex aspect-square items-center justify-center rounded-[999px] border text-xs", children: provider.slice(0, 2) }) : /* @__PURE__ */ jsx25(Spinner, { className: "size-5" }) }),
         showLabel && node.meta.label ? /* @__PURE__ */ jsx25("span", { className: "grow text-left font-medium leading-none text-button-social-foreground-default", children: uiTextToFormattedMessage(node.meta.label, intl) }) : null
       ]
     }
@@ -993,7 +996,7 @@ import { useEffect as useEffect2, useState as useState2 } from "react";
 import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
 var buttonStyles = cva(
   [
-    "relative flex justify-center gap-3 overflow-hidden rounded leading-none ring-1 ring-inset font-medium",
+    "relative flex justify-center gap-3 overflow-hidden rounded-buttons leading-none ring-1 ring-inset font-medium",
     "disabled:cursor-not-allowed loading:cursor-wait loading:before:pointer-events-none",
     "transition-colors duration-100 ease-linear",
     "p-4 max-w-[488px]"
@@ -1124,6 +1127,14 @@ var uiTextToFormattedMessage4 = ({ id, context = {}, text }, intl) => {
             ).toFixed(0)
           };
         }
+      } else if (key === "property") {
+        return {
+          ...accumulator,
+          [key]: intl.formatMessage({
+            id: `property.${value}`,
+            defaultMessage: value
+          })
+        };
       }
       return {
         ...accumulator,
@@ -1550,7 +1561,7 @@ var DefaultFormSectionContent = ({
   description,
   children
 }) => {
-  return /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-8 rounded-t-xl border border-b-0 border-interface-border-default-primary bg-interface-background-default-primary px-6 py-8", children: [
+  return /* @__PURE__ */ jsxs25("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: [
     /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ jsx43("h3", { className: "font-medium text-interface-foreground-default-primary", children: title }),
       /* @__PURE__ */ jsx43("span", { className: "text-interface-foreground-default-secondary", children: description })
@@ -1566,7 +1577,7 @@ var DefaultFormSectionFooter = ({
     "div",
     {
       className: cn(
-        "flex min-h-[72px] items-center justify-between gap-2 rounded-b-xl border border-interface-border-default-primary bg-interface-background-default-secondary px-6 py-4 text-interface-foreground-default-tertiary"
+        "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"
       ),
       children: [
         /* @__PURE__ */ jsx43("span", { children: text }),
@@ -1754,7 +1765,7 @@ var UserAvatar = forwardRef4(
       "button",
       {
         ref,
-        className: "relative flex size-10 items-center justify-center overflow-hidden rounded-full bg-button-primary-background-default hover:bg-button-primary-background-hover",
+        className: "relative flex size-10 items-center justify-center overflow-hidden rounded-[999px] bg-button-primary-background-default hover:bg-button-primary-background-hover",
         ...rest,
         children: /* @__PURE__ */ jsx49("div", { className: "relative flex size-full items-center justify-center", children: initials.avatar ? /* @__PURE__ */ jsx49(
           "img",
@@ -1817,7 +1828,7 @@ import { jsx as jsx51, jsxs as jsxs29 } from "react/jsx-runtime";
 var DefaultPageHeader = (_props) => {
   const { Card } = useComponents3();
   const { session } = useSession();
-  return /* @__PURE__ */ jsx51("div", { className: "mt-16 flex w-full max-w-[896px] flex-col gap-3", children: /* @__PURE__ */ jsx51("div", { className: "flex flex-col gap-12", children: /* @__PURE__ */ jsxs29("div", { className: "flex max-h-10 flex-1 justify-between gap-2", children: [
+  return /* @__PURE__ */ jsx51("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__ */ jsx51("div", { className: "flex flex-col gap-12", children: /* @__PURE__ */ jsxs29("div", { className: "flex max-h-10 flex-1 justify-between gap-2", children: [
     /* @__PURE__ */ jsx51("div", { className: "relative h-10 flex-1", children: /* @__PURE__ */ jsx51(Card.Logo, {}) }),
     /* @__PURE__ */ jsx51(UserMenu, { session })
   ] }) }) });