@hanzo/commerce 7.6.4 → 7.7.0

package/components/add-to-cart-widget.tsx

@@ -3,9 +3,12 @@ import React, { useEffect, useRef } from 'react'
 import { reaction, type IReactionDisposer } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
-import { Button, buttonVariants } from '@hanzo/ui/primitives'
-import { cn, type VariantProps } from '@hanzo/ui/util'
-
+import {
+  Button,
+  buttonVariants,
+  cn,
+  sx,
+} from '@hanzo/ui'
 import Icons from './Icons'
 import type { LineItem } from '../types'
 import { sendFBEvent, sendGAEvent } from '../util/analytics'
@@ -43,9 +46,12 @@ const AddToCartWidget: React.FC<{
     }
   }, [])
 
-  const ROUNDED_VAL = 'lg'
-    // no need to safelist, since its used widely
-  const ROUNDED_CLX = ` rounded-${ROUNDED_VAL} `
+  // `rounded-lg` written out, not interpolated. The note that used to sit here
+  // said safelisting was unnecessary "since its used widely" — which is true
+  // only for as long as some OTHER file in whatever the consumer scans spells it
+  // literally. Tailwind reads source text; a template literal is not a class
+  // name, so this one was borrowing a rule it did not ask for.
+  const ROUNDED_CLX = ' rounded-lg ' // the class
 
   const ghost = variant === 'minimal'
   const outline = variant === 'outline'
@@ -111,7 +117,7 @@ const AddToCartWidget: React.FC<{
   return ( item.isInCart ? (
     <div className={cn(
       'flex flex-row items-stretch justify-between ',
-        // should match 'xs' and 'default' button heights
+        // should match 'sm' and 'default' button heights
       (ghost || priSmaller ? 'h-8' : 'h-9'),
       ROUNDED_CLX,
       (primary || priSmaller ? 'bg-primary' : 'bg-transparent'), 
@@ -120,9 +126,9 @@ const AddToCartWidget: React.FC<{
     )}>
       <Button
         aria-label={'Remove a ' + item.title + ' from the cart'}
-        size={ghost || priSmaller ? 'xs' : 'default'}
+        size={ghost || priSmaller ? 'sm' : 'default'}
         variant={primary || priSmaller ? 'primary' : 'ghost'}
-        rounded={ghost ? 'full' : ROUNDED_VAL}
+        {...sx(ghost ? 'rounded-full' : 'rounded-lg')}
         className={cn(
           'lg:min-w-0 lg:px-2 grow justify-start group', 
           (ghost || priSmaller ? 'px-1' : 'px-2'), 
@@ -151,10 +157,10 @@ const AddToCartWidget: React.FC<{
         itemProp='potentialAction'
         itemScope
         itemType='https://schema.org/AddAction'
-        size={ghost || priSmaller ? 'xs' : 'default'}
+        size={ghost || priSmaller ? 'sm' : 'default'}
 
         variant={primary || priSmaller ? 'primary' : 'ghost'}
-        rounded={ghost ? 'full' : ROUNDED_VAL}
+        {...sx(ghost ? 'rounded-full' : 'rounded-lg')}
         className={cn(
           'lg:min-w-0 lg:px-2 grow justify-end group', 
           (ghost || priSmaller ? 'px-1' : 'px-2'), 
@@ -174,9 +180,9 @@ const AddToCartWidget: React.FC<{
       itemProp='potentialAction'
       itemScope
       itemType='https://schema.org/AddAction'
-      size={ghost || priSmaller ? 'xs' : 'default'}
+      size={ghost || priSmaller ? 'sm' : 'default'}
       variant={ghost ? 'ghost' : (primary || priSmaller ? 'primary' : 'outline')}
-      rounded={ROUNDED_VAL}
+      {...sx('rounded-lg')}
       className={cn(buttonClx, className)}
       onClick={inc}
     >

package/components/buy/buy-card.tsx

@@ -3,9 +3,11 @@ import React, { useRef, useEffect, type ComponentType } from 'react'
 import { reaction, type IReactionDisposer } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
-import { cn } from '@hanzo/ui/util'
-import { ApplyTypography, MediaStack } from '@hanzo/ui/primitives'
-
+import {
+  cn,
+  ApplyTypography,
+  MediaStack,
+} from '@hanzo/ui'
 import type { 
   ItemSelectorProps, 
   ItemSelectorCompProps,
@@ -207,11 +209,19 @@ const BuyCard: React.FC<{
       </ApplyTypography>
       <NodeTabs
         className={cn(
-          'grid gap-0 align-stretch justify-normal ' + `grid-cols-${inst.current.requestedNode.subNodes!.length}`, 
+          'grid gap-0 align-stretch justify-normal',
           'border-b-2 rounded-lg border-level-3 mb-4 -mr-2 -ml-2 max-w-[460px] h-10', // height is needed for iPhone bug
           (scroll ? 'shrink-0' : ''),
-          famWidgetClx  
-        )} 
+          famWidgetClx
+        )}
+        // One column per sub-node. The count used to be interpolated into a
+        // column-count utility in the className, and Tailwind's extractor never
+        // saw it: the extractor reads source text, and a template literal is not
+        // a class name. The element got `display:grid` with the default
+        // `grid-template-columns: none`, so every family tab row stacked in a
+        // single column. `repeat(n, minmax(0, 1fr))` is exactly what the utility
+        // would have compiled to, and it holds for any n.
+        style={{ gridTemplateColumns: `repeat(${inst.current.requestedNode.subNodes!.length}, minmax(0, 1fr))` }}
         mobile={mobile}
         mutator={allVariants ? 
           {
@@ -234,7 +244,7 @@ const BuyCard: React.FC<{
       <TitleArea title={famTitle} clx=''/>
     )}
     {(cmmc.currentItem && showItemMedia) && (
-      <MediaStack media={cmmc.currentItem} constrainTo={{w: 200, h: 200}} clx={(scroll ? 'shrink-0' : '')}/>
+      <MediaStack media={cmmc.currentItem} constrainTo={{w: 200, h: 200}} className={(scroll ? 'shrink-0' : '')}/>
     )} 
     {itemsToShow && (
       <Selector 

package/components/buy/carousel-buy-card.tsx

@@ -7,8 +7,9 @@ import React, {
 } from 'react'
 import { observer } from 'mobx-react-lite'
 
-import { cn } from '@hanzo/ui/util'
-
+import {
+  cn,
+} from '@hanzo/ui'
 import type { 
   ItemSelectorProps, 
   LineItem, 

package/components/buy/multi-family/all-variants-carousel.tsx

@@ -3,9 +3,8 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { reaction } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
-import { cn } from '@hanzo/ui/util'
-
 import {
+  cn,
   ApplyTypography,
   type CarouselApi,
   Carousel,
@@ -14,8 +13,7 @@ import {
   CarouselPrevious,
   CarouselNext,
   MediaStack,
-} from '@hanzo/ui/primitives'
-
+} from '@hanzo/ui'
 import type { MultiFamilySelectorProps, LineItem } from '../../../types'
 import { 
   formatCurrencyValue, 
@@ -238,7 +236,7 @@ const AllVariantsCarousel: React.FC<MultiFamilySelectorProps> = ({
           <CarouselContent>
           {r.current.items.map((item) => (
             <CarouselItem key={item.sku} className={cn('p-2 flex flex-col justify-center items-center', itemClx)}>
-              <MediaStack media={item} constrainTo={mediaConstraint} clx='my-4'/>
+              <MediaStack media={item} constrainTo={mediaConstraint} className='my-4'/>
             </CarouselItem>
           ))}
           </CarouselContent>

package/components/buy/multi-family/family-carousel/index.tsx

@@ -1,17 +1,15 @@
 'use client'
 import React, { useCallback, useRef } from 'react'
 
-import { cn } from '@hanzo/ui/util'
-
 import {
+  cn,
   type CarouselApi,
   Carousel,
   CarouselContent,
   CarouselItem,
   CarouselPrevious,
   CarouselNext,
-} from '@hanzo/ui/primitives'
-
+} from '@hanzo/ui'
 import type { MultiFamilySelectorProps } from '../../../../types'
 
 import FamilySlide from './slide'

package/components/buy/multi-family/family-carousel/slide.tsx

@@ -3,14 +3,13 @@ import React from 'react'
 
 import {
   ApplyTypography,
-  MediaStack
-} from '@hanzo/ui/primitives'
+  MediaStack,
+  cn,
+} from '@hanzo/ui'
 import type { Dimensions } from '@hanzo/ui/types'
 
 import type { ItemSelectorOptions, Family, LineItem, ItemSelector } from '../../../../types'
 import { ButtonItemSelector } from '../../..'
-import { cn } from '@hanzo/ui/util'
-
 const FamilySlide: React.FC<Omit<ItemSelector, 'items'> & {
   family: Family
   mediaConstraint: Dimensions

package/components/buy/single-family-selector.tsx

@@ -1,7 +1,11 @@
 import React from 'react'
 import { observer } from 'mobx-react-lite'
 
-import { MediaStack, Skeleton } from '@hanzo/ui/primitives'
+import {
+  MediaStack,
+  Skeleton,
+  cn,
+} from '@hanzo/ui'
 import type { Dimensions } from '@hanzo/ui/types'
 
 import { useCommerce } from '../..'
@@ -9,9 +13,6 @@ import { useCommerce } from '../..'
 import type { ItemSelectorOptions, ItemSelectorProps, LineItem } from '../../types'
 import TitleAndByline from './title-and-byline'
 import { accessItemOptions } from '../../util'
-import { cn } from '@hanzo/ui/util'
-
-
 const DEF_MEDIA_CONSTRAINT = {w: 200, h: 200}
 
 const SingleFamilySelector: React.FC<{
@@ -61,7 +62,7 @@ const SingleFamilySelector: React.FC<{
       <MediaStack 
         media={cmmc.currentItem!} 
         constrainTo={mediaConstraint} 
-        clx={'mb-2 ' + (scrollable ? 'shrink-0' : '')}
+        className={'mb-2 ' + (scrollable ? 'shrink-0' : '')}
       />
     ) : (
       <Skeleton className={'w-[200px] h-[200px] my-2 ' + (scrollable ? 'shrink-0' : '')}/>

package/components/buy/title-and-byline.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 
-import { ApplyTypography } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
+import {
+  ApplyTypography,
+  cn,
+} from '@hanzo/ui'
 const TitleAndByline: React.FC<{
   title: string | undefined
   byline?: string | undefined

package/components/cart/cart-panel/cart-line-item.tsx

@@ -3,9 +3,10 @@
 import React from 'react'
 import { observer } from 'mobx-react-lite'
 
-import { cn } from '@hanzo/ui/util'
-import { Image } from '@hanzo/ui/primitives'
-
+import {
+  cn,
+  MediaStack,
+} from '@hanzo/ui'
 import type { LineItem } from '../../../types'
 import { formatCurrencyValue } from '../../../util'
 import AddToCartWidget from '../../add-to-cart-widget'
@@ -53,7 +54,7 @@ const CartLineItem: React.FC<{
     >
       <div className='flex flex-row justify-between items-center gap-1' >
         {item.img ? (
-          <Image def={item.img} constrainTo={{w: imgSizePx, h: imgSizePx}} />
+          <MediaStack media={item} constrainTo={{w: imgSizePx, h: imgSizePx}} />
         ) : ( // placeholder so things align
           <div style={{height: imgSizePx, width: imgSizePx}} className='bg-level-3'/>
         )}

package/components/cart/cart-panel/index.tsx

@@ -3,9 +3,12 @@ import React, { useLayoutEffect, type PropsWithChildren } from 'react'
 import { reaction } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
-import { Button, ScrollArea } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
+import {
+  Button,
+  ScrollArea,
+  cn,
+  sx,
+} from '@hanzo/ui'
 import type { LineItem } from '../../../types'
 import { useCommerce } from '../../../service/context'
 import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
@@ -141,7 +144,7 @@ const CartPanel: React.FC<PropsWithChildren & {
         <Button 
           onClick={_handleCheckout} 
           variant='primary' 
-          rounded='lg' 
+          {...sx('rounded-lg')}
           className={cn('mt-12 mx-auto w-full sm:max-w-[220px]', buttonClx)} 
         >
           Checkout

package/components/cart/cart-panel/promo-code.tsx

@@ -9,18 +9,14 @@ import * as z from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Check } from 'lucide-react'
 
-import { 
-  Button, 
-  Input 
-} from '@hanzo/ui/primitives'
-
 import {
+  Button,
+  Input,
   Form,
   FormControl,
   FormField,
   FormItem,
-} from '@hanzo/ui/form'
-
+} from '@hanzo/ui'
 import { useCommerce } from '../../../service/context'
 import type { Promo } from '../../../types'
 import getPromoFromApi from '../../../util/promo-codes'

package/components/cart/cart-panel/total-area.tsx

@@ -2,8 +2,9 @@
 import React, { Suspense } from 'react'
 import { observer } from 'mobx-react-lite'
 
-import { cn } from '@hanzo/ui/util'
-
+import {
+  cn,
+} from '@hanzo/ui'
 import { formatCurrencyValue } from '../../../util'
 import PromoCode from './promo-code'
 import { useCommerce } from '../../../service/context'

package/components/checkout/payment-step-form/cc-button.tsx

@@ -1,5 +1,6 @@
-import { Button } from '@hanzo/ui/primitives'
-
+import {
+  Button,
+} from '@hanzo/ui'
 import PaymentMethods from './card-icon-row'
 import type { PropsWithChildren } from 'react'
 

package/components/checkout/payment-step-form/contact-form.tsx

@@ -1,13 +1,11 @@
-import { Input } from '@hanzo/ui/primitives'
-
 import {
+  Input,
   Form,
   FormControl,
   FormField,
   FormItem,
   FormMessage,
-} from '@hanzo/ui/form'
-
+} from '@hanzo/ui'
 import type { ContactFormType } from '../../../types'
  
 const ContactForm: React.FC<{

package/components/checkout/payment-step-form/index.tsx

@@ -6,8 +6,12 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import * as z from 'zod'
 import { useForm } from 'react-hook-form'
 
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@hanzo/ui/primitives'
-
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@hanzo/ui'
 import { useCommerce } from '../../../service/context'
 import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
 import type { CheckoutStepComponentProps, TransactionStatus } from '../../../types'

package/components/checkout/payment-step-form/methods/bank-transfer.tsx

@@ -3,8 +3,10 @@
 import React from 'react'
 import { Copy } from 'lucide-react'
 
-import { Button, toast } from '@hanzo/ui/primitives'
-
+import {
+  Button,
+  toast,
+} from '@hanzo/ui'
 import type { PaymentMethodComponentProps } from '../../../../types'
 
 import ContactForm from '../contact-form'

package/components/checkout/payment-step-form/methods/card.tsx

@@ -11,10 +11,8 @@ import {
   Button,
   Separator,
   Skeleton,
-} from '@hanzo/ui/primitives'
-
-import { cn } from '@hanzo/ui/util'
-
+  cn,
+} from '@hanzo/ui'
 import { useCommerce } from '../../../../service/context'
 import { processSquareCardPayment } from '../../../../util'
 import type { PaymentMethodComponentProps } from '../../../../types'

package/components/checkout/payment-step-form/methods/crypto.tsx

@@ -6,18 +6,17 @@ import { observer } from 'mobx-react-lite'
 
 import { ethers } from 'ethers'
 
-import { 
-  Button, 
-  Input, 
-  Select, 
-  SelectContent, 
-  SelectGroup, 
-  SelectItem, 
-  SelectTrigger, 
-  SelectValue, 
-  toast 
-} from '@hanzo/ui/primitives'
-
+import {
+  Button,
+  Input,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  toast,
+} from '@hanzo/ui'
 import Eth from '../crypto-icons/eth'
 import { useCommerce } from '../../../../service/context'
 import type { PaymentMethodComponentProps } from '../../../../types'
@@ -178,7 +177,7 @@ const PayWithCrypto: React.FC<PaymentMethodComponentProps> = observer(({
         <div className='flex gap-2 grid grid-cols-3'>
           <Select onValueChange={(token) => {/*ONLY ETH  setSelectedToken(token) */}} defaultValue='eth'>
             <SelectTrigger>
-              <SelectValue defaultValue='eth' />
+              <SelectValue />
             </SelectTrigger>
             <SelectContent>
               <SelectGroup>

package/components/checkout/shipping-step-form.tsx

@@ -11,17 +11,13 @@ import {
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue
-} from '@hanzo/ui/primitives'
-
-import {
+  SelectValue,
   Form,
   FormControl,
   FormField,
   FormItem,
   FormMessage,
-} from '@hanzo/ui/form'
-
+} from '@hanzo/ui'
 import { useCommerce } from '../../service/context'
 
 import countries from '../../util/countries'

package/components/item/product-card.tsx

@@ -1,16 +1,14 @@
 import React from 'react'
 
-import { 
+import {
   Card,
   CardContent,
   CardFooter,
   CardHeader,
   CardTitle,
-  MediaStack
-} from '@hanzo/ui/primitives'
-
-import { cn } from '@hanzo/ui/util'
-
+  MediaStack,
+  cn,
+} from '@hanzo/ui'
 import { formatCurrencyValue } from '../../util'
 import type { LineItem } from '../../types'
 
@@ -29,7 +27,10 @@ const ProductCard: React.FC<ProductCardProps> = ({
     itemScope
     itemType='https://schema.org/Product'
     className={cn('max-h-[360px] lg:min-w-[200px] max-w-[260px] overflow-hidden', className)}
-    {...props}
+    // A div's whole attribute set, spread onto a cross-platform component that
+    // names a few of them differently. The element a Card renders IS a div, and
+    // it is the one these reach.
+    {...(props as object)}
   >
     {/* Standard schema.org Product microdata. Neutral and analytics-agnostic:
         track.js `annotate`, GA4 Merchant, or any reader picks up the item with
@@ -38,7 +39,7 @@ const ProductCard: React.FC<ProductCardProps> = ({
     <meta itemProp='name' content={item.title} />
     <meta itemProp='sku' content={item.sku} />
     <CardHeader className='w-full border-b p-6 min-h-[180px] max-h-[240px] relative'>
-      <MediaStack media={item} constrainTo={{w: 700, h:700}} clx='p-6' />
+      <MediaStack media={item} constrainTo={{w: 700, h:700}} className='p-6' />
     </CardHeader>
     <CardContent className='grid gap-2.5 p-4'>
       <CardTitle className='text-sm sm:text-base flex flex-col justify-start items-center line-clap-3'>

package/components/item-selector/button.tsx

@@ -4,13 +4,13 @@ import { observer } from 'mobx-react-lite'
 
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
 
-import { 
-  Image, 
-  Label, 
-  RadioGroup, 
-  ScrollArea 
-} from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
+import {
+  Label,
+  RadioGroup,
+  ScrollArea,
+  cn,
+  MediaStack,
+} from '@hanzo/ui'
 import type { Dimensions } from '@hanzo/ui/types'
 
 import type { ItemSelectorProps, LineItem } from '../../types'
@@ -20,6 +20,25 @@ import QuantityIndicator from './quantity-indicator'
 
 const DEFAULT_CONSTRAINT = {h: 36, w: 72} // // Apple suggest 42px for clickability
 
+// `ImageDef.rounded` is a corner of the radius scale, spelled by whoever wrote
+// the catalog. It used to be pasted straight into a class — `rounded-${...}` —
+// and Tailwind reads source text, so no such rule was ever generated: setting
+// `rounded: 'full'` produced LESS rounding than leaving it unset, because the
+// truthy branch handed back a class name with nothing behind it while the
+// default branch at least said `rounded-sm`. Writing the scale out is what makes
+// the extractor see it. Anything off the scale falls back to the default, which
+// is what the old code did by accident for every value.
+const ROUNDED: Record<string, string> = {
+  none: 'rounded-none',
+  sm: 'rounded-sm',
+  md: 'rounded-md',
+  lg: 'rounded-lg',
+  xl: 'rounded-xl',
+  '2xl': 'rounded-2xl',
+  '3xl': 'rounded-3xl',
+  full: 'rounded-full',
+}
+
 const ImageRadioGroupItem = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Item>,
   Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, 'value' | 'id'> & {
@@ -44,14 +63,14 @@ const ImageRadioGroupItem = React.forwardRef<
         'focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
         className,
         'overflow-hidden',
-        img?.rounded ? `rounded-${img.rounded}` : 'rounded-sm'
+        (img?.rounded && ROUNDED[img.rounded]) || 'rounded-sm'
       )}
       {...props}
       id={item.sku}
       value={item.sku}
     >
       {img ? (
-        <Image def={img} constrainTo={constrainTo} preload className=''/>
+        <MediaStack media={{img}} constrainTo={constrainTo} />
       ) : ( // placeholder so things align
         <div style={{height: constrainTo.h, width: constrainTo.w}}/>
       )}
@@ -151,12 +170,18 @@ const ButtonItemSelector: React.FC<ItemSelectorProps> = observer(({
  
   return showButtonIfOnlyOne || items.length > 1 ? (
     <RadioGroup
-      className={cn( 
-        (scrollable ? 'shrink min-h-0 gap-0' : (mobile ? 'gap-3' : 'gap-1')), 
-        (horizButtons ? `grid grid-cols-${items.length} gap-1` : 'flex flex-col'),
+      className={cn(
+        (scrollable ? 'shrink min-h-0 gap-0' : (mobile ? 'gap-3' : 'gap-1')),
+        (horizButtons ? 'grid gap-1' : 'flex flex-col'),
         (mobile && showText) ? 'min-w-pr-50' : '',
         clx,
       )}
+      // One column per item, same as the family tabs: the count is data, and
+      // data cannot be a class name. Interpolating it produced a rule only when
+      // the number happened to be 3, because two other files in this package
+      // spell that one literally — so this laid out correctly in a three-option
+      // selector and stacked in every other.
+      style={horizButtons ? { gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` } : undefined}
       onValueChange={selectSku}
       value={itemRef.item ? itemRef.item.sku : ''}
       data-vaul-no-drag 

package/components/item-selector/carousel/index.tsx

@@ -3,10 +3,8 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { reaction } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
-import { cn } from '@hanzo/ui/util'
-import type { Dimensions } from '@hanzo/ui/types'
-
 import {
+  cn,
   ApplyTypography,
   type CarouselOptions,
   type CarouselApi,
@@ -16,7 +14,8 @@ import {
   CarouselPrevious,
   CarouselNext,
   MediaStack,
-} from '@hanzo/ui/primitives'
+} from '@hanzo/ui'
+import type { Dimensions } from '@hanzo/ui/types'
 
 import type { ItemSelectorProps, LineItem } from '../../../types'
 import { formatCurrencyValue, accessItemOptions } from '../../../util'
@@ -43,7 +42,7 @@ const ItemSlide: React.FC<{
   clx=''
 }) => (
   <CarouselItem className={cn('p-2 flex flex-col justify-center items-center', clx)}>
-    <MediaStack media={item} constrainTo={constrainTo} clx='my-4' />
+    <MediaStack media={item} constrainTo={constrainTo} className='my-4' />
   </CarouselItem>
 ) 
 

package/components/item-selector/carousel/slider.tsx

@@ -1,8 +1,9 @@
 'use client'
 import React, { useEffect, useState } from 'react'
 
-import { Slider } from '@hanzo/ui/primitives'
-
+import {
+  Slider,
+} from '@hanzo/ui'
 const ItemCarouselSlider: React.FC<{
   clx?: string
   setScrollTo: (scrollTo: (index: number) => void) => void
@@ -22,11 +23,7 @@ const ItemCarouselSlider: React.FC<{
 
   return ( 
     <Slider 
-      className={clx} 
-      thumbClx='w-8 border-muted border-2 bg-level-1 focus-visible:ring-0 focus-visible:ring-offset-0 transition-none' 
-      trackBgClx='bg-level-3'
-      rangeBgClx='bg-level-3'
-      thumbSlidingClx='bg-muted-2' 
+      className={clx}   
       defaultValue={[0]} 
       min={0}
       max={numStops - 1}