fix components not rendering in docs

components/src/components/atoms/Avatar/Avatar.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react'
 
-import { sprinkles } from '@/src/css/sprinkles.css'
-
-import { rawColorToRGBA } from '@/src/tokens/color'
+import { iconClass, img, placeholder } from './styles.css'
 
 import { Box, type BoxProps } from '../Box/Box'
-import { avatar } from './styles.css'
+import { avatar, overlay } from './styles.css'
 import { CheckSVG } from '../../../index'
+import clsx from 'clsx'
 
 type NativeImgAttributes = React.ImgHTMLAttributes<HTMLImageElement>
 
@@ -39,19 +38,23 @@ const Placeholder = ({
   $disabled,
   $url,
   ...props
-}: PlaceholderProps & BoxProps) => (
-  <Box
-    alignItems="center"
-    background={$url || 'blueGradient'}
-    display="flex"
-    filter={$disabled ? 'grayscale(1)' : 'unset'}
-    height="full"
-    justifyContent="center"
-    position="absolute"
-    width="full"
-    {...props}
-  />
-)
+}: PlaceholderProps & BoxProps) => {
+  return (
+    <Box
+      as={$url ? 'img' : 'div'}
+      className={clsx({ [placeholder.disabled]: $disabled })}
+      alignItems="center"
+      src={$url}
+      background={!$url ? 'blueGradient' : undefined}
+      display="flex"
+      height="full"
+      justifyContent="center"
+      position="absolute"
+      width="full"
+      {...props}
+    />
+  )
+}
 
 export type AvatarProps = {
   /** Accessibility text. */
@@ -67,7 +70,7 @@ export type AvatarProps = {
   /** An element that overlays the avatar */
   checked?: boolean
   /** An svg to overlay over the avatar */
-  icon?: React.ReactElement
+  icon?: React.FC
   /** The deconding attribute of an img element */
   decoding?: NativeImgAttributes['decoding']
   /** A custom sizing for the avatar */
@@ -115,38 +118,21 @@ export const Avatar: React.FC<AvatarProps> = ({
 
   const isImageVisible = showImage && !!src
 
-  const {
-    className: imgClassName,
-    style: imgStyle,
-    otherProps: imgOtherProps,
-  } = sprinkles({
-    display: isImageVisible ? 'block' : 'none',
-    position: 'absolute',
-    height: 'full',
-    objectFit: 'cover',
-    width: 'full',
-    filter: disabled ? 'grayscale(1)' : undefined,
-    ...props,
-  })
-
-  const overlay = React.useMemo(() => {
-    if (disabled || (!icon && !checked)) return null
+  const Overlay = React.useMemo(() => {
+    if (!checked) return null
     return (
       <Box
+        className={overlay({ checked, disabled })}
         alignItems="center"
-        bg={
-          checked
-            ? rawColorToRGBA([56, 137, 255], 0.75)
-            : rawColorToRGBA([0, 0, 0], 0.25)
-        }
-        color="white"
+        color="textAccent"
         display="flex"
         justifyContent="center"
       >
-        <Box as={icon ?? <CheckSVG />} wh="40%" />
+        <Box className={iconClass} as={icon ?? CheckSVG} />
       </Box>
     )
   }, [checked, disabled, icon])
+
   return (
     <Container $shape={shape} $size={size}>
       {!isImageVisible && (
@@ -157,17 +143,16 @@ export const Avatar: React.FC<AvatarProps> = ({
         />
       )}
       <img
-        className={imgClassName}
-        style={imgStyle}
-        {...imgOtherProps}
+        className={img({ loaded: isImageVisible, disabled })}
+        {...props}
         alt={label}
         decoding={decoding}
         ref={ref}
         src={src}
         onError={() => setShowImage(false)}
         onLoad={() => setShowImage(true)}
       />
-      {overlay}
+      {Overlay}
     </Container>
   )
 }

components/src/components/atoms/Avatar/styles.css.ts

@@ -1,7 +1,59 @@
-import { globalStyle, style } from '@vanilla-extract/css'
+import { globalStyle, style, styleVariants } from '@vanilla-extract/css'
+import { commonVars } from '@/src/css/theme.css'
+import { recipe } from '@vanilla-extract/recipes'
 
 export const avatar = style({})
 
+export const img = recipe({
+  base: {
+    display: 'none',
+    position: 'absolute',
+    height: commonVars.space.full,
+    width: commonVars.space.full,
+    objectFit: 'cover',
+  },
+  variants: {
+    loaded: {
+      true: {
+        display: 'block',
+      },
+    },
+    disabled: {
+      true: {
+        filter: 'grayscale(1)',
+      },
+    },
+  },
+})
+
+export const overlay = recipe({
+  variants: {
+    checked: {
+      true: {
+        background: `rgba(56, 137, 255, 0.75)`,
+      },
+      false: {
+        background: `rgba(0,0,0, 0.25)`,
+      },
+    },
+    disabled: {
+      true: {
+        background: 'transparent',
+      },
+    },
+  },
+})
+
+export const iconClass = style({
+  width: '40%',
+})
+
+export const placeholder = styleVariants({
+  disabled: {
+    filter: 'grayscale(1)',
+  },
+})
+
 globalStyle(`${avatar} > * `, {
   position: 'absolute',
   top: 0,

components/src/components/atoms/BackdropSurface/BackdropSurface.tsx

@@ -25,7 +25,7 @@ export const BackdropSurface = React.forwardRef<HTMLElement, BackdropSurfaceProp
       transitionProperty="all"
       transitionTimingFunction="popIn"
       width="viewWidth"
-      zIndex={999}
+      zIndex={9999}
     />
   ),
 )

components/src/components/atoms/Banner/Banner.tsx

@@ -158,7 +158,7 @@ const ActionButtonIconBox = ({
 )
 
 const ActionButtonSVGBox = (props: BoxProps) => (
-  <Box display="block" height="3" width="3" {...props} {...props} />
+  <Box display="block" height="3" width="3" {...props} />
 )
 
 const ActionButton = ({
@@ -168,7 +168,7 @@ const ActionButton = ({
   onDismiss,
 }: Pick<BannerProps, 'alert' | 'onDismiss'> & { hasHref: boolean } & WithIcon) => {
   if (onDismiss) {
-    const Icon = (icon || <CrossSVG />) as React.ReactElement
+    const Icon = (icon || CrossSVG) as React.ReactElement
     return (
       <ActionButtonBox onClick={() => onDismiss()}>
         <ActionButtonIconBox $alert={alert} $hasAction>
@@ -178,7 +178,7 @@ const ActionButton = ({
     )
   }
   if (hasHref || icon) {
-    const Icon = (icon || <UpRightArrowSVG />) as React.ReactElement
+    const Icon = (icon || UpRightArrowSVG)
     return (
       <ActionButtonBox as="div">
         <ActionButtonIconBox $alert={alert} $hasAction={false}>
@@ -207,15 +207,17 @@ export const Banner = React.forwardRef<
       = icon
       || (alert && ['error', 'warning'].includes(alert)
         ? (
-            <AlertSVG />
+            AlertSVG
           )
         : (
-            <EthSVG />
+            EthSVG
           ))
 
     const hasHref = !!props.href
     const hasAction = hasHref || !!props.onClick
 
+    console.log('as', asProp, props)
+
     return (
       <ContainerBox
         {...props}

components/src/components/atoms/DynamicPopover/DynamicPopover.tsx

@@ -8,6 +8,7 @@ import { Box } from '../Box/Box'
 import { getValueForTransitionState } from './utils/getValueForTransitionState'
 import { container } from './style.css'
 import { debounce } from '../../../utils/debounce'
+import { useBreakPoints } from '@/src/hooks/useBreakpoints'
 
 export type DynamicPopoverSide = 'top' | 'right' | 'bottom' | 'left'
 
@@ -24,7 +25,8 @@ export type DynamicPopoverAnimationFunc = (
   verticalClearance: number,
   side: DynamicPopoverSide,
   mobileSide: DynamicPopoverSide,
-) => { translate: string, mobileTranslate: string }
+  isDesktop: boolean,
+) => string
 
 export type DynamicPopoverButtonProps = {
   pressed?: boolean
@@ -104,6 +106,7 @@ const defaultAnimationFunc: DynamicPopoverAnimationFunc = (
   verticalClearance: number,
   side: string,
   mobileSide: string,
+  isDesktop: boolean,
 ) => {
   let translate = ''
   if (side === 'top') translate = `translate(0, -${verticalClearance}px)`
@@ -121,7 +124,7 @@ const defaultAnimationFunc: DynamicPopoverAnimationFunc = (
     mobileTranslate = `translate(0, ${verticalClearance}px)`
   else mobileTranslate = `translate(-${horizontalClearance}px, 0)`
 
-  return { translate, mobileTranslate }
+  return isDesktop ? translate : mobileTranslate
 }
 
 const checkRectContainsPoint = (
@@ -138,12 +141,11 @@ const checkRectContainsPoint = (
 }
 
 const makeWidth = (width: number | string) =>
-  typeof width === 'number' ? `${width}px` : width
+  typeof width === 'number' ? width : width
 
 type PopoverBoxProps = {
   $state: TransitionState
   $translate: string
-  $mobileTranslate: string
   $width: number | string
   $mobileWidth: number | string
   $x: number
@@ -158,7 +160,6 @@ const PopoverBox = React.forwardRef<HTMLElement, BoxProps & PopoverBoxProps>(
     {
       $state,
       $translate,
-      $mobileTranslate,
       $width,
       $mobileWidth,
       $x,
@@ -176,18 +177,23 @@ const PopoverBox = React.forwardRef<HTMLElement, BoxProps & PopoverBoxProps>(
       className={container}
       display="block"
       fontFamily="sans"
-      left={getValueForTransitionState($state.status, 'leftFunc')($x)}
+      style={{
+        left: getValueForTransitionState($state.status, 'leftFunc')($x),
+        top: getValueForTransitionState($state.status, 'topFunc')($y),
+        transform: `translate3d(0,0,0) ${$translate}`,
+      }}
+      // left={getValueForTransitionState($state.status, 'leftFunc')($x)}
       opacity={getValueForTransitionState($state.status, 'opacity')}
       overflow={$hideOverflow ? 'hidden' : 'visible'}
       pointerEvents={getValueForTransitionState($state.status, 'pointerEvents')}
       position="absolute"
       ref={ref}
-      top={getValueForTransitionState($state.status, 'topFunc')($y)}
-      transform={{
-        base: `translate3d(0, 0, 0) ${$mobileTranslate}`,
-        sm: `translate3d(0, 0, 0) ${$translate}`,
-      }}
-      transitionDuration={`${$transitionDuration}ms`}
+      // top={getValueForTransitionState($state.status, 'topFunc')($y)}
+      // transform={{
+      //   base: `translate3d(0, 0, 0) ${$mobileTranslate}`,
+      //   sm: `translate3d(0, 0, 0) ${$translate}`,
+      // }}
+      transitionDuration={$transitionDuration}
       transitionProperty={getValueForTransitionState(
         $state.status,
         'transitionProperty',
@@ -206,11 +212,11 @@ export const DynamicPopover: React.FC<DynamicPopoverProps> = ({
   animationFn: _animationFn,
   anchorRef,
   onShowCallback,
-  width = 250,
-  mobileWidth = 150,
+  width = 60,
+  mobileWidth = 36,
   useIdealPlacement = false,
   additionalGap = 0,
-  transitionDuration = 350,
+  transitionDuration = 300,
   isOpen,
   align = 'center',
   hideOverflow,
@@ -329,20 +335,23 @@ export const DynamicPopover: React.FC<DynamicPopoverProps> = ({
         verticalClearance: number,
         side: DynamicPopoverSide,
         mobileSide: DynamicPopoverSide,
+        isDesktop: boolean,
       ) =>
-        _animationFn(horizontalClearance, verticalClearance, side, mobileSide)
+        _animationFn(horizontalClearance, verticalClearance, side, mobileSide, isDesktop)
     }
     return (
       horizontalClearance: number,
       verticalClearance: number,
       side: DynamicPopoverSide,
       mobileSide: DynamicPopoverSide,
+      isDesktop: boolean,
     ) =>
       defaultAnimationFunc(
         horizontalClearance,
         verticalClearance,
         side,
         mobileSide,
+        isDesktop,
       )
   }, [_animationFn])
 
@@ -439,11 +448,15 @@ export const DynamicPopover: React.FC<DynamicPopoverProps> = ({
     ? positionState.idealMobilePlacement
     : mobilePlacement
 
-  const { translate, mobileTranslate } = animationFn(
+  const breakpoints = useBreakPoints()
+  console.log('breakpoints', breakpoints)
+
+  const translate = animationFn(
     positionState.horizontalClearance,
     positionState.verticalClearance,
     _placement,
     _mobilePlacement,
+    breakpoints.sm,
   )
 
   const renderCallback = React.useCallback(() => {
@@ -456,7 +469,6 @@ export const DynamicPopover: React.FC<DynamicPopoverProps> = ({
       <PopoverBox
         $hideOverflow={hideOverflow}
         // $isControlled={isControlled}
-        $mobileTranslate={mobileTranslate}
         $mobileWidth={mobileWidth}
         $state={state}
         $transitionDuration={transitionDuration}