Icon

import { ark } from '@ark-ui/react/factory'
import type { ComponentProps } from 'react'
import { styled } from 'styled-system/jsx'
import { icon } from 'styled-system/recipes'

export type IconProps = ComponentProps<typeof Icon>
export const Icon = styled(ark.svg, icon, {
  defaultProps: { asChild: true },
})

import { defineRecipe } from '@pandacss/dev'

export const icon = defineRecipe({
  className: 'icon',
  base: {
    color: 'currentcolor',
    display: 'inline-block',
    flexShrink: '0',
    verticalAlign: 'middle',
    lineHeight: '1em',
  },
  defaultVariants: {
    size: 'md',
  },
  variants: {
    size: {
      '2xs': { boxSize: '3' },
      xs: { boxSize: '4' },
      sm: { boxSize: '4.5' },
      md: { boxSize: '5' },
      lg: { boxSize: '5.5' },
      xl: { boxSize: '6' },
    },
  },
})