@thorprovider/blocks 1.0.0 → 2.0.0

package/src/lib/contracts.test.ts

@@ -3,6 +3,7 @@ import { z } from 'zod'
 import {
   categoryCardPropsSchema,
   categoryGridPropsSchema,
+  navbarPropsSchema,
   productCardPropsSchema,
   productGridPropsSchema,
   storeCategorySchema,
@@ -171,3 +172,57 @@ describe('category cell and listing contracts', () => {
     expect(categoryCardPropsSchema.safeParse({ categories: [category] }).success).toBe(false)
   })
 })
+
+describe('navbarPropsSchema', () => {
+  const full = {
+    presentation: 'mega' as const,
+    logoText: 'ElectroCuba',
+    logoHref: '/',
+    currentPath: '/tienda',
+    links: [
+      {
+        label: 'Catálogo',
+        groups: [
+          {
+            title: 'Esenciales',
+            items: [{ label: 'Camisas', href: '/camisas', description: 'Cortes diarios', icon: 'shirt' }],
+          },
+        ],
+      },
+      { label: 'Nosotros', href: '/nosotros', emphasis: true },
+    ],
+    featured: {
+      eyebrow: 'Nueva temporada',
+      title: 'Lino',
+      description: 'Capas transpirables',
+      href: '/lino',
+      linkLabel: 'Descubrir',
+      image: '/lino.jpg',
+      imageAlt: 'Camisa de lino',
+    },
+    signIn: { label: 'Entrar', href: '/cuenta' },
+    cta: { label: 'Comprar' },
+    className: 'bg-brand-nav text-brand-nav-foreground',
+  }
+
+  it('round-trips a fully populated header', () => {
+    expect(navbarPropsSchema.parse(full)).toEqual(full)
+  })
+
+  it('requires the brand text and the links list', () => {
+    expect(navbarPropsSchema.safeParse({ ...full, logoText: undefined }).success).toBe(false)
+    expect(navbarPropsSchema.safeParse({ logoText: 'ElectroCuba' }).success).toBe(false)
+  })
+
+  it('rejects non-string hrefs and unknown presentations', () => {
+    expect(navbarPropsSchema.safeParse({ logoText: 'X', links: [{ label: 'Y', href: 42 }] }).success).toBe(false)
+    expect(navbarPropsSchema.safeParse({ ...full, presentation: 'sidebar' }).success).toBe(false)
+  })
+
+  it('cannot carry host bindings across the serializable boundary', () => {
+    const parsed = navbarPropsSchema.parse({ ...full, iconMap: { shirt: () => null }, onSignIn: () => {} })
+
+    expect(parsed).not.toHaveProperty('iconMap')
+    expect(parsed).not.toHaveProperty('onSignIn')
+  })
+})

package/src/lib/contracts.ts

@@ -495,7 +495,12 @@ export const heroImageSchema = z.object({
 })
 export type HeroImage = z.infer<typeof heroImageSchema>
 
-export const navbar4PropsSchema = z.object({
+/**
+ * Serializable contract for the canonical commerce storefront shell
+ * (`StorefrontNavbar`). Identity, cart, and search state stay host-owned: the
+ * schema carries content and display state only, never cart arithmetic.
+ */
+export const storefrontNavbarPropsSchema = z.object({
   storeCategories: z.array(storeCategorySchema),
   shippingNote: z.string().optional(),
   utilityLinks: z.array(utilityLinkSchema),
@@ -519,7 +524,7 @@ export const navbar4PropsSchema = z.object({
   accountPending: z.boolean().optional(),
   accountUnavailable: z.boolean().optional(),
 })
-export type Navbar4SpecProps = z.infer<typeof navbar4PropsSchema>
+export type StorefrontNavbarSpecProps = z.infer<typeof storefrontNavbarPropsSchema>
 
 /**
  * Serializable contracts for the two bounded editorial sections (`faq`, `cta`).
@@ -533,6 +538,63 @@ export const ctaSchema = z.object({
 })
 export type CtaSpec = z.infer<typeof ctaSchema>
 
+/** Bounded presentations of the page-level navigation header. */
+export const navbarPresentationSchema = z.enum(['bar', 'mega', 'floating'])
+export type NavbarPresentationSpec = z.infer<typeof navbarPresentationSchema>
+
+export const navbarItemSchema = z.object({
+  label: z.string(),
+  href: z.string(),
+  description: z.string().optional(),
+  /** Key resolved through the consumer's host-bound `iconMap`. */
+  icon: z.string().optional(),
+})
+export type NavbarItemSpec = z.infer<typeof navbarItemSchema>
+
+export const navbarGroupSchema = z.object({
+  title: z.string().optional(),
+  items: z.array(navbarItemSchema),
+})
+export type NavbarGroupSpec = z.infer<typeof navbarGroupSchema>
+
+export const navbarLinkSchema = z.object({
+  label: z.string(),
+  href: z.string().optional(),
+  groups: z.array(navbarGroupSchema).optional(),
+  emphasis: z.boolean().optional(),
+})
+export type NavbarLinkSpec = z.infer<typeof navbarLinkSchema>
+
+export const navbarFeaturedSchema = z.object({
+  eyebrow: z.string(),
+  title: z.string(),
+  description: z.string().optional(),
+  href: z.string(),
+  linkLabel: z.string().optional(),
+  image: z.string().optional(),
+  imageAlt: z.string().optional(),
+})
+export type NavbarFeaturedSpec = z.infer<typeof navbarFeaturedSchema>
+
+/**
+ * Serializable contract for the canonical page-level header (`Navbar`). The
+ * serializable subset excludes the React-only bindings: `iconMap`, `onSignIn`,
+ * and `onCtaClick` are bound by the host, exactly like the footer's icon map.
+ */
+export const navbarPropsSchema = z.object({
+  presentation: navbarPresentationSchema.optional(),
+  logoText: z.string(),
+  logoHref: z.string().optional(),
+  currentPath: z.string().optional(),
+  links: z.array(navbarLinkSchema),
+  featured: navbarFeaturedSchema.optional(),
+  signIn: ctaSchema.optional(),
+  cta: ctaSchema.optional(),
+  /** Consumer-supplied classes merged onto the header surface last. */
+  className: z.string().optional(),
+})
+export type NavbarSpecProps = z.infer<typeof navbarPropsSchema>
+
 /**
  * Serializable subset of the canonical `StorefrontHero`'s props (callbacks
  * excluded). Every popularity, review, count, or countdown field is optional

package/tsup.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from 'tsup'
 export default defineConfig({
   // Emit one module per source file (no bundling) so consumers can import a
   // single block and bundle only what they import. `outbase: 'src'` preserves
-  // the source layout under dist/ (e.g. dist/blocks/.../navbar-4.mjs).
+  // the source layout under dist/ (e.g. dist/blocks/.../navbar.mjs).
   entry: ['src/**/*.ts', 'src/**/*.tsx', '!src/**/*.test.ts', '!src/**/*.test.tsx'],
   format: ['cjs', 'esm'],
   // Declarations are emitted per-file by `tsc -p tsconfig.build.json` (see the

package/src/blocks/application/login-forms/login-page-1.tsx

@@ -1,246 +0,0 @@
-'use client'
-
-import { useState, type FormEvent } from 'react'
-import { Eye, EyeOff, Lock, Mail, type LucideIcon } from 'lucide-react'
-
-import { Button } from '../../../ui/button'
-import { Card } from '../../../ui/card'
-import { CheckboxCheck } from '../../e-commerce/checkout-forms/checkbox-check'
-import { Input } from '../../../ui/input'
-import { cn } from '../../../lib/utils'
-
-export interface LoginPage1SocialButton {
-  name: string
-  icon: LucideIcon
-}
-
-export interface LoginPage1FormData {
-  email: string
-  password: string
-  remember: boolean
-}
-
-export interface LoginPage1Props {
-  logoText?: string
-  welcomeTitleLabel?: string
-  welcomeDescriptionLabel?: string
-  emailLabel?: string
-  emailPlaceholder?: string
-  passwordLabel?: string
-  passwordPlaceholder?: string
-  rememberMeLabel?: string
-  forgotPasswordLabel?: string
-  signInLabel?: string
-  orContinueWithLabel?: string
-  dontHaveAccountLabel?: string
-  createAccountLabel?: string
-  /** Template with a `{provider}` placeholder for the social login buttons' aria-labels. */
-  socialAriaLabelTemplate?: string
-  showPasswordAriaLabel?: string
-  hidePasswordAriaLabel?: string
-  socialButtons?: LoginPage1SocialButton[]
-  onSubmit?: (data: LoginPage1FormData) => void
-  onForgotPassword?: () => void
-  onCreateAccount?: () => void
-  onSocialLogin?: (providerName: string) => void
-}
-
-export function LoginPage1({
-  logoText,
-  welcomeTitleLabel = 'Bienvenido de nuevo',
-  welcomeDescriptionLabel = 'Inicia sesión para continuar',
-  emailLabel = 'Correo electrónico',
-  emailPlaceholder = 'taller@correo.com',
-  passwordLabel = 'Contraseña',
-  passwordPlaceholder = '••••••••',
-  rememberMeLabel = 'Recuérdame',
-  forgotPasswordLabel = '¿Olvidaste tu contraseña?',
-  signInLabel = 'Iniciar sesión',
-  orContinueWithLabel = 'O continúa con',
-  dontHaveAccountLabel = '¿No tienes una cuenta?',
-  createAccountLabel = 'Crea una cuenta',
-  socialAriaLabelTemplate = 'Iniciar sesión con {provider}',
-  showPasswordAriaLabel = 'Mostrar contraseña',
-  hidePasswordAriaLabel = 'Ocultar contraseña',
-  socialButtons = [],
-  onSubmit,
-  onForgotPassword,
-  onCreateAccount,
-  onSocialLogin,
-}: LoginPage1Props) {
-  const [showPassword, setShowPassword] = useState(false)
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [remember, setRemember] = useState(false)
-
-  const handleSubmit = (event: FormEvent) => {
-    event.preventDefault()
-    onSubmit?.({ email, password, remember })
-  }
-
-  const forgotPasswordClassName = cn(
-    'ms-auto inline-block text-sm underline-offset-4',
-    onForgotPassword ? 'cursor-pointer hover:underline' : 'text-muted-foreground'
-  )
-
-  const createAccountClassName = cn('underline underline-offset-4', onCreateAccount ? 'cursor-pointer' : undefined)
-
-  return (
-    <section className='from-background to-muted/50 relative isolate flex min-h-dvh w-full items-center justify-center overflow-hidden bg-linear-to-br'>
-      <div className='relative z-10 container mx-auto flex min-h-dvh items-center justify-center px-4 py-12'>
-        <Card className='relative w-full max-w-md ring-0 p-8 shadow-2xl'>
-          <div className='mb-8 flex flex-col items-center'>
-            <div className='my-4 flex justify-center'>
-              <div className='bg-secondary relative size-14 rounded-full border'>
-                <div className='flex h-full items-center justify-center'>
-                  <svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'>
-                    <path
-                      d='M26 24.75C26.4142 24.75 26.75 24.4142 26.75 24C26.75 23.5858 26.4142 23.25 26 23.25V24.75ZM26 23.25H11V24.75H26V23.25ZM8.75 21V15H7.25V21H8.75ZM11 23.25C9.75736 23.25 8.75 22.2426 8.75 21H7.25C7.25 23.0711 8.92893 24.75 11 24.75V23.25Z'
-                      fill='currentColor'
-                    />
-                    <path
-                      d='M1.5 3.25C1.08579 3.25 0.75 3.58579 0.75 4C0.75 4.41421 1.08579 4.75 1.5 4.75V3.25ZM1.5 4.75H6V3.25H1.5V4.75ZM7.25 6V21H8.75V6H7.25ZM6 4.75C6.69036 4.75 7.25 5.30964 7.25 6H8.75C8.75 4.48122 7.51878 3.25 6 3.25V4.75Z'
-                      fill='currentColor'
-                    />
-                    <path
-                      d='M22 21.75C22.4142 21.75 22.75 21.4142 22.75 21C22.75 20.5858 22.4142 20.25 22 20.25V21.75ZM22 20.25H11V21.75H22V20.25ZM8.75 18V12H7.25V18H8.75ZM11 20.25C9.75736 20.25 8.75 19.2426 8.75 18H7.25C7.25 20.0711 8.92893 21.75 11 21.75V20.25Z'
-                      fill='currentColor'
-                    />
-                    <path
-                      d='M27.2057 19.754C27.0654 20.1438 26.6357 20.346 26.246 20.2057C25.8562 20.0654 25.654 19.6357 25.7943 19.246L27.2057 19.754ZM30.0361 9.67744L29.3305 9.4234L29.3305 9.4234L30.0361 9.67744ZM25.7943 19.246L29.3305 9.4234L30.7418 9.93148L27.2057 19.754L25.7943 19.246ZM28.1543 7.75L8 7.75V6.25L28.1543 6.25V7.75ZM29.3305 9.4234C29.6237 8.60882 29.0201 7.75 28.1543 7.75V6.25C30.059 6.25 31.3869 8.13941 30.7418 9.93148L29.3305 9.4234Z'
-                      fill='currentColor'
-                    />
-                    <path
-                      d='M13.5 21.75C13.0858 21.75 12.75 21.4142 12.75 21C12.75 20.5858 13.0858 20.25 13.5 20.25V21.75ZM26.7111 19.009L27.4174 19.2613L27.4174 19.2613L26.7111 19.009ZM13.5 20.25H23.8858V21.75H13.5V20.25ZM26.0048 18.7568L27.7937 13.7477L29.2063 14.2523L27.4174 19.2613L26.0048 18.7568ZM23.8858 20.25C24.8367 20.25 25.6849 19.6522 26.0048 18.7568L27.4174 19.2613C26.8843 20.7537 25.4706 21.75 23.8858 21.75V20.25Z'
-                      fill='currentColor'
-                    />
-                    <path d='M21.1694 10.5806L14.5651 17.1849' stroke='currentColor' />
-                    <path d='M22.1694 14.5806L18.5632 18.1868' stroke='currentColor' />
-                    <circle cx='13.1' cy='26.1' r='1.7' stroke='currentColor' />
-                    <circle cx='22.1' cy='26.1' r='1.7' stroke='currentColor' />
-                  </svg>
-                </div>
-              </div>
-            </div>
-            {logoText && <p className='text-muted-foreground mb-2 text-sm font-semibold'>{logoText}</p>}
-            <h1 className='mb-2 text-center text-2xl font-bold tracking-tight'>{welcomeTitleLabel}</h1>
-            <p className='text-muted-foreground text-center text-sm'>{welcomeDescriptionLabel}</p>
-          </div>
-
-          <form onSubmit={handleSubmit} className='flex flex-col gap-6'>
-            <div className='relative'>
-              <Input
-                type='email'
-                placeholder={emailPlaceholder}
-                aria-label={emailLabel}
-                autoComplete='email'
-                value={email}
-                onChange={event => setEmail(event.target.value)}
-                className='bg-transparent ps-10 h-9 text-sm'
-              />
-              <Mail className='text-muted-foreground absolute start-3 top-1/2 size-5 -translate-y-1/2' aria-hidden='true' />
-            </div>
-
-            <div className='relative'>
-              <Input
-                type={showPassword ? 'text' : 'password'}
-                placeholder={passwordPlaceholder}
-                aria-label={passwordLabel}
-                autoComplete='current-password'
-                value={password}
-                onChange={event => setPassword(event.target.value)}
-                className='bg-transparent ps-10 h-9 text-sm'
-              />
-              <Lock className='text-muted-foreground absolute start-3 top-1/2 size-5 -translate-y-1/2' aria-hidden='true' />
-              <Button
-                type='button'
-                variant='ghost'
-                aria-label={showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel}
-                className='absolute end-0 top-0 h-full cursor-pointer px-3 py-2 hover:bg-transparent'
-                onClick={() => setShowPassword(prev => !prev)}
-              >
-                {showPassword ? (
-                  <EyeOff className='text-muted-foreground' />
-                ) : (
-                  <Eye className='text-muted-foreground' />
-                )}
-              </Button>
-            </div>
-
-            <div className='flex items-center justify-between'>
-              <div className='flex items-center gap-2'>
-                <CheckboxCheck
-                  id='remember'
-                  checked={remember}
-                  onCheckedChange={value => setRemember(value === true)}
-                  className='data-checked:bg-primary bg-transparent'
-                />
-                <label
-                  htmlFor='remember'
-                  className='text-sm leading-none font-normal text-muted-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
-                >
-                  {rememberMeLabel}
-                </label>
-              </div>
-              {onForgotPassword ? (
-                <button type='button' onClick={onForgotPassword} className={forgotPasswordClassName}>
-                  {forgotPasswordLabel}
-                </button>
-              ) : (
-                <span className={forgotPasswordClassName}>{forgotPasswordLabel}</span>
-              )}
-            </div>
-
-            <Button type='submit' className='h-9 w-full cursor-pointer px-4 py-2'>
-              {signInLabel}
-            </Button>
-
-            {socialButtons.length > 0 && (
-              <>
-                <div className='relative my-6 text-center'>
-                  <div className='absolute inset-0 flex items-center'>
-                    <div className='w-full border-t' />
-                  </div>
-                  <div className='relative flex justify-center text-xs uppercase'>
-                    <span className='bg-card text-muted-foreground px-2'>{orContinueWithLabel}</span>
-                  </div>
-                </div>
-
-                <div className='grid grid-cols-3 gap-3'>
-                  {socialButtons.map(button => {
-                    const Icon = button.icon
-                    return (
-                      <Button
-                        key={button.name}
-                        type='button'
-                        variant='outline'
-                        aria-label={socialAriaLabelTemplate.replace('{provider}', button.name)}
-                        className='h-9 w-full cursor-pointer px-4 py-2'
-                        onClick={onSocialLogin ? () => onSocialLogin(button.name) : undefined}
-                      >
-                        <Icon className='size-5' aria-hidden='true' />
-                      </Button>
-                    )
-                  })}
-                </div>
-              </>
-            )}
-          </form>
-
-          <p className='mt-6 flex justify-center gap-1 text-center text-sm'>
-            <span>{dontHaveAccountLabel}</span>
-            {onCreateAccount ? (
-              <button type='button' onClick={onCreateAccount} className={createAccountClassName}>
-                {createAccountLabel}
-              </button>
-            ) : (
-              <span className={createAccountClassName}>{createAccountLabel}</span>
-            )}
-          </p>
-        </Card>
-      </div>
-    </section>
-  )
-}
-
-export default LoginPage1

package/src/blocks/application/login-forms/login-page-2.tsx

@@ -1,207 +0,0 @@
-'use client'
-
-import { useState, type FormEvent } from 'react'
-import { Eye, EyeOff, type LucideIcon } from 'lucide-react'
-
-import { Button } from '../../../ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../../ui/card'
-import { Input } from '../../../ui/input'
-import { Label } from '../../../ui/label'
-import { Separator } from '../../../ui/separator'
-import { CheckboxCheck } from '../../e-commerce/checkout-forms/checkbox-check'
-
-export interface LoginPage2SocialButton {
-  name: string
-  icon: LucideIcon
-}
-
-export interface LoginPage2Props {
-  /** Brand text rendered next to the block logo. Omit to hide the logo. */
-  logoText?: string
-  welcomeTitleLabel?: string
-  welcomeDescriptionLabel?: string
-  emailLabel?: string
-  emailPlaceholder?: string
-  passwordLabel?: string
-  passwordPlaceholder?: string
-  rememberMeLabel?: string
-  forgotPasswordLabel?: string
-  signInLabel?: string
-  orContinueWithLabel?: string
-  /** Social login buttons rendered in a 2-column grid. Pass an empty array to hide. */
-  socialButtons?: LoginPage2SocialButton[]
-  dontHaveAccountLabel?: string
-  signUpLabel?: string
-  showPasswordLabel?: string
-  hidePasswordLabel?: string
-  onSubmit?: (email: string, password: string) => void
-  onForgotPassword?: () => void
-  onSignUp?: () => void
-}
-
-export function LoginPage2({
-  logoText,
-  welcomeTitleLabel = 'Bienvenido de nuevo',
-  welcomeDescriptionLabel = 'Ingresa tus credenciales para acceder a tu cuenta',
-  emailLabel = 'Correo electrónico',
-  emailPlaceholder = 'tucorreo@ejemplo.com',
-  passwordLabel = 'Contraseña',
-  passwordPlaceholder = 'Tu contraseña',
-  rememberMeLabel = 'Recuérdame',
-  forgotPasswordLabel = '¿Olvidaste tu contraseña?',
-  signInLabel = 'Iniciar sesión',
-  orContinueWithLabel = 'O continúa con',
-  socialButtons = [],
-  dontHaveAccountLabel = '¿No tienes una cuenta?',
-  signUpLabel = 'Regístrate aquí',
-  showPasswordLabel = 'Mostrar contraseña',
-  hidePasswordLabel = 'Ocultar contraseña',
-  onSubmit,
-  onForgotPassword,
-  onSignUp,
-}: LoginPage2Props) {
-  const [showPassword, setShowPassword] = useState(false)
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-
-  const handleSubmit = (event: FormEvent) => {
-    event.preventDefault()
-    onSubmit?.(email, password)
-  }
-
-  return (
-    <div className='bg-background flex min-h-dvh items-center justify-center p-4 py-12'>
-      <div className='flex w-full max-w-md flex-col gap-6'>
-        {logoText && (
-          <div className='mb-3 flex items-center gap-2 self-center font-medium'>
-            {/* Logo mark uses the bg-muted token so it inherits the active theme. */}
-            <div className='bg-muted flex size-10 items-center justify-center rounded-lg'>
-              <svg width='32' height='32' className='text-primary' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'>
-                <path
-                  d='M26 24.75C26.4142 24.75 26.75 24.4142 26.75 24C26.75 23.5858 26.4142 23.25 26 23.25V24.75ZM26 23.25H11V24.75H26V23.25ZM8.75 21V15H7.25V21H8.75ZM11 23.25C9.75736 23.25 8.75 22.2426 8.75 21H7.25C7.25 23.0711 8.92893 24.75 11 24.75V23.25Z'
-                  fill='currentColor'
-                />
-                <path
-                  d='M1.5 3.25C1.08579 3.25 0.75 3.58579 0.75 4C0.75 4.41421 1.08579 4.75 1.5 4.75V3.25ZM1.5 4.75H6V3.25H1.5V4.75ZM7.25 6V21H8.75V6H7.25ZM6 4.75C6.69036 4.75 7.25 5.30964 7.25 6H8.75C8.75 4.48122 7.51878 3.25 6 3.25V4.75Z'
-                  fill='currentColor'
-                />
-                <path
-                  d='M22 21.75C22.4142 21.75 22.75 21.4142 22.75 21C22.75 20.5858 22.4142 20.25 22 20.25V21.75ZM22 20.25H11V21.75H22V20.25ZM8.75 18V12H7.25V18H8.75ZM11 20.25C9.75736 20.25 8.75 19.2426 8.75 18H7.25C7.25 20.0711 8.92893 21.75 11 21.75V20.25Z'
-                  fill='currentColor'
-                />
-                <path
-                  d='M27.2057 19.754C27.0654 20.1438 26.6357 20.346 26.246 20.2057C25.8562 20.0654 25.654 19.6357 25.7943 19.246L27.2057 19.754ZM30.0361 9.67744L29.3305 9.4234L29.3305 9.4234L30.0361 9.67744ZM25.7943 19.246L29.3305 9.4234L30.7418 9.93148L27.2057 19.754L25.7943 19.246ZM28.1543 7.75L8 7.75V6.25L28.1543 6.25V7.75ZM29.3305 9.4234C29.6237 8.60882 29.0201 7.75 28.1543 7.75V6.25C30.059 6.25 31.3869 8.13941 30.7418 9.93148L29.3305 9.4234Z'
-                  fill='currentColor'
-                />
-                <path
-                  d='M13.5 21.75C13.0858 21.75 12.75 21.4142 12.75 21C12.75 20.5858 13.0858 20.25 13.5 20.25V21.75ZM26.7111 19.009L27.4174 19.2613L27.4174 19.2613L26.7111 19.009ZM13.5 20.25H23.8858V21.75H13.5V20.25ZM26.0048 18.7568L27.7937 13.7477L29.2063 14.2523L27.4174 19.2613L26.0048 18.7568ZM23.8858 20.25C24.8367 20.25 25.6849 19.6522 26.0048 18.7568L27.4174 19.2613C26.8843 20.7537 25.4706 21.75 23.8858 21.75V20.25Z'
-                  fill='currentColor'
-                />
-                <path d='M21.1694 10.5806L14.5651 17.1849' stroke='currentColor' />
-                <path d='M22.1694 14.5806L18.5632 18.1868' stroke='currentColor' />
-                <circle cx='13.1' cy='26.1' r='1.7' stroke='currentColor' />
-                <circle cx='22.1' cy='26.1' r='1.7' stroke='currentColor' />
-              </svg>
-            </div>
-            <div className='text-2xl font-medium'>{logoText}</div>
-          </div>
-        )}
-        <Card className='w-full max-w-md'>
-          <CardHeader className='text-center'>
-            <CardTitle className='text-2xl font-bold text-balance'>{welcomeTitleLabel}</CardTitle>
-            <CardDescription>{welcomeDescriptionLabel}</CardDescription>
-          </CardHeader>
-          <CardContent className='flex flex-col gap-5'>
-            <form className='flex flex-col gap-5' onSubmit={handleSubmit}>
-              <div className='flex flex-col gap-3'>
-                <Label htmlFor='email'>{emailLabel}</Label>
-                <Input
-                  id='email'
-                  type='email'
-                  placeholder={emailPlaceholder}
-                  value={email}
-                  onChange={event => setEmail(event.target.value)}
-                  className='h-9 text-sm'
-                />
-              </div>
-              <div className='flex flex-col gap-3'>
-                <Label htmlFor='password'>{passwordLabel}</Label>
-                <div className='relative'>
-                  <Input
-                    id='password'
-                    type={showPassword ? 'text' : 'password'}
-                    placeholder={passwordPlaceholder}
-                    value={password}
-                    onChange={event => setPassword(event.target.value)}
-                    className='h-9 pe-10 text-sm'
-                  />
-                  <Button
-                    type='button'
-                    variant='ghost'
-                    size='icon'
-                    className='absolute end-0 top-1/2 size-9 -translate-y-1/2 cursor-pointer hover:bg-transparent'
-                    onClick={() => setShowPassword(!showPassword)}
-                  >
-                    {showPassword ? (
-                      <EyeOff className='text-muted-foreground' />
-                    ) : (
-                      <Eye className='text-muted-foreground' />
-                    )}
-                    <span className='sr-only'>{showPassword ? hidePasswordLabel : showPasswordLabel}</span>
-                  </Button>
-                </div>
-              </div>
-              <div className='flex items-center justify-between'>
-                <div className='flex items-center gap-2'>
-                  <CheckboxCheck id='remember-me' />
-                  <Label
-                    htmlFor='remember-me'
-                    className='text-sm leading-none font-normal text-muted-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
-                  >
-                    {rememberMeLabel}
-                  </Label>
-                </div>
-                <Button variant='link' className='cursor-pointer p-0 text-sm' onClick={onForgotPassword}>
-                  {forgotPasswordLabel}
-                </Button>
-              </div>
-              <Button type='submit' className='h-9 w-full cursor-pointer px-4 py-2'>
-                {signInLabel}
-              </Button>
-            </form>
-
-            {socialButtons.length > 0 && (
-              <>
-                {/* Flex divider rather than a rule masked by an opaque label: the mask has to
-                    match whatever surface it sits on, and on a card it did not. */}
-                <div className='flex items-center gap-3'>
-                  <Separator className='flex-1' />
-                  <span className='text-muted-foreground text-xs uppercase'>{orContinueWithLabel}</span>
-                  <Separator className='flex-1' />
-                </div>
-
-                <div className='grid grid-cols-2 gap-4'>
-                  {socialButtons.map(button => (
-                    <Button key={button.name} variant='outline' className='h-9 w-full cursor-pointer px-4 py-2'>
-                      <button.icon />
-                      {button.name}
-                    </Button>
-                  ))}
-                </div>
-              </>
-            )}
-
-            <div className='text-muted-foreground text-center text-sm'>
-              {dontHaveAccountLabel}{' '}
-              <Button variant='link' className='cursor-pointer p-0 text-sm' onClick={onSignUp}>
-                {signUpLabel}
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  )
-}
-
-export default LoginPage2