@abyss-project/commons-front-core 6.0.0 → 6.1.0

package/dist/auth/components/AuthHeroLayout/AuthHeroLayout.component.d.ts

@@ -0,0 +1,39 @@
+import { FC, ReactNode } from 'react';
+import { AbyssService } from '@abyss-project/main';
+/**
+ * - `web` (default): the hero below `md` only; from `md` up the children render alone, so the
+ *   host keeps its own desktop layout (abyss-main's split screen).
+ * - `native`: the hero at every width, the sheet centred and at most `SHEET_MAX_WIDTH` wide on a
+ *   large screen (a tablet in landscape keeps the service's identity).
+ */
+export declare enum AuthHeroLayoutVariant {
+    WEB = "web",
+    NATIVE = "native"
+}
+export type AuthHeroLayoutProps = {
+    /**
+     * Requested service, already validated. null/undefined or a service without a tagline -> Abyss
+     * logo, name and tagline; a service without logo (Odyssey) -> Abyss logo, its own name and tagline.
+     */
+    service?: AbyssService | null;
+    /** `AuthHeroLayoutVariant.WEB` by default. */
+    variant?: AuthHeroLayoutVariant;
+    children: ReactNode;
+};
+/**
+ * The frame of the sign-in screen (D1, D6): a hero carrying the requested service's logo, name and
+ * tagline on the brand gradient, then a sheet with rounded top corners climbing over it, holding
+ * the children. The hero pads the top safe area, the sheet the bottom one (D7). The sheet is the
+ * page's `<main>` landmark (the hosts have none around the sign-in screen).
+ *
+ * - `AuthHeroLayoutVariant.WEB` (default): the hero below `md` only. From `md` up the children
+ *   render alone, so the host keeps its own desktop layout; the wrappers then take no box
+ *   (`display: contents`), which keeps the children mounted when the screen crosses the breakpoint
+ *   (a rotated tablet does not restart the flow).
+ * - `AuthHeroLayoutVariant.NATIVE`: the hero at every width; on a screen wider than a phone the
+ *   sheet is centred, at most 480 px wide, and the hero's content is aligned on it.
+ *
+ * Children shrink the hero through `useAuthHero().setCompact` (`AuthFlow` does it at the code,
+ * second-factor and enrolment steps).
+ */
+export declare const AuthHeroLayout: FC<AuthHeroLayoutProps>;

package/dist/auth/components/AuthHeroLayout/AuthHeroLayout.component.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/auth/components/AuthHeroLayout/auth-hero.context.d.ts

@@ -0,0 +1,11 @@
+import { Context } from 'react';
+export interface AuthHeroContextValue {
+    /** Shrinks the hero (tile and name on one line, no tagline), or brings it back to full size. */
+    setCompact: (compact: boolean) => void;
+    /** Rendered in the hero's sheet: the hero pads the top safe area, the sheet the bottom one. */
+    insideHero: boolean;
+}
+/** Outside an `AuthHeroLayout` (or on a large screen): no hero to shrink, no safe area handled. */
+export declare const AuthHeroContext: Context<AuthHeroContextValue>;
+/** The hero around the auth screen, if any; a no-op outside `AuthHeroLayout`. */
+export declare const useAuthHero: () => AuthHeroContextValue;

package/dist/auth/components/index.d.ts

@@ -1,5 +1,8 @@
 export { AuthFlow } from './AuthFlow/AuthFlow.component';
 export type { AuthFlowProps } from './AuthFlow/AuthFlow.component';
+export { AuthHeroLayout, AuthHeroLayoutVariant, } from './AuthHeroLayout/AuthHeroLayout.component';
+export type { AuthHeroLayoutProps } from './AuthHeroLayout/AuthHeroLayout.component';
+export { useAuthHero } from './AuthHeroLayout/auth-hero.context';
 export type { AuthFlowContext, AuthFlowLegal, AuthFlowResult, } from './AuthFlow/auth-flow.types';
 export { AuthProviderButtons, AuthProviderKind, } from './AuthProviderButtons/AuthProviderButtons.component';
 export type { AuthFlowProviders, AuthProviderButtonsProps, } from './AuthProviderButtons/AuthProviderButtons.component';

package/dist/auth/components/shared/OneTimeCodeField.component.d.ts

@@ -10,8 +10,12 @@ type Props = {
     autoFocus?: boolean;
 };
 /**
- * Six-digit code field (e-mail code, TOTP). `one-time-code` lets the platform offer the code it
- * just received; a pasted code keeps working whatever its spacing, since only the digits are kept.
+ * Six-digit code field (e-mail code, TOTP), drawn as six cells. The cells only render the value:
+ * the field stays a single real `<input>` laid transparent over them, so `one-time-code` still
+ * lets the platform offer the code it just received, a pasted code keeps working whatever its
+ * spacing (only the digits are kept), and a click on any cell lands in that input. After an
+ * error, the focus comes back to the input as soon as it can be typed in again, and the cells
+ * leave their red state at the first new digit (the host's message keeps saying the cause).
  */
 export declare const OneTimeCodeField: ({ id, label, value, onChange, disabled, error, autoFocus, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/auth/components/shared/OneTimeCodeField.component.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/auth/components/test-support/own-css.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The declarations emotion generated for an element's own classes (pseudo-elements excluded), as
+ * written: unlike `getComputedStyle`, it keeps `var(...)` and `calc(...)` values readable.
+ */
+export declare const ownCss: (element: Element) => string;

package/dist/cookie-consent.js

@@ -1,4 +1,4 @@
-import { A as s, c as a, C as n, a as C, D as i, R as t, V as r, d as A, f as k, r as c, e as l, u as D, b as E, w as I } from "./CookieConsentSettings.component-Da4l2tFQ.js";
+import { A as s, c as a, C as n, a as C, D as i, R as t, V as r, d as A, f as k, r as c, e as l, u as D, b as E, w as I } from "./CookieConsentSettings.component-3Z3YnI96.js";
 export {
   s as AbyssCookieConsentProvider,
   a as COOKIE_NAME,

package/dist/hooks/use-rich-intl.hook.d.ts

@@ -203,6 +203,10 @@ export declare const translations: {
                         title: string;
                         content: string;
                     };
+                    "monitor-incident-escalated": {
+                        title: string;
+                        content: string;
+                    };
                     "monitor-incident-summary": {
                         title: string;
                         content: string;
@@ -1563,6 +1567,19 @@ export declare const translations: {
             };
         };
         auth: {
+            hero: {
+                tagline: {
+                    ABYSS: string;
+                    ABYSS_CLOUD: string;
+                    ABYSS_MEMORIES: string;
+                    ABYSS_TRAINING: string;
+                    ABYSS_FORM: string;
+                    ABYSS_CRYPT: string;
+                    ABYSS_BANKING: string;
+                    ABYSS_SPOTLIGHT: string;
+                    ABYSS_GAME_ODYSSEY: string;
+                };
+            };
             flow: {
                 email: {
                     title: string;
@@ -2062,6 +2079,10 @@ export declare const translations: {
                         title: string;
                         content: string;
                     };
+                    "monitor-incident-escalated": {
+                        title: string;
+                        content: string;
+                    };
                     "monitor-incident-summary": {
                         title: string;
                         content: string;
@@ -3422,6 +3443,19 @@ export declare const translations: {
             };
         };
         auth: {
+            hero: {
+                tagline: {
+                    ABYSS: string;
+                    ABYSS_CLOUD: string;
+                    ABYSS_MEMORIES: string;
+                    ABYSS_TRAINING: string;
+                    ABYSS_FORM: string;
+                    ABYSS_CRYPT: string;
+                    ABYSS_BANKING: string;
+                    ABYSS_SPOTLIGHT: string;
+                    ABYSS_GAME_ODYSSEY: string;
+                };
+            };
             flow: {
                 email: {
                     title: string;

package/dist/{index-CzpB9qD9.js → index-B01u4RDj.js}

@@ -1,4 +1,4 @@
-import { P as L, N as M, k as $, D as E, l as y, T as S, I as j } from "./index-DI9IV0Ew.js";
+import { P as L, N as M, k as $, D as E, l as y, T as S, I as j } from "./index-B9H2t9pf.js";
 class v {
   /**
   @internal