import React from 'react';
import { PHXHorizontalStack } from '../HorizontalStack';
import { PHXTextV2 } from '../TextV2';
export const PHXLegend = ({ children }) => {
    return (React.createElement(PHXHorizontalStack, { gapX: 'loose', gapY: 'loose', items: 'start' }, children));
};
const Item = ({ color, label }) => {
    const colorMap = {
        default: 'bg-gray-800',
        subdued: 'bg-gray-500',
        critical: 'bg-red-600',
        success: 'bg-emerald-600',
        primary: 'bg-gray-900',
        secondary: 'text-gray-700',
        warning: 'bg-[#FFD6A4]',
        info: 'bg-[#91D0FF]',
        highlight: 'bg-[#89F5B5]',
        neutral: 'bg-[#F0F0F0]',
        attention: 'bg-[#FFEF9D]',
        decorative: 'bg-[#F8D1FF]',
        danger: 'bg-[#FFC1BF]',
    };
    return (React.createElement(PHXHorizontalStack, { gapX: 'atomic', justify: 'center', items: 'center' },
        React.createElement("div", { className: `w-3 h-3 rounded-sm ${colorMap[color]}` }),
        React.createElement(PHXTextV2, { size: 'micro' }, label)));
};
PHXLegend.Item = Item;
//# sourceMappingURL=Legend.js.map