@luxfi/ui 5.5.4 → 5.5.6

package/components/commerce/checkout-button.tsx

@@ -4,7 +4,7 @@ import { observable, type IObservableValue, reaction, runInAction } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
 import { Button, type ButtonProps } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
+import { Box, cn } from '@hanzo/ui'
 import { useCommerce } from '@hanzo/commerce'
 
 import { Bag } from '../icons'
@@ -49,9 +49,9 @@ const IconAndQuantity: React.FC<{
   ), [])
 
   return (
-    <div className={cn('flex items-center justify-center', clx)}>
+    <Box className={cn('flex items-center justify-center', clx)}>
     {showQuantity && (
-      <div className={cn(
+      <Box className={cn(
         'relative flex items-center justify-center mr-1', 
         ((wiggleRef.current.get() === 'more') ? 
           'item-added-to-cart-animation' 
@@ -59,19 +59,19 @@ const IconAndQuantity: React.FC<{
           (wiggleRef.current.get() === 'less') ? 'item-removed-from-cart-animation' : ''), 
       )} >
         {cmmc.cartQuantity > 0 && (
-        <div className={cn(
+        <Box className={cn(
           'z-above-content flex flex-col justify-center items-center',
           'absolute left-0 right-0 top-0 bottom-0',
           digitClx
         )}>
           <div style={{/* color: 'white'  tailwind bug? ,*/ fontSize: '11px', position: 'relative', top: '1px' }}>{cmmc.cartQuantity}</div>
-        </div>
+        </Box>
         )}
         <Bag width='19' height='24' className={cn('relative -top-[3px] opacity-70' , iconClx)} aria-hidden="true" />
-      </div>            
+      </Box>            
     )}
       {showArrow && (<span style={{fontSize: '17px',}}>&rsaquo;</span>)}
-    </div>
+    </Box>
   )
 })  
 
@@ -81,6 +81,8 @@ const CheckoutButton: React.FC<ButtonProps & {
   showArrow?: boolean
   animateOnQuantityChange?: boolean
   centerText?: boolean
+  /** A corner off the radius scale. It was a Button variant in the 5.x line. */
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
 }> = ({
   handleCheckout,
   variant='primary',
@@ -99,12 +101,12 @@ const CheckoutButton: React.FC<ButtonProps & {
       {...rest}
       onClick={handleCheckout} 
       variant={variant}
-      rounded={rounded}
-      className={cn(
+      className={cn(`rounded-${rounded}`, cn(
         'flex justify-between items-stretch group', 
         showQuantity ? (centerText ? 'px-1.5' : 'pl-2.5 pr-1.5') : '',
         className, 
-      )}
+      ))}
+      
     >
       {centerText && ( // must scale this one too, as it effects layout
         <IconAndQuantity 

package/components/commerce/checkout-panel/cart-accordian.tsx

@@ -10,8 +10,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
+import { cn, css } from '@hanzo/ui'
 import { useCommerce, CartPanel, formatCurrencyValue } from '@hanzo/commerce' 
 
 const CartAccordian: React.FC<{
@@ -33,7 +32,7 @@ const CartAccordian: React.FC<{
   return (
     <Accordion type="single" collapsible className={clx}>
       <AccordionItem value="cart" className='w-full border-b-0'>
-        <AccordionTrigger className={'!no-underline group flex justify-between '} headerClx={ triggerClx}>
+        <AccordionTrigger className="!no-underline group flex justify-between ">
           <div className='flex gap-0 items-center'>
             {icon}
             <h5 className='text-sm sm:text-xl grow'>
@@ -43,7 +42,7 @@ const CartAccordian: React.FC<{
           </div>
           <div className='flex gap-1 items-center'>
             <h5 className='text-sm sm:text-xl grow truncate'>{formatCurrencyValue(cmmc.promoAppliedCartTotal)}</h5>
-            <ChevronRight className="h-5 w-5 -mr-2 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90" />
+            <ChevronRight style={css('h-5 w-5 -mr-2 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90')} />
           </div>
         </AccordionTrigger>
         <AccordionContent className='data-[state=open]:mb-4'>

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

@@ -3,10 +3,9 @@ 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'
-
+import { Box, cn } from '@hanzo/ui'
 import { BackButton, Logo, Tooltip } from '../..'
 import DesktopBagCarousel from './desktop-bag-carousel'
 import LinksRow from './policy-links'
@@ -22,11 +21,11 @@ const DesktopCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = o
 
   const cmmc = useCommerce()
   return ( 
-    <div /* id='CHECKOUT_PANEL' */  className={cn('grid grid-cols-2',  clx)}>
+    <Box /* id='CHECKOUT_PANEL' */  className={cn('grid grid-cols-2',  clx)}>
       <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 
@@ -39,7 +38,7 @@ const DesktopCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = o
             onBack={onLeave}
           />
           <Tooltip  select='.back-button-tooltip-class' text='back' position='right' offset={5}/>
-          <div key={2} className={cn(
+          <Box key={2} className={cn(
             'w-full grow min-h-0 max-w-[550px] mx-auto flex flex-col gap-3',
             (cmmc.cartItems.length > 4 ? 'justify-between' : 'justify-start gap-10 pt-10')
           )}>
@@ -55,7 +54,7 @@ const DesktopCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = o
               showShipping
               selectItems
             />
-          </div>
+          </Box>
         </div>
       </div>
       <div key={2} className='w-full h-full flex flex-col bg-level-1 min-h-screen justify-between'>
@@ -76,7 +75,7 @@ const DesktopCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = o
           </div>
         </div>
       </div>
-    </div>
+    </Box>
   )
 })
 

package/components/commerce/checkout-panel/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import React, { useLayoutEffect, useRef, useState }  from 'react'
 
-import { capitalize, cn } from '@hanzo/ui/util'
+import { capitalize, cn } from '@hanzo/ui'
 
 import { useCommerce, ShippingStepForm, PaymentStepForm } from '@hanzo/commerce'
 import type { CheckoutStep } from '@hanzo/commerce/types'

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

@@ -2,8 +2,8 @@
 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 { Box, cn } from '@hanzo/ui'
+import AuthWidget from '../../auth/widget'
 
 import { BackButton, Logo } from '../..'
 import BagButton from '../bag-button'
@@ -20,7 +20,7 @@ const MobileCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = ({
   children
 }) => (
 
-  <div /* id='MOBILE_GRID' */ className={cn('bg-background flex flex-col justify-start px-4 pt-[101px]', clx)}>
+  <Box /* id='MOBILE_GRID' */ className={cn('bg-background flex flex-col justify-start px-4 pt-[101px]', clx)}>
     <div className='fixed z-11 top-0 h-[45px] w-full flex justify-between items-stretch bg-background'>
       <div className='flex items-stretch gap-1 grow-0'>
         <BackButton 
@@ -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='sm' variant='wordmark' href='/' onClick={onLeave} outerClx='-ml-2'/>
       </div>
       <StepIndicator 
         dotSizeRem={1} 
@@ -61,7 +61,7 @@ const MobileCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = ({
     />
     {children}
     <PolicyLinks clx='mt-auto mb-3 pt-2' />
-  </div>
+  </Box>
 )
 
 export default MobileCheckoutPanel

package/components/commerce/checkout-panel/policy-links.tsx

@@ -2,28 +2,23 @@ import React from 'react'
 import Link from 'next/link'
 
 import { Separator, buttonVariants } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-
-const linkClx = buttonVariants({ 
-  variant: 'linkMuted', 
-  size: 'link',
-  rounded: 'none', 
-})
+import { Box, cn, css } from '@hanzo/ui'
+// `link` was a SIZE in the 5.x line and is a variant here; a radius is a class.
+const linkClx = cn(buttonVariants({ variant: 'linkMuted' }), 'rounded-none')
 
 const PolicyLinks: React.FC<{
   clx?: string
 }> = ({
   clx=''
 }) => (
-  <div className={cn('flex flex-col items-center', clx)}>
+  <Box className={cn('flex flex-col items-center', clx)}>
     <Separator/>
     <div className='flex gap-4 py-2 text-sm'>
       {/* TODO: add Refund policy and Privacy policy links */}
-      <Link className={linkClx} href=''>refund policy</Link>
-      <Link className={linkClx} href=''>privacy policy</Link>
+      <Link style={css(linkClx)} href=''>refund policy</Link>
+      <Link style={css(linkClx)} href=''>privacy policy</Link>
     </div>
-  </div>   
+  </Box>   
 )
 
 export default PolicyLinks

package/components/commerce/checkout-panel/steps-indicator.tsx

@@ -5,7 +5,7 @@ import {
   BreadcrumbList,
   BreadcrumbSeparator
 } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
+import { cn } from '@hanzo/ui'
 
 const StepsIndicator: React.FC<{
   currentStep: number

package/components/commerce/desktop-bag-popup.tsx

@@ -11,7 +11,7 @@ import {
   PopoverClose,
 } from "@hanzo/ui/primitives"
 
-import { cn } from '@hanzo/ui/util'
+import { cn } from '@hanzo/ui'
 import { CartPanel, useCommerce } from '@hanzo/commerce'
 
 import { Bag } from '../icons'

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,15 +25,15 @@ 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 ' +
         '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) => {
 
@@ -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>
   ))
 }