@clicoh/orion-library 1.2.0-beta.16 → 1.2.0-beta.18

package/dist/components/04-templates/LoginTemplate/LoginForm.d.ts

@@ -1,5 +1,21 @@
 import { ReactNode } from 'react';
 import { type SetupMfaAccessibilityLabels } from './SetupMfa';
+/** Copy of the form. Each one falls back to the original Spanish text. */
+export type LoginFormLabels = {
+    username?: string;
+    password?: string;
+    code?: string;
+    submit?: string;
+    back?: string;
+};
+/** What `renderSubmit` receives to draw its own submit button. */
+export type LoginFormSubmitState = {
+    /** `true` while `login` runs. */
+    pending: boolean;
+    /** `labels.submit`, or its default. */
+    label: string;
+};
+export type LoginFormErrorStyle = 'text' | 'message';
 type LoginFormProps = {
     login: (formData: FormData) => Promise<string | undefined>;
     callback?: () => void;
@@ -12,21 +28,68 @@ type LoginFormProps = {
     getOtpDigitAriaLabel?: (digit: number) => string;
     loadingLabel?: string;
     setupMfaAccessibilityLabels?: SetupMfaAccessibilityLabels;
+    title?: ReactNode;
+    description?: ReactNode;
+    labels?: LoginFormLabels;
+    forgotPassword?: ReactNode;
+    footer?: ReactNode;
+    renderSubmit?: (state: LoginFormSubmitState) => ReactNode;
+    errorStyle?: LoginFormErrorStyle;
+    toastErrors?: boolean;
+    showSpinner?: boolean;
 };
 /**
- * LoginForm component for rendering a login form with email and password inputs.
+ * LoginForm component for rendering a login form with email and password
+ * inputs, the verification code step and the MFA setup wizard.
+ *
+ * Every prop after `setupMfaAccessibilityLabels` is optional and keeps the
+ * original look when left out.
  *
  * @component
  * @example
  * // Example usage of LoginForm component
  * <LoginForm login={yourLoginFunction} callback={yourCallbackFunction} />
  *
+ * @example
+ * // Own copy, a recovery link, the error above the button and a custom submit
+ * <LoginForm
+ *   login={yourLoginFunction}
+ *   title="Welcome back"
+ *   description="Sign in with your account."
+ *   labels={{ username: 'Email', password: 'Password', submit: 'Sign in' }}
+ *   forgotPassword={<a href="/recover">Forgot your password?</a>}
+ *   footer={<Paragraph size="body-2">No access? Ask your admin.</Paragraph>}
+ *   errorStyle="message"
+ *   toastErrors={false}
+ *   showSpinner={false}
+ *   renderSubmit={({ pending, label }) => (
+ *     <Button type="submit" disabled={pending} className="w-full">{label}</Button>
+ *   )}
+ * />
+ *
  * @param {Object} props - The properties of the LoginForm component.
- * @param {Function} props.login - The function to handle the login process.
+ * @param {Function} props.login - The function to handle the login process. Resolves with a QR image to start the MFA setup, or with nothing when done; rejects with the message to show.
  * @param {Function} [props.callback] - Optional callback function to be called after a successful login.
+ * @param {boolean} [props.needCode=false] - Shows the verification code step instead of the credentials.
+ * @param {number} [props.lengthCode=6] - Digits of the verification code.
+ * @param {Function} [props.setupMfa] - Receives the two codes of the MFA setup wizard.
+ * @param {string} [props.showPasswordAriaLabel] - Accessible name of the button that shows the password.
+ * @param {string} [props.hidePasswordAriaLabel] - Accessible name of the button that hides the password.
+ * @param {Function} [props.getOtpDigitAriaLabel] - Accessible name of each code digit.
+ * @param {string} [props.loadingLabel] - Accessible name of the spinner.
+ * @param {SetupMfaAccessibilityLabels} [props.setupMfaAccessibilityLabels] - Accessible names of the MFA setup wizard.
+ * @param {ReactNode} [props.title='Bienvenido!'] - Heading above the form.
+ * @param {ReactNode} [props.description] - Text under the heading.
+ * @param {LoginFormLabels} [props.labels] - Field, code and button copy.
+ * @param {ReactNode} [props.forgotPassword] - Content above the submit button on the credentials step, such as a password recovery link.
+ * @param {ReactNode} [props.footer] - Content under the form, on the credentials and code steps.
+ * @param {Function} [props.renderSubmit] - Draws the submit button instead of the default one. It must render a `type="submit"` button.
+ * @param {'text' | 'message'} [props.errorStyle='text'] - `text` shows the error as red text under the buttons; `message` as an error `InlineMessage` above the submit button.
+ * @param {boolean} [props.toastErrors=true] - Also shows each error in a toast.
+ * @param {boolean} [props.showSpinner=true] - Shows a spinner under the form while `login` runs. Turn it off when `renderSubmit` already shows the wait.
  *
  * @returns {ReactNode} The rendered LoginForm component.
  */
-export declare function LoginForm({ login, callback, needCode, lengthCode, setupMfa, showPasswordAriaLabel, hidePasswordAriaLabel, getOtpDigitAriaLabel, loadingLabel, setupMfaAccessibilityLabels, }: LoginFormProps): ReactNode;
+export declare function LoginForm({ login, callback, needCode, lengthCode, setupMfa, showPasswordAriaLabel, hidePasswordAriaLabel, getOtpDigitAriaLabel, loadingLabel, setupMfaAccessibilityLabels, title, description, labels, forgotPassword, footer, renderSubmit, errorStyle, toastErrors, showSpinner, }: LoginFormProps): ReactNode;
 export {};
 //# sourceMappingURL=LoginForm.d.ts.map

package/dist/components/04-templates/LoginTemplate/LoginForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoginForm.d.ts","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/LoginForm.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAoB,SAAS,EAAuB,MAAM,OAAO,CAAC;AAWzE,OAAO,EAAY,KAAK,2BAA2B,EAAE,MAAM,YAAY,CAAC;AAExE,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC3D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,SAAS,CAAC,CAAC;IACzE,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2BAA2B,CAAC,EAAE,2BAA2B,CAAC;CAC3D,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,UAAc,EACd,QAAQ,EACR,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,YAAY,EACZ,2BAA2B,GAC5B,EAAE,cAAc,GAAG,SAAS,CAwI5B"}
+{"version":3,"file":"LoginForm.d.ts","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/LoginForm.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAoB,SAAS,EAAuB,MAAM,OAAO,CAAC;AAYzE,OAAO,EAAY,KAAK,2BAA2B,EAAE,MAAM,YAAY,CAAC;AAExE,0EAA0E;AAC1E,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,kEAAkE;AAClE,MAAM,MAAM,oBAAoB,GAAG;IACjC,iCAAiC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,SAAS,CAAC;AAErD,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC3D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,SAAS,CAAC,CAAC;IACzE,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2BAA2B,CAAC,EAAE,2BAA2B,CAAC;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,SAAS,CAAC;IAC1D,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAUF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,UAAc,EACd,QAAQ,EACR,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,YAAY,EACZ,2BAA2B,EAC3B,KAAqB,EACrB,WAAW,EACX,MAAM,EACN,cAAc,EACd,MAAM,EACN,YAAY,EACZ,UAAmB,EACnB,WAAkB,EAClB,WAAkB,GACnB,EAAE,cAAc,GAAG,SAAS,CAkK5B"}

package/dist/components/04-templates/LoginTemplate/LoginForm.jsx

@@ -3,33 +3,81 @@ import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 import { FiArrowRight } from 'react-icons/fi';
 import { Button, Heading, Input, OtpInput, Paragraph, showToast, Spinner, } from '../../01-atoms';
+import { InlineMessage } from '../../02-molecules';
 import { SetupMfa } from './SetupMfa';
+const DEFAULT_LABELS = {
+    username: 'Usuario',
+    password: 'Contraseña',
+    code: 'Codigo de Verificación',
+    submit: 'Iniciar sesión',
+    back: 'Volver',
+};
 /**
- * LoginForm component for rendering a login form with email and password inputs.
+ * LoginForm component for rendering a login form with email and password
+ * inputs, the verification code step and the MFA setup wizard.
+ *
+ * Every prop after `setupMfaAccessibilityLabels` is optional and keeps the
+ * original look when left out.
  *
  * @component
  * @example
  * // Example usage of LoginForm component
  * <LoginForm login={yourLoginFunction} callback={yourCallbackFunction} />
  *
+ * @example
+ * // Own copy, a recovery link, the error above the button and a custom submit
+ * <LoginForm
+ *   login={yourLoginFunction}
+ *   title="Welcome back"
+ *   description="Sign in with your account."
+ *   labels={{ username: 'Email', password: 'Password', submit: 'Sign in' }}
+ *   forgotPassword={<a href="/recover">Forgot your password?</a>}
+ *   footer={<Paragraph size="body-2">No access? Ask your admin.</Paragraph>}
+ *   errorStyle="message"
+ *   toastErrors={false}
+ *   showSpinner={false}
+ *   renderSubmit={({ pending, label }) => (
+ *     <Button type="submit" disabled={pending} className="w-full">{label}</Button>
+ *   )}
+ * />
+ *
  * @param {Object} props - The properties of the LoginForm component.
- * @param {Function} props.login - The function to handle the login process.
+ * @param {Function} props.login - The function to handle the login process. Resolves with a QR image to start the MFA setup, or with nothing when done; rejects with the message to show.
  * @param {Function} [props.callback] - Optional callback function to be called after a successful login.
+ * @param {boolean} [props.needCode=false] - Shows the verification code step instead of the credentials.
+ * @param {number} [props.lengthCode=6] - Digits of the verification code.
+ * @param {Function} [props.setupMfa] - Receives the two codes of the MFA setup wizard.
+ * @param {string} [props.showPasswordAriaLabel] - Accessible name of the button that shows the password.
+ * @param {string} [props.hidePasswordAriaLabel] - Accessible name of the button that hides the password.
+ * @param {Function} [props.getOtpDigitAriaLabel] - Accessible name of each code digit.
+ * @param {string} [props.loadingLabel] - Accessible name of the spinner.
+ * @param {SetupMfaAccessibilityLabels} [props.setupMfaAccessibilityLabels] - Accessible names of the MFA setup wizard.
+ * @param {ReactNode} [props.title='Bienvenido!'] - Heading above the form.
+ * @param {ReactNode} [props.description] - Text under the heading.
+ * @param {LoginFormLabels} [props.labels] - Field, code and button copy.
+ * @param {ReactNode} [props.forgotPassword] - Content above the submit button on the credentials step, such as a password recovery link.
+ * @param {ReactNode} [props.footer] - Content under the form, on the credentials and code steps.
+ * @param {Function} [props.renderSubmit] - Draws the submit button instead of the default one. It must render a `type="submit"` button.
+ * @param {'text' | 'message'} [props.errorStyle='text'] - `text` shows the error as red text under the buttons; `message` as an error `InlineMessage` above the submit button.
+ * @param {boolean} [props.toastErrors=true] - Also shows each error in a toast.
+ * @param {boolean} [props.showSpinner=true] - Shows a spinner under the form while `login` runs. Turn it off when `renderSubmit` already shows the wait.
  *
  * @returns {ReactNode} The rendered LoginForm component.
  */
-export function LoginForm({ login, callback, needCode = false, lengthCode = 6, setupMfa, showPasswordAriaLabel, hidePasswordAriaLabel, getOtpDigitAriaLabel, loadingLabel, setupMfaAccessibilityLabels, }) {
+export function LoginForm({ login, callback, needCode = false, lengthCode = 6, setupMfa, showPasswordAriaLabel, hidePasswordAriaLabel, getOtpDigitAriaLabel, loadingLabel, setupMfaAccessibilityLabels, title = 'Bienvenido!', description, labels, forgotPassword, footer, renderSubmit, errorStyle = 'text', toastErrors = true, showSpinner = true, }) {
     const [errorMessage, setErrorMessage] = useState();
     const [otpCode, setOtpCode] = useState('');
     const [isPending, setIsPending] = useState(false);
     const [qr, setQr] = useState();
     const [showLogin, setShowLogin] = useState(!needCode);
+    const copy = { ...DEFAULT_LABELS, ...labels };
     useEffect(() => {
         setShowLogin(!needCode);
     }, [needCode]);
     const handlerSubmit = (event) => {
         event.preventDefault();
         setIsPending(true);
+        setErrorMessage(undefined);
         const formData = new FormData(event.currentTarget);
         if (needCode && otpCode) {
             formData.append('otpCode', otpCode);
@@ -41,7 +89,8 @@ export function LoginForm({ login, callback, needCode = false, lengthCode = 6, s
             .catch((error) => {
             const message = error instanceof Error ? error.message : String(error);
             setErrorMessage(message);
-            showToast(message, 'error');
+            if (toastErrors)
+                showToast(message, 'error');
         })
             .finally(() => {
             setIsPending(false);
@@ -55,19 +104,30 @@ export function LoginForm({ login, callback, needCode = false, lengthCode = 6, s
     const handleSetupMfa = (firstCode, secondCode) => {
         return setupMfa?.(firstCode, secondCode);
     };
+    const submit = renderSubmit?.({
+        pending: isPending,
+        label: copy.submit,
+    }) ?? (<Button type="submit" iconR={<FiArrowRight />} aria-disabled={isPending} disabled={isPending} className="w-full">
+      {copy.submit}
+    </Button>);
     return (<>
       {!qr && (<>
-          <Heading level="h4">Bienvenido!</Heading>
+          <div className="flex flex-col items-center gap-2 text-center">
+            <Heading level="h4">{title}</Heading>
+            {!!description && (<Paragraph className="text-gray-1 dark:text-gray-2 text-pretty">
+                {description}
+              </Paragraph>)}
+          </div>
           <form onSubmit={handlerSubmit} aria-busy={isPending} className="flex w-72 flex-col items-center gap-4">
             {!!showLogin && (<>
-                <Input label="Usuario" input={{
+                <Input label={copy.username} input={{
                     type: 'email',
                     name: 'username',
                     required: true,
                     autoComplete: 'email',
                     disabled: isPending,
                 }}/>
-                <Input label="Contraseña" showPasswordAriaLabel={showPasswordAriaLabel} hidePasswordAriaLabel={hidePasswordAriaLabel} input={{
+                <Input label={copy.password} showPasswordAriaLabel={showPasswordAriaLabel} hidePasswordAriaLabel={hidePasswordAriaLabel} input={{
                     type: 'password',
                     name: 'password',
                     required: true,
@@ -76,21 +136,25 @@ export function LoginForm({ login, callback, needCode = false, lengthCode = 6, s
                 }}/>
               </>)}
 
-            {!showLogin && (<OtpInput label="Codigo de Verificación" length={lengthCode} handleSubmit={(otp) => setOtpCode(otp)} getDigitAriaLabel={getOtpDigitAriaLabel}/>)}
+            {!showLogin && (<OtpInput label={copy.code} length={lengthCode} handleSubmit={(otp) => setOtpCode(otp)} getDigitAriaLabel={getOtpDigitAriaLabel}/>)}
+
+            {errorStyle === 'message' && !!errorMessage && (<InlineMessage modifier="error" className="w-full">
+                {errorMessage}
+              </InlineMessage>)}
+            {!!showLogin && forgotPassword}
 
-            <Button type="submit" iconR={<FiArrowRight />} aria-disabled={isPending} disabled={isPending} className="w-full">
-              Iniciar sesión
-            </Button>
+            {submit}
             {!showLogin && (<Button className="w-56" type="button" onClick={onCancel}>
-                Volver
+                {copy.back}
               </Button>)}
-            {!!errorMessage && (<Paragraph role="alert" className="text-error dark:text-error-1 text-center" size="chips">
+            {errorStyle === 'text' && !!errorMessage && (<Paragraph role="alert" className="text-error dark:text-error-1 text-center" size="chips">
                 {errorMessage}
               </Paragraph>)}
-            <div className={clsx('self-center', !isPending && 'invisible opacity-0')}>
-              <Spinner label={loadingLabel}/>
-            </div>
+            {showSpinner && (<div className={clsx('self-center', !isPending && 'invisible opacity-0')}>
+                <Spinner label={loadingLabel}/>
+              </div>)}
           </form>
+          {footer}
         </>)}
       {!!qr && (<SetupMfa lengthCode={lengthCode} onCancel={onCancel} qrImage={qr} setupMfa={handleSetupMfa} accessibilityLabels={setupMfaAccessibilityLabels}/>)}
     </>);

package/dist/components/04-templates/LoginTemplate/LoginForm.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"LoginForm.jsx","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/LoginForm.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAA+B,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EACL,MAAM,EACN,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,OAAO,GACR,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAoC,MAAM,YAAY,CAAC;AAgBxE;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,UAAU,GAAG,CAAC,EACd,QAAQ,EACR,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,YAAY,EACZ,2BAA2B,GACZ;IACf,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAU,CAAC;IAC3D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IACnD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC3D,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,EAAsB,CAAC;IACnD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,CAAC,QAAQ,CAAC,CAAC;IAE/D,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,aAAa,GAAsC,CAAC,KAAK,EAAE,EAAE;QACjE,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,YAAY,CAAC,IAAI,CAAC,CAAC;QAEnB,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;QAEnD,IAAI,QAAQ,IAAI,OAAO,EAAE,CAAC;YACxB,QAAQ,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QACtC,CAAC;QAED,KAAK,CAAC,QAAQ,CAAC;aACZ,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE;YAChB,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC;QAC1C,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;YACf,MAAM,OAAO,GAAG,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACvE,eAAe,CAAC,OAAO,CAAC,CAAC;YACzB,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAC9B,CAAC,CAAC;aACD,OAAO,CAAC,GAAG,EAAE;YACZ,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,KAAK,CAAC,SAAS,CAAC,CAAC;QACjB,UAAU,CAAC,EAAE,CAAC,CAAC;QACf,YAAY,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,SAAiB,EAAE,UAAkB,EAAE,EAAE;QAC/D,OAAO,QAAQ,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEF,OAAO,CACL,EACE;MAAA,CAAC,CAAC,EAAE,IAAI,CACN,EACE;UAAA,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CACxC;UAAA,CAAC,IAAI,CACH,QAAQ,CAAC,CAAC,aAAa,CAAC,CACxB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,SAAS,CAAC,uCAAuC,CAEjD;YAAA,CAAC,CAAC,CAAC,SAAS,IAAI,CACd,EACE;gBAAA,CAAC,KAAK,CACJ,KAAK,CAAC,SAAS,CACf,KAAK,CAAC,CAAC;oBACL,IAAI,EAAE,OAAO;oBACb,IAAI,EAAE,UAAU;oBAChB,QAAQ,EAAE,IAAI;oBACd,YAAY,EAAE,OAAO;oBACrB,QAAQ,EAAE,SAAS;iBACpB,CAAC,EAEJ;gBAAA,CAAC,KAAK,CACJ,KAAK,CAAC,YAAY,CAClB,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAC7C,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAC7C,KAAK,CAAC,CAAC;oBACL,IAAI,EAAE,UAAU;oBAChB,IAAI,EAAE,UAAU;oBAChB,QAAQ,EAAE,IAAI;oBACd,YAAY,EAAE,kBAAkB;oBAChC,QAAQ,EAAE,SAAS;iBACpB,CAAC,EAEN;cAAA,GAAG,CACJ,CAED;;YAAA,CAAC,CAAC,SAAS,IAAI,CACb,CAAC,QAAQ,CACP,KAAK,CAAC,wBAAwB,CAC9B,MAAM,CAAC,CAAC,UAAU,CAAC,CACnB,YAAY,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CACvC,iBAAiB,CAAC,CAAC,oBAAoB,CAAC,EACxC,CACH,CAED;;YAAA,CAAC,MAAM,CACL,IAAI,CAAC,QAAQ,CACb,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,AAAD,EAAG,CAAC,CACxB,aAAa,CAAC,CAAC,SAAS,CAAC,CACzB,QAAQ,CAAC,CAAC,SAAS,CAAC,CACpB,SAAS,CAAC,QAAQ,CAElB;;YACF,EAAE,MAAM,CACR;YAAA,CAAC,CAAC,SAAS,IAAI,CACb,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CACvD;;cACF,EAAE,MAAM,CAAC,CACV,CACD;YAAA,CAAC,CAAC,CAAC,YAAY,IAAI,CACjB,CAAC,SAAS,CACR,IAAI,CAAC,OAAO,CACZ,SAAS,CAAC,0CAA0C,CACpD,IAAI,CAAC,OAAO,CAEZ;gBAAA,CAAC,YAAY,CACf;cAAA,EAAE,SAAS,CAAC,CACb,CACD;YAAA,CAAC,GAAG,CACF,SAAS,CAAC,CAAC,IAAI,CACb,aAAa,EACb,CAAC,SAAS,IAAI,qBAAqB,CACpC,CAAC,CAEF;cAAA,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,EAC/B;YAAA,EAAE,GAAG,CACP;UAAA,EAAE,IAAI,CACR;QAAA,GAAG,CACJ,CACD;MAAA,CAAC,CAAC,CAAC,EAAE,IAAI,CACP,CAAC,QAAQ,CACP,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,EAAE,CAAC,CACZ,QAAQ,CAAC,CAAC,cAAc,CAAC,CACzB,mBAAmB,CAAC,CAAC,2BAA2B,CAAC,EACjD,CACH,CACH;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC"}
+{"version":3,"file":"LoginForm.jsx","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/LoginForm.tsx"],"names":[],"mappings":"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"}

package/dist/components/04-templates/LoginTemplate/LoginTemplate.d.ts

@@ -1,27 +1,45 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import { StaticImageData } from 'next/dist/shared/lib/get-img-props';
 type LoginTemplateProps = {
     children: ReactNode;
     loginImg?: StaticImageData;
     logoAriaLabel?: string;
     logo?: ReactNode;
+    aside?: ReactNode;
+    imagePosition?: CSSProperties['objectPosition'];
 };
 /**
- * LoginTemplate component for rendering the login page layout.
+ * LoginTemplate component for rendering the login page layout: an image on
+ * the left and the content on the right. On small screens only the content
+ * shows.
  *
  * @component
  * @example
  * // Example usage of LoginTemplate component
  * <LoginTemplate>
- *   <LoginForm handlerLogin={yourHandlerLoginFunction} />
+ *   <LoginForm login={yourLoginFunction} />
+ * </LoginTemplate>
+ *
+ * @example
+ * // A tagline over the image, keeping the left part of the image in view
+ * <LoginTemplate
+ *   loginImg={productImage}
+ *   imagePosition="30% 50%"
+ *   aside={<Heading level="h4">Your tagline</Heading>}
+ * >
+ *   <LoginForm login={yourLoginFunction} />
  * </LoginTemplate>
  *
  * @param {Object} props - The properties of the LoginTemplate component.
  * @param {ReactNode} props.children - The content to be rendered inside the login template.
+ * @param {StaticImageData} [props.loginImg] - Image on the left. Defaults to the clicOH one.
+ * @param {string} [props.logoAriaLabel] - Accessible name of the default clicOH logo.
  * @param {ReactNode} [props.logo=<Logo />] - Brand mark above the content. Replaces the clicOH logo, so `logoAriaLabel` no longer applies.
+ * @param {ReactNode} [props.aside] - Content over the bottom of the image, on a dark gradient so white text reads. White by default; hidden with the image on small screens.
+ * @param {string} [props.imagePosition] - CSS `object-position` of the image: the part that stays in view when it is cropped. Defaults to the center.
  *
  * @returns {ReactNode} The rendered LoginTemplate component.
  */
-export declare function LoginTemplate(props: LoginTemplateProps): ReactNode;
+export declare function LoginTemplate({ children, loginImg, logoAriaLabel, logo, aside, imagePosition, }: LoginTemplateProps): ReactNode;
 export {};
 //# sourceMappingURL=LoginTemplate.d.ts.map

package/dist/components/04-templates/LoginTemplate/LoginTemplate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoginTemplate.d.ts","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/LoginTemplate.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAErE,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,SAAS,CAyBlE"}
+{"version":3,"file":"LoginTemplate.d.ts","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/LoginTemplate.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItD,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAErE,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;CACjD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,KAAK,EACL,aAAa,GACd,EAAE,kBAAkB,GAAG,SAAS,CA6BhC"}

package/dist/components/04-templates/LoginTemplate/LoginTemplate.jsx

@@ -3,30 +3,49 @@ import LoginImg from '../../../../assets/images/login-clicoh.jpg';
 import { Logo } from '../../01-atoms';
 import { dataUrl } from './dataUrl';
 /**
- * LoginTemplate component for rendering the login page layout.
+ * LoginTemplate component for rendering the login page layout: an image on
+ * the left and the content on the right. On small screens only the content
+ * shows.
  *
  * @component
  * @example
  * // Example usage of LoginTemplate component
  * <LoginTemplate>
- *   <LoginForm handlerLogin={yourHandlerLoginFunction} />
+ *   <LoginForm login={yourLoginFunction} />
+ * </LoginTemplate>
+ *
+ * @example
+ * // A tagline over the image, keeping the left part of the image in view
+ * <LoginTemplate
+ *   loginImg={productImage}
+ *   imagePosition="30% 50%"
+ *   aside={<Heading level="h4">Your tagline</Heading>}
+ * >
+ *   <LoginForm login={yourLoginFunction} />
  * </LoginTemplate>
  *
  * @param {Object} props - The properties of the LoginTemplate component.
  * @param {ReactNode} props.children - The content to be rendered inside the login template.
+ * @param {StaticImageData} [props.loginImg] - Image on the left. Defaults to the clicOH one.
+ * @param {string} [props.logoAriaLabel] - Accessible name of the default clicOH logo.
  * @param {ReactNode} [props.logo=<Logo />] - Brand mark above the content. Replaces the clicOH logo, so `logoAriaLabel` no longer applies.
+ * @param {ReactNode} [props.aside] - Content over the bottom of the image, on a dark gradient so white text reads. White by default; hidden with the image on small screens.
+ * @param {string} [props.imagePosition] - CSS `object-position` of the image: the part that stays in view when it is cropped. Defaults to the center.
  *
  * @returns {ReactNode} The rendered LoginTemplate component.
  */
-export function LoginTemplate(props) {
+export function LoginTemplate({ children, loginImg, logoAriaLabel, logo, aside, imagePosition, }) {
     return (<div className="flex">
-      <div className="relative min-h-svh flex-1 bg-black">
-        <Image src={props.loginImg || LoginImg} alt="" aria-hidden="true" sizes="(max-width: 2247px) 100vw, 2247px" fill={true} className="object-cover" placeholder="blur" blurDataURL={dataUrl}/>
+      <div className="relative min-h-svh flex-1 overflow-hidden bg-black">
+        <Image src={loginImg || LoginImg} alt="" aria-hidden="true" sizes="(max-width: 2247px) 100vw, 2247px" fill={true} className="object-cover" style={imagePosition ? { objectPosition: imagePosition } : undefined} placeholder="blur" blurDataURL={dataUrl}/>
+        {!!aside && (<div className="absolute inset-x-0 bottom-0 flex flex-col gap-3 bg-linear-to-t from-black/90 via-black/70 to-transparent px-10 pt-32 pb-8 text-white">
+            {aside}
+          </div>)}
       </div>
       <main className="flex min-h-svh w-[460px] items-center justify-center bg-white text-black dark:bg-black dark:text-white">
         <div className="flex flex-col items-center justify-center gap-4">
-          {props.logo ?? (<Logo width={94} height={40} aria-label={props.logoAriaLabel}/>)}
-          {props.children}
+          {logo ?? <Logo width={94} height={40} aria-label={logoAriaLabel}/>}
+          {children}
         </div>
       </main>
     </div>);

package/dist/components/04-templates/LoginTemplate/LoginTemplate.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"LoginTemplate.jsx","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/LoginTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAClE,OAAO,EAAW,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAUpC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,MAAM,CACnB;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,oCAAoC,CACjD;QAAA,CAAC,KAAK,CACJ,GAAG,CAAC,CAAE,KAAK,CAAC,QAA4B,IAAI,QAAQ,CAAC,CACrD,GAAG,CAAC,EAAE,CACN,WAAW,CAAC,MAAM,CAClB,KAAK,CAAC,mCAAmC,CACzC,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,SAAS,CAAC,cAAc,CACxB,WAAW,CAAC,MAAM,CAClB,WAAW,CAAC,CAAC,OAAO,CAAC,EAEzB;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,wGAAwG,CACtH;QAAA,CAAC,GAAG,CAAC,SAAS,CAAC,iDAAiD,CAC9D;UAAA,CAAC,KAAK,CAAC,IAAI,IAAI,CACb,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,EAAG,CACjE,CACD;UAAA,CAAC,KAAK,CAAC,QAAQ,CACjB;QAAA,EAAE,GAAG,CACP;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"LoginTemplate.jsx","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/LoginTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAYpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,KAAK,EACL,aAAa,GACM;IACnB,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,MAAM,CACnB;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,oDAAoD,CACjE;QAAA,CAAC,KAAK,CACJ,GAAG,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAC1B,GAAG,CAAC,EAAE,CACN,WAAW,CAAC,MAAM,CAClB,KAAK,CAAC,mCAAmC,CACzC,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,SAAS,CAAC,cAAc,CACxB,KAAK,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CACrE,WAAW,CAAC,MAAM,CAClB,WAAW,CAAC,CAAC,OAAO,CAAC,EAEvB;QAAA,CAAC,CAAC,CAAC,KAAK,IAAI,CACV,CAAC,GAAG,CAAC,SAAS,CAAC,sIAAsI,CACnJ;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,GAAG,CAAC,CACP,CACH;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,wGAAwG,CACtH;QAAA,CAAC,GAAG,CAAC,SAAS,CAAC,iDAAiD,CAC9D;UAAA,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,EAAG,CACnE;UAAA,CAAC,QAAQ,CACX;QAAA,EAAE,GAAG,CACP;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}

package/dist/components/04-templates/LoginTemplate/index.d.ts

@@ -1,3 +1,4 @@
 export { LoginTemplate } from './LoginTemplate';
 export { LoginForm } from './LoginForm';
+export type { LoginFormErrorStyle, LoginFormLabels, LoginFormSubmitState, } from './LoginForm';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/04-templates/LoginTemplate/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EACV,mBAAmB,EACnB,eAAe,EACf,oBAAoB,GACrB,MAAM,aAAa,CAAC"}

package/expresivo/ExpEnterIcon/ExpEnterIcon.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+export type ExpEnterIconProps = {
+    /** Width and height in pixels. */
+    size?: number;
+    /** Steps the arrow in and out of the door while the action runs. */
+    busy?: boolean;
+    /** Grays out, to match a disabled button. */
+    disabled?: boolean;
+};
+/**
+ * A door with an arrow going in, for the `iconL` of a core `Button` that
+ * signs in or enters somewhere. The arrow steps towards the door while the
+ * button is hovered and goes in and out while `busy`. It takes the text color
+ * of its button and is decorative.
+ *
+ * Outside an `ExpScope` it falls back to the plain sign-in icon.
+ *
+ * @component
+ * @example
+ * <Button type="submit" iconL={<ExpEnterIcon busy={isSending} />}>
+ *   Sign in
+ * </Button>
+ *
+ * @param {Object} props - The properties of the ExpEnterIcon component.
+ * @param {number} [props.size=16] - Width and height in pixels.
+ * @param {boolean} [props.busy=false] - Steps the arrow in and out of the door while the action runs.
+ * @param {boolean} [props.disabled=false] - Grays out, to match a disabled button.
+ *
+ * @returns {ReactNode} The door and arrow, or `FiLogIn` outside an `ExpScope`.
+ */
+export declare function ExpEnterIcon({ size, busy, disabled, }: ExpEnterIconProps): ReactNode;
+//# sourceMappingURL=ExpEnterIcon.d.ts.map

package/expresivo/ExpEnterIcon/ExpEnterIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpEnterIcon.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpEnterIcon/ExpEnterIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAS,EACT,IAAY,EACZ,QAAgB,GACjB,EAAE,iBAAiB,GAAG,SAAS,CAM/B"}

package/expresivo/ExpEnterIcon/ExpEnterIcon.jsx

@@ -0,0 +1,32 @@
+'use client';
+import { FiLogIn } from 'react-icons/fi';
+import { useExpScope } from '../ExpScope/ExpScope';
+import { EnterGlyph } from '../shared/glyphs';
+/**
+ * A door with an arrow going in, for the `iconL` of a core `Button` that
+ * signs in or enters somewhere. The arrow steps towards the door while the
+ * button is hovered and goes in and out while `busy`. It takes the text color
+ * of its button and is decorative.
+ *
+ * Outside an `ExpScope` it falls back to the plain sign-in icon.
+ *
+ * @component
+ * @example
+ * <Button type="submit" iconL={<ExpEnterIcon busy={isSending} />}>
+ *   Sign in
+ * </Button>
+ *
+ * @param {Object} props - The properties of the ExpEnterIcon component.
+ * @param {number} [props.size=16] - Width and height in pixels.
+ * @param {boolean} [props.busy=false] - Steps the arrow in and out of the door while the action runs.
+ * @param {boolean} [props.disabled=false] - Grays out, to match a disabled button.
+ *
+ * @returns {ReactNode} The door and arrow, or `FiLogIn` outside an `ExpScope`.
+ */
+export function ExpEnterIcon({ size = 16, busy = false, disabled = false, }) {
+    const inScope = useExpScope();
+    if (!inScope)
+        return <FiLogIn aria-hidden="true"/>;
+    return <EnterGlyph size={size} busy={busy} disabled={disabled}/>;
+}
+//# sourceMappingURL=ExpEnterIcon.jsx.map

package/expresivo/ExpEnterIcon/ExpEnterIcon.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpEnterIcon.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpEnterIcon/ExpEnterIcon.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAGb,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAW9C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,IAAI,GAAG,EAAE,EACT,IAAI,GAAG,KAAK,EACZ,QAAQ,GAAG,KAAK,GACE;IAClB,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;IAE9B,IAAI,CAAC,OAAO;QAAE,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,MAAM,EAAG,CAAC;IAEpD,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAG,CAAC;AACpE,CAAC"}

package/expresivo/ExpEnterIcon/index.d.ts

@@ -0,0 +1,3 @@
+export { ExpEnterIcon } from './ExpEnterIcon';
+export type { ExpEnterIconProps } from './ExpEnterIcon';
+//# sourceMappingURL=index.d.ts.map

package/expresivo/ExpEnterIcon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpEnterIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/expresivo/ExpEnterIcon/index.js

@@ -0,0 +1,2 @@
+export { ExpEnterIcon } from './ExpEnterIcon';
+//# sourceMappingURL=index.js.map

package/expresivo/ExpEnterIcon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpEnterIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/expresivo/ExpPeek/ExpPeek.d.ts

@@ -0,0 +1,56 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { ExpMascotName } from '../ExpMascot/catalog';
+export type ExpPeekProps = {
+    /** What the mascots peek from behind, usually a single button. */
+    children: ReactNode;
+    /**
+     * Mascots in the order they take turns, as groups of poses. Each turn shows
+     * one pose of its group, picked at random, and the order repeats.
+     */
+    cast?: readonly (readonly ExpMascotName[])[];
+    /** Width and height of the mascot, in pixels. */
+    size?: number;
+    /** Hides the mascot and stops the turns, for instance while the action runs. */
+    paused?: boolean;
+    /** How long each mascot stays out, in milliseconds. */
+    visibleMs?: number;
+    /** Pause between one mascot and the next, in milliseconds. */
+    gapMs?: number;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+/**
+ * Wraps a button so the clicOH mascots peek out from behind its edges, one at
+ * a time: from the top edge at any point, or from the left or right side, with
+ * a random pose and tilt. Each one springs out, stays a few seconds, hides and
+ * makes room for the next, in the order of `cast`.
+ *
+ * The mascot sits behind the wrapped element, which covers its lower part;
+ * nothing is clipped, so leave some room around it. It is decorative and
+ * never takes clicks. Pause it while the action runs.
+ *
+ * Shows no mascot with reduced motion, outside an `ExpScope`, or when the
+ * scope hides mascots; the wrapped element renders as usual.
+ *
+ * @component
+ * @example
+ * <ExpPeek paused={isSending} className="w-full">
+ *   <Button type="submit" className="w-full">Sign in</Button>
+ * </ExpPeek>
+ *
+ * @example
+ * // Only Fixi, bigger and slower
+ * <ExpPeek cast={[['fixi-01-feliz', 'fixi-06-celebrando']]} size={56} visibleMs={4000}>
+ *   <Button>Fix it</Button>
+ * </ExpPeek>
+ *
+ * @param {Object} props - The properties of the ExpPeek component.
+ * @param {ReactNode} props.children - What the mascots peek from behind, usually a single button.
+ * @param {ExpMascotName[][]} [props.cast] - Mascots in turn order, as groups of poses; each turn picks one pose of its group. Defaults to Oculus searching, Bugi showing up and Fixi fixing.
+ * @param {number} [props.size=44] - Width and height of the mascot, in pixels.
+ * @param {boolean} [props.paused=false] - Hides the mascot and stops the turns.
+ * @param {number} [props.visibleMs=3000] - How long each mascot stays out, in milliseconds.
+ * @param {number} [props.gapMs=2000] - Pause between one mascot and the next, in milliseconds.
+ *
+ * @returns {ReactNode} The wrapped element with the mascots behind it.
+ */
+export declare function ExpPeek({ children, cast, size, paused, visibleMs, gapMs, className, ...restProps }: ExpPeekProps): ReactNode;
+//# sourceMappingURL=ExpPeek.d.ts.map

package/expresivo/ExpPeek/ExpPeek.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpPeek.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPeek/ExpPeek.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAe1D,MAAM,MAAM,YAAY,GAAG;IACzB,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,aAAa,EAAE,CAAC,EAAE,CAAC;IAC7C,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAoDrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,IAAiB,EACjB,IAAS,EACT,MAAc,EACd,SAAgB,EAChB,KAAY,EACZ,SAAS,EACT,GAAG,SAAS,EACb,EAAE,YAAY,GAAG,SAAS,CA6D1B"}

package/expresivo/ExpPeek/ExpPeek.jsx

@@ -0,0 +1,131 @@
+'use client';
+import clsx from 'clsx';
+import { useEffect, useState, } from 'react';
+import { ExpMascot } from '../ExpMascot/ExpMascot';
+import { useExpScopeOptions } from '../ExpScope/ExpScope';
+/** Oculus searches, Bugi shows up, Fixi fixes it. */
+const STORY_CAST = [
+    [
+        'oculus-02-investigando',
+        'oculus-07-buscando-rapido',
+        'oculus-04-analizando-documento',
+    ],
+    ['bugi-01-alerta', 'bugi-05-sorprendido', 'bugi-02-investigando'],
+    ['fixi-04-reparando', 'fixi-01-feliz', 'fixi-06-celebrando'],
+];
+/** The top edge comes up three times as often as each side. */
+const SPOTS = ['top', 'top', 'top', 'left', 'right'];
+const FIRST_DELAY_MS = 900;
+const RISE_DELAY_MS = 40;
+const HIDE_MS = 420;
+const BOUNCE = 'cubic-bezier(.34,1.56,.64,1)';
+const SINK = 'cubic-bezier(.55,0,.75,.2)';
+function pick(items) {
+    return items[Math.floor(Math.random() * items.length)];
+}
+function peekStyle(peek, size, out) {
+    const sideways = { top: '50%', marginTop: -size / 2 };
+    const place = {
+        top: { top: 0, left: `calc(${12 + peek.along * 74}% - ${size / 2}px)` },
+        left: { ...sideways, left: 10 },
+        right: { ...sideways, right: 10 },
+    };
+    const outTransform = {
+        top: `translateY(-${Math.round(size * 0.68)}px) rotate(${peek.tilt}deg)`,
+        left: `translateX(-${size * 0.95}px) rotate(-10deg)`,
+        right: `translateX(${size * 0.95}px) rotate(10deg)`,
+    };
+    return {
+        width: size,
+        height: size,
+        ...place[peek.spot],
+        transformOrigin: peek.spot === 'top' ? '50% 100%' : '50% 50%',
+        transform: out ? outTransform[peek.spot] : 'none',
+        opacity: out ? 1 : 0,
+        transition: out
+            ? `transform 520ms ${BOUNCE}, opacity 80ms linear`
+            : `transform 360ms ${SINK}, opacity 120ms linear 260ms`,
+    };
+}
+/**
+ * Wraps a button so the clicOH mascots peek out from behind its edges, one at
+ * a time: from the top edge at any point, or from the left or right side, with
+ * a random pose and tilt. Each one springs out, stays a few seconds, hides and
+ * makes room for the next, in the order of `cast`.
+ *
+ * The mascot sits behind the wrapped element, which covers its lower part;
+ * nothing is clipped, so leave some room around it. It is decorative and
+ * never takes clicks. Pause it while the action runs.
+ *
+ * Shows no mascot with reduced motion, outside an `ExpScope`, or when the
+ * scope hides mascots; the wrapped element renders as usual.
+ *
+ * @component
+ * @example
+ * <ExpPeek paused={isSending} className="w-full">
+ *   <Button type="submit" className="w-full">Sign in</Button>
+ * </ExpPeek>
+ *
+ * @example
+ * // Only Fixi, bigger and slower
+ * <ExpPeek cast={[['fixi-01-feliz', 'fixi-06-celebrando']]} size={56} visibleMs={4000}>
+ *   <Button>Fix it</Button>
+ * </ExpPeek>
+ *
+ * @param {Object} props - The properties of the ExpPeek component.
+ * @param {ReactNode} props.children - What the mascots peek from behind, usually a single button.
+ * @param {ExpMascotName[][]} [props.cast] - Mascots in turn order, as groups of poses; each turn picks one pose of its group. Defaults to Oculus searching, Bugi showing up and Fixi fixing.
+ * @param {number} [props.size=44] - Width and height of the mascot, in pixels.
+ * @param {boolean} [props.paused=false] - Hides the mascot and stops the turns.
+ * @param {number} [props.visibleMs=3000] - How long each mascot stays out, in milliseconds.
+ * @param {number} [props.gapMs=2000] - Pause between one mascot and the next, in milliseconds.
+ *
+ * @returns {ReactNode} The wrapped element with the mascots behind it.
+ */
+export function ExpPeek({ children, cast = STORY_CAST, size = 44, paused = false, visibleMs = 3000, gapMs = 2000, className, ...restProps }) {
+    const options = useExpScopeOptions();
+    const [peek, setPeek] = useState(null);
+    const [out, setOut] = useState(false);
+    const active = !!options && options.mascots !== 'hidden' && !paused;
+    const castKey = cast.map((group) => group.join(',')).join('|');
+    useEffect(() => {
+        const groups = castKey
+            .split('|')
+            .map((group) => group.split(','))
+            .filter((group) => group[0] !== '');
+        const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (!active || reduceMotion || groups.length === 0)
+            return;
+        let turn = 0;
+        const timers = [];
+        const later = (run, ms) => {
+            timers.push(setTimeout(run, ms));
+        };
+        const next = () => {
+            const group = groups[turn % groups.length];
+            turn += 1;
+            setPeek({
+                turn,
+                name: pick(group),
+                spot: pick(SPOTS),
+                along: Math.random(),
+                tilt: Math.round((Math.random() - 0.5) * 24),
+            });
+            later(() => setOut(true), RISE_DELAY_MS);
+            later(() => setOut(false), RISE_DELAY_MS + visibleMs);
+            later(next, RISE_DELAY_MS + visibleMs + HIDE_MS + gapMs);
+        };
+        later(next, FIRST_DELAY_MS);
+        return () => {
+            timers.forEach(clearTimeout);
+            setOut(false);
+        };
+    }, [active, castKey, visibleMs, gapMs]);
+    return (<div {...restProps} className={clsx('relative isolate', className)}>
+      {!!peek && (<span key={peek.turn} aria-hidden="true" className="pointer-events-none absolute z-0" style={peekStyle(peek, size, out && active)}>
+          <ExpMascot name={peek.name} size={size}/>
+        </span>)}
+      <div className="relative z-1">{children}</div>
+    </div>);
+}
+//# sourceMappingURL=ExpPeek.jsx.map

package/expresivo/ExpPeek/ExpPeek.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpPeek.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpPeek/ExpPeek.tsx"],"names":[],"mappings":"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"}

package/expresivo/ExpPeek/index.d.ts

@@ -0,0 +1,3 @@
+export { ExpPeek } from './ExpPeek';
+export type { ExpPeekProps } from './ExpPeek';
+//# sourceMappingURL=index.d.ts.map

package/expresivo/ExpPeek/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPeek/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/expresivo/ExpPeek/index.js

@@ -0,0 +1,2 @@
+export { ExpPeek } from './ExpPeek';
+//# sourceMappingURL=index.js.map

package/expresivo/ExpPeek/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpPeek/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/expresivo/index.d.ts

@@ -1,6 +1,8 @@
 export * from './ExpScope';
 export * from './ExpMascot';
 export * from './ExpLensIcon';
+export * from './ExpEnterIcon';
+export * from './ExpPeek';
 export * from './ExpKeyButton';
 export * from './ExpPillButton';
 export * from './ExpMedalBadge';

package/expresivo/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/expresivo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/expresivo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}

package/expresivo/index.js

@@ -1,6 +1,8 @@
 export * from './ExpScope';
 export * from './ExpMascot';
 export * from './ExpLensIcon';
+export * from './ExpEnterIcon';
+export * from './ExpPeek';
 export * from './ExpKeyButton';
 export * from './ExpPillButton';
 export * from './ExpMedalBadge';

package/expresivo/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/expresivo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/expresivo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicoh/orion-library",
-  "version": "1.2.0-beta.16",
+  "version": "1.2.0-beta.18",
   "main": "index.js",
   "dependencies": {
     "@floating-ui/react": "0.26.19",