@plumile/backoffice-react 0.1.109 → 0.1.113

package/lib/esm/auth/AuthRefreshNotice.js

@@ -1,7 +1,7 @@
 import { indicator as e, root as t, text as n } from "./authRefreshNotice.css.js";
 import { useSyncExternalStore as r } from "react";
-import { addAuthRefreshStateListener as i, getAuthRefreshState as a } from "@plumile/auth";
-import { cx as o } from "@plumile/ui";
+import { addAuthRefreshStateListener as i, getAuthRefreshState as a } from "@plumile/auth/shortAccessToken.js";
+import { cx as o } from "@plumile/ui/theme/tools.js";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/auth/AuthRefreshNotice.tsx
 var l = (e) => i(() => {

package/lib/esm/auth/AuthRefreshNotice.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthRefreshNotice.js","names":[],"sources":["../../../src/auth/AuthRefreshNotice.tsx"],"sourcesContent":["import { useSyncExternalStore, type JSX } from 'react';\n\nimport {\n  addAuthRefreshStateListener,\n  getAuthRefreshState,\n  type AuthRefreshState,\n} from '@plumile/auth';\nimport { cx } from '@plumile/ui';\n\nimport * as styles from './authRefreshNotice.css.js';\n\nexport type AuthRefreshNoticeMessages = {\n  temporarilyUnavailable: string;\n  sessionExpired: string;\n};\n\nexport type AuthRefreshNoticeProps = {\n  messages: AuthRefreshNoticeMessages;\n  className?: string;\n};\n\nconst subscribe = (onStoreChange: () => void): (() => void) => {\n  return addAuthRefreshStateListener(() => {\n    onStoreChange();\n  });\n};\n\nconst getSnapshot = (): AuthRefreshState => {\n  return getAuthRefreshState();\n};\n\nexport const useAuthRefreshStateSnapshot = (): AuthRefreshState => {\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n};\n\nexport const AuthRefreshNotice = ({\n  messages,\n  className,\n}: AuthRefreshNoticeProps): JSX.Element | null => {\n  const state = useAuthRefreshStateSnapshot();\n\n  if (state.status === 'temporarily_unavailable') {\n    return (\n      <div\n        className={cx(styles.root, className)}\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <span className={styles.indicator} aria-hidden=\"true\" />\n        <p className={styles.text}>{messages.temporarilyUnavailable}</p>\n      </div>\n    );\n  }\n\n  if (state.status === 'session_expired') {\n    return (\n      <div\n        className={cx(styles.root, className)}\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <span className={styles.indicator} aria-hidden=\"true\" />\n        <p className={styles.text}>{messages.sessionExpired}</p>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nexport default AuthRefreshNotice;\n"],"mappings":";;;;;;AAqBA,IAAM,KAAa,MACV,QAAkC;CACvC,GAAe;EACf,EAGE,UACG,GAAqB,EAGjB,UACJ,EAAqB,GAAW,GAAa,EAAY,EAGrD,KAAqB,EAChC,aACA,mBACgD;CAChD,IAAM,IAAQ,GAA6B;CA4B3C,OA1BI,EAAM,WAAW,4BAEjB,kBAAC,OAAD;EACE,WAAW,EAAG,GAAa,EAAU;EACrC,MAAK;EACL,aAAU;YAHZ,CAKE,kBAAC,QAAD;GAAM,WAAW;GAAkB,eAAY;GAAS,CAAA,EACxD,kBAAC,KAAD;GAAG,WAAW;aAAc,EAAS;GAA2B,CAAA,CAC5D;MAIN,EAAM,WAAW,oBAEjB,kBAAC,OAAD;EACE,WAAW,EAAG,GAAa,EAAU;EACrC,MAAK;EACL,aAAU;YAHZ,CAKE,kBAAC,QAAD;GAAM,WAAW;GAAkB,eAAY;GAAS,CAAA,EACxD,kBAAC,KAAD;GAAG,WAAW;aAAc,EAAS;GAAmB,CAAA,CACpD;MAIH"}
+{"version":3,"file":"AuthRefreshNotice.js","names":[],"sources":["../../../src/auth/AuthRefreshNotice.tsx"],"sourcesContent":["import { useSyncExternalStore, type JSX } from 'react';\n\nimport { type AuthRefreshState } from '@plumile/auth/authRefreshState.js';\nimport {\n  addAuthRefreshStateListener,\n  getAuthRefreshState,\n} from '@plumile/auth/shortAccessToken.js';\nimport { cx } from '@plumile/ui/theme/tools.js';\n\nimport * as styles from './authRefreshNotice.css.js';\n\nexport type AuthRefreshNoticeMessages = {\n  temporarilyUnavailable: string;\n  sessionExpired: string;\n};\n\nexport type AuthRefreshNoticeProps = {\n  messages: AuthRefreshNoticeMessages;\n  className?: string;\n};\n\nconst subscribe = (onStoreChange: () => void): (() => void) => {\n  return addAuthRefreshStateListener(() => {\n    onStoreChange();\n  });\n};\n\nconst getSnapshot = (): AuthRefreshState => {\n  return getAuthRefreshState();\n};\n\nexport const useAuthRefreshStateSnapshot = (): AuthRefreshState => {\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n};\n\nexport const AuthRefreshNotice = ({\n  messages,\n  className,\n}: AuthRefreshNoticeProps): JSX.Element | null => {\n  const state = useAuthRefreshStateSnapshot();\n\n  if (state.status === 'temporarily_unavailable') {\n    return (\n      <div\n        className={cx(styles.root, className)}\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <span className={styles.indicator} aria-hidden=\"true\" />\n        <p className={styles.text}>{messages.temporarilyUnavailable}</p>\n      </div>\n    );\n  }\n\n  if (state.status === 'session_expired') {\n    return (\n      <div\n        className={cx(styles.root, className)}\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <span className={styles.indicator} aria-hidden=\"true\" />\n        <p className={styles.text}>{messages.sessionExpired}</p>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nexport default AuthRefreshNotice;\n"],"mappings":";;;;;;AAqBA,IAAM,KAAa,MACV,QAAkC;CACvC,GAAe;EACf,EAGE,UACG,GAAqB,EAGjB,UACJ,EAAqB,GAAW,GAAa,EAAY,EAGrD,KAAqB,EAChC,aACA,mBACgD;CAChD,IAAM,IAAQ,GAA6B;CA4B3C,OA1BI,EAAM,WAAW,4BAEjB,kBAAC,OAAD;EACE,WAAW,EAAG,GAAa,EAAU;EACrC,MAAK;EACL,aAAU;YAHZ,CAKE,kBAAC,QAAD;GAAM,WAAW;GAAkB,eAAY;GAAS,CAAA,EACxD,kBAAC,KAAD;GAAG,WAAW;aAAc,EAAS;GAA2B,CAAA,CAC5D;MAIN,EAAM,WAAW,oBAEjB,kBAAC,OAAD;EACE,WAAW,EAAG,GAAa,EAAU;EACrC,MAAK;EACL,aAAU;YAHZ,CAKE,kBAAC,QAAD;GAAM,WAAW;GAAkB,eAAY;GAAS,CAAA,EACxD,kBAAC,KAAD;GAAG,WAAW;aAAc,EAAS;GAAmB,CAAA,CACpD;MAIH"}

package/lib/esm/auth/authRefreshNotice.css.js

@@ -1,3 +1,4 @@
+/* empty css                                                    */
 /* empty css                                 */
 //#region src/auth/authRefreshNotice.css.ts
 var e = "tc0xii0 txvbqbptp txvbqb9ip txvbqbcp txvbqbaog txvbqb8y txvbqbuwp", t = "tc0xii1", n = "txvbqbfcp";

package/lib/esm/auth/authRefreshNotice.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"authRefreshNotice.css.js","names":[],"sources":["../../../src/auth/authRefreshNotice.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles, vars } from '@plumile/ui';\n\nexport const root = style([\n  sprinkles({\n    position: 'fixed',\n    display: 'flex',\n    alignItems: 'center',\n    gap: 3,\n    fontSize: 'sm',\n    zIndex: 50,\n  }),\n  {\n    left: '16px',\n    right: '16px',\n    bottom: '16px',\n    maxWidth: '720px',\n    margin: '0 auto',\n    padding: '10px 14px',\n    color: vars.colors.text,\n    backgroundColor: vars.colors.white,\n    border: `1px solid ${vars.colors.borderStrong}`,\n    boxShadow: vars.boxShadow.lg,\n  },\n]);\n\nexport const indicator = style({\n  flex: '0 0 auto',\n  width: '8px',\n  height: '8px',\n  borderRadius: '999px',\n  backgroundColor: vars.colors.warning,\n});\n\nexport const text = sprinkles({\n  margin: 0,\n});\n"],"mappings":""}
+{"version":3,"file":"authRefreshNotice.css.js","names":[],"sources":["../../../src/auth/authRefreshNotice.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\nimport { vars } from '@plumile/ui/theme/themeContract.js';\n\nexport const root = style([\n  sprinkles({\n    position: 'fixed',\n    display: 'flex',\n    alignItems: 'center',\n    gap: 3,\n    fontSize: 'sm',\n    zIndex: 50,\n  }),\n  {\n    left: '16px',\n    right: '16px',\n    bottom: '16px',\n    maxWidth: '720px',\n    margin: '0 auto',\n    padding: '10px 14px',\n    color: vars.colors.text,\n    backgroundColor: vars.colors.white,\n    border: `1px solid ${vars.colors.borderStrong}`,\n    boxShadow: vars.boxShadow.lg,\n  },\n]);\n\nexport const indicator = style({\n  flex: '0 0 auto',\n  width: '8px',\n  height: '8px',\n  borderRadius: '999px',\n  backgroundColor: vars.colors.warning,\n});\n\nexport const text = sprinkles({\n  margin: 0,\n});\n"],"mappings":""}

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

@@ -2,24 +2,27 @@ import { actionsRow as e, formSurface as t, helper as n, inlineLink as r } from
 import { AuthPanel as i } from "./AuthPanel.js";
 import { useBackofficeReactTranslation as a } from "../../i18n/useBackofficeReactTranslation.js";
 import { useCallback as o } from "react";
-import { Button as s, Form as c, FormError as l, FormField as u } from "@plumile/ui";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Button as l } from "@plumile/ui/atomic/atoms/button/Button.js";
+import { FormError as u } from "@plumile/ui/atomic/molecules/form_error/FormError.js";
+import { FormField as d } from "@plumile/ui/atomic/molecules/form_field/FormField.js";
+import { Form as f } from "@plumile/ui/atomic/molecules/form/Form.js";
 //#region src/auth/login/EmailCapturePanel.tsx
 var p = ({ email: p, errorMessage: m, isLoading: h, onEmailChange: g, onContinue: _, onForgotPassword: v }) => {
 	let { t: y } = a();
-	return /* @__PURE__ */ d(i, { children: /* @__PURE__ */ f(c, {
+	return /* @__PURE__ */ s(i, { children: /* @__PURE__ */ c(f, {
 		className: t,
 		onSubmit: o((e) => {
 			e.preventDefault(), _();
 		}, [_]),
 		initialFocus: "first-form-control",
 		children: [
-			/* @__PURE__ */ d("p", {
+			/* @__PURE__ */ s("p", {
 				className: n,
 				children: y("auth.emailCapture.description")
 			}),
-			m != null && /* @__PURE__ */ d(l, { children: m }),
-			/* @__PURE__ */ d(u, {
+			m != null && /* @__PURE__ */ s(u, { children: m }),
+			/* @__PURE__ */ s(d, {
 				label: y("auth.emailCapture.emailLabel"),
 				name: "email",
 				type: "email",
@@ -31,14 +34,14 @@ var p = ({ email: p, errorMessage: m, isLoading: h, onEmailChange: g, onContinue
 				autoComplete: "email",
 				required: !0
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ c("div", {
 				className: e,
-				children: [/* @__PURE__ */ d(s, {
+				children: [/* @__PURE__ */ s(l, {
 					type: "submit",
 					variant: "primary",
 					isLoading: h,
 					children: y("auth.emailCapture.continue")
-				}), /* @__PURE__ */ d("button", {
+				}), /* @__PURE__ */ s("button", {
 					type: "button",
 					className: r,
 					onClick: v,

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

@@ -1 +1 @@
-{"version":3,"file":"EmailCapturePanel.js","names":[],"sources":["../../../../src/auth/login/EmailCapturePanel.tsx"],"sourcesContent":["import { useCallback, type FormEvent, type JSX } from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button, Form, FormError, FormField } from '@plumile/ui';\n\nimport { AuthPanel } from './AuthPanel.js';\nimport * as styles from './loginPage.css.js';\n\ntype Props = {\n  email: string;\n  errorMessage: string | null;\n  isLoading: boolean;\n  onEmailChange: (value: string) => void;\n  onContinue: () => void;\n  onForgotPassword: () => void;\n};\n\nexport const EmailCapturePanel = ({\n  email,\n  errorMessage,\n  isLoading,\n  onEmailChange,\n  onContinue,\n  onForgotPassword,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const handleSubmit = useCallback(\n    (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      onContinue();\n    },\n    [onContinue],\n  );\n\n  return (\n    <AuthPanel>\n      <Form\n        className={styles.formSurface}\n        onSubmit={handleSubmit}\n        initialFocus=\"first-form-control\"\n      >\n        <p className={styles.helper}>{t('auth.emailCapture.description')}</p>\n        {errorMessage != null && <FormError>{errorMessage}</FormError>}\n        <FormField\n          label={t('auth.emailCapture.emailLabel')}\n          name=\"email\"\n          type=\"email\"\n          value={email}\n          onChange={(event) => {\n            onEmailChange(event.target.value);\n          }}\n          placeholder={t('auth.emailCapture.emailPlaceholder')}\n          autoComplete=\"email\"\n          required\n        />\n        <div className={styles.actionsRow}>\n          <Button type=\"submit\" variant=\"primary\" isLoading={isLoading}>\n            {t('auth.emailCapture.continue')}\n          </Button>\n          <button\n            type=\"button\"\n            className={styles.inlineLink}\n            onClick={onForgotPassword}\n          >\n            {t('auth.emailCapture.forgotPassword')}\n          </button>\n        </div>\n      </Form>\n    </AuthPanel>\n  );\n};\n"],"mappings":";;;;;;;AAiBA,IAAa,KAAqB,EAChC,UACA,iBACA,cACA,kBACA,eACA,0BACwB;CACxB,IAAM,EAAE,SAAM,GAA+B;CAS7C,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EACE,WAAW;EACX,UAZe,GAClB,MAAsC;GAErC,AADA,EAAM,gBAAgB,EACtB,GAAY;KAEd,CAAC,EAAW,CAOE;EACV,cAAa;YAHf;GAKE,kBAAC,KAAD;IAAG,WAAW;cAAgB,EAAE,gCAAgC;IAAK,CAAA;GACpE,KAAgB,QAAQ,kBAAC,GAAD,EAAA,UAAY,GAAyB,CAAA;GAC9D,kBAAC,GAAD;IACE,OAAO,EAAE,+BAA+B;IACxC,MAAK;IACL,MAAK;IACL,OAAO;IACP,WAAW,MAAU;KACnB,EAAc,EAAM,OAAO,MAAM;;IAEnC,aAAa,EAAE,qCAAqC;IACpD,cAAa;IACb,UAAA;IACA,CAAA;GACF,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACE,kBAAC,GAAD;KAAQ,MAAK;KAAS,SAAQ;KAAqB;eAChD,EAAE,6BAA6B;KACzB,CAAA,EACT,kBAAC,UAAD;KACE,MAAK;KACL,WAAW;KACX,SAAS;eAER,EAAE,mCAAmC;KAC/B,CAAA,CACL;;GACD;KACG,CAAA"}
+{"version":3,"file":"EmailCapturePanel.js","names":[],"sources":["../../../../src/auth/login/EmailCapturePanel.tsx"],"sourcesContent":["import { useCallback, type FormEvent, type JSX } 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 { AuthPanel } from './AuthPanel.js';\nimport * as styles from './loginPage.css.js';\n\ntype Props = {\n  email: string;\n  errorMessage: string | null;\n  isLoading: boolean;\n  onEmailChange: (value: string) => void;\n  onContinue: () => void;\n  onForgotPassword: () => void;\n};\n\nexport const EmailCapturePanel = ({\n  email,\n  errorMessage,\n  isLoading,\n  onEmailChange,\n  onContinue,\n  onForgotPassword,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const handleSubmit = useCallback(\n    (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      onContinue();\n    },\n    [onContinue],\n  );\n\n  return (\n    <AuthPanel>\n      <Form\n        className={styles.formSurface}\n        onSubmit={handleSubmit}\n        initialFocus=\"first-form-control\"\n      >\n        <p className={styles.helper}>{t('auth.emailCapture.description')}</p>\n        {errorMessage != null && <FormError>{errorMessage}</FormError>}\n        <FormField\n          label={t('auth.emailCapture.emailLabel')}\n          name=\"email\"\n          type=\"email\"\n          value={email}\n          onChange={(event) => {\n            onEmailChange(event.target.value);\n          }}\n          placeholder={t('auth.emailCapture.emailPlaceholder')}\n          autoComplete=\"email\"\n          required\n        />\n        <div className={styles.actionsRow}>\n          <Button type=\"submit\" variant=\"primary\" isLoading={isLoading}>\n            {t('auth.emailCapture.continue')}\n          </Button>\n          <button\n            type=\"button\"\n            className={styles.inlineLink}\n            onClick={onForgotPassword}\n          >\n            {t('auth.emailCapture.forgotPassword')}\n          </button>\n        </div>\n      </Form>\n    </AuthPanel>\n  );\n};\n"],"mappings":";;;;;;;;;;AAoBA,IAAa,KAAqB,EAChC,UACA,iBACA,cACA,kBACA,eACA,0BACwB;CACxB,IAAM,EAAE,SAAM,GAA+B;CAS7C,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EACE,WAAW;EACX,UAZe,GAClB,MAAsC;GAErC,AADA,EAAM,gBAAgB,EACtB,GAAY;KAEd,CAAC,EAAW,CAOE;EACV,cAAa;YAHf;GAKE,kBAAC,KAAD;IAAG,WAAW;cAAgB,EAAE,gCAAgC;IAAK,CAAA;GACpE,KAAgB,QAAQ,kBAAC,GAAD,EAAA,UAAY,GAAyB,CAAA;GAC9D,kBAAC,GAAD;IACE,OAAO,EAAE,+BAA+B;IACxC,MAAK;IACL,MAAK;IACL,OAAO;IACP,WAAW,MAAU;KACnB,EAAc,EAAM,OAAO,MAAM;;IAEnC,aAAa,EAAE,qCAAqC;IACpD,cAAa;IACb,UAAA;IACA,CAAA;GACF,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACE,kBAAC,GAAD;KAAQ,MAAK;KAAS,SAAQ;KAAqB;eAChD,EAAE,6BAA6B;KACzB,CAAA,EACT,kBAAC,UAAD;KACE,MAAK;KACL,WAAW;KACX,SAAS;eAER,EAAE,mCAAmC;KAC/B,CAAA,CACL;;GACD;KACG,CAAA"}

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

@@ -6,8 +6,8 @@ import { PasskeyLoginForm as i } from "./PasskeyLoginForm.js";
 import { MethodChooser as a } from "./MethodChooser.js";
 import { PasswordLoginPanel as o } from "./PasswordLoginPanel.js";
 import { useCallback as s, useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
-import { AuthLayout as f } from "@plumile/ui";
-import { jsx as p } from "react/jsx-runtime";
+import { jsx as f } from "react/jsx-runtime";
+import { AuthLayout as p } from "@plumile/ui/atomic/templates/auth_layout/AuthLayout.js";
 //#region src/auth/login/LoginFlow.tsx
 var m = ({ auth: m, oidcProviders: h, onLoginSuccess: g, onForgotPassword: _ }) => {
 	let { t: v } = t(), [y, b] = d(""), [x, S] = d([]), [C, w] = d(null), [T, E] = d("email"), [D, O] = d(!1), [k, A] = d(null), j = u(!0), M = l(() => ({
@@ -59,7 +59,7 @@ var m = ({ auth: m, oidcProviders: h, onLoginSuccess: g, onForgotPassword: _ })
 		T
 	]);
 	let R;
-	return R = P ? /* @__PURE__ */ p(e, { children: /* @__PURE__ */ p(r, {
+	return R = P ? /* @__PURE__ */ f(e, { children: /* @__PURE__ */ f(r, {
 		auth: m,
 		onSuccess: () => {
 			N({ force: !0 });
@@ -67,10 +67,10 @@ var m = ({ auth: m, oidcProviders: h, onLoginSuccess: g, onForgotPassword: _ })
 		onBack: () => {
 			m.reset(), E("email");
 		}
-	}) }) : T === "passkey" ? /* @__PURE__ */ p(e, {
+	}) }) : T === "passkey" ? /* @__PURE__ */ f(e, {
 		title: v("auth.loginFlow.passkey.title"),
 		description: v("auth.loginFlow.passkey.description", { email: y }),
-		children: /* @__PURE__ */ p(i, {
+		children: /* @__PURE__ */ f(i, {
 			auth: M,
 			onSuccess: N,
 			onShowMethods: () => {
@@ -79,9 +79,9 @@ var m = ({ auth: m, oidcProviders: h, onLoginSuccess: g, onForgotPassword: _ })
 			defaultEmail: y,
 			isAttemptingPasskey: m.isLoading
 		})
-	}) : T === "methods" ? /* @__PURE__ */ p(e, {
+	}) : T === "methods" ? /* @__PURE__ */ f(e, {
 		title: v("auth.loginFlow.methods.title"),
-		children: /* @__PURE__ */ p(a, {
+		children: /* @__PURE__ */ f(a, {
 			email: y,
 			methods: x,
 			lockedUntil: C,
@@ -96,13 +96,13 @@ var m = ({ auth: m, oidcProviders: h, onLoginSuccess: g, onForgotPassword: _ })
 				E("email");
 			}
 		})
-	}) : T === "password" ? /* @__PURE__ */ p(o, {
+	}) : T === "password" ? /* @__PURE__ */ f(o, {
 		auth: M,
 		defaultEmail: y,
 		onForgotPassword: _,
 		onSuccess: N,
 		providers: h
-	}) : /* @__PURE__ */ p(n, {
+	}) : /* @__PURE__ */ f(n, {
 		email: y,
 		errorMessage: k,
 		isLoading: m.isLoading,
@@ -118,7 +118,7 @@ var m = ({ auth: m, oidcProviders: h, onLoginSuccess: g, onForgotPassword: _ })
 			L(e).catch(() => {});
 		},
 		onForgotPassword: _
-	}), /* @__PURE__ */ p(f, {
+	}), /* @__PURE__ */ f(p, {
 		title: F,
 		subtitle: I,
 		children: R

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

@@ -1 +1 @@
-{"version":3,"file":"LoginFlow.js","names":[],"sources":["../../../../src/auth/login/LoginFlow.tsx"],"sourcesContent":["/* eslint-disable no-ternary */\nimport {\n  type JSX,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { AuthLayout } from '@plumile/ui';\n\nimport type {\n  AuthMethod,\n  OidcProviderKind,\n} from '../../modules/sharedSchemaTypes.js';\nimport type { UseAuthReturn } from '../../hooks/useAuth.js';\n\nimport { MfaChallengeForm } from './MfaChallengeForm.js';\nimport { PasskeyLoginForm } from './PasskeyLoginForm.js';\nimport { MethodChooser } from './MethodChooser.js';\nimport AuthPanel from './AuthPanel.js';\nimport { EmailCapturePanel } from './EmailCapturePanel.js';\nimport { PasswordLoginPanel } from './PasswordLoginPanel.js';\n\nexport type LoginFlowProps = {\n  auth: UseAuthReturn;\n  oidcProviders: readonly OidcProviderKind[];\n  onLoginSuccess: () => void;\n  onForgotPassword: () => void;\n};\n\ntype View = 'email' | 'passkey' | 'methods' | 'password' | 'mfa';\n\nexport const LoginFlow = ({\n  auth,\n  oidcProviders,\n  onLoginSuccess,\n  onForgotPassword,\n}: LoginFlowProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const [email, setEmail] = useState('');\n  const [methods, setMethods] = useState<readonly AuthMethod[]>([]);\n  const [lockedUntil, setLockedUntil] = useState<string | null>(null);\n  const [view, setView] = useState<View>('email');\n  const [hasTriedPasskey, setHasTriedPasskey] = useState(false);\n  const [localError, setLocalError] = useState<string | null>(null);\n  const passkeyAttemptActive = useRef(true);\n\n  const loginAdapter = useMemo(() => {\n    return {\n      ...auth,\n      beginAuthentication: async (inputEmail: string) => {\n        const result = await auth.beginAuthentication(inputEmail);\n        setEmail(inputEmail);\n        setMethods(result.methods);\n        setLockedUntil(result.lockedUntil);\n        return result;\n      },\n    };\n  }, [auth]);\n\n  const handleLoginSuccess = useCallback(\n    ({ force } = { force: false }) => {\n      if (!force && auth.nextStep === 'TOTP') {\n        return;\n      }\n      onLoginSuccess();\n    },\n    [auth.nextStep, onLoginSuccess],\n  );\n\n  const isMfaStep = auth.nextStep === 'TOTP' || view === 'mfa';\n  const title = isMfaStep\n    ? t('auth.loginFlow.title.mfa')\n    : t('auth.loginFlow.title.default');\n  const subtitle = isMfaStep\n    ? t('auth.loginFlow.subtitle.mfa')\n    : t('auth.loginFlow.subtitle.default');\n\n  const startFlowForEmail = useCallback(\n    async (inputEmail: string) => {\n      setLocalError(null);\n      try {\n        const trimmed = inputEmail.trim();\n        const result = await auth.beginAuthentication(trimmed);\n        setEmail(trimmed);\n        setMethods(result.methods);\n        setLockedUntil(result.lockedUntil);\n        const hasPasskey = result.methods.some((method) => {\n          return method === 'PASSKEY';\n        });\n\n        if (hasPasskey) {\n          setView('passkey');\n        } else if (result.methods.includes('PASSWORD')) {\n          setView('password');\n        } else {\n          setView('methods');\n        }\n      } catch {\n        setLocalError(t('auth.loginFlow.errors.tryAgain'));\n      }\n    },\n    [auth, t],\n  );\n\n  useEffect(() => {\n    passkeyAttemptActive.current = true;\n    const trimmedEmail = email.trim();\n    const shouldAttempt =\n      view === 'passkey' && !hasTriedPasskey && trimmedEmail !== '';\n\n    if (shouldAttempt) {\n      setHasTriedPasskey(true);\n      const runPasskeyLogin = async () => {\n        try {\n          const status = await loginAdapter.loginWithPasskey({\n            email: trimmedEmail,\n          });\n\n          if (!passkeyAttemptActive.current) {\n            return;\n          }\n\n          if (status === 'success') {\n            handleLoginSuccess();\n            return;\n          }\n\n          if (status === 'mfa-required') {\n            setView('mfa');\n            return;\n          }\n\n          setView('methods');\n          setLocalError(t('auth.loginFlow.errors.passkeyUnavailable'));\n        } catch {\n          if (!passkeyAttemptActive.current) {\n            return;\n          }\n\n          setLocalError(t('auth.loginFlow.errors.passkeyUnavailable'));\n          setView('methods');\n        }\n      };\n      runPasskeyLogin().catch(() => {\n        // Errors are handled inside runPasskeyLogin; ignore any unexpected rethrow.\n      });\n    }\n\n    return () => {\n      passkeyAttemptActive.current = false;\n    };\n  }, [email, handleLoginSuccess, hasTriedPasskey, loginAdapter, t, view]);\n\n  let content: JSX.Element;\n\n  if (isMfaStep) {\n    content = (\n      <AuthPanel>\n        <MfaChallengeForm\n          auth={auth}\n          onSuccess={() => {\n            handleLoginSuccess({ force: true });\n          }}\n          onBack={() => {\n            auth.reset();\n            setView('email');\n          }}\n        />\n      </AuthPanel>\n    );\n  } else if (view === 'passkey') {\n    content = (\n      <AuthPanel\n        title={t('auth.loginFlow.passkey.title')}\n        description={t('auth.loginFlow.passkey.description', { email })}\n      >\n        <PasskeyLoginForm\n          auth={loginAdapter}\n          onSuccess={handleLoginSuccess}\n          onShowMethods={() => {\n            setView('methods');\n          }}\n          defaultEmail={email}\n          isAttemptingPasskey={auth.isLoading}\n        />\n      </AuthPanel>\n    );\n  } else if (view === 'methods') {\n    content = (\n      <AuthPanel title={t('auth.loginFlow.methods.title')}>\n        <MethodChooser\n          email={email}\n          methods={methods}\n          lockedUntil={lockedUntil}\n          onSelect={(method) => {\n            if (method === 'PASSKEY') {\n              setView('passkey');\n              return;\n            }\n            if (method === 'PASSWORD') {\n              setView('password');\n            }\n          }}\n          onBack={() => {\n            setView('email');\n          }}\n        />\n      </AuthPanel>\n    );\n  } else if (view === 'password') {\n    content = (\n      <PasswordLoginPanel\n        auth={loginAdapter}\n        defaultEmail={email}\n        onForgotPassword={onForgotPassword}\n        onSuccess={handleLoginSuccess}\n        providers={oidcProviders}\n      />\n    );\n  } else {\n    // email capture only\n    content = (\n      <EmailCapturePanel\n        email={email}\n        errorMessage={localError}\n        isLoading={auth.isLoading}\n        onEmailChange={(value) => {\n          setEmail(value);\n          setLocalError(null);\n        }}\n        onContinue={() => {\n          const trimmed = email.trim();\n          if (trimmed === '') {\n            setLocalError(t('auth.loginFlow.errors.emailRequired'));\n            return;\n          }\n          startFlowForEmail(trimmed).catch(() => {\n            // startFlowForEmail handles its own errors.\n          });\n        }}\n        onForgotPassword={onForgotPassword}\n      />\n    );\n  }\n\n  return (\n    <AuthLayout title={title} subtitle={subtitle}>\n      {content}\n    </AuthLayout>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"LoginFlow.js","names":[],"sources":["../../../../src/auth/login/LoginFlow.tsx"],"sourcesContent":["/* eslint-disable no-ternary */\nimport {\n  type JSX,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { AuthLayout } from '@plumile/ui/atomic/templates/auth_layout/AuthLayout.js';\n\nimport type {\n  AuthMethod,\n  OidcProviderKind,\n} from '../../modules/sharedSchemaTypes.js';\nimport type { UseAuthReturn } from '../../hooks/useAuth.js';\n\nimport { MfaChallengeForm } from './MfaChallengeForm.js';\nimport { PasskeyLoginForm } from './PasskeyLoginForm.js';\nimport { MethodChooser } from './MethodChooser.js';\nimport AuthPanel from './AuthPanel.js';\nimport { EmailCapturePanel } from './EmailCapturePanel.js';\nimport { PasswordLoginPanel } from './PasswordLoginPanel.js';\n\nexport type LoginFlowProps = {\n  auth: UseAuthReturn;\n  oidcProviders: readonly OidcProviderKind[];\n  onLoginSuccess: () => void;\n  onForgotPassword: () => void;\n};\n\ntype View = 'email' | 'passkey' | 'methods' | 'password' | 'mfa';\n\nexport const LoginFlow = ({\n  auth,\n  oidcProviders,\n  onLoginSuccess,\n  onForgotPassword,\n}: LoginFlowProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const [email, setEmail] = useState('');\n  const [methods, setMethods] = useState<readonly AuthMethod[]>([]);\n  const [lockedUntil, setLockedUntil] = useState<string | null>(null);\n  const [view, setView] = useState<View>('email');\n  const [hasTriedPasskey, setHasTriedPasskey] = useState(false);\n  const [localError, setLocalError] = useState<string | null>(null);\n  const passkeyAttemptActive = useRef(true);\n\n  const loginAdapter = useMemo(() => {\n    return {\n      ...auth,\n      beginAuthentication: async (inputEmail: string) => {\n        const result = await auth.beginAuthentication(inputEmail);\n        setEmail(inputEmail);\n        setMethods(result.methods);\n        setLockedUntil(result.lockedUntil);\n        return result;\n      },\n    };\n  }, [auth]);\n\n  const handleLoginSuccess = useCallback(\n    ({ force } = { force: false }) => {\n      if (!force && auth.nextStep === 'TOTP') {\n        return;\n      }\n      onLoginSuccess();\n    },\n    [auth.nextStep, onLoginSuccess],\n  );\n\n  const isMfaStep = auth.nextStep === 'TOTP' || view === 'mfa';\n  const title = isMfaStep\n    ? t('auth.loginFlow.title.mfa')\n    : t('auth.loginFlow.title.default');\n  const subtitle = isMfaStep\n    ? t('auth.loginFlow.subtitle.mfa')\n    : t('auth.loginFlow.subtitle.default');\n\n  const startFlowForEmail = useCallback(\n    async (inputEmail: string) => {\n      setLocalError(null);\n      try {\n        const trimmed = inputEmail.trim();\n        const result = await auth.beginAuthentication(trimmed);\n        setEmail(trimmed);\n        setMethods(result.methods);\n        setLockedUntil(result.lockedUntil);\n        const hasPasskey = result.methods.some((method) => {\n          return method === 'PASSKEY';\n        });\n\n        if (hasPasskey) {\n          setView('passkey');\n        } else if (result.methods.includes('PASSWORD')) {\n          setView('password');\n        } else {\n          setView('methods');\n        }\n      } catch {\n        setLocalError(t('auth.loginFlow.errors.tryAgain'));\n      }\n    },\n    [auth, t],\n  );\n\n  useEffect(() => {\n    passkeyAttemptActive.current = true;\n    const trimmedEmail = email.trim();\n    const shouldAttempt =\n      view === 'passkey' && !hasTriedPasskey && trimmedEmail !== '';\n\n    if (shouldAttempt) {\n      setHasTriedPasskey(true);\n      const runPasskeyLogin = async () => {\n        try {\n          const status = await loginAdapter.loginWithPasskey({\n            email: trimmedEmail,\n          });\n\n          if (!passkeyAttemptActive.current) {\n            return;\n          }\n\n          if (status === 'success') {\n            handleLoginSuccess();\n            return;\n          }\n\n          if (status === 'mfa-required') {\n            setView('mfa');\n            return;\n          }\n\n          setView('methods');\n          setLocalError(t('auth.loginFlow.errors.passkeyUnavailable'));\n        } catch {\n          if (!passkeyAttemptActive.current) {\n            return;\n          }\n\n          setLocalError(t('auth.loginFlow.errors.passkeyUnavailable'));\n          setView('methods');\n        }\n      };\n      runPasskeyLogin().catch(() => {\n        // Errors are handled inside runPasskeyLogin; ignore any unexpected rethrow.\n      });\n    }\n\n    return () => {\n      passkeyAttemptActive.current = false;\n    };\n  }, [email, handleLoginSuccess, hasTriedPasskey, loginAdapter, t, view]);\n\n  let content: JSX.Element;\n\n  if (isMfaStep) {\n    content = (\n      <AuthPanel>\n        <MfaChallengeForm\n          auth={auth}\n          onSuccess={() => {\n            handleLoginSuccess({ force: true });\n          }}\n          onBack={() => {\n            auth.reset();\n            setView('email');\n          }}\n        />\n      </AuthPanel>\n    );\n  } else if (view === 'passkey') {\n    content = (\n      <AuthPanel\n        title={t('auth.loginFlow.passkey.title')}\n        description={t('auth.loginFlow.passkey.description', { email })}\n      >\n        <PasskeyLoginForm\n          auth={loginAdapter}\n          onSuccess={handleLoginSuccess}\n          onShowMethods={() => {\n            setView('methods');\n          }}\n          defaultEmail={email}\n          isAttemptingPasskey={auth.isLoading}\n        />\n      </AuthPanel>\n    );\n  } else if (view === 'methods') {\n    content = (\n      <AuthPanel title={t('auth.loginFlow.methods.title')}>\n        <MethodChooser\n          email={email}\n          methods={methods}\n          lockedUntil={lockedUntil}\n          onSelect={(method) => {\n            if (method === 'PASSKEY') {\n              setView('passkey');\n              return;\n            }\n            if (method === 'PASSWORD') {\n              setView('password');\n            }\n          }}\n          onBack={() => {\n            setView('email');\n          }}\n        />\n      </AuthPanel>\n    );\n  } else if (view === 'password') {\n    content = (\n      <PasswordLoginPanel\n        auth={loginAdapter}\n        defaultEmail={email}\n        onForgotPassword={onForgotPassword}\n        onSuccess={handleLoginSuccess}\n        providers={oidcProviders}\n      />\n    );\n  } else {\n    // email capture only\n    content = (\n      <EmailCapturePanel\n        email={email}\n        errorMessage={localError}\n        isLoading={auth.isLoading}\n        onEmailChange={(value) => {\n          setEmail(value);\n          setLocalError(null);\n        }}\n        onContinue={() => {\n          const trimmed = email.trim();\n          if (trimmed === '') {\n            setLocalError(t('auth.loginFlow.errors.emailRequired'));\n            return;\n          }\n          startFlowForEmail(trimmed).catch(() => {\n            // startFlowForEmail handles its own errors.\n          });\n        }}\n        onForgotPassword={onForgotPassword}\n      />\n    );\n  }\n\n  return (\n    <AuthLayout title={title} subtitle={subtitle}>\n      {content}\n    </AuthLayout>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,38 +1,40 @@
 import { brandGhostButton as e, formSurface as t, fullWidth as n, helper as r, inlineLink as i, stack as a } from "./loginPage.css.js";
 import { useBackofficeReactTranslation as o } from "../../i18n/useBackofficeReactTranslation.js";
-import { Button as s, FormError as c, cx as l } from "@plumile/ui";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { Trans as f } from "react-i18next";
+import { cx as s } from "@plumile/ui/theme/tools.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Trans as u } from "react-i18next";
+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";
 //#region src/auth/login/MethodChooser.tsx
 var p = ({ email: p, methods: m, lockedUntil: h, onSelect: g, onBack: _ }) => {
 	let { t: v } = o(), y = m.length === 0, b = h == null ? v("auth.methodChooser.locked") : v("auth.methodChooser.lockedWithTime", { time: new Date(h).toLocaleString() }), x = m.map((t) => {
 		let r = t === "PASSKEY" ? v("auth.methodChooser.methods.passkey") : t === "PASSWORD" ? v("auth.methodChooser.methods.password") : v("auth.methodChooser.methods.other", { method: t.toLowerCase() });
-		return /* @__PURE__ */ u(s, {
+		return /* @__PURE__ */ c(d, {
 			type: "button",
 			variant: "secondary",
 			onClick: () => {
 				g(t);
 			},
-			className: l(n, e),
+			className: s(n, e),
 			children: r
 		}, t);
 	});
-	return /* @__PURE__ */ u("div", {
+	return /* @__PURE__ */ c("div", {
 		className: t,
-		children: /* @__PURE__ */ d("div", {
+		children: /* @__PURE__ */ l("div", {
 			className: a,
 			children: [
-				/* @__PURE__ */ u("p", {
+				/* @__PURE__ */ c("p", {
 					className: r,
-					children: /* @__PURE__ */ u(f, {
+					children: /* @__PURE__ */ c(u, {
 						i18nKey: "auth.methodChooser.prompt",
 						values: { email: p },
-						components: { strong: /* @__PURE__ */ u("strong", {}) }
+						components: { strong: /* @__PURE__ */ c("strong", {}) }
 					})
 				}),
-				y ? /* @__PURE__ */ u(c, { children: b }) : null,
+				y ? /* @__PURE__ */ c(f, { children: b }) : null,
 				y ? null : x,
-				/* @__PURE__ */ u(s, {
+				/* @__PURE__ */ c(d, {
 					type: "button",
 					variant: "text",
 					onClick: _,

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

@@ -1 +1 @@
-{"version":3,"file":"MethodChooser.js","names":[],"sources":["../../../../src/auth/login/MethodChooser.tsx"],"sourcesContent":["/* eslint-disable no-ternary */\nimport { type JSX } from 'react';\nimport { Trans } from 'react-i18next';\nimport { Button, FormError, cx } from '@plumile/ui';\n\nimport type { AuthMethod } from '../../modules/sharedSchemaTypes.js';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './loginPage.css.js';\n\ntype Props = {\n  email: string;\n  methods: readonly AuthMethod[];\n  lockedUntil: string | null;\n  onSelect: (method: AuthMethod) => void;\n  onBack: () => void;\n};\n\nexport const MethodChooser = ({\n  email,\n  methods,\n  lockedUntil,\n  onSelect,\n  onBack,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const isLocked = methods.length === 0;\n  const lockedMessage =\n    lockedUntil != null\n      ? t('auth.methodChooser.lockedWithTime', {\n          time: new Date(lockedUntil).toLocaleString(),\n        })\n      : t('auth.methodChooser.locked');\n\n  const methodButtons = methods.map((method) => {\n    const label =\n      method === 'PASSKEY'\n        ? t('auth.methodChooser.methods.passkey')\n        : method === 'PASSWORD'\n          ? t('auth.methodChooser.methods.password')\n          : t('auth.methodChooser.methods.other', {\n              method: method.toLowerCase(),\n            });\n    return (\n      <Button\n        key={method}\n        type=\"button\"\n        variant=\"secondary\"\n        onClick={() => {\n          onSelect(method);\n        }}\n        className={cx(styles.fullWidth, styles.brandGhostButton)}\n      >\n        {label}\n      </Button>\n    );\n  });\n\n  return (\n    <div className={styles.formSurface}>\n      <div className={styles.stack}>\n        <p className={styles.helper}>\n          <Trans\n            i18nKey=\"auth.methodChooser.prompt\"\n            values={{ email }}\n            components={{ strong: <strong /> }}\n          />\n        </p>\n        {isLocked ? <FormError>{lockedMessage}</FormError> : null}\n        {!isLocked ? methodButtons : null}\n        <Button\n          type=\"button\"\n          variant=\"text\"\n          onClick={onBack}\n          className={styles.inlineLink}\n        >\n          {t('auth.methodChooser.actions.back')}\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAkBA,IAAa,KAAiB,EAC5B,UACA,YACA,gBACA,aACA,gBACwB;CACxB,IAAM,EAAE,SAAM,GAA+B,EACvC,IAAW,EAAQ,WAAW,GAC9B,IACJ,KAAe,OAIX,EAAE,4BAA4B,GAH9B,EAAE,qCAAqC,EACrC,MAAM,IAAI,KAAK,EAAY,CAAC,gBAAgB,EAC7C,CAAC,EAGF,IAAgB,EAAQ,KAAK,MAAW;EAC5C,IAAM,IACJ,MAAW,YACP,EAAE,qCAAqC,GACvC,MAAW,aACT,EAAE,sCAAsC,GACxC,EAAE,oCAAoC,EACpC,QAAQ,EAAO,aAAa,EAC7B,CAAC;EACV,OACE,kBAAC,GAAD;GAEE,MAAK;GACL,SAAQ;GACR,eAAe;IACb,EAAS,EAAO;;GAElB,WAAW,EAAG,GAAkB,EAAwB;aAEvD;GACM,EATF,EASE;GAEX;CAEF,OACE,kBAAC,OAAD;EAAK,WAAW;YACd,kBAAC,OAAD;GAAK,WAAW;aAAhB;IACE,kBAAC,KAAD;KAAG,WAAW;eACZ,kBAAC,GAAD;MACE,SAAQ;MACR,QAAQ,EAAE,UAAO;MACjB,YAAY,EAAE,QAAQ,kBAAC,UAAD,EAAU,CAAA,EAAE;MAClC,CAAA;KACA,CAAA;IACH,IAAW,kBAAC,GAAD,EAAA,UAAY,GAA0B,CAAA,GAAG;IACnD,IAA2B,OAAhB;IACb,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,SAAS;KACT,WAAW;eAEV,EAAE,kCAAkC;KAC9B,CAAA;IACL;;EACF,CAAA"}
+{"version":3,"file":"MethodChooser.js","names":[],"sources":["../../../../src/auth/login/MethodChooser.tsx"],"sourcesContent":["/* eslint-disable no-ternary */\nimport { type JSX } from 'react';\nimport { Trans } from 'react-i18next';\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { FormError } from '@plumile/ui/atomic/molecules/form_error/FormError.js';\nimport { cx } from '@plumile/ui/theme/tools.js';\n\nimport type { AuthMethod } from '../../modules/sharedSchemaTypes.js';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './loginPage.css.js';\n\ntype Props = {\n  email: string;\n  methods: readonly AuthMethod[];\n  lockedUntil: string | null;\n  onSelect: (method: AuthMethod) => void;\n  onBack: () => void;\n};\n\nexport const MethodChooser = ({\n  email,\n  methods,\n  lockedUntil,\n  onSelect,\n  onBack,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const isLocked = methods.length === 0;\n  const lockedMessage =\n    lockedUntil != null\n      ? t('auth.methodChooser.lockedWithTime', {\n          time: new Date(lockedUntil).toLocaleString(),\n        })\n      : t('auth.methodChooser.locked');\n\n  const methodButtons = methods.map((method) => {\n    const label =\n      method === 'PASSKEY'\n        ? t('auth.methodChooser.methods.passkey')\n        : method === 'PASSWORD'\n          ? t('auth.methodChooser.methods.password')\n          : t('auth.methodChooser.methods.other', {\n              method: method.toLowerCase(),\n            });\n    return (\n      <Button\n        key={method}\n        type=\"button\"\n        variant=\"secondary\"\n        onClick={() => {\n          onSelect(method);\n        }}\n        className={cx(styles.fullWidth, styles.brandGhostButton)}\n      >\n        {label}\n      </Button>\n    );\n  });\n\n  return (\n    <div className={styles.formSurface}>\n      <div className={styles.stack}>\n        <p className={styles.helper}>\n          <Trans\n            i18nKey=\"auth.methodChooser.prompt\"\n            values={{ email }}\n            components={{ strong: <strong /> }}\n          />\n        </p>\n        {isLocked ? <FormError>{lockedMessage}</FormError> : null}\n        {!isLocked ? methodButtons : null}\n        <Button\n          type=\"button\"\n          variant=\"text\"\n          onClick={onBack}\n          className={styles.inlineLink}\n        >\n          {t('auth.methodChooser.actions.back')}\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAoBA,IAAa,KAAiB,EAC5B,UACA,YACA,gBACA,aACA,gBACwB;CACxB,IAAM,EAAE,SAAM,GAA+B,EACvC,IAAW,EAAQ,WAAW,GAC9B,IACJ,KAAe,OAIX,EAAE,4BAA4B,GAH9B,EAAE,qCAAqC,EACrC,MAAM,IAAI,KAAK,EAAY,CAAC,gBAAgB,EAC7C,CAAC,EAGF,IAAgB,EAAQ,KAAK,MAAW;EAC5C,IAAM,IACJ,MAAW,YACP,EAAE,qCAAqC,GACvC,MAAW,aACT,EAAE,sCAAsC,GACxC,EAAE,oCAAoC,EACpC,QAAQ,EAAO,aAAa,EAC7B,CAAC;EACV,OACE,kBAAC,GAAD;GAEE,MAAK;GACL,SAAQ;GACR,eAAe;IACb,EAAS,EAAO;;GAElB,WAAW,EAAG,GAAkB,EAAwB;aAEvD;GACM,EATF,EASE;GAEX;CAEF,OACE,kBAAC,OAAD;EAAK,WAAW;YACd,kBAAC,OAAD;GAAK,WAAW;aAAhB;IACE,kBAAC,KAAD;KAAG,WAAW;eACZ,kBAAC,GAAD;MACE,SAAQ;MACR,QAAQ,EAAE,UAAO;MACjB,YAAY,EAAE,QAAQ,kBAAC,UAAD,EAAU,CAAA,EAAE;MAClC,CAAA;KACA,CAAA;IACH,IAAW,kBAAC,GAAD,EAAA,UAAY,GAA0B,CAAA,GAAG;IACnD,IAA2B,OAAhB;IACb,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,SAAS;KACT,WAAW;eAEV,EAAE,kCAAkC;KAC9B,CAAA;IACL;;EACF,CAAA"}

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

@@ -1,8 +1,11 @@
 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 { Button as l, Form as u, FormError as d, FormField as f } from "@plumile/ui";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+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";
 //#region src/auth/login/MfaChallengeForm.tsx
 var h = ({ auth: h, onSuccess: g, onBack: _ }) => {
 	let { t: v } = a(), [y, b] = c(""), [x, S] = c(null);
@@ -28,22 +31,22 @@ var h = ({ auth: h, onSuccess: g, onBack: _ }) => {
 		g,
 		v
 	]), w = h.emailHint == null ? v("auth.mfa.helper.default") : v("auth.mfa.helper.withEmail", { email: h.emailHint }), T = x;
-	return /* @__PURE__ */ m(u, {
+	return /* @__PURE__ */ u(m, {
 		className: t,
 		onSubmit: o((e) => {
 			C(e).catch(() => {});
 		}, [C]),
 		noValidate: !0,
 		initialFocus: "first-form-control",
-		children: [/* @__PURE__ */ m("div", {
+		children: [/* @__PURE__ */ u("div", {
 			className: i,
 			children: [
-				/* @__PURE__ */ p("p", {
+				/* @__PURE__ */ l("p", {
 					className: n,
 					children: w
 				}),
-				T == null ? null : /* @__PURE__ */ p(d, { children: T }),
-				/* @__PURE__ */ p(f, {
+				T == null ? null : /* @__PURE__ */ l(f, { children: T }),
+				/* @__PURE__ */ l(p, {
 					label: v("auth.mfa.form.label"),
 					name: "code",
 					type: "text",
@@ -56,9 +59,9 @@ var h = ({ auth: h, onSuccess: g, onBack: _ }) => {
 					required: !0
 				})
 			]
-		}), /* @__PURE__ */ m("div", {
+		}), /* @__PURE__ */ u("div", {
 			className: e,
-			children: [/* @__PURE__ */ p(l, {
+			children: [/* @__PURE__ */ l(d, {
 				type: "button",
 				variant: "text",
 				size: "small",
@@ -67,7 +70,7 @@ var h = ({ auth: h, onSuccess: g, onBack: _ }) => {
 					h.reset(), _();
 				},
 				children: v("auth.mfa.actions.back")
-			}), /* @__PURE__ */ p(l, {
+			}), /* @__PURE__ */ l(d, {
 				type: "submit",
 				size: "large",
 				isLoading: h.isLoading,

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, Form, FormError, FormField } 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 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":";;;;;;AAyBA,IAAa,KAAoB,EAC/B,SACA,cACA,gBACwB;CACxB,IAAM,EAAE,SAAM,GAA+B,EACvC,CAAC,GAAM,KAAW,EAAS,GAAG,EAC9B,CAAC,GAAY,KAAiB,EAAwB,KAAK;CAGjE,QAAgB;EAEd,AADA,EAAK,YAAY,EACjB,EAAc,KAAK;IAClB,CAAC,EAAK,CAAC;CAEV,IAAM,IAAe,EACnB,OAAO,MAAsC;EAE3C,AADA,EAAM,gBAAgB,EACtB,EAAc,KAAK;EAEnB,IAAM,IAAU,EAAK,MAAM;EAC3B,IAAI,EAAQ,SAAS,GAAG;GACtB,EAAc,EAAE,4BAA4B,CAAC;GAC7C;;EAGF,IAAI;GACF,IAAM,IAA+B,EACnC,MAAM,GACP;GAED,AADA,MAAM,EAAK,YAAY,EAAY,EACnC,GAAW;UACL;GACN,EAAc,EAAE,qCAAqC,CAAC;;IAG1D;EAAC;EAAM;EAAM;EAAW;EAAE,CAC3B,EAEK,IACJ,EAAK,aAAa,OAEd,EAAE,0BAA0B,GAD5B,EAAE,6BAA6B,EAAE,OAAO,EAAK,WAAW,CAAC,EAGzD,IAAY;CAWlB,OACE,kBAAC,GAAD;EACE,WAAW;EACX,UAZsB,GACvB,MAAsC;GACrC,EAAa,EAAM,CAAC,YAAY,GAE9B;KAEJ,CAAC,EAAa,CAMF;EACV,YAAA;EACA,cAAa;YAJf,CAME,kBAAC,OAAD;GAAK,WAAW;aAAhB;IACE,kBAAC,KAAD;KAAG,WAAW;eAAgB;KAAW,CAAA;IACxC,KAAa,OAA4C,OAArC,kBAAC,GAAD,EAAA,UAAY,GAAsB,CAAA;IACvD,kBAAC,GAAD;KACE,OAAO,EAAE,sBAAsB;KAC/B,MAAK;KACL,MAAK;KACL,OAAO;KACP,WAAW,MAAU;MAEnB,AADA,EAAQ,EAAM,OAAO,MAAM,EAC3B,EAAc,KAAK;;KAErB,aAAa,EAAE,4BAA4B;KAC3C,cAAa;KACb,UAAA;KACA,CAAA;IACE;MACN,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,GAAD;IACE,MAAK;IACL,SAAQ;IACR,MAAK;IACL,WAAW;IACX,eAAe;KAEb,AADA,EAAK,OAAO,EACZ,GAAQ;;cAGT,EAAE,wBAAwB;IACpB,CAAA,EACT,kBAAC,GAAD;IAAQ,MAAK;IAAS,MAAK;IAAQ,WAAW,EAAK;cAChD,EAAE,0BAA0B;IACtB,CAAA,CACL;KACD"}
+{"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,GAA+B,EACvC,CAAC,GAAM,KAAW,EAAS,GAAG,EAC9B,CAAC,GAAY,KAAiB,EAAwB,KAAK;CAGjE,QAAgB;EAEd,AADA,EAAK,YAAY,EACjB,EAAc,KAAK;IAClB,CAAC,EAAK,CAAC;CAEV,IAAM,IAAe,EACnB,OAAO,MAAsC;EAE3C,AADA,EAAM,gBAAgB,EACtB,EAAc,KAAK;EAEnB,IAAM,IAAU,EAAK,MAAM;EAC3B,IAAI,EAAQ,SAAS,GAAG;GACtB,EAAc,EAAE,4BAA4B,CAAC;GAC7C;;EAGF,IAAI;GACF,IAAM,IAA+B,EACnC,MAAM,GACP;GAED,AADA,MAAM,EAAK,YAAY,EAAY,EACnC,GAAW;UACL;GACN,EAAc,EAAE,qCAAqC,CAAC;;IAG1D;EAAC;EAAM;EAAM;EAAW;EAAE,CAC3B,EAEK,IACJ,EAAK,aAAa,OAEd,EAAE,0BAA0B,GAD5B,EAAE,6BAA6B,EAAE,OAAO,EAAK,WAAW,CAAC,EAGzD,IAAY;CAWlB,OACE,kBAAC,GAAD;EACE,WAAW;EACX,UAZsB,GACvB,MAAsC;GACrC,EAAa,EAAM,CAAC,YAAY,GAE9B;KAEJ,CAAC,EAAa,CAMF;EACV,YAAA;EACA,cAAa;YAJf,CAME,kBAAC,OAAD;GAAK,WAAW;aAAhB;IACE,kBAAC,KAAD;KAAG,WAAW;eAAgB;KAAW,CAAA;IACxC,KAAa,OAA4C,OAArC,kBAAC,GAAD,EAAA,UAAY,GAAsB,CAAA;IACvD,kBAAC,GAAD;KACE,OAAO,EAAE,sBAAsB;KAC/B,MAAK;KACL,MAAK;KACL,OAAO;KACP,WAAW,MAAU;MAEnB,AADA,EAAQ,EAAM,OAAO,MAAM,EAC3B,EAAc,KAAK;;KAErB,aAAa,EAAE,4BAA4B;KAC3C,cAAa;KACb,UAAA;KACA,CAAA;IACE;MACN,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,GAAD;IACE,MAAK;IACL,SAAQ;IACR,MAAK;IACL,WAAW;IACX,eAAe;KAEb,AADA,EAAK,OAAO,EACZ,GAAQ;;cAGT,EAAE,wBAAwB;IACpB,CAAA,EACT,kBAAC,GAAD;IAAQ,MAAK;IAAS,MAAK;IAAQ,WAAW,EAAK;cAChD,EAAE,0BAA0B;IACtB,CAAA,CACL;KACD"}

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

@@ -1,17 +1,17 @@
 import { brandGhostButton as e, stack as t } from "./loginPage.css.js";
 import { useBackofficeReactTranslation as n } from "../../i18n/useBackofficeReactTranslation.js";
-import { Button as r } from "@plumile/ui";
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
+import { Button as i } from "@plumile/ui/atomic/atoms/button/Button.js";
 //#region src/auth/login/OidcButtons.tsx
 var a = "/auth/oidc/start", o = ({ providers: o }) => {
 	let { t: s } = n();
-	return o.length === 0 ? null : /* @__PURE__ */ i("div", {
+	return o.length === 0 ? null : /* @__PURE__ */ r("div", {
 		className: t,
 		children: o.map((t) => {
 			let n = s("auth.oidc.buttons.generic");
 			t === "GOOGLE" ? n = s("auth.oidc.buttons.google") : t === "APPLE" && (n = s("auth.oidc.buttons.apple"));
 			let o = t.toLowerCase();
-			return /* @__PURE__ */ i(r, {
+			return /* @__PURE__ */ r(i, {
 				type: "button",
 				variant: "secondary",
 				className: e,

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';\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,GAA+B;CAM7C,OAJI,EAAU,WAAW,IAChB,OAIP,kBAAC,OAAD;EAAK,WAAW;YACb,EAAU,KAAK,MAAa;GAC3B,IAAI,IAAQ,EAAE,4BAA4B;GAC1C,AAAI,MAAa,WACf,IAAQ,EAAE,2BAA2B,GAC5B,MAAa,YACtB,IAAQ,EAAE,0BAA0B;GAEtC,IAAM,IAAe,EAAS,aAAa;GAC3C,OACE,kBAAC,GAAD;IAEE,MAAK;IACL,SAAQ;IACR,WAAW;IACX,eAAe;KACb,OAAO,SAAS,OACd,GAAG,EAAgB,YAAY,IAChC;;cAGF;IACM,EAXF,EAWE;IAEX;EACE,CAAA"}
+{"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,GAA+B;CAM7C,OAJI,EAAU,WAAW,IAChB,OAIP,kBAAC,OAAD;EAAK,WAAW;YACb,EAAU,KAAK,MAAa;GAC3B,IAAI,IAAQ,EAAE,4BAA4B;GAC1C,AAAI,MAAa,WACf,IAAQ,EAAE,2BAA2B,GAC5B,MAAa,YACtB,IAAQ,EAAE,0BAA0B;GAEtC,IAAM,IAAe,EAAS,aAAa;GAC3C,OACE,kBAAC,GAAD;IAEE,MAAK;IACL,SAAQ;IACR,WAAW;IACX,eAAe;KACb,OAAO,SAAS,OACd,GAAG,EAAgB,YAAY,IAChC;;cAGF;IACM,EAXF,EAWE;IAEX;EACE,CAAA"}

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

@@ -1,8 +1,11 @@
 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 { Button as l, Form as u, FormError as d, FormField as f } from "@plumile/ui";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+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";
 //#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);
@@ -34,22 +37,22 @@ var h = ({ auth: h, onSuccess: g, defaultEmail: _, isAttemptingPasskey: v = !1,
 		g,
 		b
 	]), E = C;
-	return /* @__PURE__ */ m(u, {
+	return /* @__PURE__ */ u(m, {
 		className: t,
 		onSubmit: o((e) => {
 			T(e).catch(() => {});
 		}, [T]),
 		noValidate: !0,
 		initialFocus: "first-form-control",
-		children: [/* @__PURE__ */ m("div", {
+		children: [/* @__PURE__ */ u("div", {
 			className: i,
 			children: [
-				/* @__PURE__ */ p("p", {
+				/* @__PURE__ */ l("p", {
 					className: n,
 					children: b("auth.passkey.helper")
 				}),
-				E == null ? null : /* @__PURE__ */ p(d, { children: E }),
-				/* @__PURE__ */ p(f, {
+				E == null ? null : /* @__PURE__ */ l(f, { children: E }),
+				/* @__PURE__ */ l(p, {
 					label: b("auth.passkey.form.emailLabel"),
 					name: "passkey-email",
 					type: "email",
@@ -62,14 +65,14 @@ var h = ({ auth: h, onSuccess: g, defaultEmail: _, isAttemptingPasskey: v = !1,
 					required: !0
 				})
 			]
-		}), /* @__PURE__ */ m("div", {
+		}), /* @__PURE__ */ u("div", {
 			className: e,
-			children: [/* @__PURE__ */ p(l, {
+			children: [/* @__PURE__ */ l(d, {
 				type: "submit",
 				variant: "primary",
 				isLoading: h.isLoading,
 				children: b(v ? "auth.passkey.actions.submitting" : "auth.passkey.actions.submit")
-			}), y == null ? null : /* @__PURE__ */ p("button", {
+			}), y == null ? null : /* @__PURE__ */ l("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, Form, FormError, FormField } 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=\"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":";;;;;;AAkCA,IAAa,KAAoB,EAC/B,SACA,cACA,iBACA,yBAAsB,IACtB,uBACwB;CACxB,IAAM,EAAE,SAAM,GAA+B,EACvC,CAAC,GAAO,KAAY,EAAS,EAAK,aAAa,GAAG,EAClD,CAAC,GAAY,KAAiB,EAAwB,KAAK;CAEjE,QAAgB;EACd,AAAI,EAAK,aAAa,QAAQ,EAAK,cAAc,KAC/C,EAAS,EAAK,UAAU,GACf,KAAgB,QAAQ,MAAiB,MAClD,EAAS,EAAa;IAEvB,CAAC,EAAK,WAAW,EAAa,CAAC;CAElC,IAAM,IAAe,EACnB,OAAO,MAAsC;EAI3C,IAHA,EAAM,gBAAgB,EACtB,EAAc,KAAK,EAEf,EAAM,MAAM,KAAK,IAAI;GACvB,EAAc,EAAE,oCAAoC,CAAC;GACrD;;EAGF,IAAI;GACF,IAAM,IAAS,MAAM,EAAK,oBAAoB,EAAM,MAAM,CAAC;GAC3D,IAAI,MAAM,QAAQ,EAAO,QAAQ,IAAI,EAAO,QAAQ,WAAW,GAAG;IAOhE,EALE,EAAO,eAAe,OAIlB,EAAE,6BAA6B,GAH/B,EAAE,sCAAsC,EACtC,MAAM,IAAI,KAAK,EAAO,YAAY,CAAC,gBAAgB,EACpD,CAAC,CAEyB;IACjC;;GAEF,IACE,MAAM,QAAQ,EAAO,QAAQ,IAC7B,CAAC,EAAO,QAAQ,SAAS,UAAU,EACnC;IACA,EAAc,EAAE,mCAAmC,CAAC;IACpD;;GAIF,AAAI,MADiB,EAAK,iBAAiB,EAAE,OAAO,EAAM,MAAM,EAAE,CAAC,KACpD,aACb,GAAW;UAEP;GACN,EAAc,EAAE,6BAA6B,CAAC;;IAGlD;EAAC;EAAM;EAAO;EAAW;EAAE,CAC5B,EAEK,IAAY;CAWlB,OACE,kBAAC,GAAD;EACE,WAAW;EACX,UAZsB,GACvB,MAAsC;GACrC,EAAa,EAAM,CAAC,YAAY,GAE9B;KAEJ,CAAC,EAAa,CAMF;EACV,YAAA;EACA,cAAa;YAJf,CAME,kBAAC,OAAD;GAAK,WAAW;aAAhB;IACE,kBAAC,KAAD;KAAG,WAAW;eAAgB,EAAE,sBAAsB;KAAK,CAAA;IAC1D,KAAa,OAA4C,OAArC,kBAAC,GAAD,EAAA,UAAY,GAAsB,CAAA;IACvD,kBAAC,GAAD;KACE,OAAO,EAAE,+BAA+B;KACxC,MAAK;KACL,MAAK;KACL,OAAO;KACP,WAAW,MAAU;MAEnB,AADA,EAAS,EAAM,OAAO,MAAM,EAC5B,EAAc,KAAK;;KAErB,aAAa,EAAE,qCAAqC;KACpD,cAAa;KACb,UAAA;KACA,CAAA;IACE;MACN,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,GAAD;IAAQ,MAAK;IAAS,SAAQ;IAAU,WAAW,EAAK;cAElD,EADH,IACK,oCACA,8BAA8B;IAC7B,CAAA,EACR,KAAiB,OAQd,OAPF,kBAAC,UAAD;IACE,MAAK;IACL,WAAW;IACX,SAAS;cAER,EAAE,mCAAmC;IAC/B,CAAA,CAEP;KACD"}
+{"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,GAA+B,EACvC,CAAC,GAAO,KAAY,EAAS,EAAK,aAAa,GAAG,EAClD,CAAC,GAAY,KAAiB,EAAwB,KAAK;CAEjE,QAAgB;EACd,AAAI,EAAK,aAAa,QAAQ,EAAK,cAAc,KAC/C,EAAS,EAAK,UAAU,GACf,KAAgB,QAAQ,MAAiB,MAClD,EAAS,EAAa;IAEvB,CAAC,EAAK,WAAW,EAAa,CAAC;CAElC,IAAM,IAAe,EACnB,OAAO,MAAsC;EAI3C,IAHA,EAAM,gBAAgB,EACtB,EAAc,KAAK,EAEf,EAAM,MAAM,KAAK,IAAI;GACvB,EAAc,EAAE,oCAAoC,CAAC;GACrD;;EAGF,IAAI;GACF,IAAM,IAAS,MAAM,EAAK,oBAAoB,EAAM,MAAM,CAAC;GAC3D,IAAI,MAAM,QAAQ,EAAO,QAAQ,IAAI,EAAO,QAAQ,WAAW,GAAG;IAOhE,EALE,EAAO,eAAe,OAIlB,EAAE,6BAA6B,GAH/B,EAAE,sCAAsC,EACtC,MAAM,IAAI,KAAK,EAAO,YAAY,CAAC,gBAAgB,EACpD,CAAC,CAEyB;IACjC;;GAEF,IACE,MAAM,QAAQ,EAAO,QAAQ,IAC7B,CAAC,EAAO,QAAQ,SAAS,UAAU,EACnC;IACA,EAAc,EAAE,mCAAmC,CAAC;IACpD;;GAIF,AAAI,MADiB,EAAK,iBAAiB,EAAE,OAAO,EAAM,MAAM,EAAE,CAAC,KACpD,aACb,GAAW;UAEP;GACN,EAAc,EAAE,6BAA6B,CAAC;;IAGlD;EAAC;EAAM;EAAO;EAAW;EAAE,CAC5B,EAEK,IAAY;CAWlB,OACE,kBAAC,GAAD;EACE,WAAW;EACX,UAZsB,GACvB,MAAsC;GACrC,EAAa,EAAM,CAAC,YAAY,GAE9B;KAEJ,CAAC,EAAa,CAMF;EACV,YAAA;EACA,cAAa;YAJf,CAME,kBAAC,OAAD;GAAK,WAAW;aAAhB;IACE,kBAAC,KAAD;KAAG,WAAW;eAAgB,EAAE,sBAAsB;KAAK,CAAA;IAC1D,KAAa,OAA4C,OAArC,kBAAC,GAAD,EAAA,UAAY,GAAsB,CAAA;IACvD,kBAAC,GAAD;KACE,OAAO,EAAE,+BAA+B;KACxC,MAAK;KACL,MAAK;KACL,OAAO;KACP,WAAW,MAAU;MAEnB,AADA,EAAS,EAAM,OAAO,MAAM,EAC5B,EAAc,KAAK;;KAErB,aAAa,EAAE,qCAAqC;KACpD,cAAa;KACb,UAAA;KACA,CAAA;IACE;MACN,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,GAAD;IAAQ,MAAK;IAAS,SAAQ;IAAU,WAAW,EAAK;cAElD,EADH,IACK,oCACA,8BAA8B;IAC7B,CAAA,EACR,KAAiB,OAQd,OAPF,kBAAC,UAAD;IACE,MAAK;IACL,WAAW;IACX,SAAS;cAER,EAAE,mCAAmC;IAC/B,CAAA,CAEP;KACD"}

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 { LoginForm as o } from "@plumile/ui";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { LoginForm as c } from "@plumile/ui/atomic/organisms/login_form/LoginForm.js";
 //#region src/auth/login/PasswordLoginPanel.tsx
 var l = ({ auth: l, defaultEmail: u, onForgotPassword: d, onSuccess: f, providers: p }) => {
 	let { t: m } = i();
-	return /* @__PURE__ */ s(r, {
+	return /* @__PURE__ */ o(r, {
 		title: m("auth.passwordLogin.title"),
-		children: /* @__PURE__ */ c("div", {
+		children: /* @__PURE__ */ s("div", {
 			className: t,
 			children: [
-				/* @__PURE__ */ s(o, {
+				/* @__PURE__ */ o(c, {
 					auth: l,
 					onSuccess: f,
 					defaultEmail: u
 				}),
-				/* @__PURE__ */ s("div", {
+				/* @__PURE__ */ o("div", {
 					className: e,
-					children: /* @__PURE__ */ s("button", {
+					children: /* @__PURE__ */ o("button", {
 						type: "button",
 						className: n,
 						onClick: d,
 						children: m("auth.passwordLogin.forgotPassword")
 					})
 				}),
-				/* @__PURE__ */ s(a, { providers: p })
+				/* @__PURE__ */ o(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, 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,GAA+B;CAC7C,OACE,kBAAC,GAAD;EAAW,OAAO,EAAE,2BAA2B;YAC7C,kBAAC,OAAD;GAAK,WAAW;aAAhB;IACE,kBAAC,GAAD;KACQ;KACK;KACG;KACd,CAAA;IACF,kBAAC,OAAD;KAAK,WAAW;eACd,kBAAC,UAAD;MACE,MAAK;MACL,WAAW;MACX,SAAS;gBAER,EAAE,oCAAoC;MAChC,CAAA;KACL,CAAA;IACN,kBAAC,GAAD,EAAwB,cAAa,CAAA;IACjC;;EACI,CAAA"}
+{"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,GAA+B;CAC7C,OACE,kBAAC,GAAD;EAAW,OAAO,EAAE,2BAA2B;YAC7C,kBAAC,OAAD;GAAK,WAAW;aAAhB;IACE,kBAAC,GAAD;KACQ;KACK;KACG;KACd,CAAA;IACF,kBAAC,OAAD;KAAK,WAAW;eACd,kBAAC,UAAD;MACE,MAAK;MACL,WAAW;MACX,SAAS;gBAER,EAAE,oCAAoC;MAChC,CAAA;KACL,CAAA;IACN,kBAAC,GAAD,EAAwB,cAAa,CAAA;IACjC;;EACI,CAAA"}

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, vars } from '@plumile/ui';\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: 'brandDarkGray',\n  fontSize: 'sm',\n  margin: 0,\n  lineHeight: 1.6,\n});\n\nexport const divider = sprinkles({\n  alignItems: 'center',\n  color: 'brandDarkGray',\n  display: 'flex',\n  gap: 2,\n  marginTop: 5,\n  marginBottom: 3,\n});\n\nexport const dividerLine = sprinkles({\n  backgroundColor: 'brandPrimaryRed',\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    color: 'brandPrimaryRed',\n    fontWeight: 'semibold',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    background: 'transparent',\n    borderWidth: 0,\n    borderStyle: 'none',\n    cursor: 'pointer',\n    padding: 0,\n    textDecoration: 'none',\n    ':hover': {\n      color: vars.colors.brandSecondaryOrange,\n      textDecoration: 'underline',\n    },\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: 'brandPrimaryRed',\n  letterSpacing: 'tight',\n});\n\nexport const footer = sprinkles({\n  marginTop: 4,\n});\n\nexport const brandGhostButton = style([\n  sprinkles({\n    borderColor: 'brandPrimaryRed',\n    borderWidth: 'px',\n    borderStyle: 'solid',\n    color: 'brandPrimaryRed',\n    backgroundColor: 'brandLightGray',\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover:not(:disabled)': {\n        backgroundColor: `color-mix(in srgb, ${vars.colors.brandPrimaryRed} 8%, transparent)`,\n        color: vars.colors.brandSecondaryOrange,\n        borderColor: vars.colors.brandSecondaryOrange,\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 } from '@plumile/ui/theme/sprinkles.css.js';\nimport { vars } from '@plumile/ui/theme/themeContract.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: 'brandDarkGray',\n  fontSize: 'sm',\n  margin: 0,\n  lineHeight: 1.6,\n});\n\nexport const divider = sprinkles({\n  alignItems: 'center',\n  color: 'brandDarkGray',\n  display: 'flex',\n  gap: 2,\n  marginTop: 5,\n  marginBottom: 3,\n});\n\nexport const dividerLine = sprinkles({\n  backgroundColor: 'brandPrimaryRed',\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    color: 'brandPrimaryRed',\n    fontWeight: 'semibold',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    background: 'transparent',\n    borderWidth: 0,\n    borderStyle: 'none',\n    cursor: 'pointer',\n    padding: 0,\n    textDecoration: 'none',\n    ':hover': {\n      color: vars.colors.brandSecondaryOrange,\n      textDecoration: 'underline',\n    },\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: 'brandPrimaryRed',\n  letterSpacing: 'tight',\n});\n\nexport const footer = sprinkles({\n  marginTop: 4,\n});\n\nexport const brandGhostButton = style([\n  sprinkles({\n    borderColor: 'brandPrimaryRed',\n    borderWidth: 'px',\n    borderStyle: 'solid',\n    color: 'brandPrimaryRed',\n    backgroundColor: 'brandLightGray',\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover:not(:disabled)': {\n        backgroundColor: `color-mix(in srgb, ${vars.colors.brandPrimaryRed} 8%, transparent)`,\n        color: vars.colors.brandSecondaryOrange,\n        borderColor: vars.colors.brandSecondaryOrange,\n      },\n    },\n  },\n]);\n"],"mappings":""}