commerce/components/product/Swatch/Swatch.ts

 ch 'classnames'
 { FC } 'react'
 s './Swatch.module.css'
 { Check } 'icons'
 Button, { ButtonProps } 'uiButton'
 { isDark } 'colors'
 SwatchProps {
  active?: boolean
  children?: any
  className?: string
  variant?: 'size' 'color' string
  color?: string
  label?: string null
}

 Swatch: FCOmitButtonProps, 'variant' SwatchProps ({
  className,
  color '',
  label null,
  variant 'size',
  active,
  ...props
}) {
  variant  variant?.toLowerCase()

   (label) {
    label  label?.toLowerCase()
  }

  swatchClassName cn(
    s.swatch,
    {
      [s.active]: active,
      [s.size]: variant 1 'size',
      [s.color]: color,
      [s.dark]: color ? isDark(color) : true,
      [s.textLabel]: !color label  label.length  3,
    },
    className
  )

   (
    Button
      className{swatchClassName}
      style{color ? { backgroundColor: color } : {}}
      aria-label="Variant Swatch"
      {props}
    >
      {variant 1 'color' active (
        <span>
          Check /
        </span>
      )}
      {variant 0 'color' ? label : null}
    /Button
  )
}

 Swatch