chore: follow adrs

apps/login/src/app/(login)/accounts/page.tsx

@@ -1,7 +1,7 @@
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { SessionsList } from "@/components/sessions-list";
 import { getAllSessionCookieIds } from "@/lib/cookies";
 import { getBrandingSettings, listSessions } from "@/lib/zitadel";
-import DynamicTheme from "@/ui/DynamicTheme";
-import SessionsList from "@/ui/SessionsList";
 import { UserPlusIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
 

apps/login/src/app/(login)/error.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import { Boundary } from "@/ui/Boundary";
+import { Boundary } from "@/components/boundary";
-import { Button } from "@/ui/Button";
+import { Button } from "@/components/button";
-import React from "react";
+import { useEffect } from "react";
 
 export default function Error({ error, reset }: any) {
-  React.useEffect(() => {
+  useEffect(() => {
     console.log("logging error:", error);
   }, [error]);
 

apps/login/src/app/(login)/idp/[provider]/failure/page.tsx

@@ -1,5 +1,5 @@
+import { DynamicTheme } from "@/components/dynamic-theme";
 import { getBrandingSettings } from "@/lib/zitadel";
-import DynamicTheme from "@/ui/DynamicTheme";
 import { IdentityProviderType } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
 
 // This configuration shows the given name in the respective IDP button as fallback

apps/login/src/app/(login)/idp/[provider]/success/page.tsx

@@ -1,3 +1,6 @@
+import { Alert, AlertType } from "@/components/alert";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { IdpSignin } from "@/components/idp-signin";
 import { idpTypeToIdentityProviderType, PROVIDER_MAPPING } from "@/lib/idp";
 import {
   addIDPLink,
@@ -7,9 +10,6 @@ import {
   listUsers,
   retrieveIDPIntent,
 } from "@/lib/zitadel";
-import Alert, { AlertType } from "@/ui/Alert";
-import DynamicTheme from "@/ui/DynamicTheme";
-import IdpSignin from "@/ui/IdpSignin";
 import { AutoLinkingOption } from "@zitadel/proto/zitadel/idp/v2/idp_pb";
 
 export default async function Page({

apps/login/src/app/(login)/idp/page.tsx

@@ -1,6 +1,6 @@
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { SignInWithIdp } from "@/components/sign-in-with-idp";
 import { getBrandingSettings, settingsService } from "@/lib/zitadel";
-import DynamicTheme from "@/ui/DynamicTheme";
-import { SignInWithIDP } from "@/ui/SignInWithIDP";
 import { makeReqCtx } from "@zitadel/client/v2";
 
 function getIdentityProviders(orgId?: string) {
@@ -36,12 +36,12 @@ export default async function Page({
         </p>
 
         {identityProviders && (
-          <SignInWithIDP
+          <SignInWithIdp
             host={host}
             identityProviders={identityProviders}
             authRequestId={authRequestId}
             organization={organization}
-          ></SignInWithIDP>
+          ></SignInWithIdp>
         )}
       </div>
     </DynamicTheme>

apps/login/src/app/(login)/loginname/page.tsx

@@ -1,12 +1,12 @@
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { SignInWithIdp } from "@/components/sign-in-with-idp";
+import { UsernameForm } from "@/components/username-form";
 import {
   getBrandingSettings,
   getLegalAndSupportSettings,
   getLoginSettings,
   settingsService,
 } from "@/lib/zitadel";
-import DynamicTheme from "@/ui/DynamicTheme";
-import { SignInWithIDP } from "@/ui/SignInWithIDP";
-import UsernameForm from "@/ui/UsernameForm";
 import { makeReqCtx } from "@zitadel/client/v2";
 
 function getIdentityProviders(orgId?: string) {
@@ -52,12 +52,12 @@ export default async function Page({
           allowRegister={!!loginSettings?.allowRegister}
         >
           {legal && identityProviders && process.env.ZITADEL_API_URL && (
-            <SignInWithIDP
+            <SignInWithIdp
               host={host}
               identityProviders={identityProviders}
               authRequestId={authRequestId}
               organization={organization}
-            ></SignInWithIDP>
+            ></SignInWithIdp>
           )}
         </UsernameForm>
       </div>

apps/login/src/app/(login)/me/change-password/page.tsx

@@ -1,13 +1,13 @@
+import { Alert } from "@/components/alert";
+import { ChangePasswordForm } from "@/components/change-password-form";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { UserAvatar } from "@/components/user-avatar";
 import { getSessionCookieById } from "@/lib/cookies";
 import {
   getBrandingSettings,
   getPasswordComplexitySettings,
   getSession,
 } from "@/lib/zitadel";
-import Alert from "@/ui/Alert";
-import ChangePasswordForm from "@/ui/ChangePasswordForm";
-import DynamicTheme from "@/ui/DynamicTheme";
-import UserAvatar from "@/ui/UserAvatar";
 
 export default async function Page({
   searchParams,

apps/login/src/app/(login)/mfa/page.tsx

@@ -1,3 +1,8 @@
+import { Alert } from "@/components/alert";
+import { BackButton } from "@/components/back-button";
+import { ChooseSecondFactor } from "@/components/choose-second-factor";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { UserAvatar } from "@/components/user-avatar";
 import { getSessionCookieById } from "@/lib/cookies";
 import { loadMostRecentSession } from "@/lib/session";
 import {
@@ -5,11 +10,6 @@ import {
   getSession,
   listAuthenticationMethodTypes,
 } from "@/lib/zitadel";
-import Alert from "@/ui/Alert";
-import BackButton from "@/ui/BackButton";
-import ChooseSecondFactor from "@/ui/ChooseSecondFactor";
-import DynamicTheme from "@/ui/DynamicTheme";
-import UserAvatar from "@/ui/UserAvatar";
 
 export default async function Page({
   searchParams,

apps/login/src/app/(login)/mfa/set/page.tsx

@@ -1,3 +1,8 @@
+import { Alert } from "@/components/alert";
+import { BackButton } from "@/components/back-button";
+import { ChooseSecondFactorToSetup } from "@/components/choose-second-factor-to-setup";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { UserAvatar } from "@/components/user-avatar";
 import { getSessionCookieById } from "@/lib/cookies";
 import { loadMostRecentSession } from "@/lib/session";
 import {
@@ -7,11 +12,6 @@ import {
   getUserByID,
   listAuthenticationMethodTypes,
 } from "@/lib/zitadel";
-import Alert from "@/ui/Alert";
-import BackButton from "@/ui/BackButton";
-import ChooseSecondFactorToSetup from "@/ui/ChooseSecondFactorToSetup";
-import DynamicTheme from "@/ui/DynamicTheme";
-import UserAvatar from "@/ui/UserAvatar";
 import { Timestamp, timestampDate } from "@zitadel/client";
 import { Session } from "@zitadel/proto/zitadel/session/v2/session_pb";
 

apps/login/src/app/(login)/otp/[method]/page.tsx

@@ -1,9 +1,9 @@
+import { Alert } from "@/components/alert";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { LoginOTP } from "@/components/login-otp";
+import { UserAvatar } from "@/components/user-avatar";
 import { loadMostRecentSession } from "@/lib/session";
 import { getBrandingSettings } from "@/lib/zitadel";
-import Alert from "@/ui/Alert";
-import DynamicTheme from "@/ui/DynamicTheme";
-import LoginOTP from "@/ui/LoginOTP";
-import UserAvatar from "@/ui/UserAvatar";
 
 export default async function Page({
   searchParams,

apps/login/src/app/(login)/otp/[method]/set/page.tsx

@@ -1,3 +1,9 @@
+import { Alert } from "@/components/alert";
+import { BackButton } from "@/components/back-button";
+import { Button, ButtonVariants } from "@/components/button";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { TotpRegister } from "@/components/totp-register";
+import { UserAvatar } from "@/components/user-avatar";
 import { loadMostRecentSession } from "@/lib/session";
 import {
   addOTPEmail,
@@ -5,12 +11,6 @@ import {
   getBrandingSettings,
   registerTOTP,
 } from "@/lib/zitadel";
-import Alert from "@/ui/Alert";
-import BackButton from "@/ui/BackButton";
-import { Button, ButtonVariants } from "@/ui/Button";
-import DynamicTheme from "@/ui/DynamicTheme";
-import TOTPRegister from "@/ui/TOTPRegister";
-import UserAvatar from "@/ui/UserAvatar";
 import { RegisterTOTPResponse } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
 import Link from "next/link";
 import { redirect } from "next/navigation";
@@ -129,7 +129,7 @@ export default async function Page({
               Scan the QR Code or navigate to the URL manually.
             </p>
             <div>
-              <TOTPRegister
+              <TotpRegister
                 uri={totpResponse.uri as string}
                 secret={totpResponse.secret as string}
                 loginName={loginName}
@@ -137,7 +137,7 @@ export default async function Page({
                 authRequestId={authRequestId}
                 organization={organization}
                 checkAfter={checkAfter === "true"}
-              ></TOTPRegister>
+              ></TotpRegister>
             </div>{" "}
           </>
         ) : (

apps/login/src/app/(login)/passkey/page.tsx

@@ -1,10 +1,10 @@
+import { Alert } from "@/components/alert";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { LoginPasskey } from "@/components/login-passkey";
+import { UserAvatar } from "@/components/user-avatar";
 import { getSessionCookieById } from "@/lib/cookies";
 import { loadMostRecentSession } from "@/lib/session";
 import { getBrandingSettings, getSession } from "@/lib/zitadel";
-import Alert from "@/ui/Alert";
-import DynamicTheme from "@/ui/DynamicTheme";
-import LoginPasskey from "@/ui/LoginPasskey";
-import UserAvatar from "@/ui/UserAvatar";
 
 const title = "Authenticate with a passkey";
 const description =

apps/login/src/app/(login)/passkey/set/page.tsx

@@ -1,9 +1,9 @@
+import { Alert, AlertType } from "@/components/alert";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { RegisterPasskey } from "@/components/register-passkey";
+import { UserAvatar } from "@/components/user-avatar";
 import { loadMostRecentSession } from "@/lib/session";
 import { getBrandingSettings } from "@/lib/zitadel";
-import Alert, { AlertType } from "@/ui/Alert";
-import DynamicTheme from "@/ui/DynamicTheme";
-import RegisterPasskey from "@/ui/RegisterPasskey";
-import UserAvatar from "@/ui/UserAvatar";
 
 export default async function Page({
   searchParams,

apps/login/src/app/(login)/password/page.tsx

@@ -1,9 +1,9 @@
+import { Alert } from "@/components/alert";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { PasswordForm } from "@/components/password-form";
+import { UserAvatar } from "@/components/user-avatar";
 import { loadMostRecentSession } from "@/lib/session";
 import { getBrandingSettings, getLoginSettings } from "@/lib/zitadel";
-import Alert from "@/ui/Alert";
-import DynamicTheme from "@/ui/DynamicTheme";
-import PasswordForm from "@/ui/PasswordForm";
-import UserAvatar from "@/ui/UserAvatar";
 import { PasskeysType } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
 
 export default async function Page({

apps/login/src/app/(login)/register/page.tsx

@@ -1,11 +1,11 @@
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { RegisterFormWithoutPassword } from "@/components/register-form-without-password";
+import { SetPasswordForm } from "@/components/set-password-form";
 import {
   getBrandingSettings,
   getLegalAndSupportSettings,
   getPasswordComplexitySettings,
 } from "@/lib/zitadel";
-import DynamicTheme from "@/ui/DynamicTheme";
-import RegisterFormWithoutPassword from "@/ui/RegisterFormWithoutPassword";
-import SetPasswordForm from "@/ui/SetPasswordForm";
 
 export default async function Page({
   searchParams,

apps/login/src/app/(login)/signedin/page.tsx

@@ -1,8 +1,8 @@
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { SelfServiceMenu } from "@/components/self-service-menu";
+import { UserAvatar } from "@/components/user-avatar";
 import { getMostRecentCookieWithLoginname } from "@/lib/cookies";
 import { createCallback, getBrandingSettings, getSession } from "@/lib/zitadel";
-import DynamicTheme from "@/ui/DynamicTheme";
-import SelfServiceMenu from "@/ui/SelfServiceMenu";
-import UserAvatar from "@/ui/UserAvatar";
 import { create } from "@zitadel/client";
 import {
   CreateCallbackRequestSchema,

apps/login/src/app/(login)/u2f/page.tsx

@@ -1,10 +1,10 @@
+import { Alert } from "@/components/alert";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { LoginPasskey } from "@/components/login-passkey";
+import { UserAvatar } from "@/components/user-avatar";
 import { getSessionCookieById } from "@/lib/cookies";
 import { loadMostRecentSession } from "@/lib/session";
 import { getBrandingSettings, getSession } from "@/lib/zitadel";
-import Alert from "@/ui/Alert";
-import DynamicTheme from "@/ui/DynamicTheme";
-import LoginPasskey from "@/ui/LoginPasskey";
-import UserAvatar from "@/ui/UserAvatar";
 
 export default async function Page({
   searchParams,

apps/login/src/app/(login)/u2f/set/page.tsx

@@ -1,9 +1,9 @@
+import { Alert } from "@/components/alert";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { RegisterU2f } from "@/components/register-u2f";
+import { UserAvatar } from "@/components/user-avatar";
 import { loadMostRecentSession } from "@/lib/session";
 import { getBrandingSettings } from "@/lib/zitadel";
-import Alert from "@/ui/Alert";
-import DynamicTheme from "@/ui/DynamicTheme";
-import RegisterU2F from "@/ui/RegisterU2F";
-import UserAvatar from "@/ui/UserAvatar";
 
 export default async function Page({
   searchParams,
@@ -48,7 +48,7 @@ export default async function Page({
         )}
 
         {sessionFactors?.id && (
-          <RegisterU2F
+          <RegisterU2f
             loginName={loginName}
             sessionId={sessionFactors.id}
             organization={organization}

apps/login/src/app/(login)/verify/page.tsx

@@ -1,7 +1,7 @@
+import { Alert } from "@/components/alert";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { VerifyEmailForm } from "@/components/verify-email-form";
 import { getBrandingSettings, getLoginSettings } from "@/lib/zitadel";
-import Alert from "@/ui/Alert";
-import DynamicTheme from "@/ui/DynamicTheme";
-import VerifyEmailForm from "@/ui/VerifyEmailForm";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 
 export default async function Page({ searchParams }: { searchParams: any }) {

apps/login/src/app/layout.tsx

@@ -1,10 +1,12 @@
 import "@/styles/globals.scss";
-import { AddressBar } from "@/ui/AddressBar";
+
-import { GlobalNav } from "@/ui/GlobalNav";
+import { AddressBar } from "@/components/address-bar";
-import Theme from "@/ui/Theme";
+import { GlobalNav } from "@/components/global-nav";
-import ThemeProvider from "@/ui/ThemeProvider";
+import { Theme } from "@/components/theme";
+import { ThemeProvider } from "@/components/theme-provider";
 import { Analytics } from "@vercel/analytics/react";
 import { Lato } from "next/font/google";
+import { ReactNode } from "react";
 
 const lato = Lato({
   weight: ["400", "700", "900"],
@@ -16,7 +18,7 @@ export const revalidate = 60; // revalidate every minute
 export default async function RootLayout({
   children,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
 }) {
   // later only shown with dev mode enabled
   const showNav = process.env.DEBUG === "true";

apps/login/src/app/login/route.ts

@@ -1,12 +1,3 @@
-import {
-  CreateCallbackRequestSchema,
-  SessionSchema,
-} from "@zitadel/proto/zitadel/oidc/v2/oidc_service_pb";
-
-export const dynamic = "force-dynamic";
-export const revalidate = false;
-export const fetchCache = "default-no-store";
-
 import { getAllSessions } from "@/lib/cookies";
 import { idpTypeToSlug } from "@/lib/idp";
 import {
@@ -22,9 +13,17 @@ import {
   AuthRequest,
   Prompt,
 } from "@zitadel/proto/zitadel/oidc/v2/authorization_pb";
+import {
+  CreateCallbackRequestSchema,
+  SessionSchema,
+} from "@zitadel/proto/zitadel/oidc/v2/oidc_service_pb";
 import { Session } from "@zitadel/proto/zitadel/session/v2/session_pb";
 import { NextRequest, NextResponse } from "next/server";
 
+export const dynamic = "force-dynamic";
+export const revalidate = false;
+export const fetchCache = "default-no-store";
+
 async function loadSessions(ids: string[]): Promise<Session[]> {
   const response = await listSessions(
     ids.filter((id: string | undefined) => !!id),

apps/login/src/components/address-bar.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { usePathname } from "next/navigation";
-import React from "react";
+import { Fragment } from "react";
 
 type Props = {
   domain: string;
@@ -39,7 +39,7 @@ export function AddressBar({ domain }: Props) {
               .filter((s) => !!s)
               .map((segment) => {
                 return (
-                  <React.Fragment key={segment}>
+                  <Fragment key={segment}>
                     <span>
                       <span
                         key={segment}
@@ -50,7 +50,7 @@ export function AddressBar({ domain }: Props) {
                     </span>
 
                     <span className="text-gray-600">/</span>
-                  </React.Fragment>
+                  </Fragment>
                 );
               })}
           </>

apps/login/src/components/alert.tsx

@@ -2,10 +2,11 @@ import {
   ExclamationTriangleIcon,
   InformationCircleIcon,
 } from "@heroicons/react/24/outline";
-import clsx from "clsx";
+import { clsx } from "clsx";
+import { ReactNode } from "react";
 
 type Props = {
-  children: React.ReactNode;
+  children: ReactNode;
   type?: AlertType;
 };
 
@@ -21,7 +22,7 @@ const red =
 const neutral =
   "border-divider-light dark:border-divider-dark bg-black/5 text-gray-600 dark:bg-white/10 dark:text-gray-200";
 
-export default function Alert({ children, type = AlertType.ALERT }: Props) {
+export function Alert({ children, type = AlertType.ALERT }: Props) {
   return (
     <div
       className={clsx(

apps/login/src/components/auth-methods.tsx

@@ -1,8 +1,8 @@
 import { CheckIcon } from "@heroicons/react/24/solid";
-import clsx from "clsx";
+import { clsx } from "clsx";
 import Link from "next/link";
 import { ReactNode } from "react";
-import { BadgeState, StateBadge } from "./StateBadge";
+import { BadgeState, StateBadge } from "./state-badge";
 
 const cardClasses = (alreadyAdded: boolean) =>
   clsx(

apps/login/src/components/authentication-method-radio.tsx

@@ -13,7 +13,7 @@ export const methods = [
   },
 ];
 
-export default function AuthenticationMethodRadio({
+export function AuthenticationMethodRadio({
   selected,
   selectionChanged,
 }: {

apps/login/src/components/avatar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ColorShade, getColorHash } from "@/utils/colors";
+import { ColorShade, getColorHash } from "@/helpers/colors";
 import { useTheme } from "next-themes";
 import Image from "next/image";
 

apps/login/src/components/back-button.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { Button, ButtonVariants } from "./Button";
+import { Button, ButtonVariants } from "./button";
 
-export default function BackButton() {
+export function BackButton() {
   const router = useRouter();
   return (
     <Button

apps/login/src/components/boundary.tsx

@@ -1,12 +1,12 @@
-import clsx from "clsx";
+import { clsx } from "clsx";
-import React from "react";
+import { ReactNode } from "react";
 
 const Label = ({
   children,
   animateRerendering,
   color,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   animateRerendering?: boolean;
   color?: "default" | "pink" | "blue" | "violet" | "cyan" | "orange" | "red";
 }) => {
@@ -34,7 +34,7 @@ export const Boundary = ({
   color = "default",
   animateRerendering = true,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   labels?: string[];
   size?: "small" | "default";
   color?: "default" | "pink" | "blue" | "violet" | "cyan" | "orange" | "red";

apps/login/src/components/button.tsx

@@ -1,4 +1,4 @@
-import clsx from "clsx";
+import { clsx } from "clsx";
 import { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef } from "react";
 
 export enum ButtonSizes {

apps/login/src/components/change-password-form.tsx

@@ -1,22 +1,22 @@
 "use client";
 
-import { setPassword } from "@/lib/self";
 import {
   lowerCaseValidator,
   numberValidator,
   symbolValidator,
   upperCaseValidator,
-} from "@/utils/validators";
+} from "@/helpers/validators";
+import { setPassword } from "@/lib/self";
 import { PasswordComplexitySettings } from "@zitadel/proto/zitadel/settings/v2/password_settings_pb";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { FieldValues, useForm } from "react-hook-form";
-import Alert from "./Alert";
+import { Alert } from "./alert";
-import BackButton from "./BackButton";
+import { BackButton } from "./back-button";
-import { Button, ButtonVariants } from "./Button";
+import { Button, ButtonVariants } from "./button";
-import { TextInput } from "./Input";
+import { TextInput } from "./input";
-import PasswordComplexity from "./PasswordComplexity";
+import { PasswordComplexity } from "./password-complexity";
-import { Spinner } from "./Spinner";
+import { Spinner } from "./spinner";
 
 type Inputs =
   | {
@@ -31,7 +31,7 @@ type Props = {
   sessionId: string;
 };
 
-export default function ChangePasswordForm({
+export function ChangePasswordForm({
   passwordComplexitySettings,
   userId,
   sessionId,

apps/login/src/components/choose-second-factor-to-setup.tsx

@@ -5,7 +5,7 @@ import {
   SecondFactorType,
 } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
 import { AuthenticationMethodType } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
-import { EMAIL, SMS, TOTP, U2F } from "./AuthMethods";
+import { EMAIL, SMS, TOTP, U2F } from "./auth-methods";
 
 type Props = {
   loginName?: string;
@@ -19,7 +19,7 @@ type Props = {
   emailVerified: boolean;
 };
 
-export default function ChooseSecondFactorToSetup({
+export function ChooseSecondFactorToSetup({
   loginName,
   sessionId,
   authRequestId,

apps/login/src/components/choose-second-factor.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { AuthenticationMethodType } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
-import { EMAIL, SMS, TOTP, U2F } from "./AuthMethods";
+import { EMAIL, SMS, TOTP, U2F } from "./auth-methods";
 
 type Props = {
   loginName?: string;
@@ -11,7 +11,7 @@ type Props = {
   userMethods: AuthenticationMethodType[];
 };
 
-export default function ChooseSecondFactor({
+export function ChooseSecondFactor({
   loginName,
   sessionId,
   authRequestId,

apps/login/src/components/copy-to-clipboard.tsx

@@ -11,7 +11,7 @@ type Props = {
   value: string;
 };
 
-export default function CopyToClipboard({ value }: Props) {
+export function CopyToClipboard({ value }: Props) {
   const [copied, setCopied] = useState(false);
 
   useEffect(() => {

apps/login/src/components/dynamic-theme.tsx

@@ -1,15 +1,15 @@
 "use client";
 
-import { Logo } from "@/ui/Logo";
+import { Logo } from "@/components/logo";
 import { BrandingSettings } from "@zitadel/proto/zitadel/settings/v2/branding_settings_pb";
-import React from "react";
+import { ReactNode } from "react";
-import ThemeWrapper from "./ThemeWrapper";
+import { ThemeWrapper } from "./theme-wrapper";
 
-export default function DynamicTheme({
+export function DynamicTheme({
   branding,
   children,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   branding?: BrandingSettings;
 }) {
   return (

apps/login/src/components/external-link.tsx

@@ -1,10 +1,11 @@
 import { ArrowRightIcon } from "@heroicons/react/24/solid";
+import { ReactNode } from "react";
 
 export const ExternalLink = ({
   children,
   href,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   href: string;
 }) => {
   return (

apps/login/src/components/global-nav.tsx

@@ -1,13 +1,13 @@
 "use client";
 
+import { ZitadelLogo } from "@/components/zitadel-logo";
 import { demos, type Item } from "@/lib/demos";
-import { ZitadelLogo } from "@/ui/ZitadelLogo";
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
-import clsx from "clsx";
+import { clsx } from "clsx";
 import Link from "next/link";
 import { usePathname, useSelectedLayoutSegment } from "next/navigation";
 import { useState } from "react";
-import Theme from "./Theme";
+import { Theme } from "./theme";
 
 export function GlobalNav() {
   const [isOpen, setIsOpen] = useState(false);

apps/login/src/components/idp-signin.tsx

@@ -3,8 +3,8 @@
 import { createNewSession } from "@/lib/server/session";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
-import Alert from "./Alert";
+import { Alert } from "./alert";
-import { Spinner } from "./Spinner";
+import { Spinner } from "./spinner";
 
 type Props = {
   userId: string;
@@ -16,7 +16,7 @@ type Props = {
   authRequestId?: string;
 };
 
-export default function IdpSignin({
+export function IdpSignin({
   userId,
   idpIntent: { idpIntentId, idpIntentToken },
   authRequestId,

apps/login/src/components/idps/classes.tsx

@@ -1,10 +1,10 @@
-import { ButtonHTMLAttributes, DetailedHTMLProps } from "react";
+import { ButtonHTMLAttributes, DetailedHTMLProps, ReactNode } from "react";
 
 export const IdpButtonClasses =
   "transition-all w-full cursor-pointer flex flex-row items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border border-divider-light hover:border-black dark:border-divider-dark hover:dark:border-white focus:border-primary-light-500 focus:dark:border-primary-dark-500 outline-none rounded-md px-4 text-sm";
 
 export interface SignInWithIDPProps {
-  children?: React.ReactNode;
+  children?: ReactNode;
   orgId?: string;
 }
 

apps/login/src/components/idps/sign-in-with-azure-ad.tsx

@@ -3,7 +3,7 @@
 import { ReactNode, forwardRef } from "react";
 import { IdpButtonClasses, SignInWithIdentityProviderProps } from "./classes";
 
-export const SignInWithAzureAD = forwardRef<
+export const SignInWithAzureAd = forwardRef<
   HTMLButtonElement,
   SignInWithIdentityProviderProps
 >(
@@ -37,4 +37,4 @@ export const SignInWithAzureAD = forwardRef<
   ),
 );
 
-SignInWithAzureAD.displayName = "SignInWithAzureAD";
+SignInWithAzureAd.displayName = "SignInWithAzureAD";

apps/login/src/components/idps/sign-in-with-gitlab.test.tsx

@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, test } from "vitest";
 
 import { cleanup, render, screen } from "@testing-library/react";
-import { SignInWithGitlab } from "./SignInWithGitlab";
+import { SignInWithGitlab } from "./sign-in-with-gitlab";
 
 afterEach(cleanup);
 

apps/login/src/components/idps/sign-in-with-google.test.tsx

@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, test } from "vitest";
 
 import { cleanup, render, screen } from "@testing-library/react";
-import { SignInWithGoogle } from "./SignInWithGoogle";
+import { SignInWithGoogle } from "./sign-in-with-google";
 
 afterEach(cleanup);
 

apps/login/src/components/input.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { CheckCircleIcon } from "@heroicons/react/24/solid";
-import clsx from "clsx";
+import { clsx } from "clsx";
 import {
   ChangeEvent,
   DetailedHTMLProps,

apps/login/src/components/layout-providers.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { useTheme } from "next-themes";
+import { ReactNode } from "react";
 
 type Props = {
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
 export function LayoutProviders({ children }: Props) {

apps/login/src/components/login-otp.tsx

@@ -7,11 +7,11 @@ import { ChecksSchema } from "@zitadel/proto/zitadel/session/v2/session_service_
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
-import Alert, { AlertType } from "./Alert";
+import { Alert, AlertType } from "./alert";
-import BackButton from "./BackButton";
+import { BackButton } from "./back-button";
-import { Button, ButtonVariants } from "./Button";
+import { Button, ButtonVariants } from "./button";
-import { TextInput } from "./Input";
+import { TextInput } from "./input";
-import { Spinner } from "./Spinner";
+import { Spinner } from "./spinner";
 
 // either loginName or sessionId must be provided
 type Props = {
@@ -27,7 +27,7 @@ type Inputs = {
   code: string;
 };
 
-export default function LoginOTP({
+export function LoginOTP({
   loginName,
   sessionId,
   authRequestId,

apps/login/src/components/login-passkey.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { coerceToArrayBuffer, coerceToBase64Url } from "@/helpers/base64";
 import { updateSession } from "@/lib/server/session";
-import { coerceToArrayBuffer, coerceToBase64Url } from "@/utils/base64";
 import { create } from "@zitadel/client";
 import {
   RequestChallengesSchema,
@@ -10,10 +10,10 @@ import {
 import { Checks } from "@zitadel/proto/zitadel/session/v2/session_service_pb";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
-import Alert from "./Alert";
+import { Alert } from "./alert";
-import BackButton from "./BackButton";
+import { BackButton } from "./back-button";
-import { Button, ButtonVariants } from "./Button";
+import { Button, ButtonVariants } from "./button";
-import { Spinner } from "./Spinner";
+import { Spinner } from "./spinner";
 
 // either loginName or sessionId must be provided
 type Props = {
@@ -25,7 +25,7 @@ type Props = {
   organization?: string;
 };
 
-export default function LoginPasskey({
+export function LoginPasskey({
   loginName,
   sessionId,
   authRequestId,

apps/login/src/components/mobile-nav-toggle.tsx

@@ -1,19 +1,26 @@
 "use client";
 
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
-import clsx from "clsx";
+import { clsx } from "clsx";
-import React from "react";
+import {
+  createContext,
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useContext,
+  useState,
+} from "react";
 
-const MobileNavContext = React.createContext<
+const MobileNavContext = createContext<
-  [boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined
+  [boolean, Dispatch<SetStateAction<boolean>>] | undefined
 >(undefined);
 
 export function MobileNavContextProvider({
   children,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
 }) {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
   return (
     <MobileNavContext.Provider value={[isOpen, setIsOpen]}>
       {children}
@@ -22,7 +29,7 @@ export function MobileNavContextProvider({
 }
 
 export function useMobileNavToggle() {
-  const context = React.useContext(MobileNavContext);
+  const context = useContext(MobileNavContext);
   if (context === undefined) {
     throw new Error(
       "useMobileNavToggle must be used within a MobileNavContextProvider",
@@ -31,7 +38,7 @@ export function useMobileNavToggle() {
   return context;
 }
 
-export function MobileNavToggle({ children }: { children: React.ReactNode }) {
+export function MobileNavToggle({ children }: { children: ReactNode }) {
   const [isOpen, setIsOpen] = useMobileNavToggle();
 
   return (

apps/login/src/components/password-complexity.test.tsx

@@ -6,7 +6,7 @@ import {
   within,
 } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, test } from "vitest";
-import PasswordComplexity from "./PasswordComplexity";
+import { PasswordComplexity } from "./password-complexity";
 
 const matchesTitle = `Matches`;
 const doesntMatchTitle = `Doesn't match`;

apps/login/src/components/password-complexity.tsx

@@ -3,7 +3,7 @@ import {
   numberValidator,
   symbolValidator,
   upperCaseValidator,
-} from "@/utils/validators";
+} from "@/helpers/validators";
 import { PasswordComplexitySettings } from "@zitadel/proto/zitadel/settings/v2/password_settings_pb";
 
 type Props = {
@@ -51,7 +51,7 @@ const cross = (
 const desc =
   "text-14px leading-4 text-input-light-label dark:text-input-dark-label";
 
-export default function PasswordComplexity({
+export function PasswordComplexity({
   passwordComplexitySettings,
   password,
   equals,

apps/login/src/components/password-form.tsx

@@ -8,11 +8,11 @@ import { AuthenticationMethodType } from "@zitadel/proto/zitadel/user/v2/user_se
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import Alert, { AlertType } from "./Alert";
+import { Alert, AlertType } from "./alert";
-import BackButton from "./BackButton";
+import { BackButton } from "./back-button";
-import { Button, ButtonVariants } from "./Button";
+import { Button, ButtonVariants } from "./button";
-import { TextInput } from "./Input";
+import { TextInput } from "./input";
-import { Spinner } from "./Spinner";
+import { Spinner } from "./spinner";
 
 type Inputs = {
   password: string;
@@ -27,7 +27,7 @@ type Props = {
   promptPasswordless?: boolean;
 };
 
-export default function PasswordForm({
+export function PasswordForm({
   loginSettings,
   loginName,
   organization,

apps/login/src/components/privacy-policy-checkboxes.tsx

@@ -2,7 +2,7 @@
 import { LegalAndSupportSettings } from "@zitadel/proto/zitadel/settings/v2/legal_settings_pb";
 import Link from "next/link";
 import { useState } from "react";
-import { Checkbox } from "./Checkbox";
+import { Checkbox } from "./checkbox";
 
 type Props = {
   legal: LegalAndSupportSettings;

apps/login/src/components/register-form-without-password.tsx

@@ -5,15 +5,16 @@ import { LegalAndSupportSettings } from "@zitadel/proto/zitadel/settings/v2/lega
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { FieldValues, useForm } from "react-hook-form";
-import Alert from "./Alert";
+import { Alert } from "./alert";
-import AuthenticationMethodRadio, {
+import {
+  AuthenticationMethodRadio,
   methods,
-} from "./AuthenticationMethodRadio";
+} from "./authentication-method-radio";
-import BackButton from "./BackButton";
+import { BackButton } from "./back-button";
-import { Button, ButtonVariants } from "./Button";
+import { Button, ButtonVariants } from "./button";
-import { TextInput } from "./Input";
+import { TextInput } from "./input";
-import { PrivacyPolicyCheckboxes } from "./PrivacyPolicyCheckboxes";
+import { PrivacyPolicyCheckboxes } from "./privacy-policy-checkboxes";
-import { Spinner } from "./Spinner";
+import { Spinner } from "./spinner";
 
 type Inputs =
   | {
@@ -32,7 +33,7 @@ type Props = {
   authRequestId?: string;
 };
 
-export default function RegisterFormWithoutPassword({
+export function RegisterFormWithoutPassword({
   legal,
   email,
   firstname,

apps/login/src/components/register-passkey.tsx

@@ -1,14 +1,14 @@
 "use client";
 
+import { coerceToArrayBuffer, coerceToBase64Url } from "@/helpers/base64";
 import { registerPasskeyLink, verifyPasskey } from "@/lib/server/passkeys";
-import { coerceToArrayBuffer, coerceToBase64Url } from "@/utils/base64";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import Alert from "./Alert";
+import { Alert } from "./alert";
-import BackButton from "./BackButton";
+import { BackButton } from "./back-button";
-import { Button, ButtonVariants } from "./Button";
+import { Button, ButtonVariants } from "./button";
-import { Spinner } from "./Spinner";
+import { Spinner } from "./spinner";
 
 type Inputs = {};
 
@@ -19,7 +19,7 @@ type Props = {
   organization?: string;
 };
 
-export default function RegisterPasskey({
+export function RegisterPasskey({
   sessionId,
   isPrompt,
   organization,

apps/login/src/components/register-u2f.tsx

@@ -1,14 +1,14 @@
 "use client";
 
+import { coerceToArrayBuffer, coerceToBase64Url } from "@/helpers/base64";
 import { addU2F, verifyU2F } from "@/lib/server/u2f";
-import { coerceToArrayBuffer, coerceToBase64Url } from "@/utils/base64";
 import { RegisterU2FResponse } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import Alert from "./Alert";
+import { Alert } from "./alert";
-import BackButton from "./BackButton";
+import { BackButton } from "./back-button";
-import { Button, ButtonVariants } from "./Button";
+import { Button, ButtonVariants } from "./button";
-import { Spinner } from "./Spinner";
+import { Spinner } from "./spinner";
 
 type Props = {
   loginName?: string;
@@ -18,7 +18,7 @@ type Props = {
   checkAfter: boolean;
 };
 
-export default function RegisterU2F({
+export function RegisterU2f({
   loginName,
   sessionId,
   organization,

apps/login/src/components/self-service-menu.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 
-export default function SelfServiceMenu({ sessionId }: { sessionId: string }) {
+export function SelfServiceMenu({ sessionId }: { sessionId: string }) {
   const list: any[] = [];
 
   // if (!!config.selfservice.change_password.enabled) {

apps/login/src/components/session-item.tsx

@@ -7,7 +7,7 @@ import { Session } from "@zitadel/proto/zitadel/session/v2/session_pb";
 import moment from "moment";
 import Link from "next/link";
 import { useState } from "react";
-import { Avatar } from "./Avatar";
+import { Avatar } from "./avatar";
 
 export function isSessionValid(session: Partial<Session>): {
   valid: boolean;
@@ -25,7 +25,7 @@ export function isSessionValid(session: Partial<Session>): {
   return { valid, verifiedAt };
 }
 
-export default function SessionItem({
+export function SessionItem({
   session,
   reload,
   authRequestId,

apps/login/src/components/sessions-list.tsx

@@ -2,15 +2,15 @@
 
 import { Session } from "@zitadel/proto/zitadel/session/v2/session_pb";
 import { useState } from "react";
-import Alert from "./Alert";
+import { Alert } from "./alert";
-import SessionItem from "./SessionItem";
+import { SessionItem } from "./session-item";
 
 type Props = {
   sessions: Session[];
   authRequestId?: string;
 };
 
-export default function SessionsList({ sessions, authRequestId }: Props) {
+export function SessionsList({ sessions, authRequestId }: Props) {
   const [list, setList] = useState<Session[]>(sessions);
   return sessions ? (
     <div className="flex flex-col space-y-2">

apps/login/src/components/set-password-form.tsx

@@ -1,22 +1,22 @@
 "use client";
 
-import { registerUser, RegisterUserResponse } from "@/lib/server/register";
 import {
   lowerCaseValidator,
   numberValidator,
   symbolValidator,
   upperCaseValidator,
-} from "@/utils/validators";
+} from "@/helpers/validators";
+import { registerUser, RegisterUserResponse } from "@/lib/server/register";
 import { PasswordComplexitySettings } from "@zitadel/proto/zitadel/settings/v2/password_settings_pb";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { FieldValues, useForm } from "react-hook-form";
-import Alert from "./Alert";
+import { Alert } from "./alert";
-import BackButton from "./BackButton";
+import { BackButton } from "./back-button";
-import { Button, ButtonVariants } from "./Button";
+import { Button, ButtonVariants } from "./button";
-import { TextInput } from "./Input";
+import { TextInput } from "./input";
-import PasswordComplexity from "./PasswordComplexity";
+import { PasswordComplexity } from "./password-complexity";
-import { Spinner } from "./Spinner";
+import { Spinner } from "./spinner";
 
 type Inputs =
   | {
@@ -34,7 +34,7 @@ type Props = {
   authRequestId?: string;
 };
 
-export default function SetPasswordForm({
+export function SetPasswordForm({
   passwordComplexitySettings,
   email,
   firstname,

apps/login/src/components/sign-in-with-idp.tsx

@@ -8,13 +8,13 @@ import {
 } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
 import { useRouter } from "next/navigation";
 import { ReactNode, useState } from "react";
-import Alert from "./Alert";
+import { Alert } from "./alert";
-import { SignInWithApple } from "./idps/SignInWithApple";
+import { SignInWithApple } from "./idps/sign-in-with-apple";
-import { SignInWithAzureAD } from "./idps/SignInWithAzureAD";
+import { SignInWithAzureAd } from "./idps/sign-in-with-azure-ad";
-import { SignInWithGeneric } from "./idps/SignInWithGeneric";
+import { SignInWithGeneric } from "./idps/sign-in-with-generic";
-import { SignInWithGithub } from "./idps/SignInWithGithub";
+import { SignInWithGithub } from "./idps/sign-in-with-github";
-import { SignInWithGitlab } from "./idps/SignInWithGitlab";
+import { SignInWithGitlab } from "./idps/sign-in-with-gitlab";
-import { SignInWithGoogle } from "./idps/SignInWithGoogle";
+import { SignInWithGoogle } from "./idps/sign-in-with-google";
 
 export interface SignInWithIDPProps {
   children?: ReactNode;
@@ -24,7 +24,7 @@ export interface SignInWithIDPProps {
   organization?: string;
 }
 
-export function SignInWithIDP({
+export function SignInWithIdp({
   host,
   identityProviders,
   authRequestId,
@@ -130,13 +130,13 @@ export function SignInWithIDP({
               );
             case IdentityProviderType.AZURE_AD:
               return (
-                <SignInWithAzureAD
+                <SignInWithAzureAd
                   key={`idp-${i}`}
                   name={idp.name}
                   onClick={() =>
                     navigateToAuthUrl(idp.id, IdentityProviderType.AZURE_AD)
                   }
-                ></SignInWithAzureAD>
+                ></SignInWithAzureAd>
               );
             case IdentityProviderType.GOOGLE:
               return (
@@ -185,4 +185,4 @@ export function SignInWithIDP({
   );
 }
 
-SignInWithIDP.displayName = "SignInWithIDP";
+SignInWithIdp.displayName = "SignInWithIDP";

apps/login/src/components/skeleton-card.tsx

@@ -1,4 +1,4 @@
-import clsx from "clsx";
+import { clsx } from "clsx";
 
 export const SkeletonCard = ({ isLoading }: { isLoading?: boolean }) => (
   <div

apps/login/src/components/state-badge.tsx

@@ -1,4 +1,4 @@
-import clsx from "clsx";
+import { clsx } from "clsx";
 import { ReactNode } from "react";
 
 export enum BadgeState {

apps/login/src/components/tab-group.tsx

@@ -1,4 +1,4 @@
-import { Tab } from "@/ui/Tab";
+import { Tab } from "@/components/tab";
 
 export type Item = {
   text: string;

apps/login/src/components/tab.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import type { Item } from "@/ui/TabGroup";
+import type { Item } from "@/components/tab-group";
-import clsx from "clsx";
+import { clsx } from "clsx";
 import Link from "next/link";
 import { useSelectedLayoutSegment } from "next/navigation";
 

apps/login/src/components/theme-provider.tsx

@@ -2,7 +2,7 @@
 import { ThemeProvider as ThemeP } from "next-themes";
 import { ReactNode } from "react";
 
-export default function ThemeProvider({ children }: { children: ReactNode }) {
+export function ThemeProvider({ children }: { children: ReactNode }) {
   return (
     <ThemeP
       attribute="class"

apps/login/src/components/theme-wrapper.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { setTheme } from "@/utils/colors";
+import { setTheme } from "@/helpers/colors";
 import { BrandingSettings } from "@zitadel/proto/zitadel/settings/v2/branding_settings_pb";
 import { ReactNode, useEffect } from "react";
 
@@ -9,7 +9,7 @@ type Props = {
   children: ReactNode;
 };
 
-const ThemeWrapper = ({ children, branding }: Props) => {
+export const ThemeWrapper = ({ children, branding }: Props) => {
   useEffect(() => {
     setTheme(document, branding);
   }, []);
@@ -18,5 +18,3 @@ const ThemeWrapper = ({ children, branding }: Props) => {
 
   return <div className={defaultClasses}>{children}</div>;
 };
-
-export default ThemeWrapper;

apps/login/src/components/theme.tsx

@@ -4,7 +4,7 @@ import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
 
-function Theme() {
+export function Theme() {
   const { resolvedTheme, setTheme } = useTheme();
   const [mounted, setMounted] = useState<boolean>(false);
 
@@ -42,5 +42,3 @@ function Theme() {
     </div>
   );
 }
-
-export default Theme;

apps/login/src/components/totp-register.tsx

@@ -5,11 +5,11 @@ import { useRouter } from "next/navigation";
 import { QRCodeSVG } from "qrcode.react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import Alert from "./Alert";
+import { Alert } from "./alert";
-import { Button, ButtonVariants } from "./Button";
+import { Button, ButtonVariants } from "./button";
-import CopyToClipboard from "./CopyToClipboard";
+import { CopyToClipboard } from "./copy-to-clipboard";
-import { TextInput } from "./Input";
+import { TextInput } from "./input";
-import { Spinner } from "./Spinner";
+import { Spinner } from "./spinner";
 
 type Inputs = {
   code: string;
@@ -24,7 +24,7 @@ type Props = {
   organization?: string;
   checkAfter?: boolean;
 };
-export default function TOTPRegister({
+export function TotpRegister({
   uri,
   secret,
   loginName,

apps/login/src/components/user-avatar.tsx

@@ -1,4 +1,4 @@
-import { Avatar } from "@/ui/Avatar";
+import { Avatar } from "@/components/avatar";
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
 
@@ -9,7 +9,7 @@ type Props = {
   searchParams?: Record<string | number | symbol, string | undefined>;
 };
 
-export default function UserAvatar({
+export function UserAvatar({
   loginName,
   displayName,
   showDropdown,

apps/login/src/components/username-form.tsx

@@ -4,11 +4,11 @@ import { sendLoginname } from "@/lib/server/loginname";
 import { useRouter } from "next/navigation";
 import { ReactNode, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import Alert from "./Alert";
+import { Alert } from "./alert";
-import BackButton from "./BackButton";
+import { BackButton } from "./back-button";
-import { Button, ButtonVariants } from "./Button";
+import { Button, ButtonVariants } from "./button";
-import { TextInput } from "./Input";
+import { TextInput } from "./input";
-import { Spinner } from "./Spinner";
+import { Spinner } from "./spinner";
 
 type Inputs = {
   loginName: string;
@@ -23,7 +23,7 @@ type Props = {
   children?: ReactNode;
 };
 
-export default function UsernameForm({
+export function UsernameForm({
   loginName,
   authRequestId,
   organization,

apps/login/src/components/verify-email-form.tsx

@@ -1,14 +1,14 @@
 "use client";
 
+import { Alert } from "@/components/alert";
 import { resendVerifyEmail, verifyUserByEmail } from "@/lib/server/email";
-import Alert from "@/ui/Alert";
 import { LoginSettings } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import { Button, ButtonVariants } from "./Button";
+import { Button, ButtonVariants } from "./button";
-import { TextInput } from "./Input";
+import { TextInput } from "./input";
-import { Spinner } from "./Spinner";
+import { Spinner } from "./spinner";
 
 type Inputs = {
   code: string;
@@ -25,7 +25,7 @@ type Props = {
   loginSettings?: LoginSettings;
 };
 
-export default function VerifyEmailForm({
+export function VerifyEmailForm({
   userId,
   loginName,
   code,

packages/eslint-config-zitadel/index.js

@@ -3,9 +3,4 @@ module.exports = {
   rules: {
     "@next/next/no-html-link-for-pages": "off",
   },
-  parserOptions: {
-    babelOptions: {
-      presets: [require.resolve("next/babel")],
-    },
-  },
 };