uhc-portal-components-react 0.2.6 → 0.2.8

package/CHANGELOG.md

@@ -1,6 +1,18 @@
 # Changelog
 
-## Unreleased
+## 0.2.8 - 2026-10-10
+
+- Restore the visual animal-photo picker from the earlier VetChain Expo flow:
+  click or drop a PNG/JPG, preview it, remove it in place, and enforce the
+  documented 2 MiB maximum and portrait 3:4 minimum of 300 by 400 pixels.
+- Extend the opt-in animal identity flow with person/organization ownership,
+  country and optional regional jurisdiction, governed identifier choices,
+  email-or-telephone contact and OIDC4IDA verification method selection.
+
+## 0.2.7 - 2026-10-09
+
+- Give every V2 animal-onboarding disclosure an accessible group name derived
+  from its localized summary.
 
 ## 0.2.6 - 2026-10-09
 

package/dist/AnimalIdentityOnboarding.d.ts

@@ -11,6 +11,11 @@ export type AnimalIdentityOnboardingInput = Readonly<{
     controllerIdentifierType: string;
     controllerIdentifierValue: string;
     controllerCountry: string;
+    controllerKind?: 'person' | 'organization';
+    controllerRegion?: string;
+    controllerEmail?: string;
+    controllerTelephone?: string;
+    verificationMethod?: 'pipp' | 'sripp' | 'eid' | 'uripp';
     relationship: AnimalControllerRelationship;
     ownerDocument: File;
     animalDocument: File;

package/dist/AnimalIdentityOnboarding.d.ts.map

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

package/dist/AnimalIdentityOnboardingV2.d.ts

@@ -2,12 +2,34 @@ import type { AnimalIdentityOnboardingCopy, AnimalIdentityOnboardingInput } from
 export type AnimalIdentityOnboardingV2Copy = AnimalIdentityOnboardingCopy & Readonly<{
     controllerIsLegalRepresentative: string;
     animalPreview: string;
+    addAnimalPhoto: string;
+    removeAnimalPhoto: string;
+    photoHelp: string;
+    photoTooLarge: string;
+    photoDimensionsInvalid: string;
+    ownerKind: string;
+    personOwner: string;
+    organizationOwner: string;
+    regionalIdentifier: string;
+    controllerRegion: string;
+    controllerEmail: string;
+    controllerTelephone: string;
+    contactRequired: string;
+    verificationMethod: string;
+    physicalInPerson: string;
+    supervisedRemote: string;
+    electronicId: string;
+    unsupervisedRemote: string;
+}>;
+type SelectOption = Readonly<{
+    value: string;
+    label: string;
 }>;
 /**
  * Progressive animal onboarding presentation. It preserves the V1 payload so
  * hosts can adopt it without changing evidence, authorization or persistence.
  */
-export declare function AnimalIdentityOnboardingV2({ copy, onSubmit, submitAction, speciesOptions, busy }: Readonly<{
+export declare function AnimalIdentityOnboardingV2({ copy, onSubmit, submitAction, speciesOptions, countryOptions, regionOptionsByCountry, identifierTypeOptions, showHeader, busy }: Readonly<{
     copy: AnimalIdentityOnboardingV2Copy;
     onSubmit: (input: AnimalIdentityOnboardingInput) => Promise<void> | void;
     submitAction?: string;
@@ -15,6 +37,14 @@ export declare function AnimalIdentityOnboardingV2({ copy, onSubmit, submitActio
         taxonomyId: string;
         label: string;
     }>[];
+    countryOptions?: readonly SelectOption[];
+    regionOptionsByCountry?: Readonly<Record<string, readonly SelectOption[]>>;
+    identifierTypeOptions?: Readonly<{
+        person: readonly SelectOption[];
+        organization: readonly SelectOption[];
+    }>;
+    showHeader?: boolean;
     busy?: boolean;
 }>): import("react").JSX.Element;
+export {};
 //# sourceMappingURL=AnimalIdentityOnboardingV2.d.ts.map

package/dist/AnimalIdentityOnboardingV2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimalIdentityOnboardingV2.d.ts","sourceRoot":"","sources":["../src/AnimalIdentityOnboardingV2.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,4BAA4B,EAC5B,6BAA6B,EAC9B,MAAM,+BAA+B,CAAA;AAEtC,MAAM,MAAM,8BAA8B,GAAG,4BAA4B,GAAG,QAAQ,CAAC;IACnF,+BAA+B,EAAE,MAAM,CAAA;IACvC,aAAa,EAAE,MAAM,CAAA;CACtB,CAAC,CAAA;AAEF;;;GAGG;AACH,wBAAgB,0BAA0B,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAmB,EAAE,IAAY,EAAE,EAAE,QAAQ,CAAC;IACvH,IAAI,EAAE,8BAA8B,CAAA;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,6BAA6B,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACxE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,SAAS,QAAQ,CAAC;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAA;IAC3E,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAC,+BAgGD"}
+{"version":3,"file":"AnimalIdentityOnboardingV2.d.ts","sourceRoot":"","sources":["../src/AnimalIdentityOnboardingV2.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,4BAA4B,EAC5B,6BAA6B,EAC9B,MAAM,+BAA+B,CAAA;AAEtC,MAAM,MAAM,8BAA8B,GAAG,4BAA4B,GAAG,QAAQ,CAAC;IACnF,+BAA+B,EAAE,MAAM,CAAA;IACvC,aAAa,EAAE,MAAM,CAAA;IACrB,cAAc,EAAE,MAAM,CAAA;IACtB,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,sBAAsB,EAAE,MAAM,CAAA;IAC9B,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,iBAAiB,EAAE,MAAM,CAAA;IACzB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,gBAAgB,EAAE,MAAM,CAAA;IACxB,eAAe,EAAE,MAAM,CAAA;IACvB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,eAAe,EAAE,MAAM,CAAA;IACvB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,gBAAgB,EAAE,MAAM,CAAA;IACxB,gBAAgB,EAAE,MAAM,CAAA;IACxB,YAAY,EAAE,MAAM,CAAA;IACpB,kBAAkB,EAAE,MAAM,CAAA;CAC3B,CAAC,CAAA;AAEF,KAAK,YAAY,GAAG,QAAQ,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAAA;AAG9D;;;GAGG;AACH,wBAAgB,0BAA0B,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAmB,EAAE,cAAmB,EAAE,sBAA2B,EAAE,qBAAqB,EAAE,UAAiB,EAAE,IAAY,EAAE,EAAE,QAAQ,CAAC;IACnN,IAAI,EAAE,8BAA8B,CAAA;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,6BAA6B,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACxE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,SAAS,QAAQ,CAAC;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAA;IAC3E,cAAc,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;IACxC,sBAAsB,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,YAAY,EAAE,CAAC,CAAC,CAAA;IAC1E,qBAAqB,CAAC,EAAE,QAAQ,CAAC;QAAE,MAAM,EAAE,SAAS,YAAY,EAAE,CAAC;QAAC,YAAY,EAAE,SAAS,YAAY,EAAE,CAAA;KAAE,CAAC,CAAA;IAC5G,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAC,+BAkJD"}

package/dist/AnimalIdentityOnboardingV2.js

@@ -1,32 +1,75 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
+const MAX_ANIMAL_PHOTO_BYTES = 2 * 1024 * 1024;
 /**
  * Progressive animal onboarding presentation. It preserves the V1 payload so
  * hosts can adopt it without changing evidence, authorization or persistence.
  */
-export function AnimalIdentityOnboardingV2({ copy, onSubmit, submitAction, speciesOptions = [], busy = false }) {
+export function AnimalIdentityOnboardingV2({ copy, onSubmit, submitAction, speciesOptions = [], countryOptions = [], regionOptionsByCountry = {}, identifierTypeOptions, showHeader = true, busy = false }) {
     const [submitting, setSubmitting] = useState(false);
     const [animalName, setAnimalName] = useState('');
     const [previewUrl, setPreviewUrl] = useState('');
+    const [animalDocument, setAnimalDocument] = useState();
+    const [photoError, setPhotoError] = useState('');
+    const [contactError, setContactError] = useState('');
+    const [controllerKind, setControllerKind] = useState('person');
+    const [controllerCountry, setControllerCountry] = useState(countryOptions[0]?.value || '');
+    const [regionalIdentifier, setRegionalIdentifier] = useState(false);
     useEffect(() => () => {
         if (previewUrl.startsWith('blob:'))
             URL.revokeObjectURL(previewUrl);
     }, [previewUrl]);
-    function previewAnimal(file) {
+    async function previewAnimal(file) {
         if (previewUrl.startsWith('blob:'))
             URL.revokeObjectURL(previewUrl);
-        if (!file?.type.startsWith('image/'))
+        setPhotoError('');
+        if (!file?.type.startsWith('image/')) {
+            setAnimalDocument(undefined);
             return setPreviewUrl('');
+        }
+        if (file.size > MAX_ANIMAL_PHOTO_BYTES) {
+            setAnimalDocument(undefined);
+            setPreviewUrl('');
+            return setPhotoError(copy.photoTooLarge);
+        }
+        try {
+            const dimensions = await readImageDimensions(file);
+            if (!hasAcceptedPhotoDimensions(dimensions.width, dimensions.height)) {
+                setAnimalDocument(undefined);
+                setPreviewUrl('');
+                return setPhotoError(copy.photoDimensionsInvalid);
+            }
+        }
+        catch {
+            setAnimalDocument(undefined);
+            setPreviewUrl('');
+            return setPhotoError(copy.photoDimensionsInvalid);
+        }
+        setAnimalDocument(file);
         if (typeof URL.createObjectURL === 'function')
             return setPreviewUrl(URL.createObjectURL(file));
         const reader = new FileReader();
         reader.onload = () => setPreviewUrl(typeof reader.result === 'string' ? reader.result : '');
         reader.readAsDataURL(file);
     }
+    function removeAnimalPhoto() {
+        if (previewUrl.startsWith('blob:'))
+            URL.revokeObjectURL(previewUrl);
+        setAnimalDocument(undefined);
+        setPreviewUrl('');
+        setPhotoError('');
+    }
     async function submit(event) {
         event.preventDefault();
         const formElement = event.currentTarget;
         const form = new FormData(formElement);
+        const controllerEmail = optionalText(form, 'controllerEmail');
+        const controllerTelephone = optionalText(form, 'controllerTelephone');
+        if (!controllerEmail && !controllerTelephone) {
+            setContactError(copy.contactRequired);
+            return;
+        }
+        setContactError('');
         setSubmitting(true);
         try {
             await onSubmit({
@@ -40,9 +83,14 @@ export function AnimalIdentityOnboardingV2({ copy, onSubmit, submitAction, speci
                 controllerIdentifierType: requiredText(form, 'controllerIdentifierType'),
                 controllerIdentifierValue: requiredText(form, 'controllerIdentifierValue'),
                 controllerCountry: requiredText(form, 'controllerCountry').toUpperCase(),
+                controllerKind,
+                controllerRegion: optionalText(form, 'controllerRegion'),
+                controllerEmail,
+                controllerTelephone,
+                verificationMethod: requiredText(form, 'verificationMethod'),
                 relationship: requiredText(form, 'relationship'),
                 ownerDocument: requiredFile(formElement, 'ownerDocument'),
-                animalDocument: requiredFile(formElement, 'animalDocument'),
+                animalDocument: animalDocument || requiredFile(formElement, 'animalDocument'),
                 relationshipDocument: requiredFile(formElement, 'relationshipDocument'),
                 controllerPin: requiredText(form, 'controllerPin'),
             });
@@ -52,11 +100,11 @@ export function AnimalIdentityOnboardingV2({ copy, onSubmit, submitAction, speci
         }
     }
     const disabled = busy || submitting;
-    return _jsxs("section", { className: "uhcp-animal-onboarding uhcp-animal-onboarding-v2", "aria-labelledby": "animal-identity-onboarding-v2-title", children: [_jsxs("header", { children: [_jsx("h2", { id: "animal-identity-onboarding-v2-title", children: copy.title }), _jsx("p", { children: copy.intro })] }), _jsxs("form", { onSubmit: submit, children: [_jsxs("details", { open: true, children: [_jsxs("summary", { children: [_jsx(StepNumber, { value: 1 }), " ", copy.animalStep] }), _jsxs("div", { className: "uhcp-animal-onboarding-primary", children: [_jsxs("div", { className: "uhcp-animal-photo", children: [previewUrl
-                                                ? _jsx("img", { src: previewUrl, alt: copy.animalPreview.replace('{name}', animalName || copy.animalName) })
-                                                : _jsx("span", { "aria-hidden": "true", children: animalName.trim().slice(0, 1).toLocaleUpperCase() || '＋' }), _jsxs("label", { children: [copy.animalDocument, _jsx("input", { name: "animalDocument", type: "file", accept: "application/pdf,image/jpeg,image/png", required: true, onChange: event => previewAnimal(event.currentTarget.files?.[0]) })] })] }), _jsxs("div", { className: "uhcp-animal-onboarding-fields", children: [_jsxs("label", { children: [copy.animalName, _jsx("input", { name: "animalName", required: true, maxLength: 80, value: animalName, onChange: event => setAnimalName(event.currentTarget.value) })] }), _jsxs("label", { children: [copy.taxonomyId, speciesOptions.length > 0
+    return _jsxs("section", { className: "uhcp-animal-onboarding uhcp-animal-onboarding-v2", "aria-labelledby": showHeader ? 'animal-identity-onboarding-v2-title' : undefined, "aria-label": showHeader ? undefined : copy.title, children: [showHeader ? _jsxs("header", { children: [_jsx("h2", { id: "animal-identity-onboarding-v2-title", children: copy.title }), _jsx("p", { children: copy.intro })] }) : null, _jsxs("form", { onSubmit: submit, children: [_jsxs("details", { open: true, "aria-labelledby": "animal-onboarding-v2-animal-step", children: [_jsxs("summary", { id: "animal-onboarding-v2-animal-step", children: [_jsx(StepNumber, { value: 1 }), " ", copy.animalStep] }), _jsxs("div", { className: "uhcp-animal-onboarding-primary", children: [_jsxs("div", { className: "uhcp-animal-photo", children: [_jsxs("label", { className: "uhcp-animal-photo-dropzone", role: "button", "aria-label": copy.addAnimalPhoto, onDragOver: event => event.preventDefault(), onDrop: event => { event.preventDefault(); void previewAnimal(event.dataTransfer.files?.[0]); }, children: [previewUrl
+                                                        ? _jsx("img", { src: previewUrl, alt: copy.animalPreview.replace('{name}', animalName || copy.animalName) })
+                                                        : _jsx("span", { "aria-hidden": "true", children: "\uFF0B" }), _jsx("input", { name: "animalDocument", type: "file", accept: "image/jpeg,image/png", required: !animalDocument, "aria-label": copy.addAnimalPhoto, onChange: event => void previewAnimal(event.currentTarget.files?.[0]) })] }), previewUrl ? _jsx("button", { type: "button", className: "uhcp-animal-photo-remove", "aria-label": copy.removeAnimalPhoto, title: copy.removeAnimalPhoto, onClick: removeAnimalPhoto, children: "\u00D7" }) : null, _jsx("small", { children: copy.photoHelp }), photoError ? _jsx("p", { role: "alert", children: photoError }) : null] }), _jsxs("div", { className: "uhcp-animal-onboarding-fields", children: [_jsxs("label", { children: [copy.animalName, _jsx("input", { name: "animalName", required: true, maxLength: 80, value: animalName, onChange: event => setAnimalName(event.currentTarget.value) })] }), _jsxs("label", { children: [copy.taxonomyId, speciesOptions.length > 0
                                                         ? _jsx("select", { name: "taxonomyId", required: true, defaultValue: speciesOptions[0]?.taxonomyId, children: speciesOptions.map(option => _jsx("option", { value: option.taxonomyId, children: option.label }, option.taxonomyId)) })
-                                                        : _jsx("input", { name: "taxonomyId", required: true, inputMode: "numeric", pattern: "[1-9][0-9]{0,6}", defaultValue: "9615" })] }), _jsxs("label", { children: [copy.birthDate, _jsx("input", { name: "birthDate", type: "date" })] }), _jsxs("label", { children: [copy.sex, _jsxs("select", { name: "sex", defaultValue: "unknown", children: [_jsx("option", { value: "unknown", children: copy.sexUnknown }), _jsx("option", { value: "female", children: copy.sexFemale }), _jsx("option", { value: "male", children: copy.sexMale }), _jsx("option", { value: "other", children: copy.sexOther })] })] }), _jsxs("label", { children: [copy.identifierSystem, _jsxs("select", { name: "identifierSystem", defaultValue: "urn:iso:std:iso:11784:11785", children: [_jsx("option", { value: "urn:iso:std:iso:11784:11785", children: "ISO 11784/11785" }), _jsx("option", { value: "https://europa.eu/pet-passport", children: "EU pet passport" }), _jsx("option", { value: "https://vetchain.app/identifier/tattoo", children: "Tattoo" })] })] }), _jsxs("label", { children: [copy.identifierValue, _jsx("input", { name: "identifierValue", required: true, maxLength: 80, autoComplete: "off" })] })] })] })] }), _jsxs("details", { children: [_jsxs("summary", { children: [_jsx(StepNumber, { value: 2 }), " ", copy.controllerStep] }), _jsxs("div", { className: "uhcp-animal-onboarding-fields", children: [_jsxs("label", { children: [copy.controllerLegalName, _jsx("input", { name: "controllerLegalName", required: true, maxLength: 160, autoComplete: "name" })] }), _jsxs("label", { children: [copy.controllerIdentifierType, _jsx("input", { name: "controllerIdentifierType", required: true, defaultValue: "national_identity_card", maxLength: 80 })] }), _jsxs("label", { children: [copy.controllerIdentifierValue, _jsx("input", { name: "controllerIdentifierValue", required: true, maxLength: 120, autoComplete: "off" })] }), _jsxs("label", { children: [copy.controllerCountry, _jsx("input", { name: "controllerCountry", required: true, pattern: "[A-Za-z]{2}", maxLength: 2, autoComplete: "country" })] }), _jsxs("label", { children: [copy.relationship, _jsxs("select", { name: "relationship", defaultValue: "owner", children: [_jsx("option", { value: "owner", children: copy.owner }), _jsx("option", { value: "caregiver", children: copy.caregiver })] })] }), _jsxs("label", { className: "uhcp-animal-controller-confirmation", children: [_jsx("input", { type: "checkbox", defaultChecked: true, required: true }), " ", copy.controllerIsLegalRepresentative] })] })] }), _jsxs("details", { children: [_jsxs("summary", { children: [_jsx(StepNumber, { value: 3 }), " ", copy.evidenceStep] }), _jsxs("div", { className: "uhcp-animal-onboarding-fields", children: [_jsxs("label", { children: [copy.ownerDocument, _jsx("input", { name: "ownerDocument", type: "file", accept: "application/pdf,image/jpeg,image/png", required: true })] }), _jsxs("label", { children: [copy.relationshipDocument, _jsx("input", { name: "relationshipDocument", type: "file", accept: "application/pdf,image/jpeg,image/png", required: true })] }), _jsxs("label", { children: [copy.controllerPin, _jsx("input", { name: "controllerPin", type: "password", inputMode: "numeric", pattern: "[0-9]{6,12}", required: true, autoComplete: "new-password" })] })] })] }), _jsx("button", { type: "submit", className: "uhcp-animal-onboarding-submit", "data-portal-action": submitAction, disabled: disabled, children: copy.submit })] })] });
+                                                        : _jsx("input", { name: "taxonomyId", required: true, inputMode: "numeric", pattern: "[1-9][0-9]{0,6}", defaultValue: "9615" })] }), _jsxs("label", { children: [copy.birthDate, _jsx("input", { name: "birthDate", type: "date" })] }), _jsxs("label", { children: [copy.sex, _jsxs("select", { name: "sex", defaultValue: "unknown", children: [_jsx("option", { value: "unknown", children: copy.sexUnknown }), _jsx("option", { value: "female", children: copy.sexFemale }), _jsx("option", { value: "male", children: copy.sexMale }), _jsx("option", { value: "other", children: copy.sexOther })] })] }), _jsxs("label", { children: [copy.identifierSystem, _jsxs("select", { name: "identifierSystem", defaultValue: "urn:iso:std:iso:11784:11785", children: [_jsx("option", { value: "urn:iso:std:iso:11784:11785", children: "ISO 11784/11785" }), _jsx("option", { value: "https://europa.eu/pet-passport", children: "EU pet passport" }), _jsx("option", { value: "https://vetchain.app/identifier/tattoo", children: "Tattoo" })] })] }), _jsxs("label", { children: [copy.identifierValue, _jsx("input", { name: "identifierValue", required: true, maxLength: 80, autoComplete: "off" })] })] })] })] }), _jsxs("details", { "aria-labelledby": "animal-onboarding-v2-controller-step", children: [_jsxs("summary", { id: "animal-onboarding-v2-controller-step", children: [_jsx(StepNumber, { value: 2 }), " ", copy.controllerStep] }), _jsxs("div", { className: "uhcp-animal-onboarding-fields", children: [_jsxs("fieldset", { className: "uhcp-animal-owner-kind", children: [_jsx("legend", { children: copy.ownerKind }), _jsxs("label", { children: [_jsx("input", { type: "radio", name: "controllerKind", value: "person", checked: controllerKind === 'person', onChange: () => setControllerKind('person') }), " ", copy.personOwner] }), _jsxs("label", { children: [_jsx("input", { type: "radio", name: "controllerKind", value: "organization", checked: controllerKind === 'organization', onChange: () => setControllerKind('organization') }), " ", copy.organizationOwner] })] }), _jsxs("label", { className: "uhcp-animal-owner-name", children: [copy.controllerLegalName, _jsx("input", { name: "controllerLegalName", required: true, maxLength: 160, autoComplete: controllerKind === 'person' ? 'name' : 'organization' })] }), _jsxs("label", { children: [copy.controllerCountry, countryOptions.length ? _jsx("select", { name: "controllerCountry", required: true, value: controllerCountry, onChange: event => { setControllerCountry(event.currentTarget.value); setRegionalIdentifier(false); }, children: countryOptions.map(option => _jsx("option", { value: option.value, children: option.label }, option.value)) }) : _jsx("input", { name: "controllerCountry", required: true, pattern: "[A-Za-z]{2}", maxLength: 2, autoComplete: "country", onChange: event => setControllerCountry(event.currentTarget.value.toUpperCase()) })] }), _jsxs("label", { className: "uhcp-animal-regional-identifier", children: [_jsx("input", { type: "checkbox", checked: regionalIdentifier, disabled: !regionOptionsByCountry[controllerCountry]?.length, onChange: event => setRegionalIdentifier(event.currentTarget.checked) }), " ", copy.regionalIdentifier] }), regionalIdentifier ? _jsxs("label", { children: [copy.controllerRegion, _jsx("select", { name: "controllerRegion", required: true, children: (regionOptionsByCountry[controllerCountry] || []).map(option => _jsx("option", { value: option.value, children: option.label }, option.value)) })] }) : null, _jsxs("label", { children: [copy.controllerIdentifierType, identifierTypeOptions ? _jsx("select", { name: "controllerIdentifierType", required: true, children: identifierTypeOptions[controllerKind].map(option => _jsx("option", { value: option.value, children: option.label }, option.value)) }, controllerKind) : _jsx("input", { name: "controllerIdentifierType", required: true, defaultValue: "national_identity_card", maxLength: 80 })] }), _jsxs("label", { children: [copy.controllerIdentifierValue, _jsx("input", { name: "controllerIdentifierValue", required: true, maxLength: 120, autoComplete: "off" })] }), _jsxs("label", { children: [copy.controllerEmail, _jsx("input", { name: "controllerEmail", type: "email", autoComplete: "email" })] }), _jsxs("label", { children: [copy.controllerTelephone, _jsx("input", { name: "controllerTelephone", type: "tel", autoComplete: "tel" })] }), _jsxs("label", { children: [copy.relationship, _jsxs("select", { name: "relationship", defaultValue: "owner", children: [_jsx("option", { value: "owner", children: copy.owner }), _jsx("option", { value: "caregiver", children: copy.caregiver })] })] }), _jsxs("label", { className: "uhcp-animal-controller-confirmation", children: [_jsx("input", { type: "checkbox", defaultChecked: true, required: true }), " ", copy.controllerIsLegalRepresentative] }), contactError ? _jsx("p", { role: "alert", children: contactError }) : null] })] }), _jsxs("details", { "aria-labelledby": "animal-onboarding-v2-evidence-step", children: [_jsxs("summary", { id: "animal-onboarding-v2-evidence-step", children: [_jsx(StepNumber, { value: 3 }), " ", copy.evidenceStep] }), _jsxs("div", { className: "uhcp-animal-onboarding-fields", children: [_jsxs("label", { children: [copy.verificationMethod, _jsxs("select", { name: "verificationMethod", defaultValue: "pipp", children: [_jsx("option", { value: "pipp", children: copy.physicalInPerson }), _jsx("option", { value: "sripp", children: copy.supervisedRemote }), _jsx("option", { value: "eid", children: copy.electronicId }), _jsx("option", { value: "uripp", children: copy.unsupervisedRemote })] })] }), _jsxs("label", { children: [copy.ownerDocument, _jsx("input", { name: "ownerDocument", type: "file", accept: "application/pdf,image/jpeg,image/png", required: true })] }), _jsxs("label", { children: [copy.relationshipDocument, _jsx("input", { name: "relationshipDocument", type: "file", accept: "application/pdf,image/jpeg,image/png", required: true })] }), _jsxs("label", { children: [copy.controllerPin, _jsx("input", { name: "controllerPin", type: "password", inputMode: "numeric", pattern: "[0-9]{6,12}", required: true, autoComplete: "new-password" })] })] })] }), _jsx("button", { type: "submit", className: "uhcp-animal-onboarding-submit", "data-portal-action": submitAction, disabled: disabled, children: copy.submit })] })] });
 }
 function StepNumber({ value }) {
     return _jsx("span", { className: "uhcp-identity-step-number", "aria-hidden": "true", children: value });
@@ -78,3 +126,26 @@ function requiredFile(form, name) {
         throw new Error(`animal_identity_${name}_required`);
     return value;
 }
+async function readImageDimensions(file) {
+    if (typeof createImageBitmap === 'function') {
+        const bitmap = await createImageBitmap(file);
+        const dimensions = { width: bitmap.width, height: bitmap.height };
+        bitmap.close();
+        return dimensions;
+    }
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onerror = () => reject(new Error('animal_photo_unreadable'));
+        reader.onload = () => {
+            const image = new Image();
+            image.onerror = () => reject(new Error('animal_photo_unreadable'));
+            image.onload = () => resolve({ width: image.naturalWidth, height: image.naturalHeight });
+            image.src = String(reader.result || '');
+        };
+        reader.readAsDataURL(file);
+    });
+}
+function hasAcceptedPhotoDimensions(width, height) {
+    const ratio = width / height;
+    return width >= 300 && height >= 400 && Math.abs(ratio - 3 / 4) <= 0.06;
+}

package/dist/styles.css

@@ -784,9 +784,17 @@ html[data-theme='dark'] .uhcp-brand-artwork-dark { display: block !important; }
 .uhcp-animal-onboarding-v2 details > .uhcp-animal-onboarding-fields,
 .uhcp-animal-onboarding-v2 details > .uhcp-animal-onboarding-primary { border-top:1px solid var(--uhcp-border, #d9dee7); padding:1rem; }
 .uhcp-animal-onboarding-primary { align-items:start; display:grid; gap:1rem; grid-template-columns:minmax(10rem, 14rem) minmax(0, 1fr); }
-.uhcp-animal-photo { display:grid; gap:.65rem; }
-.uhcp-animal-photo > img,.uhcp-animal-photo > span { align-items:center; aspect-ratio:1; background:var(--uhcp-accent-soft, #e9f3ff); border:2px solid color-mix(in srgb, var(--uhcp-turquoise, #1597a6) 42%, var(--uhcp-border, #d9dee7)); border-radius:1.25rem; display:flex; font-size:3rem; font-weight:850; justify-content:center; object-fit:cover; overflow:hidden; width:100%; }
-.uhcp-animal-photo label { display:grid; font-size:.88rem; gap:.35rem; }
+.uhcp-animal-photo { display:grid; gap:.45rem; position:relative; }
+.uhcp-animal-photo-dropzone { align-items:center; aspect-ratio:1; background:var(--uhcp-accent-soft, #e9f3ff); border:2px dashed color-mix(in srgb, var(--uhcp-turquoise, #1597a6) 58%, var(--uhcp-border, #d9dee7)); border-radius:1.25rem; cursor:pointer; display:flex; font-size:4rem; font-weight:850; justify-content:center; overflow:hidden; width:100%; }
+.uhcp-animal-photo-dropzone:hover,.uhcp-animal-photo-dropzone:focus-within { background:color-mix(in srgb, var(--uhcp-accent-soft, #e9f3ff) 70%, var(--uhcp-turquoise, #1597a6)); border-style:solid; }
+.uhcp-animal-photo-dropzone img { height:100%; object-fit:cover; width:100%; }
+.uhcp-animal-photo-dropzone input { height:1px; opacity:0; overflow:hidden; position:absolute; width:1px; }
+.uhcp-animal-photo-remove { background:#b42318; border:2px solid #fff; border-radius:999px; block-size:2.25rem; color:#fff; cursor:pointer; font-size:1.45rem; inline-size:2.25rem; inset-block-start:.65rem; inset-inline-end:.65rem; line-height:1; position:absolute; }
+.uhcp-animal-photo small { color:var(--uhcp-muted, #5f6875); }
+.uhcp-animal-owner-kind { border:0!important; display:flex; gap:1rem; grid-column:1/-1; padding:0!important; }
+.uhcp-animal-owner-kind label,.uhcp-animal-regional-identifier { align-items:center; display:flex!important; gap:.45rem; }
+.uhcp-animal-owner-kind input,.uhcp-animal-regional-identifier input { min-height:auto!important; width:auto!important; }
+.uhcp-animal-owner-name { grid-column:1/-1; }
 .uhcp-animal-controller-confirmation { align-items:center; background:var(--uhcp-accent-soft, #e9f3ff); border-radius:.75rem; display:flex !important; grid-column:1 / -1; padding:.75rem; }
 .uhcp-animal-controller-confirmation input { min-height:auto !important; width:auto !important; }
 @media (max-width: 42rem) { .uhcp-animal-onboarding-primary { grid-template-columns:1fr; } .uhcp-animal-photo { justify-self:center; max-width:15rem; width:100%; } }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uhc-portal-components-react",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "Brand-neutral React portal shell, account preferences and protected-profile UI for UHC and VetChain portals.",
   "license": "Apache-2.0",
   "type": "module",