@luxfi/ui 5.5.4 → 5.5.6

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 { Box, cn } from '@hanzo/ui'
+import AuthWidget from '../auth/widget'
 
 import Logo, { type LogoVariant } from '../logo'
 
@@ -25,24 +25,24 @@ const DesktopHeader: React.FC<{
   noAuth=false,
   noCommerce=false,
   children,
-  logoVariant='text-only'
+  logoVariant='full'
 }) => {
     const [isMenuOpened, setIsMenuOpen] = React.useState(false);
 
     // TODO move 13px into a size class and configure twMerge to recognize say, 'text-size-nav' 
     // (vs be beat out by 'text-color-nav')
     return (
-      <header  id='DESKTOP_HEADER' className={cn(
+      <Box tag="header"  id='DESKTOP_HEADER' className={cn(
         'bg-[rgba(0, 0, 0, 0.5)] !backdrop-blur-3xl fixed z-header top-0 left-0 right-0', 
         className, 
         isMenuOpened ? ' h-full' : ''
       )} >
         {/* md or larger */}
-        <div className={
+        <Box className={
           '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,11 +52,11 @@ 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>
-      </header>
+        </Box>
+      </Box>
     )
   }
 

package/components/header/index.tsx

@@ -5,7 +5,7 @@ import type { SiteDef } from '../../site-def'
 
 import DesktopHeader from './desktop'
 import MobileHeader from './mobile'
-import { cn } from '@hanzo/ui/util'
+import { cn } from '@hanzo/ui'
 import { type LogoVariant } from '../logo'
 
 
@@ -18,7 +18,7 @@ const Header: React.FC<{
   siteDef,
   className = '',
   children,
-  logoVariant='text-only'
+  logoVariant='full'
 }) => {
 
     // TODO

package/components/header/mobile-bag-drawer.tsx

@@ -2,7 +2,7 @@
 import React from 'react'
 
 import { Drawer, DrawerContent} from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
+import { cn } from '@hanzo/ui'
 import { CartPanel } from '@hanzo/commerce'
 
 import BagButton from '../commerce/bag-button'

package/components/header/mobile-menu-toggle-button.tsx

@@ -4,8 +4,7 @@ import React, { useState } from 'react'
 import { Plus } from 'lucide-react'
 
 import { Button } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
+import { cn, css } from '@hanzo/ui'
 const MobileMenuToggleButton: React.FC<{
   open: boolean
   setOpen: (b: boolean) => void
@@ -20,14 +19,14 @@ const MobileMenuToggleButton: React.FC<{
     <Button 
       variant='ghost' 
       size='default' 
-      rounded='full' 
+      className={cn('rounded-full', cn('p-0 aspect-square hover:bg-background sm:hover:bg-level-1 active:scale-75', className))}
       onClick={() => {setOpen(!open)}} 
-      className={cn('p-0 aspect-square hover:bg-background sm:hover:bg-level-1 active:scale-75', className)}
+      
     >
-      <Plus width={28} height={28} className={
+      <Plus width={28} height={28} style={css(
         'block h-full will-change-transform transition-transform transition-scale transition-duration-[1500] ' + 
         (open ? 'rotate-[135deg] scale-110' : 'rotate-none')
-      } />
+      )} />
     </Button>
   )
 }

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

@@ -1,5 +1,6 @@
 'use client'
 import React, { useState } from 'react'
+import { Box, cn, css } from '@hanzo/ui'
 import { ArrowRight, Plus } from 'lucide-react'
 import { Button, Card } from '@hanzo/ui/primitives'
 import { Logo } from '..'
@@ -13,22 +14,22 @@ const MobileNavMenuAI: React.FC<MobileNavMenuAIProps> = ({ setMenuOpen }) => {
 
     return (
         <>
-            <div className="w-full  text-2xl cursor-pointer">
+            <Box className="w-full  text-2xl cursor-pointer">
                 <div className='flex justify-between'>
-                    <Logo variant='text-only' 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')
-                    } onClick={() => setMenuOpen(false)} />
+                    <Logo variant='wordmark' size='md' outerClx={'p-6 h-full'} />
+                    <Box tag="span" className={cn('grid', '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'))}>
+                      <Plus width={28} height={28} style={css('w-full h-full')} onClick={() => setMenuOpen(false)} />
+                    </Box>
                 </div>
-                <div className="flex items-center gap-5 border-b border-[#3A3A3A] mt-4 rounded-full bg-muted-4 mx-6">
-                    <div className="text-muted-1 font-bold flex-1 flex justify-between min-h-12 items-center px-2" onClick={() => setIsOpen(true)}>
+                <Box className="flex items-center gap-5 border-b border-[#3A3A3A] mt-4 rounded-full bg-muted-4 mx-6">
+                    <Box className="text-muted-1 font-bold flex-1 flex justify-between min-h-12 items-center px-2" onClick={() => setIsOpen(true)}>
                         <span className='text-base pl-2 font-light'>Ask AI a question</span>
                         <ArrowRight />
-                    </div>
-                </div>
-            </div>
-            <div className={
+                    </Box>
+                </Box>
+            </Box>
+            <Box className={
                 'fixed bottom-0 sm:bottom-16 right-0 w-full h-full ' +
                 'sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-floating ' +
                 (isOpen ? 'flex' : 'hidden')
@@ -42,7 +43,7 @@ const MobileNavMenuAI: React.FC<MobileNavMenuAIProps> = ({ setMenuOpen }) => {
                     </div>
                     <iframe src="https://lux.chat/iframe" className='h-full' />
                 </Card>
-            </div>
+            </Box>
 
         </>
     )

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

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { Box } from '@hanzo/ui'
 import Link from 'next/link'
 
 import type { LinkDefExtended } from '../../site-def/main-nav'
@@ -16,30 +17,30 @@ const MobileNavMenuItem: React.FC<{
 
   return (
       <>
-          <div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl cursor-pointer" onClick={() => setIsOpen(true)}>
+          <Box className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl cursor-pointer" onClick={() => setIsOpen(true)}>
               <span className='block w-[18px] h-[22px] items-center'>{link.icon}</span>
               <span className='flex-1'>{link.title}</span>
               <RightArrow className='' />
-          </div>
-          <div className={`fixed left-0 top-0 w-screen h-screen ${isOpen ? 'block' : 'hidden'}`} style={{ backgroundColor: 'black' }}>
+          </Box>
+          <Box className={`fixed left-0 top-0 w-screen h-screen ${isOpen ? 'block' : 'hidden'}`} style={{ backgroundColor: 'black' }}>
               <MobileNavMenuAI setMenuOpen={setMenuOpen} />
-              <div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl font-bold" onClick={() => setIsOpen(false)}>
+              <Box className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl font-bold" onClick={() => setIsOpen(false)}>
                   <LeftArrow />
-                  <span className="text-white">{link.title}</span>
-              </div>
-              <div className="flex flex-col">
+                  <Box tag="span" className="text-white">{link.title}</Box>
+              </Box>
+              <Box className="flex flex-col">
                   {link.childMenu?.map((menu, index) => {
                       return (
                           <Link href={menu.href}>
-                              <div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl" key={index}>
+                              <Box className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl" key={index}>
                                   <span className='w-[18px] h-[22px] self-center flex items-center justify-center'>{menu.icon}</span>
                                   <span className='flex-1'>{menu.title}</span>
-                              </div>
+                              </Box>
                           </Link>
                       )
                   })}
-              </div>
-          </div>
+              </Box>
+          </Box>
       </>
   )
 }

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

@@ -1,11 +1,11 @@
 'use client'
 import React from 'react'
 import type { LinkDef } from '@hanzo/ui/types'
-import { cn } from '@hanzo/ui/util'
+import { Box, cn, css } from '@hanzo/ui'
 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'
@@ -28,9 +28,9 @@ const MobileNav: React.FC<{
   setMenuOpen
 }) => (
     links.length > 0 ? (
-      <div className={cn('flex flex-col h-full', className)}>
+      <Box className={cn('flex flex-col h-full', className)}>
         <MobileNavMenuAI setMenuOpen={setMenuOpen} />
-        <div className="flex flex-col flex-1 overflow-auto">
+        <Box className="flex flex-col flex-1 overflow-auto">
           <Accordion type="single" collapsible className='w-full h-full'>
             {links.map((el, index) => {
               const itemClx = (commonItemClx) ? (typeof commonItemClx === 'string' ? commonItemClx : commonItemClx(el)) : ''
@@ -50,14 +50,14 @@ const MobileNav: React.FC<{
                 return (
                   <AccordionItem key={index} value={el.title ? el.title : ""} className='!no-underline !border-0 px-6'>
                     <AccordionTrigger className={cn(internalClx, itemClx, '')}>
-                      <div className={cn(internalClx, itemClx, 'flex items-center justify-between w-full pl-3 text-base font-normal leading-6')}>
+                      <Box className={cn(internalClx, itemClx, 'flex items-center justify-between w-full pl-3 text-base font-normal leading-6')}>
                         {el.title}
-                      </div>
-                      <ChevronDown className="w-4 h-4 mr-3" />
+                      </Box>
+                      <ChevronDown style={css('w-4 h-4 mr-3')} />
                     </AccordionTrigger>
                     <AccordionContent>
                       {el.childMenu && (
-                        <div className="px-4">
+                        <Box className="px-4">
                           {Object.entries(el.childMenu.reduce((acc, child) => {
                             const group = acc[child.groupName ? child.groupName : ""] || []
                             group.push(child)
@@ -65,27 +65,28 @@ const MobileNav: React.FC<{
                             return acc
                           }, {} as { [key: string]: ChildMenu[] })).map(([groupName, children]) => (
                             <div key={groupName}>
-                              <div className="mt-4 mb-4 font-light text-muted-1">{groupName}</div>
+                              <Box className="mt-4 mb-4 font-light text-muted-1">{groupName}</Box>
                               {children.map((child, childIndex) => (
-                                <div key={childIndex} className="m-2">
-                                  <div className="flex items-center py-1">
+                                <Box key={childIndex} className="m-2">
+                                  <Box className="flex items-center py-1">
                                     <span>
                                       {child.icon && child.icon}
                                     </span>
                                     <Link
                                       href={child.href}
-                                      className="text-muted-2 hover:underline ml-5 hover:text-primary"
                                       target={child.newTab ? '_blank' : '_self'}
                                       rel="noopener noreferrer"
                                     >
+                                      <Box tag="span" className="text-muted-2 hover:underline ml-5 hover:text-primary">
                                       {child.title}
+                                      </Box>
                                     </Link>
-                                  </div>
-                                </div>
+                                  </Box>
+                                </Box>
                               ))}
                             </div>
                           ))}
-                        </div>
+                        </Box>
                       )}
                     </AccordionContent>
                   </AccordionItem>
@@ -93,9 +94,9 @@ const MobileNav: React.FC<{
               }
             })}
           </Accordion>
-        </div>
-        <MobileAuthWidget className='text-2xl z-10' handleLogin={() => { setMenuState('login') }} />
-      </div>
+        </Box>
+        <AuthWidget className='text-2xl z-10' handleLogin={() => { setMenuState('login') }} />
+      </Box>
     ) : null
   );
 

package/components/header/mobile.tsx

@@ -3,10 +3,9 @@ import React, { useState, useEffect } from 'react'
 import { useRouter } from 'next/navigation'
 
 import type { LinkDef } from '@hanzo/ui/types'
-import { cn } from '@hanzo/ui/util'
-
+import { Box, cn } from '@hanzo/ui'
 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'
@@ -89,22 +88,22 @@ const MobileHeader: React.FC<{
     }
     // header element MUST be fixed, and NOT sticky.  Or else drawer breaks on mobile browsers
     return (<>
-      <header id='MOBILE_HEADER' className={cn(
+      <Box tag="header" id='MOBILE_HEADER' className={cn(
         `bg-background fixed z-header top-0 left-0 w-full ${menuOpen() ? 'hidden' : 'block'}`,
         className
       )}>
         {/* 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() && (
-            <div className={'absolute left-0 top-0 bottom-0 right-0 pl-8 ' +
+            <Box className={'absolute left-0 top-0 bottom-0 right-0 pl-8 ' +
             'flex flex-row ' +
             'bg-background animate-mobile-menu-open'
           }>
               <Avatar className='self-center ' />
-            </div>
+            </Box>
           )}
           <div className='flex gap-0 flex-row'>
             <BagButton className='text-primary -mr-[3px]' onClick={openBag} />
@@ -112,7 +111,7 @@ const MobileHeader: React.FC<{
           </div>
 
         </div>
-      </header>
+      </Box>
       {!noCommerce && (
         <MobileBagDrawer
           className=''
@@ -123,13 +122,13 @@ const MobileHeader: React.FC<{
       )}
 
       {menuOpen() && (
-        <div className={
+        <Box className={
           'fixed top-0 left-0 w-full h-full ' +
           // z must below header itself
           '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') ? (
 
@@ -162,7 +161,7 @@ const MobileHeader: React.FC<{
               />
             )
           )}
-        </div>
+        </Box>
       ) /* menuOpen */}
     </>)
   }

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'

package/components/icons/social-icon.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { SocialIcon as BaseSocialIcon } from 'react-social-icons'
 
-import { cn } from '@hanzo/ui/util'
+import { cn } from '@hanzo/ui'
 import './social-svg.css'
 
 interface SocialIconProps {

package/components/index.ts

@@ -10,7 +10,8 @@ export { default as Main } from './main'
 export { default as MiniChart } from './mini-chart'
 export { default as NotFound } from './not-found'
 
-export { default as AuthListener } from './auth/auth-listener'
+export { default as Auth } from './auth/provider'
+export { default as Login } from './auth/login'
 export { default as BackButton } from './back-button'
 export { default as BuyDrawer } from './commerce/drawer'
 export { default as DrawerMargin } from './drawer-margin'
@@ -18,7 +19,6 @@ export { default as BuyButton } from './commerce/buy-button'
 export { default as CheckoutButton } from './commerce/checkout-button'
 export { default as CheckoutPanel } from './commerce/checkout-panel'
 export { default as LoginPanel } from './auth/login-panel'
-export { default as SignupPanel } from './auth/signup-panel'
 export { default as Analytics } from './analytics'
 export { default as Tooltip } from './tooltip'
 

package/components/logo.tsx

@@ -1,13 +1,31 @@
 import React from 'react'
+import { Box, css } from '@hanzo/ui'
 import Link from 'next/link'
 
-import { type TShirtSize  } from '@hanzo/ui/types'
+import { type TShirtSize } from '@hanzo/ui/types'
+import { Logo as Mark, Wordmark } from '@luxfi/logo'
 
-import { LuxLogo } from './icons'
-
-const TEXT = 'LUX'
-type LogoVariant = 'text-only' | 'logo-only' | 'full'
+/**
+ * mark     — the triangle alone
+ * wordmark — the LUX letterforms alone
+ * full     — the mark beside the wordmark
+ *
+ * Both halves come from @luxfi/logo, which is the one home for Lux brand art.
+ * This file used to draw its own triangle and set the letters "LUX" in the body
+ * font, so every Lux site wore typed text where the wordmark belongs — and no
+ * variant could fix it, because neither the mark nor the wordmark was here to
+ * ask for. Art lives in the brand package; this composes it.
+ */
+type LogoVariant = 'mark' | 'wordmark' | 'full'
 
+/** Mark height in px, and the wordmark height that stands with it. */
+const SIZE: Record<string, { mark: number, word: number, gap: string }> = {
+  xl: { mark: 40, word: 22, gap: 'gap-4' },
+  lg: { mark: 40, word: 22, gap: 'gap-4' },
+  md: { mark: 32, word: 18, gap: 'gap-3' },
+  sm: { mark: 24, word: 13, gap: 'gap-2' },
+  xs: { mark: 16, word: 9, gap: 'gap-1.5' },
+}
 
 const Logo: React.FC<{
   size?: TShirtSize
@@ -15,74 +33,29 @@ const Logo: React.FC<{
   onClick?: () => void
   href?: string
   outerClx?: string
-  textClx?: string
 }> = ({
-  size,
+  size = 'md',
   href, // no default please!
-  outerClx='',
-  textClx='',
-  variant='full',
+  outerClx = '',
+  variant = 'full',
   onClick,
 }) => {
-  let classes: any = {}
-  const toAdd = (variant === 'logo-only') ? 
-    {
-      span: 'hidden',
-      icon: ''
-    }  
-    :
-    (variant === 'text-only') ? 
-      {
-        span: '',
-        icon: 'hidden'
-      } 
-      : 
-      {
-        span: '',
-        icon: ''
-      }
-
-  if (size === 'lg' || size === 'xl' ) { // for safety
-    classes.icon = 'h-10 w-10 mr-4 color-inherit ' 
-    classes.span = 'text-3xl ' 
-  }
-    // match lux.network
-  else if (size === 'md') {
-    classes.icon = 'h-[32px] w-[32px] mr-[12px] color-inherit '
-    classes.span = 'text-[1.8rem]/[1.8rem] tracking-tighter '
-  }
-  else if (size === 'sm' ) {
-    classes.icon = 'h-6 w-6 mr-2 color-inherit ' 
-    classes.span = 'text-lg '
-  }
-    // xs
-  else {
-    classes.icon = 'h-4 w-4 mr-1 color-inherit '
-    classes.span = 'text-base '
-  }
-
-  classes.icon += toAdd.icon
-  classes.span += toAdd.span
-
+  const s = SIZE[size as string] ?? SIZE.md
+  const clx = 'flex flex-row items-center ' + s.gap + ' '
+    + (href ? 'hover:opacity-80 cursor-pointer ' : 'cursor-default ')
+    + outerClx
 
-  const outerClasses = 'flex flex-row items-center ' + outerClx
-  const spanClasses = 'inline-block font-bold font-heading ' 
-    + textClx
-    + (href ? ' hover:opacity-80 cursor-pointer ' : ' cursor-default ') 
-    + classes.span 
+  // White on both counts: the Lux ground is black and the brand's accent is
+  // white, so the mark and the letters carry the same value.
+  const art = (<>
+    {variant !== 'wordmark' && <Mark variant='white' size={s.mark} />}
+    {variant !== 'mark' && <Wordmark height={s.word} />}
+  </>)
 
-  return (
-    href ? (
-      <Link href={href} className={outerClasses} onClick={onClick} >
-        <LuxLogo className={classes.icon} />
-        <span className={spanClasses}>{TEXT}</span>
-      </Link>
-    ) : (
-      <span className={outerClasses} onClick={onClick}>
-        <LuxLogo className={classes.icon} />
-        <span className={spanClasses}>{TEXT}</span>
-      </span>
-    )
+  return href ? (
+    <Link href={href} style={css(clx)} onClick={onClick}>{art}</Link>
+  ) : (
+    <Box tag="span" className={clx} onClick={onClick}>{art}</Box>
   )
 }
 

package/components/main.tsx

@@ -1,6 +1,5 @@
 import React, { type PropsWithChildren } from 'react'
-import { cn } from '@hanzo/ui/util'
-
+import { Box, cn } from '@hanzo/ui'
 const Main: React.FC<PropsWithChildren & { 
   id?: string
   className?: string 
@@ -13,7 +12,7 @@ const Main: React.FC<PropsWithChildren & {
   standardWidth=true,
   id
 }) => (
-  <main id={id ?? 'LUX_UI_MAIN'} className={cn(
+  <Box tag="main" id={id ?? 'LUX_UI_MAIN'} className={cn(
     'flex flex-col justify-start items-center',
     'px-4 md:px-6 lg:px-8',
     standardWidth ? 'max-w-screen-2xl w-full lg:mx-auto' : '',
@@ -21,7 +20,7 @@ const Main: React.FC<PropsWithChildren & {
     className
   )}>
     {children}
-  </main>
+  </Box>
 )
 
 export default Main

package/components/mini-chart/mini-chart.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import React, { useEffect, useRef } from 'react'
+import { Box } from '@hanzo/ui'
 import { type MiniChartProps } from './mini-chart-props'
 
 const MiniChart: React.FC<MiniChartProps> = ({ 
@@ -77,7 +78,7 @@ const MiniChart: React.FC<MiniChartProps> = ({
 		<div style={containerStyles} className='tradingview-widget-container h-[150px]' ref={containerRef} />
     <div className='tradingview-widget-copyright border-t w-full invisible'>
       <a href={`https://www.tradingview.com/symbols/${symbol}${exchange ? `/?exchange=${exchange}` : '' }`} rel="noopener" target="_blank">
-        <span className="text-[--hz-ui-primary]">{symbol} quotes</span></a>&nbsp;by TradingView
+        <Box tag="span" className="text-[--hz-ui-primary]">{symbol} quotes</Box></a>&nbsp;by TradingView
     </div>
   </>)
 }

package/components/security/index.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+
+import { ApplyTypography } from '@hanzo/ui/primitives'
+
+import type { SiteDef } from '../../site-def'
+import Footer from '../footer'
+import Header from '../header'
+import Main from '../main'
+
+const Security: React.FC<{
+  contact: string
+  header?: boolean
+  siteDef: SiteDef
+}> = ({
+  contact,
+  header = false,
+  siteDef
+}) => (<>
+  {header && <Header siteDef={siteDef} />}
+  <Main className='px-8 sm:px-10 pb-16'>
+    <ApplyTypography className='w-full max-w-[46rem] mx-auto flex flex-col gap-6 pt-12'>
+      <h1>Reporting a security problem</h1>
+      <p>
+        Email <a href={`mailto:${contact}`}>{contact}</a>. Tell us what you found and how to
+        reproduce it. Send it to us before you tell anyone else, and do not open a public issue.
+      </p>
+      <p>
+        A real report from a stranger is worth more than another internal review. We read every one.
+      </p>
+      <h2>What happens next</h2>
+      <p>
+        Someone will read your report and reply. If we can reproduce the problem we will tell you
+        what we are doing about it, and tell you again once it is fixed. If we cannot reproduce it
+        we will say so and ask you for what we are missing.
+      </p>
+      <h2>While you are looking</h2>
+      <p>
+        Test against accounts and data that are your own. Do not read, change, or keep data that
+        belongs to someone else. If you reach it by accident, stop, and say so in your report.
+      </p>
+      <p>
+        Do not run anything that degrades the service for other people. No load testing, no denial
+        of service, no mass automated scanning, and no social engineering of our staff or our users.
+      </p>
+      <h2>For scanners</h2>
+      <p>
+        This page is the policy named by{' '}
+        <a href='/.well-known/security.txt'>/.well-known/security.txt</a>, per RFC 9116.
+      </p>
+    </ApplyTypography>
+  </Main>
+  <Footer siteDef={siteDef} />
+</>)
+
+export default Security