@luxfi/ui 5.5.3 → 5.5.5

package/LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2024, Lux Partners Limited
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/components/auth/callback.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+
+import { useIam } from '@hanzo/iam/react'
+
+import { resume } from './resume'
+
+  /**
+   * The site's OAuth redirect target. IAM sends the authorization code here and
+   * this redeems it for tokens with the PKCE verifier the browser kept, then
+   * returns the visitor to the page they left.
+   */
+const Callback = () => {
+
+  const { handleCallback } = useIam()
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    handleCallback()
+      .then(() => { window.location.replace(resume()) })
+      .catch((e: Error) => { setError(e.message) })
+      /* Runs once: the authorization code is single-use. */
+  }, [])
+
+  return (
+    <main className='flex min-h-screen items-center justify-center p-8 text-center'>
+      {error ? (
+        <div className='flex flex-col gap-4'>
+          <p role='alert'>{error}</p>
+          <a href='/' className='underline'>Back to the site</a>
+        </div>
+      ) : (
+        <p>Signing you in…</p>
+      )}
+    </main>
+  )
+}
+
+export default Callback

package/components/auth/login-panel.tsx

@@ -1,55 +1,26 @@
 'use client'
 
+import React from 'react'
 import Link from 'next/link'
-import { useRouter } from 'next/navigation'
-import { setCookie } from 'cookies-next'
 
 import { cn } from '@hanzo/ui/util'
 import { Button, Carousel, CarouselContent, CarouselItem } from '@hanzo/ui/primitives'
-import { LoginPanel as Login } from '@hanzo/auth/components'
 
-import { LuxLogo } from '../icons'
+import Login from './login'
+import { LuxLogo } from '@luxfi/logo'
 import Logo from '../logo'
 import { EmblaAutoplay } from '..'
 import { legal } from '../../site-def/footer'
 
 const LoginPanel: React.FC<{
   close: () => void
-  getStartedUrl?: string
-  redirectUrl?: string
   className?: string
   reviews: { text: string, author: string, href: string }[]
-  setIsLogin?: React.Dispatch<React.SetStateAction<boolean>>
 }> = ({
   close,
-  getStartedUrl = '/',
-  redirectUrl,
   className = '',
-  reviews,
-  setIsLogin
+  reviews
 }) => {
-    const router = useRouter()
-
-    const termsOfServiceUrl = legal.find(({ title }) => title === 'Terms and Conditions')?.href || ''
-    const privacyPolicyUrl = legal.find(({ title }) => title === 'Privacy Policy')?.href || ''
-    const domains = ['lux.id', 'lux.credit', 'lux.market', 'lux.network', 'lux.shop', 'wallet.lux.network', 'safe.lux.network', 'lux.finance', 'lux.exchange', 'lux.quest']
-    // TODO :aa shouldn't this happen in @hanzo/auth: components/LoginPanel ??
-    // Otherwise, the functionality is split across modules! (and client/fw!) 
-    // (This was never my intent w the onLoginChanged callback.)
-    const onLogin = (token: string) => {
-      for (let i = 0; i < domains.length; i ++) {
-        setCookie('auth-token', token, {
-          domain: domains[i],
-          path: '/',
-          sameSite: 'none',
-          secure: true,
-          httpOnly: false,
-          expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30), // 30 days
-        })
-      }
-
-      redirectUrl && router.push(redirectUrl)
-    }
 
     return (
       <div className={cn('grid grid-cols-1 md:grid-cols-2', className)}>
@@ -61,7 +32,7 @@ const LoginPanel: React.FC<{
                 onClick={close}
                 className='w-fit !min-w-0 p-2'
               >
-                <Logo size='md' textClx='!cursor-pointer' variant='text-only' />
+                <Logo size='md' variant='wordmark' />
               </Button>
               <Carousel
                 options={{ align: 'center', loop: true }}
@@ -90,17 +61,17 @@ const LoginPanel: React.FC<{
                 onClick={close}
                 className='block md:hidden absolute rounded-full p-2 left-0 h-auto hover:bg-background'
               >
-                <LuxLogo className='w-5 h-5' />
+                <LuxLogo variant='white' size={20} />
               </Button>
-              <Login
-                getStartedUrl={getStartedUrl}
-                redirectUrl={redirectUrl}
-                className='w-full max-w-sm'
-                termsOfServiceUrl={termsOfServiceUrl}
-                privacyPolicyUrl={privacyPolicyUrl}
-                onLoginChanged={onLogin}
-                setIsLogin={setIsLogin}
-              />
+              <Login className='w-full max-w-sm' />
+              <p className='text-sm opacity-50'>
+                {legal.map(({ title, href }, index) => (
+                  <React.Fragment key={href}>
+                    {index > 0 && ' · '}
+                    <Link href={href} className='underline'>{title}</Link>
+                  </React.Fragment>
+                ))}
+              </p>
             </div>
           </div>
         </div>

package/components/auth/login.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+
+import { cn } from '@hanzo/ui/util'
+import { Login as IamLogin, useIam } from '@hanzo/iam/react'
+
+import { remember } from './resume'
+
+  /**
+   * Sign-in rendered in place, on this site's own domain: IAM mints an
+   * authorization code bound to a PKCE challenge and the form navigates to
+   * /auth/callback to redeem it. No credential ever reaches this bundle's
+   * origin, and there is one sign-in surface rather than one per app.
+   */
+const Login: React.FC<{
+  className?: string
+  onSuccess?: (token: string) => void
+}> = ({
+  className,
+  onSuccess
+}) => {
+
+  const { config } = useIam()
+    /* OIDC anti-CSRF nonce, one per mounted form. */
+  const [state] = useState(() => crypto.randomUUID())
+
+    /* Sign-in leaves for /auth/callback, so record the page holding this form to
+      come back to. */
+  useEffect(remember, [])
+
+  return (
+    <IamLogin
+      serverUrl={config.serverUrl}
+      clientId={config.clientId}
+      redirectUri={config.redirectUri}
+      organization={config.organization}
+      state={state}
+        /* Naming a class replaces the view's own, so keep both: the site skins
+          .hanzo-iam-* once, in lux-global.css. */
+      className={cn('hanzo-iam-card', className)}
+      onSuccess={onSuccess}
+    />
+  )
+}
+
+export default Login

package/components/auth/provider.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import React, { type PropsWithChildren } from 'react'
+
+import { IamProvider } from '@hanzo/iam/react'
+import { BRAND_SERVER_URLS } from '@hanzo/iam/paths'
+import type { IAMConfig } from '@hanzo/iam/browser'
+
+  /* These are Lux sites, so they sign in at Lux's own issuer. Naming another
+    brand's would send a Lux user to a login page that has never heard of the
+    redirect_uri they came from. */
+const ORG = 'lux'
+
+  /* Where the authorization code comes back. Every site mounts <Callback/> here. */
+const CALLBACK = '/auth/callback'
+
+  /* The OAuth client a site presents itself as: the `<org>-<app>` pair registered
+    on lux.id, so lux.shop is `lux-shop`. */
+const configure = (app: string): IAMConfig => ({
+  serverUrl: BRAND_SERVER_URLS[ORG],
+  organization: ORG,
+  clientId: `${ORG}-${app}`,
+    /* Read per render rather than at module load: one bundle serves the real
+      host and any preview of it, and each must redeem its code back to itself. */
+  redirectUri: (typeof window === 'undefined' ? '' : window.location.origin) + CALLBACK,
+})
+
+  /* Provider is memoized on the config's values, not its identity, so building a
+    fresh object here does not rebuild the SDK. */
+const Auth: React.FC<{ app: string } & PropsWithChildren> = ({ app, children }) => (
+  <IamProvider config={configure(app)}>{children}</IamProvider>
+)
+
+export default Auth

package/components/auth/resume.ts

@@ -0,0 +1,16 @@
+  /* Where the visitor was when they chose to sign in. The OIDC round-trip lands
+    on /auth/callback, so without this every sign-in would end at the home page.
+    Session-scoped: it describes one trip through the browser, not a preference. */
+const KEY = 'lux-auth-resume'
+
+const remember = () => {
+  sessionStorage.setItem(KEY, window.location.pathname + window.location.search)
+}
+
+const resume = (): string => {
+  const to = sessionStorage.getItem(KEY)
+  sessionStorage.removeItem(KEY)
+  return to ?? '/'
+}
+
+export { remember, resume }

package/components/auth/widget.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import React, { useContext } from 'react'
+
+import { Button, Popover, PopoverContent, PopoverTrigger, Separator } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+import { IamContext, useIam, useIamIdentity } from '@hanzo/iam/react'
+
+import { remember } from './resume'
+
+interface Props {
+    /** Hide the sign-in button, leaving only the profile of an already signed-in
+      user. Checkout wants this: it has its own sign-in step. */
+  noLogin?: boolean
+  className?: string
+    /** Sign in in place instead of leaving for lux.id — the mobile drawer opens
+      its own panel. */
+  handleLogin?: () => void
+}
+
+const Widget: React.FC<Props> = ({
+  noLogin = false,
+  handleLogin,
+  className
+}) => {
+
+  const { isAuthenticated, isLoading, login, logout } = useIam()
+  const identity = useIamIdentity()
+
+    /* Say nothing until the stored token has been read, rather than flashing
+      "Login" at someone who is already signed in. */
+  if (isLoading) {
+    return null
+  }
+
+  if (!isAuthenticated) {
+    return noLogin ? null : (
+      <Button
+        variant='primary'
+        className={cn('h-8 w-fit !min-w-0', className)}
+        onClick={handleLogin ?? (() => { remember(); void login() })}
+      >
+        Login
+      </Button>
+    )
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant='outline'
+          size='icon'
+          className={cn('rounded-full text-muted border-2 border-muted bg-level-1 hover:bg-level-2 hover:border-foreground hover:text-foreground uppercase w-8 h-8', className)}
+        >{identity?.initials}</Button>
+      </PopoverTrigger>
+      <PopoverContent className='bg-level-0'>
+        <div className='grid gap-4'>
+          <div className='space-y-2 truncate'>
+            <h4 className='font-medium leading-none truncate'>{identity?.name}</h4>
+            {identity?.email && identity.email !== identity.name && (
+              <p className='text-sm opacity-50 truncate'>{identity.email}</p>
+            )}
+          </div>
+          <Separator />
+          <Button variant='outline' onClick={() => { logout() }}>Logout</Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+  /* The widget rides in shared chrome, and not every site mounts <Auth> —
+    app/credit carries its own root layout. A site that offers no sign-in shows
+    no sign-in, which is why the context is read before any hook that needs it. */
+const AuthWidget: React.FC<Props> = (props) => (
+  useContext(IamContext) ? <Widget {...props} /> : null
+)
+
+export default AuthWidget

package/components/chat-widget.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { Button, Card } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 
-import { LuxLogo } from './icons'
+import { LuxLogo } from '@luxfi/logo'
 import type { ChatbotSuggestedQuestion } from '../types'
 
 const ChatWidget: React.FC<{
@@ -58,16 +58,14 @@ const ChatWidget: React.FC<{
         <div className='flex px-4 py-2 h-12 bg-level-0 items-center justify-between'>
           <h1 className='font-semibold font-heading'>{title} <span className='opacity-60'>{subtitle}</span></h1>
           <Button onClick={onClick} variant='link' size='icon' className='w-fit sm:hidden'>
-            <LuxLogo width={24} height={24}/>
+            <LuxLogo variant='white' size={24}/>
           </Button>
         </div>
         <iframe src={iframeSrc} className='h-full' />
       </Card>
     </div>
 
-    <LuxLogo
-      width={28}
-      height={28}
+    <span
       onClick={onClick}
       className={cn(
           // z-index should be below anything in commerce-iu (buy drawer and checkout widget)
@@ -77,8 +75,9 @@ const ChatWidget: React.FC<{
         showChatbot ? 'rotate-180' : '',
         buttonClx
       )}
-      strokeWidth={1}
-    />
+    >
+      <LuxLogo variant='white' size={28} />
+    </span>
   </>)
 }
 

package/components/commerce/checkout-panel/desktop-cp.tsx

@@ -3,7 +3,7 @@ import React, { type PropsWithChildren } from 'react'
 import { observer } from 'mobx-react-lite'
 
 import { ScrollArea, StepIndicator } from '@hanzo/ui/primitives'
-import { AuthWidget } from '@hanzo/auth/components'
+import AuthWidget from '../../auth/widget'
 import { CartPanel, useCommerce } from '@hanzo/commerce'
 import { cn } from '@hanzo/ui/util'
 
@@ -26,7 +26,7 @@ const DesktopCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = o
       <div key={1} className='w-full h-full bg-background flex flex-row items-start justify-end'>
         <div className='w-full h-full max-w-[750px] relative flex flex-col items-stretch justify-start px-8 pb-8'>
           <div key={1} className='h-[80px] grow-0 flex flex-row items-center z-10' >
-            <Logo size='md' href='/' onClick={onLeave} variant='text-only' outerClx='logo-outer-tooltip-class' />
+            <Logo size='md' href='/' onClick={onLeave} variant='wordmark' outerClx='logo-outer-tooltip-class' />
             <Tooltip select='.logo-outer-tooltip-class' text='home' position='right' offset={6}/>
           </div>
           <BackButton 

package/components/commerce/checkout-panel/mobile-cp.tsx

@@ -3,7 +3,7 @@ import React, { type PropsWithChildren } from 'react'
 
 import { StepIndicator } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
-import { AuthWidget } from '@hanzo/auth/components'
+import AuthWidget from '../../auth/widget'
 
 import { BackButton, Logo } from '../..'
 import BagButton from '../bag-button'
@@ -31,7 +31,7 @@ const MobileCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = ({
           }
           onBack={onLeave}
         />
-        <Logo size='xs' variant='text-only' href='/' onClick={onLeave} outerClx='-ml-2'/>
+        <Logo size='xs' variant='wordmark' href='/' onClick={onLeave} outerClx='-ml-2'/>
       </div>
       <StepIndicator 
         dotSizeRem={1} 

package/components/footer-nav.tsx

@@ -0,0 +1,31 @@
+'use client'
+import React from 'react'
+
+import type { LinkDef } from '@hanzo/ui/types'
+import { NavItems } from '@hanzo/ui/primitives'
+
+  // NavItems styles each item via a callback, and a callback cannot cross the
+  // server/client boundary. Creating it here keeps Footer itself on the server.
+const FooterNav: React.FC<{
+  items: LinkDef[]
+  currentAs?: string
+  className?: string
+}> = ({
+  items,
+  currentAs,
+  className = ''
+}) => (
+  <NavItems
+    items={items}
+    currentAs={currentAs}
+    as='nav'
+    className={className}
+    itemClx={(def: LinkDef) => ((def.variant === 'linkFG') ?
+      'font-nav text-[15px]/[1.3] font-medium tracking-normal text-muted-1 sm:hover:text-foreground transition-color duration-500'
+      :
+      'text-[15px]/[1.1] font-normal tracking-[0.2px] text-muted-1 sm:hover:text-foreground transition-color duration-500'
+    )}
+  />
+)
+
+export default FooterNav

package/components/footer.tsx

@@ -7,6 +7,7 @@ import { cn } from '@hanzo/ui/util'
 import Copyright from './copyright'
 import type { SiteDef } from '../site-def'
 import { legal } from '../site-def/footer/legal'
+import FooterNav from './footer-nav'
 import Logo from './logo'
 
 const Footer: React.FC<{
@@ -33,7 +34,7 @@ const Footer: React.FC<{
         'md:flex md:flex-row md:justify-between px-[24px]' 
       }>
         <div className='hidden lg:flex flex-col' key={0}>
-          <Logo size='md' variant='text-only' />
+          <Logo size='md' variant='wordmark' />
         </div>
         {footer.map((defs: LinkDef[], index: number) => {
 
@@ -41,21 +42,15 @@ const Footer: React.FC<{
             'xs:col-span-2 xs:mx-auto md:col-span-1 md:mx-0 ' : ''
 
           return (
-            <NavItems
-              items={defs} 
+            <FooterNav
+              items={defs}
               currentAs={siteDef.currentAs}
-              as='nav' 
-              className={cn('sm:min-w-[150px] md:min-w-0 flex flex-col justify-start items-start ' + 
+              className={cn('sm:min-w-[150px] md:min-w-0 flex flex-col justify-start items-start ' +
                 'gap-[11px] sm:gap-[12px] md:gap-[15px] ',
                 xsColSpanClx
-              )} 
-              key={index + 1}
-              itemClx={(def: LinkDef) => ((def.variant === 'linkFG') ?
-                'font-nav text-[15px]/[1.3] font-medium tracking-normal text-muted-1 sm:hover:text-foreground transition-color duration-500'
-                : 
-                'text-[15px]/[1.1] font-normal tracking-[0.2px] text-muted-1 sm:hover:text-foreground transition-color duration-500'
               )}
-            /> 
+              key={index + 1}
+            />
           )
         })}
       </div>

package/components/header/desktop-nav-menu.tsx

@@ -68,10 +68,8 @@ const DesktopNav: React.FC<{
         {links.map((el, index) => (
           <NavigationMenuItem key={index} className='!m-0'>
             {el.isAIMenu ? (
-              <Link href={el.href} legacyBehavior passHref>
-                <NavigationMenuLink className={cn(navigationMenuTriggerStyle(), ' text-muted-1 bg-transparent')}>
-                  {el.title}
-                </NavigationMenuLink>
+              <Link href={el.href} className={cn(navigationMenuTriggerStyle(), ' text-muted-1 bg-transparent')}>
+                {el.title}
               </Link>
             ) : el.title === 'Cards' ? (
               <>
@@ -82,7 +80,7 @@ const DesktopNav: React.FC<{
                   onMouseLeave={handleMouseLeave}
                   onBlur={handleMouseLeave}
                 >
-                  <Link href={el.href} legacyBehavior passHref>
+                  <Link href={el.href}>
                     {el.title}
                   </Link>
                 </NavigationMenuTrigger>
@@ -112,7 +110,7 @@ const DesktopNav: React.FC<{
                 >
                   {
                     el.href && el.href !== '' ?
-                      <Link href={el.href} legacyBehavior passHref>
+                      <Link href={el.href}>
                         {el.title}
                       </Link> : <>{el.title}</>
                   }

package/components/header/desktop.tsx

@@ -1,7 +1,7 @@
 import React, { type PropsWithChildren } from 'react'
 
 import { cn } from '@hanzo/ui/util'
-import { AuthWidget } from '@hanzo/auth/components'
+import AuthWidget from '../auth/widget'
 
 import Logo, { type LogoVariant } from '../logo'
 
@@ -25,7 +25,7 @@ const DesktopHeader: React.FC<{
   noAuth=false,
   noCommerce=false,
   children,
-  logoVariant='text-only'
+  logoVariant='full'
 }) => {
     const [isMenuOpened, setIsMenuOpen] = React.useState(false);
 
@@ -42,7 +42,7 @@ const DesktopHeader: React.FC<{
           'flex flex-row h-[80px] items-center justify-between ' +
           'mx-[24px] w-full max-w-screen'
         }>
-          <Logo size={logoVariant === 'logo-only' ? 'lg' : 'md'} href='/' outerClx='hidden lg:flex' key='two' variant={logoVariant} />
+          <Logo size={logoVariant === 'mark' ? 'lg' : 'md'} href='/' outerClx='hidden lg:flex' key='two' variant={logoVariant} />
           <Logo size='sm' href='/' outerClx='hidden md:flex lg:hidden' key='one' variant={logoVariant} />
           {/* md or larger */}
           <div className='flex w-full gap-4 items-center justify-center'>
@@ -52,7 +52,7 @@ const DesktopHeader: React.FC<{
             {!noCommerce && (
               <DesktopBagPopup popupClx='w-[340px]' trigger={<BagButton className='text-primary -mr-[3px] lg:min-w-0' />} />
             )}
-            <AuthWidget noLogin={noAuth}/>
+            {!noAuth && <AuthWidget />}
             {children}
           </div>
         </div>

package/components/header/index.tsx

@@ -18,7 +18,7 @@ const Header: React.FC<{
   siteDef,
   className = '',
   children,
-  logoVariant='text-only'
+  logoVariant='full'
 }) => {
 
     // TODO

package/components/header/mobile-nav-menu-ai.tsx

@@ -15,7 +15,7 @@ const MobileNavMenuAI: React.FC<MobileNavMenuAIProps> = ({ setMenuOpen }) => {
         <>
             <div className="w-full  text-2xl cursor-pointer">
                 <div className='flex justify-between'>
-                    <Logo variant='text-only' size='md' outerClx={'p-6 h-full'} />
+                    <Logo variant='wordmark' size='md' outerClx={'p-6 h-full'} />
                     <Plus width={28} height={28} className={
                         'block h-full aspect-square hover:bg-background sm:hover:bg-level-1 active:scale-75 text-foreground will-change-transform transition-transform transition-scale transition-duration-[1500] mt-6 mr-6 ' +
                         (!open ? 'rotate-none' : 'rotate-[135deg] scale-110')

package/components/header/mobile-nav-menu.tsx

@@ -5,7 +5,7 @@ import { cn } from '@hanzo/ui/util'
 import type { LinkDefExtended, ChildMenu } from '../../site-def/main-nav'
 import MobileNavMenuAI from './mobile-nav-menu-ai'
 import MobileNavMenuItem from './mobile-nav-menu-item'
-import MobileAuthWidget from '../auth/mobile-login-button'
+import AuthWidget from '../auth/widget'
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@hanzo/ui/primitives'
 import { ChevronDown } from 'lucide-react'
 import Link from 'next/link'
@@ -94,7 +94,7 @@ const MobileNav: React.FC<{
             })}
           </Accordion>
         </div>
-        <MobileAuthWidget className='text-2xl z-10' handleLogin={() => { setMenuState('login') }} />
+        <AuthWidget className='text-2xl z-10' handleLogin={() => { setMenuState('login') }} />
       </div>
     ) : null
   );

package/components/header/mobile.tsx

@@ -6,7 +6,7 @@ import type { LinkDef } from '@hanzo/ui/types'
 import { cn } from '@hanzo/ui/util'
 
 import { CartPanel, useCommerce } from '@hanzo/commerce'
-import { LoginPanel } from '@hanzo/auth/components'
+import Login from '../auth/login'
 import sendGAEvent from '../../next/analytics/google-analytics'
 
 import { Avatar, Bag } from '../icons'
@@ -95,7 +95,7 @@ const MobileHeader: React.FC<{
       )}>
         {/* smaller than md: mobile style drawer menu; h-11 is 44px, the standard mobile header height */}
         <div className='w-full h-full flex flex-row justify-between items-center font-bold pr-5'>
-          <Logo href='/' size='md' outerClx={'p-6 h-full'} variant='text-only' />
+          <Logo href='/' size='md' outerClx={'p-6 h-full'} variant='wordmark' />
           {/* Not that key to the cross-fade effect 
             is that this is **on top of** the logo. */}
           {menuOpen() && (
@@ -129,7 +129,7 @@ const MobileHeader: React.FC<{
           'flex flex-column bg-background z-below-header animate-mobile-menu-open'
         }>
           {(!!!noAuth && menuState === 'login') ? (
-            <LoginPanel noHeading onLoginChanged={onLoginChanged} className='sm:animate-in sm:zoom-in-90' />
+            <Login onSuccess={onLoginChanged} className='sm:animate-in sm:zoom-in-90 m-auto w-full max-w-sm px-8' />
           ) : (
             (!!!noCommerce && menuState === 'bag') ? (
 

package/components/icons/index.ts

@@ -1,6 +1,5 @@
 export { default as Avatar } from './avatar'
 export { default as Bag } from './bag-icon'
 export { default as LeftArrow } from './left-arrow'
-export { default as LuxLogo } from './lux-logo'
 export { default as RightArrow } from './right-arrow'
 export { default as SocialIcon, type SocialIconProps } from './social-icon'