@ory/elements-react 1.0.0-next.12 → 1.0.0-next.14

package/dist/theme/default/index.mjs

@@ -829,9 +829,10 @@ function DefaultImage({ attributes }) {
 }
 
 // src/theme/default/components/form/input.tsx
-import { getNodeLabel as getNodeLabel3 } from "@ory/client-fetch";
+import { FlowType as FlowType5, getNodeLabel as getNodeLabel3 } from "@ory/client-fetch";
 import {
-  uiTextToFormattedMessage as uiTextToFormattedMessage5
+  uiTextToFormattedMessage as uiTextToFormattedMessage5,
+  useOryFlow as useOryFlow6
 } from "@ory/elements-react";
 import { useFormContext as useFormContext2 } from "react-hook-form";
 import { useIntl as useIntl8 } from "react-intl";
@@ -845,6 +846,7 @@ var DefaultInput = ({
   const { register } = useFormContext2();
   const { value, autocomplete, name, maxlength, ...rest } = attributes;
   const intl = useIntl8();
+  const { flowType } = useOryFlow6();
   const formattedLabel = label ? intl.formatMessage(
     {
       id: "input.placeholder",
@@ -862,18 +864,23 @@ var DefaultInput = ({
       maxLength: maxlength,
       autoComplete: autocomplete,
       placeholder: formattedLabel,
-      className: "antialiased disabled:text-forms-fg-disabled disabled:bg-forms-bg-disabled bg-forms-bg-default rounded-border-radius-forms border px-3 py-2.5 md:px-4 md:py-4 border-forms-border-default leading-tight hover:border-forms-border-hover transition-colors text-sm",
+      className: cn(
+        "antialiased disabled:text-forms-fg-disabled disabled:bg-forms-bg-disabled bg-forms-bg-default rounded-border-radius-forms border border-forms-border-default leading-tight hover:border-forms-border-hover transition-colors text-sm",
+        "px-3 py-2.5",
+        // The settings flow input fields are supposed to be dense, so we don't need the extra padding we want on the user flows.
+        flowType === FlowType5.Settings ? "max-w-[488px]" : "md:px-4 md:py-4"
+      ),
       ...register(name, { value })
     }
   );
 };
 
 // src/theme/default/components/form/label.tsx
-import { FlowType as FlowType5, getNodeLabel as getNodeLabel4 } from "@ory/client-fetch";
+import { FlowType as FlowType6, getNodeLabel as getNodeLabel4 } from "@ory/client-fetch";
 import {
   messageTestId as messageTestId2,
   uiTextToFormattedMessage as uiTextToFormattedMessage6,
-  useOryFlow as useOryFlow6
+  useOryFlow as useOryFlow7
 } from "@ory/elements-react";
 import { useIntl as useIntl9 } from "react-intl";
 import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
@@ -885,7 +892,7 @@ function DefaultLabel({
 }) {
   const intl = useIntl9();
   const label = getNodeLabel4(node);
-  const { config, flowType } = useOryFlow6();
+  const { config, flowType } = useOryFlow7();
   const isPassword = attributes.type === "password";
   const isCode = attributes.name === "code";
   return /* @__PURE__ */ jsxs11("span", { className: "flex flex-col antialiased gap-1", children: [
@@ -900,7 +907,7 @@ function DefaultLabel({
           children: uiTextToFormattedMessage6(label, intl)
         }
       ),
-      isPassword && config.project.recovery_enabled && flowType === FlowType5.Login && // TODO: make it possible to override with a custom component
+      isPassword && config.project.recovery_enabled && flowType === FlowType6.Login && // TODO: make it possible to override with a custom component
       /* @__PURE__ */ jsx22(
         "a",
         {
@@ -1042,7 +1049,7 @@ var DefaultPinCodeInput = ({ attributes }) => {
 // src/theme/default/components/form/social.tsx
 import {
   uiTextToFormattedMessage as uiTextToFormattedMessage8,
-  useOryFlow as useOryFlow7
+  useOryFlow as useOryFlow8
 } from "@ory/elements-react";
 
 // src/theme/default/provider-logos/apple.svg
@@ -1249,7 +1256,7 @@ function DefaultButtonSocial({
   } = attributes;
   const {
     flow: { ui }
-  } = useOryFlow7();
+  } = useOryFlow8();
   const intl = useIntl11();
   const oidcNodeCount = (_a = ui.nodes.filter((node2) => node2.group === "oidc").length) != null ? _a : 0;
   const Logo = provider_logos_default[attributes.value];
@@ -1564,6 +1571,7 @@ function DefaultSettingsTotp(props) {
 }
 
 // src/theme/default/components/settings/settings-oidc.tsx
+import { useFormContext as useFormContext4 } from "react-hook-form";
 import { jsx as jsx51, jsxs as jsxs31 } from "react/jsx-runtime";
 function DefaultSettingsOidc({
   linkButtons,
@@ -1571,6 +1579,7 @@ function DefaultSettingsOidc({
 }) {
   const hasLinkButtons = linkButtons.length > 0;
   const hasUnlinkButtons = unlinkButtons.length > 0;
+  const { setValue } = useFormContext4();
   return /* @__PURE__ */ jsxs31("div", { className: "flex flex-col gap-8", children: [
     hasLinkButtons && /* @__PURE__ */ jsx51("div", { className: "flex gap-3 items-start [&>button]:w-[79px]", children: linkButtons.map((button) => {
       const attrs = button.attributes;
@@ -1579,7 +1588,11 @@ function DefaultSettingsOidc({
         {
           showLabel: false,
           node: button,
-          attributes: attrs
+          attributes: attrs,
+          onClick: () => {
+            setValue("link", attrs.value);
+            setValue("method", "oidc");
+          }
         },
         attrs.value
       );
@@ -1589,13 +1602,24 @@ function DefaultSettingsOidc({
       var _a, _b;
       const attrs = button.attributes;
       const provider = (_b = extractProvider((_a = button.meta.label) == null ? void 0 : _a.context)) != null ? _b : "";
-      const Logo = provider_logos_default[attrs.value];
+      const Logo = attrs.value in provider_logos_default ? provider_logos_default[attrs.value] : provider_logos_default.generic;
       return /* @__PURE__ */ jsxs31("div", { className: "flex justify-between", children: [
         /* @__PURE__ */ jsxs31("div", { className: "flex gap-6 items-center", children: [
           /* @__PURE__ */ jsx51(Logo, { size: 32 }),
           /* @__PURE__ */ jsx51("p", { className: "text-dialog-fg-subtle text-sm font-medium", children: provider })
         ] }),
-        /* @__PURE__ */ jsx51("button", { ...attrs, type: "submit", children: /* @__PURE__ */ jsx51(trash_default, { className: "cursor-pointer text-links-link-mute-default hover:text-links-link-mute-hover" }) })
+        /* @__PURE__ */ jsx51(
+          "button",
+          {
+            ...attrs,
+            type: "submit",
+            onClick: () => {
+              setValue("unlink", attrs.value);
+              setValue("method", "oidc");
+            },
+            children: /* @__PURE__ */ jsx51(trash_default, { className: "cursor-pointer text-links-link-mute-default hover:text-links-link-mute-hover" })
+          }
+        )
       ] }, attrs.value);
     })
   ] });
@@ -1734,15 +1758,12 @@ function DefaultSettingsPasskey({
 }
 
 // src/theme/default/components/generic/page-header.tsx
-import {
-  useComponents as useComponents2,
-  useSession
-} from "@ory/elements-react";
+import { useComponents as useComponents2 } from "@ory/elements-react";
 
 // src/theme/default/components/ui/user-menu.tsx
 import { DropdownMenuLabel as DropdownMenuLabel2 } from "@radix-ui/react-dropdown-menu";
 import { useCallback, useEffect, useState as useState2 } from "react";
-import { useOryFlow as useOryFlow8 } from "@ory/elements-react";
+import { useOryFlow as useOryFlow9 } from "@ory/elements-react";
 
 // src/util/client.ts
 import {
@@ -1910,7 +1931,7 @@ UserAvatar.displayName = "UserAvatar";
 // src/theme/default/components/ui/user-menu.tsx
 import { jsx as jsx60, jsxs as jsxs35 } from "react/jsx-runtime";
 var UserMenu = ({ session }) => {
-  const { config } = useOryFlow8();
+  const { config } = useOryFlow9();
   const initials = getUserInitials(session);
   const [logoutFlow, setLogoutFlow] = useState2();
   const fetchLogoutFlow = useCallback(async () => {
@@ -1943,6 +1964,7 @@ var UserMenu = ({ session }) => {
 };
 
 // src/theme/default/components/generic/page-header.tsx
+import { useSession } from "@ory/elements-react/client";
 import { jsx as jsx61, jsxs as jsxs36 } from "react/jsx-runtime";
 var DefaultPageHeader = (_props) => {
   const { Card } = useComponents2();
@@ -1954,49 +1976,52 @@ var DefaultPageHeader = (_props) => {
 };
 
 // src/theme/default/components/default-components.tsx
-var OryDefaultComponents = {
-  Card: {
-    Root: DefaultCard,
-    Footer: DefaultCardFooter,
-    Header: DefaultCardHeader,
-    Content: DefaultCardContent,
-    Logo: DefaultCardLogo,
-    Divider: DefaultHorizontalDivider,
-    AuthMethodListItem: DefaultAuthMethodListItem,
-    SettingsSection: DefaultFormSection,
-    SettingsSectionContent: DefaultFormSectionContent,
-    SettingsSectionFooter: DefaultFormSectionFooter
-  },
-  Node: {
-    Button: DefaultButton,
-    OidcButton: DefaultButtonSocial,
-    CurrentIdentifierButton: DefaultCurrentIdentifierButton,
-    Input: DefaultInput,
-    CodeInput: DefaultPinCodeInput,
-    Image: DefaultImage,
-    Label: DefaultLabel,
-    Checkbox: DefaultCheckbox,
-    Text: DefaultText,
-    Anchor: DefaultLinkButton
-  },
-  Form: {
-    Root: DefaultFormContainer,
-    Group: DefaultGroupContainer,
-    OidcRoot: DefaultSocialButtonContainer,
-    RecoveryCodesSettings: DefaultSettingsRecoveryCodes,
-    TotpSettings: DefaultSettingsTotp,
-    OidcSettings: DefaultSettingsOidc,
-    WebauthnSettings: DefaultSettingsWebauthn,
-    PasskeySettings: DefaultSettingsPasskey
-  },
-  Message: {
-    Root: DefaultMessageContainer,
-    Content: DefaultMessage
-  },
-  Page: {
-    Header: DefaultPageHeader
-  }
-};
+function getOryComponents(overrides) {
+  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;
+  return {
+    Card: {
+      Root: (_b = (_a = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _a.Root) != null ? _b : DefaultCard,
+      Footer: (_d = (_c = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _c.Footer) != null ? _d : DefaultCardFooter,
+      Header: (_f = (_e = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _e.Header) != null ? _f : DefaultCardHeader,
+      Content: (_h = (_g = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _g.Content) != null ? _h : DefaultCardContent,
+      Logo: (_j = (_i = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _i.Logo) != null ? _j : DefaultCardLogo,
+      Divider: (_l = (_k = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _k.Divider) != null ? _l : DefaultHorizontalDivider,
+      AuthMethodListItem: (_n = (_m = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _m.AuthMethodListItem) != null ? _n : DefaultAuthMethodListItem,
+      SettingsSection: (_p = (_o = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _o.SettingsSection) != null ? _p : DefaultFormSection,
+      SettingsSectionContent: (_r = (_q = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _q.SettingsSectionContent) != null ? _r : DefaultFormSectionContent,
+      SettingsSectionFooter: (_t = (_s = overrides == null ? void 0 : overrides.Card) == null ? void 0 : _s.SettingsSectionFooter) != null ? _t : DefaultFormSectionFooter
+    },
+    Node: {
+      Button: (_v = (_u = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _u.Button) != null ? _v : DefaultButton,
+      OidcButton: (_x = (_w = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _w.OidcButton) != null ? _x : DefaultButtonSocial,
+      CurrentIdentifierButton: (_z = (_y = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _y.CurrentIdentifierButton) != null ? _z : DefaultCurrentIdentifierButton,
+      Input: (_B = (_A = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _A.Input) != null ? _B : DefaultInput,
+      CodeInput: (_D = (_C = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _C.CodeInput) != null ? _D : DefaultPinCodeInput,
+      Image: (_F = (_E = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _E.Image) != null ? _F : DefaultImage,
+      Label: (_H = (_G = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _G.Label) != null ? _H : DefaultLabel,
+      Checkbox: (_J = (_I = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _I.Checkbox) != null ? _J : DefaultCheckbox,
+      Text: (_L = (_K = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _K.Text) != null ? _L : DefaultText,
+      Anchor: (_N = (_M = overrides == null ? void 0 : overrides.Node) == null ? void 0 : _M.Anchor) != null ? _N : DefaultLinkButton
+    },
+    Form: {
+      Root: (_P = (_O = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _O.Root) != null ? _P : DefaultFormContainer,
+      Group: (_R = (_Q = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _Q.Group) != null ? _R : DefaultGroupContainer,
+      OidcRoot: (_T = (_S = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _S.OidcRoot) != null ? _T : DefaultSocialButtonContainer,
+      RecoveryCodesSettings: (_V = (_U = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _U.RecoveryCodesSettings) != null ? _V : DefaultSettingsRecoveryCodes,
+      TotpSettings: (_X = (_W = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _W.TotpSettings) != null ? _X : DefaultSettingsTotp,
+      OidcSettings: (_Z = (_Y = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _Y.OidcSettings) != null ? _Z : DefaultSettingsOidc,
+      WebauthnSettings: (_$ = (__ = overrides == null ? void 0 : overrides.Form) == null ? void 0 : __.WebauthnSettings) != null ? _$ : DefaultSettingsWebauthn,
+      PasskeySettings: (_ba = (_aa = overrides == null ? void 0 : overrides.Form) == null ? void 0 : _aa.PasskeySettings) != null ? _ba : DefaultSettingsPasskey
+    },
+    Message: {
+      Root: (_da = (_ca = overrides == null ? void 0 : overrides.Message) == null ? void 0 : _ca.Root) != null ? _da : DefaultMessageContainer,
+      Content: (_fa = (_ea = overrides == null ? void 0 : overrides.Message) == null ? void 0 : _ea.Content) != null ? _fa : DefaultMessage
+    },
+    Page: {
+      Header: (_ha = (_ga = overrides == null ? void 0 : overrides.Page) == null ? void 0 : _ga.Header) != null ? _ha : DefaultPageHeader
+    }
+  };
+}
 
 // src/theme/default/flows/error.tsx
 import { jsx as jsx62 } from "react/jsx-runtime";
@@ -2008,12 +2033,11 @@ function Error({
 }
 
 // src/theme/default/flows/login.tsx
-import { FlowType as FlowType6 } from "@ory/client-fetch";
+import { FlowType as FlowType7 } from "@ory/client-fetch";
 import {
   OryProvider,
   OryTwoStepCard
 } from "@ory/elements-react";
-import merge from "lodash.merge";
 import { jsx as jsx63 } from "react/jsx-runtime";
 function Login({
   flow,
@@ -2021,13 +2045,13 @@ function Login({
   children,
   components: flowOverrideComponents
 }) {
-  const components = flowOverrideComponents ? merge({}, OryDefaultComponents, flowOverrideComponents) : OryDefaultComponents;
+  const components = getOryComponents(flowOverrideComponents);
   return /* @__PURE__ */ jsx63(
     OryProvider,
     {
       config,
       flow,
-      flowType: FlowType6.Login,
+      flowType: FlowType7.Login,
       components,
       children: children != null ? children : /* @__PURE__ */ jsx63(OryTwoStepCard, {})
     }
@@ -2035,12 +2059,11 @@ function Login({
 }
 
 // src/theme/default/flows/recovery.tsx
-import { FlowType as FlowType7 } from "@ory/client-fetch";
+import { FlowType as FlowType8 } from "@ory/client-fetch";
 import {
   OryProvider as OryProvider2,
   OryTwoStepCard as OryTwoStepCard2
 } from "@ory/elements-react";
-import merge2 from "lodash.merge";
 import { jsx as jsx64 } from "react/jsx-runtime";
 function Recovery({
   flow,
@@ -2048,13 +2071,13 @@ function Recovery({
   children,
   components: flowOverrideComponents
 }) {
-  const components = flowOverrideComponents ? merge2({}, OryDefaultComponents, flowOverrideComponents) : OryDefaultComponents;
+  const components = getOryComponents(flowOverrideComponents);
   return /* @__PURE__ */ jsx64(
     OryProvider2,
     {
       config,
       flow,
-      flowType: FlowType7.Recovery,
+      flowType: FlowType8.Recovery,
       components,
       children: children != null ? children : /* @__PURE__ */ jsx64(OryTwoStepCard2, {})
     }
@@ -2062,12 +2085,11 @@ function Recovery({
 }
 
 // src/theme/default/flows/registration.tsx
-import { FlowType as FlowType8 } from "@ory/client-fetch";
+import { FlowType as FlowType9 } from "@ory/client-fetch";
 import {
   OryProvider as OryProvider3,
   OryTwoStepCard as OryTwoStepCard3
 } from "@ory/elements-react";
-import merge3 from "lodash.merge";
 import { jsx as jsx65 } from "react/jsx-runtime";
 function Registration({
   flow,
@@ -2075,13 +2097,13 @@ function Registration({
   components: flowOverrideComponents,
   config
 }) {
-  const components = flowOverrideComponents ? merge3({}, OryDefaultComponents, flowOverrideComponents) : OryDefaultComponents;
+  const components = getOryComponents(flowOverrideComponents);
   return /* @__PURE__ */ jsx65(
     OryProvider3,
     {
       config,
       flow,
-      flowType: FlowType8.Registration,
+      flowType: FlowType9.Registration,
       components,
       children: children != null ? children : /* @__PURE__ */ jsx65(OryTwoStepCard3, {})
     }
@@ -2089,13 +2111,12 @@ function Registration({
 }
 
 // src/theme/default/flows/settings.tsx
-import { FlowType as FlowType9 } from "@ory/client-fetch";
+import { FlowType as FlowType10 } from "@ory/client-fetch";
 import {
   HeadlessPageHeader,
   OryProvider as OryProvider4,
   OrySettingsCard
 } from "@ory/elements-react";
-import merge4 from "lodash.merge";
 import { Fragment as Fragment3, jsx as jsx66, jsxs as jsxs37 } from "react/jsx-runtime";
 function Settings({
   flow,
@@ -2103,13 +2124,13 @@ function Settings({
   children,
   components: flowOverrideComponents
 }) {
-  const components = flowOverrideComponents ? merge4({}, OryDefaultComponents, flowOverrideComponents) : OryDefaultComponents;
+  const components = getOryComponents(flowOverrideComponents);
   return /* @__PURE__ */ jsx66(
     OryProvider4,
     {
       config,
       flow,
-      flowType: FlowType9.Settings,
+      flowType: FlowType10.Settings,
       components,
       children: children != null ? children : /* @__PURE__ */ jsxs37(Fragment3, { children: [
         /* @__PURE__ */ jsx66(HeadlessPageHeader, {}),
@@ -2120,12 +2141,11 @@ function Settings({
 }
 
 // src/theme/default/flows/verification.tsx
-import { FlowType as FlowType10 } from "@ory/client-fetch";
+import { FlowType as FlowType11 } from "@ory/client-fetch";
 import {
   OryProvider as OryProvider5,
   OryTwoStepCard as OryTwoStepCard4
 } from "@ory/elements-react";
-import merge5 from "lodash.merge";
 import { jsx as jsx67 } from "react/jsx-runtime";
 function Verification({
   flow,
@@ -2133,13 +2153,13 @@ function Verification({
   children,
   components: flowOverrideComponents
 }) {
-  const components = flowOverrideComponents ? merge5({}, OryDefaultComponents, flowOverrideComponents) : OryDefaultComponents;
+  const components = getOryComponents(flowOverrideComponents);
   return /* @__PURE__ */ jsx67(
     OryProvider5,
     {
       config,
       flow,
-      flowType: FlowType10.Verification,
+      flowType: FlowType11.Verification,
       components,
       children: children != null ? children : /* @__PURE__ */ jsx67(OryTwoStepCard4, {})
     }
@@ -2156,10 +2176,10 @@ export {
   DefaultMessageContainer,
   Error,
   Login,
-  OryDefaultComponents,
   Recovery,
   Registration,
   Settings,
-  Verification
+  Verification,
+  getOryComponents
 };
 //# sourceMappingURL=index.mjs.map