Update dependencies

lerna.json

@@ -1,11 +1,11 @@
 {
   "version": "1.9.0",
-  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
+  "$schema": "https://unpkg.com/lerna@10.0.1/schemas/lerna-schema.json",
   "useNx": false,
   "npmClient": "pnpm",
   "command": {
     "version": {
       "preid": "stg"
     }
   }
-}
+}

package.json

@@ -9,8 +9,8 @@
     "url": "https://github.com/commercelayer/mfe-identity.git"
   },
   "author": {
-    "name": "Pier Francesco Ferrari",
-    "email": "pierfrancesco@commercelayer.io"
+    "name": "Commerce Layer",
+    "email": "development@commercelayer.io"
   },
   "license": "MIT",
   "bugs": {
@@ -33,17 +33,17 @@
     "dep:major": "pnpm dlx npm-check-updates --packageFile '**/package.json' -u",
     "dep:minor": "pnpm dlx npm-check-updates -t semver --packageFile '**/package.json' -u",
     "prepare": "husky",
-    "clean": "pnpx rimraf --glob **/node_modules **/pnpm-lock.yaml"
+    "clean": "pnpx rimraf --glob **/node_modules **/pnpm-lock.yaml",
+    "lerna": "pnpm dlx --allow-build=nx lerna@10.0.1"
   },
   "packageManager": "pnpm@11.9.0",
   "workspaces": [
     "packages/*"
   ],
   "devDependencies": {
-    "@biomejs/biome": "^2.5.11",
+    "@biomejs/biome": "^2.5.15",
     "husky": "^9.1.7",
-    "lerna": "^10.0.1",
-    "lint-staged": "^16.4.0",
-    "npm-check-updates": "^20.0.2"
+    "lint-staged": "^17.6.0",
+    "npm-check-updates": "^23.1.0"
   }
 }

packages/app/@typing/App.d.ts

@@ -1,3 +1,5 @@
 declare module "App" {
+  import type { JSX } from "react"
+
   export type ChildrenElement = JSX.Element | JSX.Element[] | null
 }

packages/app/@typing/env.d.ts

@@ -1,9 +1,11 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly PUBLIC_PROJECT_PATH?: string
+  readonly NODE_ENV?: string
+  readonly ALLOW_LOCAL_PACKAGES: boolean
+}
+
 interface ImportMeta {
-  env: {
-    PUBLIC_PROJECT_PATH?: string
-    NODE_ENV?: string
-    DEV: boolean
-    PROD: boolean
-    ALLOW_LOCAL_PACKAGES: boolean
-  }
+  readonly env: ImportMetaEnv
 }

packages/app/package.json

@@ -51,40 +51,39 @@
     "@hookform/resolvers": "^5.9.1",
     "@phosphor-icons/react": "v2.1.10",
     "classnames": "^2.5.1",
-    "i18next": "^25.10.10",
+    "i18next": "^26.4.2",
     "lodash": "^4.18.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-helmet-async": "2.0.5",
-    "react-hook-form": "7.71.2",
-    "react-i18next": "^15.7.4",
-    "wouter": "^3.10.0",
-    "zod": "3.25.76"
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "react-helmet-async": "3.0.0",
+    "react-hook-form": "7.89.0",
+    "react-i18next": "^17.0.16",
+    "wouter": "^3.13.0",
+    "zod": "4.6.5"
   },
   "devDependencies": {
     "@faker-js/faker": "^10.6.0",
-    "@playwright/test": "^1.62.1",
+    "@playwright/test": "^1.63.0",
     "@tailwindcss/forms": "^0.5.11",
-    "@testing-library/jest-dom": "^6.10.0",
+    "@tailwindcss/postcss": "^4.3.3",
+    "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@types/iframe-resizer": "^4.0.0",
     "@types/lodash": "^4.17.25",
-    "@types/node": "24.12.2",
-    "@types/react": "18.3.28",
-    "@types/react-dom": "18.3.7",
+    "@types/node": "26.6.4",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
     "@types/react-helmet": "6.1.11",
-    "@vitejs/plugin-react": "^4.7.0",
-    "autoprefixer": "^10.5.4",
-    "dotenv": "^16.6.1",
-    "jsdom": "^26.1.0",
+    "@vitejs/plugin-react": "^6.1.2",
+    "dotenv": "^18.0.6",
+    "jsdom": "^30.1.2",
     "only-allow": "^1.2.2",
-    "postcss": "^8.5.26",
-    "tailwindcss": "^3.4.19",
-    "type-fest": "^4.41.0",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.6",
-    "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^4.1.11"
+    "postcss": "^8.5.29",
+    "tailwindcss": "^4.3.3",
+    "type-fest": "^5.10.0",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.3",
+    "vitest": "^5.0.3"
   },
   "msw": {
     "workerDirectory": "public"

packages/app/postcss.config.cjs

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 }

packages/app/react-testing-library.config.js

@@ -1 +1 @@
-import "@testing-library/jest-dom"
+import "@testing-library/jest-dom/vitest"

packages/app/src/App.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react"
 import { HelmetProvider } from "react-helmet-async"
 import { Redirect, Route, Router, Switch } from "wouter"
 

packages/app/src/components/DefaultSkeleton.tsx

@@ -23,34 +23,34 @@ export const DefaultSkeleton: React.FC = () => {
           </p>
           <form className="mt-8 mb-0">
             <div className="space-y-4">
-              <div className="field !mb-8">
+              <div className="field mb-8!">
                 <div className="flex justify-between items-center mb-2">
-                  {/* biome-ignore lint/a11y/noLabelWithoutControl: <explanation> */}
+                  {/* biome-ignore lint/a11y/noLabelWithoutControl: Skeleton label without control */}
                   <label className="text-black leading-6 font-semibold text-base">
                     Lorem
                   </label>
                 </div>
                 <input
-                  className="block w-full px-4 mt-2 h-[44px] rounded ring-inset outline-0 focus:border-primary focus:ring-primary border-gray-200 text-md"
+                  className="block w-full px-4 mt-2 h-11 rounded-sm ring-inset outline-0 focus:border-primary focus:ring-primary border-gray-200 text-md"
                   type="email"
                 />
               </div>
-              <div className="field !mb-8">
+              <div className="field mb-8!">
                 <div className="flex justify-between items-center mb-2">
-                  {/* biome-ignore lint/a11y/noLabelWithoutControl: <explanation> */}
+                  {/* biome-ignore lint/a11y/noLabelWithoutControl: Skeleton label without control */}
                   <label className="text-black leading-6 font-semibold text-base">
                     Lorem ipsum
                   </label>
                 </div>
                 <input
-                  className="block w-full px-4 mt-2 h-[44px] rounded ring-inset outline-0 focus:border-primary focus:ring-primary border-gray-200 text-md"
+                  className="block w-full px-4 mt-2 h-11 rounded-sm ring-inset outline-0 focus:border-primary focus:ring-primary border-gray-200 text-md"
                   type="password"
                 />
               </div>
               <div className="flex pt-4">
                 <button
                   type="submit"
-                  className="inline-flex items-center justify-center font-bold rounded text-sm leading-6 whitespace-nowrap transition duration-700 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-0 active:outline-none active:ring-2 active:ring-offset-0 border-primary text-white bg-primary hover:opacity-80 focus:ring-gray-300 active:ring-primary active:bg-primary py-2.5 px-12 w-full disabled:bg-gray-100 disabled:text-gray-300"
+                  className="inline-flex items-center justify-center font-bold rounded-sm text-sm leading-6 whitespace-nowrap transition duration-700 ease-in-out focus:outline-hidden focus:ring-2 focus:ring-offset-0 active:outline-hidden active:ring-2 active:ring-offset-0 border-primary text-white bg-primary hover:opacity-80 focus:ring-gray-300 active:ring-primary active:bg-primary py-2.5 px-12 w-full disabled:bg-gray-100 disabled:text-gray-300"
                 >
                   Lorem
                 </button>

packages/app/src/components/InjectCssCustomProperties/index.tsx

@@ -52,4 +52,5 @@ const setCssProperties = (values: PropertySet[]): void => {
 }
 
 InjectCssCustomProperties.displayName = "InjectCssCustomProperties"
+
 export { InjectCssCustomProperties }

packages/app/src/components/SkeletonTemplate.tsx

@@ -1,12 +1,13 @@
 import cn from "classnames"
 import {
   Children,
+  cloneElement,
   type FC,
   type FunctionComponent,
+  isValidElement,
+  type JSX,
   type ReactNode,
   type ReactPortal,
-  cloneElement,
-  isValidElement,
 } from "react"
 import type { Simplify } from "type-fest"
 import { useDelayShow } from "#hooks/useDelayShow"
@@ -84,7 +85,12 @@ export function withSkeletonTemplate<P>(
     SkeletonTemplateProps<P>
   > = (props) => {
     const { isLoading, delayMs } = props
-    const element = Element({ ...props, isLoading, delayMs })
+    // React 19 `FC` may return a Promise (async components), never the case here
+    const element = Element({
+      ...props,
+      isLoading,
+      delayMs,
+    }) as ReactNodeNoPortal
 
     if (element != null) {
       return (
@@ -124,7 +130,7 @@ const SkeletonTemplate: SkeletonTemplateComponent<
 > = ({ children, isLoading, delayMs = 500 }) => {
   const [show] = useDelayShow(delayMs)
   const skeletonClass =
-    "select-none !border-gray-50 pointer-events-none animate-pulse !bg-gray-50 rounded text-transparent [&>*]:invisible object-out-of-bounds"
+    "select-none border-gray-50! pointer-events-none animate-pulse bg-gray-50! rounded-sm text-transparent *:invisible object-out-of-bounds"
 
   if (isLoading !== true) {
     return <>{children}</>
@@ -159,7 +165,7 @@ const SkeletonTemplate: SkeletonTemplateComponent<
               ([key, value]) => {
                 if (key !== "children" && isValidElement(value)) {
                   const newValue = (
-                    <SkeletonTemplate delayMs={0} isLoading>
+                    <SkeletonTemplate key={key} delayMs={0} isLoading>
                       {value}
                     </SkeletonTemplate>
                   )
@@ -188,4 +194,5 @@ const SkeletonTemplate: SkeletonTemplateComponent<
 
 SkeletonTemplate.displayName = "SkeletonTemplate"
 SkeletonTemplate.isSkeletonTemplate = true
+
 export { SkeletonTemplate }

packages/app/src/components/atoms/A.tsx

@@ -1,4 +1,4 @@
-import { type AnchorHTMLAttributes, forwardRef } from "react"
+import { type AnchorHTMLAttributes, forwardRef, type JSX } from "react"
 
 export const A = forwardRef<
   HTMLAnchorElement,

packages/app/src/components/atoms/Alert.tsx

@@ -1,5 +1,6 @@
 import { CheckCircle, XCircle } from "@phosphor-icons/react"
 import cn from "classnames"
+import type { JSX } from "react"
 
 type AlertVariant = "success" | "danger"
 

packages/app/src/components/atoms/Button.tsx

@@ -1,11 +1,11 @@
-import { type ButtonHTMLAttributes, forwardRef } from "react"
+import { type ButtonHTMLAttributes, forwardRef, type JSX } from "react"
 
 export const Button = forwardRef<
   HTMLButtonElement,
   ButtonHTMLAttributes<HTMLButtonElement>
 >(({ children, ...props }, ref): JSX.Element => {
   const buttonCss =
-    "w-full px-6 py-3 rounded !border-0 text-sm text-center font-bold transition-outline duration-300 outline-offset-4 outline-transparent bg-black text-white hover:opacity-80 focus:outline-primary"
+    "w-full px-6 py-3 rounded-sm border-0! text-sm text-center font-bold transition-outline duration-300 outline-offset-4 outline-transparent bg-black text-white hover:opacity-80 focus:outline-primary"
 
   return (
     <button {...props} ref={ref} className={buttonCss}>

packages/app/src/components/atoms/Input.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames"
-import type { InputHTMLAttributes } from "react"
+import type { InputHTMLAttributes, JSX } from "react"
 import { useFormContext } from "react-hook-form"
 
 import { InputLabel } from "#components/atoms/InputLabel"
@@ -20,11 +20,11 @@ export const Input = ({
   const form = useFormContext()
   const { hasError, errorMessage } = useValidationFeedback(name)
   const inputCss = cn([
-    "w-full autofill:text-base px-4 py-2.5 mt-2 rounded outline-0 border-0 !ring-inset ring-1 ring-gray-200 transition-shadow duration-300 !bg-white !shadow-[0_0_0_1000px_white_inset] focus:ring-2 focus:ring-primary",
+    "w-full autofill:text-base px-4 py-2.5 mt-2 rounded-sm outline-0 border-0 ring-inset! ring-1 ring-gray-200 transition-shadow duration-300 bg-white! shadow-[0_0_0_1000px_white_inset]! focus:ring-2 focus:ring-primary",
     hasError ? "ring-red-400 ring-2" : "",
   ])
   return (
-    <div className="field !mb-8">
+    <div className="field mb-8!">
       <InputLabel label={label} forElement={id} />
       <input
         {...form?.register(name)}

packages/app/src/components/atoms/InputLabel.tsx

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, forwardRef } from "react"
+import { forwardRef, type HTMLAttributes, type JSX } from "react"
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
   label?: string
@@ -8,20 +8,18 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
 export const InputLabel = forwardRef<HTMLDivElement, Props>(
   ({ label = "", forElement, ...props }, ref): JSX.Element => {
     return (
-      <>
-        <div
-          className="flex justify-between items-center mb-2"
-          {...props}
-          ref={ref}
+      <div
+        className="flex justify-between items-center mb-2"
+        {...props}
+        ref={ref}
+      >
+        <label
+          htmlFor={forElement}
+          className="text-black leading-6 font-semibold text-base"
         >
-          <label
-            htmlFor={forElement}
-            className="text-black leading-6 font-semibold text-base"
-          >
-            {label}
-          </label>
-        </div>
-      </>
+          {label}
+        </label>
+      </div>
     )
   },
 )

packages/app/src/components/atoms/InputValidationError.tsx

@@ -1,5 +1,5 @@
 import { WarningCircle } from "@phosphor-icons/react"
-import { type HTMLAttributes, forwardRef } from "react"
+import { forwardRef, type HTMLAttributes, type JSX } from "react"
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
   errorMessage?: string
@@ -8,16 +8,14 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
 export const InputValidationError = forwardRef<HTMLDivElement, Props>(
   ({ errorMessage = "", ...props }, ref): JSX.Element => {
     return (
-      <>
-        <div
-          {...props}
-          ref={ref}
-          className="flex items-center gap-1 text-red-400 font-bold mt-2"
-        >
-          <WarningCircle size={20} weight="bold" />
-          <div className="text-sm">{errorMessage}</div>
-        </div>
-      </>
+      <div
+        {...props}
+        ref={ref}
+        className="flex items-center gap-1 text-red-400 font-bold mt-2"
+      >
+        <WarningCircle size={20} weight="bold" />
+        <div className="text-sm">{errorMessage}</div>
+      </div>
     )
   },
 )

packages/app/src/components/atoms/Logo.tsx

@@ -1,4 +1,5 @@
 import type { Settings } from "App"
+import type { JSX } from "react"
 
 type LogoProps = Pick<Settings, "logoUrl" | "companyName"> & {
   className?: string

packages/app/src/components/atoms/PageHeading.tsx

@@ -1,3 +1,5 @@
+import type { JSX } from "react"
+
 interface Props {
   title?: string
   description?: string