<!-- source-hash: 00831f49d3f69f4283d8a0c7a7a3bfd4 -->
A React component for displaying pricing information with flexible styling configurations and support for both structured and legacy string pricing formats.

## Key Components

### Main Exports
- **`PricingDisplay`** - Main component for rendering pricing with configurable styles
- **`PRICING_STYLES`** - Predefined style configurations (comparison, compact, card)
- **`formatPricingForDisplay`** - Utility function for preprocessing pricing strings

### Internal Functions
- **`formatPriceValue`** - Formats price values with optional tilde prefix
- **`LegacyPricingDisplay`** - Backward compatibility component for string inputs
- **`parsePricing`** - String parser for extracting price and unit information

### Types
- **`PricingStyleConfig`** - Configuration interface for text sizes, colors, and display options
- **`PricingDisplayProps`** - Component props supporting structured or string pricing data

## Usage Example

```typescript
import { PricingDisplay, PRICING_STYLES } from './pricing-display'

// With structured pricing data
const structuredPricing = [{
  ranges: [{ min: 25, unit: 'user/month' }]
}]

// Basic usage with default styling
<PricingDisplay pricing={structuredPricing} />

// With custom compact styling
<PricingDisplay 
  pricing={structuredPricing}
  styleConfig={PRICING_STYLES.compact}
  className="my-2"
/>

// Legacy string support
<PricingDisplay pricing="$25/user/month" />

// Multiple pricing tiers
<PricingDisplay pricing={[
  { ranges: [{ min: 10, unit: 'device/month' }] },
  { ranges: [{ min: 120, unit: 'device/year' }] }
]} />
```

The component automatically handles various pricing formats including free tiers, contact-based pricing, and multi-tier structures while maintaining consistent visual presentation across different UI contexts.