@plumile/backoffice-react 0.2.3 → 0.2.6

package/lib/esm/auth/login/MfaChallengeForm.js

@@ -1,85 +1,80 @@
 import { actionsRow as e, formSurface as t, helper as n, inlineLink as r, stack as i } from "./loginPage.css.js";
 import { useBackofficeReactTranslation as a } from "../../i18n/useBackofficeReactTranslation.js";
 import { useCallback as o, useEffect as s, useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { Button as d } from "@plumile/ui/atomic/atoms/button/Button.js";
-import { FormError as f } from "@plumile/ui/atomic/molecules/form_error/FormError.js";
-import { FormField as p } from "@plumile/ui/atomic/molecules/form_field/FormField.js";
-import { Form as m } from "@plumile/ui/atomic/molecules/form/Form.js";
+import { Form as l, FormField as u } from "@plumile/ui";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Button as p } from "@plumile/ui/button";
 //#region src/auth/login/MfaChallengeForm.tsx
-var h = ({ auth: h, onSuccess: g, onBack: _ }) => {
-	let { t: v } = a(), [y, b] = c(""), [x, S] = c(null);
+var m = ({ auth: m, onSuccess: h, onBack: g }) => {
+	let { t: _ } = a(), [v, y] = c(""), [b, x] = c(null);
 	s(() => {
-		h.clearError(), S(null);
-	}, [h]);
-	let C = o(async (e) => {
-		e.preventDefault(), S(null);
-		let t = y.trim();
+		m.clearError(), x(null);
+	}, [m]);
+	let S = o(async (e) => {
+		e.preventDefault(), x(null);
+		let t = v.trim();
 		if (t.length < 4) {
-			S(v("auth.mfa.errors.shortCode"));
+			x(_("auth.mfa.errors.shortCode"));
 			return;
 		}
 		try {
 			let e = { code: t };
-			await h.completeMfa(e), g();
+			await m.completeMfa(e), h();
 		} catch {
-			S(v("auth.mfa.errors.verificationFailed"));
+			x(_("auth.mfa.errors.verificationFailed"));
 		}
 	}, [
+		m,
+		v,
 		h,
-		y,
-		g,
-		v
-	]), w = h.emailHint == null ? v("auth.mfa.helper.default") : v("auth.mfa.helper.withEmail", { email: h.emailHint }), T = x, E = o((e) => {
-		C(e).catch(() => {});
-	}, [C]);
-	return /* @__PURE__ */ u(m, {
+		_
+	]), C = m.emailHint == null ? _("auth.mfa.helper.default") : _("auth.mfa.helper.withEmail", { email: m.emailHint }), w = o((e) => {
+		S(e).catch(() => {});
+	}, [S]);
+	return /* @__PURE__ */ f(l, {
 		className: t,
-		onSubmit: E,
+		onSubmit: w,
 		noValidate: !0,
 		initialFocus: "first-form-control",
-		children: [/* @__PURE__ */ u("div", {
+		children: [/* @__PURE__ */ f("div", {
 			className: i,
-			children: [
-				/* @__PURE__ */ l("p", {
-					className: n,
-					children: w
-				}),
-				T == null ? null : /* @__PURE__ */ l(f, { children: T }),
-				/* @__PURE__ */ l(p, {
-					label: v("auth.mfa.form.label"),
-					name: "code",
-					type: "text",
-					value: y,
-					onChange: (e) => {
-						b(e.target.value), S(null);
-					},
-					placeholder: v("auth.mfa.form.placeholder"),
-					autoComplete: "one-time-code",
-					required: !0
-				})
-			]
-		}), /* @__PURE__ */ u("div", {
+			children: [/* @__PURE__ */ d("p", {
+				className: n,
+				children: C
+			}), /* @__PURE__ */ d(u, {
+				label: _("auth.mfa.form.label"),
+				error: b,
+				name: "code",
+				type: "text",
+				value: v,
+				onChange: (e) => {
+					y(e.target.value), x(null);
+				},
+				placeholder: _("auth.mfa.form.placeholder"),
+				autoComplete: "one-time-code",
+				required: !0
+			})]
+		}), /* @__PURE__ */ f("div", {
 			className: e,
-			children: [/* @__PURE__ */ l(d, {
+			children: [/* @__PURE__ */ d(p, {
 				type: "button",
-				variant: "text",
+				variant: "plain",
 				size: "small",
 				className: r,
 				onClick: () => {
-					h.reset(), _();
+					m.reset(), g();
 				},
-				children: v("auth.mfa.actions.back")
-			}), /* @__PURE__ */ l(d, {
+				children: _("auth.mfa.actions.back")
+			}), /* @__PURE__ */ d(p, {
 				type: "submit",
 				size: "large",
-				isLoading: h.isLoading,
-				children: v("auth.mfa.actions.submit")
+				loading: m.isLoading,
+				children: _("auth.mfa.actions.submit")
 			})]
 		})]
 	});
 };
 //#endregion
-export { h as MfaChallengeForm };
+export { m as MfaChallengeForm };
 
 //# sourceMappingURL=MfaChallengeForm.js.map

package/lib/esm/auth/login/MfaChallengeForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"MfaChallengeForm.js","names":[],"sources":["../../../../src/auth/login/MfaChallengeForm.tsx"],"sourcesContent":["/* eslint-disable no-ternary */\nimport {\n  useCallback,\n  useEffect,\n  useState,\n  type FormEvent,\n  type JSX,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { FormError } from '@plumile/ui/atomic/molecules/form_error/FormError.js';\nimport { FormField } from '@plumile/ui/atomic/molecules/form_field/FormField.js';\nimport { Form } from '@plumile/ui/atomic/molecules/form/Form.js';\n\nimport type { TotpCredentials, UseAuthReturn } from '../../hooks/useAuth.js';\n\nimport * as styles from './loginPage.css.js';\n\ntype Props = {\n  auth: Pick<\n    UseAuthReturn,\n    'completeMfa' | 'isLoading' | 'error' | 'emailHint' | 'reset' | 'clearError'\n  >;\n  onSuccess: () => void;\n  onBack: () => void;\n};\n\nexport const MfaChallengeForm = ({\n  auth,\n  onSuccess,\n  onBack,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const [code, setCode] = useState('');\n  const [localError, setLocalError] = useState<string | null>(null);\n\n  // Clear any stale errors when the MFA form is shown\n  useEffect(() => {\n    auth.clearError();\n    setLocalError(null);\n  }, [auth]);\n\n  const handleSubmit = useCallback(\n    async (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      setLocalError(null);\n\n      const trimmed = code.trim();\n      if (trimmed.length < 4) {\n        setLocalError(t('auth.mfa.errors.shortCode'));\n        return;\n      }\n\n      try {\n        const credentials: TotpCredentials = {\n          code: trimmed,\n        };\n        await auth.completeMfa(credentials);\n        onSuccess();\n      } catch {\n        setLocalError(t('auth.mfa.errors.verificationFailed'));\n      }\n    },\n    [auth, code, onSuccess, t],\n  );\n\n  const helper =\n    auth.emailHint != null\n      ? t('auth.mfa.helper.withEmail', { email: auth.emailHint })\n      : t('auth.mfa.helper.default');\n\n  const formError = localError;\n\n  const handleSubmitEvent = useCallback(\n    (event: FormEvent<HTMLFormElement>) => {\n      handleSubmit(event).catch(() => {\n        return undefined;\n      });\n    },\n    [handleSubmit],\n  );\n\n  return (\n    <Form\n      className={styles.formSurface}\n      onSubmit={handleSubmitEvent}\n      noValidate\n      initialFocus=\"first-form-control\"\n    >\n      <div className={styles.stack}>\n        <p className={styles.helper}>{helper}</p>\n        {formError != null ? <FormError>{formError}</FormError> : null}\n        <FormField\n          label={t('auth.mfa.form.label')}\n          name=\"code\"\n          type=\"text\"\n          value={code}\n          onChange={(event) => {\n            setCode(event.target.value);\n            setLocalError(null);\n          }}\n          placeholder={t('auth.mfa.form.placeholder')}\n          autoComplete=\"one-time-code\"\n          required\n        />\n      </div>\n      <div className={styles.actionsRow}>\n        <Button\n          type=\"button\"\n          variant=\"text\"\n          size=\"small\"\n          className={styles.inlineLink}\n          onClick={() => {\n            auth.reset();\n            onBack();\n          }}\n        >\n          {t('auth.mfa.actions.back')}\n        </Button>\n        <Button type=\"submit\" size=\"large\" isLoading={auth.isLoading}>\n          {t('auth.mfa.actions.submit')}\n        </Button>\n      </div>\n    </Form>\n  );\n};\n"],"mappings":";;;;;;;;;AA4BA,IAAa,KAAoB,EAC/B,SACA,cACA,gBACwB;CACxB,IAAM,EAAE,SAAM,EAA8B,GACtC,CAAC,GAAM,KAAW,EAAS,EAAE,GAC7B,CAAC,GAAY,KAAiB,EAAwB,IAAI;CAGhE,QAAgB;EAEd,AADA,EAAK,WAAW,GAChB,EAAc,IAAI;CACpB,GAAG,CAAC,CAAI,CAAC;CAET,IAAM,IAAe,EACnB,OAAO,MAAsC;EAE3C,AADA,EAAM,eAAe,GACrB,EAAc,IAAI;EAElB,IAAM,IAAU,EAAK,KAAK;EAC1B,IAAI,EAAQ,SAAS,GAAG;GACtB,EAAc,EAAE,2BAA2B,CAAC;GAC5C;EACF;EAEA,IAAI;GACF,IAAM,IAA+B,EACnC,MAAM,EACR;GAEA,AADA,MAAM,EAAK,YAAY,CAAW,GAClC,EAAU;EACZ,QAAQ;GACN,EAAc,EAAE,oCAAoC,CAAC;EACvD;CACF,GACA;EAAC;EAAM;EAAM;EAAW;CAAC,CAC3B,GAEM,IACJ,EAAK,aAAa,OAEd,EAAE,yBAAyB,IAD3B,EAAE,6BAA6B,EAAE,OAAO,EAAK,UAAU,CAAC,GAGxD,IAAY,GAEZ,IAAoB,GACvB,MAAsC;EACrC,EAAa,CAAK,CAAC,CAAC,YAAY,CAEhC,CAAC;CACH,GACA,CAAC,CAAY,CACf;CAEA,OACE,kBAAC,GAAD;EACE,WAAW;EACX,UAAU;EACV,YAAA;EACA,cAAa;EAJf,UAAA,CAME,kBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA;IACE,kBAAC,KAAD;KAAG,WAAW;KAAgB,UAAA;IAAU,CAAA;IACvC,KAAa,OAA4C,OAArC,kBAAC,GAAD,EAAA,UAAY,EAAqB,CAAA;IACtD,kBAAC,GAAD;KACE,OAAO,EAAE,qBAAqB;KAC9B,MAAK;KACL,MAAK;KACL,OAAO;KACP,WAAW,MAAU;MAEnB,AADA,EAAQ,EAAM,OAAO,KAAK,GAC1B,EAAc,IAAI;KACpB;KACA,aAAa,EAAE,2BAA2B;KAC1C,cAAa;KACb,UAAA;IACD,CAAA;GACE;EACL,CAAA,GAAA,kBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA,CACE,kBAAC,GAAD;IACE,MAAK;IACL,SAAQ;IACR,MAAK;IACL,WAAW;IACX,eAAe;KAEb,AADA,EAAK,MAAM,GACX,EAAO;IACT;IAEC,UAAA,EAAE,uBAAuB;GACpB,CAAA,GACR,kBAAC,GAAD;IAAQ,MAAK;IAAS,MAAK;IAAQ,WAAW,EAAK;IAChD,UAAA,EAAE,yBAAyB;GACtB,CAAA,CACL;EACD,CAAA,CAAA;;AAEV"}
+{"version":3,"file":"MfaChallengeForm.js","names":[],"sources":["../../../../src/auth/login/MfaChallengeForm.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useState,\n  type FormEvent,\n  type JSX,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button } from '@plumile/ui/button';\nimport { FormField, Form } from '@plumile/ui';\n\nimport type { TotpCredentials, UseAuthReturn } from '../../hooks/useAuth.js';\n\nimport * as styles from './loginPage.css.js';\n\ntype Props = {\n  auth: Pick<\n    UseAuthReturn,\n    'completeMfa' | 'isLoading' | 'error' | 'emailHint' | 'reset' | 'clearError'\n  >;\n  onSuccess: () => void;\n  onBack: () => void;\n};\n\nexport const MfaChallengeForm = ({\n  auth,\n  onSuccess,\n  onBack,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const [code, setCode] = useState('');\n  const [localError, setLocalError] = useState<string | null>(null);\n\n  // Clear any stale errors when the MFA form is shown\n  useEffect(() => {\n    auth.clearError();\n    setLocalError(null);\n  }, [auth]);\n\n  const handleSubmit = useCallback(\n    async (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      setLocalError(null);\n\n      const trimmed = code.trim();\n      if (trimmed.length < 4) {\n        setLocalError(t('auth.mfa.errors.shortCode'));\n        return;\n      }\n\n      try {\n        const credentials: TotpCredentials = {\n          code: trimmed,\n        };\n        await auth.completeMfa(credentials);\n        onSuccess();\n      } catch {\n        setLocalError(t('auth.mfa.errors.verificationFailed'));\n      }\n    },\n    [auth, code, onSuccess, t],\n  );\n\n  const helper =\n    auth.emailHint != null\n      ? t('auth.mfa.helper.withEmail', { email: auth.emailHint })\n      : t('auth.mfa.helper.default');\n\n  const handleSubmitEvent = useCallback(\n    (event: FormEvent<HTMLFormElement>) => {\n      handleSubmit(event).catch(() => {\n        return undefined;\n      });\n    },\n    [handleSubmit],\n  );\n\n  return (\n    <Form\n      className={styles.formSurface}\n      onSubmit={handleSubmitEvent}\n      noValidate\n      initialFocus=\"first-form-control\"\n    >\n      <div className={styles.stack}>\n        <p className={styles.helper}>{helper}</p>\n        <FormField\n          label={t('auth.mfa.form.label')}\n          error={localError}\n          name=\"code\"\n          type=\"text\"\n          value={code}\n          onChange={(event) => {\n            setCode(event.target.value);\n            setLocalError(null);\n          }}\n          placeholder={t('auth.mfa.form.placeholder')}\n          autoComplete=\"one-time-code\"\n          required\n        />\n      </div>\n      <div className={styles.actionsRow}>\n        <Button\n          type=\"button\"\n          variant=\"plain\"\n          size=\"small\"\n          className={styles.inlineLink}\n          onClick={() => {\n            auth.reset();\n            onBack();\n          }}\n        >\n          {t('auth.mfa.actions.back')}\n        </Button>\n        <Button type=\"submit\" size=\"large\" loading={auth.isLoading}>\n          {t('auth.mfa.actions.submit')}\n        </Button>\n      </div>\n    </Form>\n  );\n};\n"],"mappings":";;;;;;;AAyBA,IAAa,KAAoB,EAC/B,SACA,cACA,gBACwB;CACxB,IAAM,EAAE,SAAM,EAA8B,GACtC,CAAC,GAAM,KAAW,EAAS,EAAE,GAC7B,CAAC,GAAY,KAAiB,EAAwB,IAAI;CAGhE,QAAgB;EAEd,AADA,EAAK,WAAW,GAChB,EAAc,IAAI;CACpB,GAAG,CAAC,CAAI,CAAC;CAET,IAAM,IAAe,EACnB,OAAO,MAAsC;EAE3C,AADA,EAAM,eAAe,GACrB,EAAc,IAAI;EAElB,IAAM,IAAU,EAAK,KAAK;EAC1B,IAAI,EAAQ,SAAS,GAAG;GACtB,EAAc,EAAE,2BAA2B,CAAC;GAC5C;EACF;EAEA,IAAI;GACF,IAAM,IAA+B,EACnC,MAAM,EACR;GAEA,AADA,MAAM,EAAK,YAAY,CAAW,GAClC,EAAU;EACZ,QAAQ;GACN,EAAc,EAAE,oCAAoC,CAAC;EACvD;CACF,GACA;EAAC;EAAM;EAAM;EAAW;CAAC,CAC3B,GAEM,IACJ,EAAK,aAAa,OAEd,EAAE,yBAAyB,IAD3B,EAAE,6BAA6B,EAAE,OAAO,EAAK,UAAU,CAAC,GAGxD,IAAoB,GACvB,MAAsC;EACrC,EAAa,CAAK,CAAC,CAAC,YAAY,CAEhC,CAAC;CACH,GACA,CAAC,CAAY,CACf;CAEA,OACE,kBAAC,GAAD;EACE,WAAW;EACX,UAAU;EACV,YAAA;EACA,cAAa;EAJf,UAAA,CAME,kBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA,CACE,kBAAC,KAAD;IAAG,WAAW;IAAgB,UAAA;GAAU,CAAA,GACxC,kBAAC,GAAD;IACE,OAAO,EAAE,qBAAqB;IAC9B,OAAO;IACP,MAAK;IACL,MAAK;IACL,OAAO;IACP,WAAW,MAAU;KAEnB,AADA,EAAQ,EAAM,OAAO,KAAK,GAC1B,EAAc,IAAI;IACpB;IACA,aAAa,EAAE,2BAA2B;IAC1C,cAAa;IACb,UAAA;GACD,CAAA,CACE;EACL,CAAA,GAAA,kBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA,CACE,kBAAC,GAAD;IACE,MAAK;IACL,SAAQ;IACR,MAAK;IACL,WAAW;IACX,eAAe;KAEb,AADA,EAAK,MAAM,GACX,EAAO;IACT;IAEC,UAAA,EAAE,uBAAuB;GACpB,CAAA,GACR,kBAAC,GAAD;IAAQ,MAAK;IAAS,MAAK;IAAQ,SAAS,EAAK;IAC9C,UAAA,EAAE,yBAAyB;GACtB,CAAA,CACL;EACD,CAAA,CAAA;;AAEV"}

package/lib/esm/auth/login/OidcButtons.js

@@ -1,7 +1,7 @@
 import { brandGhostButton as e, stack as t } from "./loginPage.css.js";
 import { useBackofficeReactTranslation as n } from "../../i18n/useBackofficeReactTranslation.js";
 import { jsx as r } from "react/jsx-runtime";
-import { Button as i } from "@plumile/ui/atomic/atoms/button/Button.js";
+import { Button as i } from "@plumile/ui/button";
 //#region src/auth/login/OidcButtons.tsx
 var a = "/auth/oidc/start", o = ({ providers: o }) => {
 	let { t: s } = n();
@@ -13,11 +13,12 @@ var a = "/auth/oidc/start", o = ({ providers: o }) => {
 			let o = t.toLowerCase();
 			return /* @__PURE__ */ r(i, {
 				type: "button",
-				variant: "secondary",
+				variant: "soft",
 				className: e,
 				onClick: () => {
 					window.location.assign(`${a}?provider=${o}`);
 				},
+				tone: "neutral",
 				children: n
 			}, t);
 		})

package/lib/esm/auth/login/OidcButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"OidcButtons.js","names":[],"sources":["../../../../src/auth/login/OidcButtons.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\n\nimport type { OidcProviderKind } from '../../modules/sharedSchemaTypes.js';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './loginPage.css.js';\n\nconst OIDC_START_PATH = '/auth/oidc/start';\n\ntype Props = {\n  providers: readonly OidcProviderKind[];\n};\n\nexport const OidcButtons = ({ providers }: Props): JSX.Element | null => {\n  const { t } = useBackofficeReactTranslation();\n\n  if (providers.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className={styles.stack}>\n      {providers.map((provider) => {\n        let label = t('auth.oidc.buttons.generic');\n        if (provider === 'GOOGLE') {\n          label = t('auth.oidc.buttons.google');\n        } else if (provider === 'APPLE') {\n          label = t('auth.oidc.buttons.apple');\n        }\n        const providerName = provider.toLowerCase();\n        return (\n          <Button\n            key={provider}\n            type=\"button\"\n            variant=\"secondary\"\n            className={styles.brandGhostButton}\n            onClick={() => {\n              window.location.assign(\n                `${OIDC_START_PATH}?provider=${providerName}`,\n              );\n            }}\n          >\n            {label}\n          </Button>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;;AASA,IAAM,IAAkB,oBAMX,KAAe,EAAE,mBAA2C;CACvE,IAAM,EAAE,SAAM,EAA8B;CAM5C,OAJI,EAAU,WAAW,IAChB,OAIP,kBAAC,OAAD;EAAK,WAAW;EACb,UAAA,EAAU,KAAK,MAAa;GAC3B,IAAI,IAAQ,EAAE,2BAA2B;GACzC,AAAI,MAAa,WACf,IAAQ,EAAE,0BAA0B,IAC3B,MAAa,YACtB,IAAQ,EAAE,yBAAyB;GAErC,IAAM,IAAe,EAAS,YAAY;GAC1C,OACE,kBAAC,GAAD;IAEE,MAAK;IACL,SAAQ;IACR,WAAW;IACX,eAAe;KACb,OAAO,SAAS,OACd,GAAG,EAAgB,YAAY,GACjC;IACF;IAEC,UAAA;GACK,GAXD,CAWC;EAEZ,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"OidcButtons.js","names":[],"sources":["../../../../src/auth/login/OidcButtons.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { Button } from '@plumile/ui/button';\n\nimport type { OidcProviderKind } from '../../modules/sharedSchemaTypes.js';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './loginPage.css.js';\n\nconst OIDC_START_PATH = '/auth/oidc/start';\n\ntype Props = {\n  providers: readonly OidcProviderKind[];\n};\n\nexport const OidcButtons = ({ providers }: Props): JSX.Element | null => {\n  const { t } = useBackofficeReactTranslation();\n\n  if (providers.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className={styles.stack}>\n      {providers.map((provider) => {\n        let label = t('auth.oidc.buttons.generic');\n        if (provider === 'GOOGLE') {\n          label = t('auth.oidc.buttons.google');\n        } else if (provider === 'APPLE') {\n          label = t('auth.oidc.buttons.apple');\n        }\n        const providerName = provider.toLowerCase();\n        return (\n          <Button\n            key={provider}\n            type=\"button\"\n            variant=\"soft\"\n            className={styles.brandGhostButton}\n            onClick={() => {\n              window.location.assign(\n                `${OIDC_START_PATH}?provider=${providerName}`,\n              );\n            }}\n            tone=\"neutral\"\n          >\n            {label}\n          </Button>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;;AASA,IAAM,IAAkB,oBAMX,KAAe,EAAE,mBAA2C;CACvE,IAAM,EAAE,SAAM,EAA8B;CAM5C,OAJI,EAAU,WAAW,IAChB,OAIP,kBAAC,OAAD;EAAK,WAAW;EACb,UAAA,EAAU,KAAK,MAAa;GAC3B,IAAI,IAAQ,EAAE,2BAA2B;GACzC,AAAI,MAAa,WACf,IAAQ,EAAE,0BAA0B,IAC3B,MAAa,YACtB,IAAQ,EAAE,yBAAyB;GAErC,IAAM,IAAe,EAAS,YAAY;GAC1C,OACE,kBAAC,GAAD;IAEE,MAAK;IACL,SAAQ;IACR,WAAW;IACX,eAAe;KACb,OAAO,SAAS,OACd,GAAG,EAAgB,YAAY,GACjC;IACF;IACA,MAAK;IAEJ,UAAA;GACK,GAZD,CAYC;EAEZ,CAAC;CACE,CAAA;AAET"}

package/lib/esm/auth/login/PasskeyLoginForm.js

@@ -1,11 +1,9 @@
 import { actionsRow as e, formSurface as t, helper as n, inlineLink as r, stack as i } from "./loginPage.css.js";
 import { useBackofficeReactTranslation as a } from "../../i18n/useBackofficeReactTranslation.js";
 import { useCallback as o, useEffect as s, useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { Button as d } from "@plumile/ui/atomic/atoms/button/Button.js";
-import { FormError as f } from "@plumile/ui/atomic/molecules/form_error/FormError.js";
-import { FormField as p } from "@plumile/ui/atomic/molecules/form_field/FormField.js";
-import { Form as m } from "@plumile/ui/atomic/molecules/form/Form.js";
+import { Form as l, FormError as u, FormField as d } from "@plumile/ui";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Button as m } from "@plumile/ui/button";
 //#region src/auth/login/PasskeyLoginForm.tsx
 var h = ({ auth: h, onSuccess: g, defaultEmail: _, isAttemptingPasskey: v = !1, onShowMethods: y }) => {
 	let { t: b } = a(), [x, S] = c(h.emailHint ?? ""), [C, w] = c(null);
@@ -40,20 +38,20 @@ var h = ({ auth: h, onSuccess: g, defaultEmail: _, isAttemptingPasskey: v = !1,
 	]), E = C, D = o((e) => {
 		T(e).catch(() => {});
 	}, [T]);
-	return /* @__PURE__ */ u(m, {
+	return /* @__PURE__ */ p(l, {
 		className: t,
 		onSubmit: D,
 		noValidate: !0,
 		initialFocus: "first-form-control",
-		children: [/* @__PURE__ */ u("div", {
+		children: [/* @__PURE__ */ p("div", {
 			className: i,
 			children: [
-				/* @__PURE__ */ l("p", {
+				/* @__PURE__ */ f("p", {
 					className: n,
 					children: b("auth.passkey.helper")
 				}),
-				E == null ? null : /* @__PURE__ */ l(f, { children: E }),
-				/* @__PURE__ */ l(p, {
+				E == null ? null : /* @__PURE__ */ f(u, { children: E }),
+				/* @__PURE__ */ f(d, {
 					label: b("auth.passkey.form.emailLabel"),
 					name: "passkey-email",
 					type: "email",
@@ -66,14 +64,14 @@ var h = ({ auth: h, onSuccess: g, defaultEmail: _, isAttemptingPasskey: v = !1,
 					required: !0
 				})
 			]
-		}), /* @__PURE__ */ u("div", {
+		}), /* @__PURE__ */ p("div", {
 			className: e,
-			children: [/* @__PURE__ */ l(d, {
+			children: [/* @__PURE__ */ f(m, {
 				type: "submit",
-				variant: "primary",
-				isLoading: h.isLoading,
+				variant: "solid",
+				loading: h.isLoading,
 				children: b(v ? "auth.passkey.actions.submitting" : "auth.passkey.actions.submit")
-			}), y == null ? null : /* @__PURE__ */ l("button", {
+			}), y == null ? null : /* @__PURE__ */ f("button", {
 				type: "button",
 				className: r,
 				onClick: y,

package/lib/esm/auth/login/PasskeyLoginForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasskeyLoginForm.js","names":[],"sources":["../../../../src/auth/login/PasskeyLoginForm.tsx"],"sourcesContent":["/* eslint-disable no-ternary */\nimport {\n  useCallback,\n  useEffect,\n  useState,\n  type FormEvent,\n  type JSX,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { FormError } from '@plumile/ui/atomic/molecules/form_error/FormError.js';\nimport { FormField } from '@plumile/ui/atomic/molecules/form_field/FormField.js';\nimport { Form } from '@plumile/ui/atomic/molecules/form/Form.js';\n\nimport type { UseAuthReturn } from '../../hooks/useAuth.js';\n\nimport * as styles from './loginPage.css.js';\n\ntype Props = {\n  auth: Pick<\n    UseAuthReturn,\n    | 'loginWithPasskey'\n    | 'isLoading'\n    | 'error'\n    | 'emailHint'\n    | 'nextStep'\n    | 'beginAuthentication'\n    | 'lockedUntil'\n    | 'availableMethods'\n  >;\n  onSuccess: () => void;\n  defaultEmail?: string;\n  isAttemptingPasskey?: boolean;\n  onShowMethods?: () => void;\n};\n\nexport const PasskeyLoginForm = ({\n  auth,\n  onSuccess,\n  defaultEmail,\n  isAttemptingPasskey = false,\n  onShowMethods,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const [email, setEmail] = useState(auth.emailHint ?? '');\n  const [localError, setLocalError] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (auth.emailHint != null && auth.emailHint !== '') {\n      setEmail(auth.emailHint);\n    } else if (defaultEmail != null && defaultEmail !== '') {\n      setEmail(defaultEmail);\n    }\n  }, [auth.emailHint, defaultEmail]);\n\n  const handleSubmit = useCallback(\n    async (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      setLocalError(null);\n\n      if (email.trim() === '') {\n        setLocalError(t('auth.passkey.errors.emailRequired'));\n        return;\n      }\n\n      try {\n        const result = await auth.beginAuthentication(email.trim());\n        if (Array.isArray(result.methods) && result.methods.length === 0) {\n          const lockedUntilMessage =\n            result.lockedUntil != null\n              ? t('auth.passkey.errors.lockedWithTime', {\n                  time: new Date(result.lockedUntil).toLocaleString(),\n                })\n              : t('auth.passkey.errors.locked');\n          setLocalError(lockedUntilMessage);\n          return;\n        }\n        if (\n          Array.isArray(result.methods) &&\n          !result.methods.includes('PASSKEY')\n        ) {\n          setLocalError(t('auth.passkey.errors.notAvailable'));\n          return;\n        }\n\n        const status = await auth.loginWithPasskey({ email: email.trim() });\n        if (status === 'success') {\n          onSuccess();\n        }\n      } catch {\n        setLocalError(t('auth.passkey.errors.failed'));\n      }\n    },\n    [auth, email, onSuccess, t],\n  );\n\n  const formError = localError;\n\n  const handleSubmitEvent = useCallback(\n    (event: FormEvent<HTMLFormElement>) => {\n      handleSubmit(event).catch(() => {\n        return undefined;\n      });\n    },\n    [handleSubmit],\n  );\n\n  return (\n    <Form\n      className={styles.formSurface}\n      onSubmit={handleSubmitEvent}\n      noValidate\n      initialFocus=\"first-form-control\"\n    >\n      <div className={styles.stack}>\n        <p className={styles.helper}>{t('auth.passkey.helper')}</p>\n        {formError != null ? <FormError>{formError}</FormError> : null}\n        <FormField\n          label={t('auth.passkey.form.emailLabel')}\n          name=\"passkey-email\"\n          type=\"email\"\n          value={email}\n          onChange={(event) => {\n            setEmail(event.target.value);\n            setLocalError(null);\n          }}\n          placeholder={t('auth.passkey.form.emailPlaceholder')}\n          autoComplete=\"email\"\n          required\n        />\n      </div>\n      <div className={styles.actionsRow}>\n        <Button type=\"submit\" variant=\"primary\" isLoading={auth.isLoading}>\n          {isAttemptingPasskey\n            ? t('auth.passkey.actions.submitting')\n            : t('auth.passkey.actions.submit')}\n        </Button>\n        {onShowMethods != null ? (\n          <button\n            type=\"button\"\n            className={styles.inlineLink}\n            onClick={onShowMethods}\n          >\n            {t('auth.passkey.actions.showMethods')}\n          </button>\n        ) : null}\n      </div>\n    </Form>\n  );\n};\n"],"mappings":";;;;;;;;;AAqCA,IAAa,KAAoB,EAC/B,SACA,cACA,iBACA,yBAAsB,IACtB,uBACwB;CACxB,IAAM,EAAE,SAAM,EAA8B,GACtC,CAAC,GAAO,KAAY,EAAS,EAAK,aAAa,EAAE,GACjD,CAAC,GAAY,KAAiB,EAAwB,IAAI;CAEhE,QAAgB;EACd,AAAI,EAAK,aAAa,QAAQ,EAAK,cAAc,KAC/C,EAAS,EAAK,SAAS,IACd,KAAgB,QAAQ,MAAiB,MAClD,EAAS,CAAY;CAEzB,GAAG,CAAC,EAAK,WAAW,CAAY,CAAC;CAEjC,IAAM,IAAe,EACnB,OAAO,MAAsC;EAI3C,IAHA,EAAM,eAAe,GACrB,EAAc,IAAI,GAEd,EAAM,KAAK,MAAM,IAAI;GACvB,EAAc,EAAE,mCAAmC,CAAC;GACpD;EACF;EAEA,IAAI;GACF,IAAM,IAAS,MAAM,EAAK,oBAAoB,EAAM,KAAK,CAAC;GAC1D,IAAI,MAAM,QAAQ,EAAO,OAAO,KAAK,EAAO,QAAQ,WAAW,GAAG;IAChE,IAAM,IACJ,EAAO,eAAe,OAIlB,EAAE,4BAA4B,IAH9B,EAAE,sCAAsC,EACtC,MAAM,IAAI,KAAK,EAAO,WAAW,CAAC,CAAC,eAAe,EACpD,CAAC;IAEP,EAAc,CAAkB;IAChC;GACF;GACA,IACE,MAAM,QAAQ,EAAO,OAAO,KAC5B,CAAC,EAAO,QAAQ,SAAS,SAAS,GAClC;IACA,EAAc,EAAE,kCAAkC,CAAC;IACnD;GACF;GAGA,AAAI,MADiB,EAAK,iBAAiB,EAAE,OAAO,EAAM,KAAK,EAAE,CAAC,MACnD,aACb,EAAU;EAEd,QAAQ;GACN,EAAc,EAAE,4BAA4B,CAAC;EAC/C;CACF,GACA;EAAC;EAAM;EAAO;EAAW;CAAC,CAC5B,GAEM,IAAY,GAEZ,IAAoB,GACvB,MAAsC;EACrC,EAAa,CAAK,CAAC,CAAC,YAAY,CAEhC,CAAC;CACH,GACA,CAAC,CAAY,CACf;CAEA,OACE,kBAAC,GAAD;EACE,WAAW;EACX,UAAU;EACV,YAAA;EACA,cAAa;EAJf,UAAA,CAME,kBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA;IACE,kBAAC,KAAD;KAAG,WAAW;KAAgB,UAAA,EAAE,qBAAqB;IAAK,CAAA;IACzD,KAAa,OAA4C,OAArC,kBAAC,GAAD,EAAA,UAAY,EAAqB,CAAA;IACtD,kBAAC,GAAD;KACE,OAAO,EAAE,8BAA8B;KACvC,MAAK;KACL,MAAK;KACL,OAAO;KACP,WAAW,MAAU;MAEnB,AADA,EAAS,EAAM,OAAO,KAAK,GAC3B,EAAc,IAAI;KACpB;KACA,aAAa,EAAE,oCAAoC;KACnD,cAAa;KACb,UAAA;IACD,CAAA;GACE;EACL,CAAA,GAAA,kBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA,CACE,kBAAC,GAAD;IAAQ,MAAK;IAAS,SAAQ;IAAU,WAAW,EAAK;IACrD,UACG,EADH,IACK,oCACA,6BAA6B;GAC7B,CAAA,GACP,KAAiB,OAQd,OAPF,kBAAC,UAAD;IACE,MAAK;IACL,WAAW;IACX,SAAS;IAER,UAAA,EAAE,kCAAkC;GAC/B,CAAA,CAEP;EACD,CAAA,CAAA;;AAEV"}
+{"version":3,"file":"PasskeyLoginForm.js","names":[],"sources":["../../../../src/auth/login/PasskeyLoginForm.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useState,\n  type FormEvent,\n  type JSX,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button } from '@plumile/ui/button';\nimport { FormError, FormField, Form } from '@plumile/ui';\n\nimport type { UseAuthReturn } from '../../hooks/useAuth.js';\n\nimport * as styles from './loginPage.css.js';\n\ntype Props = {\n  auth: Pick<\n    UseAuthReturn,\n    | 'loginWithPasskey'\n    | 'isLoading'\n    | 'error'\n    | 'emailHint'\n    | 'nextStep'\n    | 'beginAuthentication'\n    | 'lockedUntil'\n    | 'availableMethods'\n  >;\n  onSuccess: () => void;\n  defaultEmail?: string;\n  isAttemptingPasskey?: boolean;\n  onShowMethods?: () => void;\n};\n\nexport const PasskeyLoginForm = ({\n  auth,\n  onSuccess,\n  defaultEmail,\n  isAttemptingPasskey = false,\n  onShowMethods,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const [email, setEmail] = useState(auth.emailHint ?? '');\n  const [localError, setLocalError] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (auth.emailHint != null && auth.emailHint !== '') {\n      setEmail(auth.emailHint);\n    } else if (defaultEmail != null && defaultEmail !== '') {\n      setEmail(defaultEmail);\n    }\n  }, [auth.emailHint, defaultEmail]);\n\n  const handleSubmit = useCallback(\n    async (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      setLocalError(null);\n\n      if (email.trim() === '') {\n        setLocalError(t('auth.passkey.errors.emailRequired'));\n        return;\n      }\n\n      try {\n        const result = await auth.beginAuthentication(email.trim());\n        if (Array.isArray(result.methods) && result.methods.length === 0) {\n          const lockedUntilMessage =\n            result.lockedUntil != null\n              ? t('auth.passkey.errors.lockedWithTime', {\n                  time: new Date(result.lockedUntil).toLocaleString(),\n                })\n              : t('auth.passkey.errors.locked');\n          setLocalError(lockedUntilMessage);\n          return;\n        }\n        if (\n          Array.isArray(result.methods) &&\n          !result.methods.includes('PASSKEY')\n        ) {\n          setLocalError(t('auth.passkey.errors.notAvailable'));\n          return;\n        }\n\n        const status = await auth.loginWithPasskey({ email: email.trim() });\n        if (status === 'success') {\n          onSuccess();\n        }\n      } catch {\n        setLocalError(t('auth.passkey.errors.failed'));\n      }\n    },\n    [auth, email, onSuccess, t],\n  );\n\n  const formError = localError;\n\n  const handleSubmitEvent = useCallback(\n    (event: FormEvent<HTMLFormElement>) => {\n      handleSubmit(event).catch(() => {\n        return undefined;\n      });\n    },\n    [handleSubmit],\n  );\n\n  return (\n    <Form\n      className={styles.formSurface}\n      onSubmit={handleSubmitEvent}\n      noValidate\n      initialFocus=\"first-form-control\"\n    >\n      <div className={styles.stack}>\n        <p className={styles.helper}>{t('auth.passkey.helper')}</p>\n        {formError != null ? <FormError>{formError}</FormError> : null}\n        <FormField\n          label={t('auth.passkey.form.emailLabel')}\n          name=\"passkey-email\"\n          type=\"email\"\n          value={email}\n          onChange={(event) => {\n            setEmail(event.target.value);\n            setLocalError(null);\n          }}\n          placeholder={t('auth.passkey.form.emailPlaceholder')}\n          autoComplete=\"email\"\n          required\n        />\n      </div>\n      <div className={styles.actionsRow}>\n        <Button type=\"submit\" variant=\"solid\" loading={auth.isLoading}>\n          {isAttemptingPasskey\n            ? t('auth.passkey.actions.submitting')\n            : t('auth.passkey.actions.submit')}\n        </Button>\n        {onShowMethods != null ? (\n          <button\n            type=\"button\"\n            className={styles.inlineLink}\n            onClick={onShowMethods}\n          >\n            {t('auth.passkey.actions.showMethods')}\n          </button>\n        ) : null}\n      </div>\n    </Form>\n  );\n};\n"],"mappings":";;;;;;;AAkCA,IAAa,KAAoB,EAC/B,SACA,cACA,iBACA,yBAAsB,IACtB,uBACwB;CACxB,IAAM,EAAE,SAAM,EAA8B,GACtC,CAAC,GAAO,KAAY,EAAS,EAAK,aAAa,EAAE,GACjD,CAAC,GAAY,KAAiB,EAAwB,IAAI;CAEhE,QAAgB;EACd,AAAI,EAAK,aAAa,QAAQ,EAAK,cAAc,KAC/C,EAAS,EAAK,SAAS,IACd,KAAgB,QAAQ,MAAiB,MAClD,EAAS,CAAY;CAEzB,GAAG,CAAC,EAAK,WAAW,CAAY,CAAC;CAEjC,IAAM,IAAe,EACnB,OAAO,MAAsC;EAI3C,IAHA,EAAM,eAAe,GACrB,EAAc,IAAI,GAEd,EAAM,KAAK,MAAM,IAAI;GACvB,EAAc,EAAE,mCAAmC,CAAC;GACpD;EACF;EAEA,IAAI;GACF,IAAM,IAAS,MAAM,EAAK,oBAAoB,EAAM,KAAK,CAAC;GAC1D,IAAI,MAAM,QAAQ,EAAO,OAAO,KAAK,EAAO,QAAQ,WAAW,GAAG;IAChE,IAAM,IACJ,EAAO,eAAe,OAIlB,EAAE,4BAA4B,IAH9B,EAAE,sCAAsC,EACtC,MAAM,IAAI,KAAK,EAAO,WAAW,CAAC,CAAC,eAAe,EACpD,CAAC;IAEP,EAAc,CAAkB;IAChC;GACF;GACA,IACE,MAAM,QAAQ,EAAO,OAAO,KAC5B,CAAC,EAAO,QAAQ,SAAS,SAAS,GAClC;IACA,EAAc,EAAE,kCAAkC,CAAC;IACnD;GACF;GAGA,AAAI,MADiB,EAAK,iBAAiB,EAAE,OAAO,EAAM,KAAK,EAAE,CAAC,MACnD,aACb,EAAU;EAEd,QAAQ;GACN,EAAc,EAAE,4BAA4B,CAAC;EAC/C;CACF,GACA;EAAC;EAAM;EAAO;EAAW;CAAC,CAC5B,GAEM,IAAY,GAEZ,IAAoB,GACvB,MAAsC;EACrC,EAAa,CAAK,CAAC,CAAC,YAAY,CAEhC,CAAC;CACH,GACA,CAAC,CAAY,CACf;CAEA,OACE,kBAAC,GAAD;EACE,WAAW;EACX,UAAU;EACV,YAAA;EACA,cAAa;EAJf,UAAA,CAME,kBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA;IACE,kBAAC,KAAD;KAAG,WAAW;KAAgB,UAAA,EAAE,qBAAqB;IAAK,CAAA;IACzD,KAAa,OAA4C,OAArC,kBAAC,GAAD,EAAA,UAAY,EAAqB,CAAA;IACtD,kBAAC,GAAD;KACE,OAAO,EAAE,8BAA8B;KACvC,MAAK;KACL,MAAK;KACL,OAAO;KACP,WAAW,MAAU;MAEnB,AADA,EAAS,EAAM,OAAO,KAAK,GAC3B,EAAc,IAAI;KACpB;KACA,aAAa,EAAE,oCAAoC;KACnD,cAAa;KACb,UAAA;IACD,CAAA;GACE;EACL,CAAA,GAAA,kBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA,CACE,kBAAC,GAAD;IAAQ,MAAK;IAAS,SAAQ;IAAQ,SAAS,EAAK;IACjD,UACG,EADH,IACK,oCACA,6BAA6B;GAC7B,CAAA,GACP,KAAiB,OAQd,OAPF,kBAAC,UAAD;IACE,MAAK;IACL,WAAW;IACX,SAAS;IAER,UAAA,EAAE,kCAAkC;GAC/B,CAAA,CAEP;EACD,CAAA,CAAA;;AAEV"}

package/lib/esm/auth/login/PasswordLoginPanel.js

@@ -2,31 +2,31 @@ import { actionsRow as e, formSurface as t, inlineLink as n } from "./loginPage.
 import { AuthPanel as r } from "./AuthPanel.js";
 import { useBackofficeReactTranslation as i } from "../../i18n/useBackofficeReactTranslation.js";
 import { OidcButtons as a } from "./OidcButtons.js";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { LoginForm as c } from "@plumile/ui/atomic/organisms/login_form/LoginForm.js";
+import { LoginForm as o } from "@plumile/ui";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/auth/login/PasswordLoginPanel.tsx
 var l = ({ auth: l, defaultEmail: u, onForgotPassword: d, onSuccess: f, providers: p }) => {
 	let { t: m } = i();
-	return /* @__PURE__ */ o(r, {
+	return /* @__PURE__ */ s(r, {
 		title: m("auth.passwordLogin.title"),
-		children: /* @__PURE__ */ s("div", {
+		children: /* @__PURE__ */ c("div", {
 			className: t,
 			children: [
-				/* @__PURE__ */ o(c, {
+				/* @__PURE__ */ s(o, {
 					auth: l,
 					onSuccess: f,
 					defaultEmail: u
 				}),
-				/* @__PURE__ */ o("div", {
+				/* @__PURE__ */ s("div", {
 					className: e,
-					children: /* @__PURE__ */ o("button", {
+					children: /* @__PURE__ */ s("button", {
 						type: "button",
 						className: n,
 						onClick: d,
 						children: m("auth.passwordLogin.forgotPassword")
 					})
 				}),
-				/* @__PURE__ */ o(a, { providers: p })
+				/* @__PURE__ */ s(a, { providers: p })
 			]
 		})
 	});

package/lib/esm/auth/login/PasswordLoginPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordLoginPanel.js","names":[],"sources":["../../../../src/auth/login/PasswordLoginPanel.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { LoginForm } from '@plumile/ui/atomic/organisms/login_form/LoginForm.js';\nimport { type LoginFormAuthAdapter } from '@plumile/ui/atomic/organisms/login_form/useLoginForm.js';\n\nimport type { OidcProviderKind } from '../../modules/sharedSchemaTypes.js';\n\nimport { AuthPanel } from './AuthPanel.js';\nimport { OidcButtons } from './OidcButtons.js';\nimport * as styles from './loginPage.css.js';\n\ntype Props = {\n  auth: LoginFormAuthAdapter;\n  defaultEmail: string;\n  onForgotPassword: () => void;\n  onSuccess: () => void;\n  providers: readonly OidcProviderKind[];\n};\n\nexport const PasswordLoginPanel = ({\n  auth,\n  defaultEmail,\n  onForgotPassword,\n  onSuccess,\n  providers,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  return (\n    <AuthPanel title={t('auth.passwordLogin.title')}>\n      <div className={styles.formSurface}>\n        <LoginForm\n          auth={auth}\n          onSuccess={onSuccess}\n          defaultEmail={defaultEmail}\n        />\n        <div className={styles.actionsRow}>\n          <button\n            type=\"button\"\n            className={styles.inlineLink}\n            onClick={onForgotPassword}\n          >\n            {t('auth.passwordLogin.forgotPassword')}\n          </button>\n        </div>\n        <OidcButtons providers={providers} />\n      </div>\n    </AuthPanel>\n  );\n};\n"],"mappings":";;;;;;;AAoBA,IAAa,KAAsB,EACjC,SACA,iBACA,qBACA,cACA,mBACwB;CACxB,IAAM,EAAE,SAAM,EAA8B;CAC5C,OACE,kBAAC,GAAD;EAAW,OAAO,EAAE,0BAA0B;EAC5C,UAAA,kBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA;IACE,kBAAC,GAAD;KACQ;KACK;KACG;IACf,CAAA;IACD,kBAAC,OAAD;KAAK,WAAW;KACd,UAAA,kBAAC,UAAD;MACE,MAAK;MACL,WAAW;MACX,SAAS;MAER,UAAA,EAAE,mCAAmC;KAChC,CAAA;IACL,CAAA;IACL,kBAAC,GAAD,EAAwB,aAAY,CAAA;GACjC;;CACI,CAAA;AAEf"}
+{"version":3,"file":"PasswordLoginPanel.js","names":[],"sources":["../../../../src/auth/login/PasswordLoginPanel.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { LoginForm, type LoginFormAuthAdapter } from '@plumile/ui';\n\nimport type { OidcProviderKind } from '../../modules/sharedSchemaTypes.js';\n\nimport { AuthPanel } from './AuthPanel.js';\nimport { OidcButtons } from './OidcButtons.js';\nimport * as styles from './loginPage.css.js';\n\ntype Props = {\n  auth: LoginFormAuthAdapter;\n  defaultEmail: string;\n  onForgotPassword: () => void;\n  onSuccess: () => void;\n  providers: readonly OidcProviderKind[];\n};\n\nexport const PasswordLoginPanel = ({\n  auth,\n  defaultEmail,\n  onForgotPassword,\n  onSuccess,\n  providers,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  return (\n    <AuthPanel title={t('auth.passwordLogin.title')}>\n      <div className={styles.formSurface}>\n        <LoginForm\n          auth={auth}\n          onSuccess={onSuccess}\n          defaultEmail={defaultEmail}\n        />\n        <div className={styles.actionsRow}>\n          <button\n            type=\"button\"\n            className={styles.inlineLink}\n            onClick={onForgotPassword}\n          >\n            {t('auth.passwordLogin.forgotPassword')}\n          </button>\n        </div>\n        <OidcButtons providers={providers} />\n      </div>\n    </AuthPanel>\n  );\n};\n"],"mappings":";;;;;;;AAmBA,IAAa,KAAsB,EACjC,SACA,iBACA,qBACA,cACA,mBACwB;CACxB,IAAM,EAAE,SAAM,EAA8B;CAC5C,OACE,kBAAC,GAAD;EAAW,OAAO,EAAE,0BAA0B;EAC5C,UAAA,kBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA;IACE,kBAAC,GAAD;KACQ;KACK;KACG;IACf,CAAA;IACD,kBAAC,OAAD;KAAK,WAAW;KACd,UAAA,kBAAC,UAAD;MACE,MAAK;MACL,WAAW;MACX,SAAS;MAER,UAAA,EAAE,mCAAmC;KAChC,CAAA;IACL,CAAA;IACL,kBAAC,GAAD,EAAwB,aAAY,CAAA;GACjC;;CACI,CAAA;AAEf"}

package/lib/esm/auth/login/loginPage.css.js

@@ -1,6 +1,6 @@
 /* empty css                         */
 //#region src/auth/login/loginPage.css.ts
-var e = "txvbqb5b1 txvbqb6bf txvbqb6hj", t = "txvbqb5b1 txvbqb6bf txvbqblor", n = "txvbqbe2 txvbqb6ct txvbqb1ou txvbqb1o3", r = "txvbqb2cx txvbqbe2 txvbqb5b1 txvbqb6gz txvbqbalv txvbqb8ft", i = "txvbqbb0 txvbqb7tv txvbqb1c8 txvbqbn3 txvbqbg0", a = "txvbqb2cx txvbqb5b1 txvbqb1ch txvbqb6h9 txvbqb8e5 txvbqbalb", o = "w8yhmy0 txvbqb8i txvbqbk4 txvbqbmq txvbqbeo txvbqbv txvbqb1cs txvbqbeu3 txvbqb3f txvbqb7h txvbqb76 txvbqb7t txvbqbos9 txvbqbqbd", s = "txvbqb12g txvbqb120 txvbqb138 txvbqb12x txvbqbigx txvbqbj6r", c = "txvbqb5b1 txvbqb6bf txvbqb6hj", l = "txvbqblor", u = "txvbqb1ou txvbqb6dn txvbqb1ct txvbqbeo txvbqb1l0", d = "txvbqball", f = "w8yhmy1 txvbqbiz txvbqblc txvbqbms txvbqbeo txvbqbay txvbqb7h txvbqb75 txvbqb7t";
+var e = "txvbqb5lr txvbqb6m5 txvbqb6s9", t = "txvbqb5lr txvbqb6m5 txvbqbl9n", n = "txvbqbe7 txvbqb6nj txvbqb1rt txvbqb1r2", r = "txvbqb2nn txvbqbe7 txvbqb5lr txvbqb6rp txvbqbawl txvbqb8qj", i = "txvbqbb5 txvbqb84l txvbqb1cl txvbqbn8 txvbqbg5", a = "txvbqb2nn txvbqb5lr txvbqb1cu txvbqb6rz txvbqb8ov txvbqbaw1", o = "w8yhmy0 txvbqb8n txvbqbk9 txvbqbmv txvbqbet txvbqbv txvbqb1d5 txvbqbf4t txvbqb3f txvbqb7n txvbqb78 txvbqb7y txvbqbod5 txvbqbpw9", s = "txvbqb12r txvbqb12b txvbqb13j txvbqb138 txvbqbirn txvbqbjhh", c = "txvbqb5lr txvbqb6m5 txvbqb6s9", l = "txvbqbl9n", u = "txvbqb1rt txvbqb6od txvbqb1d6 txvbqbet txvbqb1nz", d = "txvbqbawb", f = "w8yhmy1 txvbqbj4 txvbqblh txvbqbmx txvbqbet txvbqbb3 txvbqb7n txvbqb76 txvbqb7y";
 //#endregion
 export { a as actionsRow, c as block, f as brandGhostButton, r as divider, i as dividerLine, d as footer, t as formSurface, l as fullWidth, n as helper, o as inlineLink, s as panel, u as panelTitle, e as stack };
 

package/lib/esm/auth/login/loginPage.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"loginPage.css.js","names":[],"sources":["../../../../src/auth/login/loginPage.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '@plumile/ui/theme/sprinkles.css.js';\nimport { vars } from '@plumile/ui/theme/themeContract.css.js';\n\nexport const stack = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n});\n\nexport const formSurface = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  width: 'full',\n});\n\nexport const helper = sprinkles({\n  color: 'textSecondary',\n  fontSize: 'sm',\n  margin: 0,\n  lineHeight: 1.6,\n});\n\nexport const divider = sprinkles({\n  alignItems: 'center',\n  color: 'textSecondary',\n  display: 'flex',\n  gap: 2,\n  marginTop: 5,\n  marginBottom: 3,\n});\n\nexport const dividerLine = sprinkles({\n  backgroundColor: 'tonePrimaryBorder',\n  height: 'px',\n  flex: 1,\n  borderRadius: 'full',\n  opacity: 35,\n});\n\nexport const actionsRow = sprinkles({\n  alignItems: 'center',\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 3,\n  justifyContent: 'space-between',\n  marginTop: 3,\n});\n\nexport const inlineLink = style([\n  sprinkles({\n    backgroundColor: 'transparent',\n    borderWidth: 0,\n    borderStyle: 'none',\n    color: 'tonePrimaryText',\n    cursor: 'pointer',\n    fontWeight: 'semibold',\n    padding: 0,\n    textDecoration: 'none',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  stateSprinkles({\n    color: { hover: 'tonePrimaryText' },\n    textDecoration: { hover: 'underline' },\n  }),\n]);\n\nexport const panel = sprinkles({\n  borderTopLeftRadius: 'none',\n  borderTopRightRadius: 'none',\n  borderBottomLeftRadius: '2xl',\n  borderBottomRightRadius: '2xl',\n  paddingX: 6,\n  paddingY: 6,\n});\n\nexport const block = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n});\n\nexport const fullWidth = sprinkles({\n  width: 'full',\n});\n\nexport const panelTitle = sprinkles({\n  margin: 0,\n  fontSize: 'xl',\n  fontWeight: 'bold',\n  color: 'tonePrimaryText',\n  letterSpacing: 'tight',\n});\n\nexport const footer = sprinkles({\n  marginTop: 4,\n});\n\nexport const brandGhostButton = style([\n  sprinkles({\n    borderColor: 'tonePrimaryBorder',\n    borderWidth: 'px',\n    borderStyle: 'solid',\n    color: 'tonePrimaryText',\n    backgroundColor: 'tonePrimarySurface',\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover:not(:disabled)': {\n        backgroundColor: vars.colors.tonePrimarySurface,\n        color: vars.colors.tonePrimaryText,\n        borderColor: vars.colors.tonePrimaryBorder,\n      },\n    },\n  },\n]);\n"],"mappings":""}
+{"version":3,"file":"loginPage.css.js","names":[],"sources":["../../../../src/auth/login/loginPage.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles, vars } from '@plumile/ui/theme';\n\nexport const stack = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n});\n\nexport const formSurface = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  width: 'full',\n});\n\nexport const helper = sprinkles({\n  color: 'textSecondary',\n  fontSize: 'sm',\n  margin: 0,\n  lineHeight: 1.6,\n});\n\nexport const divider = sprinkles({\n  alignItems: 'center',\n  color: 'textSecondary',\n  display: 'flex',\n  gap: 2,\n  marginTop: 5,\n  marginBottom: 3,\n});\n\nexport const dividerLine = sprinkles({\n  backgroundColor: 'tonePrimaryBorder',\n  height: 'px',\n  flex: 1,\n  borderRadius: 'full',\n  opacity: 35,\n});\n\nexport const actionsRow = sprinkles({\n  alignItems: 'center',\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 3,\n  justifyContent: 'space-between',\n  marginTop: 3,\n});\n\nexport const inlineLink = style([\n  sprinkles({\n    backgroundColor: 'transparent',\n    borderWidth: 0,\n    borderStyle: 'none',\n    color: 'tonePrimaryText',\n    cursor: 'pointer',\n    fontWeight: 'semibold',\n    padding: 0,\n    textDecoration: 'none',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  stateSprinkles({\n    color: { hover: 'tonePrimaryText' },\n    textDecoration: { hover: 'underline' },\n  }),\n]);\n\nexport const panel = sprinkles({\n  borderTopLeftRadius: 'none',\n  borderTopRightRadius: 'none',\n  borderBottomLeftRadius: '2xl',\n  borderBottomRightRadius: '2xl',\n  paddingX: 6,\n  paddingY: 6,\n});\n\nexport const block = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n});\n\nexport const fullWidth = sprinkles({\n  width: 'full',\n});\n\nexport const panelTitle = sprinkles({\n  margin: 0,\n  fontSize: 'xl',\n  fontWeight: 'bold',\n  color: 'tonePrimaryText',\n  letterSpacing: 'tight',\n});\n\nexport const footer = sprinkles({\n  marginTop: 4,\n});\n\nexport const brandGhostButton = style([\n  sprinkles({\n    borderColor: 'tonePrimaryBorder',\n    borderWidth: 'px',\n    borderStyle: 'solid',\n    color: 'tonePrimaryText',\n    backgroundColor: 'tonePrimarySurface',\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover:not(:disabled)': {\n        backgroundColor: vars.colors.tonePrimarySurface,\n        color: vars.colors.tonePrimaryText,\n        borderColor: vars.colors.tonePrimaryBorder,\n      },\n    },\n  },\n]);\n"],"mappings":""}

package/lib/esm/auth/pages/AcceptInvitationScreen.js

@@ -1,122 +1,127 @@
-import { formSurface as e, helper as t, stack as n } from "../login/loginPage.css.js";
-import { AuthPanel as r } from "../login/AuthPanel.js";
-import { useBackofficeReactTranslation as i } from "../../i18n/useBackofficeReactTranslation.js";
-import { MfaChallengeForm as a } from "../login/MfaChallengeForm.js";
-import { useCallback as o, useMemo as s, useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { Button as d } from "@plumile/ui/atomic/atoms/button/Button.js";
-import { FormError as f } from "@plumile/ui/atomic/molecules/form_error/FormError.js";
-import { FormField as p } from "@plumile/ui/atomic/molecules/form_field/FormField.js";
-import { Form as m } from "@plumile/ui/atomic/molecules/form/Form.js";
-import { AuthLayout as h } from "@plumile/ui/atomic/templates/auth_layout/AuthLayout.js";
+import { formSurface as e, helper as t } from "../login/loginPage.css.js";
+import { AuthPanel as n } from "../login/AuthPanel.js";
+import { useBackofficeReactTranslation as r } from "../../i18n/useBackofficeReactTranslation.js";
+import { MfaChallengeForm as i } from "../login/MfaChallengeForm.js";
+import { useCallback as a, useMemo as o, useState as s } from "react";
+import { AuthLayout as c, Form as l, FormError as u, FormField as d } from "@plumile/ui";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Button as m } from "@plumile/ui/button";
 //#region src/auth/pages/AcceptInvitationScreen.tsx
-var g = ({ auth: g, onSuccessRedirect: _, onBackToLogin: v, token: y }) => {
-	let { t: b } = i(), { acceptInvitation: x } = g, [S, C] = c("idle"), [w, T] = c(""), [E, D] = c(""), [O, k] = c(!1), [A, j] = c(null), M = s(() => y ?? (typeof window > "u" ? "" : new URLSearchParams(window.location.search).get("token") ?? ""), [y]), N = o((e) => {
-		if (e.preventDefault(), M === "") {
-			j(b("auth.acceptInvitation.errors.missingToken")), C("error");
+var h = ({ auth: h, onSuccessRedirect: g, onBackToLogin: _, token: v }) => {
+	let { t: y } = r(), { acceptInvitation: b } = h, [x, S] = s("idle"), [C, w] = s(""), [T, E] = s(""), [D, O] = s(!1), [k, A] = s(null), [j, M] = s(null), N = o(() => v ?? (typeof window > "u" ? "" : new URLSearchParams(window.location.search).get("token") ?? ""), [v]), P = a((e) => {
+		if (e.preventDefault(), M(null), N === "") {
+			A(y("auth.acceptInvitation.errors.missingToken")), S("error");
 			return;
 		}
-		if (w !== E) {
-			j(b("auth.acceptInvitation.errors.passwordMismatch")), C("error");
+		if (C === "") {
+			A(y("auth.acceptInvitation.errors.passwordPolicyViolation")), M("password"), S("error");
 			return;
 		}
-		C("pending"), j(null), k(!0), x({
-			token: M,
-			password: w,
-			passwordConfirmation: E
+		if (T === "") {
+			A(y("auth.acceptInvitation.errors.passwordMismatch")), M("passwordConfirmation"), S("error");
+			return;
+		}
+		if (C !== T) {
+			A(y("auth.acceptInvitation.errors.passwordMismatch")), M("passwordConfirmation"), S("error");
+			return;
+		}
+		S("pending"), A(null), O(!0), b({
+			token: N,
+			password: C,
+			passwordConfirmation: T
 		}).then((e) => {
 			if (e === "mfa-required") {
-				C("mfa");
+				S("mfa");
 				return;
 			}
-			C("completed"), _();
+			S("completed"), g();
 		}).catch(() => {
-			C("error"), j(b("auth.acceptInvitation.errors.default"));
+			S("error"), A(y("auth.acceptInvitation.errors.default"));
 		}).finally(() => {
-			k(!1);
+			O(!1);
 		});
 	}, [
-		x,
-		_,
-		w,
-		E,
-		M,
-		b
-	]), P = o(() => {
-		C("completed"), _();
-	}, [_]), F = o(() => {
-		C("idle"), j(null), k(!1);
+		b,
+		g,
+		C,
+		T,
+		N,
+		y
+	]), F = a(() => {
+		S("completed"), g();
+	}, [g]), I = a(() => {
+		S("idle"), A(null), M(null), O(!1);
 	}, []);
-	if (S === "mfa") return /* @__PURE__ */ l(h, {
-		title: b("auth.acceptInvitation.mfaTitle"),
-		subtitle: b("auth.acceptInvitation.mfaSubtitle"),
-		children: /* @__PURE__ */ l(a, {
-			auth: g,
-			onSuccess: P,
+	if (x === "mfa") return /* @__PURE__ */ f(c, {
+		title: y("auth.acceptInvitation.mfaTitle"),
+		subtitle: y("auth.acceptInvitation.mfaSubtitle"),
+		children: /* @__PURE__ */ f(i, {
+			auth: h,
+			onSuccess: F,
 			onBack: () => {
-				g.reset(), F();
+				h.reset(), I();
 			}
 		})
 	});
-	let I;
-	return I = S === "completed" ? /* @__PURE__ */ l("div", {
-		className: n,
-		children: /* @__PURE__ */ l("p", {
-			className: t,
-			children: b("auth.acceptInvitation.status.success")
-		})
-	}) : /* @__PURE__ */ l(r, {
-		description: b("auth.acceptInvitation.subtitle"),
-		children: /* @__PURE__ */ u(m, {
+	let L;
+	return L = x === "completed" ? /* @__PURE__ */ f(n, { children: /* @__PURE__ */ f("p", {
+		className: t,
+		children: y("auth.acceptInvitation.status.success")
+	}) }) : /* @__PURE__ */ f(n, {
+		description: y("auth.acceptInvitation.subtitle"),
+		children: /* @__PURE__ */ p(l, {
 			className: e,
-			onSubmit: N,
+			onSubmit: P,
 			noValidate: !0,
 			initialFocus: "first-form-control",
 			children: [
-				A == null ? null : /* @__PURE__ */ l(f, { children: A }),
-				/* @__PURE__ */ l(p, {
-					label: b("auth.acceptInvitation.form.passwordLabel"),
+				k != null && j == null ? /* @__PURE__ */ f(u, { children: k }) : null,
+				/* @__PURE__ */ f(d, {
+					label: y("auth.acceptInvitation.form.passwordLabel"),
+					error: j === "password" ? k : null,
 					name: "password",
 					type: "password",
-					value: w,
+					value: C,
 					onChange: (e) => {
-						T(e.target.value), j(null), S === "error" && C("idle");
+						w(e.target.value), A(null), M(null), x === "error" && S("idle");
 					},
-					placeholder: b("auth.acceptInvitation.form.passwordPlaceholder"),
+					placeholder: y("auth.acceptInvitation.form.passwordPlaceholder"),
 					autoComplete: "new-password",
 					required: !0
 				}),
-				/* @__PURE__ */ l(p, {
-					label: b("auth.acceptInvitation.form.confirmLabel"),
+				/* @__PURE__ */ f(d, {
+					label: y("auth.acceptInvitation.form.confirmLabel"),
+					error: j === "passwordConfirmation" ? k : null,
 					name: "password-confirmation",
 					type: "password",
-					value: E,
+					value: T,
 					onChange: (e) => {
-						D(e.target.value), j(null), S === "error" && C("idle");
+						E(e.target.value), A(null), M(null), x === "error" && S("idle");
 					},
-					placeholder: b("auth.acceptInvitation.form.confirmPlaceholder"),
+					placeholder: y("auth.acceptInvitation.form.confirmPlaceholder"),
 					autoComplete: "new-password",
 					required: !0
 				}),
-				/* @__PURE__ */ l(d, {
+				/* @__PURE__ */ f(m, {
 					type: "submit",
-					isLoading: O,
-					children: b(S === "pending" ? "auth.acceptInvitation.status.workingButton" : "auth.acceptInvitation.form.submit")
+					loading: D,
+					children: y(x === "pending" ? "auth.acceptInvitation.status.workingButton" : "auth.acceptInvitation.form.submit")
 				}),
-				/* @__PURE__ */ l(d, {
+				/* @__PURE__ */ f(m, {
 					type: "button",
-					variant: "secondary",
-					onClick: v,
-					children: b("auth.acceptInvitation.actions.backToLogin")
+					variant: "soft",
+					onClick: _,
+					tone: "neutral",
+					children: y("auth.acceptInvitation.actions.backToLogin")
 				})
 			]
 		})
-	}), /* @__PURE__ */ l(h, {
-		title: b("auth.acceptInvitation.title"),
-		children: I
+	}), /* @__PURE__ */ f(c, {
+		title: y("auth.acceptInvitation.title"),
+		children: L
 	});
 };
 //#endregion
-export { g as AcceptInvitationScreen };
+export { h as AcceptInvitationScreen };
 
 //# sourceMappingURL=AcceptInvitationScreen.js.map