@luxfi/ui 5.5.5 → 5.5.6

package/components/commerce/drawer/micro.tsx

@@ -2,8 +2,8 @@
 import React from 'react'
 import { observer } from 'mobx-react-lite'
 
-import { Button, Image } from '@hanzo/ui/primitives'
-import { cn,  } from '@hanzo/ui/util'
+import { Button, } from '@hanzo/ui/primitives'
+import { Box, MediaStack, cn } from '@hanzo/ui'
 import type { LineItem } from '@hanzo/commerce/types'
 import { useCommerce, formatCurrencyValue } from '@hanzo/commerce'
 
@@ -37,20 +37,20 @@ const Info: React.FC<{
   const priceStr = formatCurrencyValue(item.price)
 
   return (<>
-    <div className={cn('sm:hidden flex flex-col !text-muted items-stretch whitespace-nowrap text-ellipsis ', clx)}>
+    <Box className={cn('sm:hidden flex flex-col !text-muted items-stretch whitespace-nowrap text-ellipsis ', clx)}>
       <p className='text-left text-xs'>{topLine}</p>
       <div className='flex justify-between text-xxs'>
         <div>{optionLabel}</div>
         <div className='pl-2.5'>{priceStr}</div>
       </div>
-    </div>
-    <div className={cn('hidden sm:flex !text-muted  flex-col items-stretch whitespace-nowrap text-ellipsis text-xs', clx)}>
+    </Box>
+    <Box className={cn('hidden sm:flex !text-muted  flex-col items-stretch whitespace-nowrap text-ellipsis text-xs', clx)}>
       <p className='text-left'>{topLine}</p>
       <div className='flex justify-between'>
         <div>{optionLabel}</div>
         <div className='pl-2.5'>{priceStr}</div>
       </div>
-    </div>
+    </Box>
   </>)
 }
 
@@ -70,29 +70,26 @@ const Micro: React.FC<{
   const cmmc = useCommerce()
 
   return (        
-    <div className={cn(
+    <Box className={cn(
       (drawer.showRecent ? 'grid grid-cols-2' : 'flex justify-center items-center '),
       (drawer.showRecent ? ((drawer.isMobile) ? '-mt-3' : '-mt-3') : ''),
       'gap-2 md:gap-3 relative',
       clx
     )}>
     {drawer.showRecent && (
-      <div className={'flex flex-col items-stretch ' + (drawer.isMobile ? 'justify-start' : 'group')}>
-        <p className={'relative text-muted text-xxs md:text-xs leading-none pl-1 self-start ' + (drawer.isMobile ? 'top-[3px]' : 'top-[1px]')}>
+      <Box className={'flex flex-col items-stretch ' + (drawer.isMobile ? 'justify-start' : 'group')}>
+        <Box tag="p" className={'relative text-muted text-xxs md:text-xs leading-none pl-1 self-start ' + (drawer.isMobile ? 'top-[3px]' : 'top-[1px]')}>
           <span className='invisible'>scrictly for layout</span>
           {drawer.isMobile ? (
-            <span className={PROMPT_COMMON_CLX}>tap for options:</span>
+            <Box tag="span" className={PROMPT_COMMON_CLX}>tap for options:</Box>
           ) : (<>
-            <span className={PROMPT_COMMON_CLX + ' group-hover:opacity-0'}>recent item:</span>
-            <span className={PROMPT_COMMON_CLX + ' opacity-0 group-hover:opacity-100'}>view options:</span>
+            <Box tag="span" className={PROMPT_COMMON_CLX + ' group-hover:opacity-0'}>recent item:</Box>
+            <Box tag="span" className={PROMPT_COMMON_CLX + ' opacity-0 group-hover:opacity-100'}>view options:</Box>
           </>)}
-        </p>
+        </Box>
         <Button 
           variant='ghost'
-          rounded={drawer.isMobile ? 'md' : 'lg'}
-          size={drawer.isMobile ? 'sm' : 'default'}
-          onClick={handleItemClicked}
-          className={cn(
+          className={cn(`rounded-${drawer.isMobile ? 'md' : 'lg'}`, cn(
             'box-content',
             'flex flex-row justify-between items-center gap-1',
             '-ml-1.5',
@@ -101,12 +98,15 @@ const Micro: React.FC<{
             'border border-transparent group-hover:border-muted-3',
             'group-hover:!bg-transparent',
             '!min-w-0'
-          )}
+          ))}
+          size={drawer.isMobile ? 'sm' : 'default'}
+          onClick={handleItemClicked}
+          
         >
           {cmmc.recentItem?.item.img && (<>
-            <Image def={cmmc.recentItem.item.img} constrainTo={CN.mobile} preload className='sm:hidden grow-0 shrink-0'/>
-            <Image def={cmmc.recentItem.item.img} constrainTo={CN.sm} preload className='hidden sm:block md:hidden grow-0 shrink-0'/>
-            <Image def={cmmc.recentItem.item.img} constrainTo={CN.desktop} preload className='hidden md:block grow-0 shrink-0'/>
+            <MediaStack media={{img: cmmc.recentItem.item.img}} constrainTo={CN.mobile} className='sm:hidden grow-0 shrink-0' />
+            <MediaStack media={{img: cmmc.recentItem.item.img}} constrainTo={CN.sm} className='hidden sm:block md:hidden grow-0 shrink-0' />
+            <MediaStack media={{img: cmmc.recentItem.item.img}} constrainTo={CN.desktop} className='hidden md:block grow-0 shrink-0' />
           </>)} 
           {cmmc.recentItem && (
             <div className='grow w-full'>
@@ -114,10 +114,10 @@ const Micro: React.FC<{
             </div>
           )}
         </Button>
-      </div>
+      </Box>
     )}
     {drawer.showCheckout && (
-      <div className={cn(
+      <Box className={cn(
         'flex flex-col w-full', 
         (drawer.showRecent ? 'items-stretch' : 'items-center' ),
         (drawer.isMobile ? 'justify-start' : 'justify-center')
@@ -126,19 +126,19 @@ const Micro: React.FC<{
         <CheckoutButton 
           handleCheckout={handleCheckout} 
           variant='primary' 
-          size={drawer.isMobile ? 'xs' : 'lg'}
-          rounded={drawer.isMobile ? 'md' : 'lg'}
-          centerText={drawer.isMobile ? !drawer.showRecent : true}
-          className={cn(drawer.isMobile ? 
+          size={drawer.isMobile ? 'sm' : 'lg'}
+          className={cn(`rounded-${drawer.isMobile ? 'md' : 'lg'}`, cn(drawer.isMobile ? 
             (drawer.showRecent ? 'pl-3.5 pr-2.5' : 'min-w-[320px]')
             :
             (drawer.showRecent ? '' : 'w-[320px]'),
             'text-sm font-semibold'
-          )} 
+          ))}
+          centerText={drawer.isMobile ? !drawer.showRecent : true}
+           
         />
-      </div>
+      </Box>
     )}
-    </div>
+    </Box>
   )
 })
 

package/components/commerce/drawer/shell.tsx

@@ -8,8 +8,7 @@ import {
   DrawerHandle,
   type DrawerProps,
 } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
+import { Box, cn } from '@hanzo/ui'
 import '../../../style/drawer-handle-overrides.css'
 import { useCommerceDrawer } from '../../../commerce/ui/context'
 
@@ -58,7 +57,7 @@ const CommerceDrawer: React.FC<PropsWithChildren &
           'w-full h-full',
         )}
         // https://github.com/radix-ui/primitives/discussions/935
-        onOpenAutoFocus={(e) => {e.preventDefault()}}
+        onOpenAutoFocus={(e: Event) => { e.preventDefault() }}
       >
         <DrawerHandle 
           className={cn(
@@ -68,7 +67,7 @@ const CommerceDrawer: React.FC<PropsWithChildren &
             drawer.isMobile ? 'h-5 touch-pan-y' : 'h-6',
           )} 
         >
-          <div className={cn(
+          <Box className={cn(
               // pseudo-handle
             'rounded-[3px] bg-level-3',
             drawer.isMobile ? 'w-[155px] mt-[5px] h-1.5' : 'w-[180px] mt-[3px] h-2.5 hover:bg-level-4',
@@ -81,5 +80,4 @@ const CommerceDrawer: React.FC<PropsWithChildren &
   )
 })
 
-
 export default CommerceDrawer

package/components/contact-dialog/contact-form.tsx

@@ -16,14 +16,7 @@ import {
   Input,
 } from '@hanzo/ui/primitives'
 
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage,
-} from '@hanzo/ui/form'
-
+import { Box, Form, FormControl, FormField, FormItem, FormMessage, css } from '@hanzo/ui'
 import type { SubmitServerAction } from '@hanzo/ui/types'
 import type { ContactInfo } from '../../types'
 
@@ -77,15 +70,15 @@ const ContactForm: React.FC<{
     <FormControl>
       <Input placeholder={placeholder} {...field} className="mt-0 text-foreground"/>
     </FormControl>
-    <div className="flex flex-row justify-start items-stretch gap-2">
+    <Box className="flex flex-row justify-start items-stretch gap-2">
       <FormMessage />
-    </div>
+    </Box>
   </FormItem>
 )
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="w-3/4">
+      <Box tag="form" onSubmit={form.handleSubmit(onSubmit)} className="w-3/4">
         <div className='flex flex-col justify-start items-stretch mt-4'>
         <FormField
           control={form.control}
@@ -100,7 +93,7 @@ const ContactForm: React.FC<{
         />
           <Button disabled={isPending} type='submit' className='bg-primary text-primary-fg hover:bg-primary-hover'>
             {isPending ? (<>
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              <Loader2 style={css('mr-2 h-4 w-4 animate-spin')} />
               Please wait
               </>
             ) : (
@@ -108,7 +101,7 @@ const ContactForm: React.FC<{
             )}
           </Button>
         </div>
-      </form>
+      </Box>
     </Form>
   )
 }

package/components/contact-dialog/index.tsx

@@ -30,7 +30,7 @@ const ContactDialog: React.FC<ButtonModalProps> = ({
   const [success, setSuccess] = useState(false)
 
   const onSubmit = async (formData: any, enclosure: any) => {
-    const result = await action(formData, enclosure)
+    const result = (await action(formData, enclosure)) as { success?: boolean }
     if (result.success) {
       setSuccess(true)
     }
@@ -48,7 +48,7 @@ const ContactDialog: React.FC<ButtonModalProps> = ({
         </DialogHeader>
         <div className='px-8 pb-8 rounded-e-lg flex flex-col justify-start items-center'>
           {success ? (
-            <p>{actionEnclosure?.reply}</p>
+            <p>{(actionEnclosure as { reply?: string } | undefined)?.reply}</p>
           ) : (
             <ContactForm onSubmit={onSubmit} enclosure={actionEnclosure}/>
           )}

package/components/copyright.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Box } from '@hanzo/ui'
 
 const FIRST = 2020
 
@@ -12,9 +13,9 @@ const Copyright: React.FC<{
   const yearString = (year > FIRST) ? `${FIRST} - ${year}` : FIRST.toString()
 
   return (
-    <div className={className}>
+    <Box className={className}>
       {`Copyright © ${yearString}`}&nbsp;<br className='sm:hidden'/>Lux Partners Limited.&nbsp;<br className='md:hidden'/>&nbsp;All rights reserved.
-    </div>
+    </Box>
   )
 }
 

package/components/drawer-margin.tsx

@@ -1,7 +1,7 @@
 'use client'
 import React from 'react'
 
-import { cn } from '@hanzo/ui/util'
+import { Box, cn } from '@hanzo/ui'
 import { useCommerceDrawer } from '@luxfi/ui/commerce'
 import { observer } from 'mobx-react-lite'
 
@@ -16,7 +16,7 @@ const DrawerMargin: React.FC<{
     throw new Error("DrawerMargin must be used with a CommerceUIContext!")
   }
   return (
-    <div 
+    <Box 
       className={cn('transition-height', clx)} 
       style={{
         height: drawer.state === 'micro' ? drawer.microHeight : 0

package/components/footer.tsx

@@ -2,8 +2,7 @@ import React from 'react'
 
 import type { LinkDef } from '@hanzo/ui/types'
 import { NavItems } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
+import { Box, cn } from '@hanzo/ui'
 import Copyright from './copyright'
 import type { SiteDef } from '../site-def'
 import { legal } from '../site-def/footer/legal'
@@ -26,8 +25,8 @@ const Footer: React.FC<{
   const _aboveCopyright = (typeof aboveCopyright === 'undefined') ? legal : aboveCopyright
 
   return (
-    <footer className={cn('grow flex flex-col justify-between gap-6 pb-[2vh]', className)}> 
-      <div className={
+    <Box tag="footer" className={cn('grow flex flex-col justify-between gap-6 pb-[2vh]', className)}> 
+      <Box className={
         (noHorizPadding ? '' : 'px-5 md:px-8 ') +
         'grid grid-cols-2 gap-4 gap-y-6 md:gap-x-6 lg:gap-8 ' + smGridColsClx +  
         'md:w-full sm:justify-items-center md:mx-0 lg:w-full ' +
@@ -53,19 +52,19 @@ const Footer: React.FC<{
             />
           )
         })}
-      </div>
+      </Box>
       <div className='md:mt-[2vh]'>
       {_aboveCopyright.length > 0 && (
         <NavItems
           items={_aboveCopyright} 
           as='div' 
-          className={'flex flex-row justify-center gap-4 mb-2'} 
+          className="flex flex-row justify-center gap-4 mb-2" 
           itemClx={'text-sm text-center text-muted-2 underline hover:text-foreground'}
         />
       )} 
         <Copyright className='text-sm text-center text-muted-3'/>
       </div>
-    </footer>
+    </Box>
   )
 }
 

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

@@ -2,7 +2,7 @@
 
 import * as React from 'react'
 import Link from 'next/link'
-import { cn } from '@hanzo/ui/util'
+import { Box, cn, css } from '@hanzo/ui'
 import type { ChildMenu, LinkDefExtended } from '../../site-def/main-nav'
 import {
   NavigationMenu,
@@ -68,7 +68,7 @@ const DesktopNav: React.FC<{
         {links.map((el, index) => (
           <NavigationMenuItem key={index} className='!m-0'>
             {el.isAIMenu ? (
-              <Link href={el.href} className={cn(navigationMenuTriggerStyle(), ' text-muted-1 bg-transparent')}>
+              <Link href={el.href} style={css(cn(navigationMenuTriggerStyle(), ' text-muted-1 bg-transparent'))}>
                 {el.title}
               </Link>
             ) : el.title === 'Cards' ? (
@@ -144,7 +144,7 @@ const ListItem = React.forwardRef<
 >(({ className, title, children, ...props }, ref) => (
   <li key={title}>
     <NavigationMenuLink asChild>
-      <a
+      <Box tag="a"
         ref={ref}
         className={cn(
           'block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:text-accent-foreground focus:bg-level-1 focus:text-accent-foreground text-muted-1 hover:text-primary hover:bg-transparent duration-1000 ease-in-out',
@@ -156,7 +156,7 @@ const ListItem = React.forwardRef<
         <p className='line-clamp-3 text-sm leading-snug text-muted-1'>
           {children}
         </p>
-      </a>
+      </Box>
     </NavigationMenuLink>
   </li>
 ))
@@ -185,7 +185,7 @@ const GroupChildMenu = (params: { childs: ChildMenu[] | undefined, isCards?: boo
   }
 
   return Object.entries(groupedChildMenus).map(([groupName, childLinks], index) => (
-    <div key={groupName} className={cn('py-4 px-4 ', getChildExtraClass(index))}>
+    <Box key={groupName} className={cn('py-4 px-4 ', getChildExtraClass(index))}>
       <h2 className='text-muted-1'>{groupName}</h2>
       <ul className='w-[200px] gap-3 md:w-[250px] lg:w-[250px]'>
         {childLinks.map((link) => (
@@ -197,6 +197,6 @@ const GroupChildMenu = (params: { childs: ChildMenu[] | undefined, isCards?: boo
           </div>
         ))}
       </ul>
-    </div>
+    </Box>
   ))
 }

package/components/header/desktop.tsx

@@ -1,6 +1,6 @@
 import React, { type PropsWithChildren } from 'react'
 
-import { cn } from '@hanzo/ui/util'
+import { Box, cn } from '@hanzo/ui'
 import AuthWidget from '../auth/widget'
 
 import Logo, { type LogoVariant } from '../logo'
@@ -32,13 +32,13 @@ const DesktopHeader: React.FC<{
     // 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'
         }>
@@ -55,8 +55,8 @@ const DesktopHeader: React.FC<{
             {!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'
 
 

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='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')
-                    } onClick={() => setMenuOpen(false)} />
+                    <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,7 +1,7 @@
 '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'
@@ -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>
+        </Box>
         <AuthWidget className='text-2xl z-10' handleLogin={() => { setMenuState('login') }} />
-      </div>
+      </Box>
     ) : null
   );